@kabmo-labs/kabmo 0.8.0 → 0.9.0

package/src/client/components/common/code-editor/index.tsx

@@ -1,314 +0,0 @@
-import { useImperativeHandle, useLayoutEffect, useRef, useState } from 'preact/hooks';
-import type { CSSProperties, Ref, TargetedKeyboardEvent } from 'preact';
-
-import { continuesTyping, mergeTyping, pushRecord } from '@/shared/lib/code/editor/history';
-import { handleEditorKeydown, runEditorCommand, type EditorKeydownDeps } from '@/client/components/common/code-editor/handler';
-import { layerStyle, layerStyles } from '@/shared/lib/code/editor/layers';
-import { CODE_EDITOR_RESET_CSS } from '@/shared/lib/code/editor/reset-css';
-import type { EditorCommand } from '@/shared/lib/code/editor/keymap';
-import { useOccurrences } from '@/client/hooks/editor/use-occurrences';
-import { useEditorHistory } from '@/client/hooks/editor/use-editor-history';
-import type { TextRange } from '@/shared/lib/code/editor/commands';
-import type { CodeWindow, LineWindow } from '@/shared/lib/code/lazy-window';
-
-/**
- * Preact hand-roll of the textarea-over-<pre> highlighting editor
- * (the pattern react-simple-code-editor popularized), trimmed to the
- * feature set this app actually uses.
- *
- * How it works: a transparent <textarea> sits on top of a syntax-highlighted
- * <pre>. Typing, selecting and copying hit the native textarea; the <pre>
- * below just mirrors the text with Shiki markup.
- *
- * For a long document only a window of lines is mirrored (`virtual`): the
- * textarea still holds every line, so editing, selection and copy are
- * untouched, while the `<pre>` carries just the visible ones and reserves the
- * rest as padding — the alignment that keeps the caret over its own row.
- */
-
-export interface CodeEditorHandle {
-  /** The `<textarea>` that owns the document — measurements and focus anchor on it. */
-  textarea(): HTMLTextAreaElement | null;
-  /** Current selection offsets, or null before the field is mounted. */
-  getSelection(): { start: number; end: number } | null;
-  /** Select a range; `focus` also moves the keyboard focus into the editor. */
-  select(start: number, end: number, focus?: boolean): void;
-  /**
-   * Replace the whole buffer as ONE undoable edit and leave the caret at
-   * `caretStart`/`caretEnd`, WITHOUT moving focus. Used by the find widget's
-   * replace, which must not look like a burst of typing to the history (⌘Z has
-   * to undo it in one step) and must not steal focus from its own field.
-   */
-  applyDocument(value: string, caretStart: number, caretEnd: number): void;
-  /** Every range a ⌘D workflow has selected, primary included — the surface paints them. */
-  occurrences(): readonly TextRange[];
-  /**
-   * Run an editor command by name — the palette's path into the editor. It goes
-   * through the same dispatcher the keyboard uses, so a command cannot work
-   * from a chord and do nothing from the palette.
-   */
-  run(command: EditorCommand): void;
-}
-
-export interface CodeEditorProps {
-  value: string;
-  onValueChange: (value: string) => void;
-  /** Return the Shiki-highlighted HTML for `code`, limited to `range` when the surface is windowed. */
-  highlight: (code: string, range: LineWindow | null) => string;
-  padding?: number;
-  /** Class applied to the inner <pre> holding the highlighted code. */
-  preClassName?: string;
-  /** Class applied to the transparent <textarea> on top. */
-  textareaClassName?: string;
-  /** Layout styles for the whole editor; typography must match both layers. */
-  style?: CSSProperties;
-  /** The `<pre>` layer that actually wraps the code — gutter alignment measures it. */
-  preRef?: Ref<HTMLPreElement>;
-  className?: string;
-  placeholder?: string;
-  readOnly?: boolean;
-  autoFocus?: boolean;
-  /** Renders only this window of lines, with the rest reserved as space. Omit to mirror the whole value. */
-  virtual?: CodeWindow | null;
-  /** Imperative surface for the find widget (selection, reveal, one-shot replace). */
-  handleRef?: Ref<CodeEditorHandle>;
-  /**
-   * Called when the extra selection ranges change, so the surface can paint
-   * them. The textarea holds only the primary selection; everything ⌘D adds
-   * lives here.
-   */
-  onOccurrencesChange?: (ranges: readonly TextRange[]) => void;
-  /** Commands this editor does not own (find bar chords, word wrap, save). */
-  onCommand?: (command: EditorCommand) => void;
-  /**
-   * The extra ⌘D ranges, held by the CALLER. The editor keeps its own copy in a
-   * ref for synchronous reads; this prop is what makes the surface a controlled
-   * view of them, so the paint and the editing model cannot disagree.
-   */
-  occurrences?: readonly TextRange[];
-  /** Shiki language id, for the comment syntax. */
-  language?: string;
-}
-
-const BASE_TEXTAREA_CLASS = 'code-editor-native-textarea';
-
-export function CodeEditor({
-  value,
-  onValueChange,
-  highlight,
-  padding = 0,
-  preClassName,
-  textareaClassName,
-  style,
-  preRef,
-  className,
-  placeholder,
-  readOnly,
-  autoFocus,
-  virtual,
-  handleRef,
-  occurrences,
-  onOccurrencesChange,
-  onCommand,
-  language = 'javascript',
-}: CodeEditorProps) {
-  const inputRef = useRef<HTMLTextAreaElement | null>(null);
-  const [captureTab, setCaptureTab] = useState(true);
-  const multi = useOccurrences({
-    controlled: occurrences,
-    onChange: (ranges) => onOccurrencesChange?.(ranges),
-  });
-
-  // A selection asked for before the field exists (the find widget opens and
-  // the panel re-renders in the same tick) is applied as soon as it mounts.
-  const pendingSelectionRef = useRef<{ start: number; end: number; focus: boolean } | null>(null);
-
-  /**
-   * The buffer and selection as of the last event that could precede an edit.
-   *
-   * `handleChange` has to know which range the BROWSER replaced, and the `input`
-   * event reports the state AFTER the edit — useless for locating it. Keydown,
-   * select and the component's own writes all land before the edit, so
-   * recording there is what makes the diff in `handleChange` unambiguous.
-   *
-   * The buffer that goes with it comes from the history hook (`undoStack.buffer`),
-   * NOT from the `value` prop: the prop lags a keystroke — it only moves once
-   * the panel's state has re-rendered, and the next keystroke can arrive first
-   * (measured: typing at several carets with a 30 ms gap). A stale `before`
-   * turns the diff into a replacement of the whole word, which is what made a
-   * five-letter burst take five undos.
-   */
-  const lastSelectionRef = useRef<TextRange>({ start: 0, end: 0 });
-
-  const setSelection = (start: number, end: number, focus: boolean) => {
-    lastSelectionRef.current = { start, end };
-    const input = inputRef.current;
-    if (!input) {
-      pendingSelectionRef.current = { start, end, focus };
-      return;
-    }
-    // Focus BEFORE the range: a textarea that is not the active element still
-    // stores `selectionStart`/`selectionEnd`, but paints neither a caret nor a
-    // selection band — which is why an outline jump scrolled and then looked
-    // like it had selected nothing (measured: the range was correct and the
-    // field was not focused). `preventScroll` is load-bearing: the editor's
-    // `<textarea>` spans the whole document (only the highlighted layer is
-    // windowed), so a plain `focus()` makes the browser scroll the container to
-    // the caret's position at the END of the buffer region it can see — which
-    // clamped the scroller to its maximum and left a search jump showing the
-    // file's tail (measured: a hit on line 800 of 900 landed at the bottom with
-    // its own highlight unpainted). The surface's own `revealOffset` is the
-    // only thing that scrolls.
-    if (focus) input.focus({ preventScroll: true });
-    input.selectionStart = start;
-    input.selectionEnd = end;
-  };
-
-  useImperativeHandle(
-    handleRef ?? null,
-    () => ({
-      textarea: () => inputRef.current,
-      getSelection: () => {
-        const input = inputRef.current;
-        return input ? { start: input.selectionStart, end: input.selectionEnd } : null;
-      },
-      select: setSelection,
-      applyDocument: (next, caretStart, caretEnd) => {
-        undoStack.commitEdit({ value: next, selectionStart: caretStart, selectionEnd: caretEnd });
-        // Focus is deliberately left where it was: the find widget's Replace
-        // button is about to be pressed again, and pulling focus into the
-        // document would eat the next keystroke.
-        setSelection(caretStart, caretEnd, false);
-      },
-      occurrences: () => multi.ranges,
-      run: (command) => {
-        const input = inputRef.current;
-        if (input) runEditorCommand(command, keydownDeps(input));
-      },
-    }),
-    // `applyEdits` closes over `onValueChange` and the history ref only, both of
-    // which are stable for the component's life.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onValueChange],
-  );
-
-  // Runs on every render: a selection asked for while the field was not yet
-  // mounted (the find widget opens in the same tick as the panel's first
-  // render) has to land as soon as the textarea exists.
-  useLayoutEffect(() => {
-    const pending = pendingSelectionRef.current;
-    if (!pending || !inputRef.current) return;
-    pendingSelectionRef.current = null;
-    setSelection(pending.start, pending.end, pending.focus);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  });
-
-  const undoStack = useEditorHistory({ value, inputRef, onValueChange });
-
-  /** Everything the dispatcher needs, built once per call from the live refs. */
-  const keydownDeps = (input: HTMLTextAreaElement): EditorKeydownDeps => ({
-    input,
-    language,
-    captureTab,
-    toggleCaptureTab: () => setCaptureTab((prev) => !prev),
-    history: undoStack,
-    multi,
-    select: (start, end) => setSelection(start, end, true),
-    delegate: (command) => {
-      onCommand?.(command);
-    },
-  });
-
-  const handleKeyDown = (e: TargetedKeyboardEvent<HTMLTextAreaElement>) => {
-    // The selection as of the last event that could precede an edit:
-    // `handleChange` needs to know which range the browser replaced, and the
-    // `input` event reports the selection AFTER the edit.
-    lastSelectionRef.current = { start: e.currentTarget.selectionStart, end: e.currentTarget.selectionEnd };
-    handleEditorKeydown(e, keydownDeps(e.currentTarget));
-  };
-
-  const handleChange = (e: Event) => {
-    const input = e.target as HTMLTextAreaElement;
-    const { value: next, selectionStart, selectionEnd } = input;
-    const history = undoStack.history;
-    const timestamp = Date.now();
-    // With extra ranges live, the browser's edit becomes a template: it is
-    // diffed out of the OLD buffer and replayed at every other range in one
-    // pass, so a keystroke, a paste and an IME composition all need no special
-    // case. The result is committed as one history entry, and the ranges
-    // collapse to carets so a second keystroke continues at all of them.
-    const replicated = multi.replicate(undoStack.buffer, next, lastSelectionRef.current);
-    if (replicated) {
-      undoStack.markApplied(replicated.value);
-      input.value = replicated.value;
-      input.selectionStart = replicated.caret;
-      input.selectionEnd = replicated.caret;
-      lastSelectionRef.current = { start: replicated.caret, end: replicated.caret };
-      multi.set(replicated.rest);
-      // The burst merge applies here too: without it each character of a word
-      // typed at several carets became its own undo entry, so ⌘Z peeled off one
-      // letter instead of the word — the exact behaviour the single-caret path
-      // had already been fixed for.
-      if (continuesTyping(history.stack[history.offset], replicated.value, replicated.caret, timestamp)) {
-        mergeTyping(history, replicated.value, replicated.caret, replicated.caret, timestamp);
-      } else {
-        pushRecord(history, { value: replicated.value, selectionStart: replicated.caret, selectionEnd: replicated.caret, timestamp });
-      }
-      onValueChange(replicated.value);
-      return;
-    }
-
-    undoStack.markApplied(next);
-    // Merge typing bursts into one word-level undo entry.
-    if (continuesTyping(history.stack[history.offset], next, selectionStart, timestamp)) {
-      mergeTyping(history, next, selectionStart, selectionEnd, timestamp);
-      onValueChange(next);
-      return;
-    }
-    pushRecord(history, { value: next, selectionStart, selectionEnd, timestamp });
-    onValueChange(next);
-  };
-
-  const { pre: preStyle, textarea: textareaStyle } = layerStyles(padding, virtual);
-  const layer = layerStyle();
-
-  const highlighted = highlight(value, virtual ?? null);
-
-  return (
-    <div className={className} style={{ position: 'relative', textAlign: 'left', boxSizing: 'border-box', padding: 0, overflow: 'hidden', ...style }}>
-      <pre
-        ref={preRef}
-        className={preClassName}
-        aria-hidden="true"
-        style={{ ...layer, ...preStyle, position: 'relative', pointerEvents: 'none' }}
-        dangerouslySetInnerHTML={{ __html: highlighted + (virtual && !virtual.breakAtEnd ? '' : '<br />') }}
-      />
-      <textarea
-        ref={inputRef}
-        className={`${BASE_TEXTAREA_CLASS}${textareaClassName ? ` ${textareaClassName}` : ''}`}
-        style={{ ...layer, ...textareaStyle, position: 'absolute', top: 0, left: 0, height: '100%', width: '100%', resize: 'none', color: 'inherit', overflow: 'hidden', WebkitTextFillColor: 'transparent' }}
-        value={value}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        onSelect={() => {
-          const input = inputRef.current;
-          if (input) lastSelectionRef.current = { start: input.selectionStart, end: input.selectionEnd };
-        }}
-        onBlur={() => multi.clear()}
-        placeholder={placeholder}
-        readOnly={readOnly}
-        autoFocus={autoFocus}
-        autoCapitalize="off"
-        autoComplete="off"
-        autoCorrect="off"
-        spellcheck={false}
-        data-gramm={false}
-      />
-      {/* One <style> per editor instance; the rule is a constant so the
-          duplicate elements are the same three lines the browser dedupes. */}
-      <style dangerouslySetInnerHTML={{ __html: CODE_EDITOR_RESET_CSS }} />
-    </div>
-  );
-}
-
-export default CodeEditor;

package/src/client/components/common/code-surface/measure.ts

@@ -1,148 +0,0 @@
-/**
- * Wrapped-row measurement for the line-number gutter.
- *
- * The gutter is a column of one-row line numbers, which is only right while a
- * line fits on one row. With word wrap on, the editor lays a long line out over
- * several rows and every number after it would sit above its own line. How many
- * rows a line takes is a layout fact — font metrics, break opportunities, the
- * width the editor actually got — so it is measured rather than estimated: the
- * same lines are laid out once in a hidden mirror that copies the editor's
- * typography, and each line's height is read back.
- *
- * Measuring every line on every keystroke is linear in the document, which no
- * long file can afford, so heights are cached per line *text*: an edit re-reads
- * the one line it touched, and a document whose lines all fit on one row is
- * never mirrored at all.
- */
-
-/**
- * The mirror has to reproduce the editor's line breaking exactly, so every
- * property that can move a break is copied from the live editor's computed
- * style instead of being restated (a second copy of the font stack would drift).
- */
-const MIRRORED_PROPERTIES = [
-  'direction',
-  'fontFamily',
-  'fontFeatureSettings',
-  'fontKerning',
-  'fontSize',
-  'fontStyle',
-  'fontVariantLigatures',
-  'fontWeight',
-  'letterSpacing',
-  'overflowWrap',
-  'tabSize',
-  'textRendering',
-  'textTransform',
-  'whiteSpace',
-  'wordBreak',
-  'wordSpacing',
-] as const;
-
-/**
- * Newest-first ceiling on the height cache. A long editing session mints one
- * entry per keystroke, so the oldest entries are dropped once it is reached;
- * whatever leaves the cache is simply measured again on the next pass.
- */
-const HEIGHT_CACHE_LIMIT = 100_000;
-
-export interface WrappedLines {
-  /** Height in px of a single visual row. */
-  rowHeight: number;
-  /** Height in px each line of the source occupies once wrapped. */
-  heights: number[];
-}
-
-let mirrorHost: HTMLDivElement | null = null;
-let mirrorLines: HTMLDivElement[] = [];
-/** The column the cached heights were measured in; a new one re-wraps every line. */
-let mirrorSignature = '';
-const heightByLine = new Map<string, number>();
-/** Line indexes awaiting a mirror read this pass; reused to keep the pass allocation-free. */
-const pendingLines: number[] = [];
-
-/** Off-screen mirror, reused across measurements (one per page). */
-function getMirrorHost(): HTMLDivElement {
-  if (!mirrorHost || !mirrorHost.isConnected) {
-    mirrorHost = document.createElement('div');
-    mirrorHost.setAttribute('aria-hidden', 'true');
-    mirrorHost.style.cssText =
-      'position:fixed;top:0;left:-100000px;visibility:hidden;pointer-events:none;margin:0;border:0;padding:0;box-sizing:border-box;';
-    document.body.appendChild(mirrorHost);
-    mirrorLines = [];
-  }
-  return mirrorHost;
-}
-
-/** Height in px of `source`'s line box, or null while it cannot be measured (SSR, `line-height: normal`). */
-export function measureRowHeight(source: HTMLPreElement): number | null {
-  if (typeof document === 'undefined' || !source.isConnected) return null;
-  const rowHeight = Number.parseFloat(getComputedStyle(source).lineHeight);
-  return Number.isFinite(rowHeight) && rowHeight > 0 ? rowHeight : null;
-}
-
-/**
- * Height each line of `value` occupies in `source`'s wrap layout, or null when
- * the layout is not measurable yet (SSR, zero width, unresolved line-height) —
- * callers then fall back to one row per line.
- */
-export function measureWrappedLines(source: HTMLPreElement, value: string): WrappedLines | null {
-  const rowHeight = measureRowHeight(source);
-  if (rowHeight === null) return null;
-  const computed = getComputedStyle(source);
-  // The editor's text column: its padding is the gutter's offset, not text area.
-  const width =
-    source.clientWidth -
-    Number.parseFloat(computed.paddingLeft || '0') -
-    Number.parseFloat(computed.paddingRight || '0');
-  if (width <= 0) return null;
-
-  const host = getMirrorHost();
-  for (const property of MIRRORED_PROPERTIES) host.style[property] = computed[property];
-  host.style.lineHeight = `${rowHeight}px`;
-  host.style.width = `${width}px`;
-
-  const signature = `${width}|${rowHeight}|${MIRRORED_PROPERTIES.map((property) => computed[property]).join('|')}`;
-  if (signature !== mirrorSignature) {
-    mirrorSignature = signature;
-    heightByLine.clear();
-  }
-
-  const lines = value.split('\n');
-  const heights = new Array<number>(lines.length);
-  let pending = 0;
-  for (let i = 0; i < lines.length; i++) {
-    const cached = heightByLine.get(lines[i]);
-    if (cached === undefined) pendingLines[pending++] = i;
-    else heights[i] = cached;
-  }
-
-  if (pending > 0) {
-    while (mirrorLines.length < pending) {
-      const line = document.createElement('div');
-      host.appendChild(line);
-      mirrorLines.push(line);
-    }
-    // Write the whole batch first, then read the whole layout: interleaving the
-    // two would force a re-layout per line.
-    for (let k = 0; k < pending; k++) mirrorLines[k].textContent = lines[pendingLines[k]];
-    for (let k = 0; k < pending; k++) {
-      const index = pendingLines[k];
-      const height = mirrorLines[k].getBoundingClientRect().height;
-      // An empty line has no line box at all, and sub-pixel wrapping would
-      // otherwise leave the gutter fractions of a row out of step.
-      const rows = height > rowHeight ? Math.round(height / rowHeight) * rowHeight : rowHeight;
-      heights[index] = rows;
-      heightByLine.set(lines[index], rows);
-    }
-    if (heightByLine.size > HEIGHT_CACHE_LIMIT) {
-      let drop = heightByLine.size - HEIGHT_CACHE_LIMIT / 2;
-      for (const key of heightByLine.keys()) {
-        if (drop-- <= 0) break;
-        heightByLine.delete(key);
-      }
-    }
-  }
-
-  return { rowHeight, heights };
-}

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

@@ -1,227 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * The composer's target picker and the New Worktree dialog, rendered.
- *
- * Unit-testing markup is usually a test of the test, so these cases are the ones
- * a reader would otherwise discover in a browser and nowhere else:
- *
- *  - the trigger names the WORKTREE when one is picked, because "kabmo" alone
- *    would be equally true of the checkout it is not running in;
- *  - the menu's groups are the three the plan names, and creating is offered
- *    ABOVE the list so a long list cannot hide it;
- *  - the dialog opens on a generated branch with the folder following it, and
- *    the folder keeps following until it is edited (the defect this rule
- *    prevents: a folder named after the previous branch).
- */
-
-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 { TargetPicker, targetLabel } from '@/client/components/workspace/chat-timeline/target-picker/index';
-import { NewWorktreeModal } from '@/client/components/workspace/worktree-modal/index';
-import type { WorkspaceFolderData } from '@/shared/types';
-
-const folder: WorkspaceFolderData = {
-  id: 1,
-  name: 'kabmo',
-  project_path: '/repo',
-  isExpanded: true,
-  hasMore: false,
-  totalSessions: 0,
-  sessions: [],
-};
-
-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 (the dialog's generated branch)
- * 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;
-}
-
-/** The picker reads the worktree list on open; answer it without a server. */
-/** Calls the picker made, so a test can tell "not read" from "read empty". */
-let fetchCalls: string[] = [];
-
-function stubWorktreeList(worktrees: unknown[] = []): void {
-  fetchCalls = [];
-  (globalThis as unknown as Record<string, unknown>).fetch = async (input: RequestInfo | URL) => {
-    fetchCalls.push(String(input));
-    // A plain envelope, not a real `Response`: `Response.json()` resolves on a
-    // stream tick that this harness has no reason to wait for, and the picker
-    // only reads `ok` and `json()`.
-    const payload = { worktrees, base: '/data/worktrees/x', isRepo: true };
-    return { ok: true, json: async () => payload } as unknown as Response;
-  };
-}
-
-/** Collapsed whitespace: the markup carries newlines the reader never sees. */
-function textOf(host: HTMLElement): string {
-  return (host.textContent ?? '').replace(/\s+/g, ' ').trim();
-}
-
-describe('targetLabel', () => {
-  test('the folder alone when the chat runs in the checkout', () => {
-    expect(targetLabel([folder], 1, null)).toBe('kabmo');
-  });
-
-  test('folder · worktree when a worktree is picked', () => {
-    expect(targetLabel([folder], 1, { folderId: 1, worktreePath: '/data/worktrees/abc/cosmic-dolphin' })).toBe(
-      'kabmo · cosmic-dolphin',
-    );
-  });
-
-  test('a Windows worktree path names the worktree, not the whole path', () => {
-    // The label was `split('/').pop()`, which has nothing to cut in a
-    // `\`-separated path: the trigger read `kabmo · C:\Users\…\cosmic-dolphin`
-    // on a Windows runner while every POSIX leg passed.
-    expect(
-      targetLabel([folder], 1, {
-        folderId: 1,
-        worktreePath: 'C:\\Users\\u\\AppData\\Local\\Temp\\kabmo\\worktrees\\abc\\cosmic-dolphin',
-      }),
-    ).toBe('kabmo · cosmic-dolphin');
-  });
-
-  test('an unresolved folder still says what it is waiting for', () => {
-    expect(targetLabel([], null, null)).toBe('Select Workspace Context');
-  });
-});
-
-describe('TargetPicker', () => {
-  test('the menu offers the project root, both create paths, and the worktree list', async () => {
-    stubWorktreeList([
-      { path: '/data/worktrees/x/old-one', branch: 'wt/old-one', detached: false, missing: false, isPrimary: false, dirty: 0, aheadOfStart: 0, startRef: 'HEAD', sessions: 0 },
-    ]);
-    const host = await mount(
-      h(TargetPicker, {
-        folders: [folder],
-        selectedFolderId: 1,
-        setSelectedFolderId: () => {},
-        target: null,
-        setTarget: () => {},
-      }),
-    );
-
-    const trigger = host.querySelector('button');
-    expect(trigger?.textContent).toContain('kabmo');
-    await act(async () => {
-      (trigger as HTMLButtonElement).click();
-    });
-    // The list is read when the menu opens; each empty `act` drains one round of
-    // the fetch's promise chain, the same way the stash section's suite does.
-    for (let round = 0; round < 10; round += 1) await act(async () => {});
-
-    const text = textOf(host);
-    expect(text).toContain('Project root');
-    expect(text).toContain('Quick worktree');
-    expect(text).toContain('New worktree…');
-    expect(text).toContain('Worktrees');
-    // Creating sits above the LIST: a workspace with many worktrees must not
-    // push the action that makes one out of sight. Compared against a listed
-    // branch, because the group heading is also spelled "Worktrees".
-    expect(fetchCalls.length).toBeGreaterThan(0);
-    expect(text).toContain('wt/old-one');
-    expect(text.indexOf('Quick worktree')).toBeLessThan(text.indexOf('wt/old-one'));
-  });
-
-  test('the trigger shows the picked worktree, not just the folder', async () => {
-    const host = await mount(
-      h(TargetPicker, {
-        folders: [folder],
-        selectedFolderId: 1,
-        setSelectedFolderId: () => {},
-        target: { folderId: 1, worktreePath: '/data/worktrees/abc/cosmic-dolphin' },
-        setTarget: () => {},
-      }),
-    );
-    expect(host.querySelector('button')?.textContent).toContain('kabmo · cosmic-dolphin');
-  });
-});
-
-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 — measured: the
-    // branch filled as `main` was replaced by the generated name, and the dialog
-    // created `wt/calm-iguana` instead of reporting that `main` is taken.
-    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('');
-  });
-});