@kabmo-labs/kabmo 0.7.0 → 0.9.0

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,9 @@ import {
   type WaitingCandidate,
 } from '@/client/components/workspace/chat-timeline/chat-input/WaitingDependencyPicker';
 import { Hourglass } from 'lucide-preact';
+import { WorkspacePicker } from '@/client/components/workspace/chat-timeline/target-picker/WorkspacePicker';
+import { WorktreePicker } from '@/client/components/workspace/chat-timeline/target-picker/WorktreePicker';
+import type { SpawnTarget } from '@/client/hooks/chat/timeline/spawn-target';
 
 interface EmptyWorkspacePromptProps {
   className?: string;
@@ -65,6 +66,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 +118,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 +165,26 @@ 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>
+          {/* Two controls, because they answer two questions: the workspace
+              (which project) and the worktree (which checkout of it). The
+              worktree control draws itself only for a git repository, and it
+              reads its list on mount because its own trigger names the branch
+              the project root holds. */}
+          <WorkspacePicker
+            folders={folders as WorkspaceFolderData[]}
+            selectedFolderId={selectedFolderId}
+            setSelectedFolderId={setSelectedFolderId}
+            onClearWorktree={() => onSpawnTargetChange?.(null)}
+          />
+          {onSpawnTargetChange && (
+            <WorktreePicker
+              folders={folders as WorkspaceFolderData[]}
+              selectedFolderId={selectedFolderId}
+              target={spawnTarget}
+              setTarget={onSpawnTargetChange}
+              onReport={onWorktreeReport}
+            />
           )}
-        </div>
           {/* 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

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/SystemNotice.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useRef, useState } from 'preact/hooks';
 import { AlertCircle, Bell, Bot, CheckCircle2, ChevronDown, Clock, Info, Layers, Target } from 'lucide-preact';
 import { isCodeLike } from '@/shared/lib/code/language';
-import { highlightCode } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { useDeferredHighlight } from '@/client/hooks/code/deferred-highlight';
 import { useIsTruncated } from '@/client/hooks/ui/text-overflow';
 import { parseTaskNotice } from '@/shared/lib/chat/task-result-parser';
 import { isReminderTag, stripNoticeTags, unwrapXmlEnvelope } from '@/shared/lib/chat/xml-envelope';
@@ -53,7 +52,6 @@ interface SystemNoticeProps {
  *  injection renders open and has no collapse control (see `forcedOpen`). */
 export function SystemNotice({ notice, source, isMobile = false }: SystemNoticeProps) {
   const [userOpen, setUserOpen] = useState(false);
-  useSyntaxReady();
 
   // 1. Check if notice contains a structured <task-result> block
   const taskNotice = useMemo(() => parseTaskNotice(notice), [notice]);
@@ -115,6 +113,13 @@ export function SystemNotice({ notice, source, isMobile = false }: SystemNoticeP
     };
   }, [notice]);
 
+  // Deferred and gated: the code branch only renders while the card is open, so
+  // a collapsed notice computes nothing and an opened one paints its text first.
+  const codeHtml = useDeferredHighlight(
+    genericInfo.isCode ? genericInfo.rest || genericInfo.clean : '',
+    'javascript',
+  );
+
   const rawTitle = goalNotice
     ? goalNoticeTitle(goalNotice)
     : taskNotice?.intro || reminderInfo?.title || genericInfo.firstLine || notice;
@@ -284,7 +289,7 @@ export function SystemNotice({ notice, source, isMobile = false }: SystemNoticeP
             <pre
               className="max-h-56 overflow-auto font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-words text-ink/75 scrollbar-overlay-container"
               dangerouslySetInnerHTML={{
-                __html: highlightCode(genericInfo.rest || genericInfo.clean, 'javascript'),
+                __html: codeHtml,
               }}
             />
           ) : (

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

@@ -4,15 +4,13 @@ import type { ParsedTaskNotice } from '@/shared/lib/chat/task-result-parser';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
 import { CopyButton } from '@/client/components/common/CopyButton';
 import { isCodeLike } from '@/shared/lib/code/language';
-import { highlightCode } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { useDeferredHighlight } from '@/client/hooks/code/deferred-highlight';
 
 interface TaskResultContentProps {
   task: ParsedTaskNotice;
 }
 
 export function TaskResultContent({ task }: TaskResultContentProps) {
-  useSyntaxReady();
   const structured = task.structuredOutput;
   const isRawCode = !task.formattedJson && isCodeLike(task.rawOutput);
 
@@ -20,6 +18,13 @@ export function TaskResultContent({ task }: TaskResultContentProps) {
     structured || !isRawCode ? 'formatted' : 'raw'
   );
 
+  // Gated on the tab that draws it: the raw view is one of two, and tokenizing
+  // it while the formatted view is on screen is work nobody sees.
+  const rawHtml = useDeferredHighlight(
+    activeTab === 'raw' ? task.formattedJson || task.rawOutput : '',
+    task.formattedJson ? 'json' : isRawCode ? 'javascript' : 'markdown',
+  );
+
   return (
     <div className="space-y-3">
       {/* Top action toolbar / tab toggles */}
@@ -151,10 +156,7 @@ export function TaskResultContent({ task }: TaskResultContentProps) {
         <pre
           className="max-h-64 overflow-auto rounded-lg border border-ink/8 bg-paper p-3 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-words text-ink/80 scrollbar-overlay-container"
           dangerouslySetInnerHTML={{
-            __html: highlightCode(
-              task.formattedJson || task.rawOutput,
-              task.formattedJson ? 'json' : isRawCode ? 'javascript' : 'markdown'
-            ),
+            __html: rawHtml,
           }}
         />
       )}

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/WorkspacePicker.test.tsx

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The composer's WORKSPACE picker, rendered.
+ *
+ * The cases a reader would otherwise find only in a browser:
+ *
+ *  - the trigger names the selected folder, and says what it is waiting for
+ *    when nothing is selected;
+ *  - the menu lists folders and NOTHING about worktrees — the split is the
+ *    point of this control, and a worktree row here is the regression;
+ *  - choosing another folder clears the worktree pick, because a checkout of
+ *    the previous project names a path the new one cannot resolve.
+ */
+
+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 { WorkspacePicker, workspaceLabel } from '@/client/components/workspace/chat-timeline/target-picker/WorkspacePicker';
+import type { WorkspaceFolderData } from '@/shared/types';
+
+const folder = (id: number, name: string): WorkspaceFolderData => ({
+  id,
+  name,
+  project_path: `/repo/${name}`,
+  isExpanded: true,
+  hasMore: false,
+  totalSessions: 0,
+  sessions: [],
+});
+
+const mounted: HTMLElement[] = [];
+
+beforeAll(() => {
+  installDomGlobals(new Window({ url: 'http://localhost' }));
+});
+
+afterEach(() => {
+  for (const host of mounted.splice(0)) {
+    render(null, host);
+    host.remove();
+  }
+});
+
+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;
+}
+
+function textOf(host: HTMLElement): string {
+  return (host.textContent ?? '').replace(/\s+/g, ' ').trim();
+}
+
+describe('workspaceLabel', () => {
+  test('the selected folder', () => {
+    expect(workspaceLabel([folder(1, 'kabmo')], 1)).toBe('kabmo');
+  });
+
+  test('what it is waiting for, with nothing selected', () => {
+    expect(workspaceLabel([], null)).toBe('Select Workspace Context');
+  });
+});
+
+describe('WorkspacePicker', () => {
+  test('the menu lists the workspaces and nothing about worktrees', async () => {
+    const host = await mount(
+      h(WorkspacePicker, {
+        folders: [folder(1, 'kabmo'), folder(2, 'notes')],
+        selectedFolderId: 1,
+        setSelectedFolderId: () => {},
+      }),
+    );
+
+    await act(async () => {
+      (host.querySelector('button') as HTMLButtonElement).click();
+    });
+
+    const text = textOf(host);
+    expect(text).toContain('Target Workspace');
+    expect(text).toContain('kabmo');
+    expect(text).toContain('notes');
+    // The split: a worktree row here would be the merged menu coming back.
+    expect(text).not.toContain('Quick worktree');
+    expect(text).not.toContain('New worktree');
+    expect(text).not.toContain('Worktrees');
+  });
+
+  test('choosing a folder clears the worktree pick', async () => {
+    // A record rather than two locals: a value assigned inside a callback is
+    // still narrowed to its initializer by control-flow analysis, so `picked`
+    // would be `null` at the assertion.
+    const seen: { picked: number | null; cleared: number } = { picked: null, cleared: 0 };
+    const host = await mount(
+      h(WorkspacePicker, {
+        folders: [folder(1, 'kabmo'), folder(2, 'notes')],
+        selectedFolderId: 1,
+        setSelectedFolderId: (id) => {
+          seen.picked = id;
+        },
+        onClearWorktree: () => {
+          seen.cleared += 1;
+        },
+      }),
+    );
+
+    await act(async () => {
+      (host.querySelector('button') as HTMLButtonElement).click();
+    });
+    const rows = [...host.querySelectorAll('[role="menuitemradio"]')] as HTMLButtonElement[];
+    expect(rows.length).toBe(2);
+    await act(async () => {
+      rows[1]?.click();
+    });
+
+    expect(seen.picked).toBe(2);
+    expect(seen.cleared).toBe(1);
+  });
+});

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

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * WHERE the chat runs: the workspace folder.
+ *
+ * One control of the composer's draft-target pair, and the pair exists because
+ * the two questions are different: the folder is the project, and the worktree
+ * is the checkout inside it (`WorktreePicker`). They were merged into one menu
+ * once, and the result read as a workspace picker with worktree rows buried in
+ * it — a user looking for another project scrolled past branch names, and a
+ * user looking for a worktree could not tell the control was the place to look.
+ * OpenChamber draws them as two controls for the same reason.
+ *
+ * Picking a folder CLEARS the worktree pick: a checkout of the previous project
+ * names a path that does not exist under the new one.
+ */
+
+import { useRef, useState } from 'preact/hooks';
+import { Check, ChevronDown, Folder } from 'lucide-preact';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import type { WorkspaceFolderData } from '@/shared/types';
+
+export interface WorkspacePickerProps {
+  folders: WorkspaceFolderData[];
+  selectedFolderId: number | null;
+  setSelectedFolderId: (id: number | null) => void;
+  /** Called with `null` when the user moves to another project. */
+  onClearWorktree?: () => void;
+}
+
+/** The trigger's words, exported so a test asserts them without the markup. */
+export function workspaceLabel(folders: WorkspaceFolderData[], selectedFolderId: number | null): string {
+  const folder = folders.find((candidate) => String(candidate.id) === String(selectedFolderId));
+  return folder?.name ?? 'Select Workspace Context';
+}
+
+export function WorkspacePicker({
+  folders,
+  selectedFolderId,
+  setSelectedFolderId,
+  onClearWorktree,
+}: WorkspacePickerProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(containerRef, () => setOpen(false));
+
+  const pick = (folder: WorkspaceFolderData) => {
+    setSelectedFolderId(folder.id);
+    // A worktree belongs to the project it was made from; keeping the pick
+    // across a project change would spawn the chat in a path this project
+    // cannot resolve.
+    onClearWorktree?.();
+    setOpen(false);
+  };
+
+  const label = workspaceLabel(folders, selectedFolderId);
+
+  return (
+    <div className="relative shrink-0" ref={containerRef}>
+      <button
+        type="button"
+        // Two triggers sit side by side, so each needs a name that says which
+        // question it answers: "kabmo" and "main" alone are both ambiguous.
+        aria-label={`Workspace: ${label}`}
+        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"
+      >
+        <Folder size={13} className="text-ink/50 group-hover:text-ink/80 transition-colors flex-shrink-0" />
+        <span className="max-w-[260px] truncate tracking-tight">{label}</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-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((folder) => {
+                const active = String(selectedFolderId) === String(folder.id);
+                return (
+                  <button
+                    key={folder.id}
+                    type="button"
+                    role="menuitemradio"
+                    aria-checked={active}
+                    onClick={() => pick(folder)}
+                    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 space-x-2 truncate pr-2">
+                      <Folder size={12} className={active ? 'text-ink flex-shrink-0' : 'text-ink/50 flex-shrink-0'} />
+                      <span className="truncate font-medium">{folder.name}</span>
+                    </span>
+                    {active && <Check size={12} className="text-ink flex-shrink-0" />}
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}