@kabmo-labs/kabmo 0.8.0 → 0.9.0

package/src/client/components/workspace/editor/Toolbar.tsx

@@ -1,4 +1,20 @@
-import { AlertCircle, Check, Copy, Download, Eye, EyeOff, Maximize, Minimize, Save, Search, WrapText, ZoomIn, ZoomOut } from 'lucide-preact';
+import {
+  AlertCircle,
+  Check,
+  Copy,
+  Download,
+  Eye,
+  EyeOff,
+  Maximize,
+  Minimize,
+  Save,
+  Search,
+  WrapText,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-preact';
+import { EditorViewButtons, useEditorViewActions } from '@/client/components/common/editor-view-buttons';
+import { ToolbarRow, type ToolbarCluster } from '@/client/components/common/toolbar-row';
 
 export type EditorSaveStatus = 'idle' | 'saving' | 'saved' | 'error' | 'needs-permission';
 
@@ -94,146 +110,227 @@ export function EditorToolbar({
             ? 'Save failed — the file on disk was not changed'
             : 'Save file (Ctrl+S)';
 
-  return (
-    // `@container`: the path below hides on a NARROW PANEL, not a narrow
-    // viewport. At the editor panel's 320px floor the action strip is 273px of
-    // `flex-shrink-0`, which left the path a measured 23px — a truncated
-    // fragment of a filename is not information, and the tab above already
-    // carries it.
-    <div className="@container flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper flex-shrink-0">
-      {/* Left status */}
-      <div className="hidden @[420px]:flex items-center space-x-2 text-xs font-mono text-ink/40 min-w-0">
-        <span className="truncate max-w-[300px]" title={path}>{path}</span>
-      </div>
+  const saveButton = (
+    <button
+      type="button"
+      onClick={onSave}
+      disabled={saveDisabled || saveStatus === 'saving'}
+      className={`${ACTION_CLASS} hover:bg-ink/5`}
+      title={saveTitle}
+      aria-label={saveTitle}
+    >
+      {saveStatus === 'saving' ? (
+        <Save size={14} className="text-amber-500 animate-pulse" />
+      ) : saveStatus === 'saved' ? (
+        <Check size={14} className="text-success" />
+      ) : saveStatus === 'error' ? (
+        <AlertCircle size={14} className="text-error" />
+      ) : saveStatus === 'needs-permission' ? (
+        // Not an error: the buffer is fine and one click grants access.
+        <Save size={14} className="text-warning" />
+      ) : (
+        <Save size={14} className="hover:text-ink" />
+      )}
+    </button>
+  );
 
-      {/* Right actions. `ml-auto` keeps them right-aligned once the path block
-          above is hidden, which `justify-between` alone would not do (a single
-          child sits at the start). */}
-      <div className="flex items-center space-x-1 text-ink/40 flex-shrink-0 ml-auto">
-        {!byteViewer && (
-          <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
-            <button
-              type="button"
-              onClick={onSave}
-              disabled={saveDisabled || saveStatus === 'saving'}
-              className={`${ACTION_CLASS} hover:bg-ink/5`}
-              title={saveTitle}
-              aria-label={saveTitle}
-            >
-              {saveStatus === 'saving' ? (
-                <Save size={14} className="text-amber-500 animate-pulse" />
-              ) : saveStatus === 'saved' ? (
-                <Check size={14} className="text-success" />
-              ) : saveStatus === 'error' ? (
-                <AlertCircle size={14} className="text-error" />
-              ) : saveStatus === 'needs-permission' ? (
-                // Not an error: the buffer is fine and one click grants access.
-                <Save size={14} className="text-warning" />
-              ) : (
-                <Save size={14} className="hover:text-ink" />
-              )}
-            </button>
-          </div>
-        )}
+  const copyLabel = copied ? 'Copied' : byteViewer ? 'Copy image' : 'Copy content';
+  const copyButton = (
+    <button
+      type="button"
+      onClick={onCopy}
+      className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+      title={copyLabel}
+      aria-label={copyLabel}
+    >
+      {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
+    </button>
+  );
 
-        {hasPreview && (
-          <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
-            <button
-              type="button"
-              onClick={onTogglePreview}
-              className={`${ACTION_CLASS} hover:bg-ink/5 ${isPreview ? 'text-ink' : 'hover:text-ink'}`}
-              title={isPreview ? 'Show source' : 'Show preview'}
-              aria-label={isPreview ? 'Show source' : 'Show preview'}
-              aria-pressed={isPreview}
-            >
-              {isPreview ? <EyeOff size={14} /> : <Eye size={14} />}
-            </button>
-          </div>
-        )}
+  const downloadButton = (
+    <button
+      type="button"
+      onClick={onDownload}
+      className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+      title="Download file"
+      aria-label="Download file"
+    >
+      <Download size={14} />
+    </button>
+  );
 
-        {!byteViewer && (
-          <>
-            <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
-              <button
-                type="button"
-                onClick={onToggleFind}
-                className={`${ACTION_CLASS} hover:bg-ink/5 ${findOpen ? 'text-ink' : 'hover:text-ink'}`}
-                title="Find and replace (Ctrl+F)"
-                aria-label="Find and replace"
-                aria-pressed={findOpen}
-              >
-                <Search size={14} />
-              </button>
-            </div>
+  const maximizeLabel = isMaximized ? 'Exit full screen' : 'Full screen';
+  const maximizeButton = (
+    <button
+      type="button"
+      onClick={onToggleMaximize}
+      className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink ${isMaximized ? 'text-ink' : ''}`}
+      title={maximizeLabel}
+      aria-label={maximizeLabel}
+      aria-pressed={isMaximized}
+    >
+      {isMaximized ? <Minimize size={14} /> : <Maximize size={14} />}
+    </button>
+  );
 
-            <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
-              <button
-                type="button"
-                onClick={onToggleWordWrap}
-                className={`${ACTION_CLASS} hover:bg-ink/5 ${wordWrap ? 'text-ink' : 'hover:text-ink'}`}
-                title={wordWrap ? 'Word wrap on' : 'Word wrap off'}
-                aria-label={wordWrap ? 'Word wrap on' : 'Word wrap off'}
-                aria-pressed={wordWrap}
-              >
-                <WrapText size={14} />
-              </button>
-            </div>
+  const viewModeActions = useEditorViewActions();
+  const findLabel = 'Find and replace';
+  const wordWrapLabel = wordWrap ? 'Word wrap on' : 'Word wrap off';
+  const previewLabel = isPreview ? 'Show source' : 'Show preview';
 
-            <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
-              <button
-                type="button"
-                onClick={onZoomOut}
-                className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
-                title="Decrease font size"
-                aria-label="Decrease font size"
-              >
-                <ZoomOut size={14} />
-              </button>
-              <button
-                type="button"
-                onClick={onZoomIn}
-                className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
-                title="Increase font size"
-                aria-label="Increase font size"
-              >
-                <ZoomIn size={14} />
-              </button>
-            </div>
-          </>
-        )}
+  /**
+   * The controls, as clusters that hide as a unit.
+   *
+   * ORDER is the hiding order, most important first: the row keeps the width
+   * modes and full screen (the controls this panel is FOR), then copy/download,
+   * and the reading aids (find, wrap, zoom, preview) move into the `⋯` menu on a
+   * narrow panel. Grouping is the existing one — zoom is a pair, copy/download is
+   * a pair, the modes are a pair — because splitting a pair leaves half of it on
+   * the row.
+   */
+  const clusters: ToolbarCluster[] = [];
 
-        <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
+  if (!byteViewer) {
+    clusters.push({
+      id: 'save',
+      // The primary action of the panel: a menu row must never be the only way
+      // to save a file.
+      pinned: true,
+      actions: [{ label: 'Save file', icon: Save, onSelect: onSave, disabled: saveDisabled }],
+      children: saveButton,
+    });
+  }
+  if (hasPreview) {
+    clusters.push({
+      id: 'preview',
+      actions: [{ label: previewLabel, icon: isPreview ? EyeOff : Eye, onSelect: onTogglePreview, active: isPreview }],
+      children: (
+        <button
+          type="button"
+          onClick={onTogglePreview}
+          className={`${ACTION_CLASS} hover:bg-ink/5 ${isPreview ? 'text-ink' : 'hover:text-ink'}`}
+          title={previewLabel}
+          aria-label={previewLabel}
+          aria-pressed={isPreview}
+        >
+          {isPreview ? <EyeOff size={14} /> : <Eye size={14} />}
+        </button>
+      ),
+    });
+  }
+  if (!byteViewer) {
+    clusters.push({
+      id: 'find',
+      actions: [{ label: findLabel, icon: Search, onSelect: onToggleFind, active: findOpen }],
+      children: (
+        <button
+          type="button"
+          onClick={onToggleFind}
+          className={`${ACTION_CLASS} hover:bg-ink/5 ${findOpen ? 'text-ink' : 'hover:text-ink'}`}
+          title={`${findLabel} (Ctrl+F)`}
+          aria-label={findLabel}
+          aria-pressed={findOpen}
+        >
+          <Search size={14} />
+        </button>
+      ),
+    });
+    clusters.push({
+      id: 'wrap',
+      actions: [{ label: wordWrapLabel, icon: WrapText, onSelect: onToggleWordWrap, active: wordWrap }],
+      children: (
+        <button
+          type="button"
+          onClick={onToggleWordWrap}
+          className={`${ACTION_CLASS} hover:bg-ink/5 ${wordWrap ? 'text-ink' : 'hover:text-ink'}`}
+          title={wordWrapLabel}
+          aria-label={wordWrapLabel}
+          aria-pressed={wordWrap}
+        >
+          <WrapText size={14} />
+        </button>
+      ),
+    });
+    clusters.push({
+      id: 'zoom',
+      actions: [
+        { label: 'Decrease font size', icon: ZoomOut, onSelect: onZoomOut },
+        { label: 'Increase font size', icon: ZoomIn, onSelect: onZoomIn },
+      ],
+      children: (
+        <>
           <button
             type="button"
-            onClick={onCopy}
+            onClick={onZoomOut}
             className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
-            title={copied ? 'Copied' : byteViewer ? 'Copy image' : 'Copy content'}
-            aria-label={copied ? 'Copied' : byteViewer ? 'Copy image' : 'Copy content'}
+            title="Decrease font size"
+            aria-label="Decrease font size"
           >
-            {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
+            <ZoomOut size={14} />
           </button>
           <button
             type="button"
-            onClick={onDownload}
+            onClick={onZoomIn}
             className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
-            title="Download file"
-            aria-label="Download file"
+            title="Increase font size"
+            aria-label="Increase font size"
           >
-            <Download size={14} />
+            <ZoomIn size={14} />
           </button>
-        </div>
+        </>
+      ),
+    });
+  }
 
-        <button
-          type="button"
-          onClick={onToggleMaximize}
-          className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink ${isMaximized ? 'text-ink' : ''}`}
-          title={isMaximized ? 'Exit full screen' : 'Full screen'}
-          aria-label={isMaximized ? 'Exit full screen' : 'Full screen'}
-          aria-pressed={isMaximized}
-        >
-          {isMaximized ? <Minimize size={14} /> : <Maximize size={14} />}
-        </button>
+  clusters.push({
+    id: 'copy',
+    actions: [
+      { label: copyLabel, icon: Copy, onSelect: onCopy },
+      { label: 'Download file', icon: Download, onSelect: onDownload },
+    ],
+    children: (
+      <>
+        {copyButton}
+        {downloadButton}
+      </>
+    ),
+  });
+
+  // The width modes and full SCREEN are the controls this panel exists for, so
+  // they are the LAST clusters — the tail is what the menu takes. Three controls
+  // about one axis, three different glyphs: compact collapses the chat (a
+  // crossed-out message), full collapses the chat and the sidebar (a closing
+  // panel edge), and full screen covers the right panel too (a maximise frame).
+  clusters.push({
+    id: 'view-modes',
+    // The two width modes are why this toolbar grew these buttons, and a mode
+    // reachable only from a menu is a mode half the readers never find.
+    pinned: true,
+    actions: viewModeActions,
+    children: <EditorViewButtons size={14} />,
+  });
+  clusters.push({
+    id: 'maximize',
+    pinned: true,
+    actions: [{ label: maximizeLabel, icon: isMaximized ? Minimize : Maximize, onSelect: onToggleMaximize, active: isMaximized }],
+    children: maximizeButton,
+  });
+
+  return (
+    // `@container`: the path below hides on a NARROW PANEL, not a narrow
+    // viewport. At the editor panel's 320px floor the path would be a truncated
+    // fragment of a filename — not information, and the tab above already
+    // carries it.
+    <div className="@container flex items-center justify-between gap-2 px-3 py-2 border-b border-ink/10 bg-paper flex-shrink-0">
+      {/* Left status */}
+      <div className="hidden @[420px]:flex items-center space-x-2 text-xs font-mono text-ink/40 min-w-0">
+        <span className="truncate max-w-[300px]" title={path}>{path}</span>
       </div>
+
+      {/* One row, never two: what does not fit moves into `⋯` (see
+          `ToolbarRow`). A wrapped toolbar pushed the document down by its own
+          height and read as a second toolbar. */}
+      <ToolbarRow clusters={clusters} className="text-ink/40 ml-auto" />
     </div>
   );
 }

package/src/client/components/workspace/editor/index.tsx

@@ -5,7 +5,7 @@ import { EditorTabs } from '@/client/components/workspace/editor/Tabs';
 import { EDITOR_KEY_BINDINGS, isFindBarCommand, type EditorCommand } from '@/shared/lib/code/editor/keymap';
 import { EDITOR_DEFAULT_FONT_SIZE } from '@/shared/lib/code/editor/typography';
 import { useEditorFontStack } from '@/client/hooks/editor/font';
-import type { TextRange } from '@/shared/lib/code/editor/commands';
+import { useEditorTheme } from '@/client/hooks/editor/theme';
 import type { CodeSurfaceHandle } from '@/client/components/common/code-surface';
 import { resolveBinding } from '@/shared/lib/ui/key-binding';
 import { useActiveEditorPanel } from '@/client/components/workspace/plugin-panel/resolve';
@@ -62,12 +62,11 @@ export function Editor({
   const [zoomLevel, setZoomLevel] = useSessionState<number>('editor.zoomLevel', EDITOR_DEFAULT_FONT_SIZE);
   const [isMaximized, setIsMaximized] = useState(false);
   const [wordWrap, setWordWrap] = useSessionState<boolean>('editor.wordWrap', true);
-  /** Extra ⌘D ranges; the surface paints them and the editor edits them by replication. */
-  const [occurrences, setOccurrences] = useState<readonly TextRange[]>([]);
   const [paletteOpen, setPaletteOpen] = useState(false);
   const { sessionId } = useSessionStateContext();
   const surfaceRef = useRef<CodeSurfaceHandle | null>(null);
   const editorFontFamily = useEditorFontStack();
+  const editorTheme = useEditorTheme();
 
   // A deleted file keeps its tab (its buffer is still on screen), but the tab
   // strip must say so. Only a plain FILE tab is probed: a diff tab's path names
@@ -216,10 +215,10 @@ export function Editor({
    * Editor shortcuts, on the CAPTURE phase of the panel.
    *
    * Capture is what makes them work while focus is inside the document: the
-   * `<textarea>` has its own handler (Tab, undo, Escape-to-blur) and would
-   * otherwise see these first. Only the commands the PANEL owns are consumed
-   * here — the editor's own keymap runs in the textarea, where it has the
-   * buffer and the caret in hand.
+   * contenteditable has CodeMirror's own handlers (the generated keymap, and
+   * `defaultKeymap` behind it) and would otherwise see these first. Only the
+   * commands the PANEL owns are consumed here — the editor's own keymap runs in
+   * the document, where it has the buffer and the caret in hand.
    *
    * The panel is the scope, not the window: another panel's text field keeps
    * its own ⌘F, and the composer is untouched.
@@ -312,12 +311,11 @@ export function Editor({
         setIsMaximized={setIsMaximized}
         zoomLevel={zoomLevel}
         setZoomLevel={setZoomLevel}
-        occurrences={occurrences}
-        setOccurrences={setOccurrences}
         paletteOpen={paletteOpen}
         setPaletteOpen={setPaletteOpen}
         runCommand={runCommand}
         editorFontFamily={editorFontFamily}
+        editorTheme={editorTheme}
         togglePreview={togglePreview}
         revealActive={Boolean(searchReveal)}
         missing={activeFileMissing}

package/src/client/components/workspace/file-explorer/OutlineSection.test.tsx

@@ -32,6 +32,7 @@ import { SessionStateProvider } from '@/client/components/common/session-state-p
 import { forgetSession } from '@/shared/lib/workspace/session-state/store';
 import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
 import { publishEditorDocument, resetEditorDocument, type EditorDocument } from '@/client/lib/editor-document';
+import { MAX_OUTLINE_ROWS } from '@/shared/lib/code/outline/rows';
 import { getLineReveal, setLineReveal } from '@/client/lib/line-reveal';
 
 const SESSION = 'new-outline-section';
@@ -215,4 +216,21 @@ describe('OutlineSection', () => {
     expect(reveal().getAttribute('data-expanded')).toBe('true');
     expect(toggle().getAttribute('aria-expanded')).toBe('true');
   });
+
+  // The cap is what keeps a large file's outline from becoming a DOM: 63 618
+  // declarations mounted 446 308 nodes and charged 953 ms to every keystroke
+  // (measured), where the editor's own cost is 34 ms.
+  test('a large outline renders only the first rows, and says how many it is not showing', async () => {
+    owner = {};
+    const many = Array.from({ length: MAX_OUTLINE_ROWS + 200 }, (_, i) => `export function fn${i}() {}`).join('\n');
+    publishEditorDocument(owner, { ...READY, path: 'src/many.ts', content: many });
+    await mount();
+    await expand();
+
+    expect(rowLabels()).toHaveLength(MAX_OUTLINE_ROWS);
+    // The count badge shows the window against the total, so the number on the
+    // toggle cannot be read as "this file has 500 symbols".
+    expect(toggle().textContent).toContain(`${MAX_OUTLINE_ROWS}/700`);
+    expect(container.textContent).toContain('Showing the first 500 of 700 symbols.');
+  });
 });

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

@@ -35,6 +35,7 @@ import { setLineReveal } from '@/client/lib/line-reveal';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
 import { useOutlineView } from '@/client/hooks/editor/use-outline-view';
 import type { OutlineSymbol } from '@/shared/lib/code/outline/types';
+import { outlineTruncatedNotice } from '@/shared/lib/code/outline/rows';
 
 export function OutlineSection() {
   const [expanded, setExpanded] = useSessionState<boolean>('files.outlineExpanded', false);
@@ -44,11 +45,12 @@ export function OutlineSection() {
   // Recomputed from the LIVE buffer, so an edit moves the rows with it. The
   // scan is a depth-aware line walk (see `outline/extract.ts`): measured at
   // 0.1–2.2 ms on this repository's largest sources.
-  const { symbols, notice } = useOutlineView({
+  const { symbols, total, truncated, notice } = useOutlineView({
     content: current.content,
     language: current.language,
     state: current.state,
     note: current.note,
+    path: current.path,
   });
 
   // A diff tab HIDES the section rather than explaining that it has none. The
@@ -91,9 +93,9 @@ export function OutlineSection() {
           <span className="w-3 text-center font-mono" aria-hidden="true">{expanded ? '▾' : '▸'}</span>
           <ListTree size={12} />
           <span>Outline</span>
-          {symbols.length > 0 && (
+          {total > 0 && (
             <span className="font-normal ml-1 border border-ink/20 rounded-full px-1.5 text-[9px] text-ink/50">
-              {symbols.length}
+              {truncated ? `${symbols.length}/${total.toLocaleString()}` : total}
             </span>
           )}
         </button>
@@ -125,6 +127,11 @@ export function OutlineSection() {
                     <span className="flex-shrink-0 font-mono text-[9px] text-ink/35">{symbol.line}</span>
                   </button>
                 ))}
+                {truncated && (
+                  <div className="px-1 py-1 text-[10px] italic text-ink/40">
+                    {outlineTruncatedNotice(total)}
+                  </div>
+                )}
               </div>
             )}
           </div>

package/src/client/components/workspace/search-panel/Body.tsx

@@ -6,7 +6,7 @@ import { SearchResults } from '@/client/components/workspace/search-panel/Result
 import { setSearchReveal } from '@/client/lib/search-reveal';
 import { groupSearchResults, MAX_SEARCH_RESULTS } from '@/shared/lib/fs/search-list';
 import type { SearchResultItem } from '@/shared/types/fs';
-import type { FindOptions } from '@/shared/lib/code/editor/find';
+import type { FindOptions } from '@/shared/lib/code/editor/find-scan';
 
 interface SearchPanelBodyProps {
   className: string;

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

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The New worktree dialog, rendered.
+ *
+ * Three rules here are the ones a reader would otherwise discover in a browser
+ * and nowhere else:
+ *
+ *  - the generated branch is in the FIRST paint (before any effect flushes),
+ *    because the window between paint and the effect is exactly when a user
+ *    types — measured: a field filled with `main` was replaced by the generated
+ *    name and the dialog created `wt/calm-iguana` instead of reporting that
+ *    `main` is taken;
+ *  - the folder follows the branch, so it is never named after a previous one;
+ *  - a closed dialog renders nothing at all, so no field is focusable while it
+ *    is shut.
+ */
+
+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 { NewWorktreeModal } from '@/client/components/workspace/worktree-modal/index';
+
+const nativeFetch = Bun.fetch;
+const mounted: HTMLElement[] = [];
+
+beforeAll(() => {
+  installDomGlobals(new Window({ url: 'http://localhost' }));
+});
+
+afterEach(() => {
+  for (const host of mounted.splice(0)) {
+    render(null, host);
+    host.remove();
+  }
+  (globalThis as unknown as Record<string, unknown>).fetch = nativeFetch;
+});
+
+afterAll(() => {
+  restoreDomGlobals();
+});
+
+/**
+ * Mount, with the first render FLUSHED. Preact batches a state update into a
+ * microtask, so a `useEffect` that seeds a field has not run when `render`
+ * returns — reading the inputs then reads empty ones, which is a property of the
+ * test harness and not of the dialog.
+ */
+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('NewWorktreeModal', () => {
+  test('opens on a generated branch, with the folder following it', async () => {
+    const host = await mount(
+      h(NewWorktreeModal, { isOpen: true, onClose: () => {}, root: '/repo', folderId: 1, folderName: 'kabmo', onCreated: () => {} }),
+    );
+
+    const inputs = [...host.querySelectorAll('input')] as HTMLInputElement[];
+    const branch = inputs[0]?.value ?? '';
+    const folderName = inputs[2]?.value ?? '';
+    expect(branch).toMatch(/^wt\/[a-z]+-[a-z]+$/);
+    // The folder is the branch without our namespace, so it is never `wt-x`.
+    expect(folderName).toBe(branch.replace(/^wt\//, ''));
+    expect(folderName.startsWith('wt-')).toBe(false);
+  });
+
+  test('the generated branch is in the FIRST paint, before any effect flushes', () => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    // Deliberately NOT `mount`: no `act`, so no effect has run. A field seeded
+    // by an effect reads empty here, and the browser's own window between paint
+    // and the effect flush is exactly when a user types into it.
+    render(
+      h(NewWorktreeModal, { isOpen: true, onClose: () => {}, root: '/repo', folderId: 1, folderName: 'kabmo', onCreated: () => {} }),
+      host,
+    );
+    mounted.push(host);
+
+    const inputs = [...host.querySelectorAll('input')] as HTMLInputElement[];
+    const branch = inputs[0]?.value ?? '';
+    expect(branch).toMatch(/^wt\/[a-z]+-[a-z]+$/);
+    // One generated name for both fields: deriving the folder from a SECOND
+    // call would show a folder the branch does not have.
+    expect(inputs[2]?.value ?? '').toBe(branch.replace(/^wt\//, ''));
+  });
+
+  test('states what happens to uncommitted changes, and on which project', async () => {
+    const host = await mount(
+      h(NewWorktreeModal, { isOpen: true, onClose: () => {}, root: '/repo', folderId: 1, folderName: 'kabmo', onCreated: () => {} }),
+    );
+    const text = textOf(host);
+    expect(text).toContain('Uncommitted changes stay in');
+    expect(text).toContain('kabmo');
+  });
+
+  test('renders nothing while closed', async () => {
+    const host = await mount(
+      h(NewWorktreeModal, { isOpen: false, onClose: () => {}, root: '/repo', folderId: 1, onCreated: () => {} }),
+    );
+    expect(host.textContent).toBe('');
+  });
+});