@kabmo-labs/kabmo 0.1.0 → 0.2.0

package/src/client/components/workspace/search-panel/Body.test.ts

@@ -0,0 +1,149 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The search panel's clear (×) controls.
+ *
+ * Two properties matter and neither is visible from the state alone:
+ *
+ * - **The button lives INSIDE its field's box.** A control that empties an
+ *   input belongs to that input; parked beside it, the panel reads as two
+ *   unrelated controls and the × looks like it clears the panel.
+ * - **A cleared field keeps focus.** The reason to clear a query is to type a
+ *   different one, so handing focus back to the browser is half the job.
+ *
+ * The button also only exists while the field holds text — an always-present ×
+ * is a control that can do nothing, and `aria-label` is what a screen reader
+ * announces, so both are asserted.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import type { SearchPanelBody as SearchPanelBodyComponent } from '@/client/components/workspace/search-panel/Body';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+let SearchPanelBody: typeof SearchPanelBodyComponent;
+let h: typeof PreactH;
+let render: typeof PreactRender;
+let act: typeof PreactAct;
+
+let container: HTMLElement;
+let query = '';
+let replaceQuery = '';
+
+function mount() {
+  const noop = () => {};
+  act(() => {
+    render(
+      h(SearchPanelBody, {
+        className: '',
+        query,
+        setQuery: (value: string) => { query = value; rerender(); },
+        replaceQuery,
+        setReplaceQuery: (value: string) => { replaceQuery = value; rerender(); },
+        matchCase: false,
+        setMatchCase: noop,
+        wholeWord: false,
+        setWholeWord: noop,
+        useRegex: false,
+        setUseRegex: noop,
+        includeFiles: '',
+        setIncludeFiles: noop,
+        showIncludeField: false,
+        setShowIncludeField: noop,
+        showMenu: false,
+        setShowMenu: noop,
+        menuRef: { current: null },
+        activeRepo: '.',
+        setActiveRepo: noop,
+        repos: ['.'],
+        reposScanning: false,
+        rescanRepos: noop,
+        results: [],
+        isSearching: false,
+        truncated: false,
+        error: null,
+        handleReplace: noop,
+        replaceBusy: false,
+      }),
+      container,
+    );
+  });
+}
+
+function rerender() {
+  mount();
+}
+
+function button(label: string): HTMLButtonElement | null {
+  return container.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`);
+}
+
+beforeAll(async () => {
+  installDomGlobals(new Window({ url: 'http://localhost' }));
+  ({ SearchPanelBody } = await import('@/client/components/workspace/search-panel/Body'));
+  ({ h, render } = await import('preact'));
+  ({ act } = await import('preact/test-utils'));
+});
+
+afterAll(() => restoreDomGlobals());
+
+afterEach(() => {
+  if (container) render(null, container);
+  container?.remove();
+  query = '';
+  replaceQuery = '';
+});
+
+describe('search panel clear controls', () => {
+  test('no clear button while a field is empty', () => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    mount();
+
+    expect(button('Clear search')).toBeNull();
+    expect(button('Clear replace')).toBeNull();
+  });
+
+  test('the search clear button sits inside the search field and empties it', () => {
+    query = 'kabmo';
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    mount();
+
+    const clear = button('Clear search');
+    expect(clear).not.toBeNull();
+    // Inside the field: the input and the button share a parent box.
+    const input = container.querySelector<HTMLInputElement>('input[placeholder="Search"]');
+    expect(input).not.toBeNull();
+    expect(clear!.parentElement).toBe(input!.parentElement);
+
+    act(() => clear!.click());
+    expect(query).toBe('');
+    expect(button('Clear search')).toBeNull();
+    expect(document.activeElement).toBe(input!);
+  });
+
+  test('the replace clear button sits inside the replace field and empties it', () => {
+    query = 'kabmo';
+    replaceQuery = 'KABMO';
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    mount();
+
+    const clear = button('Clear replace');
+    expect(clear).not.toBeNull();
+    const input = container.querySelector<HTMLInputElement>('input[placeholder="Replace"]');
+    expect(input).not.toBeNull();
+    expect(clear!.parentElement).toBe(input!.parentElement);
+
+    act(() => clear!.click());
+    expect(replaceQuery).toBe('');
+    expect(button('Clear replace')).toBeNull();
+    expect(document.activeElement).toBe(input!);
+  });
+});

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

@@ -1,5 +1,5 @@
-import { useCallback, useMemo } from 'preact/hooks';
-import { CaseSensitive, Check, MoreHorizontal, Regex, ReplaceAll, Search, WholeWord } from 'lucide-preact';
+import { useCallback, useMemo, useRef } from 'preact/hooks';
+import { CaseSensitive, Check, MoreHorizontal, Regex, ReplaceAll, Search, WholeWord, X } from 'lucide-preact';
 import type { RefObject } from 'preact';
 import { GitRepoPicker } from '@/client/components/workspace/repo-picker';
 import { SearchResults } from '@/client/components/workspace/search-panel/Results';
@@ -87,6 +87,24 @@ export function SearchPanelBody({
 }: SearchPanelBodyProps) {
   const groups = useMemo(() => groupSearchResults(results), [results]);
 
+  /**
+   * The clear (×) buttons live INSIDE their field, and focus returns to it
+   * after clearing: the point of the control is to retype the query, so a
+   * cleared field the user has to click again is half the job. The buttons sit
+   * in the field's own box rather than beside it for the same reason — a
+   * control that clears the input belongs to the input.
+   */
+  const queryInputRef = useRef<HTMLInputElement>(null);
+  const replaceInputRef = useRef<HTMLInputElement>(null);
+  const clearQuery = useCallback(() => {
+    setQuery('');
+    queryInputRef.current?.focus();
+  }, [setQuery]);
+  const clearReplace = useCallback(() => {
+    setReplaceQuery('');
+    replaceInputRef.current?.focus();
+  }, [setReplaceQuery]);
+
   // The same flags the search ran with, so the editor's own matcher paints the
   // identical set of occurrences once the file opens.
   const options: FindOptions = useMemo(() => ({ matchCase, wholeWord, isRegex: useRegex }), [matchCase, wholeWord, useRegex]);
@@ -159,12 +177,24 @@ export function SearchPanelBody({
           <div className="flex items-center border border-ink/20 rounded bg-paper focus-within:border-ink/40 focus-within:ring-1 focus-within:ring-ink/10 transition-all">
             <Search size={14} className="ml-2 text-ink/40 flex-shrink-0" />
             <input
+              ref={queryInputRef}
               type="text"
               placeholder="Search"
               value={query}
               onChange={(e) => setQuery(e.currentTarget.value)}
               className="w-full bg-transparent border-none text-xs px-2 py-1.5 focus:outline-none text-ink placeholder-ink/30 min-w-0"
             />
+            {query && (
+              <button
+                type="button"
+                onClick={clearQuery}
+                title="Clear search"
+                aria-label="Clear search"
+                className="p-1 mr-0.5 rounded text-ink/40 hover:text-ink hover:bg-ink/5 flex-shrink-0"
+              >
+                <X size={12} />
+              </button>
+            )}
             <div className="flex items-center space-x-0.5 pr-1 text-ink/40 flex-shrink-0">
               <button
                 onClick={() => setMatchCase(!matchCase)}
@@ -192,13 +222,27 @@ export function SearchPanelBody({
         </div>
 
         <div className="relative flex items-center space-x-1">
-          <input
-            type="text"
-            placeholder="Replace"
-            value={replaceQuery}
-            onChange={(e) => setReplaceQuery(e.currentTarget.value)}
-            className="flex-1 min-w-0 bg-paper border border-ink/20 rounded text-xs px-2 py-1.5 focus:outline-none focus:border-ink/40 focus:ring-1 focus:ring-ink/10 transition-all text-ink placeholder-ink/30"
-          />
+          <div className="flex flex-1 min-w-0 items-center border border-ink/20 rounded bg-paper focus-within:border-ink/40 focus-within:ring-1 focus-within:ring-ink/10 transition-all">
+            <input
+              ref={replaceInputRef}
+              type="text"
+              placeholder="Replace"
+              value={replaceQuery}
+              onChange={(e) => setReplaceQuery(e.currentTarget.value)}
+              className="flex-1 min-w-0 bg-transparent border-none text-xs px-2 py-1.5 focus:outline-none text-ink placeholder-ink/30"
+            />
+            {replaceQuery && (
+              <button
+                type="button"
+                onClick={clearReplace}
+                title="Clear replace"
+                aria-label="Clear replace"
+                className="p-1 mr-0.5 rounded text-ink/40 hover:text-ink hover:bg-ink/5 flex-shrink-0"
+              >
+                <X size={12} />
+              </button>
+            )}
+          </div>
           <button
             onClick={() => handleReplace()}
             disabled={results.length === 0 || replaceBusy}

package/src/client/hooks/chat/timeline/ask-frames-grouped.test.ts

@@ -63,7 +63,7 @@ describe('splitAskFrames with a grouped ask frame', () => {
     expect(split.modalRequest).toBeNull();
   });
 
-  test('an unowned grouped frame stays for the modal', () => {
+  test('an unowned grouped frame becomes an inline orphan, never a modal', () => {
     const stranger: ExtensionUiDialogRequest = {
       ...grouped,
       id: 'frame-2',
@@ -71,6 +71,50 @@ describe('splitAskFrames with a grouped ask frame', () => {
     };
     const split = splitAskFrames([message()], [stranger], true);
     expect(split.framesByTool.get('call-ask')).toBeUndefined();
-    expect(split.modalRequest).toBe(stranger);
+    // The timeline draws it (`OrphanAsks`); the modal has no `ask` body, so a
+    // grouped frame handed to it rendered an empty panel.
+    expect(split.orphanAsks).toEqual([stranger]);
+    expect(split.modalRequest).toBeNull();
+  });
+
+  test('a grouped frame whose questions carry no ids still claims its card', () => {
+    // Measured on 2 of 161 real `ask` calls: omp's schema requires an id, but
+    // a call written by an older build carried none. The id walk then matched
+    // nothing and the frame fell through to the MODAL.
+    const tool = askTool();
+    tool.input = {
+      questions: [
+        { id: '', question: 'Pick colors', options: [{ label: 'red' }], multi: true },
+        { id: '', question: 'Pick a size', options: [{ label: 's' }] },
+      ],
+    };
+    const unkeyed: ExtensionUiDialogRequest = {
+      ...grouped,
+      id: 'frame-3',
+      questions: [
+        { id: '', question: 'Pick colors', options: [{ label: 'red' }], multi: true },
+        { id: '', question: 'Pick a size', options: [{ label: 's' }] },
+      ],
+    };
+    const history = { id: 'm1', role: 'ai', content: '', toolCalls: [tool] } as unknown as ChatMessageData;
+
+    const split = splitAskFrames([history], [unkeyed], true);
+    expect(split.framesByTool.get('call-ask')?.length).toBe(2);
+    expect(split.orphanAsks).toEqual([]);
+    expect(split.modalRequest).toBeNull();
+  });
+
+  test('a grouped frame matches its card by question text when ids differ', () => {
+    const retitled: ExtensionUiDialogRequest = {
+      ...grouped,
+      id: 'frame-4',
+      questions: [
+        { id: 'omp-a', question: 'Pick colors', options: [{ label: 'red' }], multi: true },
+        { id: 'omp-b', question: 'Pick a size', options: [{ label: 's' }] },
+      ],
+    };
+    const split = splitAskFrames([message()], [retitled], true);
+    expect(split.framesByTool.get('call-ask')?.length).toBe(2);
+    expect(split.orphanAsks).toEqual([]);
   });
 });

package/src/client/hooks/chat/timeline/ask-frames.test.ts

@@ -65,7 +65,7 @@ describe('splitAskFrames', () => {
     const gate = confirmFrame('g1', 'Run bash?');
 
     // The regression: the frame has been replayed, its tool call has not.
-    expect(splitAskFrames([], [question], false)).toEqual({ framesByTool: new Map(), modalRequest: null });
+    expect(splitAskFrames([], [question], false)).toEqual({ framesByTool: new Map(), orphanAsks: [], modalRequest: null });
     // The hold is uniform — a gate cannot be told from an ask before history
     // either, and it is re-decided the moment the history settles.
     expect(splitAskFrames([], [gate], false).modalRequest).toBeNull();

package/src/client/hooks/chat/timeline/ask-frames.ts

@@ -12,23 +12,31 @@
  * (approval gates under `always-ask`, extension pickers) has no card of its own
  * and keeps the modal.
  *
- * The two are told apart by the running ask tool calls: a frame whose title
- * names one of their questions is theirs, and a frame that follows such a frame
- * (the `editor` omp opens after "Other (type your own)") belongs with it too.
- * Any frame left over is modal material — including an ask-shaped frame whose
- * tool call the timeline has not seen, which must stay answerable rather than
- * silently vanish.
+ * An `ask` frame is therefore NEVER modal material, in any state. It is either
+ * claimed by the card that raised it, or returned as an ORPHAN the timeline
+ * draws inline: a question whose tool call this client never saw (a subagent's,
+ * an extension's own `askDialog`, a tool call outside the loaded window) still
+ * blocks the agent, and the one place it must not appear is a dialog over the
+ * conversation. That is what an empty modal was — `ExtensionDialog` has no
+ * `ask` body, so an orphaned frame painted a panel with no question in it and a
+ * single button whose click omp rejected ("Ask dialog response must carry N
+ * answers"), leaving the run parked.
  *
- * That fallback must wait for the session's own history, though. Ownership is
- * decided against the ask tool calls in `messages`, and on session open the
+ * The claim walks two keys, because omp gives the frame less than the tool call
+ * does: the question IDS when both carry them, and the question TEXT (what
+ * omp's own per-question loop matches on). A frame that matches neither is an
+ * orphan, not a modal — and deliberately not "the only open ask", which would
+ * steal a ratchet approval or an extension's own `askDialog` into a tool card
+ * that did not raise it.
+ *
+ * The modal is also held until the session's own history has loaded. Ownership
+ * is decided against the ask tool calls in `messages`, and on session open the
  * pending dialogs are replayed from the agent-state probe — which answers out
- * of the wrapper's local flags — long before the JSONL fetch lands. Every
- * replayed frame therefore looks unowned for that window, and rendering one as
- * a modal painted the question on screen and yanked it away the instant the
- * timeline arrived and its card claimed it: the flash seen when switching to a
- * session parked on an ask. `historyLoaded` holds the modal — never the card
- * claim — until there is a timeline to decide against; a frame no card claims
- * after that still gets its modal.
+ * of the wrapper's local flags — long before the JSONL fetch lands. Rendering a
+ * replayed APPROVAL as a modal in that window painted it on screen and yanked
+ * it away the instant the timeline arrived and its card claimed it: the flash
+ * seen when switching to a session parked on an ask. `historyLoaded` holds the
+ * modal — never the card claim — until there is a timeline to decide against.
  */
 
 import { createContext, useContext } from 'preact/compat';
@@ -40,17 +48,21 @@ import type { ExtensionDialogResponse } from '@/client/components/workspace/chat
 export interface AskFramesSplit {
   /** The ask's dialogs, bucketed per question, keyed by ask tool-call id. */
   framesByTool: Map<string, ExtensionUiDialogRequest[][]>;
-  /** Oldest request no ask card owns — the one the modal renders, if any. */
+  /** Ask dialogs no card can own — the timeline draws them inline. */
+  orphanAsks: ExtensionUiDialogRequest[];
+  /** Oldest non-ask request nothing claimed — the one the modal renders. */
   modalRequest: ExtensionUiDialogRequest | null;
 }
 
 export interface AskFramesHandle {
   framesByTool: AskFramesSplit['framesByTool'];
+  /** Ask dialogs with no tool card to render them (see `orphanAsks`). */
+  orphanAsks: AskFramesSplit['orphanAsks'];
   /** Answer one ask dialog and drop it from the pending queue. */
   respond: (request: ExtensionUiDialogRequest, response: ExtensionDialogResponse) => void;
 }
 
-const EMPTY: AskFramesHandle = { framesByTool: new Map(), respond: () => {} };
+const EMPTY: AskFramesHandle = { framesByTool: new Map(), orphanAsks: [], respond: () => {} };
 
 export const AskFramesContext = createContext<AskFramesHandle>(EMPTY);
 
@@ -67,7 +79,7 @@ export function splitAskFrames(
   historyLoaded: boolean,
 ): AskFramesSplit {
   const framesByTool = new Map<string, ExtensionUiDialogRequest[][]>();
-  if (pending.length === 0) return { framesByTool, modalRequest: null };
+  if (pending.length === 0) return { framesByTool, orphanAsks: [], modalRequest: null };
 
   // Match against the asks that can still own a dialog: a reloaded session
   // reads its tool calls back from the JSONL, where a call still parked on a
@@ -95,25 +107,61 @@ export function splitAskFrames(
 
   const owned = new Map<string, ExtensionUiDialogRequest[]>();
   const claimed = new Set<ExtensionUiDialogRequest>();
+  const orphanAsks: ExtensionUiDialogRequest[] = [];
   let lastOwner: string | null = null;
 
   for (const request of pending) {
+    // An `ask` frame is never modal material, whatever it carries. A malformed
+    // one (no `questions`) has nothing for a card to draw either, but handing it
+    // to the title/lastOwner walk below would file it under an unrelated ask's
+    // question — so it is orphaned like any other cardless ask.
+    const isAskFrame = request.method === 'ask';
     // A GROUPED ask frame (`method:"ask"`, sent after `set_ask_dialog`) carries
     // every question of one call and no `title` at all, so the title walk below
     // can never place it. Its questions carry omp's own ids, which is the
     // exact key the tool call's arguments use — match on those.
-    const grouped = Array.isArray(request.questions) && request.questions.length > 0 ? request.questions : null;
+    const grouped = isAskFrame && Array.isArray(request.questions) && request.questions.length > 0
+      ? request.questions
+      : null;
+    if (isAskFrame && !grouped) {
+      if (historyLoaded) orphanAsks.push(request);
+      continue;
+    }
     if (grouped) {
       const ids = new Set(grouped.map((question) => question.id).filter(Boolean));
-      const owner = [...openAsks].reverse().find((candidate) =>
+      let groupedOwner = [...openAsks].reverse().find((candidate) =>
         candidate.questions.some((question) => question.id && ids.has(question.id)),
       );
-      if (owner) {
+      // The id walk is the exact key, but it is not the only one omp gives us:
+      // a call whose questions carry no `id` (measured on 2 of 161 real `ask`
+      // calls) yields an empty id set, and the frame then matched nothing and
+      // fell through to the MODAL — an ask dialog shown outside the timeline,
+      // which is the one place it must never be. The question TEXT is what
+      // omp's own per-question loop matches on, so it is the fallback here.
+      if (!groupedOwner) {
+        const titles = new Set(grouped.map((question) => normalizeAskText(question.question)).filter(Boolean));
+        groupedOwner = [...openAsks].reverse().find((candidate) =>
+          candidate.questions.some((question) => titles.has(normalizeAskText(question.question))),
+        );
+      }
+      if (groupedOwner) {
         claimed.add(request);
-        lastOwner = owner.toolId;
-        owned.set(owner.toolId, [...(owned.get(owner.toolId) ?? []), request]);
-        continue;
+        lastOwner = groupedOwner.toolId;
+        owned.set(groupedOwner.toolId, [...(owned.get(groupedOwner.toolId) ?? []), request]);
       }
+      // A grouped ask is NEVER modal material: with no card to claim it, it is
+      // an orphan the timeline draws inline (see the module note). It must not
+      // fall through to the title/lastOwner walk either — that walk exists for
+      // the per-question `select` loop, and handing a grouped frame to it would
+      // file one dialog under a single question.
+      //
+      // The orphan row waits for the history for the same reason the modal
+      // does: a frame replayed on session open looks cardless until the JSONL
+      // lands, so drawing it now would paint the question at the tail of the
+      // timeline and then move it onto its card. The frame stays queued, so
+      // nothing is lost — the split simply re-runs.
+      if (!groupedOwner && historyLoaded) orphanAsks.push(request);
+      continue;
     }
 
     const title = typeof request.title === 'string' ? normalizeAskText(request.title) : '';
@@ -164,9 +212,11 @@ export function splitAskFrames(
   }
 
   // The frame stays queued either way — only the modal waits for the history,
-  // so nothing is dropped and nothing flashes.
-  return {
-    framesByTool,
-    modalRequest: historyLoaded ? pending.find((request) => !claimed.has(request)) ?? null : null,
-  };
+  // so nothing is dropped and nothing flashes. An `ask` frame is excluded here
+  // in BOTH states: it is answered by a card or by the orphan row, and the
+  // modal has no body for it.
+  const modalRequest = historyLoaded
+    ? pending.find((request) => !claimed.has(request) && request.method !== 'ask') ?? null
+    : null;
+  return { framesByTool, orphanAsks, modalRequest };
 }

package/src/client/hooks/chat/timeline/index.ts

@@ -49,7 +49,7 @@ export function useChatTimeline({
   // without re-creating it (useSessionLoad is defined below the scroll hook).
   const loadOlderRef = useRef<() => void>(() => {});
 
-  const { scrollRef, contentRef, showScrollBottom, handleScroll, scrollToBottom, jumpToBottom, followRef, jumpActiveRef, jumpCountRef } = useChatTimelineScroll({
+  const { scrollRef, contentRef, showScrollBottom, readingBack, handleScroll, scrollToBottom, jumpToBottom, followRef, jumpActiveRef, jumpCountRef } = useChatTimelineScroll({
     onScrollTop: () => loadOlderRef.current(),
   });
 
@@ -324,6 +324,7 @@ export function useChatTimeline({
     scrollRef,
     contentRef,
     showScrollBottom,
+    readingBack,
     handleScroll,
     scrollToBottom,
     jumpToBottom,