@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/HarnessChatPanel.tsx

@@ -0,0 +1,2352 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faArrowDown,
+  faArrowUp,
+  faCheck,
+  faChevronDown,
+  faChevronLeft,
+  faCircleNotch,
+  faCode,
+  faCodeBranch,
+  faCopy,
+  faFileLines,
+  faGlobe,
+  faHistory,
+  faMagnifyingGlass,
+  faPen,
+  faPlus,
+  faRotate,
+  faStop,
+  faTerminal,
+  faWrench,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Button, Checkbox, EditorIcon, Select, TextInput, themeVars } from '../design-system';
+import {
+  connectHarnessChatEvents,
+  getHarnessChatSnapshot,
+  HarnessChatRequestError,
+  performHarnessChatAction,
+} from '../editor-api';
+import { editorConsole } from '../editor-console';
+import {
+  harnessChatEditorStore,
+  harnessChatEditorStoreVersion,
+  subscribeHarnessChatEditorStore,
+} from '../harness-chat-editor-context';
+import { updateHarnessChatIndicator } from '../harness-chat-indicator';
+import {
+  harnessChat,
+  harnessChatLayoutVersion,
+  subscribeHarnessChatLayout,
+  toggleHarnessChatCollapsed,
+} from '../harness-chat-layout';
+import { harnessChatLifecycle } from '../harness-chat-lifecycle';
+import { useHarnessChatReconnect } from '../harness-chat-reconnect';
+import type {
+  HarnessChatAction,
+  HarnessChatConversationEntry,
+  HarnessChatHarness,
+  HarnessChatMessageEntry,
+  HarnessChatRequestEntry,
+  HarnessChatSession,
+  HarnessChatSnapshot,
+  HarnessChatToolEntry,
+} from '../harness-chat-types';
+import {
+  shouldAcceptHarnessChatSnapshot,
+  unavailableHarnessChatSnapshot,
+} from '../harness-chat-types';
+import {
+  activeWorkspaceDocument,
+  subscribeWorkspaceDocuments,
+  workspaceDocumentRegistryVersion,
+} from '../workspace-document-registry';
+
+const RESUME_WARNING_KEY = 'vgai:harness-chat:skip-resume-warning:v1';
+const CHAT_GUTTER = 16;
+const noopSubscribe = () => () => {};
+const zeroSnapshot = () => 0;
+
+function blankSnapshot(): HarnessChatSnapshot {
+  return { ...unavailableHarnessChatSnapshot(''), status: 'loading', error: null };
+}
+
+function relativeTime(timestamp: number | null): string {
+  if (!timestamp) return '';
+  const seconds = Math.max(0, Math.round((Date.now() - timestamp) / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  return `${Math.round(hours / 24)}d`;
+}
+
+function statusColor(snapshot: HarnessChatSnapshot): string {
+  if (snapshot.requests.some((request) => request.status === 'pending'))
+    return themeVars.semantic.warning;
+  if (snapshot.status === 'working') return themeVars.accent.default;
+  if (snapshot.status === 'error' || snapshot.status === 'unavailable')
+    return themeVars.semantic.danger;
+  if (snapshot.mode === 'observe') return themeVars.semantic.warning;
+  return themeVars.semantic.success;
+}
+
+function lifecycleColor(snapshot: HarnessChatSnapshot): string {
+  switch (harnessChatLifecycle(snapshot).kind) {
+    case 'live-terminal':
+      return themeVars.semantic.success;
+    case 'editor':
+    case 'resumed':
+    case 'branched':
+      return themeVars.accent.default;
+    case 'mirror':
+    case 'mirror-reconnecting':
+      return themeVars.semantic.warning;
+    case 'offline':
+      return themeVars.semantic.danger;
+    case 'idle':
+      return themeVars.content.dim;
+  }
+}
+
+function authSummary(harness: HarnessChatHarness): string {
+  switch (harness.auth) {
+    case 'ready':
+      return 'Signed in';
+    case 'configured':
+      return 'Credentials found';
+    case 'required':
+      return 'Sign-in required';
+    case 'unknown':
+      return 'Auth not verified';
+  }
+}
+
+function runtimeSummary(harness: HarnessChatHarness): string {
+  switch (harness.runtime) {
+    case 'ready':
+      return 'Runtime verified';
+    case 'degraded':
+      return 'Runtime needs verification';
+    case 'unavailable':
+      return 'Runtime unavailable';
+  }
+}
+
+function harnessReadinessColor(harness: HarnessChatHarness): string {
+  if (!harness.installed || harness.auth === 'required' || harness.runtime === 'unavailable') {
+    return themeVars.semantic.danger;
+  }
+  return harness.auth === 'ready' && harness.runtime === 'ready'
+    ? themeVars.semantic.success
+    : themeVars.semantic.warning;
+}
+
+function HarnessReadiness({ harness }: { harness: HarnessChatHarness | null }) {
+  if (!harness) return null;
+  return (
+    <div
+      data-testid="harness-chat-readiness"
+      style={{
+        marginBottom: 7,
+        padding: '7px 8px',
+        border: `1px solid ${themeVars.boundary.default}`,
+        borderRadius: themeVars.shape.small,
+        background: themeVars.surface.inset,
+        color: themeVars.content.muted,
+        fontSize: 'var(--vgai-font-sm)',
+        lineHeight: 1.45,
+      }}
+    >
+      <div
+        style={{ display: 'flex', alignItems: 'center', gap: 6, color: themeVars.content.primary }}
+      >
+        <span
+          aria-hidden
+          style={{
+            width: 6,
+            height: 6,
+            borderRadius: '50%',
+            background: harnessReadinessColor(harness),
+          }}
+        />
+        <strong>{harness.label}</strong>
+        <span style={{ color: themeVars.content.dim }}>
+          {authSummary(harness)} · {runtimeSummary(harness)}
+        </span>
+      </div>
+      <div style={{ marginTop: 3, color: themeVars.content.dim }}>
+        {harness.protocol}
+        {harness.reason ? ` · ${harness.reason}` : ''}
+      </div>
+      {harness.repair && (
+        <div style={{ marginTop: 3, color: themeVars.semantic.warning }}>{harness.repair}</div>
+      )}
+    </div>
+  );
+}
+
+function selectedHarness(
+  snapshot: HarnessChatSnapshot,
+  selected: string,
+): HarnessChatHarness | null {
+  return (
+    snapshot.harnesses.find((item) => item.id === selected) ??
+    snapshot.harnesses.find((item) => item.id === snapshot.activeHarness) ??
+    snapshot.harnesses.find((item) => item.availableActions.start) ??
+    snapshot.harnesses.find((item) => item.installed) ??
+    null
+  );
+}
+
+function visibleMessages(entries: HarnessChatConversationEntry[]): HarnessChatMessageEntry[] {
+  return entries.filter(
+    (entry): entry is HarnessChatMessageEntry =>
+      entry.kind === 'message' && entry.visibility === 'conversation',
+  );
+}
+
+function conversationTitle(
+  session: HarnessChatSession | null,
+  entries: HarnessChatConversationEntry[],
+  pendingNew: boolean,
+): string {
+  if (pendingNew) return 'New chat';
+  const firstPrompt = visibleMessages(entries)
+    .find((message) => message.role === 'user')
+    ?.text.trim();
+  const genericTitle =
+    !session ||
+    session.title === session.id ||
+    session.title.toLowerCase() === `${session.harness.toLowerCase()} chat`;
+  const value = genericTitle && firstPrompt ? firstPrompt : (session?.title ?? 'Agent');
+  return value.length > 72 ? `${value.slice(0, 69)}…` : value;
+}
+
+interface SessionPickerProps {
+  snapshot: HarnessChatSnapshot;
+  harness: HarnessChatHarness | null;
+  selectedHarnessId: string;
+  onHarness: (id: string) => void;
+  onNew: () => void;
+  onObserve: (sessionId: string) => void;
+  onClose: () => void;
+}
+
+function SessionPickerRow({
+  session,
+  activeSessionId,
+  locked,
+  onObserve,
+}: {
+  session: HarnessChatSession;
+  activeSessionId: string | null;
+  locked: boolean;
+  onObserve: (sessionId: string) => void;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      className="vgai-chat-session-row"
+      data-selected={session.id === activeSessionId || undefined}
+      disabled={locked}
+      title={
+        locked ? 'Release the editor-controlled session before opening another chat' : undefined
+      }
+      onClick={() => onObserve(session.id)}
+    >
+      <span style={{ minWidth: 0, flex: 1 }}>
+        <span
+          style={{
+            display: 'block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontSize: 'var(--vgai-font-base)',
+          }}
+        >
+          {session.title}
+        </span>
+        <span style={{ color: themeVars.content.dim, fontSize: 'var(--vgai-font-sm)' }}>
+          {session.harness}
+          {session.model ? ` · ${session.model}` : ''}
+          {` · ${session.storage}`}
+        </span>
+      </span>
+      <span style={{ color: themeVars.content.dim, fontSize: 'var(--vgai-font-sm)' }}>
+        {relativeTime(session.updatedAt)}
+      </span>
+      {session.attachable && (
+        <span
+          style={{
+            padding: '2px 5px',
+            borderRadius: themeVars.shape.small,
+            color: themeVars.semantic.success,
+            background: themeVars.semantic.successMuted,
+            fontSize: 9,
+            fontWeight: 600,
+          }}
+        >
+          LIVE
+        </span>
+      )}
+    </Button>
+  );
+}
+
+function handleSessionDialogKey(
+  event: globalThis.KeyboardEvent,
+  dialog: HTMLDivElement | null,
+  onClose: () => void,
+): void {
+  if (event.key === 'Escape') {
+    onClose();
+    return;
+  }
+  if (event.key !== 'Tab') return;
+  const focusable = [
+    ...(dialog?.querySelectorAll<HTMLElement>(
+      'button:not(:disabled), select:not(:disabled), input:not(:disabled)',
+    ) ?? []),
+  ];
+  const boundary = event.shiftKey ? focusable[0] : focusable.at(-1);
+  if (!boundary || document.activeElement !== boundary) return;
+  event.preventDefault();
+  (event.shiftKey ? focusable.at(-1) : focusable[0])?.focus();
+}
+
+function SessionPicker({
+  snapshot,
+  harness,
+  selectedHarnessId,
+  onHarness,
+  onNew,
+  onObserve,
+  onClose,
+}: SessionPickerProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const [query, setQuery] = useState('');
+  const normalized = query.trim().toLowerCase();
+  const sessions = snapshot.sessions.filter((session) =>
+    [session.title, session.harness, session.model ?? '', session.cwd ?? ''].some((value) =>
+      value.toLowerCase().includes(normalized),
+    ),
+  );
+
+  useEffect(() => {
+    const close = (event: globalThis.KeyboardEvent) =>
+      handleSessionDialogKey(event, dialogRef.current, onClose);
+    document.addEventListener('keydown', close);
+    const outside = (event: PointerEvent) => {
+      if (!dialogRef.current?.contains(event.target as Node)) onClose();
+    };
+    document.addEventListener('pointerdown', outside);
+    dialogRef.current?.querySelector<HTMLElement>('select, input, button')?.focus();
+    return () => {
+      document.removeEventListener('keydown', close);
+      document.removeEventListener('pointerdown', outside);
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      ref={dialogRef}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Coding sessions"
+      style={{
+        position: 'absolute',
+        top: 40,
+        left: 7,
+        right: 7,
+        maxHeight: 'min(500px, calc(100vh - 100px))',
+        overflow: 'auto',
+        zIndex: 30,
+        padding: 7,
+        background: themeVars.surface.chrome,
+        border: `1px solid ${themeVars.boundary.strong}`,
+        borderRadius: themeVars.shape.medium,
+        boxShadow: themeVars.elevation.medium,
+      }}
+    >
+      <div style={{ display: 'flex', gap: 6, paddingBottom: 7 }}>
+        <Select
+          aria-label="Harness for new session"
+          value={harness?.id ?? selectedHarnessId}
+          onChange={(event) => onHarness(event.target.value)}
+          style={{
+            minWidth: 0,
+            flex: 1,
+            height: 28,
+            padding: '0 6px',
+            color: themeVars.content.primary,
+            background: themeVars.surface.inset,
+            border: `1px solid ${themeVars.boundary.strong}`,
+            borderRadius: themeVars.shape.small,
+            fontSize: 'var(--vgai-font-sm)',
+          }}
+        >
+          {snapshot.harnesses.map((item) => (
+            <option key={item.id} value={item.id} disabled={!item.availableActions.start}>
+              {item.label}
+              {!item.installed
+                ? ' · not installed'
+                : item.auth === 'required'
+                  ? ' · sign in'
+                  : item.auth === 'configured'
+                    ? ' · credentials found'
+                    : item.auth === 'unknown'
+                      ? ' · auth unverified'
+                      : ''}
+            </option>
+          ))}
+        </Select>
+        <Button
+          type="button"
+          variant="primary"
+          size="compact"
+          disabled={!harness?.availableActions.start}
+          onClick={onNew}
+        >
+          <EditorIcon icon={faPlus} style={{ marginRight: 5 }} />
+          New
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          className="vgai-chat-icon"
+          aria-label="Close chat history"
+          onClick={onClose}
+        >
+          <EditorIcon icon={faXmark} />
+        </Button>
+      </div>
+      <HarnessReadiness harness={harness} />
+      <div style={{ position: 'relative', marginBottom: 6 }}>
+        <EditorIcon
+          icon={faMagnifyingGlass}
+          style={{
+            position: 'absolute',
+            left: 8,
+            top: 8,
+            color: themeVars.content.dim,
+            fontSize: 10,
+          }}
+        />
+        <TextInput
+          autoFocus
+          aria-label="Search coding sessions"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Search chats"
+          style={{
+            boxSizing: 'border-box',
+            width: '100%',
+            height: 28,
+            padding: '0 8px 0 25px',
+            color: themeVars.content.primary,
+            background: themeVars.surface.inset,
+            border: `1px solid ${themeVars.boundary.default}`,
+            borderRadius: themeVars.shape.small,
+            outline: 'none',
+          }}
+        />
+      </div>
+      {sessions.length === 0 ? (
+        <div style={{ padding: '18px 8px', color: themeVars.content.dim, textAlign: 'center' }}>
+          {snapshot.sessions.length === 0
+            ? 'No conversations in this project'
+            : 'No matching chats'}
+        </div>
+      ) : (
+        sessions.map((session) => (
+          <SessionPickerRow
+            key={session.id}
+            session={session}
+            activeSessionId={snapshot.activeSessionId}
+            locked={snapshot.connection.ownsRuntime && session.id !== snapshot.activeSessionId}
+            onObserve={onObserve}
+          />
+        ))
+      )}
+    </div>
+  );
+}
+
+function MarkdownContent({ value }: { value: string }) {
+  return (
+    <div
+      style={{
+        overflowWrap: 'anywhere',
+        color: themeVars.content.primary,
+        lineHeight: 1.55,
+        fontSize: 'var(--vgai-font-md)',
+      }}
+    >
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          p: ({ children }) => <p style={{ margin: '0 0 8px' }}>{children}</p>,
+          a: ({ href, children }) => (
+            <a
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+              style={{ color: themeVars.accent.default }}
+            >
+              {children}
+            </a>
+          ),
+          code: ({ children, className }) =>
+            className ? (
+              <code className={className}>{children}</code>
+            ) : (
+              <code
+                style={{
+                  padding: '1px 4px',
+                  borderRadius: themeVars.shape.small,
+                  background: themeVars.surface.inset,
+                  color: themeVars.content.primary,
+                  fontFamily: themeVars.typography.mono,
+                  fontSize: '0.92em',
+                }}
+              >
+                {children}
+              </code>
+            ),
+          pre: ({ children }) => (
+            <pre
+              style={{
+                margin: '8px 0',
+                padding: '9px 10px',
+                overflow: 'auto',
+                border: `1px solid ${themeVars.boundary.default}`,
+                borderRadius: themeVars.shape.medium,
+                background: themeVars.surface.inset,
+                color: themeVars.content.primary,
+                fontFamily: themeVars.typography.mono,
+                fontSize: 'var(--vgai-font-sm)',
+              }}
+            >
+              {children}
+            </pre>
+          ),
+          table: ({ children }) => (
+            <div style={{ overflowX: 'auto', margin: '8px 0' }}>
+              <table
+                style={{
+                  borderCollapse: 'collapse',
+                  width: '100%',
+                  fontSize: 'var(--vgai-font-sm)',
+                }}
+              >
+                {children}
+              </table>
+            </div>
+          ),
+          th: ({ children }) => (
+            <th
+              style={{
+                border: `1px solid ${themeVars.boundary.default}`,
+                padding: 5,
+                textAlign: 'left',
+              }}
+            >
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td style={{ border: `1px solid ${themeVars.boundary.default}`, padding: 5 }}>
+              {children}
+            </td>
+          ),
+        }}
+      >
+        {value}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+type ToolCategory = 'read' | 'search' | 'edit' | 'command' | 'test' | 'web' | 'agent' | 'other';
+
+function toolCategory(tool: Pick<HarnessChatToolEntry, 'name' | 'arguments'>): ToolCategory {
+  const value = tool.name?.toLowerCase() ?? '';
+  if (/read|view|open_file|list_dir/.test(value)) return 'read';
+  if (/search|find|grep|glob/.test(value)) return 'search';
+  if (/edit|write|patch|replace|create_file/.test(value)) return 'edit';
+  if (/test|typecheck|lint|build/.test(value)) return 'test';
+  if (/terminal|bash|shell|command|exec/.test(value)) {
+    return /(?:^|\s)(?:npm|pnpm|yarn|bun|cargo|go|pytest|vitest|jest|tsc).*?(?:test|typecheck|lint|build)|\b(?:test|typecheck|lint|build)\b/i.test(
+      tool.arguments ?? '',
+    )
+      ? 'test'
+      : 'command';
+  }
+  if (/browser|web|fetch|url/.test(value)) return 'web';
+  if (/subagent|spawn|task/.test(value)) return 'agent';
+  return 'other';
+}
+
+function toolLabel(name: string | null): string {
+  if (!name) return 'Tool';
+  const simple = name.split(/__|\//).at(-1) ?? name;
+  return simple.replace(/[_-]+/g, ' ').replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function toolTarget(argumentsText: string | null): string {
+  if (!argumentsText) return '';
+  try {
+    const args = JSON.parse(argumentsText) as Record<string, unknown>;
+    for (const key of ['file_path', 'target_file', 'path', 'command', 'query', 'pattern', 'url']) {
+      const candidate = args[key];
+      if (typeof candidate === 'string') return candidate;
+    }
+  } catch {
+    return argumentsText.length > 90 ? `${argumentsText.slice(0, 87)}…` : argumentsText;
+  }
+  return '';
+}
+
+function compactToolTarget(target: string, workspace: string | null): string {
+  if (!target || !workspace) return target;
+  const prefix = workspace.endsWith('/') ? workspace : `${workspace}/`;
+  return target.startsWith(prefix) ? target.slice(prefix.length) : target;
+}
+
+function toolIcon(category: ToolCategory): IconDefinition {
+  if (category === 'read') return faFileLines;
+  if (category === 'edit') return faPen;
+  if (category === 'search') return faMagnifyingGlass;
+  if (category === 'command') return faTerminal;
+  if (category === 'web') return faGlobe;
+  if (category === 'test') return faCode;
+  return faWrench;
+}
+
+function ToolRow({ tool, workspace }: { tool: HarnessChatToolEntry; workspace: string | null }) {
+  const category = toolCategory(tool);
+  const fullTarget = toolTarget(tool.arguments);
+  const target = compactToolTarget(fullTarget, workspace);
+  const statusIcon =
+    tool.status === 'pending' ? faCircleNotch : tool.status === 'error' ? faXmark : faCheck;
+  const statusTone =
+    tool.status === 'pending'
+      ? themeVars.accent.default
+      : tool.status === 'error'
+        ? themeVars.semantic.danger
+        : themeVars.semantic.success;
+  const details = Boolean(tool.arguments || tool.resultText);
+  return (
+    <details
+      open={tool.status === 'error'}
+      style={{ borderTop: `1px solid ${themeVars.boundary.default}` }}
+    >
+      <summary
+        style={{
+          minHeight: 30,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6,
+          padding: '0 8px',
+          cursor: details ? 'pointer' : 'default',
+          listStyle: 'none',
+          fontSize: 'var(--vgai-font-sm)',
+        }}
+      >
+        <EditorIcon icon={toolIcon(category)} style={{ width: 12, color: themeVars.content.dim }} />
+        <span style={{ color: themeVars.content.primary, fontWeight: 600, whiteSpace: 'nowrap' }}>
+          {toolLabel(tool.name)}
+        </span>
+        {target && (
+          <span
+            title={fullTarget}
+            style={{
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              color: themeVars.content.dim,
+            }}
+          >
+            {target}
+          </span>
+        )}
+        <span style={{ flex: 1 }} />
+        <EditorIcon
+          icon={statusIcon}
+          spin={tool.status === 'pending'}
+          style={{ width: 11, color: statusTone }}
+        />
+      </summary>
+      {details && (
+        <div
+          style={{
+            maxHeight: 220,
+            overflow: 'auto',
+            padding: '7px 9px 9px',
+            background: themeVars.surface.inset,
+          }}
+        >
+          {tool.arguments && (
+            <pre
+              style={{
+                margin: 0,
+                color: themeVars.content.dim,
+                fontFamily: themeVars.typography.mono,
+                fontSize: 'var(--vgai-font-sm)',
+                whiteSpace: 'pre-wrap',
+              }}
+            >
+              {tool.arguments}
+            </pre>
+          )}
+          {tool.resultText && (
+            <pre
+              style={{
+                margin: tool.arguments ? '7px 0 0' : 0,
+                color:
+                  tool.status === 'error' ? themeVars.semantic.danger : themeVars.content.muted,
+                fontFamily: themeVars.typography.mono,
+                fontSize: 'var(--vgai-font-sm)',
+                whiteSpace: 'pre-wrap',
+                overflowWrap: 'anywhere',
+              }}
+            >
+              {tool.resultText}
+            </pre>
+          )}
+        </div>
+      )}
+    </details>
+  );
+}
+
+function toolGroupSummary(tools: HarnessChatToolEntry[]): string {
+  const counts = new Map<ToolCategory, number>();
+  for (const tool of tools) {
+    const category = toolCategory(tool);
+    counts.set(category, (counts.get(category) ?? 0) + 1);
+  }
+  const onlyRoutine = [...counts.keys()].every(
+    (category) => category === 'read' || category === 'search',
+  );
+  if (onlyRoutine) {
+    const files = (counts.get('read') ?? 0) + (counts.get('search') ?? 0);
+    return `Explored ${files} ${files === 1 ? 'item' : 'items'}`;
+  }
+  const parts: string[] = [];
+  const labels: Array<[ToolCategory, string]> = [
+    ['edit', 'changed'],
+    ['test', 'tests/builds'],
+    ['command', 'commands'],
+    ['read', 'reads'],
+    ['search', 'searches'],
+    ['web', 'web'],
+    ['agent', 'agents'],
+    ['other', 'other'],
+  ];
+  for (const [category, label] of labels) {
+    const count = counts.get(category);
+    if (count) parts.push(`${count} ${label}`);
+  }
+  return parts.length ? `Activity · ${parts.join(' · ')}` : `Activity · ${tools.length} steps`;
+}
+
+function ToolGroup({
+  tools,
+  workspace,
+}: {
+  tools: HarnessChatToolEntry[];
+  workspace: string | null;
+}) {
+  const important = tools.some((tool) => {
+    const category = toolCategory(tool);
+    return tool.status !== 'completed' || category === 'edit' || category === 'test';
+  });
+  const [expanded, setExpanded] = useState(important);
+  useEffect(() => {
+    if (important) setExpanded(true);
+  }, [important]);
+  const completed = tools.filter((tool) => tool.status === 'completed').length;
+  return (
+    <details
+      open={expanded}
+      onToggle={(event) => setExpanded(event.currentTarget.open)}
+      style={{
+        margin: '6px 0 12px',
+        border: `1px solid ${themeVars.boundary.default}`,
+        borderRadius: themeVars.shape.medium,
+        background: themeVars.surface.chrome,
+        overflow: 'hidden',
+      }}
+    >
+      <summary
+        style={{
+          minHeight: 34,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 7,
+          padding: '0 9px',
+          cursor: 'pointer',
+          listStyle: 'none',
+          color: themeVars.content.muted,
+          fontSize: 'var(--vgai-font-sm)',
+        }}
+      >
+        <EditorIcon
+          icon={tools.some((tool) => tool.status === 'pending') ? faCircleNotch : faWrench}
+          spin={tools.some((tool) => tool.status === 'pending')}
+          style={{ color: themeVars.content.dim }}
+        />
+        <span style={{ color: themeVars.content.primary, fontWeight: 600 }}>
+          {toolGroupSummary(tools)}
+        </span>
+        <span style={{ flex: 1 }} />
+        <span>
+          {completed}/{tools.length}
+        </span>
+        <EditorIcon icon={faChevronDown} style={{ fontSize: 8 }} />
+      </summary>
+      {expanded && (
+        <div>
+          {tools.map((tool) => (
+            <ToolRow key={tool.id} tool={tool} workspace={workspace} />
+          ))}
+        </div>
+      )}
+    </details>
+  );
+}
+
+function RequestCard({
+  request,
+  onRespond,
+  busy,
+}: {
+  request: HarnessChatRequestEntry;
+  onRespond: (action: HarnessChatAction) => void;
+  busy: boolean;
+}) {
+  if (request.status === 'responded') {
+    return (
+      <div
+        style={{
+          margin: '6px 0 10px',
+          color: themeVars.content.dim,
+          fontSize: 'var(--vgai-font-sm)',
+        }}
+      >
+        <EditorIcon icon={faCheck} style={{ marginRight: 6, color: themeVars.semantic.success }} />
+        Request answered · {request.resolution?.name ?? request.requestKind}
+      </div>
+    );
+  }
+  return (
+    <div
+      role="group"
+      aria-label="Agent needs input"
+      style={{
+        margin: '8px 0 13px',
+        padding: 10,
+        border: `1px solid ${themeVars.semantic.warning}`,
+        borderRadius: themeVars.shape.medium,
+        background: themeVars.surface.chrome,
+      }}
+    >
+      <div style={{ color: themeVars.content.primary, fontWeight: 600 }}>Agent needs input</div>
+      <div
+        style={{ marginTop: 3, color: themeVars.content.muted, fontSize: 'var(--vgai-font-sm)' }}
+      >
+        {request.requestKind}
+      </div>
+      <pre
+        style={{
+          maxHeight: 120,
+          overflow: 'auto',
+          color: themeVars.content.dim,
+          fontFamily: themeVars.typography.mono,
+          fontSize: 'var(--vgai-font-xs)',
+          whiteSpace: 'pre-wrap',
+        }}
+      >
+        {JSON.stringify(request.payload, null, 2)}
+      </pre>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+        {request.options.map((option) => (
+          <Button
+            type="button"
+            variant={option.kind.startsWith('reject') ? 'danger' : 'outline'}
+            size="compact"
+            disabled={busy}
+            key={option.optionId}
+            onClick={() =>
+              onRespond({
+                type: 'respond',
+                requestId: request.requestId,
+                optionId: option.optionId,
+              })
+            }
+          >
+            {option.name}
+          </Button>
+        ))}
+        {request.cancellable && (
+          <Button
+            type="button"
+            variant="outline"
+            size="compact"
+            disabled={busy}
+            onClick={() =>
+              onRespond({ type: 'respond', requestId: request.requestId, optionId: null })
+            }
+          >
+            Cancel
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+type ConversationBlock =
+  | Exclude<HarnessChatConversationEntry, HarnessChatToolEntry>
+  | { kind: 'tool-group'; id: string; tools: HarnessChatToolEntry[] };
+
+function conversationBlocks(entries: HarnessChatConversationEntry[]): ConversationBlock[] {
+  const blocks: ConversationBlock[] = [];
+  for (const entry of entries) {
+    if (entry.kind !== 'tool') {
+      blocks.push(entry);
+      continue;
+    }
+    const previous = blocks.at(-1);
+    if (previous?.kind === 'tool-group') previous.tools.push(entry);
+    else blocks.push({ kind: 'tool-group', id: `tools:${entry.id}`, tools: [entry] });
+  }
+  return blocks;
+}
+
+function ConversationEntry({
+  entry,
+  workspace,
+  onRespond,
+  finalResponse,
+  busy,
+}: {
+  entry: Exclude<ConversationBlock, { kind: 'tool-group' }>;
+  workspace: string | null;
+  onRespond: (action: HarnessChatAction) => void;
+  finalResponse: boolean;
+  busy: boolean;
+}) {
+  const [copied, setCopied] = useState(false);
+  void workspace;
+  if (entry.kind === 'request')
+    return <RequestCard request={entry} onRespond={onRespond} busy={busy} />;
+  if (entry.kind === 'reasoning') {
+    return (
+      <details
+        style={{
+          margin: '5px 0 10px',
+          color: themeVars.content.dim,
+          fontSize: 'var(--vgai-font-sm)',
+        }}
+      >
+        <summary style={{ cursor: 'pointer' }}>
+          {entry.streaming ? 'Thinking…' : 'Reasoning'}
+        </summary>
+        <div style={{ padding: '6px 0 0 12px', whiteSpace: 'pre-wrap' }}>{entry.text}</div>
+      </details>
+    );
+  }
+  if (entry.kind === 'notice') {
+    return (
+      <div
+        style={{
+          margin: '9px 0',
+          color: themeVars.content.dim,
+          fontSize: 'var(--vgai-font-sm)',
+          textAlign: 'center',
+        }}
+      >
+        {entry.text}
+      </div>
+    );
+  }
+  if (entry.visibility === 'context') return null;
+  if (entry.role === 'system') return null;
+  if (entry.role === 'user') {
+    return (
+      <div
+        data-role="user"
+        style={{
+          width: '100%',
+          boxSizing: 'border-box',
+          margin: '4px 0 17px',
+          padding: '10px 11px',
+          border: `1px solid ${themeVars.boundary.default}`,
+          borderRadius: themeVars.shape.medium,
+          background: themeVars.surface.chrome,
+        }}
+      >
+        <MarkdownContent value={entry.text} />
+      </div>
+    );
+  }
+  return (
+    <div data-role="assistant" style={{ margin: '3px 0 13px' }}>
+      <MarkdownContent value={entry.text} />
+      <Button
+        type="button"
+        variant="ghost"
+        size="compact"
+        className="vgai-chat-icon"
+        aria-label={
+          copied ? 'Response copied' : finalResponse ? 'Copy final response' : 'Copy response'
+        }
+        title={copied ? 'Copied' : finalResponse ? 'Copy final response' : 'Copy response'}
+        onClick={() => {
+          void navigator.clipboard?.writeText(entry.text);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1_500);
+        }}
+        style={{ marginTop: 3 }}
+      >
+        <EditorIcon icon={copied ? faCheck : faCopy} />
+      </Button>
+    </div>
+  );
+}
+
+function Conversation({
+  snapshot,
+  messagesRef,
+  onRespond,
+  onScroll,
+}: {
+  snapshot: HarnessChatSnapshot;
+  messagesRef: React.RefObject<HTMLDivElement | null>;
+  onRespond: (action: HarnessChatAction) => void;
+  onScroll: () => void;
+}) {
+  const blocks = conversationBlocks(snapshot.conversation);
+  const finalAssistantId =
+    snapshot.turn.state === 'idle'
+      ? [...snapshot.conversation]
+          .reverse()
+          .find(
+            (entry): entry is HarnessChatMessageEntry =>
+              entry.kind === 'message' &&
+              entry.role === 'assistant' &&
+              entry.visibility === 'conversation',
+          )?.id
+      : undefined;
+  let content: React.ReactNode;
+  if (snapshot.status === 'loading' && blocks.length === 0) {
+    content = (
+      <div style={{ color: themeVars.content.dim, textAlign: 'center', padding: 28 }}>
+        Finding chats…
+      </div>
+    );
+  } else if (blocks.length === 0) {
+    content = (
+      <div style={{ color: themeVars.content.muted, padding: '24px 6px', lineHeight: 1.5 }}>
+        <div style={{ color: themeVars.content.primary, fontWeight: 600, marginBottom: 5 }}>
+          What do you want to build?
+        </div>
+        Start here, or run any supported coding agent from this project. External conversations
+        appear here automatically.
+      </div>
+    );
+  } else {
+    content = blocks.map((block) =>
+      block.kind === 'tool-group' ? (
+        <ToolGroup key={block.id} tools={block.tools} workspace={snapshot.workspace} />
+      ) : (
+        <ConversationEntry
+          key={block.id}
+          entry={block}
+          workspace={snapshot.workspace}
+          onRespond={onRespond}
+          finalResponse={block.kind === 'message' && block.id === finalAssistantId}
+          busy={snapshot.operation === 'respond'}
+        />
+      ),
+    );
+  }
+  return (
+    <div
+      ref={messagesRef}
+      data-testid="harness-chat-messages"
+      onScroll={onScroll}
+      style={{
+        flex: 1,
+        minHeight: 0,
+        overflow: 'auto',
+        padding: `${CHAT_GUTTER}px ${CHAT_GUTTER}px 24px`,
+      }}
+    >
+      {content}
+      {snapshot.turn.state !== 'idle' && (
+        <div
+          role="status"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            color: themeVars.content.dim,
+            fontSize: 'var(--vgai-font-sm)',
+            padding: '2px 0 5px',
+          }}
+        >
+          <EditorIcon icon={faCircleNotch} spin style={{ color: themeVars.accent.default }} />
+          {snapshot.turn.state === 'reconciling'
+            ? 'Reconciling…'
+            : snapshot.turn.state === 'interrupting'
+              ? 'Interrupting…'
+              : 'Working…'}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ContextCandidate {
+  id: string;
+  label: string;
+  detail: string;
+}
+
+interface OutgoingPrompt {
+  text: string;
+  context: ContextCandidate[];
+}
+
+function ContextChips({
+  candidates,
+  selected,
+  onToggle,
+}: {
+  candidates: ContextCandidate[];
+  selected: Set<string>;
+  onToggle: (id: string) => void;
+}) {
+  if (candidates.length === 0) return null;
+  return (
+    <div style={{ display: 'flex', gap: 5, overflowX: 'auto', padding: '6px 8px 0' }}>
+      {candidates.map((candidate) => (
+        <Button
+          type="button"
+          variant="outline"
+          size="compact"
+          key={candidate.id}
+          title={candidate.detail}
+          aria-pressed={selected.has(candidate.id)}
+          onClick={() => onToggle(candidate.id)}
+          style={{ flexShrink: 0 }}
+        >
+          + {candidate.label}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+function ObserveToolbar({
+  snapshot,
+  busy,
+  onBranch,
+  onAttach,
+  onResume,
+}: {
+  snapshot: HarnessChatSnapshot;
+  busy: boolean;
+  onBranch: () => void;
+  onAttach: () => void;
+  onResume: () => void;
+}) {
+  const lifecycle = harnessChatLifecycle(snapshot);
+  return (
+    <div
+      style={{ minHeight: 34, padding: '6px 7px 0', display: 'flex', alignItems: 'center', gap: 5 }}
+    >
+      <span
+        style={{
+          marginRight: 'auto',
+          padding: '3px 6px',
+          borderRadius: themeVars.shape.small,
+          background: themeVars.surface.inset,
+          color: themeVars.content.muted,
+          fontSize: 'var(--vgai-font-sm)',
+        }}
+      >
+        {lifecycle.label}
+      </span>
+      {snapshot.availableActions.attach ? (
+        <Button type="button" variant="primary" size="compact" disabled={busy} onClick={onAttach}>
+          Connect live
+        </Button>
+      ) : snapshot.availableActions.resume ? (
+        <Button type="button" variant="primary" size="compact" disabled={busy} onClick={onResume}>
+          Resume here
+        </Button>
+      ) : null}
+      {snapshot.availableActions.branch && (
+        <Button
+          type="button"
+          variant="outline"
+          size="compact"
+          disabled={busy}
+          onClick={onBranch}
+          title="Start an independent continuation"
+        >
+          <EditorIcon icon={faCodeBranch} />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function SessionControlButton({
+  snapshot,
+  onDetach,
+  onOpenTerminal,
+}: {
+  snapshot: HarnessChatSnapshot;
+  onDetach: () => void;
+  onOpenTerminal: () => void;
+}) {
+  const lifecycle = harnessChatLifecycle(snapshot);
+  const action = lifecycle.controlAction;
+  if (!action || !snapshot.availableActions[action]) return null;
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      className="vgai-chat-icon"
+      aria-label={lifecycle.controlActionLabel ?? 'Session action'}
+      title={
+        action === 'detach'
+          ? 'Disconnect the editor; the terminal session keeps running'
+          : 'Open this same live chat in a terminal'
+      }
+      onClick={action === 'detach' ? onDetach : onOpenTerminal}
+    >
+      <EditorIcon icon={faTerminal} />
+    </Button>
+  );
+}
+
+function Composer({
+  snapshot,
+  harness,
+  session,
+  draft,
+  busy,
+  queued,
+  contexts,
+  selectedContexts,
+  onToggleContext,
+  onDraft,
+  onSend,
+  onQueue,
+  onRemoveQueued,
+  onInterruptAndSend,
+  onInterrupt,
+  onDetach,
+  onOpenTerminal,
+  onBranch,
+  onResume,
+  onAttach,
+  onOpenSessions,
+}: {
+  snapshot: HarnessChatSnapshot;
+  harness: HarnessChatHarness | null;
+  session: HarnessChatSession | null;
+  draft: string;
+  busy: boolean;
+  queued: OutgoingPrompt[];
+  contexts: ContextCandidate[];
+  selectedContexts: Set<string>;
+  onToggleContext: (id: string) => void;
+  onDraft: (value: string) => void;
+  onSend: () => void;
+  onQueue: () => void;
+  onRemoveQueued: (index: number) => void;
+  onInterruptAndSend: () => void;
+  onInterrupt: () => void;
+  onDetach: () => void;
+  onOpenTerminal: () => void;
+  onBranch: () => void;
+  onResume: () => void;
+  onAttach: () => void;
+  onOpenSessions: () => void;
+}) {
+  const observing = snapshot.mode === 'observe';
+  const working = snapshot.turn.state !== 'idle';
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 170)}px`;
+  }, [draft]);
+  const disabled =
+    observing || (snapshot.mode === 'control' && !snapshot.availableActions.send && !working);
+  const agentLabel = harness?.label ?? snapshot.activeHarness ?? 'Agent';
+  return (
+    <div data-testid="harness-chat-composer" style={{ padding: `0 ${CHAT_GUTTER}px 14px` }}>
+      {queued.length > 0 && (
+        <div
+          role="status"
+          style={{
+            padding: '5px 3px',
+            color: themeVars.content.dim,
+            fontSize: 'var(--vgai-font-sm)',
+          }}
+        >
+          <div style={{ marginBottom: 3 }}>
+            {queued.length} queued message{queued.length === 1 ? '' : 's'}
+          </div>
+          {queued.map((message, index) => (
+            <div
+              key={`${index}:${message.text}`}
+              style={{ display: 'flex', alignItems: 'center', gap: 5 }}
+            >
+              <span
+                style={{
+                  minWidth: 0,
+                  flex: 1,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {message.text}
+              </span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="compact"
+                className="vgai-chat-icon"
+                aria-label={`Remove queued message ${index + 1}`}
+                onClick={() => onRemoveQueued(index)}
+              >
+                <EditorIcon icon={faXmark} />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+      <div
+        style={{
+          border: `1px solid ${observing ? themeVars.boundary.default : themeVars.boundary.strong}`,
+          borderRadius: themeVars.shape.large,
+          background: themeVars.surface.chrome,
+          boxShadow: observing ? 'none' : themeVars.elevation.small,
+          overflow: 'hidden',
+        }}
+      >
+        {observing && (
+          <ObserveToolbar
+            snapshot={snapshot}
+            busy={busy}
+            onBranch={onBranch}
+            onAttach={onAttach}
+            onResume={onResume}
+          />
+        )}
+        {!observing && (
+          <ContextChips
+            candidates={contexts}
+            selected={selectedContexts}
+            onToggle={onToggleContext}
+          />
+        )}
+        <textarea
+          ref={textareaRef}
+          aria-label="Message coding agent"
+          placeholder={
+            observing
+              ? 'Connect or resume to reply'
+              : working
+                ? 'Queue a follow-up…'
+                : 'Ask the agent to build something…'
+          }
+          value={draft}
+          disabled={disabled}
+          onChange={(event) => onDraft(event.target.value)}
+          onKeyDown={(event: KeyboardEvent<HTMLTextAreaElement>) => {
+            if (event.key !== 'Enter' || event.shiftKey) return;
+            event.preventDefault();
+            if ((event.metaKey || event.ctrlKey) && working) onInterruptAndSend();
+            else if (event.altKey || working) onQueue();
+            else onSend();
+          }}
+          style={{
+            boxSizing: 'border-box',
+            display: 'block',
+            width: '100%',
+            minHeight: observing ? 48 : 64,
+            maxHeight: 170,
+            overflowY: 'auto',
+            resize: 'none',
+            padding: '9px 11px 4px',
+            color: themeVars.content.primary,
+            background: 'transparent',
+            border: 0,
+            font: 'inherit',
+            lineHeight: 1.45,
+            outline: 'none',
+            opacity: observing ? 0.65 : 1,
+          }}
+        />
+        <div
+          style={{
+            minHeight: 34,
+            padding: '3px 6px 6px 9px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 5,
+          }}
+        >
+          <Button
+            type="button"
+            variant="ghost"
+            size="compact"
+            className="vgai-chat-harness-trigger"
+            aria-label="Change coding harness"
+            title={
+              harness
+                ? `${harness.label}: ${authSummary(harness)}, ${runtimeSummary(harness)}`
+                : 'Choose harness or chat'
+            }
+            onClick={onOpenSessions}
+          >
+            {harness && (
+              <span
+                aria-hidden
+                style={{
+                  width: 6,
+                  height: 6,
+                  flexShrink: 0,
+                  borderRadius: '50%',
+                  background: harnessReadinessColor(harness),
+                }}
+              />
+            )}
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{agentLabel}</span>
+            {session?.model && (
+              <span
+                style={{
+                  color: themeVars.content.dim,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+              >
+                · {session.model}
+              </span>
+            )}
+            <span style={{ color: themeVars.content.dim }}>· YOLO</span>
+            <EditorIcon
+              icon={faChevronDown}
+              style={{ color: themeVars.content.dim, fontSize: 8 }}
+            />
+          </Button>
+          {snapshot.mode === 'control' && (
+            <SessionControlButton
+              snapshot={snapshot}
+              onDetach={onDetach}
+              onOpenTerminal={onOpenTerminal}
+            />
+          )}
+          <span style={{ flex: 1 }} />
+          {working && (
+            <Button
+              type="button"
+              variant="secondary"
+              className="vgai-chat-icon"
+              aria-label="Stop agent"
+              disabled={!snapshot.availableActions.interrupt}
+              onClick={onInterrupt}
+            >
+              <EditorIcon icon={faStop} />
+            </Button>
+          )}
+          {!observing && (
+            <Button
+              type="button"
+              variant="primary"
+              className="vgai-chat-icon"
+              data-testid="harness-chat-send"
+              aria-label={working ? 'Queue message' : 'Send message'}
+              disabled={
+                busy ||
+                !draft.trim() ||
+                !harness ||
+                (snapshot.mode === 'none' && !harness.availableActions.start)
+              }
+              onClick={working ? onQueue : onSend}
+            >
+              <EditorIcon icon={faArrowUp} />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ResumeWarning({
+  checked,
+  onChecked,
+  onCancel,
+  onConfirm,
+}: {
+  checked: boolean;
+  onChecked: (checked: boolean) => void;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <div
+      role="alertdialog"
+      aria-label="Resume coding session here"
+      style={{
+        margin: `0 ${CHAT_GUTTER}px 10px`,
+        padding: 10,
+        border: `1px solid ${themeVars.boundary.strong}`,
+        borderRadius: themeVars.shape.medium,
+        background: themeVars.surface.chrome,
+        boxShadow: themeVars.elevation.small,
+      }}
+    >
+      <div style={{ color: themeVars.content.primary, fontWeight: 600, marginBottom: 4 }}>
+        Resume this chat here?
+      </div>
+      <div
+        style={{
+          color: themeVars.content.muted,
+          fontSize: 'var(--vgai-font-sm)',
+          lineHeight: 1.45,
+        }}
+      >
+        This starts a local harness process from the saved conversation. If another client still
+        controls it, both processes may edit the project.
+      </div>
+      <label
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6,
+          marginTop: 8,
+          color: themeVars.content.muted,
+        }}
+      >
+        <Checkbox checked={checked} onChange={(event) => onChecked(event.target.checked)} />
+        Don’t show again
+      </label>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 6, marginTop: 9 }}>
+        <Button type="button" variant="outline" size="compact" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          variant="primary"
+          size="compact"
+          data-testid="harness-chat-confirm-resume"
+          onClick={onConfirm}
+        >
+          Resume here
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function operationLabel(operation: HarnessChatSnapshot['operation']): string | null {
+  if (!operation) return null;
+  const labels: Record<Exclude<HarnessChatSnapshot['operation'], null>, string> = {
+    refresh: 'Refreshing chats…',
+    observe: 'Opening chat…',
+    start: 'Starting agent…',
+    resume: 'Resuming chat…',
+    attach: 'Connecting live…',
+    branch: 'Starting branch…',
+    restore: 'Restoring chat…',
+    detach: 'Disconnecting live chat…',
+    openTerminal: 'Preparing terminal attachment…',
+    send: 'Sending…',
+    interrupt: 'Interrupting…',
+    respond: 'Responding…',
+    load: 'Loading…',
+    import: 'Importing…',
+    export: 'Exporting…',
+    translate: 'Translating…',
+    handoff: 'Preparing handoff…',
+    workspace: 'Switching project…',
+    close: 'Closing…',
+  };
+  return labels[operation];
+}
+
+function completedOperationLabel(
+  operation: Exclude<HarnessChatSnapshot['operation'], null>,
+): string {
+  const labels: Record<Exclude<HarnessChatSnapshot['operation'], null>, string> = {
+    refresh: 'Chats refreshed',
+    observe: 'Chat opened',
+    start: 'Agent started',
+    resume: 'Chat resumed',
+    attach: 'Connected live',
+    branch: 'Branch started',
+    restore: 'Chat restored',
+    detach: 'Live chat disconnected',
+    openTerminal: 'Terminal attachment ready',
+    send: 'Message sent',
+    interrupt: 'Agent interrupted',
+    respond: 'Response sent',
+    load: 'Session loaded',
+    import: 'Session imported',
+    export: 'Session exported',
+    translate: 'Session translated',
+    handoff: 'Handoff prepared',
+    workspace: 'Project switched',
+    close: 'Session closed',
+  };
+  return labels[operation];
+}
+
+function actionOperation(
+  action: HarnessChatAction,
+): Exclude<HarnessChatSnapshot['operation'], null> {
+  if (action.type === 'create') return 'start';
+  if (action.type === 'prompt') return 'send';
+  return action.type;
+}
+
+function outgoingPrompt(
+  value: string,
+  candidates: ContextCandidate[],
+  selected: Set<string>,
+): OutgoingPrompt {
+  return {
+    text: value,
+    context: candidates.filter((candidate) => selected.has(candidate.id)),
+  };
+}
+
+interface OperationFeedback {
+  operation: Exclude<HarnessChatSnapshot['operation'], null>;
+  phase: 'running' | 'completed';
+}
+
+export function HarnessChatPanel() {
+  useSyncExternalStore(subscribeHarnessChatLayout, harnessChatLayoutVersion);
+  useSyncExternalStore(subscribeWorkspaceDocuments, workspaceDocumentRegistryVersion);
+  useSyncExternalStore(editorConsole.subscribe, editorConsole.getSnapshot);
+  useSyncExternalStore(
+    subscribeHarnessChatEditorStore,
+    harnessChatEditorStoreVersion,
+    harnessChatEditorStoreVersion,
+  );
+  const store = harnessChatEditorStore();
+  useSyncExternalStore(
+    store?.subscribe ?? noopSubscribe,
+    store?.getSnapshot ?? zeroSnapshot,
+    zeroSnapshot,
+  );
+  const layout = harnessChat();
+  const [snapshot, setSnapshot] = useState<HarnessChatSnapshot>(blankSnapshot);
+  const snapshotRef = useRef(snapshot);
+  const [drafts, setDrafts] = useState<Record<string, string>>({});
+  const [selectedHarnessId, setSelectedHarnessId] = useState('');
+  const [sessionsOpen, setSessionsOpen] = useState(false);
+  const [pendingNew, setPendingNew] = useState(false);
+  const [queues, setQueues] = useState<Record<string, OutgoingPrompt[]>>({});
+  const [interruptPrompts, setInterruptPrompts] = useState<Record<string, OutgoingPrompt | null>>(
+    {},
+  );
+  const [contextsBySession, setContextsBySession] = useState<Record<string, string[]>>({});
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [operationFeedback, setOperationFeedback] = useState<OperationFeedback | null>(null);
+  const [dismissedErrorKey, setDismissedErrorKey] = useState<string | null>(null);
+  const [actionInFlight, setActionInFlight] = useState(false);
+  const [terminalCommandCopied, setTerminalCommandCopied] = useState(false);
+  const [resumeCandidate, setResumeCandidate] = useState<string | null>(null);
+  const [skipResumeWarning, setSkipResumeWarning] = useState(false);
+  const [showJump, setShowJump] = useState(false);
+  const messagesRef = useRef<HTMLDivElement>(null);
+  const actionInFlightRef = useRef(false);
+  const actionAttemptRef = useRef(0);
+  const operationFeedbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const stickToBottomRef = useRef(true);
+
+  useEffect(
+    () => () => {
+      if (operationFeedbackTimerRef.current) clearTimeout(operationFeedbackTimerRef.current);
+    },
+    [],
+  );
+
+  const acceptSnapshot = useCallback((next: HarnessChatSnapshot) => {
+    if (!shouldAcceptHarnessChatSnapshot(snapshotRef.current, next)) return;
+    snapshotRef.current = next;
+    setSnapshot(next);
+  }, []);
+
+  useEffect(() => {
+    let live = true;
+    void getHarnessChatSnapshot().then((next) => {
+      if (live) acceptSnapshot(next);
+    });
+    const disconnect = connectHarnessChatEvents((next) => {
+      if (live) acceptSnapshot(next);
+    });
+    return () => {
+      live = false;
+      disconnect();
+    };
+  }, [acceptSnapshot]);
+
+  useEffect(() => {
+    if (!selectedHarnessId) {
+      const candidate = selectedHarness(snapshot, '');
+      if (candidate) setSelectedHarnessId(candidate.id);
+    }
+  }, [snapshot, selectedHarnessId]);
+
+  useEffect(() => updateHarnessChatIndicator(snapshot), [snapshot]);
+
+  useEffect(() => {
+    actionAttemptRef.current += 1;
+    actionInFlightRef.current = false;
+    setActionInFlight(false);
+    setActionError(null);
+    if (operationFeedbackTimerRef.current) clearTimeout(operationFeedbackTimerRef.current);
+    operationFeedbackTimerRef.current = null;
+    setOperationFeedback(null);
+  }, [snapshot.workspaceGeneration]);
+
+  const currentSession = useMemo(
+    () => snapshot.sessions.find((item) => item.id === snapshot.activeSessionId) ?? null,
+    [snapshot.sessions, snapshot.activeSessionId],
+  );
+  const newSessionHarness = selectedHarness(snapshot, selectedHarnessId);
+  const activeHarness =
+    snapshot.harnesses.find((item) => item.id === snapshot.activeHarness) ?? null;
+  const harness =
+    pendingNew || snapshot.mode === 'none'
+      ? newSessionHarness
+      : (activeHarness ?? newSessionHarness);
+  const workspaceKey = snapshot.workspace ?? 'no-workspace';
+  const sessionKey = pendingNew
+    ? `new:${newSessionHarness?.id ?? 'agent'}`
+    : (snapshot.activeSessionId ?? `new:${harness?.id ?? 'agent'}`);
+  const draftKey = `${workspaceKey}:${sessionKey}`;
+  const draft = drafts[draftKey] ?? '';
+  const queued = queues[draftKey] ?? [];
+  const interruptPrompt = interruptPrompts[draftKey] ?? null;
+  const selectedContexts = new Set(contextsBySession[draftKey] ?? []);
+  const busy = snapshot.operation !== null || actionInFlight;
+  const lifecycle = harnessChatLifecycle(snapshot);
+
+  useEffect(() => {
+    stickToBottomRef.current = true;
+    setShowJump(false);
+    const element = messagesRef.current;
+    if (element) element.scrollTop = element.scrollHeight;
+  }, [draftKey]);
+
+  useEffect(() => {
+    const element = messagesRef.current;
+    if (element && stickToBottomRef.current) element.scrollTop = element.scrollHeight;
+  }, [snapshot.conversation, snapshot.turn.state]);
+
+  const contextCandidates = useMemo<ContextCandidate[]>(() => {
+    const result: ContextCandidate[] = [];
+    const entity = store?.selectedEntity;
+    if (entity)
+      result.push({
+        id: 'selection',
+        label: 'Selection',
+        detail: `Selected entity: ${entity.name ?? 'Unnamed'} (${entity.id ?? 'no id'})`,
+      });
+    const document = activeWorkspaceDocument();
+    if (document) {
+      const path = document.descriptor.provenance?.sourcePath;
+      result.push({
+        id: 'document',
+        label: 'Open document',
+        detail: `Open document: ${document.title}${path ? ` (${path})` : ''}`,
+      });
+    }
+    const lastError = [...editorConsole.getEntries()]
+      .reverse()
+      .find((entry) => entry.level === 'error');
+    if (lastError)
+      result.push({
+        id: 'console-error',
+        label: 'Console error',
+        detail: `Console error: ${lastError.message}`,
+      });
+    if (store?.playState && store.playState !== 'stopped')
+      result.push({
+        id: 'play-state',
+        label: 'Play state',
+        detail: `Game play state: ${store.playState}`,
+      });
+    return result;
+  }, [
+    store,
+    store?.selectedEntityId,
+    store?.playState,
+    workspaceDocumentRegistryVersion(),
+    editorConsole.getSnapshot(),
+  ]);
+
+  const setDraft = (value: string) => setDrafts((current) => ({ ...current, [draftKey]: value }));
+  const setSelectedContexts = (next: Set<string>) =>
+    setContextsBySession((current) => ({ ...current, [draftKey]: [...next] }));
+  const setQueued = (update: (current: OutgoingPrompt[]) => OutgoingPrompt[]) =>
+    setQueues((current) => ({ ...current, [draftKey]: update(current[draftKey] ?? []) }));
+  const setInterruptPrompt = (value: OutgoingPrompt | null) =>
+    setInterruptPrompts((current) => ({ ...current, [draftKey]: value }));
+
+  const runAction = useCallback(
+    async (action: HarnessChatAction): Promise<HarnessChatSnapshot | null> => {
+      if (actionInFlightRef.current) return null;
+      const operation = actionOperation(action);
+      const workspaceGeneration = snapshotRef.current.workspaceGeneration;
+      const attempt = ++actionAttemptRef.current;
+      const isCurrentAttempt = () =>
+        actionAttemptRef.current === attempt &&
+        snapshotRef.current.workspaceGeneration === workspaceGeneration;
+      actionInFlightRef.current = true;
+      setActionInFlight(true);
+      setActionError(null);
+      if (operationFeedbackTimerRef.current) {
+        clearTimeout(operationFeedbackTimerRef.current);
+        operationFeedbackTimerRef.current = null;
+      }
+      setOperationFeedback({ operation, phase: 'running' });
+      try {
+        const next = await performHarnessChatAction(action);
+        if (!isCurrentAttempt()) return null;
+        acceptSnapshot(next);
+        setOperationFeedback({ operation, phase: 'completed' });
+        operationFeedbackTimerRef.current = setTimeout(() => {
+          setOperationFeedback(null);
+          operationFeedbackTimerRef.current = null;
+        }, 1_800);
+        return next;
+      } catch (error) {
+        if (!isCurrentAttempt()) return null;
+        if (error instanceof HarnessChatRequestError && error.snapshot) {
+          acceptSnapshot(error.snapshot);
+        }
+        setActionError(error instanceof Error ? error.message : String(error));
+        setOperationFeedback(null);
+        return null;
+      } finally {
+        if (actionAttemptRef.current === attempt) {
+          actionInFlightRef.current = false;
+          setActionInFlight(false);
+        }
+      }
+    },
+    [acceptSnapshot],
+  );
+
+  useHarnessChatReconnect(snapshot, currentSession, actionInFlight, runAction);
+
+  const sendValue = useCallback(
+    async (value: OutgoingPrompt): Promise<boolean> => {
+      if (!value.text.trim() || !harness) return false;
+      if (
+        (pendingNew || snapshotRef.current.mode === 'none') &&
+        !(await runAction({ type: 'create', harness: harness.id }))
+      )
+        return false;
+      const sent = await runAction({
+        type: 'prompt',
+        text: value.text,
+        ...(value.context.length > 0 ? { context: value.context } : {}),
+      });
+      if (sent) setPendingNew(false);
+      return Boolean(sent);
+    },
+    [harness, pendingNew, runAction],
+  );
+
+  const send = async () => {
+    const value = outgoingPrompt(draft.trim(), contextCandidates, selectedContexts);
+    if (await sendValue(value)) {
+      setDraft('');
+      setSelectedContexts(new Set());
+    }
+  };
+
+  const queueDraft = () => {
+    const value = outgoingPrompt(draft.trim(), contextCandidates, selectedContexts);
+    if (!value.text) return;
+    setQueued((current) => [...current, value]);
+    setDraft('');
+    setSelectedContexts(new Set());
+  };
+
+  const interruptAndSend = () => {
+    const value = outgoingPrompt(draft.trim(), contextCandidates, selectedContexts);
+    if (!value.text || !snapshot.availableActions.interrupt) return;
+    setInterruptPrompt(value);
+    setDraft('');
+    setSelectedContexts(new Set());
+    void runAction({ type: 'interrupt' });
+  };
+
+  useEffect(() => {
+    if (snapshot.turn.state !== 'idle' || busy || snapshot.mode !== 'control') return;
+    const next = interruptPrompt ?? queued[0];
+    if (!next) return;
+    let active = true;
+    void sendValue(next).then((sent) => {
+      if (!active || !sent) return;
+      if (interruptPrompt) setInterruptPrompt(null);
+      else setQueued((current) => current.slice(1));
+    });
+    return () => {
+      active = false;
+    };
+  }, [snapshot.turn.state, snapshot.mode, busy, interruptPrompt, queued, sendValue]);
+
+  const requestResume = (sessionId: string) => {
+    let skip = false;
+    try {
+      skip = localStorage.getItem(RESUME_WARNING_KEY) === '1';
+    } catch {
+      /* optional */
+    }
+    if (skip) void runAction({ type: 'resume', sessionId });
+    else setResumeCandidate(sessionId);
+  };
+
+  const confirmResume = async () => {
+    if (!resumeCandidate) return;
+    if (skipResumeWarning) {
+      try {
+        localStorage.setItem(RESUME_WARNING_KEY, '1');
+      } catch {
+        /* optional */
+      }
+    }
+    const sessionId = resumeCandidate;
+    setResumeCandidate(null);
+    await runAction({ type: 'resume', sessionId });
+  };
+
+  if (layout.collapsed) return null;
+
+  const startNew = () => {
+    setSessionsOpen(false);
+    setPendingNew(true);
+    setSelectedContexts(new Set());
+  };
+  const observe = (sessionId: string) => {
+    setSessionsOpen(false);
+    setPendingNew(false);
+    void runAction({ type: 'observe', sessionId });
+  };
+  const immediateOperation =
+    operationFeedback?.phase === 'running' ? operationFeedback.operation : null;
+  const opLabel = operationLabel(snapshot.operation ?? immediateOperation);
+  const completedOpLabel =
+    !snapshot.operation && operationFeedback?.phase === 'completed'
+      ? completedOperationLabel(operationFeedback.operation)
+      : null;
+  const snapshotErrorKey = snapshot.error
+    ? `${snapshot.workspaceGeneration}:${snapshot.error.code}:${snapshot.error.operation}:${snapshot.error.message}`
+    : null;
+  const visibleSnapshotError =
+    snapshot.error && snapshotErrorKey !== dismissedErrorKey ? snapshot.error : null;
+  const canReconnectLive =
+    snapshot.mode === 'observe' &&
+    Boolean(currentSession?.attachable) &&
+    snapshot.availableActions.attach;
+
+  return (
+    <div
+      data-testid="harness-chat"
+      style={{
+        width: '100%',
+        height: '100%',
+        minHeight: 0,
+        display: 'flex',
+        background: themeVars.surface.panel,
+        pointerEvents: 'auto',
+        position: 'relative',
+      }}
+    >
+      <div
+        style={{
+          flex: 1,
+          minWidth: 0,
+          minHeight: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          position: 'relative',
+        }}
+      >
+        <header
+          style={{
+            height: 40,
+            padding: '0 8px 0 12px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            borderBottom: `1px solid ${themeVars.boundary.default}`,
+            background: themeVars.surface.chrome,
+            position: 'relative',
+          }}
+        >
+          <Button
+            type="button"
+            variant="ghost"
+            className="vgai-chat-header-trigger"
+            onClick={() => setSessionsOpen((open) => !open)}
+            aria-expanded={sessionsOpen}
+            title="Chats"
+          >
+            <span
+              aria-hidden
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: '50%',
+                background: statusColor(snapshot),
+              }}
+            />
+            <span
+              style={{
+                minWidth: 0,
+                flex: 1,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                fontSize: 'var(--vgai-font-base)',
+                fontWeight: 600,
+              }}
+            >
+              {conversationTitle(currentSession, snapshot.conversation, pendingNew)}
+            </span>
+            {!pendingNew && snapshot.activeSessionId && (
+              <span
+                data-testid="harness-chat-lifecycle"
+                title={lifecycle.detail}
+                style={{
+                  flexShrink: 0,
+                  padding: '2px 5px',
+                  borderRadius: themeVars.shape.small,
+                  color: lifecycleColor(snapshot),
+                  background: themeVars.surface.inset,
+                  fontSize: 9,
+                  fontWeight: 600,
+                  letterSpacing: '0.02em',
+                }}
+              >
+                {lifecycle.label}
+              </span>
+            )}
+            <EditorIcon
+              icon={faChevronDown}
+              style={{ color: themeVars.content.dim, fontSize: 9 }}
+            />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            className="vgai-chat-icon"
+            aria-label="New chat"
+            title="New chat"
+            disabled={!newSessionHarness?.availableActions.start}
+            onClick={startNew}
+          >
+            <EditorIcon icon={faPlus} />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            className="vgai-chat-icon"
+            aria-label="Chat history"
+            title="Chat history"
+            onClick={() => setSessionsOpen((open) => !open)}
+          >
+            <EditorIcon icon={faHistory} />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            className="vgai-chat-icon"
+            aria-label="Refresh coding sessions"
+            title="Refresh chats"
+            disabled={!snapshot.availableActions.refresh}
+            onClick={() => void runAction({ type: 'refresh' })}
+          >
+            <EditorIcon icon={faRotate} />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            className="vgai-chat-icon"
+            data-testid="harness-chat-collapse"
+            aria-label="Collapse Chat"
+            title="Collapse Chat (session keeps running)"
+            onClick={toggleHarnessChatCollapsed}
+          >
+            <EditorIcon icon={faChevronLeft} />
+          </Button>
+          {sessionsOpen && (
+            <SessionPicker
+              snapshot={snapshot}
+              harness={newSessionHarness}
+              selectedHarnessId={selectedHarnessId}
+              onHarness={setSelectedHarnessId}
+              onNew={startNew}
+              onObserve={observe}
+              onClose={() => setSessionsOpen(false)}
+            />
+          )}
+        </header>
+
+        {(opLabel || completedOpLabel) && (
+          <div
+            role="status"
+            data-testid="harness-chat-operation-status"
+            style={{
+              padding: '5px 10px',
+              color: completedOpLabel ? themeVars.semantic.success : themeVars.content.muted,
+              fontSize: 'var(--vgai-font-sm)',
+              background: themeVars.surface.chrome,
+            }}
+          >
+            <EditorIcon
+              icon={completedOpLabel ? faCheck : faCircleNotch}
+              spin={!completedOpLabel}
+              style={{
+                marginRight: 6,
+                color: completedOpLabel ? themeVars.semantic.success : themeVars.accent.default,
+              }}
+            />
+            {completedOpLabel ?? opLabel}
+          </div>
+        )}
+        {(actionError || visibleSnapshotError) && (
+          <div
+            role="alert"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              padding: '6px 10px',
+              color: themeVars.semantic.danger,
+              fontSize: 'var(--vgai-font-sm)',
+            }}
+          >
+            <span style={{ minWidth: 0, flex: 1 }}>
+              {actionError ?? visibleSnapshotError?.message}
+            </span>
+            {visibleSnapshotError?.recoverable && (
+              <Button
+                type="button"
+                variant="outline"
+                size="compact"
+                onClick={() =>
+                  void runAction(
+                    canReconnectLive && snapshot.activeSessionId
+                      ? { type: 'attach', sessionId: snapshot.activeSessionId }
+                      : { type: 'refresh' },
+                  )
+                }
+              >
+                {canReconnectLive ? 'Reconnect live' : 'Retry'}
+              </Button>
+            )}
+            <Button
+              type="button"
+              variant="ghost"
+              size="compact"
+              className="vgai-chat-icon"
+              aria-label="Dismiss agent error"
+              onClick={() => {
+                setActionError(null);
+                setDismissedErrorKey(snapshotErrorKey);
+              }}
+            >
+              <EditorIcon icon={faXmark} />
+            </Button>
+          </div>
+        )}
+        {harness?.repair && (!harness.installed || harness.auth !== 'ready') && (
+          <div
+            role={harness.auth === 'required' ? 'alert' : 'status'}
+            style={{
+              padding: '6px 10px',
+              color: themeVars.semantic.warning,
+              fontSize: 'var(--vgai-font-sm)',
+            }}
+          >
+            <strong>
+              {!harness.installed
+                ? `${harness.label} is not installed. `
+                : harness.auth === 'required'
+                  ? `${harness.label} sign-in required. `
+                  : `${harness.label} sign-in is not verified. `}
+            </strong>
+            {harness.repair}
+          </div>
+        )}
+        {snapshot.terminalCommand && (
+          <div
+            style={{
+              margin: `8px ${CHAT_GUTTER}px 0`,
+              color: themeVars.content.muted,
+              fontSize: 'var(--vgai-font-sm)',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <span style={{ flex: 1 }}>Open this chat in terminal:</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="compact"
+                className="vgai-chat-icon"
+                aria-label={terminalCommandCopied ? 'Command copied' : 'Copy terminal command'}
+                onClick={() => {
+                  void navigator.clipboard?.writeText(snapshot.terminalCommand!);
+                  setTerminalCommandCopied(true);
+                  setTimeout(() => setTerminalCommandCopied(false), 1_500);
+                }}
+              >
+                <EditorIcon icon={terminalCommandCopied ? faCheck : faCopy} />
+              </Button>
+            </div>
+            <code
+              style={{
+                display: 'block',
+                marginTop: 4,
+                padding: 7,
+                borderRadius: themeVars.shape.small,
+                background: themeVars.surface.inset,
+                color: themeVars.content.primary,
+                fontFamily: themeVars.typography.mono,
+                overflowWrap: 'anywhere',
+              }}
+            >
+              {snapshot.terminalCommand}
+            </code>
+          </div>
+        )}
+
+        <Conversation
+          snapshot={
+            pendingNew
+              ? { ...snapshot, conversation: [], requests: [], activeSessionId: null, mode: 'none' }
+              : snapshot
+          }
+          messagesRef={messagesRef}
+          onRespond={(action) => void runAction(action)}
+          onScroll={() => {
+            const element = messagesRef.current;
+            if (!element) return;
+            const nearBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 36;
+            stickToBottomRef.current = nearBottom;
+            setShowJump(!nearBottom);
+          }}
+        />
+
+        {showJump && (
+          <Button
+            type="button"
+            variant="secondary"
+            size="compact"
+            onClick={() => {
+              const element = messagesRef.current;
+              if (element) element.scrollTop = element.scrollHeight;
+              stickToBottomRef.current = true;
+              setShowJump(false);
+            }}
+            style={{ position: 'absolute', right: 14, bottom: 144, zIndex: 4 }}
+          >
+            <EditorIcon icon={faArrowDown} style={{ marginRight: 5 }} />
+            Latest
+          </Button>
+        )}
+
+        {resumeCandidate && (
+          <ResumeWarning
+            checked={skipResumeWarning}
+            onChecked={setSkipResumeWarning}
+            onCancel={() => setResumeCandidate(null)}
+            onConfirm={() => void confirmResume()}
+          />
+        )}
+
+        <Composer
+          snapshot={pendingNew ? { ...snapshot, mode: 'none', activeSessionId: null } : snapshot}
+          harness={harness}
+          session={pendingNew ? null : currentSession}
+          draft={draft}
+          busy={busy}
+          queued={queued}
+          contexts={contextCandidates}
+          selectedContexts={selectedContexts}
+          onToggleContext={(id) => {
+            const next = new Set(selectedContexts);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            setSelectedContexts(next);
+          }}
+          onDraft={setDraft}
+          onSend={() => void send()}
+          onQueue={queueDraft}
+          onRemoveQueued={(index) =>
+            setQueued((current) => current.filter((_, itemIndex) => itemIndex !== index))
+          }
+          onInterruptAndSend={interruptAndSend}
+          onInterrupt={() => void runAction({ type: 'interrupt' })}
+          onDetach={() => void runAction({ type: 'detach' })}
+          onOpenTerminal={() => void runAction({ type: 'openTerminal' })}
+          onBranch={() => {
+            if (snapshot.activeSessionId)
+              void runAction({ type: 'branch', sessionId: snapshot.activeSessionId });
+          }}
+          onResume={() => {
+            if (snapshot.activeSessionId) requestResume(snapshot.activeSessionId);
+          }}
+          onAttach={() => {
+            if (snapshot.activeSessionId && currentSession?.attachable)
+              void runAction({
+                type: 'attach',
+                sessionId: snapshot.activeSessionId,
+              });
+          }}
+          onOpenSessions={() => setSessionsOpen(true)}
+        />
+      </div>
+    </div>
+  );
+}