@schlessera/brain-ui-react 0.20.0 → 0.23.0

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

@@ -1,7 +1,12 @@
 import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { isFailureOutcome, SPAN_TOOL_NAME_PREFIX } from "@schlessera/brain-ui-sdk/protocol";
-import type { ActivitySpan, ActivitySpanOutcome } from "@schlessera/brain-ui-sdk/protocol";
+import type {
+  ActivitySpan,
+  ActivitySpanEvent,
+  ActivitySpanOutcome,
+  BillingMode,
+} from "@schlessera/brain-ui-sdk/protocol";
 
 import {
   useActivityStore,
@@ -9,7 +14,7 @@ import {
   loadSpanPayloads,
 } from "../../stores/activity-store.js";
 import { cn } from "../../lib/utils.js";
-import { getToolLabel } from "../chat/tool-views.js";
+import { getToolLabel, formatTokenCount } from "../chat/tool-views.js";
 
 /**
  * THE status dot for activity spans — one outcome→color mapping so every
@@ -92,35 +97,86 @@ export function SpanPayload({ spanId }: { spanId: string }) {
   return (
     <div className="space-y-1.5 px-2 py-1">
       {events.map((event) => (
-        <div key={`${event.spanId}:${event.eventIndex}`}>
-          <div className="mb-0.5 text-[10px] uppercase text-muted-foreground/60">
-            {event.eventType === "tool_input" ? "Input" : "Output"}
-          </div>
-          <pre className="max-h-56 overflow-auto whitespace-pre-wrap break-words rounded-md bg-background/60 p-2 font-[family-name:var(--font-mono)] text-[11px] leading-relaxed text-muted-foreground">
-            {typeof event.payload === "string" ? event.payload : JSON.stringify(event.payload)}
-          </pre>
-          {event.truncated && (
-            <p className="mt-0.5 text-[10px] italic text-muted-foreground/60">… truncated</p>
-          )}
-        </div>
+        <SpanEventBlock key={`${event.spanId}:${event.eventIndex}`} event={event} />
       ))}
     </div>
   );
 }
 
+/**
+ * Display label for a span event type. Known types get prose; an unknown one
+ * (a span-sink producer is free to invent them) prints its own type rather
+ * than being mislabelled as output.
+ */
+export function eventTypeLabel(eventType: string): string {
+  if (eventType === "tool_input") return "Input";
+  if (eventType === "tool_output") return "Output";
+  if (eventType.startsWith("transcript_")) return `Transcript · ${eventType.slice("transcript_".length)}`;
+  if (eventType === "job_output") return "Job output";
+  return eventType.replace(/_/g, " ");
+}
+
+/**
+ * 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 text =
+    typeof event.payload === "string" ? event.payload : JSON.stringify(event.payload, null, 2);
+  return (
+    <div>
+      <div className="mb-0.5 text-[10px] uppercase text-muted-foreground/60">
+        {eventTypeLabel(event.eventType)}
+      </div>
+      <pre className="max-h-56 overflow-auto whitespace-pre-wrap break-words rounded-md bg-background/60 p-2 font-[family-name:var(--font-mono)] text-[11px] leading-relaxed text-muted-foreground">
+        {text}
+      </pre>
+      {event.truncated && (
+        <p className="mt-0.5 text-[10px] italic text-muted-foreground/60">… truncated</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A span's own token/model line, or null when the backend recorded no usage
+ * for it (every tool span, and any cron root without a span-sink producer).
+ * Cache reads are named separately: they are the cheap half of the bill and
+ * folding them into "in" would misstate what the run actually consumed.
+ */
+export function formatSpanUsage(span: ActivitySpan): string | null {
+  const usage = span.usage;
+  if (!usage) return null;
+  const parts: string[] = [];
+  if (usage.model) parts.push(usage.model);
+  if (usage.inputTokens) parts.push(`${formatTokenCount(usage.inputTokens)} in`);
+  if (usage.outputTokens) parts.push(`${formatTokenCount(usage.outputTokens)} out`);
+  if (usage.cacheReadTokens) parts.push(`${formatTokenCount(usage.cacheReadTokens)} cached`);
+  if (usage.cacheCreationTokens)
+    parts.push(`${formatTokenCount(usage.cacheCreationTokens)} cache write`);
+  return parts.length > 0 ? parts.join(" · ") : null;
+}
+
 /**
  * THE effective-cost glyph — one three-state rule so no surface ever renders
  * an unknown cost as $0.00 (AE3): absent/NULL is "—" (we don't know), 0 is
- * "free" (we know — subscription-billed or genuinely zero), positive is
+ * "subbed" when the run was subscription-billed and "free" otherwise (a
+ * genuinely zero-rate model, e.g. an OpenRouter free tier), positive is
  * dollars, "~"-prefixed when computed from estimated rates. Sub-cent costs
  * floor at "<$0.01" rather than rounding down to a zero look-alike.
+ *
+ * The zero split matters: a seat plan absorbing the run and a model that
+ * costs nothing are both $0 additive, but only one of them stays $0 once the
+ * subscription is cancelled.
  */
 export function formatEffectiveCost(
   costUsd: number | null | undefined,
-  estimate?: boolean
+  estimate?: boolean,
+  billingMode?: BillingMode | null
 ): string {
   if (costUsd === null || costUsd === undefined) return "—";
-  if (costUsd === 0) return "free";
+  if (costUsd === 0) return billingMode === "subscription" ? "subbed" : "free";
   const amount = costUsd < 0.005 ? "<$0.01" : `$${costUsd.toFixed(2)}`;
   return estimate ? `~${amount}` : amount;
 }
@@ -148,11 +204,12 @@ export function runCostText(run: {
   costUsd: number | null;
   effectiveCostUsd?: number | null;
   pricingEstimate?: boolean;
+  billingMode?: BillingMode | null;
 }): string | null {
   if (run.effectiveCostUsd === undefined) {
     return run.costUsd !== null && run.costUsd > 0 ? `$${run.costUsd.toFixed(2)}` : null;
   }
-  return formatEffectiveCost(run.effectiveCostUsd, run.pricingEstimate);
+  return formatEffectiveCost(run.effectiveCostUsd, run.pricingEstimate, run.billingMode);
 }
 
 /**

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

@@ -3,13 +3,19 @@
 // delegated to the shared switch-based views so output stays byte-identical to
 // the pre-registry timeline.
 
-import type { RendererPack, ToolRenderer, ToolCallView } from "@schlessera/brain-ui-sdk/client";
+import type {
+  RendererPack,
+  ToolRenderer,
+  ToolCallView,
+  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,
   getOutputMeta,
+  getTouchedFile,
   ToolInputView,
   ToolOutputView,
 } from "../tool-views.js";
@@ -36,14 +42,39 @@ const CLAUDE_TOOL_NAMES = [
 // ToolCallView back to ToolCall here is safe.
 const asToolCall = (tool: ToolCallView) => tool as unknown as ToolCall;
 
+const str = (v: unknown) => (typeof v === "string" ? v : "");
+
+/** Backend-neutral meaning of Claude's shell tool, for risk advisories. */
+const bashSemantics: ToolSemantics = {
+  command: (tool) => str(tool.input?.command) || null,
+  unsandboxed: (tool) => Boolean(tool.input?.dangerouslyDisableSandbox),
+};
+
+/** Claude's file-writing tools all name their target in the input. */
+const writeSemantics: ToolSemantics = {
+  writePath: (tool) =>
+    str(tool.input?.file_path) || str(tool.input?.notebook_path) || null,
+};
+
+/** Per-tool contract extras beyond the shared switch-based views. */
+const CLAUDE_TOOL_EXTRAS: Record<string, Partial<ToolRenderer>> = {
+  Bash: { semantics: bashSemantics },
+  Edit: { semantics: writeSemantics },
+  Write: { semantics: writeSemantics },
+  NotebookEdit: { semantics: writeSemantics },
+  Agent: { subagentRows: true },
+};
+
 function claudeRenderer(name: string): ToolRenderer {
   return {
     match: name,
     icon: getToolIcon(name),
     summary: (tool) => getToolSummary(asToolCall(tool)),
     meta: (tool) => getOutputMeta(asToolCall(tool)),
+    touchedFile: (tool) => getTouchedFile(asToolCall(tool)),
     Input: ({ tool }) => <ToolInputView tool={asToolCall(tool)} />,
     Output: ({ tool }) => <ToolOutputView tool={asToolCall(tool)} />,
+    ...CLAUDE_TOOL_EXTRAS[name],
   };
 }
 

package/src/components/chat/renderers/index.ts

@@ -4,6 +4,7 @@
 
 import { registerToolRenderers } from "@schlessera/brain-ui-sdk/client";
 import { claudeToolPack } from "./claude-tools.js";
+import { piToolPack } from "./pi-tools.js";
 import { genericToolPack, GENERIC_RENDERER } from "./generic.js";
 
 let registered = false;
@@ -13,6 +14,7 @@ export function registerBuiltinRenderers(): void {
   if (registered) return;
   registered = true;
   registerToolRenderers(claudeToolPack);
+  registerToolRenderers(piToolPack);
   registerToolRenderers(genericToolPack);
 }
 

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

@@ -0,0 +1,144 @@
+// pi backend tool-renderer pack. pi's curated tools are lowercase snake_case
+// (`bash`, `read_file`, …) with their own input shapes, so they get their own
+// backend-scoped renderers instead of riding the shape-sniffing generic tier.
+// Views are the same shared components the Claude pack composes; only the
+// field mapping differs.
+
+import type {
+  RendererPack,
+  ToolRenderer,
+  ToolCallView,
+  ToolSemantics,
+} from "@schlessera/brain-ui-sdk/client";
+import type { ToolCall } from "../../../stores/chat-store.js";
+import {
+  getToolIcon,
+  getOutputMeta,
+  toRepoRelative,
+  EditDiffView,
+  WriteFileView,
+  BashCommandView,
+  KeyValueView,
+  ClampedPre,
+  FileRowsView,
+} from "../tool-views.js";
+
+const asToolCall = (tool: ToolCallView) => tool as unknown as ToolCall;
+
+const str = (v: unknown) => (typeof v === "string" ? v : "");
+
+/** pi names its path input `path`; the shared views read `file_path`. */
+function withFilePath(tool: ToolCallView): ToolCall {
+  const t = asToolCall(tool);
+  return str(t.input?.file_path)
+    ? t
+    : ({ ...t, input: { ...t.input, file_path: t.input?.path } } as ToolCall);
+}
+
+function pathSummary(tool: ToolCallView): string | null {
+  const path = str(tool.input?.path);
+  return path ? toRepoRelative(path) ?? path : null;
+}
+
+const writeSemantics: ToolSemantics = {
+  writePath: (tool) => str(tool.input?.path) || null,
+};
+
+function DefaultOutput({ tool }: { tool: ToolCallView }) {
+  if (!tool.output) return null;
+  return <ClampedPre text={tool.output} isError={tool.isError} />;
+}
+
+const PI_RENDERERS: ToolRenderer[] = [
+  {
+    match: "bash",
+    icon: getToolIcon("Bash"),
+    summary: (tool) => str(tool.input?.command) || null,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    semantics: { command: (tool) => str(tool.input?.command) || null },
+    Input: ({ tool }) => <BashCommandView tool={asToolCall(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "read_file",
+    icon: getToolIcon("Read"),
+    summary: pathSummary,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    Input: ({ tool }) => <KeyValueView tool={asToolCall(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "write_file",
+    icon: getToolIcon("Write"),
+    summary: pathSummary,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    touchedFile: (tool) => str(tool.input?.path) || null,
+    semantics: writeSemantics,
+    Input: ({ tool }) => <WriteFileView tool={withFilePath(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "edit_file",
+    icon: getToolIcon("Edit"),
+    summary: pathSummary,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    touchedFile: (tool) => str(tool.input?.path) || null,
+    semantics: writeSemantics,
+    Input: ({ tool }) => <EditDiffView tool={withFilePath(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "grep",
+    icon: getToolIcon("Grep"),
+    summary: (tool) => {
+      const pattern = str(tool.input?.pattern);
+      if (!pattern) return null;
+      const path = str(tool.input?.path);
+      return path ? `${pattern} in ${toRepoRelative(path) ?? path}` : pattern;
+    },
+    meta: (tool) => {
+      const t = asToolCall(tool);
+      if (t.output && !t.isError && t.output.trim() !== "No matches.") {
+        const rows = t.output.split("\n").filter(Boolean).length;
+        return `${rows} match${rows === 1 ? "" : "es"}`;
+      }
+      return getOutputMeta(t);
+    },
+    Input: ({ tool }) => <KeyValueView tool={asToolCall(tool)} />,
+    Output: ({ tool }) =>
+      tool.output && !tool.isError ? (
+        <FileRowsView output={tool.output} />
+      ) : (
+        <DefaultOutput tool={tool} />
+      ),
+  },
+  {
+    match: "brain_search",
+    icon: getToolIcon("Grep"),
+    summary: (tool) => str(tool.input?.query) || null,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    Input: ({ tool }) => <KeyValueView tool={asToolCall(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "brain_context",
+    icon: getToolIcon("Read"),
+    summary: (tool) => str(tool.input?.query) || null,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    Input: ({ tool }) => <KeyValueView tool={asToolCall(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "brain_add",
+    icon: getToolIcon("Write"),
+    summary: (tool) => str(tool.input?.title) || str(tool.input?.type) || null,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    Input: ({ tool }) => <KeyValueView tool={asToolCall(tool)} />,
+    Output: DefaultOutput,
+  },
+];
+
+export const piToolPack: RendererPack = {
+  backend: "pi",
+  renderers: PI_RENDERERS,
+};

package/src/components/chat/risk-hints.ts

@@ -1,3 +1,4 @@
+import type { ToolSemantics } from "@schlessera/brain-ui-sdk/client";
 import type { ToolCall } from "../../stores/chat-store.js";
 
 // ============================================================
@@ -6,7 +7,9 @@ import type { ToolCall } from "../../stores/chat-store.js";
 //
 // Non-blocking advisories surfaced in the pending-approval detail so a human
 // notices known-risky shapes before hitting Allow. Detection only — the human
-// still decides. Each rule is { test, message } so the list is easy to extend.
+// still decides. Rules test backend-neutral SEMANTICS (the command line run,
+// the path written), supplied by the tool's renderer, so a rule written once
+// covers Claude's `Bash`, pi's `bash`, and any future backend's equivalent.
 
 /**
  * Does this path resolve inside the brain repo?
@@ -31,8 +34,58 @@ function asString(v: unknown): string {
   return typeof v === "string" ? v : "";
 }
 
+/** The extracted, plain-value meaning risk rules test against. */
+export type ResolvedSemantics = {
+  /** Shell command line the call executes, or "". */
+  command: string;
+  /** Filesystem path the call writes, or "". */
+  writePath: string;
+  /** Call explicitly opts out of its backend's sandbox. */
+  unsandboxed: boolean;
+};
+
+/**
+ * Shape-sniffing fallback for renderers that declare no semantics, so an
+ * unknown tool with a recognizable input still gets its advisories.
+ */
+function sniffSemantics(tool: ToolCall): ResolvedSemantics {
+  const input = tool.input ?? {};
+  const writeSignal =
+    "content" in input ||
+    "old_string" in input ||
+    "new_string" in input ||
+    "new_source" in input;
+  return {
+    command: asString(input.command) || asString(input.cmd),
+    writePath: writeSignal
+      ? asString(input.file_path) ||
+        asString(input.notebook_path) ||
+        asString(input.path)
+      : "",
+    unsandboxed: Boolean(input.dangerouslyDisableSandbox),
+  };
+}
+
+/** Evaluate a renderer's semantics accessors (each optional) for one call. */
+export function resolveSemantics(
+  tool: ToolCall,
+  semantics?: ToolSemantics
+): ResolvedSemantics {
+  const sniffed = sniffSemantics(tool);
+  if (!semantics) return sniffed;
+  return {
+    command: semantics.command ? semantics.command(tool) ?? "" : sniffed.command,
+    writePath: semantics.writePath
+      ? semantics.writePath(tool) ?? ""
+      : sniffed.writePath,
+    unsandboxed: semantics.unsandboxed
+      ? semantics.unsandboxed(tool)
+      : sniffed.unsandboxed,
+  };
+}
+
 export type RiskRule = {
-  test: (tool: ToolCall) => boolean;
+  test: (sem: ResolvedSemantics) => boolean;
   message: string;
 };
 
@@ -41,54 +94,49 @@ export const RISK_RULES: RiskRule[] = [
     // Note: the Bash input view already badges this red, so this line is
     // secondary. Kept for consistency so the advisory row reflects every known
     // risk in one place rather than the human having to cross-reference badges.
-    test: (t) => t.name === "Bash" && Boolean(t.input?.dangerouslyDisableSandbox),
+    test: (sem) => sem.unsandboxed,
     message: "runs without the sandbox",
   },
   {
     // Recursive + force in either flag order (-rf, -fr) or as separate flags
     // (rm -r -f). Lookaheads match a `-…r` flag and a `-…f` flag in any order.
-    test: (t) =>
-      t.name === "Bash" &&
-      /\brm\b(?=[^\n]*\s-[a-zA-Z]*r)(?=[^\n]*\s-[a-zA-Z]*f)/.test(
-        asString(t.input?.command)
-      ),
+    test: (sem) =>
+      /\brm\b(?=[^\n]*\s-[a-zA-Z]*r)(?=[^\n]*\s-[a-zA-Z]*f)/.test(sem.command),
     message: "removes files recursively (rm -rf)",
   },
   {
-    test: (t) =>
-      t.name === "Bash" &&
+    test: (sem) =>
       /git\s+push\b[^\n]*(?:--force\b|--force-with-lease\b|\s-f\b)/.test(
-        asString(t.input?.command)
+        sem.command
       ),
     message: "force-pushes a git branch",
   },
   {
-    test: (t) =>
-      t.name === "Bash" &&
-      /\b(?:curl|wget)\b[^|]*\|\s*(?:ba)?sh\b/.test(asString(t.input?.command)),
+    test: (sem) =>
+      /\b(?:curl|wget)\b[^|]*\|\s*(?:ba)?sh\b/.test(sem.command),
     message: "pipes a remote script into a shell",
   },
   {
-    test: (t) => {
-      if (t.name !== "Write" && t.name !== "Edit" && t.name !== "NotebookEdit")
-        return false;
-      const path =
-        asString(t.input?.file_path) || asString(t.input?.notebook_path);
-      if (!path) return false;
-      return !isInsideBrainRepo(path);
-    },
+    test: (sem) => Boolean(sem.writePath) && !isInsideBrainRepo(sem.writePath),
     message: "writes outside the brain repo",
   },
 ];
 
 /** Advisory messages for every risk rule that fires. Never throws. */
-export function riskHints(tool: ToolCall): string[] {
+export function riskHints(tool: ToolCall, semantics?: ToolSemantics): string[] {
   const hints: string[] = [];
+  let sem: ResolvedSemantics;
+  try {
+    sem = resolveSemantics(tool, semantics);
+  } catch {
+    // Defensive: never let a malformed input break the approval UI.
+    return hints;
+  }
   for (const rule of RISK_RULES) {
     try {
-      if (rule.test(tool)) hints.push(rule.message);
+      if (rule.test(sem)) hints.push(rule.message);
     } catch {
-      // Defensive: never let a malformed input break the approval UI.
+      // Same defensiveness per rule.
     }
   }
   return hints;

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

@@ -9,8 +9,8 @@ import {
   AlertTriangle,
   FileText,
 } from "lucide-react";
-import { resolveToolRenderer } from "@schlessera/brain-ui-sdk/client";
-import type { ToolCall } from "../../stores/chat-store.js";
+import { resolveToolRenderer, 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";
 import { getToolLabel, getTouchedFile, formatDuration, formatTokenCount } from "./tool-views.js";
@@ -26,10 +26,18 @@ import { SpanStatusDot } from "../activity/span-bits.js";
 // runs on module load.
 registerBuiltinRenderers();
 
-// One backend is active per deployment (v1). The shipped default is the Claude
-// backend; renderer resolution is backend-scoped so a future multi-backend
-// build can thread the real id through here.
-const BACKEND_ID = "claude";
+// Sessions that predate backend stamping (old servers, cleared stores) scope
+// to the shipped default backend.
+const DEFAULT_BACKEND_ID = "claude";
+
+/** Backend owning the session in view, scoping renderer resolution. */
+function useBackendId(): string {
+  return useChatStore(
+    (s) =>
+      (s.activeSessionId ? s.backendIds[s.activeSessionId] : undefined) ??
+      DEFAULT_BACKEND_ID
+  );
+}
 
 export function ToolCallTimeline({
   toolCalls,
@@ -44,6 +52,7 @@ export function ToolCallTimeline({
   // Collapse the whole run to a summary row once the turn is over. History
   // messages mount collapsed; a live timeline collapses when streaming ends.
   const [collapsed, setCollapsed] = useState(!live);
+  const backendId = useBackendId();
   const prevLive = useRef(live);
   useEffect(() => {
     if (prevLive.current && !live) setCollapsed(true);
@@ -57,7 +66,11 @@ export function ToolCallTimeline({
 
   if (effectiveCollapsed) {
     return (
-      <TimelineSummaryRow toolCalls={toolCalls} onExpand={() => setCollapsed(false)} />
+      <TimelineSummaryRow
+        toolCalls={toolCalls}
+        backendId={backendId}
+        onExpand={() => setCollapsed(false)}
+      />
     );
   }
 
@@ -75,7 +88,12 @@ export function ToolCallTimeline({
       )}
       <div className="relative ml-1 border-l-2 border-border/40 pl-4 space-y-1.5">
         {toolCalls.map((tool) => (
-          <ToolCallEntry key={tool.id} toolCall={tool} onApproval={onApproval} />
+          <ToolCallEntry
+            key={tool.id}
+            toolCall={tool}
+            backendId={backendId}
+            onApproval={onApproval}
+          />
         ))}
       </div>
     </div>
@@ -84,13 +102,22 @@ export function ToolCallTimeline({
 
 function TimelineSummaryRow({
   toolCalls,
+  backendId,
   onExpand,
 }: {
   toolCalls: ToolCall[];
+  backendId: string;
   onExpand: () => void;
 }) {
   const steps = toolCalls.length;
-  const files = new Set(toolCalls.map(getTouchedFile).filter(Boolean)).size;
+  const files = new Set(
+    toolCalls
+      .map(
+        (t) =>
+          resolveToolRenderer(t, backendId)?.touchedFile?.(t) ?? getTouchedFile(t)
+      )
+      .filter(Boolean)
+  ).size;
   const errors = toolCalls.filter((t) => t.isError).length;
   const started = Math.min(...toolCalls.map((t) => t.startedAt ?? Infinity));
   const ended = Math.max(...toolCalls.map((t) => t.endedAt ?? -Infinity));
@@ -123,9 +150,11 @@ function TimelineSummaryRow({
 
 function ToolCallEntry({
   toolCall,
+  backendId,
   onApproval,
 }: {
   toolCall: ToolCall;
+  backendId: string;
   onApproval: (toolUseId: string, approved: boolean) => void;
 }) {
   const [expanded, setExpanded] = useState(
@@ -147,8 +176,12 @@ 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, BACKEND_ID) ?? GENERIC_RENDERER;
+  const renderer = resolveToolRenderer(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 summary = renderer.summary?.(timed) ?? null;
   const meta = renderer.meta?.(timed) ?? null;
@@ -204,7 +237,7 @@ function ToolCallEntry({
       >
         <Icon className="h-3.5 w-3.5 shrink-0" />
         <span className="font-[family-name:var(--font-mono)] font-medium">
-          {getToolLabel(toolCall.name)}
+          {label}
         </span>
         {summary && (
           <span
@@ -226,8 +259,8 @@ function ToolCallEntry({
         </span>
       </button>
 
-      {/* Live subagent state for Agent fan-outs, fed by the activity stream. */}
-      {toolCall.name === "Agent" && <SubagentEntryRows agentToolUseId={toolCall.id} />}
+      {/* Live subagent state for tool fan-outs, fed by the activity stream. */}
+      {renderer.subagentRows && <SubagentEntryRows agentToolUseId={toolCall.id} />}
 
       {/* Expandable detail */}
       <AnimatePresence>
@@ -251,7 +284,9 @@ function ToolCallEntry({
               {Input && <Input tool={toolCall} />}
 
               {/* Risk hints — advisory only, never blocks approval */}
-              {isPending && <RiskHints toolCall={toolCall} />}
+              {isPending && (
+                <RiskHints toolCall={toolCall} semantics={renderer.semantics} />
+              )}
 
               {/* Approval buttons */}
               {isPending && (
@@ -333,8 +368,14 @@ function SubagentEntryRows({ agentToolUseId }: { agentToolUseId: string }) {
   );
 }
 
-function RiskHints({ toolCall }: { toolCall: ToolCall }) {
-  const hints = riskHints(toolCall);
+function RiskHints({
+  toolCall,
+  semantics,
+}: {
+  toolCall: ToolCall;
+  semantics?: ToolSemantics;
+}) {
+  const hints = riskHints(toolCall, semantics);
   if (hints.length === 0) return null;
   return (
     <div className="space-y-0.5 text-[11px] text-amber-400">

package/src/components/settings/models-tab.tsx

@@ -8,6 +8,7 @@ import type {
 import { api } from "../../lib/api-client.js";
 import { useProviderStore } from "../../stores/provider-store.js";
 import { cn } from "../../lib/utils.js";
+import { PiAccountsSection } from "./pi-accounts.js";
 
 /**
  * The model picker's contents, and which of them to show.
@@ -200,6 +201,8 @@ export function ModelsTab({ active }: { active: boolean }) {
             profiles are listed.
           </p>
         )}
+
+        <PiAccountsSection active={active} />
       </div>
 
       <div className="flex items-center justify-between gap-3 border-t border-border p-4">