boocode/apps/web/src/components/PaneHeaderActions.tsx

import { Code, Columns2, History, MessageSquare, Plus, RotateCcw, Swords, Terminal, Workflow, X } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';

// Shared pane-header action cluster: + (new) / Split / Reopen-closed-pane /
// Session history / Close. Rendered in the chat tab bar (ChatTabBar) and the
// desktop coder + terminal pane headers (Workspace) so all pane kinds share one
// control set. Extracted to avoid a divergent copy per header.
interface Props {
  // Mixed tabs: the "+" menu adds a tab of the chosen kind to THIS pane. Split
  // (the second control) adds a new pane.
  onNewTab: (kind: 'chat' | 'terminal' | 'coder') => void;
  onSplitPane: (kind: 'chat' | 'terminal' | 'coder') => void;
  // When provided, shows a "New Orchestrator" item that opens the flow launcher.
  // Orchestrators are always split (run-bound; can't live as a tab in another pane).
  onNewOrchestrator?: () => void;
  // When provided, shows a "New Arena" item that opens the arena launcher.
  onNewArena?: () => void;
  onReopenPane?: () => void;
  onShowHistory: () => void;
  onRemovePane?: () => void;
  // Highlights the History button when the pane is showing the landing page.
  historyActive?: boolean;
  // Positioning/spacing supplied by the parent (e.g. "ml-auto px-1").
  className?: string;
}

const BTN =
  'inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]';

export function PaneHeaderActions({
  onNewTab,
  onSplitPane,
  onNewOrchestrator,
  onNewArena,
  onReopenPane,
  onShowHistory,
  onRemovePane,
  historyActive,
  className,
}: Props) {
  return (
    <div className={cn('flex items-center gap-0.5 shrink-0', className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            type="button"
            onClick={(e) => e.stopPropagation()}
            className={BTN}
            aria-label="New tab"
            title="New tab (chat / terminal / coder)"
          >
            <Plus size={12} />
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-fit">
          {/* Mixed tabs: every item adds a tab of that kind to THIS pane. */}
          <DropdownMenuItem onSelect={() => onNewTab('chat')}>
            <MessageSquare size={14} /> New BooChat
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => onNewTab('terminal')}>
            <Terminal size={14} /> New BooTerm
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => onNewTab('coder')}>
            <Code size={14} /> New BooCode
          </DropdownMenuItem>
          {onNewOrchestrator && (
            <DropdownMenuItem onSelect={onNewOrchestrator}>
              <Workflow size={14} /> New Orchestrator
            </DropdownMenuItem>
          )}
          {onNewArena && (
            <DropdownMenuItem onSelect={onNewArena}>
              <Swords size={14} /> New Arena
            </DropdownMenuItem>
          )}
        </DropdownMenuContent>
      </DropdownMenu>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            type="button"
            onClick={(e) => e.stopPropagation()}
            className={cn(BTN, 'max-md:hidden')}
            aria-label="Split pane"
            title="Split pane"
          >
            <Columns2 size={12} />
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-fit">
          <DropdownMenuItem onSelect={() => onSplitPane('chat')}>
            <MessageSquare size={14} /> New BooChat
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => onSplitPane('terminal')}>
            <Terminal size={14} /> New BooTerm
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => onSplitPane('coder')}>
            <Code size={14} /> New BooCode
          </DropdownMenuItem>
          {onNewOrchestrator && (
            <DropdownMenuItem onSelect={onNewOrchestrator}>
              <Workflow size={14} /> New Orchestrator
            </DropdownMenuItem>
          )}
          {onNewArena && (
            <DropdownMenuItem onSelect={onNewArena}>
              <Swords size={14} /> New Arena
            </DropdownMenuItem>
          )}
        </DropdownMenuContent>
      </DropdownMenu>

      {onReopenPane && (
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            onReopenPane();
          }}
          className={cn(BTN, 'max-md:hidden')}
          aria-label="Reopen closed pane"
          title="Reopen closed pane"
        >
          <RotateCcw size={12} />
        </button>
      )}

      <button
        type="button"
        onClick={(e) => {
          e.stopPropagation();
          onShowHistory();
        }}
        className={cn(BTN, 'max-md:hidden', historyActive && 'text-foreground bg-muted/50')}
        aria-label="Session history"
        title="Session history"
      >
        <History size={12} />
      </button>

      {onRemovePane && (
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            onRemovePane();
          }}
          className={BTN}
          aria-label="Close pane"
          title="Close pane"
        >
          <X size={12} />
        </button>
      )}
    </div>
  );
}