@schlessera/brain-ui-react 0.35.0 → 0.36.0

package/src/components/chat/mermaid-share.ts

@@ -1,4 +1,4 @@
-import { uiConfig } from "../../config.js";
+import type { BrainUiRoot } from "../../root.js";
 import { renderMermaidSvg, sizeSvgForExport } from "../../lib/mermaid.js";
 import { renderAndShare, shareFile, shareText } from "../../lib/share.js";
 import type { ShareOption } from "../share/share-menu.js";
@@ -41,6 +41,7 @@ async function exportHtml(source: string, tight: boolean): Promise<string> {
 }
 
 export function buildDiagramShareOptions(
+  root: BrainUiRoot,
   source: string,
   opts: { filename?: string } = {}
 ): ShareOption[] {
@@ -51,12 +52,12 @@ export function buildDiagramShareOptions(
       label: "Image (PNG)",
       hint: "Cropped to the diagram",
       run: async () =>
-        renderAndShare({
+        renderAndShare(root, {
           content: await exportHtml(source, true),
           contentType: "html",
           format: "png",
           filename,
-          title: uiConfig.shareTitle,
+          title: root.config.shareTitle,
         }),
     },
     {
@@ -64,12 +65,12 @@ export function buildDiagramShareOptions(
       label: "PDF",
       hint: "Vector PDF, A4",
       run: async () =>
-        renderAndShare({
+        renderAndShare(root, {
           content: await exportHtml(source, false),
           contentType: "html",
           format: "pdf",
           filename,
-          title: uiConfig.shareTitle,
+          title: root.config.shareTitle,
         }),
     },
     {
@@ -78,14 +79,14 @@ export function buildDiagramShareOptions(
       hint: "Scales to any size",
       run: async () =>
         shareFile(new File([await exportSvg(source)], `${filename}.svg`, { type: "image/svg+xml" }), {
-          title: uiConfig.shareTitle,
+          title: root.config.shareTitle,
         }),
     },
     {
       id: "source",
       label: "Mermaid source",
       hint: "Paste into another tool",
-      run: () => shareText({ text: source, title: uiConfig.shareTitle }),
+      run: () => shareText({ text: source, title: root.config.shareTitle }),
     },
   ];
 }

package/src/components/chat/mermaid-viewer.tsx

@@ -1,3 +1,4 @@
+import { useBrainUiRoot } from "../../root-context.js";
 import { useMemo } from "react";
 import { sizeSvgForExport } from "../../lib/mermaid.js";
 import { ShareMenu } from "../share/share-menu.js";
@@ -23,6 +24,7 @@ export function MermaidViewer({
   source: string;
   onClose: () => void;
 }) {
+  const root = useBrainUiRoot();
   // Mermaid ships `width: 100%` + `max-width` on the svg, which has no
   // intrinsic size to measure or to scale from. Reuse the export sizer to pin
   // it to its viewBox pixels; the viewer's transform does all the scaling.
@@ -33,7 +35,7 @@ export function MermaidViewer({
       onClose={onClose}
       refitKey={sizedSvg}
       label="Diagram viewer"
-      actions={<ShareMenu options={buildDiagramShareOptions(source)} title="Share diagram" />}
+      actions={<ShareMenu options={buildDiagramShareOptions(root, source)} title="Share diagram" />}
     >
       <div dangerouslySetInnerHTML={{ __html: sizedSvg }} />
     </ZoomViewer>

package/src/components/chat/message-bubble.tsx

@@ -1,6 +1,5 @@
-import { uiConfig } from "../../config.js";
+import { useBrainUiRoot } from "../../root-context.js";
 import { memo, useEffect, useRef, useState } from "react";
-import { ChevronDown, Sparkles, Mic, Image as ImageIcon } from "lucide-react";
 import type {
   ChatMessage,
   ToolCall,
@@ -12,11 +11,14 @@ import { ToolCallTimeline } from "./tool-call-timeline.js";
 import { MarkdownContent } from "./markdown-content.js";
 import { linkifyPaths } from "./brain-markdown.js";
 import { AskUserCard } from "./ask-user-card.js";
-import { isAskUserTool } from "../../lib/tool-names.js";
+import { isAskUserTool, isShowBlockTool } from "../../lib/tool-names.js";
+import { BlockCard } from "./tool-cards/block-card.js";
+import { SHOW_BLOCK_CONTRACT, parseToolPayload, type ShowBlockPayload } from "@schlessera/brain-ui-sdk/client";
 import { motion } from "framer-motion";
 import { buildMessageShareOptions } from "./message-share.js";
 import { ShareMenu } from "../share/share-menu.js";
 import { ZoomableImage } from "../images/zoomable-image.js";
+import { AttachmentCount, ThinkingBlock, ThinkingIndicator, TurnHeader, UserTurn } from "./transcript-turn.js";
 
 /**
  * One message in the transcript.
@@ -28,12 +30,18 @@ import { ZoomableImage } from "../images/zoomable-image.js";
  *
  * The contract that keeps it working: every callback prop must be stable.
  * ChatPage wraps all three in useCallback for exactly this reason.
+ *
+ * This is the container (S7): it reads the message, groups its parts and
+ * routes the tool timelines, ask cards and markdown; the frame — header,
+ * user bubble, thinking disclosure, the streaming dot — is
+ * `transcript-turn.tsx`, on the kit.
  */
 export const MessageBubble = memo(function MessageBubble({
   message,
   onToolApproval,
   onAskUserSubmit,
   onAskUserCancel,
+  onAskUserReask,
 }: {
   message: ChatMessage;
   onToolApproval: (toolUseId: string, approved: boolean) => void;
@@ -43,7 +51,10 @@ export const MessageBubble = memo(function MessageBubble({
     annotations?: Record<string, AskUserAnnotation>
   ) => void;
   onAskUserCancel: (requestId: string) => void;
+  /** A dismissed question asked again answers by composer message. */
+  onAskUserReask?: (text: string) => void;
 }) {
+  const root = useBrainUiRoot();
   const isUser = message.role === "user";
 
   return (
@@ -53,53 +64,30 @@ export const MessageBubble = memo(function MessageBubble({
       transition={{ duration: 0.2, ease: "easeOut" }}
       className="py-4"
     >
-      {/* Label row */}
-      <div className="mb-2 flex items-center gap-3">
-        <span
-          className={
-            isUser
-              ? "select-none font-[family-name:var(--font-mono)] text-xs font-semibold uppercase tracking-widest text-primary/80"
-              : "select-none font-[family-name:var(--font-mono)] text-xs font-semibold uppercase tracking-widest text-accent/80"
-          }
-        >
-          {isUser ? "You" : uiConfig.assistantName}
-        </span>
-        <div className="h-px flex-1 bg-border/40" />
-        {isUser && message.source && message.source !== "typed" && (
-          <Mic
-            className={
-              message.source === "voice-conversation"
-                ? "h-3 w-3 text-primary/70"
-                : "h-3 w-3 text-primary/50"
-            }
-            aria-label={
-              message.source === "voice-conversation"
-                ? "Voice conversation"
-                : "Voice dictation"
-            }
-          />
-        )}
-        <span className="font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/40">
-          {formatTime(message.timestamp)}
-        </span>
-      </div>
+      <TurnHeader
+        who={isUser ? "You" : root.config.assistantName}
+        when={formatTime(message.timestamp)}
+        voice={isUser && message.source && message.source !== "typed" ? message.source : undefined}
+        tone={isUser ? "user" : "brain"}
+      />
 
       {/* Content */}
       {isUser ? (
-        <div className="space-y-2">
+        <UserTurn>
           <UserAttachments message={message} />
           {message.content && (
             <div className="chat-message-body text-sm leading-relaxed text-foreground whitespace-pre-wrap">
               {linkifyPaths(message.content)}
             </div>
           )}
-        </div>
+        </UserTurn>
       ) : (
         <AssistantContent
           message={message}
           onToolApproval={onToolApproval}
           onAskUserSubmit={onAskUserSubmit}
           onAskUserCancel={onAskUserCancel}
+          onAskUserReask={onAskUserReask}
         />
       )}
     </motion.div>
@@ -131,12 +119,7 @@ function UserAttachments({ message }: { message: ChatMessage }) {
   }
 
   if (message.attachmentCount && message.attachmentCount > 0) {
-    return (
-      <div className="inline-flex items-center gap-1.5 rounded-lg border border-border/40 bg-surface/50 px-2.5 py-1 text-xs text-muted-foreground">
-        <ImageIcon className="h-3.5 w-3.5" />
-        {message.attachmentCount} image{message.attachmentCount === 1 ? "" : "s"}
-      </div>
-    );
+    return <AttachmentCount count={message.attachmentCount} />;
   }
 
   return null;
@@ -149,9 +132,10 @@ function UserAttachments({ message }: { message: ChatMessage }) {
  */
 type PartGroup =
   | { kind: "thinking"; text: string; isLast: boolean }
-  | { kind: "text"; text: string; isLast: boolean; isLastText: boolean }
+  | { kind: "text"; text: string; isLast: boolean; isLastText: boolean; textIndex: number }
   | { kind: "tools"; toolCalls: ToolCall[]; isLast: boolean }
-  | { kind: "askUser"; exchange: AskUserExchange; isLast: boolean };
+  | { kind: "askUser"; exchange: AskUserExchange; isLast: boolean }
+  | { kind: "block"; payload: ShowBlockPayload; isLast: boolean };
 
 function groupParts(
   parts: MessagePart[],
@@ -163,6 +147,8 @@ function groupParts(
   // to its exchange and renders as its own AskUserCard at that chronological
   // spot, so it collapses and scrolls away like the surrounding events.
   let askUserSeen = 0;
+  // Ordinal among TEXT parts: classified blocks (D42) are anchored to it.
+  let textSeen = 0;
   for (const part of parts) {
     if (part.kind === "tool") {
       const tool = toolCalls[part.toolIndex];
@@ -176,6 +162,17 @@ function groupParts(
         }
         continue;
       }
+      if (isShowBlockTool(tool.name)) {
+        // A block is part of the answer, not a step in the trace (D41): it
+        // renders inline where it was called. Until the echo arrives, and
+        // when it does not parse (a rejected call, an older server), the
+        // call stays in the timeline, where its bound fallback states why.
+        const payload = parseToolPayload(SHOW_BLOCK_CONTRACT, tool.output);
+        if (payload) {
+          groups.push({ kind: "block", payload, isLast: false });
+          continue;
+        }
+      }
       const last = groups[groups.length - 1];
       if (last?.kind === "tools") {
         last.toolCalls.push(tool);
@@ -183,7 +180,14 @@ function groupParts(
         groups.push({ kind: "tools", toolCalls: [tool], isLast: false });
       }
     } else if (part.text.trim()) {
-      groups.push({ kind: part.kind, text: part.text, isLast: false, isLastText: false });
+      if (part.kind === "text") {
+        groups.push({ kind: "text", text: part.text, isLast: false, isLastText: false, textIndex: textSeen++ });
+      } else {
+        groups.push({ kind: "thinking", text: part.text, isLast: false });
+      }
+    } else if (part.kind === "text") {
+      // An all-whitespace text part still counts toward the ordinal.
+      textSeen++;
     }
   }
   const last = groups[groups.length - 1];
@@ -198,11 +202,19 @@ function groupParts(
   return groups;
 }
 
+/** The classified blocks anchored to the n-th text part, or nothing. */
+function blocksFor(message: ChatMessage, textIndex: number) {
+  if (!message.blocks || message.blocks.length === 0) return undefined;
+  const own = message.blocks.filter((b) => b.partIndex === textIndex);
+  return own.length ? own : undefined;
+}
+
 function AssistantContent({
   message,
   onToolApproval,
   onAskUserSubmit,
   onAskUserCancel,
+  onAskUserReask,
 }: {
   message: ChatMessage;
   onToolApproval: (toolUseId: string, approved: boolean) => void;
@@ -212,12 +224,15 @@ function AssistantContent({
     annotations?: Record<string, AskUserAnnotation>
   ) => void;
   onAskUserCancel: (requestId: string) => void;
+  /** A dismissed question asked again answers by composer message. */
+  onAskUserReask?: (text: string) => void;
 }) {
+  const root = useBrainUiRoot();
   const contentRef = useRef<HTMLDivElement>(null);
   const showShare =
     !message.isStreaming && !!message.content && message.content.trim().length > 0;
   const shareOptions = showShare
-    ? buildMessageShareOptions({
+    ? buildMessageShareOptions(root, {
         content: message.content,
         renderedRef: contentRef,
       })
@@ -263,6 +278,8 @@ function AssistantContent({
                 live={message.isStreaming}
               />
             );
+          case "block":
+            return <BlockCard key={i} {...group.payload} />;
           case "askUser":
             return (
               <AskUserCard
@@ -271,9 +288,11 @@ function AssistantContent({
                 questions={group.exchange.questions}
                 answered={group.exchange.answers}
                 cancelled={group.exchange.cancelled}
-                live={message.isStreaming}
+                typed={group.exchange.typed}
+                answeredAt={group.exchange.answeredAt}
                 onSubmit={onAskUserSubmit}
                 onCancel={onAskUserCancel}
+                onReask={onAskUserReask}
               />
             );
           case "text":
@@ -285,7 +304,7 @@ function AssistantContent({
                     wrapper: content-visibility implies paint containment,
                     which would clip a dropdown that opens past the box. */}
                 <div className="chat-message-body">
-                  <MarkdownContent content={group.text} />
+                  <MarkdownContent content={group.text} blocks={blocksFor(message, group.textIndex)} />
                 </div>
                 {showShare && shareOptions.length > 0 && (
                   <div className="mt-1 flex justify-end opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
@@ -295,7 +314,7 @@ function AssistantContent({
               </div>
             ) : (
               <div key={i} className="chat-message-body">
-                <MarkdownContent content={group.text} />
+                <MarkdownContent content={group.text} blocks={blocksFor(message, group.textIndex)} />
               </div>
             );
         }
@@ -308,21 +327,15 @@ function AssistantContent({
           questions={ex.questions}
           answered={ex.answers}
           cancelled={ex.cancelled}
-          live={message.isStreaming}
+          typed={ex.typed}
+          answeredAt={ex.answeredAt}
           onSubmit={onAskUserSubmit}
           onCancel={onAskUserCancel}
+          onReask={onAskUserReask}
         />
       ))}
 
-      {message.isStreaming && groups.length === 0 && unmatchedExchanges.length === 0 && (
-        <div className="flex items-center gap-2 text-xs text-muted-foreground">
-          <span
-            className="inline-block h-1.5 w-1.5 rounded-full bg-primary"
-            style={{ animation: "breathe 2s ease-in-out infinite" }}
-          />
-          Thinking...
-        </div>
-      )}
+      {message.isStreaming && groups.length === 0 && unmatchedExchanges.length === 0 && <ThinkingIndicator />}
     </div>
   );
 }
@@ -344,43 +357,14 @@ function ThinkingSection({
     prevStreaming.current = isStreaming;
   }, [isStreaming]);
 
-  if (!isStreaming && !expanded) {
-    // Collapsed: minimal clickable text
-    const estimatedTokens = Math.round(content.length / 4);
-    return (
-      <button
-        onClick={() => setExpanded(true)}
-        className="flex items-center gap-1.5 text-xs text-muted-foreground/50 transition-colors hover:text-muted-foreground"
-      >
-        <Sparkles className="h-3 w-3" />
-        <span className="font-[family-name:var(--font-mono)]">
-          Thought for ~{estimatedTokens} tokens
-        </span>
-        <ChevronDown className="h-3 w-3" />
-      </button>
-    );
-  }
-
   return (
-    <div className="rounded-lg bg-surface/50 px-4 py-3">
-      {!isStreaming && (
-        <button
-          onClick={() => setExpanded(false)}
-          className="mb-2 text-[11px] font-medium text-muted-foreground/50 transition-colors hover:text-muted-foreground"
-        >
-          Hide thinking
-        </button>
-      )}
-      <div className="font-[family-name:var(--font-mono)] text-xs leading-relaxed text-muted-foreground/60 italic whitespace-pre-wrap">
-        {linkifyPaths(content)}
-        {isStreaming && (
-          <span
-            className="inline-block h-1.5 w-1.5 rounded-full bg-primary ml-1"
-            style={{ animation: "breathe 2s ease-in-out infinite" }}
-          />
-        )}
-      </div>
-    </div>
+    <ThinkingBlock
+      content={linkifyPaths(content)}
+      chars={content.length}
+      streaming={isStreaming}
+      open={expanded}
+      onOpenChange={setExpanded}
+    />
   );
 }
 

package/src/components/chat/message-share.ts

@@ -1,4 +1,4 @@
-import { uiConfig } from "../../config.js";
+import type { BrainUiRoot } from "../../root.js";
 import type { RefObject } from "react";
 import { renderAndShare, shareFile, shareText, copyRichText } from "../../lib/share.js";
 import { stripMarkdown } from "../../lib/strip-markdown.js";
@@ -11,7 +11,7 @@ interface BuildOpts {
   renderedRef: RefObject<HTMLElement | null>;
 }
 
-export function buildMessageShareOptions({ content, renderedRef }: BuildOpts): ShareOption[] {
+export function buildMessageShareOptions(root: BrainUiRoot, { content, renderedRef }: BuildOpts): ShareOption[] {
   const plain = () => stripMarkdown(content);
 
   return [
@@ -20,14 +20,14 @@ export function buildMessageShareOptions({ content, renderedRef }: BuildOpts): S
       label: "Image (PNG)",
       hint: "Rendered snapshot",
       run: async () =>
-        renderAndShare({
+        renderAndShare(root, {
           // The render page runs without JavaScript, so mermaid fences are
           // pre-rendered to inline SVG here on the client.
           content: await inlineMermaidDiagrams(content),
           contentType: "markdown",
           format: "png",
           filename: "message",
-          title: uiConfig.shareTitle,
+          title: root.config.shareTitle,
         }),
     },
     {
@@ -35,12 +35,12 @@ export function buildMessageShareOptions({ content, renderedRef }: BuildOpts): S
       label: "PDF",
       hint: "Vector PDF, A4",
       run: async () =>
-        renderAndShare({
+        renderAndShare(root, {
           content: await inlineMermaidDiagrams(content),
           contentType: "markdown",
           format: "pdf",
           filename: "message",
-          title: uiConfig.shareTitle,
+          title: root.config.shareTitle,
         }),
     },
     {
@@ -55,7 +55,7 @@ export function buildMessageShareOptions({ content, renderedRef }: BuildOpts): S
       hint: "Raw markdown verbatim",
       run: () =>
         shareFile(new File([content], "message.md", { type: "text/markdown" }), {
-          title: uiConfig.shareTitle,
+          title: root.config.shareTitle,
         }),
     },
     {

package/src/components/chat/renderers/bind.tsx

@@ -0,0 +1,94 @@
+/**
+ * `bind(contract, Component)` — the client half of D3.
+ *
+ * The contract owns the payload schema; the component is typed
+ * `ToolPayload<contract>`, so a component that reads a field the tool stopped
+ * sending is a `tsc` error rather than an empty line in a chat log. At runtime
+ * the payload is parsed through the same schema, and a result that does not
+ * parse falls through to the caller's fallback view instead of throwing: the
+ * work already happened and the reader still wants to see it.
+ *
+ * One contract produces several renderers, because the same tool has a
+ * different name on each backend — `mcp__brain-ui__x` on Claude, bare `x` on
+ * pi, plus the pre-rename `mcp__brain_ui__x` that old transcripts carry. The
+ * timeline resolves on the raw streamed name, so all three are registered
+ * globally rather than scoped to one backend.
+ */
+
+import type { ComponentType } from "react";
+import {
+  parseToolPayload,
+  visibleToolName,
+  type ToolCallView,
+  type ToolComponentContract,
+  type ToolPayload,
+  type ToolRenderer,
+} from "@schlessera/brain-ui-sdk/client";
+
+/** Pre-rename MCP server prefix, still present in resumed transcripts. */
+const LEGACY_MCP_PREFIX = "mcp__brain_ui__";
+
+/** Every spelling of a contract's tool name that can arrive in the stream. */
+export function boundToolNames(contract: ToolComponentContract): string[] {
+  return [
+    visibleToolName(contract.name, "pi"),
+    visibleToolName(contract.name, "claude"),
+    `${LEGACY_MCP_PREFIX}${contract.name}`,
+  ];
+}
+
+export interface BindOptions<Contract extends ToolComponentContract> {
+  icon?: ToolRenderer["icon"];
+  label?: string;
+  /** Collapsed one-liner, from the parsed payload. */
+  summary?: (payload: ToolPayload<Contract>, tool: ToolCallView) => string | null;
+  /** Secondary metadata line, from the parsed payload. */
+  meta?: (payload: ToolPayload<Contract>, tool: ToolCallView) => string | null;
+  /** Input view; the contract does not type this, the tool's own input does. */
+  Input?: ToolRenderer["Input"];
+  /**
+   * Rendered when the output is absent, is prose, or fails the payload schema
+   * — an errored call, an older server, a tool that answered with a message.
+   */
+  Fallback?: ComponentType<{ tool: ToolCallView }>;
+}
+
+export function bind<Contract extends ToolComponentContract>(
+  contract: Contract,
+  Component: ComponentType<ToolPayload<Contract>>,
+  options: BindOptions<Contract> = {}
+): ToolRenderer[] {
+  const { Fallback } = options;
+
+  // TS cannot spread an unresolved generic into JSX, so the spread — and only
+  // the spread — goes through an untyped alias. The public parameter above is
+  // what carries the guarantee: `Component` must accept the contract's payload.
+  const Spread = Component as ComponentType<Record<string, unknown>>;
+
+  function Output({ tool }: { tool: ToolCallView }) {
+    const payload = parseToolPayload(contract, tool.output);
+    if (payload === null) return Fallback ? <Fallback tool={tool} /> : null;
+    return <Spread {...(payload as Record<string, unknown>)} />;
+  }
+
+  function fromPayload(
+    read: ((payload: ToolPayload<Contract>, tool: ToolCallView) => string | null) | undefined
+  ): ((tool: ToolCallView) => string | null) | undefined {
+    if (!read) return undefined;
+    return (tool: ToolCallView) => {
+      const payload = parseToolPayload(contract, tool.output);
+      return payload === null ? null : read(payload, tool);
+    };
+  }
+
+  const renderer: Omit<ToolRenderer, "match"> = {
+    ...(options.icon ? { icon: options.icon } : {}),
+    ...(options.label ? { label: options.label } : {}),
+    ...(options.summary ? { summary: fromPayload(options.summary)! } : {}),
+    ...(options.meta ? { meta: fromPayload(options.meta)! } : {}),
+    ...(options.Input ? { Input: options.Input } : {}),
+    Output,
+  };
+
+  return boundToolNames(contract).map((match) => ({ match, ...renderer }));
+}

package/src/components/chat/renderers/brain-ui-tools.tsx

@@ -0,0 +1,56 @@
+// The chat UI's own in-process tools, rendered from their contracts.
+//
+// Unlike the per-backend packs, this one is GLOBAL: the same contract is
+// exposed by every backend under that backend's spelling of the name, so
+// `bind()` registers each spelling and resolution does not depend on which
+// backend owns the session. That also fixes a real gap — the location result
+// only ever had a renderer under Claude's MCP-prefixed name, so the identical
+// tool on pi fell through to the generic JSON view.
+
+import type { RendererPack } from "@schlessera/brain-ui-sdk/client";
+import {
+  GET_CURRENT_LOCATION_CONTRACT,
+  REQUEST_IMAGE_MASK_CONTRACT,
+  SHOW_BLOCK_CONTRACT,
+} from "@schlessera/brain-ui-sdk/client";
+import { LayoutGrid, MapPin, Scissors } from "lucide-react";
+import { BlockCard, blockSummary } from "../tool-cards/block-card.js";
+import { LocationResultCard } from "../tool-cards/location-card.js";
+import { ImageMaskResultCard, ImageMaskFallback } from "../tool-cards/image-mask-card.js";
+import { ClampedPre } from "../tool-views.js";
+import { bind } from "./bind.js";
+
+export const brainUiToolPack: RendererPack = {
+  renderers: [
+    ...bind(GET_CURRENT_LOCATION_CONTRACT, LocationResultCard, {
+      icon: MapPin,
+      label: "Location",
+      summary: (payload) => payload.place ?? payload.address ?? null,
+      meta: (payload) => `±${Math.round(payload.accuracyMeters)} m`,
+      // A denial, a timeout or a browser without geolocation answers with a
+      // message, not a payload — the reader needs to see WHY there is no fix.
+      Fallback: ({ tool }) =>
+        tool.output ? <ClampedPre text={tool.output} isError={tool.isError} /> : null,
+    }),
+    ...bind(REQUEST_IMAGE_MASK_CONTRACT, ImageMaskResultCard, {
+      icon: Scissors,
+      label: "Mask",
+      summary: (payload) => payload.imagePath,
+      meta: (payload) => `mask ${payload.maskPath}`,
+      // A declined mask is an error with a message, not a payload. The fact
+      // belongs in the transcript in red, from the result's own words.
+      Fallback: ImageMaskFallback,
+    }),
+    // Rendered inline at the call's position by the transcript, not in the
+    // timeline; this binding is what the timeline uses when the payload does
+    // not parse (a rejected call, an older server), so the fact reaches the
+    // reader in the result's own words rather than as a blank.
+    ...bind(SHOW_BLOCK_CONTRACT, BlockCard, {
+      icon: LayoutGrid,
+      label: "Block",
+      summary: (payload) => blockSummary(payload),
+      Fallback: ({ tool }) =>
+        tool.output ? <ClampedPre text={tool.output} isError={tool.isError} /> : null,
+    }),
+  ],
+};

package/src/components/chat/renderers/claude-tools.tsx

@@ -10,7 +10,6 @@ import type {
   ToolSemantics,
 } from "@schlessera/brain-ui-sdk/client";
 import type { ToolCall } from "../../../stores/chat-store.js";
-import { GET_LOCATION_TOOL_NAME } from "../../../lib/tool-names.js";
 import {
   getToolIcon,
   getToolSummary,
@@ -34,7 +33,9 @@ const CLAUDE_TOOL_NAMES = [
   "Skill",
   "NotebookEdit",
   "LSP",
-  GET_LOCATION_TOOL_NAME,
+  // `mcp__brain-ui__get_current_location` is deliberately NOT here: it is one
+  // of the chat UI's own contract-bound tools (`brain-ui-tools.tsx`), and a
+  // backend-scoped entry would beat that global renderer.
 ];
 
 // The shared views read brain-ui's richer ToolCall (status, inputJson, timing).