feat: add terminal panel components and Zustand store for state management

- Created a barrel export file for terminal panel components.
- Implemented Zustand store for managing terminal panel UI state, including visibility, active terminal, view mode, and terminal ordering.
- Added actions for opening/closing the terminal panel, setting the active terminal, changing view modes, and managing terminal order.
- Introduced selectors for accessing terminal panel state properties.

ccw/frontend/src/components/terminal-panel/TerminalMainArea.tsx

@@ -0,0 +1,323 @@
+// ========================================
+// TerminalMainArea Component
+// ========================================
+// Main display area for the terminal panel.
+// Shows header with session info, tab switcher (terminal/queue), and
+// embedded xterm.js terminal with command input. Reuses the xterm rendering
+// pattern from IssueTerminalTab (init, FitAddon, output streaming, PTY input).
+
+import { useEffect, useRef, useState } from 'react';
+import { Terminal as XTerm } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import { X, Send } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
+import { cn } from '@/lib/utils';
+import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
+import { useTerminalPanelStore } from '@/stores/terminalPanelStore';
+import { useCliSessionStore } from '@/stores/cliSessionStore';
+import type { PanelView } from '@/stores/terminalPanelStore';
+import {
+  fetchCliSessionBuffer,
+  sendCliSessionText,
+  resizeCliSession,
+  executeInCliSession,
+} from '@/lib/api';
+
+// ========== Types ==========
+
+export interface TerminalMainAreaProps {
+  onClose: () => void;
+}
+
+// ========== Component ==========
+
+export function TerminalMainArea({ onClose }: TerminalMainAreaProps) {
+  const projectPath = useWorkflowStore(selectProjectPath);
+
+  const activeTerminalId = useTerminalPanelStore((s) => s.activeTerminalId);
+  const panelView = useTerminalPanelStore((s) => s.panelView);
+  const setPanelView = useTerminalPanelStore((s) => s.setPanelView);
+
+  const sessionsByKey = useCliSessionStore((s) => s.sessions);
+  const outputChunks = useCliSessionStore((s) => s.outputChunks);
+  const setBuffer = useCliSessionStore((s) => s.setBuffer);
+  const clearOutput = useCliSessionStore((s) => s.clearOutput);
+
+  const activeSession = activeTerminalId ? sessionsByKey[activeTerminalId] : null;
+
+  const [prompt, setPrompt] = useState('');
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // xterm refs
+  const terminalHostRef = useRef<HTMLDivElement | null>(null);
+  const xtermRef = useRef<XTerm | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const lastChunkIndexRef = useRef<number>(0);
+
+  // Input batching refs (same pattern as IssueTerminalTab)
+  const pendingInputRef = useRef<string>('');
+  const flushTimerRef = useRef<number | null>(null);
+  const activeSessionKeyRef = useRef<string | null>(null);
+
+  // Keep ref in sync with activeTerminalId for closures
+  useEffect(() => {
+    activeSessionKeyRef.current = activeTerminalId;
+  }, [activeTerminalId]);
+
+  const flushInput = async () => {
+    const sessionKey = activeSessionKeyRef.current;
+    if (!sessionKey) return;
+    const pending = pendingInputRef.current;
+    pendingInputRef.current = '';
+    if (!pending) return;
+    try {
+      await sendCliSessionText(sessionKey, { text: pending, appendNewline: false }, projectPath || undefined);
+    } catch {
+      // Ignore transient failures
+    }
+  };
+
+  const scheduleFlush = () => {
+    if (flushTimerRef.current !== null) return;
+    flushTimerRef.current = window.setTimeout(async () => {
+      flushTimerRef.current = null;
+      await flushInput();
+    }, 30);
+  };
+
+  // ========== xterm Initialization ==========
+
+  useEffect(() => {
+    if (!terminalHostRef.current) return;
+    if (xtermRef.current) return;
+
+    const term = new XTerm({
+      convertEol: true,
+      cursorBlink: true,
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      fontSize: 12,
+      scrollback: 5000,
+    });
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(terminalHostRef.current);
+    fitAddon.fit();
+
+    // Forward keystrokes to backend (batched)
+    term.onData((data) => {
+      if (!activeSessionKeyRef.current) return;
+      pendingInputRef.current += data;
+      scheduleFlush();
+    });
+
+    xtermRef.current = term;
+    fitAddonRef.current = fitAddon;
+
+    return () => {
+      try {
+        term.dispose();
+      } finally {
+        xtermRef.current = null;
+        fitAddonRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ========== Attach to Active Session ==========
+
+  useEffect(() => {
+    const term = xtermRef.current;
+    const fitAddon = fitAddonRef.current;
+    if (!term || !fitAddon) return;
+
+    lastChunkIndexRef.current = 0;
+    term.reset();
+    term.clear();
+
+    if (!activeTerminalId) return;
+    clearOutput(activeTerminalId);
+
+    fetchCliSessionBuffer(activeTerminalId, projectPath || undefined)
+      .then(({ buffer }) => {
+        setBuffer(activeTerminalId, buffer || '');
+      })
+      .catch(() => {
+        // ignore
+      })
+      .finally(() => {
+        fitAddon.fit();
+      });
+  }, [activeTerminalId, projectPath, setBuffer, clearOutput]);
+
+  // ========== Stream Output Chunks ==========
+
+  useEffect(() => {
+    const term = xtermRef.current;
+    if (!term) return;
+    if (!activeTerminalId) return;
+
+    const chunks = outputChunks[activeTerminalId] ?? [];
+    const start = lastChunkIndexRef.current;
+    if (start >= chunks.length) return;
+
+    for (let i = start; i < chunks.length; i++) {
+      term.write(chunks[i].data);
+    }
+    lastChunkIndexRef.current = chunks.length;
+  }, [outputChunks, activeTerminalId]);
+
+  // ========== Resize Observer ==========
+
+  useEffect(() => {
+    const host = terminalHostRef.current;
+    const term = xtermRef.current;
+    const fitAddon = fitAddonRef.current;
+    if (!host || !term || !fitAddon) return;
+
+    const resize = () => {
+      fitAddon.fit();
+      const sessionKey = activeSessionKeyRef.current;
+      if (sessionKey) {
+        void (async () => {
+          try {
+            await resizeCliSession(sessionKey, { cols: term.cols, rows: term.rows }, projectPath || undefined);
+          } catch {
+            // ignore
+          }
+        })();
+      }
+    };
+
+    const ro = new ResizeObserver(resize);
+    ro.observe(host);
+    return () => ro.disconnect();
+  }, [projectPath]);
+
+  // ========== Execute Command ==========
+
+  const handleExecute = async () => {
+    if (!activeTerminalId) return;
+    if (!prompt.trim()) return;
+    setIsExecuting(true);
+    setError(null);
+    try {
+      await executeInCliSession(activeTerminalId, {
+        tool: activeSession?.tool || 'claude',
+        prompt: prompt.trim(),
+        mode: 'analysis',
+        category: 'user',
+      }, projectPath || undefined);
+      setPrompt('');
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Ctrl+Enter or Cmd+Enter to execute
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault();
+      void handleExecute();
+    }
+  };
+
+  // ========== Render ==========
+
+  return (
+    <div className="flex-1 flex flex-col min-w-0">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-card">
+        <div className="flex items-center gap-3 min-w-0">
+          <h3 className="text-sm font-semibold text-foreground truncate">
+            {activeSession
+              ? `${activeSession.tool || 'cli'} - ${activeSession.sessionKey}`
+              : 'Terminal Panel'}
+          </h3>
+          {activeSession?.tool && (
+            <span className="text-xs text-muted-foreground flex-shrink-0">
+              {activeSession.workingDir}
+            </span>
+          )}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClose}
+          className="flex-shrink-0 hover:bg-secondary"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Tabs */}
+      <Tabs
+        value={panelView}
+        onValueChange={(v) => setPanelView(v as PanelView)}
+        className="flex-1 flex flex-col min-h-0"
+      >
+        <div className="px-4 pt-2 bg-card">
+          <TabsList>
+            <TabsTrigger value="terminal">Terminal</TabsTrigger>
+            <TabsTrigger value="queue">Queue</TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* Terminal View */}
+        <TabsContent value="terminal" className="flex-1 flex flex-col min-h-0 mt-0 p-0">
+          {activeTerminalId ? (
+            <div className="flex-1 flex flex-col min-h-0">
+              {/* xterm container */}
+              <div className="flex-1 min-h-0 bg-black/90">
+                <div ref={terminalHostRef} className="h-full w-full" />
+              </div>
+
+              {/* Command input area */}
+              <div className="border-t border-border p-3 bg-card">
+                {error && (
+                  <div className="text-xs text-destructive mb-2">{error}</div>
+                )}
+                <div className="flex gap-2">
+                  <textarea
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Enter command... (Ctrl+Enter to execute)"
+                    className={cn(
+                      'flex-1 min-h-[60px] max-h-[120px] p-2 bg-background border border-input rounded-md text-sm resize-none',
+                      'focus:outline-none focus:ring-2 focus:ring-primary'
+                    )}
+                  />
+                  <Button
+                    onClick={handleExecute}
+                    disabled={!activeTerminalId || isExecuting || !prompt.trim()}
+                    className="self-end"
+                  >
+                    <Send className="w-4 h-4 mr-1" />
+                    Execute
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="flex-1 flex items-center justify-center text-muted-foreground">
+              <p className="text-sm">No terminal selected</p>
+            </div>
+          )}
+        </TabsContent>
+
+        {/* Queue View (placeholder for Phase 2) */}
+        <TabsContent value="queue" className="flex-1 flex items-center justify-center mt-0 p-0">
+          <div className="text-center text-muted-foreground">
+            <p className="text-sm">Execution Queue Management</p>
+            <p className="text-xs mt-1">Coming in Phase 2</p>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

ccw/frontend/src/components/terminal-panel/TerminalNavBar.tsx

@@ -0,0 +1,142 @@
+// ========================================
+// TerminalNavBar Component
+// ========================================
+// Left navigation bar for the terminal panel.
+// Shows queue entry icon at top, separator, and dynamic terminal session icons
+// with status badges. Reads session data from cliSessionStore and panel state
+// from terminalPanelStore.
+
+import { useMemo } from 'react';
+import {
+  ClipboardList,
+  Terminal,
+  Loader2,
+  CheckCircle,
+  XCircle,
+  Circle,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useTerminalPanelStore } from '@/stores/terminalPanelStore';
+import { useCliSessionStore } from '@/stores/cliSessionStore';
+
+// ========== Status Badge Configuration ==========
+
+type SessionStatus = 'running' | 'completed' | 'failed' | 'idle';
+
+interface StatusBadgeConfig {
+  icon: React.ComponentType<{ className?: string }>;
+  colorClass: string;
+}
+
+const statusBadgeMap: Record<SessionStatus, StatusBadgeConfig> = {
+  running: { icon: Loader2, colorClass: 'bg-blue-500' },
+  completed: { icon: CheckCircle, colorClass: 'bg-green-500' },
+  failed: { icon: XCircle, colorClass: 'bg-red-500' },
+  idle: { icon: Circle, colorClass: 'bg-gray-500' },
+};
+
+// ========== Helpers ==========
+
+/**
+ * Derive a simple session status from the session metadata.
+ * This is a heuristic based on available data - the shellKind and updatedAt fields
+ * provide indirect clues about activity. A more precise status would require
+ * backend support for explicit session state tracking.
+ */
+function deriveSessionStatus(_sessionKey: string, _shellKind: string): SessionStatus {
+  // For now, default to idle. In Phase 2 we can refine this
+  // based on active execution tracking from the backend.
+  return 'idle';
+}
+
+// ========== Component ==========
+
+export function TerminalNavBar() {
+  const panelView = useTerminalPanelStore((s) => s.panelView);
+  const activeTerminalId = useTerminalPanelStore((s) => s.activeTerminalId);
+  const terminalOrder = useTerminalPanelStore((s) => s.terminalOrder);
+  const setActiveTerminal = useTerminalPanelStore((s) => s.setActiveTerminal);
+  const setPanelView = useTerminalPanelStore((s) => s.setPanelView);
+
+  const sessionsByKey = useCliSessionStore((s) => s.sessions);
+
+  // Build ordered list of sessions that exist in the store
+  const orderedSessions = useMemo(() => {
+    return terminalOrder
+      .map((key) => sessionsByKey[key])
+      .filter(Boolean);
+  }, [terminalOrder, sessionsByKey]);
+
+  const handleQueueClick = () => {
+    setPanelView('queue');
+  };
+
+  const handleTerminalClick = (sessionKey: string) => {
+    setPanelView('terminal');
+    setActiveTerminal(sessionKey);
+  };
+
+  return (
+    <div className="w-16 flex-shrink-0 flex flex-col border-r border-border bg-muted/30">
+      {/* Queue entry icon */}
+      <div className="flex items-center justify-center py-3">
+        <button
+          type="button"
+          onClick={handleQueueClick}
+          className={cn(
+            'w-10 h-10 flex items-center justify-center rounded-md transition-colors',
+            'hover:bg-accent hover:text-accent-foreground',
+            panelView === 'queue' && 'bg-accent text-accent-foreground'
+          )}
+          title="Execution Queue"
+        >
+          <ClipboardList className="w-5 h-5" />
+        </button>
+      </div>
+
+      {/* Separator */}
+      <div className="mx-3 border-t border-border" />
+
+      {/* Terminal session icons (scrollable) */}
+      <div className="flex-1 overflow-y-auto py-2 space-y-1">
+        {orderedSessions.map((session) => {
+          const isActive = activeTerminalId === session.sessionKey && panelView === 'terminal';
+          const status = deriveSessionStatus(session.sessionKey, session.shellKind);
+          const badge = statusBadgeMap[status];
+          const BadgeIcon = badge.icon;
+
+          return (
+            <div key={session.sessionKey} className="flex items-center justify-center">
+              <button
+                type="button"
+                onClick={() => handleTerminalClick(session.sessionKey)}
+                className={cn(
+                  'relative w-10 h-10 flex items-center justify-center rounded-md transition-colors',
+                  'hover:bg-accent hover:text-accent-foreground',
+                  isActive && 'bg-accent text-accent-foreground'
+                )}
+                title={`${session.tool || 'cli'} - ${session.sessionKey}`}
+              >
+                <Terminal className="w-5 h-5" />
+                {/* Status badge overlay */}
+                <span
+                  className={cn(
+                    'absolute bottom-0.5 right-0.5 w-3.5 h-3.5 rounded-full flex items-center justify-center',
+                    badge.colorClass
+                  )}
+                >
+                  <BadgeIcon
+                    className={cn(
+                      'w-2 h-2 text-white',
+                      status === 'running' && 'animate-spin'
+                    )}
+                  />
+                </span>
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

ccw/frontend/src/components/terminal-panel/TerminalPanel.tsx

@@ -0,0 +1,71 @@
+// ========================================
+// TerminalPanel Component
+// ========================================
+// Right-side overlay panel for terminal monitoring.
+// Follows the IssueDrawer pattern: fixed overlay + translate-x slide animation.
+// Contains TerminalNavBar (left icon strip) and TerminalMainArea (main content).
+// All state is read from terminalPanelStore - no props needed.
+
+import { useEffect, useCallback } from 'react';
+import { cn } from '@/lib/utils';
+import { useTerminalPanelStore } from '@/stores/terminalPanelStore';
+import { TerminalNavBar } from './TerminalNavBar';
+import { TerminalMainArea } from './TerminalMainArea';
+
+// ========== Component ==========
+
+export function TerminalPanel() {
+  const isPanelOpen = useTerminalPanelStore((s) => s.isPanelOpen);
+  const closePanel = useTerminalPanelStore((s) => s.closePanel);
+
+  const handleClose = useCallback(() => {
+    closePanel();
+  }, [closePanel]);
+
+  // ESC key to close
+  useEffect(() => {
+    if (!isPanelOpen) return;
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') handleClose();
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [isPanelOpen, handleClose]);
+
+  if (!isPanelOpen) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Overlay */}
+      <div
+        className={cn(
+          'fixed inset-0 bg-black/40 transition-opacity z-40',
+          isPanelOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+        onClick={handleClose}
+        aria-hidden="true"
+      />
+
+      {/* Panel */}
+      <div
+        className={cn(
+          'fixed top-0 right-0 h-full w-1/2 bg-background border-l border-border shadow-2xl z-50',
+          'flex flex-row transition-transform duration-300 ease-in-out',
+          isPanelOpen ? 'translate-x-0' : 'translate-x-full'
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Terminal Panel"
+        style={{ minWidth: '400px', maxWidth: '800px' }}
+      >
+        {/* Left navigation bar */}
+        <TerminalNavBar />
+
+        {/* Main display area */}
+        <TerminalMainArea onClose={handleClose} />
+      </div>
+    </>
+  );
+}

ccw/frontend/src/components/terminal-panel/index.ts

@@ -0,0 +1,8 @@
+// ========================================
+// Terminal Panel - Barrel Exports
+// ========================================
+// Re-exports all terminal panel components for convenient imports.
+
+export { TerminalPanel } from './TerminalPanel';
+export { TerminalNavBar } from './TerminalNavBar';
+export { TerminalMainArea } from './TerminalMainArea';