@kabmo-labs/kabmo 0.8.0 → 0.9.0

package/src/client/components/settings/categories/appearance-settings/EditorThemeSection.tsx

@@ -0,0 +1,184 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The code editor's colour theme, as a filterable grid of cards.
+ *
+ * A second axis beside the app palette (see `themes.ts`): the console keeps its
+ * own theme and the editor wears whichever TextMate theme the reader works in.
+ * `auto` is the first card and the default, so an install that never opens this
+ * picker behaves exactly as before.
+ *
+ * Three properties are load-bearing and each is a bug if dropped:
+ *
+ * - **The swatch is drawn from the generated colour rows, not from the theme
+ *   module.** 65 TextMate definitions is 1.3 MB; a grid that fetched them to
+ *   draw itself would download the whole catalogue to show a colour. The rows
+ *   carry the surface, the ink and three syntax accents — the colours that
+ *   actually tell two themes apart at card size.
+ * - **The preview is set in the theme's OWN colours**, so an unselected card
+ *   still shows what selecting it does.
+ * - **Selecting is a write, and the write is announced** (`Modal` dispatches
+ *   `omp:editor-theme-changed`), which is what reaches an editor that is
+ *   already open — `appSettings` is a boot-time prop and would only apply on a
+ *   reload.
+ */
+
+import { useMemo, useState } from 'preact/hooks';
+import { Check, Moon, Palette, Sun } from 'lucide-preact';
+import type { SettingsState } from '@/shared/types';
+import {
+  EDITOR_AUTO_THEME_ID,
+  EDITOR_THEMES,
+  type EditorTheme,
+} from '@/shared/lib/code/editor/themes';
+import { EDITOR_FONT_CHOICES } from '@/shared/lib/code/editor/typography';
+
+interface EditorThemeSectionProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+type VariantFilter = 'all' | 'light' | 'dark';
+
+const FILTERS: ReadonlyArray<{ id: VariantFilter; label: string }> = [
+  { id: 'all', label: 'All' },
+  { id: 'light', label: 'Light' },
+  { id: 'dark', label: 'Dark' },
+];
+
+/** The face the cards' sample line is set in: the editor's own choice. */
+function sampleFace(font: string): string {
+  const choice = EDITOR_FONT_CHOICES.find((entry) => entry.id === font);
+  return `"${choice?.id ?? EDITOR_FONT_CHOICES[0].id}", monospace`;
+}
+
+function ThemeSwatch({ theme, face }: { theme: EditorTheme; face: string }) {
+  return (
+    <span
+      className="block overflow-hidden rounded border border-ink/10"
+      style={{ backgroundColor: theme.bg, color: theme.fg }}
+    >
+      <span className="block px-1.5 py-1 font-mono text-[10px] leading-[1.4]" style={{ fontFamily: face }}>
+        <span style={{ color: theme.keyword }}>const</span> <span>answer</span>{' '}
+        <span style={{ color: theme.keyword }}>=</span> <span style={{ color: theme.string }}>42</span>
+        <span>{';'}</span>
+        <span className="block truncate" style={{ color: theme.comment }}>
+          {'// '}
+          {theme.label}
+        </span>
+      </span>
+    </span>
+  );
+}
+
+export function EditorThemeSection({ settings, onUpdate }: EditorThemeSectionProps) {
+  const active = settings.editorTheme || EDITOR_AUTO_THEME_ID;
+  const [filter, setFilter] = useState<VariantFilter>('all');
+  const face = sampleFace(settings.editorFont);
+
+  const themes = useMemo(
+    () => (filter === 'all' ? EDITOR_THEMES : EDITOR_THEMES.filter((theme) => theme.variant === filter)),
+    [filter],
+  );
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <h3 className="font-semibold text-sm uppercase tracking-wider text-ink/80 flex items-center gap-2">
+          <Palette size={16} className="text-ink/60" />
+          Editor Theme
+        </h3>
+        <p className="text-[11px] text-ink/60 mt-1">
+          Colours for the code editor only — the console around it keeps the theme above. <strong>Auto</strong>{' '}
+          follows the app palette; any other choice paints the editor's own surface, gutter, selection and
+          syntax, and applies to every open editor without a reload.
+        </p>
+      </div>
+
+      <div className="flex items-center gap-1.5">
+        {FILTERS.map((option) => (
+          <button
+            key={option.id}
+            type="button"
+            onClick={() => setFilter(option.id)}
+            className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors cursor-pointer ${
+              filter === option.id
+                ? 'border-ink bg-ink text-paper'
+                : 'border-ink/20 bg-paper text-ink/70 hover:border-ink/40 hover:text-ink'
+            }`}
+          >
+            {option.id === 'light' && <Sun size={11} className="mr-1 inline align-[-1px]" />}
+            {option.id === 'dark' && <Moon size={11} className="mr-1 inline align-[-1px]" />}
+            {option.label}
+          </button>
+        ))}
+        <span className="ml-auto font-mono text-[11px] text-ink/50">
+          {filter === 'all' ? `${themes.length} themes` : `${themes.length} shown`}
+        </span>
+      </div>
+
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+        {/* `Auto` is a card rather than a checkbox: it is one of the choices,
+            and a checkbox beside a grid makes the default look like an
+            override of the thing it is a peer of. It is drawn under EVERY
+            filter — it is neither light nor dark, and a user who filtered to
+            Dark must still be able to get back to the app palette without
+            first clearing the filter. */}
+        {(
+          <button
+            type="button"
+            onClick={() => onUpdate({ editorTheme: EDITOR_AUTO_THEME_ID })}
+            aria-pressed={active === EDITOR_AUTO_THEME_ID}
+            className={`flex w-full flex-col gap-2 rounded-lg border p-2 text-left transition-colors cursor-pointer ${
+              active === EDITOR_AUTO_THEME_ID
+                ? 'border-ink bg-ink/5 ring-1 ring-ink/20'
+                : 'border-ink/20 bg-paper hover:border-ink/40 hover:bg-ink/5'
+            }`}
+          >
+            <span className="flex items-center gap-2">
+              <span className="truncate font-semibold text-ink">Auto</span>
+              <span className="shrink-0 rounded-full border border-ink/15 px-1.5 py-px text-[9px] font-semibold uppercase tracking-wider text-ink/50">
+                app palette
+              </span>
+              {active === EDITOR_AUTO_THEME_ID && <Check size={14} className="ml-auto shrink-0 text-ink" />}
+            </span>
+            <span className="flex h-8 items-center justify-center rounded border border-dashed border-ink/20 text-[10px] text-ink/50">
+              Follows the theme above
+            </span>
+          </button>
+        )}
+
+        {themes.map((theme) => {
+          const selected = active === theme.id;
+          return (
+            <button
+              key={theme.id}
+              type="button"
+              onClick={() => onUpdate({ editorTheme: theme.id })}
+              aria-pressed={selected}
+              className={`flex w-full flex-col gap-2 rounded-lg border p-2 text-left transition-colors cursor-pointer ${
+                selected
+                  ? 'border-ink bg-ink/5 ring-1 ring-ink/20'
+                  : 'border-ink/20 bg-paper hover:border-ink/40 hover:bg-ink/5'
+              }`}
+            >
+              <span className="flex items-center gap-2">
+                <span className="truncate font-semibold text-ink" title={theme.label}>
+                  {theme.label}
+                </span>
+                <span className="shrink-0 rounded-full border border-ink/15 px-1.5 py-px text-[9px] font-semibold uppercase tracking-wider text-ink/50">
+                  {theme.variant}
+                </span>
+                {selected && <Check size={14} className="ml-auto shrink-0 text-ink" />}
+              </span>
+              <ThemeSwatch theme={theme} face={face} />
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

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

@@ -34,7 +34,7 @@ export interface WorktreeSettingsProps {
 }
 
 export function WorktreeSettings({ root, folderId, onReport }: WorktreeSettingsProps) {
-  const { worktrees, base, loading, error, refresh } = useWorktrees({ root, folderId }, Boolean(root));
+  const { worktrees, base, loading, error, isRepo, refresh } = useWorktrees({ root, folderId }, Boolean(root));
   const [directory, setDirectory] = useState(() => {
     const stored = readKabmoSetting<string>(WORKTREE_DIRECTORY_SETTING);
     return typeof stored === 'string' ? stored : '';
@@ -62,7 +62,13 @@ export function WorktreeSettings({ root, folderId, onReport }: WorktreeSettingsP
             Worktrees could not be read: {error}
           </p>
         )}
-        {!loading && !error && removable.length === 0 && (
+        {!loading && !error && isRepo === false && (
+          // The list is empty for a reason the row has to NAME: a folder that
+          // is not a repository can never have a worktree, and "No worktrees
+          // yet" would read as one that could be created.
+          <p className="text-[11px] text-ink/50">Worktrees need a Git repository.</p>
+        )}
+        {!loading && !error && isRepo !== false && removable.length === 0 && (
           <p className="text-[11px] text-ink/50">No worktrees yet.</p>
         )}
         {removable.map((worktree) => (

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

@@ -14,7 +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 { 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 {
@@ -164,19 +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">
-          {/* 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
+          {/* 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}
-              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

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/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>
+  );
+}