@kabmo-labs/kabmo 0.7.0 → 0.8.0

package/src/client/components/workspace/chat-timeline/PendingChatView.tsx

@@ -20,6 +20,7 @@ import type { ComposerModes } from '@/client/components/workspace/chat-timeline/
 import type { WaitingCandidate } from '@/client/components/workspace/chat-timeline/chat-input/WaitingDependencyPicker';
 import type { DeferredModelStore } from '@/client/hooks/chat/timeline/deferred-model';
 import { EmptyWorkspacePrompt } from '@/client/components/workspace/chat-timeline/EmptyWorkspacePrompt';
+import type { SpawnTarget } from '@/client/hooks/chat/timeline/spawn-target';
 
 export interface PendingChatViewProps {
   className: string;
@@ -59,6 +60,10 @@ export interface PendingChatViewProps {
   onWaitingForChange: (candidate: WaitingCandidate | null) => void;
   heldWait: { title: string | null } | null;
   onCancelWait: () => void;
+  /** Where the chat will run: the folder, or one of its worktrees. */
+  spawnTarget?: SpawnTarget | null;
+  onSpawnTargetChange?: (next: SpawnTarget | null) => void;
+  onWorktreeReport?: (message: string) => void;
 }
 
 export function PendingChatView(props: PendingChatViewProps) {
@@ -101,6 +106,9 @@ export function PendingChatView(props: PendingChatViewProps) {
       onWaitingForChange={props.onWaitingForChange}
       heldWait={props.heldWait}
       onCancelWait={props.onCancelWait}
+      spawnTarget={props.spawnTarget}
+      onSpawnTargetChange={props.onSpawnTargetChange}
+      onWorktreeReport={props.onWorktreeReport}
     />
   );
 }

package/src/client/components/workspace/chat-timeline/index.tsx

@@ -88,6 +88,8 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
     extensionDialogs,
     resolveExtensionDialog,
     respondToExtensionUi,
+    spawnTarget,
+    setSpawnTarget,
   } = useChatTimeline({ folders, streamStatusMap, appSettings, reportActionError: pushToast });
 
   // Ask dialogs render on their own tool card; anything else omp is blocked on
@@ -215,6 +217,9 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
         onWaitingForChange={waitingDependency.set}
         heldWait={heldWait ? { title: heldWait.dependsOnTitle } : null}
         onCancelWait={cancelHeldWait}
+        spawnTarget={spawnTarget}
+        onSpawnTargetChange={setSpawnTarget}
+        onWorktreeReport={(message) => pushToast(message, 'success', { duration: 6000 })}
       />
     );
   }

package/src/client/components/workspace/chat-timeline/target-picker/index.test.tsx

@@ -0,0 +1,227 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The composer's target picker and the New Worktree dialog, rendered.
+ *
+ * Unit-testing markup is usually a test of the test, so these cases are the ones
+ * a reader would otherwise discover in a browser and nowhere else:
+ *
+ *  - the trigger names the WORKTREE when one is picked, because "kabmo" alone
+ *    would be equally true of the checkout it is not running in;
+ *  - the menu's groups are the three the plan names, and creating is offered
+ *    ABOVE the list so a long list cannot hide it;
+ *  - the dialog opens on a generated branch with the folder following it, and
+ *    the folder keeps following until it is edited (the defect this rule
+ *    prevents: a folder named after the previous branch).
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+import { TargetPicker, targetLabel } from '@/client/components/workspace/chat-timeline/target-picker/index';
+import { NewWorktreeModal } from '@/client/components/workspace/worktree-modal/index';
+import type { WorkspaceFolderData } from '@/shared/types';
+
+const folder: WorkspaceFolderData = {
+  id: 1,
+  name: 'kabmo',
+  project_path: '/repo',
+  isExpanded: true,
+  hasMore: false,
+  totalSessions: 0,
+  sessions: [],
+};
+
+const nativeFetch = Bun.fetch;
+const mounted: HTMLElement[] = [];
+
+beforeAll(() => {
+  installDomGlobals(new Window({ url: 'http://localhost' }));
+});
+
+afterEach(() => {
+  for (const host of mounted.splice(0)) {
+    render(null, host);
+    host.remove();
+  }
+  (globalThis as unknown as Record<string, unknown>).fetch = nativeFetch;
+});
+
+afterAll(() => {
+  restoreDomGlobals();
+});
+
+/**
+ * Mount, with the first render FLUSHED. Preact batches a state update into a
+ * microtask, so a `useEffect` that seeds a field (the dialog's generated branch)
+ * has not run when `render` returns — reading the inputs then reads empty ones,
+ * which is a property of the test harness and not of the dialog.
+ */
+async function mount(node: h.JSX.Element): Promise<HTMLElement> {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  await act(async () => {
+    render(node, host);
+  });
+  mounted.push(host);
+  return host;
+}
+
+/** The picker reads the worktree list on open; answer it without a server. */
+/** Calls the picker made, so a test can tell "not read" from "read empty". */
+let fetchCalls: string[] = [];
+
+function stubWorktreeList(worktrees: unknown[] = []): void {
+  fetchCalls = [];
+  (globalThis as unknown as Record<string, unknown>).fetch = async (input: RequestInfo | URL) => {
+    fetchCalls.push(String(input));
+    // A plain envelope, not a real `Response`: `Response.json()` resolves on a
+    // stream tick that this harness has no reason to wait for, and the picker
+    // only reads `ok` and `json()`.
+    const payload = { worktrees, base: '/data/worktrees/x', isRepo: true };
+    return { ok: true, json: async () => payload } as unknown as Response;
+  };
+}
+
+/** Collapsed whitespace: the markup carries newlines the reader never sees. */
+function textOf(host: HTMLElement): string {
+  return (host.textContent ?? '').replace(/\s+/g, ' ').trim();
+}
+
+describe('targetLabel', () => {
+  test('the folder alone when the chat runs in the checkout', () => {
+    expect(targetLabel([folder], 1, null)).toBe('kabmo');
+  });
+
+  test('folder · worktree when a worktree is picked', () => {
+    expect(targetLabel([folder], 1, { folderId: 1, worktreePath: '/data/worktrees/abc/cosmic-dolphin' })).toBe(
+      'kabmo · cosmic-dolphin',
+    );
+  });
+
+  test('a Windows worktree path names the worktree, not the whole path', () => {
+    // The label was `split('/').pop()`, which has nothing to cut in a
+    // `\`-separated path: the trigger read `kabmo · C:\Users\…\cosmic-dolphin`
+    // on a Windows runner while every POSIX leg passed.
+    expect(
+      targetLabel([folder], 1, {
+        folderId: 1,
+        worktreePath: 'C:\\Users\\u\\AppData\\Local\\Temp\\kabmo\\worktrees\\abc\\cosmic-dolphin',
+      }),
+    ).toBe('kabmo · cosmic-dolphin');
+  });
+
+  test('an unresolved folder still says what it is waiting for', () => {
+    expect(targetLabel([], null, null)).toBe('Select Workspace Context');
+  });
+});
+
+describe('TargetPicker', () => {
+  test('the menu offers the project root, both create paths, and the worktree list', async () => {
+    stubWorktreeList([
+      { path: '/data/worktrees/x/old-one', branch: 'wt/old-one', detached: false, missing: false, isPrimary: false, dirty: 0, aheadOfStart: 0, startRef: 'HEAD', sessions: 0 },
+    ]);
+    const host = await mount(
+      h(TargetPicker, {
+        folders: [folder],
+        selectedFolderId: 1,
+        setSelectedFolderId: () => {},
+        target: null,
+        setTarget: () => {},
+      }),
+    );
+
+    const trigger = host.querySelector('button');
+    expect(trigger?.textContent).toContain('kabmo');
+    await act(async () => {
+      (trigger as HTMLButtonElement).click();
+    });
+    // The list is read when the menu opens; each empty `act` drains one round of
+    // the fetch's promise chain, the same way the stash section's suite does.
+    for (let round = 0; round < 10; round += 1) await act(async () => {});
+
+    const text = textOf(host);
+    expect(text).toContain('Project root');
+    expect(text).toContain('Quick worktree');
+    expect(text).toContain('New worktree…');
+    expect(text).toContain('Worktrees');
+    // Creating sits above the LIST: a workspace with many worktrees must not
+    // push the action that makes one out of sight. Compared against a listed
+    // branch, because the group heading is also spelled "Worktrees".
+    expect(fetchCalls.length).toBeGreaterThan(0);
+    expect(text).toContain('wt/old-one');
+    expect(text.indexOf('Quick worktree')).toBeLessThan(text.indexOf('wt/old-one'));
+  });
+
+  test('the trigger shows the picked worktree, not just the folder', async () => {
+    const host = await mount(
+      h(TargetPicker, {
+        folders: [folder],
+        selectedFolderId: 1,
+        setSelectedFolderId: () => {},
+        target: { folderId: 1, worktreePath: '/data/worktrees/abc/cosmic-dolphin' },
+        setTarget: () => {},
+      }),
+    );
+    expect(host.querySelector('button')?.textContent).toContain('kabmo · cosmic-dolphin');
+  });
+});
+
+describe('NewWorktreeModal', () => {
+  test('opens on a generated branch, with the folder following it', async () => {
+    const host = await mount(
+      h(NewWorktreeModal, { isOpen: true, onClose: () => {}, root: '/repo', folderId: 1, folderName: 'kabmo', onCreated: () => {} }),
+    );
+
+    const inputs = [...host.querySelectorAll('input')] as HTMLInputElement[];
+    const branch = inputs[0]?.value ?? '';
+    const folderName = inputs[2]?.value ?? '';
+    expect(branch).toMatch(/^wt\/[a-z]+-[a-z]+$/);
+    // The folder is the branch without our namespace, so it is never `wt-x`.
+    expect(folderName).toBe(branch.replace(/^wt\//, ''));
+    expect(folderName.startsWith('wt-')).toBe(false);
+  });
+
+  test('the generated branch is in the FIRST paint, before any effect flushes', () => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    // Deliberately NOT `mount`: no `act`, so no effect has run. A field seeded
+    // by an effect reads empty here, and the browser's own window between paint
+    // and the effect flush is exactly when a user types into it — measured: the
+    // branch filled as `main` was replaced by the generated name, and the dialog
+    // created `wt/calm-iguana` instead of reporting that `main` is taken.
+    render(
+      h(NewWorktreeModal, { isOpen: true, onClose: () => {}, root: '/repo', folderId: 1, folderName: 'kabmo', onCreated: () => {} }),
+      host,
+    );
+    mounted.push(host);
+
+    const inputs = [...host.querySelectorAll('input')] as HTMLInputElement[];
+    const branch = inputs[0]?.value ?? '';
+    expect(branch).toMatch(/^wt\/[a-z]+-[a-z]+$/);
+    // One generated name for both fields: deriving the folder from a SECOND
+    // call would show a folder the branch does not have.
+    expect(inputs[2]?.value ?? '').toBe(branch.replace(/^wt\//, ''));
+  });
+
+  test('states what happens to uncommitted changes, and on which project', async () => {
+    const host = await mount(
+      h(NewWorktreeModal, { isOpen: true, onClose: () => {}, root: '/repo', folderId: 1, folderName: 'kabmo', onCreated: () => {} }),
+    );
+    const text = textOf(host);
+    expect(text).toContain('Uncommitted changes stay in');
+    expect(text).toContain('kabmo');
+  });
+
+  test('renders nothing while closed', async () => {
+    const host = await mount(
+      h(NewWorktreeModal, { isOpen: false, onClose: () => {}, root: '/repo', folderId: 1, onCreated: () => {} }),
+    );
+    expect(host.textContent).toBe('');
+  });
+});

package/src/client/components/workspace/chat-timeline/target-picker/index.tsx

@@ -0,0 +1,260 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Where a chat that has not started will run: the workspace, or one of the
+ * workspace's worktrees.
+ *
+ * One control rather than two, because both answers are the same question. The
+ * menu is grouped exactly as OpenChamber's draft target is — the project root
+ * first, then the two ways to make a worktree, then the worktrees that already
+ * exist — and creating one here means the user does not have to leave the draft
+ * to get it.
+ *
+ * The pick is `{folderId, worktreePath}`: choosing a folder CLEARS the worktree
+ * (the groups are mutually exclusive), while choosing a worktree keeps its
+ * folder, so the row the composer draws can always name both.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { Check, ChevronDown, Folder, GitBranch } from 'lucide-preact';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { useWorktrees } from '@/client/hooks/workspace/worktree/index';
+import type { SpawnTarget } from '@/client/hooks/chat/timeline/spawn-target';
+import { NewWorktreeModal } from '@/client/components/workspace/worktree-modal/index';
+import { createWorktree } from '@/client/hooks/workspace/worktree/index';
+import { lastPathSegment } from '@/shared/lib/fs/paths';
+import type { WorkspaceFolderData } from '@/shared/types';
+
+export interface TargetPickerProps {
+  folders: WorkspaceFolderData[];
+  selectedFolderId: number | null;
+  setSelectedFolderId: (id: number | null) => void;
+  target: SpawnTarget | null;
+  setTarget: (next: SpawnTarget | null) => void;
+  /**
+   * Reports a completed create/removal to the caller (a toast). Optional: the
+   * picker owns the flows, so a caller that only wants the pick needs nothing.
+   */
+  onReport?: (message: string) => void;
+}
+
+/** The trigger's words: the folder, plus the worktree when one is picked. */
+export function targetLabel(
+  folders: WorkspaceFolderData[],
+  selectedFolderId: number | null,
+  target: SpawnTarget | null,
+): string {
+  const folder = folders.find((candidate) => String(candidate.id) === String(selectedFolderId));
+  const name = folder?.name ?? 'Select Workspace Context';
+  const worktree = lastPathSegment(target?.worktreePath);
+  return worktree ? `${name} · ${worktree}` : name;
+}
+
+export function TargetPicker({
+  folders,
+  selectedFolderId,
+  setSelectedFolderId,
+  target,
+  setTarget,
+  onReport,
+}: TargetPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [dialogFolder, setDialogFolder] = useState<WorkspaceFolderData | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(containerRef, () => setOpen(false));
+
+  const selectedFolder = folders.find((candidate) => String(candidate.id) === String(selectedFolderId)) ?? null;
+  const scopeRoot = selectedFolder?.project_path ?? null;
+
+  // The list is read only while the menu is open: it costs a `git status` per
+  // worktree, and a closed picker must never pay for it.
+  const { worktrees, error, refresh } = useWorktrees(
+    { root: scopeRoot, folderId: selectedFolder?.id ?? null },
+    open && Boolean(scopeRoot),
+  );
+  useEffect(() => {
+    if (open) void refresh();
+  }, [open, refresh]);
+
+  const list = useMemo(() => worktrees.filter((worktree) => !worktree.isPrimary), [worktrees]);
+
+  const pickFolder = (folder: WorkspaceFolderData) => {
+    setSelectedFolderId(folder.id);
+    // A folder and a worktree are alternative answers, not a pair.
+    setTarget(null);
+    setOpen(false);
+  };
+
+  const pickWorktree = (folder: WorkspaceFolderData, worktreePath: string) => {
+    setSelectedFolderId(folder.id);
+    setTarget({ folderId: Number(folder.id), worktreePath });
+    setOpen(false);
+  };
+
+  /**
+   * Quick worktree: a generated branch and folder, created and selected without
+   * leaving the draft. Reported rather than silent — the create takes a moment
+   * and a pick that changed with no word reads as a mis-click.
+   */
+  const quickWorktree = async (folder: WorkspaceFolderData) => {
+    if (!folder.project_path) return;
+    setCreating(true);
+    try {
+      const created = await createWorktree(
+        { root: folder.project_path, folderId: folder.id },
+        { mode: 'new' },
+      );
+      pickWorktree(folder, created.path);
+      onReport?.(`Worktree ${created.branch || lastPathSegment(created.path)} created`);
+    } catch (error) {
+      onReport?.(error instanceof Error ? error.message : String(error));
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <div className="relative shrink-0" ref={containerRef}>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="group flex items-center space-x-1.5 px-1.5 py-1 rounded-md text-xs font-medium text-ink/75 hover:text-ink hover:bg-ink/5 focus-visible:bg-ink/5 transition-all outline-none cursor-pointer select-none"
+      >
+        {target?.worktreePath ? (
+          <GitBranch size={13} className="text-ink/50 group-hover:text-ink/80 transition-colors flex-shrink-0" />
+        ) : (
+          <Folder size={13} className="text-ink/50 group-hover:text-ink/80 transition-colors flex-shrink-0" />
+        )}
+        <span className="flex items-center space-x-1 max-w-[260px] truncate tracking-tight">
+          <span>{targetLabel(folders, selectedFolderId, target)}</span>
+        </span>
+        <ChevronDown
+          size={13}
+          className={`text-ink/40 group-hover:text-ink/70 flex-shrink-0 transition-transform duration-150 ${open ? 'rotate-180 text-ink/70' : ''}`}
+        />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute bottom-full left-0 mb-1.5 w-72 bg-paper border border-ink/10 rounded-lg shadow-lg z-50 flex flex-col overflow-hidden text-xs py-1"
+        >
+          <div className="px-3 py-1.5 text-[10px] uppercase tracking-wider text-ink/40 font-semibold border-b border-ink/5">
+            Project root
+          </div>
+          <div className="max-h-56 scrollbar-overlay-container py-1">
+            {folders.length === 0 ? (
+              <div className="px-3 py-2 text-ink/40 italic">No workspaces available</div>
+            ) : (
+              folders.map((folder) => (
+                <button
+                  key={folder.id}
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={selectedFolderId === folder.id && !target?.worktreePath}
+                  onClick={() => pickFolder(folder)}
+                  className={`w-full text-left px-3 py-1.5 flex items-center justify-between transition-colors cursor-pointer ${
+                    selectedFolderId === folder.id && !target?.worktreePath
+                      ? 'bg-ink/10 text-ink font-semibold'
+                      : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
+                  }`}
+                >
+                  <span className="flex items-center space-x-2 truncate pr-2">
+                    <Folder size={12} className={selectedFolderId === folder.id ? 'text-ink flex-shrink-0' : 'text-ink/50 flex-shrink-0'} />
+                    <span className="truncate font-medium">{folder.name}</span>
+                  </span>
+                  {selectedFolderId === folder.id && !target?.worktreePath && <Check size={12} className="text-ink flex-shrink-0" />}
+                </button>
+              ))
+            )}
+          </div>
+
+          {/* Making one comes before the list, so a long list never hides it. */}
+          {selectedFolder && scopeRoot && (
+            <>
+              <div className="border-t border-ink/5 px-3 py-1.5 text-[10px] uppercase tracking-wider text-ink/40 font-semibold">
+                Worktrees
+              </div>
+              <button
+                type="button"
+                role="menuitem"
+                disabled={creating}
+                onClick={() => void quickWorktree(selectedFolder)}
+                className="w-full text-left px-3 py-1.5 flex items-center gap-2 text-ink/80 hover:bg-ink/5 hover:text-ink disabled:opacity-50"
+              >
+                <span aria-hidden="true">⚡</span>
+                {creating ? 'Creating…' : 'Quick worktree'}
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  setOpen(false);
+                  setDialogFolder(selectedFolder);
+                }}
+                className="w-full text-left px-3 py-1.5 flex items-center gap-2 text-ink/80 hover:bg-ink/5 hover:text-ink"
+              >
+                <GitBranch size={12} className="text-ink/50" />
+                New worktree…
+              </button>
+              <div className="max-h-56 scrollbar-overlay-container py-1">
+                {list.length === 0 ? (
+                  <div className="px-3 py-2 text-ink/40 italic">
+                    {error ? 'Worktrees could not be read' : 'No worktrees yet'}
+                  </div>
+                ) : (
+                  list.map((worktree) => (
+                    <button
+                      key={worktree.path}
+                      type="button"
+                      role="menuitemradio"
+                      aria-checked={target?.worktreePath === worktree.path}
+                      onClick={() => pickWorktree(selectedFolder, worktree.path)}
+                      title={worktree.path}
+                      className={`w-full text-left px-3 py-1.5 flex items-center justify-between transition-colors cursor-pointer ${
+                        target?.worktreePath === worktree.path
+                          ? 'bg-ink/10 text-ink font-semibold'
+                          : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
+                      }`}
+                    >
+                      <span className="flex items-center gap-2 truncate pr-2">
+                        <GitBranch size={12} className="text-ink/50 flex-shrink-0" />
+                        <span className="truncate font-medium">{worktree.branch || 'detached'}</span>
+                        {worktree.missing && <span className="text-warning shrink-0">missing</span>}
+                        {worktree.dirty > 0 && (
+                          <span className="text-ink/40 shrink-0" title={`${worktree.dirty} uncommitted files`}>
+                            ●{worktree.dirty}
+                          </span>
+                        )}
+                      </span>
+                      {target?.worktreePath === worktree.path && <Check size={12} className="text-ink flex-shrink-0" />}
+                    </button>
+                  ))
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      <NewWorktreeModal
+        isOpen={dialogFolder !== null}
+        onClose={() => setDialogFolder(null)}
+        root={dialogFolder?.project_path ?? null}
+        folderId={dialogFolder ? Number(dialogFolder.id) : null}
+        folderName={dialogFolder?.name}
+        onCreated={(created) => {
+          if (!dialogFolder) return;
+          pickWorktree(dialogFolder, created.path);
+          onReport?.(`Worktree ${created.branch} created`);
+        }}
+      />
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Eval.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The `eval` card body.
+ *
+ * The alignment defect is pinned here, and it was reported from a live
+ * transcript rather than found by reading the code: **the gutter numbers
+ * drifted off the code.** The gutter row was `text-[10px]` while the code was
+ * `text-[11px]`, and both inherited `leading-relaxed` — a ratio, so the row box
+ * was 16.25px against the code's 17.875px and every number sat higher than its
+ * line by a growing amount (measured after a reload: line 12's number was a
+ * full line above its code). The two sides now share one explicit line box,
+ * which is what the alignment case asserts — by comparing the two elements' own
+ * leading class, so a future edit that changes one side is caught instead of
+ * copied.
+ *
+ * The result cases cover the OTHER half of the same report ("output does not
+ * render while streaming"): the panel does read `tool.output` as it arrives, so
+ * what made a live eval look empty was the card being folded — pinned in
+ * `hooks/chat/timeline/tool-open.test.ts`, where a running eval opens itself.
+ *
+ * Rendered with `h()` against happy-dom, following `panels/Read.test.ts`.
+ */
+
+import { afterAll, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { Eval } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Eval';
+import type { ToolCallData } from '@/shared/types';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+function mount(tool: ToolCallData): HTMLElement {
+  act(() => {
+    render(h(Eval, { tool }), container);
+  });
+  return container;
+}
+
+const CODE = ['const a = 1;', 'const b = 2;', 'console.log(a + b);'].join('\n');
+
+function evalTool(overrides: Partial<ToolCallData> = {}): ToolCallData {
+  return {
+    id: 'call_1',
+    type: 'eval',
+    name: 'eval',
+    title: 'Sum two numbers',
+    input: { language: 'js', code: CODE },
+    status: 'running',
+    ...overrides,
+  } as ToolCallData;
+}
+
+/** The `leading-[…]` token a node carries, or null. */
+function leadingOf(el: Element): string | null {
+  return /(?:^|\s)(leading-\[\d+px\])/.exec(el.className)?.[1] ?? null;
+}
+
+/** The code card: the gutter/pre pair whose pre holds the SCRIPT. */
+function codeCard(root: HTMLElement): { gutter: Element; pre: Element } {
+  const gutter = root.querySelectorAll('.sticky')[0];
+  const pre = gutter?.parentElement?.querySelector('pre');
+  if (!gutter || !pre) throw new Error('code card not rendered');
+  return { gutter, pre };
+}
+
+describe('Eval — result rendering', () => {
+  test('a running call renders the output it has so far', () => {
+    // omp's `tool_execution_update` carries the cell's output SO FAR, and the
+    // panel reads it from `tool.output` — which is what the fold writes from
+    // the frame's `content`. Verified against a real omp run: `content` and
+    // `details.cells[].output` are byte-identical on every update frame.
+    const root = mount(evalTool({ output: 'live 1\nlive 2' }));
+    const text = root.textContent ?? '';
+    expect(text).toContain('live 1');
+    expect(text).toContain('live 2');
+  });
+
+  test('renders only the script while a running call has produced nothing yet', () => {
+    const root = mount(evalTool({ output: '' }));
+    expect(root.querySelectorAll('pre')).toHaveLength(1);
+    expect(root.textContent).toContain('Script Evaluation');
+  });
+});
+
+describe('Eval — gutter aligns with the code', () => {
+  test('the gutter and the code share one line box', () => {
+    const { gutter, pre } = codeCard(mount(evalTool()));
+    const gutterLeading = leadingOf(gutter);
+    expect(gutterLeading).not.toBeNull();
+    // The bug: an inherited RATIO (`leading-relaxed`) resolved against two
+    // different font sizes, so the boxes differed by 1.625px per line.
+    expect(leadingOf(pre)).toBe(gutterLeading);
+  });
+
+  test('one gutter row per code line', () => {
+    const { gutter } = codeCard(mount(evalTool()));
+    expect(gutter.children).toHaveLength(CODE.split('\n').length);
+  });
+
+  test('the JSON result block aligns the same way', () => {
+    // The pretty-printed result draws its own gutter, and it had the same
+    // mismatch (plus a `py-2` against the code's `p-2.5`).
+    const root = mount(evalTool({ output: '{"a": 1, "b": [2, 3]}', status: 'success' }));
+    const gutters = root.querySelectorAll('.sticky');
+    const jsonGutter = gutters[1];
+    expect(jsonGutter).toBeDefined();
+    const pre = jsonGutter.parentElement?.querySelector('pre');
+    expect(pre).not.toBeNull();
+    // Explicit on BOTH, not merely equal: `null === null` would pass while both
+    // sides inherit a ratio against different font sizes, which is the bug.
+    expect(leadingOf(jsonGutter)).not.toBeNull();
+    expect(leadingOf(pre as Element)).toBe(leadingOf(jsonGutter));
+    // `{"a": 1, "b": [2, 3]}` pretty-prints to 7 lines.
+    expect(jsonGutter.children).toHaveLength(7);
+  });
+});