@schlessera/brain-ui-react 0.34.1 → 0.36.0

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

@@ -1,4 +1,5 @@
-import { useState, useEffect, useRef } from "react";
+import { useBrainUiRoot } from "../../root-context.js";
+import { useState, useEffect, useRef, type KeyboardEvent } from "react";
 import {
   Check,
   X,
@@ -9,7 +10,7 @@ import {
   AlertTriangle,
   FileText,
 } from "lucide-react";
-import { resolveToolRenderer, type ToolSemantics } from "@schlessera/brain-ui-sdk/client";
+import { type ToolSemantics } from "@schlessera/brain-ui-sdk/client";
 import { useChatStore, type ToolCall } from "../../stores/chat-store.js";
 import { cn } from "../../lib/utils.js";
 import { motion, AnimatePresence } from "framer-motion";
@@ -17,6 +18,8 @@ import { getToolLabel, getTouchedFile, formatDuration, formatTokenCount } from "
 import { registerBuiltinRenderers, GENERIC_RENDERER } from "./renderers/index.js";
 import { riskHints } from "./risk-hints.js";
 import { useShallow } from "zustand/react/shallow";
+import { focusAfterDecision, singleKey } from "../../lib/single-key.js";
+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";
@@ -46,7 +49,8 @@ export function ToolCallTimeline({
   live?: boolean;
 }) {
   // Resolution happens below during this render, before effects can run.
-  registerBuiltinRenderers();
+  const root = useBrainUiRoot();
+  registerBuiltinRenderers(root.renderers);
 
   // Collapse the whole run to a summary row once the turn is over. History
   // messages mount collapsed; a live timeline collapses when streaming ends.
@@ -108,12 +112,13 @@ function TimelineSummaryRow({
   backendId: string;
   onExpand: () => void;
 }) {
+  const root = useBrainUiRoot();
   const steps = toolCalls.length;
   const files = new Set(
     toolCalls
       .map(
         (t) =>
-          resolveToolRenderer(t, backendId)?.touchedFile?.(t) ?? getTouchedFile(t)
+          root.renderers.resolve(t, backendId)?.touchedFile?.(t) ?? getTouchedFile(t)
       )
       .filter(Boolean)
   ).size;
@@ -156,6 +161,7 @@ function ToolCallEntry({
   backendId: string;
   onApproval: (toolUseId: string, approved: boolean, always?: boolean) => void;
 }) {
+  const root = useBrainUiRoot();
   const [expanded, setExpanded] = useState(
     toolCall.status === "pending_approval"
   );
@@ -175,13 +181,30 @@ function ToolCallEntry({
     : toolCall;
   // Resolve the renderer for this tool (backend-scoped exact -> global exact ->
   // shape-sniffing predicate). Falls back to the generic renderer.
-  const renderer = resolveToolRenderer(toolCall, backendId) ?? GENERIC_RENDERER;
+  const renderer = root.renderers.resolve(toolCall, backendId) ?? GENERIC_RENDERER;
   const Icon = renderer.icon ?? FileText;
   const label =
     typeof renderer.label === "function"
       ? renderer.label(toolCall)
       : renderer.label ?? getToolLabel(toolCall.name);
   const isPending = toolCall.status === "pending_approval";
+  const keys = useUIStore((s) => s.singleKeyShortcuts);
+  /**
+   * A decision hands focus on before the card goes (D36): the next pending
+   * approval in the transcript, else the composer — the thing the reader
+   * continues with, since a chat has no empty-state heading to land on.
+   */
+  function decide(card: HTMLElement | null, approved: boolean, always?: boolean) {
+    if (card) focusAfterDecision(card, "[data-approval-card]", "textarea[data-composer]");
+    onApproval(toolCall.id, approved, always);
+  }
+  function onCardKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (!keys) return;
+    const key = singleKey(event);
+    if (key !== "a" && key !== "d") return;
+    event.preventDefault();
+    decide(event.currentTarget, key === "a");
+  }
   const summary = renderer.summary?.(timed) ?? null;
   const meta = renderer.meta?.(timed) ?? null;
   const Input = renderer.Input;
@@ -204,17 +227,18 @@ function ToolCallEntry({
 
   return (
     <div className="relative">
-      {/* Timeline dot */}
+      {/* Timeline dot: a bare mark with no content, so it takes the MARK
+          weight — a fill sits at 1.3-1.8:1 on paper at any diameter. */}
       <div
         className={cn(
           "absolute -left-[21px] top-2 h-2.5 w-2.5 rounded-full border-2 border-background",
-          toolCall.status === "streaming" && "bg-primary animate-pulse",
+          toolCall.status === "streaming" && "bg-primary-mark animate-pulse",
           toolCall.status === "pending_approval" &&
-            "bg-primary",
-          toolCall.status === "approved" && "bg-accent",
-          toolCall.status === "denied" && "bg-destructive",
+            "bg-primary-mark",
+          toolCall.status === "approved" && "bg-accent-mark",
+          toolCall.status === "denied" && "bg-destructive-mark",
           toolCall.status === "complete" &&
-            (toolCall.isError ? "bg-destructive" : "bg-accent"),
+            (toolCall.isError ? "bg-destructive-mark" : "bg-accent-mark"),
           !["streaming", "pending_approval", "approved", "denied", "complete"].includes(toolCall.status) && "bg-muted-foreground"
         )}
         style={
@@ -275,7 +299,7 @@ function ToolCallEntry({
               className={cn(
                 "mt-1 rounded-lg p-3 space-y-2",
                 isPending
-                  ? "border-2 border-primary/40 bg-primary/5"
+                  ? "border-2 border-primary/40 bg-primary-fill/5"
                   : "border border-border-subtle bg-surface"
               )}
             >
@@ -291,30 +315,42 @@ function ToolCallEntry({
                   requests — a destructive-command confirmation (kind
                   "command") stays per-use. */}
               {isPending && (
-                <div className="flex flex-wrap gap-2">
+                // The card is the focus scope for `a` / `d` (D36): the keys
+                // act only while it, or a button inside it, holds focus, and
+                // they are printed on the buttons they belong to.
+                <div
+                  data-approval-card=""
+                  role="group"
+                  aria-label={`Approval: ${label}`}
+                  tabIndex={0}
+                  onKeyDown={onCardKeyDown}
+                  className="flex flex-wrap gap-2 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                >
                   <button
-                    onClick={() => onApproval(toolCall.id, true)}
-                    className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:brightness-110"
+                    onClick={(e) => decide(e.currentTarget.closest("[data-approval-card]"), true)}
+                    className="flex items-center gap-1.5 rounded-lg bg-primary-fill px-4 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:brightness-110"
                   >
                     <Check className="h-3 w-3" />
                     Allow
+                    {keys && <KeyCap>a</KeyCap>}
                   </button>
                   {toolCall.approvalKind !== "command" && (
                     <button
-                      onClick={() => onApproval(toolCall.id, true, true)}
+                      onClick={(e) => decide(e.currentTarget.closest("[data-approval-card]"), true, true)}
                       title={`Allow ${toolCall.name} without asking from now on (revocable in Settings → Models)`}
-                      className="flex items-center gap-1.5 rounded-lg border border-primary/40 px-4 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/10"
+                      className="flex items-center gap-1.5 rounded-lg border border-primary/40 px-4 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary-fill/10"
                     >
                       <Check className="h-3 w-3" />
                       Always allow
                     </button>
                   )}
                   <button
-                    onClick={() => onApproval(toolCall.id, false)}
-                    className="flex items-center gap-1.5 rounded-lg border border-destructive/30 px-4 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/10"
+                    onClick={(e) => decide(e.currentTarget.closest("[data-approval-card]"), false)}
+                    className="flex items-center gap-1.5 rounded-lg border border-destructive/30 px-4 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive-fill/10"
                   >
                     <X className="h-3 w-3" />
                     Deny
+                    {keys && <KeyCap>d</KeyCap>}
                   </button>
                 </div>
               )}
@@ -389,7 +425,7 @@ function RiskHints({
   const hints = riskHints(toolCall, semantics);
   if (hints.length === 0) return null;
   return (
-    <div className="space-y-0.5 text-[11px] text-amber-400">
+    <div className="space-y-0.5 text-[11px] text-primary">
       {hints.map((hint) => (
         <div key={hint} className="flex items-center gap-1.5">
           <AlertTriangle className="h-3 w-3 shrink-0" />
@@ -410,11 +446,11 @@ function StatusIndicator({
   switch (status) {
     case "streaming":
       return (
-        <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
+        <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-primary-mark" />
       );
     case "pending_approval":
       return (
-        <span className="rounded bg-primary/20 px-1.5 py-0.5 text-[10px] font-medium text-primary">
+        <span className="rounded bg-primary-fill/20 px-1.5 py-0.5 text-[10px] font-medium text-primary">
           Approval needed
         </span>
       );
@@ -430,3 +466,4 @@ function StatusIndicator({
       );
   }
 }
+

package/src/components/chat/tool-cards/block-card.tsx

@@ -0,0 +1,145 @@
+/**
+ * The `show_block` result: one of the kit's answer blocks, drawn inline (D41).
+ *
+ * A switch typed by the contract's payload, handing each variant to its kit
+ * component. That typing is the drift check the contract promised: a schema
+ * field the kit does not accept fails here, and the kit's own tone unions are
+ * asserted equal to the schema's lists in `tests/block-contract.test-d.ts`.
+ *
+ * Icons come from the model as strings; the kit's `Icon` renders an empty
+ * box for a key it does not know, so unknown keys are dropped before the
+ * prop is handed on. Optional TEXT props are the other translation: the kit
+ * ports the design's demo defaults, so a `QuoteCard` with no `source` names
+ * a forecast from the Odysseus fixture world and a `ContactCard` with no
+ * `label` is Penelope, and omitted `facts` or `ticks` draw a demo list. Each
+ * of those components honours an empty string or an empty array as
+ * "cleared", so an omitted field is handed on as `""` or `[]` rather than
+ * `undefined`. Everything else is passed through untouched: the schema
+ * already rejected what the kit cannot draw.
+ */
+
+import {
+  BarList,
+  ComparisonTable,
+  ContactCard,
+  DataTable,
+  ICONS,
+  QuoteCard,
+  Receipt,
+  ScheduleList,
+  StatTiles,
+  StepList,
+  TimelineList,
+  TrendChart,
+  type IconName,
+} from "@schlessera/brain-ui-kit";
+import type { Block, ShowBlockPayload } from "@schlessera/brain-ui-sdk/client";
+
+/** A kit icon key, or nothing when the model named one the kit lacks. */
+export function kitIcon(name: string | undefined): IconName | undefined {
+  // An own-property check: `"constructor" in ICONS` is true through the
+  // prototype, and the kit would then try to render a function that is not
+  // a component.
+  return name !== undefined && Object.hasOwn(ICONS, name) ? (name as IconName) : undefined;
+}
+
+/** An omitted optional text prop, cleared rather than left to the kit's demo default. */
+const text = (value: string | undefined): string => value ?? "";
+
+/** The collapsed one-liner for the trace: `comparison · 3 columns · 4 rows`. */
+export function blockSummary({ block }: ShowBlockPayload): string {
+  const count = (n: number, noun: string) => `${n} ${noun}${n === 1 ? "" : "s"}`;
+  switch (block.kind) {
+    case "comparison":
+      return `comparison · ${count(block.columns.length, "column")} · ${count(block.rows.length, "row")}`;
+    case "stats":
+      return `stats · ${count(block.tiles.length, "tile")}`;
+    case "trend":
+      return `trend · ${block.label ?? block.value ?? count(block.values.length, "point")}`;
+    case "table":
+      return `table · ${count(block.columns.length, "column")} · ${count(block.rows.length, "row")}`;
+    case "bars":
+      return `bars · ${count(block.rows.length, "row")}`;
+    case "receipt":
+      return `receipt · ${block.title ?? count(block.rows.length, "row")}`;
+    case "steps":
+      return `steps · ${count(block.steps.length, "step")}`;
+    case "timeline":
+      return `timeline · ${count(block.items.length, "event")}`;
+    case "schedule":
+      return `schedule · ${count(block.groups.length, "day")}`;
+    case "quote":
+      return `quote · ${block.source ?? "unattributed"}`;
+    case "contact":
+      return `contact · ${block.label}`;
+  }
+}
+
+function BlockView({ block }: { block: Block }) {
+  switch (block.kind) {
+    case "comparison": {
+      const { kind: _kind, footnote, ...props } = block;
+      return <ComparisonTable {...props} footnote={text(footnote)} />;
+    }
+    case "stats":
+      return (
+        <StatTiles
+          tiles={block.tiles.map((tile) => ({ ...tile, icon: kitIcon(tile.icon) }))}
+        />
+      );
+    case "trend": {
+      const { kind: _kind, label, value, ticks, ...props } = block;
+      return <TrendChart {...props} label={text(label)} value={text(value)} ticks={ticks ?? []} />;
+    }
+    case "table": {
+      const { kind: _kind, ...props } = block;
+      return <DataTable {...props} />;
+    }
+    case "bars":
+      return <BarList rows={block.rows} />;
+    case "receipt": {
+      const { kind: _kind, title, titleIcon, footnote, ...props } = block;
+      return (
+        <Receipt
+          {...props}
+          title={text(title)}
+          titleIcon={kitIcon(titleIcon)}
+          footnote={text(footnote)}
+        />
+      );
+    }
+    case "steps": {
+      const { kind: _kind, ...props } = block;
+      return <StepList {...props} />;
+    }
+    case "timeline":
+      return <TimelineList items={block.items} />;
+    case "schedule":
+      return <ScheduleList groups={block.groups} />;
+    case "quote": {
+      const { kind: _kind, icon, source, locator, note, ...props } = block;
+      return (
+        <QuoteCard
+          {...props}
+          source={text(source)}
+          locator={text(locator)}
+          note={text(note)}
+          icon={kitIcon(icon)}
+        />
+      );
+    }
+    case "contact": {
+      const { kind: _kind, contactKind, role, facts, ...props } = block;
+      return <ContactCard {...props} kind={contactKind} role={text(role)} facts={facts ?? []} />;
+    }
+  }
+}
+
+/** Bound to `SHOW_BLOCK_CONTRACT`; receives the parsed payload as props. */
+export function BlockCard({ block }: ShowBlockPayload) {
+  return (
+    <div data-block={block.kind}>
+      <BlockView block={block} />
+    </div>
+  );
+}

package/src/components/chat/tool-cards/image-mask-card.tsx

@@ -0,0 +1,214 @@
+/**
+ * The `request_image_mask` result: a receipt, not a path (D38 §2).
+ *
+ * The source thumb — hatched, as everywhere: no remote image loads inline for
+ * the source — stacked ABOVE a kit `Receipt` (the truncation rule: a receipt
+ * value column under ~160px means change the layout, not the break rule).
+ *
+ * Typed `ImageMaskPayload`, so the rows are the fields the handler actually
+ * sends: `imagePath`, `maskPath`, `bytes`. The design also draws a region and
+ * a coverage row; the payload carries neither. The seventh drop's ruling 8
+ * settles what happens then: **state the absence**. The receipt's `region`
+ * row reads "region not recorded", in gold, rather than disappearing — a
+ * load-bearing fact that vanishes cannot be told apart from a whole-image
+ * mask, and a later answer citing that receipt would be citing a gap. A
+ * caller that does supply a region (the view test) gets the figures.
+ *
+ * And the mask itself is DRAWN over the thumb whenever its bytes exist: the
+ * PNG the handler wrote is fetched from the files API and laid over the
+ * hatch, with the teal region fill beneath it so the transparent (editable)
+ * pixels show as the user's answer. When the bytes do not exist the thumb
+ * shows the source alone with a mono line saying the mask was not rendered.
+ *
+ * Failure is a fact about the evidence, not a dialog: a declined or failed
+ * mask comes back as a tool error with a message, and `ImageMaskFallback`
+ * states it in a red boxed mono `Callout` from the result's own words.
+ */
+
+import { useState, type CSSProperties } from "react";
+import { Callout, Receipt, Surface, color, font, type ReceiptRow } from "@schlessera/brain-ui-kit";
+import type { ImageMaskPayload, ToolCallView } from "@schlessera/brain-ui-sdk/client";
+import { useBrainUiRoot } from "../../../root-context.js";
+import { ClampedPre } from "../tool-views.js";
+
+/** A normalised rectangle over the source image: every value in 0..1. */
+export interface MaskRegion {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+const THUMB_W = 160;
+const THUMB_H = 100;
+
+export const REGION_NOT_RECORDED = "region not recorded";
+export const MASK_NOT_RENDERED = "mask not rendered";
+
+/** The kit's image placeholder: raised stripes on the surface, no pixels. */
+const HATCH = `repeating-linear-gradient(135deg,${color.raised} 0 6px,var(--bk-hatch-stripe) 6px 12px)`;
+
+function bytesLabel(bytes: number): string {
+  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${bytes} B`;
+}
+
+/** The mask file exists with content: the handler reports the PNG's byte length. */
+export function hasMaskBytes(payload: Pick<ImageMaskPayload, "bytes">): boolean {
+  return typeof payload.bytes === "number" && payload.bytes > 0;
+}
+
+/**
+ * The thumb: the hatched source, the drawn region when a caller has one, and
+ * the mask image over both when `maskUrl` is given. Exported for the view
+ * test; the bound card computes `maskUrl` from the payload.
+ */
+export function MaskThumb({
+  region,
+  label,
+  maskUrl,
+  maskShown,
+  onMaskLoad,
+  onMaskError,
+}: {
+  region?: MaskRegion;
+  label: string;
+  maskUrl?: string;
+  /** The teal fill sits under the mask only once the PNG has loaded: until
+   * then, or after a failure, a full teal frame would read as a whole-image
+   * mask that was never drawn. */
+  maskShown?: boolean;
+  onMaskLoad?: () => void;
+  onMaskError?: () => void;
+}) {
+  const frame: CSSProperties = {
+    position: "relative",
+    width: "100%",
+    maxWidth: THUMB_W * 2,
+    aspectRatio: `${THUMB_W} / ${THUMB_H}`,
+    borderRadius: 9,
+    border: `1px solid ${color.edge}`,
+    background: HATCH,
+    overflow: "hidden",
+  };
+  const drawn: CSSProperties | undefined = region
+    ? {
+        position: "absolute",
+        left: `${region.x * 100}%`,
+        top: `${region.y * 100}%`,
+        width: `${region.w * 100}%`,
+        height: `${region.h * 100}%`,
+        border: "1.5px dashed var(--bk-teal-ink)",
+        background: "var(--bk-mask-region-fill)",
+        borderRadius: 3,
+        boxSizing: "border-box",
+      }
+    : undefined;
+  // The teal fill sits under the mask: where the PNG is transparent — the
+  // editable region, the user's own answer — the teal shows through.
+  const fill: CSSProperties = { position: "absolute", inset: 0, background: "var(--bk-mask-region-fill)" };
+  const overlay: CSSProperties = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "contain",
+  };
+  return (
+    <div role="img" aria-label={label} style={frame} data-mask-thumb>
+      {drawn ? <div style={drawn} data-mask-region /> : null}
+      {maskUrl ? (
+        <>
+          {maskShown ? <div style={fill} aria-hidden="true" /> : null}
+          <img
+            src={maskUrl}
+            alt=""
+            style={{ ...overlay, visibility: maskShown ? "visible" : "hidden" }}
+            data-mask-overlay
+            data-mask-shown={maskShown ? "" : undefined}
+            onLoad={onMaskLoad}
+            onError={onMaskError}
+          />
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+/** The rows the receipt prints. The region row is always there: figures when
+ * a caller has them, the stated absence when the payload carries none. */
+export function maskReceiptRows(payload: ImageMaskPayload, region?: MaskRegion): ReceiptRow[] {
+  const rows: ReceiptRow[] = [];
+  if (region) {
+    rows.push({
+      k: "region",
+      v: `${pct(region.x)},${pct(region.y)} → ${pct(region.x + region.w)},${pct(region.y + region.h)}`,
+      tone: "teal",
+    });
+    rows.push({ k: "covers", v: `${pct(region.w * region.h)} of the image`, tone: "teal" });
+  } else {
+    rows.push({ k: "region", v: REGION_NOT_RECORDED, tone: "gold" });
+  }
+  rows.push({ k: "source", v: payload.imagePath });
+  rows.push({ k: "mask", v: `${payload.maskPath} · ${bytesLabel(payload.bytes)}` });
+  return rows;
+}
+
+function pct(fraction: number): string {
+  return `${Math.round(fraction * 100)}%`;
+}
+
+export function ImageMaskResultCard(payload: ImageMaskPayload & { region?: MaskRegion }) {
+  const root = useBrainUiRoot();
+  const region = payload.region;
+  const hasBytes = hasMaskBytes(payload);
+  const maskUrl = hasBytes
+    ? `${root.apiBase()}/files/content?path=${encodeURIComponent(payload.maskPath)}&raw=1`
+    : undefined;
+  // The bytes say a mask was written; only the browser can say it loaded.
+  // A file gone since, or a path the raw route refuses, must not leave a
+  // full teal frame standing in for a mask nobody can see.
+  const [maskState, setMaskState] = useState<"loading" | "shown" | "failed">("loading");
+  const rendered = hasBytes && maskState === "shown";
+  const note: CSSProperties = { font: `400 10.5px/1.5 ${font.mono}`, color: color.inkMute };
+  return (
+    <Surface tone="teal" label="Mask drawn" labelIcon="confirm" meta="by you" pad={12}>
+      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+        <MaskThumb
+          region={region}
+          maskUrl={maskUrl}
+          maskShown={rendered}
+          onMaskLoad={() => setMaskState("shown")}
+          onMaskError={() => setMaskState("failed")}
+          label={
+            rendered
+              ? `Mask ${payload.maskPath} over the source ${payload.imagePath}`
+              : `Source ${payload.imagePath}; the mask is in ${payload.maskPath}`
+          }
+        />
+        {!hasBytes || maskState === "failed" ? <div style={note}>{MASK_NOT_RENDERED}</div> : null}
+        <Receipt keyWidth={58} rows={maskReceiptRows(payload, region)} />
+      </div>
+    </Surface>
+  );
+}
+
+/**
+ * No payload: the user declined, the editor failed, or an older server
+ * answered with a sentence. An error is stated as a fact in red; anything
+ * else is shown as the text it is.
+ */
+export function ImageMaskFallback({ tool }: { tool: ToolCallView }) {
+  if (!tool.output) return null;
+  if (!tool.isError) return <ClampedPre text={tool.output} />;
+  const source = typeof tool.input.imagePath === "string" ? tool.input.imagePath : null;
+  return (
+    <Callout
+      tone="red"
+      variant="boxed"
+      mono
+      text={`no mask drawn${source ? ` on ${source}` : ""} · ${tool.output.trim()}`}
+    />
+  );
+}