@kabmo-labs/kabmo 0.1.0 → 0.2.0

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

@@ -38,7 +38,10 @@ export function AttachmentToolbar({ attachments, onFilesSelected, onRemove, mode
 
   return (
     <>
-      <div className="flex items-center flex-wrap gap-1.5 px-3 py-2 border-b border-ink/5 text-ink/60">
+      {/* No separator and no second surface: the card is ONE colour, so the
+          header, the draft and the toolbar read as one panel. A hairline over
+          a tinted strip made the composer look like three stacked bars. */}
+      <div className="flex items-center flex-wrap gap-1.5 px-3 py-2 text-ink/60">
         <button
           onClick={() => fileInputRef.current?.click()}
           className="flex items-center justify-center hover:bg-ink/5 p-1 rounded transition-colors text-ink/60 hover:text-ink shrink-0"

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

@@ -8,7 +8,7 @@ import { UploadCloud } from 'lucide-preact';
 export function DropOverlay({ visible }: { visible: boolean }) {
   if (!visible) return null;
   return (
-    <div className="pointer-events-none absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-ink/40 bg-canvas/90 text-ink">
+    <div className="pointer-events-none absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-[inherit] border-2 border-dashed border-ink/40 bg-canvas/90 text-ink">
       <UploadCloud size={18} className="text-ink/60" />
       <span className="text-[11px] font-semibold">Drop files to attach</span>
       <span className="text-[10px] text-ink/50">Folders are expanded into their files</span>

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

@@ -138,7 +138,12 @@ export function GoalBanner({ record, running, continuation, evaluating, pending,
 
   return (
     <div
-      className="flex items-center gap-2 border-b border-ink/8 bg-canvas/40 px-3 py-1.5 text-[11px]"
+      // The strip sits on the card's own surface — no hairline and no tinted
+      // band, so the goal row, the draft and the toolbar read as ONE panel
+      // rather than three stacked bars. Its state still shows: the icon and
+      // the badge carry the tone (`badge`/`tone`), which is the semantic half;
+      // the background was only ever separation.
+      className="flex items-center gap-2 px-3 py-1.5 text-[11px]"
       data-goal-banner={record.status}
       data-goal-stop={stop ?? undefined}
     >

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

@@ -99,7 +99,10 @@ export function ComposerToolbar({
 
   return (
     <div
-      className={`@container flex items-center justify-between border-t border-ink/5 bg-canvas/50 rounded-b-md ${isMobile ? 'px-2 py-2' : 'px-3 py-2'}`}
+      // No separator and no tinted strip: the composer is one card, so its
+      // toolbar shares the card's surface. `rounded-b-[inherit]` still follows
+      // the frame (the phone's stretched composer is `rounded-none`).
+      className={`@container flex items-center justify-between rounded-b-[inherit] ${isMobile ? 'px-2 py-2' : 'px-3 py-2'}`}
     >
       <div className={`flex items-center min-w-0 ${isMobile ? 'space-x-1' : 'space-x-2'}`}>
         {showModel && (

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

@@ -19,7 +19,7 @@ export interface VoiceNoticeProps {
 export function VoiceNotice({ status, error }: VoiceNoticeProps) {
   if (status) {
     return (
-      <div className="flex items-center gap-1.5 border-t border-ink/10 bg-canvas/40 px-3 py-1.5 text-[11px] text-ink/60">
+      <div className="flex items-center gap-1.5 px-3 py-1.5 text-[11px] text-ink/60">
         <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-ink/50 animate-pulse" />
         <span className="min-w-0 flex-1 break-words">{status}</span>
       </div>
@@ -28,7 +28,7 @@ export function VoiceNotice({ status, error }: VoiceNoticeProps) {
 
   if (error) {
     return (
-      <div className="flex items-start gap-1.5 border-t 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">{error}</span>
       </div>

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

@@ -23,7 +23,7 @@ import { describe, expect, test } from 'bun:test';
 
 import { composerExpansion } from '@/client/components/workspace/chat-timeline/chat-input/expansion';
 
-const base = { expanded: false, isDragging: false, keyboardInset: 0 } as const;
+const base = { expanded: false, isDragging: false, keyboardInset: 0, compact: false } as const;
 
 describe('composerExpansion docked', () => {
   test('a phone keeps its touch-sized box and opens the popup upward', () => {
@@ -48,6 +48,77 @@ describe('composerExpansion docked', () => {
   });
 });
 
+/**
+ * The composer is a card in the same transcript as the tool calls, so its frame
+ * is the tool card's own (`ToolCardShell`): `rounded-xl`, `border-ink/10` on
+ * `bg-paper`, darkening to `ink/20` — plus a shadow, which the tool card only
+ * grows when expanded but the composer always has, because it is the input the
+ * user is looking at. A `rounded-md` here made it read as a smaller, different
+ * card sitting under the conversation.
+ */
+describe('composerExpansion frame matches a tool card', () => {
+  test('docked: rounded-xl, ink/10 hairline, a resting shadow', () => {
+    for (const variant of ['desktop', 'mobile'] as const) {
+      const { cardClass } = composerExpansion({ ...base, variant });
+      expect(cardClass).toContain('rounded-xl');
+      expect(cardClass).not.toContain('rounded-md');
+      expect(cardClass).toContain('border-ink/10');
+      expect(cardClass).toContain('bg-paper');
+      expect(cardClass).toContain('shadow-sm');
+    }
+  });
+
+  test('the border darkens on hover and on focus, never at rest', () => {
+    const { cardClass } = composerExpansion({ ...base, variant: 'desktop' });
+    expect(cardClass).toContain('hover:border-ink/20');
+    expect(cardClass).toContain('focus-within:border-ink/30');
+  });
+
+  test('a stretched desktop keeps the radius and lifts the shadow one step', () => {
+    const { cardClass } = composerExpansion({ ...base, expanded: true, variant: 'desktop' });
+    expect(cardClass).toContain('rounded-xl');
+    expect(cardClass).toContain('shadow-md');
+  });
+
+  test('a stretched phone drops the radius so the bars follow it', () => {
+    const { cardClass } = composerExpansion({ ...base, expanded: true, variant: 'mobile' });
+    expect(cardClass).toContain('rounded-none');
+    expect(cardClass).toContain('shadow-none');
+  });
+});
+
+/**
+ * The phone's compact composer: a reader scrolled back through the transcript
+ * gets the height back. The rules that matter are which layout may shrink (only
+ * a docked phone — a desktop sits beside the chat, a stretched one IS the
+ * screen) and that it stays a card and a touch target rather than becoming a
+ * second, differently shaped control.
+ */
+describe('composerExpansion compact', () => {
+  test('a docked phone shrinks to a 44px box, still framed as a card', () => {
+    const layout = composerExpansion({ ...base, variant: 'mobile', compact: true });
+    // A fixed height, not a min-height: a textarea's own `rows` sets its
+    // height, so a minimum alone never shrinks it.
+    expect(layout.textareaClass).toContain('h-11');
+    expect(layout.textareaClass).not.toContain('min-h-[68px]');
+    expect(layout.cardClass).toContain('rounded-xl');
+    expect(layout.cardClass).toContain('shadow-sm');
+    // The frame's own state does not change: compact is a SIZE, not a style.
+    expect(layout.cardClass).toContain('border-ink/10');
+  });
+
+  test('a desktop ignores it: its composer sits beside the chat', () => {
+    const layout = composerExpansion({ ...base, variant: 'desktop', compact: true });
+    expect(layout.textareaClass).toContain('min-h-[80px]');
+  });
+
+  test('a stretched phone is the screen, so there is nothing to give back', () => {
+    const layout = composerExpansion({ ...base, expanded: true, variant: 'mobile', compact: true });
+    expect(layout.cardClass).toContain('rounded-none');
+    expect(layout.textareaClass).toContain('h-full');
+  });
+});
+
 describe('composerExpansion stretched', () => {
   test('a phone takes the viewport, and its popup opens over the draft', () => {
     const layout = composerExpansion({ ...base, expanded: true, variant: 'mobile' });

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

@@ -59,6 +59,13 @@ export interface ComposerExpansionInput {
    * `useKeyboardInset`. 0 when there is no keyboard (or no `visualViewport`).
    */
   keyboardInset: number;
+  /**
+   * A phone reader is scrolled back through the transcript and the draft is
+   * empty, so the composer gives the conversation its height back. Only the
+   * docked phone layout has anything to give: a desktop composer sits beside
+   * the chat rather than over it, and a stretched one is the screen.
+   */
+  compact: boolean;
 }
 
 export interface ComposerExpansion {
@@ -88,17 +95,34 @@ export function composerExpansion({
   expanded,
   isDragging,
   keyboardInset,
+  compact,
 }: ComposerExpansionInput): ComposerExpansion {
   const mobile = variant === 'mobile';
-  const border = isDragging ? 'border-ink/40' : 'border-ink/20 focus-within:border-ink';
+  // Same frame as a tool card (`ToolCardShell`): `rounded-xl`, `border-ink/10`
+  // on `bg-paper`, darkening to `ink/20` under the pointer — the composer is a
+  // card in the same transcript, so it must not be a smaller, differently
+  // coloured one. `focus-within` is the composer's own analogue of the card's
+  // hover, since the interactive surface is the textarea inside it.
+  const border = isDragging
+    ? 'border-ink/40'
+    : 'border-ink/10 hover:border-ink/20 focus-within:border-ink/30';
 
   if (!expanded) {
     return {
-      cardClass: `border rounded-md bg-paper shadow-sm ${border}`,
+      cardClass: `border rounded-xl bg-paper shadow-sm ${border}`,
       cardPositionClass: 'relative',
       cardLayoutClass: '',
+      // A compact phone composer gives the transcript its height back. `h-11`
+      // rather than a `min-h`: a textarea's height comes from its `rows`
+      // (two lines by default), so a min-height alone never shrinks it —
+      // measured, `min-h-[44px]` still laid out at 64px. The box is fixed at
+      // 44px, the smallest reliable touch target, and it never needs to grow:
+      // a draft restores the full composer on the same commit the first
+      // character lands in it.
       textareaClass: mobile
-        ? 'px-3 py-3 text-base min-h-[68px] max-h-40'
+        ? compact
+          ? 'px-3 py-2 text-base h-11 max-h-40'
+          : 'px-3 py-3 text-base min-h-[68px] max-h-40'
         : 'px-3 py-3 text-sm min-h-[80px]',
       wrapperClass: '',
       pickerPlacement: 'up',
@@ -128,7 +152,7 @@ export function composerExpansion({
   }
 
   return {
-    cardClass: `border rounded-md bg-paper shadow-lg ${border}`,
+    cardClass: `border rounded-xl bg-paper shadow-md ${border}`,
     cardPositionClass: 'relative',
     cardLayoutClass: '',
     // A share of the viewport, not of the panel: the dock sits at the bottom of

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