@kabmo-labs/kabmo 0.7.0 → 0.9.0

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

@@ -0,0 +1,319 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The composer's WORKTREE picker, rendered.
+ *
+ * These are the cases a reader would otherwise meet in a browser and nowhere
+ * else:
+ *
+ *  - a workspace that is not a git repository gets NO control (a permanently
+ *    disabled one in every notes folder is noise, and a click that can only
+ *    refuse is worse);
+ *  - the trigger names the BRANCH, which is why the list is read on mount and
+ *    not only when the menu opens;
+ *  - the menu's groups are the three the plan names, with creating ABOVE the
+ *    list so a long list cannot hide it;
+ *  - the project root row clears the worktree pick.
+ */
+
+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 {
+  WorktreePicker,
+  selectedWorktree,
+  worktreeLabel,
+} from '@/client/components/workspace/chat-timeline/target-picker/WorktreePicker';
+import type { WorktreeInfo } from '@/shared/lib/workspace/worktree/types';
+import type { WorkspaceFolderData } from '@/shared/types';
+
+const folder: WorkspaceFolderData = {
+  id: 1,
+  name: 'kabmo',
+  project_path: '/repo',
+  isExpanded: true,
+  hasMore: false,
+  totalSessions: 0,
+  sessions: [],
+};
+
+const row = (overrides: Partial<WorktreeInfo>): WorktreeInfo => ({
+  path: '/data/worktrees/x/main',
+  branch: 'main',
+  head: 'abc1234',
+  detached: false,
+  missing: false,
+  isPrimary: true,
+  dirty: 0,
+  aheadOfStart: 0,
+  startRef: '',
+  sessions: 0,
+  ...overrides,
+});
+
+const primary = row({});
+const made = row({
+  path: '/data/worktrees/x/cosmic-dolphin',
+  branch: 'wt/cosmic-dolphin',
+  isPrimary: false,
+  dirty: 2,
+});
+
+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();
+});
+
+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;
+}
+
+/** Answer the list read without a server. `isRepo` is the whole point here. */
+function stubList(worktrees: WorktreeInfo[], isRepo = true): string[] {
+  const calls: string[] = [];
+  (globalThis as unknown as Record<string, unknown>).fetch = async (input: RequestInfo | URL) => {
+    calls.push(String(input));
+    const payload = { worktrees, base: '/data/worktrees/x', isRepo };
+    return { ok: true, json: async () => payload } as unknown as Response;
+  };
+  return calls;
+}
+
+/**
+ * A stub whose LIST grows once a create has answered — the state a real control
+ * is in the moment after it makes a worktree.
+ */
+function stubCreate(listBefore: WorktreeInfo[], created: WorktreeInfo): string[] {
+  const calls: string[] = [];
+  let created_ = false;
+  (globalThis as unknown as Record<string, unknown>).fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+    calls.push(`${init?.method ?? 'GET'} ${String(input)}`);
+    if (init?.method === 'POST') {
+      created_ = true;
+      return { ok: true, json: async () => ({ worktree: created }) } as unknown as Response;
+    }
+    const worktrees = created_ ? [...listBefore, created] : listBefore;
+    return {
+      ok: true,
+      json: async () => ({ worktrees, base: '/data/worktrees/x', isRepo: true }),
+    } as unknown as Response;
+  };
+  return calls;
+}
+
+/** Drain the fetch promise chain; each empty `act` is one round. */
+async function settle(): Promise<void> {
+  for (let round = 0; round < 10; round += 1) await act(async () => {});
+}
+
+function textOf(host: HTMLElement): string {
+  return (host.textContent ?? '').replace(/\s+/g, ' ').trim();
+}
+
+describe('worktreeLabel', () => {
+  test('the branch the project root holds, not the word "root"', () => {
+    expect(worktreeLabel([primary], null)).toBe('main');
+  });
+
+  test('the picked worktree’s branch', () => {
+    expect(worktreeLabel([primary, made], { folderId: 1, worktreePath: made.path })).toBe('wt/cosmic-dolphin');
+  });
+
+  test('a pick the list has not caught up with still names something', () => {
+    // The dialog selects the new worktree the moment it is created, and the
+    // list that answers the next render may predate it.
+    expect(worktreeLabel([primary], { folderId: 1, worktreePath: '/data/worktrees/x/just-made' })).toBe('just-made');
+  });
+
+  test('nothing read yet falls back to the words a reader can act on', () => {
+    expect(worktreeLabel([], null)).toBe('Project root');
+  });
+});
+
+describe('selectedWorktree', () => {
+  test('the row the pick names, and null for the root', () => {
+    expect(selectedWorktree([primary, made], { folderId: 1, worktreePath: made.path })?.branch).toBe('wt/cosmic-dolphin');
+    expect(selectedWorktree([primary, made], null)).toBeNull();
+  });
+});
+
+describe('WorktreePicker', () => {
+  test('a workspace that is not a git repository draws no control', async () => {
+    const calls = stubList([], false);
+    const host = await mount(
+      h(WorktreePicker, {
+        folders: [folder],
+        selectedFolderId: 1,
+        target: null,
+        setTarget: () => {},
+      }),
+    );
+    await settle();
+
+    // The read happened — the answer is what suppresses the control, not a
+    // guess about the folder's shape.
+    expect(calls.length).toBeGreaterThan(0);
+    expect(host.querySelector('button')).toBeNull();
+  });
+
+  test('the trigger names the root branch, read before the menu is opened', async () => {
+    stubList([primary, made]);
+    const host = await mount(
+      h(WorktreePicker, {
+        folders: [folder],
+        selectedFolderId: 1,
+        target: null,
+        setTarget: () => {},
+      }),
+    );
+    await settle();
+
+    const trigger = host.querySelector('button') as HTMLButtonElement | null;
+    expect(trigger?.textContent).toContain('main');
+  });
+
+  test('the menu offers the project root, both create paths, and the list', async () => {
+    stubList([primary, made]);
+    const host = await mount(
+      h(WorktreePicker, {
+        folders: [folder],
+        selectedFolderId: 1,
+        target: null,
+        setTarget: () => {},
+      }),
+    );
+    await settle();
+
+    await act(async () => {
+      (host.querySelector('button') as HTMLButtonElement).click();
+    });
+    await settle();
+
+    const text = textOf(host);
+    expect(text).toContain('Project root');
+    expect(text).toContain('Quick worktree');
+    expect(text).toContain('New worktree…');
+    expect(text).toContain('Worktrees');
+    expect(text).toContain('wt/cosmic-dolphin');
+    // Creating sits above the LIST: a project with many worktrees must not push
+    // the action that makes one out of sight.
+    expect(text.indexOf('Quick worktree')).toBeLessThan(text.indexOf('wt/cosmic-dolphin'));
+  });
+
+  test('the project root row clears the worktree pick', async () => {
+    stubList([primary, made]);
+    const picks: Array<{ folderId: number | null; worktreePath: string | null } | null> = [];
+    const host = await mount(
+      h(WorktreePicker, {
+        folders: [folder],
+        selectedFolderId: 1,
+        target: { folderId: 1, worktreePath: made.path },
+        setTarget: (next) => picks.push(next),
+      }),
+    );
+    await settle();
+
+    await act(async () => {
+      (host.querySelector('button') as HTMLButtonElement).click();
+    });
+    await settle();
+
+    const rows = [...host.querySelectorAll('[role="menuitemradio"]')] as HTMLButtonElement[];
+    // Root first, then the worktree.
+    expect(rows.length).toBe(2);
+    await act(async () => {
+      rows[0]?.click();
+    });
+
+    expect(picks).toEqual([{ folderId: 1, worktreePath: null }]);
+  });
+
+  test('a picked worktree marks its own row and names itself on the trigger', async () => {
+    stubList([primary, made]);
+    const host = await mount(
+      h(WorktreePicker, {
+        folders: [folder],
+        selectedFolderId: 1,
+        target: { folderId: 1, worktreePath: made.path },
+        setTarget: () => {},
+      }),
+    );
+    await settle();
+
+    expect((host.querySelector('button') as HTMLButtonElement).textContent).toContain('wt/cosmic-dolphin');
+    // The dirty count is on the trigger too: a chat about to run in a checkout
+    // with two changed files should say so before the first prompt.
+    expect(host.querySelector('[aria-label="2 uncommitted files in this checkout"]')).not.toBeNull();
+  });
+
+  test('a create re-reads the list, so the trigger names the branch not the folder', async () => {
+    // The pick names a path the list has never seen — exactly the state after a
+    // create. `worktreeLabel` falls back to the folder's last segment there, so
+    // the trigger read `groovy-yak` where the branch is `wt/groovy-yak`, and it
+    // kept reading that until the menu was opened again (measured in the
+    // browser). The list is what the label is derived from, so the create has to
+    // re-read it.
+    const fresh = row({
+      path: '/data/worktrees/x/groovy-yak',
+      branch: 'wt/groovy-yak',
+      isPrimary: false,
+    });
+    const calls = stubCreate([primary], fresh);
+    const picks: Array<{ folderId: number | null; worktreePath: string | null } | null> = [];
+    const host = await mount(
+      h(WorktreePicker, {
+        folders: [folder],
+        selectedFolderId: 1,
+        target: null,
+        setTarget: (next) => picks.push(next),
+      }),
+    );
+    await settle();
+
+    await act(async () => {
+      (host.querySelector('button') as HTMLButtonElement).click();
+    });
+    await settle();
+
+    const quick = [...host.querySelectorAll('[role="menuitem"]')].find((node) =>
+      (node.textContent ?? '').includes('Quick worktree'),
+    ) as HTMLButtonElement | undefined;
+    expect(quick).toBeDefined();
+    await act(async () => {
+      quick?.click();
+    });
+    await settle();
+
+    expect(picks).toEqual([{ folderId: 1, worktreePath: fresh.path }]);
+    // The read AFTER the POST is the one that matters; without it the label is
+    // `groovy-yak`.
+    const postIndex = calls.findIndex((call) => call.startsWith('POST'));
+    expect(postIndex).toBeGreaterThanOrEqual(0);
+    expect(calls.slice(postIndex + 1).some((call) => call.startsWith('GET'))).toBe(true);
+  });
+});

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

@@ -0,0 +1,285 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * WHICH CHECKOUT of the workspace the chat runs in: the project root, or one of
+ * its git worktrees.
+ *
+ * Its own control, not a group inside the workspace picker. The two answer
+ * different questions — which project, and which checkout of it — and the merged
+ * menu made both harder: a user looking for another project scrolled through
+ * branch names, and the worktree rows had no trigger of their own to be found
+ * from. OpenChamber's composer draws the same pair, and its worktree `Select`
+ * carries the branch label on the trigger, which is what this one does too.
+ *
+ * The control is ABSENT for a workspace that is not a git repository: there is
+ * nothing to pick and nothing to create, so a permanently disabled control in
+ * every notes folder would be noise. `isRepo` comes from the list payload, so
+ * the decision is the server's, not a guess from the folder's shape.
+ *
+ * The pick is `{folderId, worktreePath}`; the folder is what the workspace
+ * picker chose, and this control only ever moves the second half.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { AlertTriangle, Check, ChevronDown, GitBranch } from 'lucide-preact';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { createWorktree, useWorktrees } from '@/client/hooks/workspace/worktree/index';
+import { NewWorktreeModal } from '@/client/components/workspace/worktree-modal/index';
+import type { SpawnTarget } from '@/client/hooks/chat/timeline/spawn-target';
+import type { WorktreeInfo } from '@/shared/lib/workspace/worktree/types';
+import { lastPathSegment } from '@/shared/lib/fs/paths';
+import type { WorkspaceFolderData } from '@/shared/types';
+
+export interface WorktreePickerProps {
+  folders: WorkspaceFolderData[];
+  selectedFolderId: number | null;
+  target: SpawnTarget | null;
+  setTarget: (next: SpawnTarget | null) => void;
+  /** Reports a completed create, or the refusal that stopped one. */
+  onReport?: (message: string) => void;
+}
+
+/** The worktree row the pick names, or null for the project root. */
+export function selectedWorktree(worktrees: WorktreeInfo[], target: SpawnTarget | null): WorktreeInfo | null {
+  if (!target?.worktreePath) return null;
+  return worktrees.find((worktree) => worktree.path === target.worktreePath) ?? null;
+}
+
+/**
+ * The trigger's words: the branch of the checkout the chat will run in.
+ *
+ * The project root is named by the branch it holds rather than by the word
+ * "root", which is what OpenChamber shows and what a reader needs: the root of a
+ * repository sitting on `main` and one sitting on `wt/scratch` are different
+ * places to start a chat. `Project root` remains the fallback for a payload that
+ * has not arrived, or a repository git cannot read a branch from.
+ */
+export function worktreeLabel(worktrees: WorktreeInfo[], target: SpawnTarget | null): string {
+  const picked = selectedWorktree(worktrees, target);
+  if (target?.worktreePath) {
+    if (!picked) return lastPathSegment(target.worktreePath) || 'Worktree';
+    return picked.branch || (picked.detached ? 'detached' : lastPathSegment(picked.path) || 'Worktree');
+  }
+  const primary = worktrees.find((worktree) => worktree.isPrimary);
+  return primary?.branch || 'Project root';
+}
+
+export function WorktreePicker({ folders, selectedFolderId, target, setTarget, onReport }: WorktreePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(containerRef, () => setOpen(false));
+
+  const folder = folders.find((candidate) => String(candidate.id) === String(selectedFolderId)) ?? null;
+  const scopeRoot = folder?.project_path ?? null;
+  const folderId = folder ? Number(folder.id) : null;
+
+  // Read on MOUNT, not only on open: the trigger's own label is the branch the
+  // project root holds, and whether this control exists at all is the payload's
+  // `isRepo`. Measured cost of the read on this repository: ~150 ms, one spawn
+  // per worktree for its dirty count.
+  const { worktrees, isRepo, error, refresh } = useWorktrees(
+    { root: scopeRoot, folderId },
+    Boolean(scopeRoot),
+  );
+
+  // Re-read when the menu opens, so a worktree made in another tab or by the
+  // dialog is in the list the user is looking at.
+  useEffect(() => {
+    if (open) void refresh();
+  }, [open, refresh]);
+
+  // A pick is cleared by the WORKSPACE picker's own choice, never by an effect
+  // comparing `target.folderId` with the selected folder: on a reload the target
+  // is restored from the session's UI state a beat before the folder resolves,
+  // and a mismatch check in that window wiped the very pick it was protecting.
+
+  const list = useMemo(() => worktrees.filter((worktree) => !worktree.isPrimary), [worktrees]);
+  const picked = selectedWorktree(worktrees, target);
+  const primary = worktrees.find((worktree) => worktree.isPrimary) ?? null;
+  const dirty = (picked ?? primary)?.dirty ?? 0;
+
+  const pickRoot = () => {
+    if (folderId !== null) setTarget({ folderId, worktreePath: null });
+    setOpen(false);
+  };
+
+  const pickWorktree = (worktreePath: string) => {
+    if (folderId !== null) setTarget({ folderId, 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 () => {
+    if (!scopeRoot || folderId === null) return;
+    setCreating(true);
+    try {
+      const created = await createWorktree({ root: scopeRoot, folderId }, { mode: 'new' });
+      pickWorktree(created.path);
+      // The list this control reads is the one that was fetched when the menu
+      // opened — before the worktree existed. Without this read the pick names a
+      // path no row holds, `worktreeLabel` falls back to the folder's last
+      // segment, and the trigger says `groovy-yak` where the checkout's branch
+      // is `wt/groovy-yak` (measured in the browser, and for the whole time the
+      // menu stays closed, which is when the label matters).
+      await refresh();
+      onReport?.(`Worktree ${created.branch || lastPathSegment(created.path)} created`);
+    } catch (failure) {
+      onReport?.(failure instanceof Error ? failure.message : String(failure));
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  // Not a repository (or not read yet): no control at all. Rendering one that
+  // can only refuse would promise a worktree a plain folder cannot hold.
+  if (!scopeRoot || isRepo !== true) return null;
+
+  return (
+    <div className="relative shrink-0" ref={containerRef}>
+      <button
+        type="button"
+        aria-label={`Worktree: ${worktreeLabel(worktrees, target)}`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        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"
+      >
+        {dirty > 0 ? (
+          <AlertTriangle
+            size={13}
+            className="text-warning flex-shrink-0"
+            aria-label={`${dirty} uncommitted file${dirty === 1 ? '' : 's'} in this checkout`}
+          />
+        ) : (
+          <GitBranch size={13} className="text-ink/50 group-hover:text-ink/80 transition-colors flex-shrink-0" />
+        )}
+        <span className="max-w-[240px] truncate tracking-tight">{worktreeLabel(worktrees, target)}</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>
+          <button
+            type="button"
+            role="menuitemradio"
+            aria-checked={!target?.worktreePath}
+            onClick={pickRoot}
+            title={primary?.path ?? scopeRoot}
+            className={`w-full text-left px-3 py-1.5 flex items-center justify-between transition-colors cursor-pointer ${
+              !target?.worktreePath ? '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">{primary?.branch || folder?.name || 'Project root'}</span>
+              {primary && primary.dirty > 0 && (
+                <span className="text-ink/40 shrink-0" title={`${primary.dirty} uncommitted files`}>
+                  ●{primary.dirty}
+                </span>
+              )}
+            </span>
+            {!target?.worktreePath && <Check size={12} className="text-ink flex-shrink-0" />}
+          </button>
+
+          {/* Making one comes before the list, so a long list never hides it. */}
+          <div className="my-1 border-t border-ink/5" />
+          <button
+            type="button"
+            role="menuitem"
+            disabled={creating}
+            onClick={() => void quickWorktree()}
+            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);
+              setDialogOpen(true);
+            }}
+            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="my-1 border-t border-ink/5" />
+          <div className="px-3 py-1.5 text-[10px] uppercase tracking-wider text-ink/40 font-semibold">Worktrees</div>
+          <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) => {
+                const active = target?.worktreePath === worktree.path;
+                return (
+                  <button
+                    key={worktree.path}
+                    type="button"
+                    role="menuitemradio"
+                    aria-checked={active}
+                    onClick={() => pickWorktree(worktree.path)}
+                    title={worktree.path}
+                    className={`w-full text-left px-3 py-1.5 flex items-center justify-between transition-colors cursor-pointer ${
+                      active ? '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>
+                    {active && <Check size={12} className="text-ink flex-shrink-0" />}
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </div>
+      )}
+
+      <NewWorktreeModal
+        isOpen={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        root={scopeRoot}
+        folderId={folderId}
+        folderName={folder?.name}
+        onCreated={(created) => {
+          pickWorktree(created.path);
+          // Same reason as the quick path: the pick names a worktree the list
+          // this control holds has never seen, so the trigger would fall back to
+          // the folder name until the menu was opened again.
+          void refresh();
+          onReport?.(`Worktree ${created.branch} created`);
+        }}
+      />
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-panel/index.test.ts

@@ -40,6 +40,8 @@ function mountFromFrame(frame: IncomingExtensionUiRequest): ExtensionUiDialogReq
     persistMessages: () => {}, abortControllerRef: { current: null }, appSettings: {},
     enqueueExtensionDialog: (request) => queue.push(request),
     withdrawExtensionDialog: (targetId) => { const i = queue.findIndex((r) => r.id === targetId); if (i >= 0) queue.splice(i, 1); },
+    reloadMessages: () => {},
+    needsReloadRef: { current: false },
   } satisfies OmpAgentCallbacksDeps;
   createOmpAgentCallbacks(deps).onExtensionUiRequest?.(frame);