@kabmo-labs/kabmo 0.6.1 → 0.8.0

package/src/client/components/mobile/mobile-session-sidebar/Item.tsx

@@ -4,6 +4,7 @@ import { useSearchParams } from '@/client/lib/router/search-params';
 import { MobileSessionRow } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
 import { SubagentList } from '@/client/components/common/subagent-list';
 import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-options-menu';
+import { useWorktreeDialog } from '@/client/components/mobile/mobile-session-sidebar/WorktreeDialog';
 import { useShowMore } from '@/client/hooks/ui/show-more';
 import { useExpandedSessions } from '@/client/hooks/workspace/expanded-sessions';
 import { useWorkspaceFolderActions } from '@/client/hooks/workspace/workspace-folder-actions';
@@ -25,6 +26,8 @@ interface MobileSessionCategoryProps {
   activeSessionId: number | string | null;
   onSelectSession: (id: number | string) => void;
   onNewSessionForFolder: (folderId: number) => void;
+  /** Start a chat in a worktree made from this folder. */
+  onNewWorktreeSession?: (folderId: number, worktreePath: string) => void;
   isExpanded: boolean;
   onToggleExpand: () => void;
   showArchived?: boolean;
@@ -43,6 +46,7 @@ export function MobileSessionCategory({
   activeSessionId,
   onSelectSession,
   onNewSessionForFolder,
+  onNewWorktreeSession,
   isExpanded,
   onToggleExpand,
   showArchived = false,
@@ -53,6 +57,11 @@ export function MobileSessionCategory({
   onCancelWait,
 }: MobileSessionCategoryProps) {
   const { visibleCount, showMore, showLess, canShowLess } = useShowMore();
+  // The phone's folder row opens the same dialog the desktop one does. Its state
+  // lives in a hook so this row stays under the size ceiling.
+  const worktreeDialog = useWorktreeDialog(folder, (worktreePath) =>
+    onNewWorktreeSession?.(folder.id, worktreePath),
+  );
   const { refresh } = useSidebarData();
   const { expandedSessionIds, toggleSession } = useExpandedSessions();
   // The viewed transcript, so its session row dims while a roster entry is
@@ -223,6 +232,11 @@ export function MobileSessionCategory({
                   variant="mobile"
                   isPinned={folder.isPinned}
                   onOpenFolder={onOpenFolder}
+                  onNewWorktree={
+                    onNewWorktreeSession && folder.project_path
+                      ? () => { setShowMenu(false); worktreeDialog.open(); }
+                      : undefined
+                  }
                   onSelectSessions={
                     onStartSessionSelection
                       ? () => { setShowMenu(false); onStartSessionSelection(folder.id); }
@@ -326,6 +340,8 @@ export function MobileSessionCategory({
         onClose={sessionDelete.cancelDelete}
         onConfirm={() => void sessionDelete.confirmDelete()}
       />
+
+      {worktreeDialog.dialog}
     </div>
   );
 }

package/src/client/components/mobile/mobile-session-sidebar/List.tsx

@@ -10,6 +10,8 @@ interface MobileSessionListProps {
   sessionStatus: Record<string, 'stream' | 'finish' | 'abort'>;
   onSelectSession: (id: number | string) => void;
   onNewSessionForFolder: (folderId: number) => void;
+  /** Start a chat in a worktree made from this folder. */
+  onNewWorktreeSession?: (folderId: number, worktreePath: string) => void;
   onToggleFolder: (folderId: number) => void;
   /** Surfaces a refused folder action (the reveal endpoint's own reason). */
   onToast?: (message: string, type?: 'success' | 'error') => void;
@@ -28,6 +30,7 @@ export function MobileSessionList({
   sessionStatus,
   onSelectSession,
   onNewSessionForFolder,
+  onNewWorktreeSession,
   onToggleFolder,
   onToast,
   batch,
@@ -55,6 +58,7 @@ export function MobileSessionList({
             activeSessionId={activeSessionId}
             onSelectSession={onSelectSession}
             onNewSessionForFolder={onNewSessionForFolder}
+            onNewWorktreeSession={onNewWorktreeSession}
             isExpanded={expandedFolders[folder.id] ?? true}
             onToggleExpand={() => onToggleFolder(folder.id)}
             showArchived={showArchived}

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.tsx

@@ -4,6 +4,7 @@ import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 import { useSessionRenaming } from '@/client/hooks/workspace/renaming-sessions';
 import { SessionActionsMenu, useRowMenu } from '@/client/components/common/session-actions-menu';
 import { SelectionCheckbox } from '@/client/components/common/batch-selection/SelectionCheckbox';
+import { WorktreeBadge } from '@/client/components/layout/session-sidebar/WorktreeBadge';
 
 export interface MobileSessionRowProps {
   session: SessionItemData;
@@ -175,6 +176,10 @@ export function MobileSessionRow({
                   waiting for {waitingFor?.title ?? 'another session'}
                 </span>
               )}
+              {/* The same chip the desktop row draws, from the same field on the
+                  row payload — one layout cannot be the only one that says where
+                  the chat writes. */}
+              {session.worktree ? <WorktreeBadge worktree={session.worktree} /> : null}
             </span>
           </div>
 

package/src/client/components/mobile/mobile-session-sidebar/WorktreeDialog.tsx

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The New Worktree dialog as a phone folder row opens it.
+ *
+ * Split out because the row was at the file-size ceiling and because the
+ * dialog's state (open, and which folder) belongs to the dialog rather than to a
+ * row that also draws sessions, a `⋯` menu and a delete confirmation. The row
+ * calls the hook, hands `open` to its menu row and renders `dialog` at its tail —
+ * the menu row has to stay INSIDE the dropdown, which is why this returns the
+ * modal rather than the trigger.
+ */
+
+import { useState } from 'preact/hooks';
+import { NewWorktreeModal } from '@/client/components/workspace/worktree-modal/index';
+import type { WorkspaceFolderData } from '@/shared/types';
+
+export interface WorktreeDialogHandle {
+  open: () => void;
+  /** Rendered at the row's tail; null until the dialog has been opened once. */
+  dialog: preact.JSX.Element | null;
+}
+
+export function useWorktreeDialog(
+  folder: WorkspaceFolderData,
+  onCreated: (worktreePath: string) => void,
+): WorktreeDialogHandle {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return {
+    open: () => setIsOpen(true),
+    dialog: isOpen ? (
+      <NewWorktreeModal
+        isOpen
+        onClose={() => setIsOpen(false)}
+        root={folder.project_path ?? null}
+        folderId={folder.id}
+        folderName={folder.name}
+        onCreated={(created) => {
+          setIsOpen(false);
+          onCreated(created.path);
+        }}
+      />
+    ) : null,
+  };
+}

package/src/client/components/mobile/worktree-session.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Starting a chat inside a worktree, from either layout's sidebar.
+ *
+ * Desktop and phone do the same three things in the same order, and the order is
+ * what makes it work: prewarm the child in the WORKTREE cwd (not the project's),
+ * mint the pending session, write its target BEFORE the URL names it, then
+ * navigate. Writing the target afterwards would leave the composer drawing the
+ * folder while the send path already had its ref armed for something else — the
+ * one outcome the pick exists to prevent.
+ *
+ * Extracted so both sidebars call one function rather than repeating a sequence
+ * whose middle step is invisible when it is wrong.
+ */
+
+import { startPendingSession } from '@/client/hooks/chat/omp/pending-sessions';
+import { triggerSessionPrewarm } from '@/shared/lib/omp/session/prewarm';
+import { setSessionKey } from '@/shared/lib/workspace/session-state/store';
+import { SPAWN_TARGET_KEY } from '@/client/hooks/chat/timeline/spawn-target';
+
+export interface WorktreeSessionDeps {
+  setSearchParams: (fn: (prev: URLSearchParams) => URLSearchParams, options?: { replace?: boolean }) => void;
+  /** Called after the navigation — the phone closes its drawer here. */
+  afterNavigate?: () => void;
+}
+
+/**
+ * Open a pending chat in `worktreePath`, scoped to `folderId`.
+ * Returns the pending session's id, so a caller can report or follow it.
+ */
+export function startWorktreeSession(
+  deps: WorktreeSessionDeps,
+  folderId: number,
+  worktreePath: string,
+): string {
+  triggerSessionPrewarm(worktreePath);
+  const pendingId = startPendingSession(folderId);
+  setSessionKey(pendingId, SPAWN_TARGET_KEY, { folderId, worktreePath });
+  deps.setSearchParams((prev) => {
+    const next = new URLSearchParams(prev);
+    next.set('sessionId', pendingId);
+    next.set('folderId', folderId.toString());
+    return next;
+  }, { replace: true });
+  deps.afterNavigate?.();
+  return pendingId;
+}

package/src/client/components/settings/categories/ProjectSettings.tsx

@@ -6,9 +6,12 @@ import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
 import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
+import { WorktreeSettings } from '@/client/components/settings/categories/project-settings/WorktreeSettings';
+import { useToasts } from '@/client/hooks/ui/toasts';
 
 export function ProjectSettings() {
   const masterDetail = useSettingsMasterDetail();
+  const { pushToast } = useToasts();
   const [projects, setProjects] = useState<ProjectConfigItem[]>([]);
   const [availableModels, setAvailableModels] = useState<string[]>([]);
   const [accentColorOptions, setAccentColorOptions] = useState<AccentColorOption[]>([]);
@@ -179,14 +182,25 @@ export function ProjectSettings() {
         }
         detail={
           selectedProject ? (
-            <ProjectDetailsForm
-              project={selectedProject}
-              canDelete={projects.length > 1}
-              onUpdateField={handleUpdateField}
-              onDeleteProject={handleDeleteProject}
-              availableModels={availableModels}
-              accentColorOptions={accentColorOptions}
-            />
+            <div className="flex flex-col">
+              <ProjectDetailsForm
+                project={selectedProject}
+                canDelete={projects.length > 1}
+                onUpdateField={handleUpdateField}
+                onDeleteProject={handleDeleteProject}
+                availableModels={availableModels}
+                accentColorOptions={accentColorOptions}
+              />
+              {/* Worktrees belong to the PROJECT, not to a session: a create here
+                  has no chat, and the next chat picks it from the composer. */}
+              <div className="border-t border-ink/10 px-4 py-4">
+                <WorktreeSettings
+                  root={selectedProject.path}
+                  folderId={selectedProject.folderId ?? null}
+                  onReport={(message, tone) => pushToast(message, tone ?? 'success', { duration: 6000 })}
+                />
+              </div>
+            </div>
           ) : null
         }
       />

package/src/client/components/settings/categories/project-settings/WorktreeSettings.tsx

@@ -0,0 +1,140 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Settings → Projects → Worktrees: the list, and the two settings that decide
+ * where a new one lands.
+ *
+ * A row carries what the reader actually asks of a list of worktrees: which
+ * branch is held there (and therefore cannot be checked out anywhere else), how
+ * many chats start in it, and whether it is dirty. `missing` is its own line
+ * because a worktree whose folder was deleted outside Kabmo still owns its
+ * sessions, and hiding it would hide them.
+ *
+ * The two fields below the list are the settings a create reads on the server
+ * (`worktreeDirectory`, `worktreeCarryIgnored`), so what is typed here is what
+ * the next create uses — including one started by a scheduled task.
+ */
+
+import { useState } from 'preact/hooks';
+import { readKabmoSetting, writeSetting } from '@/shared/lib/settings/client';
+import { useWorktrees } from '@/client/hooks/workspace/worktree/index';
+import { removeWorktree } from '@/client/hooks/workspace/worktree/index';
+import { WORKTREE_CARRY_SETTING, WORKTREE_DIRECTORY_SETTING } from '@/shared/lib/fs/worktree/settings-keys';
+import { branchDeletable, removalRefusal, worktreeRowDetail } from '@/client/components/settings/categories/project-settings/worktree-row';
+
+export interface WorktreeSettingsProps {
+  /** The selected project's `project_path`; the section is inert without one. */
+  root: string | null;
+  folderId: number | null;
+  /** Report a refusal — the section never claims a removal it did not get. */
+  onReport: (message: string, tone?: 'success' | 'error') => void;
+}
+
+export function WorktreeSettings({ root, folderId, onReport }: WorktreeSettingsProps) {
+  const { worktrees, base, loading, error, refresh } = useWorktrees({ root, folderId }, Boolean(root));
+  const [directory, setDirectory] = useState(() => {
+    const stored = readKabmoSetting<string>(WORKTREE_DIRECTORY_SETTING);
+    return typeof stored === 'string' ? stored : '';
+  });
+  const [carry, setCarry] = useState(() => readKabmoSetting<boolean>(WORKTREE_CARRY_SETTING) !== false);
+  // `detached` rows name a commit instead of a branch, and the payload carries it.
+
+  const [removing, setRemoving] = useState<string | null>(null);
+
+  if (!root) {
+    return <p className="text-xs text-ink/50">Bind this workspace to a repository to manage its worktrees.</p>;
+  }
+
+  const removable = worktrees.filter((worktree) => !worktree.isPrimary);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <section className="flex flex-col gap-1">
+        <h3 className="text-xs font-semibold text-ink">Worktrees</h3>
+        {loading && <p className="text-[11px] text-ink/50">Reading worktrees…</p>}
+        {error && (
+          // A failed read is REPORTED, never rendered as "none": the two look
+          // identical on screen and only one of them is actionable.
+          <p className="text-[11px] text-error" title={error}>
+            Worktrees could not be read: {error}
+          </p>
+        )}
+        {!loading && !error && removable.length === 0 && (
+          <p className="text-[11px] text-ink/50">No worktrees yet.</p>
+        )}
+        {removable.map((worktree) => (
+          <div key={worktree.path} className="group flex items-center gap-2 rounded-md px-1 py-1.5 hover:bg-ink/5">
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-xs text-ink">{worktree.branch || 'detached'}</p>
+              <p className="truncate text-[10.5px] text-ink/50" title={worktree.path}>
+                {worktreeRowDetail(worktree)}
+              </p>
+            </div>
+            <button
+              type="button"
+              disabled={removing === worktree.path || removalRefusal(worktree) !== null}
+              aria-label={`Remove worktree ${worktree.branch || worktree.path}`}
+              title={removalRefusal(worktree) ?? 'Remove worktree'}
+              onClick={() => {
+                setRemoving(worktree.path);
+                void removeWorktree({ root, folderId }, worktree.path, { deleteBranch: branchDeletable(worktree) })
+                  .then((result) => {
+                    onReport(
+                      result.branchDeleted
+                        ? `Removed ${worktree.branch} and its branch`
+                        : `Removed ${worktree.branch}${result.branchKept ? ' (branch kept)' : ''}`,
+                      'success',
+                    );
+                    return refresh();
+                  })
+                  .catch((cause: unknown) => onReport(cause instanceof Error ? cause.message : String(cause), 'error'))
+                  .finally(() => setRemoving(null));
+              }}
+              className="shrink-0 rounded px-2 py-1 text-[11px] text-ink/60 hover:bg-error/10 hover:text-error disabled:opacity-40"
+            >
+              Remove
+            </button>
+          </div>
+        ))}
+      </section>
+
+      <label className="flex flex-col gap-1">
+        <span className="text-xs font-semibold text-ink">Worktree location</span>
+        <input
+          value={directory}
+          onChange={(event) => setDirectory(event.currentTarget.value)}
+          onBlur={() => writeSetting(WORKTREE_DIRECTORY_SETTING, directory.trim())}
+          placeholder={base}
+          className="h-8 rounded-md border border-ink/15 bg-paper px-2 text-xs text-ink outline-none focus:border-ink/40"
+        />
+        <span className="text-[10.5px] text-ink/50">
+          Where new worktrees are created. Relative paths are resolved against the project; ~ is your home directory.
+          Empty uses {base}.
+        </span>
+      </label>
+
+      <label className="flex items-start gap-2">
+        <input
+          type="checkbox"
+          checked={carry}
+          onChange={(event) => {
+            const next = event.currentTarget.checked;
+            setCarry(next);
+            writeSetting(WORKTREE_CARRY_SETTING, next);
+          }}
+          className="mt-0.5"
+        />
+        <span className="flex flex-col gap-0.5">
+          <span className="text-xs font-semibold text-ink">Copy ignored files into new worktrees</span>
+          <span className="text-[10.5px] text-ink/50">
+            A new worktree gets the project's ignored build folders (node_modules, .venv, target) copied in, so it works
+            without reinstalling.
+          </span>
+        </span>
+      </label>
+    </div>
+  );
+}

package/src/client/components/settings/categories/project-settings/worktree-row.test.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * What a worktree row says, and when its Remove control is refused.
+ *
+ * These are the sentences a reader decides on, so they are functions rather than
+ * inline template strings: a markup test would prove the component renders
+ * *something*, while the questions here are "which branch is held" (and therefore
+ * cannot be checked out anywhere else), "how many chats start here", and "would
+ * this removal lose work".
+ */
+
+import { describe, expect, test } from 'bun:test';
+import {
+  branchDeletable,
+  removalRefusal,
+  worktreeRowDetail,
+} from '@/client/components/settings/categories/project-settings/worktree-row';
+import type { WorktreeInfo } from '@/shared/lib/workspace/worktree/types';
+
+const base: WorktreeInfo = {
+  path: '/data/worktrees/abc/cosmic-dolphin',
+  branch: 'wt/cosmic-dolphin',
+  head: 'a1b2c3d4e5f6',
+  detached: false,
+  missing: false,
+  isPrimary: false,
+  dirty: 0,
+  aheadOfStart: 0,
+  startRef: 'HEAD',
+  sessions: 2,
+};
+
+describe('worktreeRowDetail', () => {
+  test('names the branch, the chat count and the tree state', () => {
+    expect(worktreeRowDetail(base)).toBe('wt/cosmic-dolphin checked out here · 2 chats · clean');
+  });
+
+  test('a single chat is not "1 chats"', () => {
+    expect(worktreeRowDetail({ ...base, sessions: 1 })).toContain('1 chat ·');
+  });
+
+  test('changed files are counted', () => {
+    expect(worktreeRowDetail({ ...base, dirty: 3 })).toContain('3 changed');
+  });
+
+  test('a detached row names a commit instead of a branch', () => {
+    expect(worktreeRowDetail({ ...base, branch: '', detached: true })).toContain('detached @ a1b2c3d');
+  });
+
+  test('a missing worktree says its chats still open — that is why the row stays', () => {
+    expect(worktreeRowDetail({ ...base, missing: true })).toContain('its chats still open');
+  });
+});
+
+describe('removal rules', () => {
+  test('a clean worktree with no commits of its own may lose its branch', () => {
+    expect(branchDeletable(base)).toBe(true);
+    expect(removalRefusal(base)).toBeNull();
+  });
+
+  test('a branch with commits of its own is kept, and the checkbox is disabled', () => {
+    expect(branchDeletable({ ...base, aheadOfStart: 2 })).toBe(false);
+    // The worktree itself is still removable: only the branch is protected.
+    expect(removalRefusal({ ...base, aheadOfStart: 2 })).toBeNull();
+  });
+
+  test('a dirty worktree is refused with its count', () => {
+    expect(removalRefusal({ ...base, dirty: 1 })).toBe('1 uncommitted file here would be lost.');
+    expect(removalRefusal({ ...base, dirty: 4 })).toBe('4 uncommitted files here would be lost.');
+  });
+
+  test('the main checkout is never removable', () => {
+    expect(removalRefusal({ ...base, isPrimary: true })).toContain('main checkout');
+  });
+
+  test('a detached row has no branch to delete', () => {
+    expect(branchDeletable({ ...base, branch: '', detached: true })).toBe(false);
+  });
+});

package/src/client/components/settings/categories/project-settings/worktree-row.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One worktree row's second line, and the words the delete control uses.
+ *
+ * Split from the component because these are the sentences a reader decides on:
+ * "which branch is held here" (and therefore cannot be checked out anywhere
+ * else), "how many chats start here", and "is it safe to delete". A markup test
+ * would prove the component renders *something*; these functions are what it has
+ * to say.
+ */
+
+import type { WorktreeInfo } from '@/shared/lib/workspace/worktree/types';
+
+/** What a row says under its branch. */
+export function worktreeRowDetail(worktree: WorktreeInfo): string {
+  if (worktree.missing) return 'folder is missing — its chats still open';
+  const branch = worktree.detached
+    ? `detached @ ${worktree.head.slice(0, 7) || 'unknown'}`
+    : `${worktree.branch} checked out here`;
+  const sessions = worktree.sessions === 1 ? '1 chat' : `${worktree.sessions} chats`;
+  const changes = worktree.dirty === 0 ? 'clean' : `${worktree.dirty} changed`;
+  return `${branch} · ${sessions} · ${changes}`;
+}
+
+/**
+ * Whether the branch may be deleted along with the worktree.
+ *
+ * `git branch -d` refuses a branch with commits of its own, so the checkbox is
+ * offered only when there is nothing to lose — a control that can only be
+ * refused is worse than one that is disabled with the reason beside it.
+ */
+export function branchDeletable(worktree: WorktreeInfo): boolean {
+  return !worktree.detached && Boolean(worktree.branch) && worktree.aheadOfStart === 0;
+}
+
+/** Why the remove control is refused, or null when it may run. */
+export function removalRefusal(worktree: WorktreeInfo): string | null {
+  if (worktree.isPrimary) return 'The main checkout cannot be removed.';
+  if (worktree.dirty > 0) {
+    return `${worktree.dirty} uncommitted file${worktree.dirty === 1 ? '' : 's'} here would be lost.`;
+  }
+  return null;
+}

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

@@ -1,9 +1,7 @@
 import type { SetStateAction } from 'preact/compat';
 import { Fragment } from 'preact';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import { Check, ChevronDown, Folder } from 'lucide-preact';
-import type { Attachment, ChatMessageData } from '@/shared/types';
-import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { useEffect, useMemo, useRef } from 'preact/hooks';
+import type { Attachment, ChatMessageData, WorkspaceFolderData } from '@/shared/types';
 import { ChatInput } from '@/client/components/workspace/chat-timeline/chat-input/index';
 import { ChatMessageItem } from '@/client/components/workspace/chat-timeline/MessageItem';
 import { RunFooter } from '@/client/components/workspace/chat-timeline/RunFooter';
@@ -16,6 +14,8 @@ import {
   type WaitingCandidate,
 } from '@/client/components/workspace/chat-timeline/chat-input/WaitingDependencyPicker';
 import { Hourglass } from 'lucide-preact';
+import { TargetPicker } from '@/client/components/workspace/chat-timeline/target-picker/index';
+import type { SpawnTarget } from '@/client/hooks/chat/timeline/spawn-target';
 
 interface EmptyWorkspacePromptProps {
   className?: string;
@@ -65,6 +65,15 @@ interface EmptyWorkspacePromptProps {
   streamStatusMap?: Record<string, string | undefined>;
   /** A name for a streaming session the sidebar has not scanned yet. */
   titleForSession?: (id: string) => string | undefined;
+  /**
+   * Where this chat will run. The picker draws it and the send path reads it
+   * through its own ref, so a worktree choice survives the remount a stretch or
+   * a reload performs.
+   */
+  spawnTarget?: SpawnTarget | null;
+  onSpawnTargetChange?: (next: SpawnTarget | null) => void;
+  /** Reports a worktree the composer created or failed to create. */
+  onWorktreeReport?: (message: string) => void;
   /** The "wait for session" pick, persisted per chat. */
   waitingFor?: WaitingCandidate | null;
   onWaitingForChange?: (candidate: WaitingCandidate | null) => void;
@@ -108,20 +117,16 @@ export function EmptyWorkspacePrompt({
   onNewChat,
   streamStatusMap = {},
   titleForSession,
+  spawnTarget = null,
+  onSpawnTargetChange,
+  onWorktreeReport,
   waitingFor = null,
   onWaitingForChange,
   heldWait = null,
   onCancelWait,
 }: EmptyWorkspacePromptProps) {
-  const [showWorkspace, setShowWorkspace] = useState(false);
-  const workspaceRef = useRef<HTMLDivElement>(null);
-  useOnClickOutside(workspaceRef, () => setShowWorkspace(false));
   const timelineRef = useRef<HTMLDivElement>(null);
 
-  const selectedFolder = useMemo(() => {
-    return folders?.find(f => f.id === selectedFolderId);
-  }, [folders, selectedFolderId]);
-
   // Sessions the wait may name: the ones with a run in flight, from the same
   // server-tracked map the sidebar's spinner is drawn from.
   const candidates = useMemo(
@@ -159,51 +164,19 @@ export function EmptyWorkspacePrompt({
             a target workspace, so the composer is the only focus. */}
         {messages.length === 0 && (
           <div className="flex items-center gap-1 flex-wrap">
-          <div className="relative shrink-0" ref={workspaceRef}>
-          <button 
-            type="button"
-            onClick={() => setShowWorkspace(!showWorkspace)}
-            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"
-          >
-            <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>{selectedFolder ? selectedFolder.name : 'Select Workspace Context'}</span>
-            </span>
-            <ChevronDown size={13} className={`text-ink/40 group-hover:text-ink/70 flex-shrink-0 transition-transform duration-150 ${showWorkspace ? 'rotate-180 text-ink/70' : ''}`} />
-          </button>
-          
-          {showWorkspace && (
-            <div className="absolute bottom-full left-0 mb-1.5 w-64 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">
-                Target Workspace
-              </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((f: any) => (
-                    <button 
-                      key={f.id}
-                      type="button"
-                      onClick={() => { setSelectedFolderId(f.id); setShowWorkspace(false); }}
-                      className={`w-full text-left px-3 py-1.5 flex items-center justify-between transition-colors cursor-pointer ${
-                        selectedFolderId === f.id
-                          ? 'bg-ink/10 text-ink font-semibold'
-                          : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
-                      }`}
-                    >
-                      <div className="flex items-center space-x-2 truncate pr-2">
-                        <Folder size={12} className={selectedFolderId === f.id ? "text-ink flex-shrink-0" : "text-ink/50 flex-shrink-0"} />
-                        <span className="truncate font-medium">{f.name}</span>
-                      </div>
-                      {selectedFolderId === f.id && <Check size={12} className="text-ink flex-shrink-0" />}
-                    </button>
-                  ))
-                )}
-              </div>
-            </div>
-          )}
-        </div>
+          {/* The target picker asks where the chat runs — the workspace, or one
+              of its worktrees — so a worktree chat is created here rather than
+              in a dialog the user has to find first. */}
+          {onSpawnTargetChange ? (
+            <TargetPicker
+              folders={folders as WorkspaceFolderData[]}
+              selectedFolderId={selectedFolderId}
+              setSelectedFolderId={setSelectedFolderId}
+              target={spawnTarget}
+              setTarget={onSpawnTargetChange}
+              onReport={onWorktreeReport}
+            />
+          ) : null}
           {/* The wait picker sits BESIDE the workspace picker, because both
               answer the same question about the chat that has not started:
               where it runs, and what it waits for. It only appears while there