@schlessera/brain-ui-react 0.36.0 → 0.37.0

package/src/components/activity/activity-page.tsx

@@ -12,7 +12,7 @@ import { useActivityStore } from "../../stores/activity-store.js";
 import { useChatStore, pendingApprovals } from "../../stores/chat-store.js";
 import { EmptyState, FilterRow, InlineToast, Label } from "@schlessera/brain-ui-kit";
 import { cn } from "../../lib/utils.js";
-import { ApprovalCard } from "./approval-card.js";
+import { ApprovalCard, approvalOutcome } from "./approval-card.js";
 import { useUIStore } from "../../stores/ui-store.js";
 import { formatRelativeTime } from "../chat/tool-views.js";
 import { RollupCards } from "./activity-rollups.js";
@@ -20,6 +20,7 @@ import { LiveRow, RunRow } from "./activity-run-list.js";
 import { RunDetail, RunTraceSteps } from "./activity-run-detail.js";
 import { IntentCard } from "./activity-views.js";
 import { focusAfterDecision, singleKey } from "../../lib/single-key.js";
+import { useFinePointer } from "../../hooks/use-fine-pointer.js";
 import { PushToggle } from "./push-toggle.js";
 import { SettingsPanel } from "../settings/settings-panel.js";
 
@@ -209,6 +210,11 @@ export function ActivityPage() {
   }
 
   const keys = useUIStore((s) => s.singleKeyShortcuts);
+  // The keys bind on `keys` alone; they are PRINTED only while a mouse or
+  // trackpad is present (#86, #100), like the approval card's caps. A
+  // touch-only tablet past `laptop:` would otherwise read keys it cannot fire.
+  const finePointer = useFinePointer();
+  const printKeys = keys && finePointer;
   const INTENT_CARD = "[data-intent-card] > [role=\"button\"]";
   /**
    * `j` / `k` move inside the focused list and `d` dismisses the focused
@@ -243,13 +249,13 @@ export function ActivityPage() {
     setDrained(approvals.length === 0);
     void acknowledgeAllIntents();
   }
-  function decideApproval(key: string | null, toolUseId: string, approved: boolean, always?: boolean) {
+  function decideApproval(key: string | null, toolUseId: string, approved: boolean, asked?: boolean) {
     const tool = approvals.find((a) => a.tool.id === toolUseId)?.tool;
-    setReceipt({ text: approved ? (always ? "Always allowed" : "Allowed") : "Denied", target: tool ? tool.name : toolUseId, effect: always ? "write_policy" : approved ? "tool_approval" : "tool_denial" });
+    const { receipt, frame } = approvalOutcome(tool, toolUseId, approved, asked);
+    setReceipt(receipt);
     setDrained(inbox.length + approvals.length <= 1);
     resolveToolApproval(key, toolUseId, approved);
-    if (approved) root.connection.send({ type: "tool_approval", toolUseId, ...(always ? { always: true } : {}) });
-    else root.connection.send({ type: "tool_denial", toolUseId, message: "Denied by user" });
+    root.connection.send(frame);
   }
   const needsYouCount = inbox.length + approvals.length;
   const runningCount = liveRoots.length + restLive.length;
@@ -360,7 +366,7 @@ export function ActivityPage() {
                         <IntentCard
                           intent={intent}
                           when={formatRelativeTime(intent.createdAt)}
-                          keyHint={keys}
+                          keyHint={printKeys}
                           onOpen={() => {
                             void acknowledgeIntent(intent.id);
                             openIntent(intent);
@@ -370,7 +376,7 @@ export function ActivityPage() {
                       </div>
                     ))}
                   </div>
-                  {keys && (
+                  {printKeys && (
                     <p className="mt-1.5 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/70 laptop:hidden">
                       j / k move · d dismiss · ⏎ open{approvals.length > 0 ? " · a allow" : ""}
                     </p>
@@ -422,8 +428,9 @@ export function ActivityPage() {
         </div>
         {/* The column's footer (D4): the printed keys, pinned under the list
             from `laptop:`. Only while the keys can fire — they act inside the
-            inbox list — so a lens without cards advertises nothing. */}
-        {keys && lens === "needs-you" && inbox.length > 0 && (
+            inbox list — so a lens without cards advertises nothing, and
+            only with a fine pointer (#100). */}
+        {printKeys && lens === "needs-you" && inbox.length > 0 && (
           <p className="sticky bottom-0 mt-auto hidden border-t border-border-subtle bg-background px-4 py-2 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/70 laptop:block">
             j / k move · d dismiss
           </p>

package/src/components/activity/approval-card.tsx

@@ -1,9 +1,11 @@
 import { ActionCard, Button } from "@schlessera/brain-ui-kit";
 import type { KeyboardEvent } from "react";
-import type { ToolCall } from "../../stores/chat-store.js";
+import type { ClientMessage } from "@schlessera/brain-ui-sdk/protocol";
+import { offersAlwaysAllow, type ToolCall } from "../../stores/chat-store.js";
 import { focusAfterDecision, singleKey } from "../../lib/single-key.js";
-import { getToolLabel, getToolSummary } from "../chat/tool-views.js";
+import { effectOf, getToolLabel, getToolSummary } from "../chat/tool-views.js";
 import { KeyCap } from "../layout/key-cap.js";
+import { useFinePointer } from "../../hooks/use-fine-pointer.js";
 
 /**
  * A pending tool approval as an Actions-pane card (D37): the transcript copy
@@ -12,7 +14,9 @@ import { KeyCap } from "../layout/key-cap.js";
  * border that says "a run is stopped on this"; the buttons are the same
  * three the transcript draws, with the same keys — `a` / `d` while the card
  * holds focus, printed on the buttons, and "Always allow" deliberately
- * without one, carrying its `write_policy` effect chip instead.
+ * without one, carrying its `write_policy` effect chip instead. The hint
+ * is printed only while a fine pointer is present (#86); the letters follow
+ * `keys` alone, so a paired keyboard works even if the pointer query stays coarse.
  *
  * The buttons follow the kit `ApprovalCard`'s rule (seventh drop, ruling 10):
  * Allow takes the remaining width, Deny is content-sized with a 96 x 44 floor
@@ -32,9 +36,41 @@ export interface ApprovalCardProps {
 
 export const APPROVAL_CARD = "[data-approval-card]";
 
+/**
+ * What a decision on an Actions card prints and sends. The receipt follows
+ * what the card was allowed to offer, not the click (#147): "Always allowed"
+ * claims a policy write, and the host refuses one the card did not offer —
+ * so an `always` the card could not have offered is neither printed nor
+ * sent. A card no longer in the list (`tool` undefined) offered nothing.
+ */
+export function approvalOutcome(
+  tool: ToolCall | undefined,
+  toolUseId: string,
+  approved: boolean,
+  asked?: boolean
+): {
+  receipt: { text: string; target: string; effect: string };
+  frame: Extract<ClientMessage, { type: "tool_approval" | "tool_denial" }>;
+} {
+  const always = approved && asked === true && tool !== undefined && offersAlwaysAllow(tool);
+  return {
+    receipt: {
+      text: approved ? (always ? "Always allowed" : "Allowed") : "Denied",
+      target: tool ? tool.name : toolUseId,
+      effect: always ? "write_policy" : approved ? "tool_approval" : "tool_denial",
+    },
+    // Every decision on this surface is made on the card (#113).
+    frame: approved
+      ? { type: "tool_approval", toolUseId, ...(always ? { always: true } : {}), channel: "card" }
+      : { type: "tool_denial", toolUseId, message: "Denied by user", channel: "card" },
+  };
+}
+
 export function ApprovalCard(p: ApprovalCardProps) {
   const label = getToolLabel(p.tool.name);
   const summary = getToolSummary(p.tool);
+  const finePointer = useFinePointer();
+  const printKeys = p.keys && finePointer;
   function decide(card: HTMLElement | null, approved: boolean, always?: boolean) {
     if (card) focusAfterDecision(card, APPROVAL_CARD, "[data-needs-you-heading]");
     p.onDecide(approved, always);
@@ -53,6 +89,7 @@ export function ApprovalCard(p: ApprovalCardProps) {
         title={summary ? `${label} · ${summary}` : label}
         rightMeta="blocks a run"
         rightMetaTone="red"
+        {...(effectOf(p.tool) ? { body: effectOf(p.tool) } : {})}
         footMeta={p.origin}
         footDot="amber"
         footPulse
@@ -60,11 +97,11 @@ export function ApprovalCard(p: ApprovalCardProps) {
       >
         <div className="mt-2 flex flex-wrap gap-2">
           <Button label="Allow" icon="confirm" tone="primary" size="sm" center block={false} style={ALLOW_MOUNT} onClick={() => decide(cardOf(), true)} />
-          {p.tool.approvalKind !== "command" && (
+          {offersAlwaysAllow(p.tool) && (
             <Button label="Always allow" effect="write_policy" tone="ghost" size="sm" block={false} onClick={() => decide(cardOf(), true, true)} />
           )}
           <Button label="Deny" icon="deny" tone="danger" size="sm" center block={false} style={DENY_MOUNT} onClick={() => decide(cardOf(), false)} />
-          {p.keys && (
+          {printKeys && (
             <span className="ml-auto flex items-center gap-2 text-[10px] text-muted-foreground" aria-hidden="true">
               <span>allow <KeyCap>a</KeyCap></span>
               <span>deny <KeyCap>d</KeyCap></span>

package/src/components/activity/span-bits.tsx

@@ -117,12 +117,64 @@ export function eventTypeLabel(eventType: string): string {
   return eventType.replace(/_/g, " ");
 }
 
+// Maps, not object literals: a stored payload is untrusted, and indexing a
+// literal with "toString" or "__proto__" finds Object.prototype, not a miss.
+const DECISION_TEXT = new Map([
+  ["allow", "Allowed"],
+  ["always_allow", "Always allowed"],
+  ["deny", "Denied"],
+]);
+const CHANNEL_TEXT = new Map([
+  ["card", "on the card"],
+  ["voice", "by voice"],
+]);
+
+/**
+ * An `approval_decision` event as a sentence: what was decided and, when the
+ * client said, the channel it was decided on (#113) — "who said yes and how"
+ * is the question the record exists to answer. A decision recorded without a
+ * channel reads as the decision alone rather than guessing one. Anything
+ * this does not recognise returns null and falls back to the raw block.
+ */
+export function readApprovalDecision(
+  payload: unknown
+): { text: string; facts: string | null } | null {
+  if (!payload || typeof payload !== "object") return null;
+  const p = payload as Record<string, unknown>;
+  const decision = typeof p.decision === "string" ? DECISION_TEXT.get(p.decision) : undefined;
+  if (!decision) return null;
+  const channel = typeof p.channel === "string" ? CHANNEL_TEXT.get(p.channel) : undefined;
+  if (p.channel !== undefined && !channel) return null;
+  const facts = [
+    typeof p.principalId === "string" ? `principal ${p.principalId}` : null,
+    p.requestKind === "command" ? "command confirmation" : null,
+  ].filter(Boolean);
+  return {
+    text: channel ? `${decision} ${channel}` : decision,
+    facts: facts.length > 0 ? facts.join(" · ") : null,
+  };
+}
+
 /**
  * ONE labelled block per recorded event — the shared renderer behind the tool
  * payload expander and the run detail's narrative stream, so every event type
  * lands somewhere visible instead of only the two the expander knows.
  */
 export function SpanEventBlock({ event }: { event: ActivitySpanEvent }) {
+  const approval = event.eventType === "approval_decision" ? readApprovalDecision(event.payload) : null;
+  if (approval) {
+    return (
+      <div>
+        <div className="mb-0.5 text-[10px] uppercase text-muted-foreground/60">Approval</div>
+        <p data-testid="approval-decision" className="text-[11px] text-foreground">
+          {approval.text}
+        </p>
+        {approval.facts && (
+          <p className="text-[10px] text-muted-foreground/60">{approval.facts}</p>
+        )}
+      </div>
+    );
+  }
   const text =
     typeof event.payload === "string" ? event.payload : JSON.stringify(event.payload, null, 2);
   return (

package/src/components/chat/chat-page.tsx

@@ -142,10 +142,11 @@ export function ChatPage() {
   const handleToolApproval = useCallback(
     (toolUseId: string, approved: boolean, always?: boolean) => {
       root.stores.chat.getState().resolveToolApproval(sessionId, toolUseId, approved);
+      // The transcript's approval card is the only caller: channel "card" (#113).
       if (approved) {
-        send({ type: "tool_approval", toolUseId, ...(always ? { always: true } : {}) });
+        send({ type: "tool_approval", toolUseId, ...(always ? { always: true } : {}), channel: "card" });
       } else {
-        send({ type: "tool_denial", toolUseId, message: "Denied by user" });
+        send({ type: "tool_denial", toolUseId, message: "Denied by user", channel: "card" });
       }
     },
     [send, sessionId, root]

package/src/components/chat/tool-call-timeline.tsx

@@ -11,10 +11,10 @@ import {
   FileText,
 } from "lucide-react";
 import { type ToolSemantics } from "@schlessera/brain-ui-sdk/client";
-import { useChatStore, type ToolCall } from "../../stores/chat-store.js";
+import { offersAlwaysAllow, useChatStore, type ToolCall } from "../../stores/chat-store.js";
 import { cn } from "../../lib/utils.js";
 import { motion, AnimatePresence } from "framer-motion";
-import { getToolLabel, getTouchedFile, formatDuration, formatTokenCount } from "./tool-views.js";
+import { effectOf, getToolLabel, getTouchedFile, formatDuration, formatTokenCount } from "./tool-views.js";
 import { registerBuiltinRenderers, GENERIC_RENDERER } from "./renderers/index.js";
 import { riskHints } from "./risk-hints.js";
 import { useShallow } from "zustand/react/shallow";
@@ -23,6 +23,7 @@ import { KeyCap } from "../layout/key-cap.js";
 import { useActivityStore, spanForTool, childSpans } from "../../stores/activity-store.js";
 import { useUIStore } from "../../stores/ui-store.js";
 import { useNow } from "../../hooks/use-now.js";
+import { useFinePointer } from "../../hooks/use-fine-pointer.js";
 import { SpanStatusDot } from "../activity/span-bits.js";
 
 // Sessions that predate backend stamping (old servers, cleared stores) scope
@@ -189,6 +190,11 @@ function ToolCallEntry({
       : renderer.label ?? getToolLabel(toolCall.name);
   const isPending = toolCall.status === "pending_approval";
   const keys = useUIStore((s) => s.singleKeyShortcuts);
+  // The caps are printed only while a fine pointer is present (#86); the letters
+  // themselves follow the Settings switch alone, so a paired keyboard works
+  // even if the pointer query stays coarse.
+  const finePointer = useFinePointer();
+  const printKeys = keys && finePointer;
   /**
    * A decision hands focus on before the card goes (D36): the next pending
    * approval in the transcript, else the composer — the thing the reader
@@ -306,6 +312,11 @@ function ToolCallEntry({
               {/* Tool input */}
               {Input && <Input tool={toolCall} />}
 
+              {/* What a confirmed command will do, in words (#112) */}
+              {isPending && effectOf(toolCall) && (
+                <p className="text-[11px] text-muted-foreground">{effectOf(toolCall)}</p>
+              )}
+
               {/* Risk hints — advisory only, never blocks approval */}
               {isPending && (
                 <RiskHints toolCall={toolCall} semantics={renderer.semantics} />
@@ -313,7 +324,8 @@ function ToolCallEntry({
 
               {/* Approval buttons. "Always allow" only for grantable tool
                   requests — a destructive-command confirmation (kind
-                  "command") stays per-use. */}
+                  "command") stays per-use, and a grant the host said it
+                  will not keep (#147) is not offered. */}
               {isPending && (
                 // The card is the focus scope for `a` / `d` (D36): the keys
                 // act only while it, or a button inside it, holds focus, and
@@ -332,9 +344,9 @@ function ToolCallEntry({
                   >
                     <Check className="h-3 w-3" />
                     Allow
-                    {keys && <KeyCap>a</KeyCap>}
+                    {printKeys && <KeyCap>a</KeyCap>}
                   </button>
-                  {toolCall.approvalKind !== "command" && (
+                  {offersAlwaysAllow(toolCall) && (
                     <button
                       onClick={(e) => decide(e.currentTarget.closest("[data-approval-card]"), true, true)}
                       title={`Allow ${toolCall.name} without asking from now on (revocable in Settings → Models)`}
@@ -350,7 +362,7 @@ function ToolCallEntry({
                   >
                     <X className="h-3 w-3" />
                     Deny
-                    {keys && <KeyCap>d</KeyCap>}
+                    {printKeys && <KeyCap>d</KeyCap>}
                   </button>
                 </div>
               )}

package/src/components/chat/tool-views.tsx

@@ -735,3 +735,12 @@ function ReadOutputStub({ output }: { output: string }) {
     </div>
   );
 }
+
+/**
+ * What a confirmed command will do, in words, when the request said (#112).
+ * Only a "command" confirmation's description is an effect; a tool grant's
+ * is the runtime's own text, so it is not drawn.
+ */
+export function effectOf(tool: ToolCall): string | undefined {
+  return tool.approvalKind === "command" ? tool.approvalDescription : undefined;
+}

package/src/components/files/file-panel.tsx

@@ -155,7 +155,7 @@ export function FilePanel({ open, onClose }: { open: boolean; onClose: () => voi
 }
 
 /**
- * D3 (the fifth drop, `.plan/design/desktop.md`): from `laptop:` up Files is
+ * D3 (the fifth design drop): from `laptop:` up Files is
  * not a drawer but a layer of panes over the content area, beside the rail —
  * a 300px tree, the reading pane at a 720px measure, and from `wide:` a
  * 320px evidence rail. No backdrop: the rail stays reachable, and the layer

package/src/components/layout/side-rail.tsx

@@ -5,6 +5,7 @@ import { useActivityStore } from "../../stores/activity-store.js";
 import { useChatStore, pendingApprovals } from "../../stores/chat-store.js";
 import { useUIStore } from "../../stores/ui-store.js";
 import { useMediaQuery } from "../../hooks/use-media-query.js";
+import { useFinePointer } from "../../hooks/use-fine-pointer.js";
 
 /**
  * The desktop navigation, on the kit's `SideRail`. The kit owns the rail —
@@ -24,7 +25,11 @@ import { useMediaQuery } from "../../hooks/use-media-query.js";
  * Widths follow D22's ladder: the phone bar to 479px, this rail collapsed
  * to 60px from 480 (`tablet:`), expanded to 208px from 900 (`laptop:`). The
  * rail appears at the breakpoint the phone bar disappears at, so the two
- * never show together.
+ * never show together. Width is not a keyboard, though: a tablet in
+ * landscape crosses `tablet:` with nothing to press ⌘ on, so the caps are
+ * printed only while a fine pointer is present (#86). The bindings below
+ * stay registered either way — a paired keyboard fires them even if the
+ * query stays coarse.
  *
  * The connection status takes the wordmark's line: teal while live, amber
  * while reconnecting, red when the socket is gone. No spend meter — the app
@@ -42,19 +47,21 @@ export function SideRail() {
   const approvalCount = useChatStore((s) => pendingApprovals(s).length);
   const needsYou = inboxCount + approvalCount;
   const expanded = useMediaQuery("(min-width: 900px)");
+  const finePointer = useFinePointer();
+  const cap = (key: string) => (finePointer ? key : undefined);
 
   const items: RailItem[] = [
-    { icon: "brain", label: "Chat", shortcut: "⌘1", onClick: () => setActiveView("chat") },
+    { icon: "brain", label: "Chat", shortcut: cap("⌘1"), onClick: () => setActiveView("chat") },
     {
       icon: "resolved",
       label: "Actions",
-      shortcut: "⌘2",
+      shortcut: cap("⌘2"),
       badge: needsYou > 0 ? (needsYou > 9 ? "9+" : String(needsYou)) : undefined,
       onClick: () => setActiveView("activity"),
     },
-    { icon: "files", label: "Files", shortcut: "⌘3", onClick: toggleFilePanel },
-    { icon: "graph", label: "Graph", shortcut: "⌘4", onClick: () => setActiveView("graph") },
-    { icon: "settings", label: "Settings", shortcut: "⌘5", onClick: toggleSettingsPanel },
+    { icon: "files", label: "Files", shortcut: cap("⌘3"), onClick: toggleFilePanel },
+    { icon: "graph", label: "Graph", shortcut: cap("⌘4"), onClick: () => setActiveView("graph") },
+    { icon: "settings", label: "Settings", shortcut: cap("⌘5"), onClick: toggleSettingsPanel },
   ];
 
   // A panel over the view is "here" while it is open; otherwise the view is.

package/src/components/layout/slide-panel.tsx

@@ -16,12 +16,26 @@ const SLIDE_OUT_MS = 300;
  */
 export type SlidePanelMode = "drawer" | "pane";
 
+/**
+ * What dismisses the panel besides its own close control, in `<dialog
+ * closedby>`'s vocabulary so a later move to the element is a rename-free
+ * step. `any` (the default) is light dismiss: a click on the backdrop or
+ * Escape — right for a preview you glance at and leave. `closerequest`
+ * keeps the backdrop inert but honours Escape — for a panel holding
+ * something a stray click must not discard, like a finished log. `none`
+ * ignores both — for a panel running a job, where a reflexive Escape would
+ * cancel it. The header's X closes the drawer under every value: a rendered
+ * close control is never inert.
+ */
+export type SlidePanelClosedBy = "any" | "closerequest" | "none";
+
 export function SlidePanel({
   open,
   onClose,
   title,
   wide,
   mode = "drawer",
+  closedBy = "any",
   children,
 }: {
   open: boolean;
@@ -29,16 +43,17 @@ export function SlidePanel({
   title: string;
   wide?: boolean;
   mode?: SlidePanelMode;
+  closedBy?: SlidePanelClosedBy;
   children: ReactNode;
 }) {
   useEffect(() => {
-    if (!open) return;
+    if (!open || closedBy === "none") return;
     const handler = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [open, onClose]);
+  }, [open, onClose, closedBy]);
 
   /**
    * A closed panel renders nothing. The shell (the sliding frame and its
@@ -62,11 +77,11 @@ export function SlidePanel({
 
   return (
     <>
-      {/* Backdrop */}
+      {/* Backdrop: a click on it dismisses only a light-dismiss drawer. */}
       {open && (
         <div
           className="fixed inset-0 z-40 bg-black/40 transition-opacity md:bg-black/20"
-          onClick={onClose}
+          onClick={closedBy === "any" ? onClose : undefined}
         />
       )}
 
@@ -89,6 +104,7 @@ export function SlidePanel({
           </h2>
           <button
             onClick={onClose}
+            aria-label={`Close ${title}`}
             className="rounded-lg p-2.5 md:p-1.5 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
           >
             <X className="h-5 w-5 md:h-4 md:w-4" />

package/src/components/quick-actions/add-form.tsx

@@ -3,6 +3,7 @@ import { CheckCircle2 } from "lucide-react";
 import type { ReactNode, RefObject } from "react";
 import { useId } from "react";
 import { Kbd } from "../layout/kbd.js";
+import { useFinePointer } from "../../hooks/use-fine-pointer.js";
 
 /**
  * The "Add to brain" form, rendered from props (S6). `AddPanel` is the
@@ -52,6 +53,7 @@ export function AddForm(p: AddFormProps) {
   const typesId = useId();
   const saving = p.state === "saving";
   const canSave = p.draft.content.trim().length > 0 && !saving;
+  const finePointer = useFinePointer();
 
   function onKeyDown(e: React.KeyboardEvent) {
     // Cmd/Ctrl+Enter saves from anywhere in the form. The container refuses
@@ -155,8 +157,14 @@ export function AddForm(p: AddFormProps) {
       </div>
 
       <div className="flex items-center justify-between border-t border-border px-5 py-3">
+        {/* The hint is printed only while a fine pointer is present (#86); the
+            span stays so the buttons keep their side of the footer. */}
         <span className="text-[11px] text-muted-foreground">
-          <Kbd>Ctrl</Kbd>/<Kbd>Cmd</Kbd> + <Kbd>↵</Kbd> to save
+          {finePointer && (
+            <>
+              <Kbd>Ctrl</Kbd>/<Kbd>Cmd</Kbd> + <Kbd>↵</Kbd> to save
+            </>
+          )}
         </span>
         <div className="flex gap-2">
           <Button label="Cancel" tone="quiet" size="sm" block={false} onClick={p.onClose} />

package/src/components/quick-actions/search-modal.tsx

@@ -6,6 +6,7 @@ import { useFileStore } from "../../stores/file-store.js";
 import { useUIStore } from "../../stores/ui-store.js";
 import type { BrainSearchHit } from "../../lib/api-client.js";
 import { useBrainApi } from "../../root-context.js";
+import { useFinePointer } from "../../hooks/use-fine-pointer.js";
 import { parseSnippet } from "../../lib/search-snippet.js";
 import { cn } from "../../lib/utils.js";
 
@@ -41,6 +42,7 @@ export function SearchPanel({
   const setFilePanelOpen = useUIStore((s) => s.setFilePanelOpen);
 
   const trimmed = query.trim();
+  const finePointer = useFinePointer();
   const currentResults = resultQuery === trimmed ? results : [];
 
   const cancelSearch = useCallback(() => {
@@ -214,8 +216,14 @@ export function SearchPanel({
           ) : trimmed.length < MIN_QUERY ? (
             <Placeholder>
               <span>
-                Type at least {MIN_QUERY} characters. <Kbd>↑</Kbd> <Kbd>↓</Kbd> to
-                pick, <Kbd>↵</Kbd> to open.
+                Type at least {MIN_QUERY} characters.
+                {/* The keys are printed only while a fine pointer is present (#86). */}
+                {finePointer && (
+                  <>
+                    {" "}
+                    <Kbd>↑</Kbd> <Kbd>↓</Kbd> to pick, <Kbd>↵</Kbd> to open.
+                  </>
+                )}
               </span>
             </Placeholder>
           ) : state === "done" && results.length === 0 ? (

package/src/components/quick-actions/streaming-modal.tsx

@@ -66,6 +66,7 @@ export function StreamingPanel({
         reader = res.body.getReader();
         const decoder = new TextDecoder();
         let buffer = "";
+        let finished = false;
 
         while (true) {
           const { done, value } = await reader.read();
@@ -88,11 +89,20 @@ export function StreamingPanel({
                 setLines((l) => [...l, data.text]);
               }
               if (data.type === "done") {
+                finished = true;
                 setState(data.success ? "success" : "error");
               }
             } catch {}
           }
         }
+
+        // EOF without a `done` frame — a dropped connection, or a route that
+        // unwound past its last send. Running is not terminal, so staying in
+        // it would strand the panel on a Cancel for a stream that is gone.
+        if (!finished) {
+          setLines((l) => [...l, "The connection closed before the job reported a result."]);
+          setState("error");
+        }
       } catch (err: any) {
         if (disposed || controller.signal.aborted) return;
         if (err.name === "AbortError") {
@@ -121,10 +131,14 @@ export function StreamingPanel({
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [lines]);
 
-  const isRunning = state === "running";
+  // Closing unmounts the panel, and the unmount aborts the stream, so a stray
+  // click on the backdrop must not close it: mid-run it would cancel the job,
+  // and afterwards it would discard a log nobody has read. Escape is refused
+  // only while the job runs; the header's X is always the way out.
+  const closedBy = state === "running" ? "none" : "closerequest";
 
   return (
-    <SlidePanel open={open} onClose={isRunning ? () => {} : onClose} title={title}>
+    <SlidePanel open={open} onClose={onClose} title={title} closedBy={closedBy}>
       <StreamingOutput
         state={state}
         lines={lines.map((line) => linkifyPaths(line))}

package/src/components/quick-actions/whatsup-modal.tsx

@@ -58,6 +58,7 @@ export function WhatsupPanel({
         const decoder = new TextDecoder();
         let buffer = "";
         const lines: string[] = [];
+        let finished = false;
 
         while (true) {
           const { done, value } = await reader.read();
@@ -80,12 +81,20 @@ export function WhatsupPanel({
                 lines.push(data.text);
               }
               if (data.type === "done") {
+                finished = true;
                 setState(data.success ? "done" : "error");
               }
             } catch {}
           }
         }
 
+        // EOF without a `done` frame — a dropped connection, or a route that
+        // unwound past its last send. Loading is not terminal, so staying in
+        // it would strand the panel behind the skeleton and a Cancel.
+        if (!finished) {
+          lines.push("", "_The connection closed before the job reported a result._");
+          setState("error");
+        }
         setContent(lines.join("\n"));
       } catch (err: any) {
         if (disposed || controller.signal.aborted) return;
@@ -110,8 +119,15 @@ export function WhatsupPanel({
     };
   }, [open, root]);
 
+  // Closing unmounts the panel, and the unmount aborts the briefing, so a stray
+  // click on the backdrop must not close it: while it loads the click cancels a
+  // model call, and afterwards it discards a briefing that call paid for.
+  // Escape is refused only while the briefing loads; the header's X is always
+  // the way out.
+  const closedBy = state === "loading" ? "none" : "closerequest";
+
   return (
-    <SlidePanel open={open} onClose={onClose} title="Whatsup" wide>
+    <SlidePanel open={open} onClose={onClose} title="Whatsup" wide closedBy={closedBy}>
       <BriefingOutput
         state={state}
         content={<BrainMarkdown content={content} className="whatsup-briefing brain-prose" entityTags fileLinks />}