@kabmo-labs/kabmo 0.0.1 → 0.2.0

package/src/client/components/workspace/chat-timeline/chat-input/index.tsx

@@ -54,6 +54,7 @@ export function ChatInput({
   deferredComposerPickRef = NO_PENDING_PICK,
   chatRunning,
   expandable = false,
+  shrinkWhileReading = false,
 }: ChatInputProps) {
   const [internalAttachments, setInternalAttachments] = useState<Attachment[]>([]);
   // The Goal modal is owned here, not by the toolbar: the button is a toggle,
@@ -64,6 +65,10 @@ export function ChatInput({
   // layout preference for one draft, not a setting, and the URL is what carries
   // the session it belongs to.
   const [expanded, setExpanded] = useState(false);
+  // Whether anything inside the card has focus. A compacted composer restores
+  // itself the moment the user reaches for it: shrinking the box under a finger
+  // that is already typing is the one way this can be wrong.
+  const [composerFocused, setComposerFocused] = useState(false);
   const cardRef = useRef<HTMLDivElement>(null);
 
   const { selectedModel, setSelectedModel, thinkingLevels, currentThinking, selectThinking } = useModelSelection({
@@ -137,7 +142,13 @@ export function ChatInput({
   // Enter, so the covered toolbar would be the only way to send). Docked, the
   // card is inside the chat's own column and the measurement is unused.
   const keyboardInset = useKeyboardInset(cardRef, expandable && expanded);
-  const layout = composerExpansion({ variant, expanded, isDragging, keyboardInset });
+  // A phone gives its height back to the transcript while the reader is
+  // scrolling back — but only when there is nothing to lose: a draft means the
+  // user is writing, and the box must stay the size it was. A focused composer
+  // is the same rule from the other side (the tap that re-opens it must not be
+  // undone by the scroll position it was tapped from).
+  const compact = shrinkWhileReading && !composerFocused && !value.trim() && attachments.length === 0;
+  const layout = composerExpansion({ variant, expanded, isDragging, keyboardInset, compact });
 
   // Escape returns to the docked composer. Bound to the document rather than to
   // the textarea so it works while the picker has focus — the picker consumes
@@ -182,6 +193,13 @@ export function ChatInput({
       ref={cardRef}
       className={`@container transition-colors flex flex-col ${layout.cardPositionClass} ${layout.cardClass} ${layout.cardLayoutClass} ${className}`}
       style={layout.style}
+      // focusin/focusout BUBBLE, unlike focus/blur: the card has to learn that
+      // the textarea inside it was focused, and a capture-phase `onFocus` on
+      // this element is not the same question (it fires for the card's own
+      // focus, which never happens). Preact maps `onFocusIn`/`onFocusOut` to
+      // the native bubble-phase events.
+      onFocusIn={() => setComposerFocused(true)}
+      onFocusOut={() => setComposerFocused(false)}
       {...dropProps}
     >
       <DropOverlay visible={isDragging} />
@@ -212,7 +230,7 @@ export function ChatInput({
 
       {/* Refused plan/goal command notice. */}
       {(notice || modes?.error) && (
-        <div className="flex items-start gap-1.5 border-b border-error/20 bg-error/5 px-3 py-1.5 text-[11px] text-error">
+        <div className="flex items-start gap-1.5 bg-error/5 px-3 py-1.5 text-[11px] text-error">
           <AlertTriangle size={11} className="mt-0.5 shrink-0" />
           <span className="min-w-0 flex-1 break-words">{notice || modes?.error}</span>
           <button

package/src/client/components/workspace/chat-timeline/chat-input/props.ts

@@ -97,4 +97,11 @@ export interface ChatInputProps {
    * form lives inside a panel that is already sized to the answers beside it.
    */
   expandable?: boolean;
+  /**
+   * The reader has scrolled back through the transcript. On a phone with an
+   * empty draft the composer then gives its height back to the conversation
+   * (`composerExpansion`'s `compact`); it returns to full size as soon as the
+   * reader reaches the tail, types, or focuses the box.
+   */
+  shrinkWhileReading?: boolean;
 }

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

@@ -64,6 +64,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
     scrollRef,
     contentRef,
     showScrollBottom,
+    readingBack,
     handleScroll,
     jumpToBottom,
     handleSend,
@@ -93,7 +94,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
   // fetch lands) has no card to be matched against yet, so deciding "no card
   // owns this" during that window painted the ask modal and then took it back —
   // the flash on switching to a session parked on a question.
-  const { framesByTool, modalRequest } = useMemo(
+  const { framesByTool, orphanAsks, modalRequest } = useMemo(
     () => splitAskFrames(localMessages, extensionDialogs, !sessionLoading),
     [localMessages, extensionDialogs, sessionLoading],
   );
@@ -102,8 +103,8 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
     resolveExtensionDialog(request.id);
   }, [respondToExtensionUi, resolveExtensionDialog]);
   const askFrames = useMemo<AskFramesHandle>(
-    () => ({ framesByTool, respond: respondToFrame }),
-    [framesByTool, respondToFrame],
+    () => ({ framesByTool, orphanAsks, respond: respondToFrame }),
+    [framesByTool, orphanAsks, respondToFrame],
   );
 
   const [newChatInitialContent, setNewChatInitialContent] = useState<string | null>(null);
@@ -300,6 +301,11 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
                 sessionModel={typeof sessionData?.model === 'object' ? sessionData.model : null}
                 sessionThinkingLevel={sessionData?.thinkingLevel}
                 variant={variant}
+                // The same scroll geometry that draws the scroll-to-bottom
+                // button, with hysteresis: the reader is back through the
+                // transcript, so a phone composer may give its height back.
+                // `composerExpansion` ignores it on a desktop.
+                shrinkWhileReading={readingBack}
               />
             )}
           </>

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-panel/OrphanAsks.test.tsx

@@ -0,0 +1,127 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The reported defect: an `ask` dialog that no tool card owns was handed to the
+ * MODAL, which has no `ask` body — the panel came up empty with a single
+ * "Submit Response" button, and that button sent a bare `{ value }` omp rejects
+ * ("Ask dialog response must carry N answers"), so the agent stayed parked on a
+ * question the user could not even read.
+ *
+ * These pin the routing end to end: an ask frame is never `modalRequest`, and
+ * with no card to claim it the timeline draws it inline instead.
+ */
+
+import { afterAll, afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { AskFramesContext, splitAskFrames, type AskFramesHandle } from '@/client/hooks/chat/timeline/ask-frames';
+import { OrphanAsks } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-panel/OrphanAsks';
+import type { ExtensionUiDialogRequest } from '@/shared/types/omp/agent';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+const QUESTIONS = [
+  { id: 'q1', question: 'Pick colors', options: [{ label: 'red' }, { label: 'green' }], multi: true },
+  { id: 'q2', question: 'Pick a size', options: [{ label: 's' }, { label: 'm' }] },
+];
+
+const ORPHAN: ExtensionUiDialogRequest = {
+  type: 'extension_ui_request',
+  id: 'ui-orphan',
+  method: 'ask',
+  title: '',
+  questions: QUESTIONS,
+};
+
+let container: HTMLElement;
+
+beforeEach(() => {
+  installDomGlobals(new Window());
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+  restoreDomGlobals();
+});
+
+afterAll(() => restoreDomGlobals());
+
+/** The split the timeline computes, with nothing on the timeline to claim it. */
+function splitWithoutCards(frames: ExtensionUiDialogRequest[]) {
+  return splitAskFrames([], frames, true);
+}
+
+describe('an ask dialog with no tool card', () => {
+  test('is never handed to the modal', () => {
+    const split = splitWithoutCards([ORPHAN]);
+    expect(split.modalRequest).toBeNull();
+    expect(split.orphanAsks).toEqual([ORPHAN]);
+  });
+
+  test('renders inline with every question and its own submit', () => {
+    const split = splitWithoutCards([ORPHAN]);
+    const handle: AskFramesHandle = { framesByTool: split.framesByTool, orphanAsks: split.orphanAsks, respond: () => {} };
+
+    act(() => {
+      render(h(AskFramesContext.Provider, { value: handle }, h(OrphanAsks, {})), container);
+    });
+
+    // The question text — the thing the empty modal did not have at all.
+    expect(container.textContent).toContain('Pick colors');
+    expect(container.textContent).toContain('Pick a size');
+    // Its answers are chosen here, and submitted by the card itself.
+    expect(container.textContent).toContain('Submit answers');
+    // No dialog role anywhere: this is a timeline row, not an overlay.
+    expect(container.querySelector('[role="dialog"]')).toBeNull();
+  });
+
+  test('answering sends one answers entry per question', () => {
+    const sent: unknown[] = [];
+    const split = splitWithoutCards([ORPHAN]);
+    const handle: AskFramesHandle = {
+      framesByTool: split.framesByTool,
+      orphanAsks: split.orphanAsks,
+      respond: (_request, response) => sent.push(response),
+    };
+
+    act(() => {
+      render(h(AskFramesContext.Provider, { value: handle }, h(OrphanAsks, {})), container);
+    });
+
+    const button = (text: string) => [...container.querySelectorAll('button')]
+      .find((element) => element.textContent?.includes(text)) as HTMLElement | undefined;
+
+    act(() => { button('red')?.click(); });
+    act(() => { button('s')?.click(); });
+    act(() => { button('Submit answers')?.click(); });
+
+    expect(sent).toHaveLength(1);
+    expect(sent[0]).toEqual({
+      answers: [
+        { id: 'q1', selectedOptions: ['red'] },
+        { id: 'q2', selectedOptions: ['s'] },
+      ],
+    });
+  });
+
+  test('the orphan row is held until the session history has loaded', () => {
+    // Same window as the modal hold: on session open a replayed frame looks
+    // cardless until the JSONL lands, so drawing it now would paint the
+    // question at the tail and then move it onto its card.
+    expect(splitAskFrames([], [ORPHAN], false).orphanAsks).toEqual([]);
+    expect(splitAskFrames([], [ORPHAN], true).orphanAsks).toEqual([ORPHAN]);
+  });
+
+  test('an approval gate still keeps its modal', () => {
+    const gate: ExtensionUiDialogRequest = { type: 'extension_ui_request', id: 'g1', method: 'confirm', title: 'Run bash?' };
+    const split = splitWithoutCards([gate]);
+    expect(split.modalRequest).toBe(gate);
+    expect(split.orphanAsks).toEqual([]);
+  });
+});

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-panel/OrphanAsks.tsx

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Ask dialogs with no tool card behind them, drawn IN the timeline.
+ *
+ * An `ask` frame is normally claimed by the tool call that raised it (see
+ * `ask-frames.ts`), but three real shapes have no card to claim:
+ *
+ *  - a subagent's own question — the subagent runs in its own transcript and
+ *    its tool call is not in this session's row list;
+ *  - an extension's `askDialog` (the ratchet approval is one), which is not an
+ *    `ask` tool call at all;
+ *  - a tool call outside the loaded history window, or one whose arguments
+ *    never arrived.
+ *
+ * All of them still BLOCK the agent until answered, so they must stay
+ * answerable — and the one place they must not be is a modal over the
+ * conversation: `ExtensionDialog` has no `ask` body, so an orphaned frame there
+ * rendered an empty panel with a single button, and that button sent a bare
+ * `{ value }` that omp rejects ("Ask dialog response must carry N answers").
+ * The reported symptom was exactly that empty modal.
+ *
+ * The card is the same `GroupedAsk` the inline tool card uses, so a question
+ * reads identically wherever it came from.
+ */
+
+import { HelpCircle } from 'lucide-preact';
+import type { ExtensionUiDialogRequest } from '@/shared/types/omp/agent';
+import { useAskFrames } from '@/client/hooks/chat/timeline/ask-frames';
+import { GroupedAsk } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-panel/GroupedAsk';
+import type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/Lazy';
+
+/** One orphan ask, rendered as a self-contained card at the end of the timeline. */
+function OrphanAskCard({ frame, onRespond }: {
+  frame: ExtensionUiDialogRequest;
+  onRespond: (request: ExtensionUiDialogRequest, response: ExtensionDialogResponse) => void;
+}) {
+  return (
+    <div className="rounded-lg border border-ink/12 bg-paper p-3 shadow-xs">
+      <div className="mb-2 flex items-center gap-1.5 text-[10.5px] text-ink/50">
+        <HelpCircle size={11} className="shrink-0" />
+        <span>Input needed — the agent is blocked until you answer.</span>
+      </div>
+      <GroupedAsk
+        frame={frame}
+        recorded={(frame.questions ?? []).map(() => null)}
+        onRespond={(response) => onRespond(frame, response)}
+      />
+    </div>
+  );
+}
+
+/**
+ * Every orphan ask, oldest first. Rendered inside the timeline's scroll body so
+ * it behaves like any other row — a question is part of the conversation, and a
+ * surface floating above the transcript hid the turn it belongs to.
+ */
+export function OrphanAsks() {
+  const { orphanAsks, respond } = useAskFrames();
+  if (orphanAsks.length === 0) return null;
+  return (
+    <div className="mt-2 space-y-2">
+      {orphanAsks.map((frame) => (
+        <OrphanAskCard key={frame.id} frame={frame} onRespond={respond} />
+      ))}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-panel/PluginPendingInteractions.test.ts

@@ -111,6 +111,7 @@ afterAll(() => restoreDomGlobals());
 function mount(tool: ToolCallData, groups: ExtensionUiDialogRequest[][]): void {
   const handle: AskFramesHandle = {
     framesByTool: new Map([[tool.id, groups]]),
+    orphanAsks: [],
     respond: (request, response) => calls.push({ request, response }),
   };
   act(() => {

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-panel/index.test.ts

@@ -44,7 +44,7 @@ function mountFromFrame(frame: IncomingExtensionUiRequest): ExtensionUiDialogReq
   createOmpAgentCallbacks(deps).onExtensionUiRequest?.(frame);
 
   const split = splitAskFrames([MESSAGE], queue, true);
-  const handle: AskFramesHandle = { framesByTool: split.framesByTool, respond: () => {} };
+  const handle: AskFramesHandle = { framesByTool: split.framesByTool, orphanAsks: [], respond: () => {} };
   act(() => { render(h(AskFramesContext.Provider, { value: handle }, h(AskPanel, { tool: ASK_TOOL })), container); });
   return queue;
 }
@@ -52,7 +52,7 @@ function mountFromFrame(frame: IncomingExtensionUiRequest): ExtensionUiDialogReq
 /** Mount the card with an explicit frame queue and tool, keeping it mounted. */
 function paint(queue: ExtensionUiDialogRequest[], tool: ToolCallData = ASK_TOOL): void {
   const split = splitAskFrames([MESSAGE], queue, true);
-  const handle: AskFramesHandle = { framesByTool: split.framesByTool, respond: () => {} };
+  const handle: AskFramesHandle = { framesByTool: split.framesByTool, orphanAsks: [], respond: () => {} };
   act(() => { render(h(AskFramesContext.Provider, { value: handle }, h(AskPanel, { tool })), container); });
 }
 

package/src/client/components/workspace/git-panel/BranchToolbar.tsx

@@ -170,6 +170,9 @@ export function GitBranchToolbar({
           <CloudDownload size={13} />
         </button>
 
+        {/* The row's only text is the count, so an accessible name built from
+            it would read "↑1 ↓1" — it names the ACTION, the same way Fetch
+            and Commit History do. */}
         <button
           type="button"
           onClick={onSync}
@@ -183,6 +186,7 @@ export function GitBranchToolbar({
                   ? `Pull ${syncCount.behind} commit(s)`
                   : 'Up to date — sync anyway'
           }
+          aria-label="Sync with upstream"
           className="flex items-center gap-1 p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
         >
           <RefreshCw size={13} />

package/src/client/components/workspace/git-panel/index.test.ts

@@ -201,6 +201,21 @@ describe('GitPanel sync badge', () => {
     for (let i = 0; i < 20; i += 1) await act(async () => {});
     expect(container.textContent).toContain('↑0 ↓3');
   });
+
+  /**
+   * The Sync button is enabled whenever no action is running — including the
+   * DIVERGED case that used to be refused by git itself. Its accessible name
+   * is the action, not the count: a name built from the row's own text reads
+   * "↑1 ↓1", which names no control.
+   */
+  test('a diverged branch leaves Sync enabled, and the control is named', async () => {
+    await mount({ topicSync: { ahead: 1, behind: 1 } });
+
+    const sync = container.querySelector('button[aria-label="Sync with upstream"]');
+    if (!sync) throw new Error('no Sync control rendered');
+    expect((sync as HTMLButtonElement).disabled).toBe(false);
+    expect(container.textContent).toContain('↑1 ↓1');
+  });
 });
 
 /**

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}