@kabmo-labs/kabmo 0.7.0 → 0.8.0

package/src/client/components/workspace/file-explorer/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { RefreshCw, Search } from 'lucide-preact';
 import type { FsNode } from '@/shared/types';
-import { GitRepoPicker } from '@/client/components/workspace/repo-picker';
+import { FileExplorerToolbar } from '@/client/components/workspace/file-explorer/Toolbar';
 import { FileTreeItem } from '@/client/components/workspace/file-explorer/TreeItem';
 import { RootContextMenu } from '@/client/components/workspace/file-explorer/RootMenu';
 import { FileCreateModal } from '@/client/components/workspace/file-explorer/Modals';
@@ -11,9 +10,12 @@ import { useGitStatus } from '@/client/hooks/workspace/git-status';
 import { useFileListing } from '@/client/hooks/workspace/file-listing';
 import { useFileCreate } from '@/client/hooks/workspace/file-create';
 import { useFileClipboard, type ClipboardTarget } from '@/client/hooks/workspace/file-clipboard';
+import { rekeyExpansion } from '@/shared/lib/fs/file-tree';
+import { filterFileTree } from '@/client/components/workspace/file-explorer/filter';
 import { useRepoList, useRepoScope } from '@/client/hooks/workspace/repo-scope';
 import { useRealtimeTopic } from '@/client/hooks/ui/realtime';
 import { useToasts } from '@/client/hooks/ui/toasts';
+import { useTouchDevice } from '@/client/hooks/ui/touch-device';
 import { ToastStack } from '@/client/components/common/ToastStack';
 import { fsTopic } from '@/shared/lib/realtime/protocol';
 
@@ -98,6 +100,53 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
     setActiveRepo(repo);
   };
 
+  /**
+   * Open every folder that leads to `path`.
+   *
+   * A nested create (`lib/parse.ts`) and a rename into a new folder both make
+   * directories the user has never opened, and a row placed inside a collapsed
+   * folder is a row nobody can see — the write would look like it failed. EVERY
+   * ancestor is opened, not only the direct parent: expanding just the last one
+   * still hides the entry behind a collapsed `lib`.
+   */
+  const revealPath = (path: string) => {
+    const segments = path.split('/').slice(0, -1);
+    if (segments.length === 0) return;
+    const chain = segments.map((_, index) => segments.slice(0, index + 1).join('/'));
+    setExpandedPaths(prev => {
+      if (chain.every((folder) => prev.has(folder))) return prev;
+      const next = new Set(prev);
+      for (const folder of chain) next.add(folder);
+      setStoredExpandedPaths(Array.from(next));
+      return next;
+    });
+  };
+
+  /** Place a row a create just produced, without re-reading the tree. */
+  const insertCreated = (entry: { path: string; kind: 'file' | 'folder' }) => {
+    listing.insertEntry(entry);
+    revealPath(entry.path);
+  };
+
+  /**
+   * Move a row a rename just relocated, without re-reading.
+   *
+   * A folder's descendants and every open branch beneath it carry its path as a
+   * prefix, so the expansion set is rekeyed in the same step — an open `src`
+   * renamed to `lib` must stay open as `lib`, not collapse.
+   */
+  const moveRenamed = (fromPath: string, toPath: string) => {
+    listing.moveEntry(fromPath, toPath);
+    setExpandedPaths(prev => {
+      const next = rekeyExpansion(prev, fromPath, toPath);
+      setStoredExpandedPaths(Array.from(next));
+      return next;
+    });
+    // A rename INTO a new folder (`a.ts` → `nested/a.ts`) has the same problem a
+    // nested create does: the destination folder is one nobody has opened.
+    revealPath(toPath);
+  };
+
   /**
    * Re-read everything this panel shows. Defined ABOVE the `!enabled` return so
    * the create flow below can use it: a hook cannot be called after a branch.
@@ -111,6 +160,9 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
   // One clipboard for the whole tree, owned here and passed down: a
   // subscription per row would be hundreds of listeners for a value that
   // changes on a right-click.
+  // A row is a drag source; on a finger the native drag is what turned a long
+  // press into a text selection of the whole panel (see `useLongPress`).
+  const touch = useTouchDevice();
   const { toasts, pushToast, dismissToast } = useToasts();
   const clipboard = useFileClipboard({
     rootPath,
@@ -155,7 +207,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
     folderPath: '.',
     rootPath,
     repo: activeRepo,
-    onCreated: refresh,
+    onCreated: insertCreated,
     onOpenCreated: (file) => onOpenFile?.({ ...file, root: rootPath, repo: activeRepo }),
   });
   /** Portals need a real document; the first client render is the gate. */
@@ -172,34 +224,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
 
   const tree = listing.files;
 
-  const getFilteredFiles = () => {
-    if (!searchQuery.trim()) return tree;
-
-    const lowerQuery = searchQuery.toLowerCase();
-
-    const filterNode = (node: any): any => {
-      const isMatch = node.name.toLowerCase().includes(lowerQuery);
-
-      if (node.type === 'folder') {
-        const filteredChildren = (node.children || []).map(filterNode).filter(Boolean);
-
-        if (isMatch || filteredChildren.length > 0) {
-          return {
-            ...node,
-            children: isMatch && filteredChildren.length === 0 ? node.children : filteredChildren,
-            forceExpanded: true
-          };
-        }
-        return null;
-      }
-
-      return isMatch ? node : null;
-    };
-
-    return tree.map(filterNode).filter(Boolean);
-  };
-
-  const files = getFilteredFiles();
+  const files = filterFileTree(tree, searchQuery);
   // The button spins for this panel's own read OR a topic push: the server
   // republishes `fs:` on every tool call, so the tree moved with nothing on
   // screen saying so otherwise.
@@ -207,40 +232,23 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
 
   return (
     <div className={`flex flex-col h-full bg-paper ${className}`}>
-      <div className="p-3 border-b border-ink/10 flex flex-col space-y-2">
-        <div className="flex items-center justify-between">
-          <GitRepoPicker
-            rootPath={rootPath}
-            activeRepo={activeRepo}
-            onSelectRepo={handleSelectRepo}
-            repos={repos}
-            scanning={reposScanning}
-            onRefreshRepos={rescanRepos}
-          />
-          <button
-            onClick={refresh}
-            className="p-1.5 text-ink/40 hover:text-ink hover:bg-ink/5 rounded transition-colors"
-            title="Refresh"
-          >
-            <RefreshCw size={14} className={isRefreshing ? 'animate-spin' : ''} />
-          </button>
-        </div>
-        <div className="relative">
-          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-ink/40" />
-          <input
-            type="text"
-            placeholder="Search files..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.currentTarget.value)}
-            className="w-full bg-canvas border border-ink/20 rounded pl-8 pr-3 py-1.5 text-xs focus:outline-none focus:border-ink transition-colors text-ink placeholder-ink/40"
-          />
-        </div>
-      </div>
+      <FileExplorerToolbar
+        rootPath={rootPath}
+        activeRepo={activeRepo}
+        repos={repos}
+        reposScanning={reposScanning}
+        onRefreshRepos={rescanRepos}
+        onSelectRepo={handleSelectRepo}
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        onRefresh={refresh}
+        refreshing={isRefreshing}
+      />
 
       <div
         className={`flex-1 scrollbar-overlay-container p-2 font-mono text-[11px] text-ink/80 ${
-          rootAcceptsDrop ? 'bg-info/[0.06]' : ''
-        }`}
+          touch ? 'file-tree-touch' : ''
+        } ${rootAcceptsDrop ? 'bg-info/[0.06]' : ''}`}
         onContextMenu={(e) => {
           // The panel's own background. A row stops propagation before this
           // runs, so this handler only ever sees a right-click that named NO
@@ -273,7 +281,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
         ) : (
           files.map(file => (
             <FileTreeItem
-              key={file.id}
+              key={file.path}
               file={file}
               rootPath={rootPath}
               basePath={listing.root}
@@ -281,6 +289,8 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
               onLoadChildren={loadChildren}
               onOpenFile={onOpenFile}
               onActionComplete={refresh}
+              onCreated={insertCreated}
+              onRenamed={moveRenamed}
               expandedPaths={expandedPaths}
               onToggleFolder={handleToggleFolder}
               gitFileMap={gitFileMap}
@@ -293,6 +303,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
                 if (!dragging) return;
                 clipboard.move(dragging, target);
               }}
+              touch={touch}
             />
           ))
         )}
@@ -312,7 +323,8 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
           busy={clipboard.busy}
           onAction={(action) => {
             setRootMenu(null);
-            if (action === 'new_file') rootCreate.openDialog();
+            if (action === 'new_file') rootCreate.openDialog('file');
+            if (action === 'new_folder') rootCreate.openDialog('folder');
             if (action === 'paste') clipboard.paste(rootTarget);
           }}
         />
@@ -321,6 +333,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
       {mounted && rootCreate.open && (
         <FileCreateModal
           folderPath="."
+          kind={rootCreate.kind}
           value={rootCreate.name}
           error={rootCreate.error}
           isLoading={rootCreate.busy}

package/src/client/components/workspace/file-explorer/local-edit.test.ts

@@ -0,0 +1,135 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The Files panel's local tree edits: a create and a rename land WITHOUT a
+ * reload.
+ *
+ * Both used to answer a mutation by re-reading the root plus every open folder,
+ * which is one request per open folder to learn something the response already
+ * names — and it also collapsed nothing but cost a visible spinner. The two
+ * specs here assert the two halves that matter: the row appears (or moves) in
+ * the rendered tree, and NO `/api/fs/dir` read is issued for the root to make
+ * that happen.
+ *
+ * A nested create is the third case, because it is the one a naive insert gets
+ * wrong: the folders leading to the entry do not exist in the tree yet, and a
+ * row placed under a folder nobody has opened is a row the user cannot see —
+ * so the create also opens the chain it created.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { createFileExplorerHarness } from '@/test-support/file-explorer.test-util';
+
+const panel = createFileExplorerHarness();
+
+beforeAll(() => {
+  panel.install();
+});
+
+afterEach(() => {
+  panel.unmount();
+});
+
+afterAll(() => {
+  panel.restore();
+});
+
+/** The root's own reads, which a reload would add one of. */
+function rootReads(): number {
+  return panel.dirReads.filter((path) => path === '.').length;
+}
+
+describe('Files panel local edits', () => {
+  test('a created file appears in the tree without re-reading the root', async () => {
+    panel.disk = { '.': { 'existing.ts': 'file' } };
+    panel.dirReads = [];
+    await panel.mount();
+    const before = rootReads();
+
+    await panel.openRootNewFile();
+    await panel.submitNewFile('fresh.ts');
+
+    expect(panel.buttonLabels()).not.toContain('Create');
+    expect(panel.visibleNames()).toContain('fresh.ts');
+    // The create answered with the path, so the tree placed it: a reload here
+    // would be a root read plus one per open folder.
+    expect(rootReads()).toBe(before);
+  });
+
+  test('a created FOLDER appears and is not opened in an editor', async () => {
+    panel.disk = { '.': {} };
+    panel.dirReads = [];
+    await panel.mount();
+    const before = rootReads();
+
+    await panel.openRootNewFolder();
+    await panel.submitNewFile('packages');
+
+    expect(panel.createRequests.at(-1)).toEqual({
+      actionType: 'create',
+      path: '.',
+      name: 'packages',
+      kind: 'folder',
+      root: '/ws',
+    });
+    expect(panel.visibleNames()).toContain('packages');
+    // A folder has nothing to open — opening one would be an empty editor tab.
+    expect(panel.openedFiles).toEqual([]);
+    expect(rootReads()).toBe(before);
+  });
+
+  test('a nested create opens the chain it created, so the row is visible', async () => {
+    panel.disk = { '.': {} };
+    panel.dirReads = [];
+    await panel.mount();
+
+    await panel.openRootNewFile();
+    await panel.submitNewFile('lib/deep/parse.ts');
+
+    // Every folder on the way is expanded and reads its own directory: the
+    // entry is not somewhere the user has to go hunting for.
+    expect(panel.visibleNames()).toContain('parse.ts');
+    expect(panel.visibleNames()).toContain('deep');
+    expect(panel.visibleNames()).toContain('lib');
+  });
+
+  test('a rename moves the row in place without re-reading the root', async () => {
+    panel.disk = { '.': { 'old.ts': 'file' } };
+    panel.dirReads = [];
+    await panel.mount();
+    const before = rootReads();
+
+    await panel.rightClickRow('old.ts');
+    await panel.clickMenuRow('Rename');
+    await panel.submitRename('new.ts');
+
+    expect(panel.renameRequests.at(-1)).toEqual({
+      actionType: 'rename',
+      path: 'old.ts',
+      newPath: 'new.ts',
+      root: '/ws',
+    });
+    expect(panel.visibleNames()).toContain('new.ts');
+    expect(panel.visibleNames()).not.toContain('old.ts');
+    expect(rootReads()).toBe(before);
+  });
+
+  test('a refused rename keeps the dialog open with the server’s reason', async () => {
+    panel.disk = { '.': { 'old.ts': 'file', 'taken.ts': 'file' } };
+    panel.dirReads = [];
+    await panel.mount();
+
+    await panel.rightClickRow('old.ts');
+    await panel.clickMenuRow('Rename');
+    await panel.submitRename('taken.ts');
+
+    // The field is still there: "already exists" is a message about what to
+    // type next, not a notification about something that happened.
+    expect(panel.renameInput()).not.toBeNull();
+    expect(panel.documentText()).toContain('taken.ts already exists');
+    expect(panel.visibleNames()).toContain('old.ts');
+  });
+});

package/src/client/components/workspace/worktree-modal/index.tsx

@@ -0,0 +1,261 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * New worktree — the dialog, modelled on OpenChamber's.
+ *
+ * Two columns on a wide screen and one on a phone, and the split is the point:
+ * the left column is the CHOICE (which branch this checkout is), the right is the
+ * NAMES (branch, base, folder). A single column put the choice above a wall of
+ * fields and the "Create worktree" button below the fold.
+ *
+ * Three rules the form carries, each from a measured failure:
+ *
+ *  - **The folder follows the branch until the user edits it.** A dialog that
+ *    asked for both independently produced a folder named after the previous
+ *    branch the moment the branch was retyped; the reset button puts it back in
+ *    sync and is disabled while it already is.
+ *  - **Validation is the SERVER's.** A branch collision, a branch already checked
+ *    out, an unborn repository — the client cannot know any of them without git,
+ *    so the debounced call runs the same plan the create will run.
+ *  - **The dirty notice states what stays behind.** Uncommitted changes are not
+ *    carried into a new worktree, and a user told that afterwards has already
+ *    lost the chance to commit them.
+ */
+
+import { useEffect, useMemo, useState } from 'preact/hooks';
+import { Modal } from '@/client/components/common/Modal';
+import { createWorktree, validateWorktree } from '@/client/hooks/workspace/worktree/index';
+import { WorktreeRequestError } from '@/client/hooks/workspace/worktree/index';
+import { defaultWorktreeBranch, folderNameForBranch } from '@/shared/lib/workspace/worktree/branch-name';
+import type { WorktreeFailure } from '@/shared/lib/workspace/worktree/types';
+
+export interface NewWorktreeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** The project the worktree belongs to. */
+  root: string | null;
+  folderId: number | null;
+  folderName?: string;
+  /** Called with the created path — the caller selects it as the chat's target. */
+  onCreated: (worktree: { path: string; branch: string }) => void;
+}
+
+type Mode = 'new' | 'existing';
+
+/** A thrown request, narrowed to the failure the dialog reports. */
+function asFailure(error: unknown): WorktreeFailure {
+  if (error instanceof WorktreeRequestError) return error.failure;
+  return { code: 'create_failed', message: error instanceof Error ? error.message : String(error) };
+}
+
+const FIELD_CLASS = 'w-full h-8 rounded-md border border-ink/15 bg-paper px-2 text-xs text-ink outline-none focus:border-ink/40';
+
+export function NewWorktreeModal(props: NewWorktreeModalProps) {
+  // Mounted fresh on every open, never reset by an effect. Preact runs effects
+  // AFTER paint, so an effect-seeded form is on screen and focusable while its
+  // fields still hold the previous open's values — and anything typed in that
+  // window is discarded. Measured in the browser: the branch field was filled
+  // with `main`, the effect then restored the generated name, and the dialog
+  // created `wt/calm-iguana` instead of reporting that `main` is taken.
+  if (!props.isOpen) return null;
+  return <WorktreeForm {...props} />;
+}
+
+function WorktreeForm({ onClose, root, folderId, folderName, onCreated }: NewWorktreeModalProps) {
+  const [mode, setMode] = useState<Mode>('new');
+  // Seeded by the initial state, so the very first paint carries a usable form.
+  const [branch, setBranch] = useState(defaultWorktreeBranch);
+  const [basedOn, setBasedOn] = useState('');
+  const [folder, setFolder] = useState(() => folderNameForBranch(branch));
+  const [folderFollowsBranch, setFolderFollowsBranch] = useState(true);
+  const [failure, setFailure] = useState<WorktreeFailure | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  // The folder mirrors the branch while the user has not renamed it.
+  useEffect(() => {
+    if (!folderFollowsBranch) return;
+    setFolder(folderNameForBranch(branch));
+  }, [branch, folderFollowsBranch]);
+
+  const request = useMemo(
+    () => ({
+      mode,
+      branch: branch.trim(),
+      worktreeName: folder.trim(),
+      ...(basedOn.trim() ? { startRef: basedOn.trim() } : {}),
+    }),
+    [mode, branch, folder, basedOn],
+  );
+
+  // Debounced server validation, after the first edit — the answers depend on
+  // git state a keystroke cannot know.
+  useEffect(() => {
+    if (!root) return;
+    const timer = setTimeout(() => {
+      void validateWorktree({ root, folderId }, request).then((result) => {
+        setFailure(result.ok ? null : result.failures[0] ?? null);
+      }).catch(() => {
+        // A validation request that failed says nothing about the form; the
+        // create reports what it finds.
+      });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [root, folderId, request]);
+
+  const canCreate = Boolean(root) && branch.trim().length > 0 && folder.trim().length > 0 && !creating && !failure;
+
+  const submit = async () => {
+    if (!root || !canCreate) return;
+    setCreating(true);
+    try {
+      const created = await createWorktree({ root, folderId }, request);
+      onCreated({ path: created.path, branch: created.branch });
+      onClose();
+    } catch (error) {
+      // `WorktreeRequestError` carries the server's field/code; anything else is
+      // reported as a create failure with its own message.
+      setFailure(asFailure(error));
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const choiceColumn = (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <span className="text-[11px] font-semibold text-ink">Start from</span>
+        {([
+          { id: 'new' as const, label: 'New branch', hint: 'A fresh branch, based on the branch you pick.' },
+          { id: 'existing' as const, label: 'Existing branch', hint: 'Check out a branch you already have.' },
+        ]).map((option) => (
+          <button
+            key={option.id}
+            type="button"
+            role="radio"
+            aria-checked={mode === option.id}
+            onClick={() => setMode(option.id)}
+            className={`rounded-md border px-3 py-2 text-left transition-colors ${
+              mode === option.id ? 'border-ink/40 bg-ink/5' : 'border-ink/15 hover:bg-ink/5'
+            }`}
+          >
+            <span className="block text-xs font-medium text-ink">{option.label}</span>
+            <span className="block text-[10.5px] text-ink/50">{option.hint}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+
+  const fieldColumn = (
+    <div className="flex flex-col gap-4">
+      <label className="flex flex-col gap-1.5">
+        <span className="text-[11px] font-semibold text-ink">{mode === 'existing' ? 'Branch' : 'Branch name'}</span>
+        <input
+          value={branch}
+          onChange={(event) => setBranch(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              void submit();
+            }
+          }}
+          placeholder="feature/my-awesome-feature"
+          className={FIELD_CLASS}
+          aria-invalid={failure?.field === 'branch'}
+        />
+      </label>
+
+      <label className="flex flex-col gap-1.5">
+        <span className="text-[11px] font-semibold text-ink">Based on</span>
+        <input
+          value={basedOn}
+          onChange={(event) => setBasedOn(event.currentTarget.value)}
+          placeholder="origin/main"
+          disabled={mode === 'existing'}
+          className={`${FIELD_CLASS} disabled:opacity-50`}
+        />
+        <span className="text-[10px] text-ink/40">
+          Defaults to the repository's default branch. Left empty means its current HEAD.
+        </span>
+      </label>
+
+      <label className="flex flex-col gap-1.5">
+        <span className="text-[11px] font-semibold text-ink">Folder name</span>
+        <span className="flex items-center gap-1.5">
+          <input
+            value={folder}
+            onChange={(event) => {
+              setFolder(event.currentTarget.value);
+              setFolderFollowsBranch(false);
+            }}
+            placeholder="my-worktree-directory"
+            className={`${FIELD_CLASS} min-w-0 flex-1`}
+            aria-invalid={failure?.field === 'folder'}
+          />
+          <button
+            type="button"
+            title="Reset to match branch name"
+            aria-label="Reset to match branch name"
+            disabled={folderFollowsBranch}
+            onClick={() => {
+              setFolderFollowsBranch(true);
+              setFolder(folderNameForBranch(branch));
+            }}
+            className="h-8 shrink-0 rounded-md border border-ink/15 px-2 text-[11px] text-ink/70 hover:bg-ink/5 disabled:opacity-40"
+          >
+            ⟳
+          </button>
+        </span>
+      </label>
+
+      <p className="text-[10px] text-ink/45">
+        Uncommitted changes stay in {folderName ? `“${folderName}”` : 'the project'}. A new worktree starts from a
+        commit, so nothing half-written comes with it.
+      </p>
+    </div>
+  );
+
+  return (
+    <Modal
+      onClose={onClose}
+      maxWidthClass="max-w-[min(96vw,880px)]"
+      header={<h2 className="text-sm font-semibold text-ink">New worktree</h2>}
+      footer={
+        <div className="flex w-full items-center gap-2 border-t border-ink/10 px-5 py-3">
+          {/* One line that never grows the dialog; the full message is its title. */}
+          <p
+            className="min-w-0 flex-1 truncate text-[11px] text-error"
+            title={failure?.message}
+            role={failure ? 'alert' : undefined}
+          >
+            {failure?.message ?? ''}
+          </p>
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={creating}
+            className="h-8 shrink-0 rounded-md border border-ink/15 px-3 text-xs text-ink/80 hover:bg-ink/5"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={() => void submit()}
+            disabled={!canCreate}
+            className="h-8 shrink-0 rounded-md bg-ink px-3 text-xs font-medium text-paper hover:bg-ink/90 disabled:opacity-40"
+          >
+            {creating ? 'Creating…' : 'Create worktree'}
+          </button>
+        </div>
+      }
+    >
+      <div className="grid grid-cols-1 gap-6 px-5 py-4 md:grid-cols-2">
+        {choiceColumn}
+        {fieldColumn}
+      </div>
+    </Modal>
+  );
+}

package/src/client/hooks/chat/timeline/index.ts

@@ -1,5 +1,6 @@
 import { useCallback, useRef, useState } from 'preact/hooks';
 import { useTimelineScope } from '@/client/hooks/chat/timeline/scope';
+import { useSpawnTarget } from '@/client/hooks/chat/timeline/spawn-target';
 import type { ChatMessageData } from '@/shared/types';
 import { useOmpAgent } from '@/client/hooks/chat/omp';
 import { useChatTimelineQueue } from '@/client/hooks/chat/timeline/queue';
@@ -57,8 +58,7 @@ export function useChatTimeline({
   const { inputValue, setInputValue, inputAttachments, setInputAttachments } = useComposerDraft();
   const [localMessages, setLocalMessages] = useState<ChatMessageData[]>([]);
 
-  // A pending "new-…" session renders the workspace picker, which owns its own
-  // timeline and scroll handling.
+  // A pending "new-…" session renders the workspace picker with its own timeline.
   const isPendingSession = Boolean(sessionId?.startsWith('new-'));
   // Committed history lands asynchronously (session-load.ts), so the container
   // paints at the top first; jump to the tail once per session when it does.
@@ -211,6 +211,8 @@ export function useChatTimeline({
     enqueueExtensionDialog,
     withdrawExtensionDialog,
   }), activityRef);
+  const spawn = useSpawnTarget(sessionId);
+
   const { steerOmpAgent, executeSend } = useChatTimelineSend({
     folders,
     selectedFolderId,
@@ -234,15 +236,15 @@ export function useChatTimeline({
     deferredComposerPickRef,
     accessModeRef,
     spawnSelectionRef: modes.spawnSelectionRef,
+    spawnWorktreeRef: spawn.worktreePathRef,
     abortControllerRef,
     setInputValue,
     setSearchParams,
   });
 
   // Queue auto-delivery moved server-side: the wrapper's terminal `agent_end`
-  // schedules the next queued prompt (`lib/queue/delivery.server.ts`), with a
-  // transactional head claim so no reload/tab race can double-send. The client
-  // panel is a view; `stopHoldRef` remains only for the mock path below.
+  // schedules the next queued prompt, with a transactional head claim so no
+  // reload/tab race can double-send. `stopHoldRef` serves only the mock path.
 
   const {
     handleSend,
@@ -339,6 +341,8 @@ export function useChatTimeline({
     composerModelRef,
     deferredComposerPickRef,
     waitingDependency,
+    spawnTarget: spawn.target,
+    setSpawnTarget: spawn.setTarget,
     extensionDialogs,
     resolveExtensionDialog,
     respondToExtensionUi: ompAgent.respondToExtensionUi,