@jini-ai/chat 0.5.7 → 0.6.0

package/dist/react/features/chat-pane/styles.js

@@ -31,7 +31,10 @@ export const CHAT_PANE_STYLES = `
   min-width: 0;
   min-height: 0;
   height: 100%;
+  /* clip after the hidden fallback: a hidden box still scrolls programmatically (a focus() or
+     scrollIntoView() inside it), which shifts the pinned composer up and leaves blank pane below. */
   overflow: hidden;
+  overflow: clip;
   color: var(--jini-chat-text);
   background: var(--jini-chat-bg);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -84,6 +87,7 @@ export const CHAT_PANE_STYLES = `
   position: relative;
   min-height: 0;
   overflow: hidden;
+  overflow: clip;
 }
 .jini-chat-pane .jini-message-list {
   height: 100%;
@@ -111,6 +115,30 @@ export const CHAT_PANE_STYLES = `
   font-size: 14px;
   line-height: 1.62;
 }
+/*
+ * Off-screen rows skip style, layout and paint. Owner report 2026-10-11: typing in a long chat
+ * lagged. React was not the cost (no row re-renders per key); the browser was. A keystroke's DOM
+ * change can invalidate style for the whole document (a host :has() rule did, in the Tovu dock),
+ * and a transcript with ~2,000 tool cards and 3.5 MB of tool output then cost ~50 ms of style
+ * recalc per key. With this, only the rows on screen are recalculated (~8 ms). The DOM stays
+ * whole: find-in-page, textContent readers and screen readers still see every row.
+ * 'auto' in contain-intrinsic-size keeps a row's last real height once it has rendered; the
+ * auto-scroll ResizeObserver re-sticks to the bottom as estimated rows resolve.
+ * Containment clips paint at the row's edge, so overflow-clip-margin leaves room for focus rings
+ * (2px outline + 2px offset); @supports keeps browsers without it on the old, unclipped path.
+ */
+@supports (overflow-clip-margin: 8px) {
+  .jini-chat-pane .jini-message {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 160px;
+    overflow-clip-margin: 8px;
+  }
+}
+/* A mid-run user bubble is nested inside an assistant turn, so the preceding tool/text block
+ * has no message-row bottom margin. Give it the same separation as an ordinary next turn. */
+.jini-chat-pane .jini-message-user--mid-run {
+  margin-top: 20px;
+}
 /*
  * Bubble on the content, not the row: MessageRow.tsx renders attachments as siblings of
  * .jini-message-content inside .jini-message-user, each with their own chip styling -- bubbling
@@ -124,7 +152,9 @@ export const CHAT_PANE_STYLES = `
   padding: 10px 13px;
   width: fit-content;
   max-width: 88%;
-  background: var(--jini-chat-subtle);
+  /* User bubbles share this style at every nesting depth, regardless of message length. */
+  background: var(--jini-chat-user-bubble, #1a1b1c);
+  color: var(--jini-chat-user-bubble-ink, #fff);
   border-radius: 12px 12px 3px 12px;
 }
 .jini-chat-pane .jini-message-user .jini-message-attachments {
@@ -149,6 +179,25 @@ export const CHAT_PANE_STYLES = `
   color: var(--jini-chat-text);
   border-color: var(--jini-chat-border-strong);
 }
+/* A sent image this browser still holds (SentAttachment.tsx): a small square thumbnail instead of
+ * the filename pill. Same click target and preview modal; cover-cropped so mixed aspect ratios line up. */
+.jini-chat-pane .jini-message-user .jini-message-attachment-chip.is-thumbnail {
+  width: 64px;
+  height: 64px;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 10px;
+}
+.jini-chat-pane .jini-message-user .jini-message-attachment-chip.is-thumbnail:focus-visible {
+  outline: 2px solid var(--jini-chat-accent);
+  outline-offset: 2px;
+}
+.jini-chat-pane .jini-message-attachment-thumb {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 .jini-chat-pane .jini-message-agent {
   font-size: 11px;
   font-weight: 700;
@@ -582,6 +631,11 @@ export const CHAT_PANE_STYLES = `
   font-size: 13.5px;
   line-height: 1.6;
 }
+/* Shared focus-zoom floor: embeds at every width, all panes on small/touch viewports. */
+.jini-chat-embed .jini-chat-pane .jini-composer-input { font-size: 16px; }
+@media (max-width: 640px), (pointer: coarse) {
+  .jini-chat-pane.jini-chat-pane .jini-composer-input { font-size: 16px; }
+}
 .jini-chat-pane .jini-composer-input::placeholder { color: var(--jini-chat-faint); }
 .jini-chat-pane .jini-composer-footer {
   display: flex;
@@ -1291,6 +1345,36 @@ export const CHAT_PANE_STYLES = `
   margin-top: 2px;
 }
 .jini-chat-pane .jini-message-usage-dot { font-size: 8px; color: #4e875f; }
+/* toolCallDisplay 'collapsed' (ToolCallGroup.tsx): one quiet line per turn, cards open under it. */
+.jini-chat-pane .jini-tool-group { display: flex; flex-direction: column; gap: 6px; width: 100%; }
+.jini-chat-pane .jini-tool-group__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  align-self: flex-start;
+  max-width: 100%;
+  padding: 2px 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  font-size: 12px;
+  color: var(--jini-chat-muted);
+  cursor: pointer;
+}
+.jini-chat-pane .jini-tool-group__toggle:hover { color: inherit; }
+.jini-chat-pane .jini-tool-group__toggle:focus-visible { outline: 2px solid var(--jini-chat-accent); outline-offset: 2px; border-radius: 4px; }
+.jini-chat-pane .jini-tool-group__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.jini-chat-pane .jini-tool-group[data-failed="true"] .jini-tool-group__toggle { color: var(--danger); }
+/* showThinking (MessageRow.tsx's ThinkingBlock): the model's reasoning, folded, set apart from the answer. */
+.jini-chat-pane .jini-message-thinking { font-size: 12px; color: var(--jini-chat-muted); }
+.jini-chat-pane .jini-message-thinking > summary { cursor: pointer; width: fit-content; }
+.jini-chat-pane .jini-message-thinking__text {
+  margin-top: 4px;
+  padding-left: 10px;
+  border-left: 2px solid var(--jini-chat-border);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
 /*
  * Fenced code block ('Markdown.tsx''s 'renderBlock' case 'code') and inline 'code' span visual
  * treatment — previously entirely unstyled (bare UA-default '<pre><code>', no background, border,

package/dist/react/features/chat-pane/types.d.ts

@@ -2,6 +2,7 @@ import type { UserTextRedactionOptions } from '../../../core/user-text-redaction
 import type { CSSProperties, ReactNode, RefObject } from 'react';
 import type { ChatAttachment, ChatMessage } from '@jini-ai/chat';
 import type { ComposerSlots } from '../../slots.js';
+import type { ToolCallDisplay } from '../../tool-call-display.js';
 import type { ComposerHistoryStoragePort } from '../../../core/composer-history.js';
 import type { ChatTransport, RunContext } from '@jini-ai/chat';
 export interface ChatPaneAgentOption {
@@ -16,6 +17,8 @@ export interface ChatPaneAgentOption {
  * coupling the React package to `@jini-ai/http-kit`.
  */
 export interface ChatPaneAgent {
+    /** Read cached models now and refresh while the host finishes its background probe. */
+    discoveryPending?: boolean;
     id: string;
     name: string;
     available?: boolean;
@@ -67,7 +70,7 @@ export interface ChatPaneRuntimeAccess {
     daemonOnline: () => Promise<boolean>;
 }
 export type ChatPaneActivity = 'unavailable' | 'ready' | 'queued' | 'streaming' | 'failed';
-export type ChatPaneVariant = 'workspace';
+export type ChatPaneVariant = 'workspace' | 'embed';
 export type RuntimePickerPlacement = 'up' | 'down';
 /**
  * Native filesystem operations used by {@link ChatPane} to implement its
@@ -188,6 +191,7 @@ export interface ChatPaneProps extends UserTextRedactionOptions {
     title?: string;
     variant?: ChatPaneVariant;
     initialMessages?: ChatMessage[];
+    refreshSignal?: import('../../hooks/useConversation.js').UseConversationOptions['refreshSignal'];
     conversationId?: string | null;
     initialSelection?: ChatPaneAgentSelection;
     selection?: ChatPaneAgentSelection;
@@ -266,6 +270,8 @@ export interface ChatPaneProps extends UserTextRedactionOptions {
      */
     placeholders?: readonly string[];
     suggestions?: readonly string[];
+    /** Host greeting shown only while the transcript is empty; never persisted as a message. */
+    emptyState?: ReactNode;
     /** Controlled working-directory value. */
     workingDirectory?: string | null;
     /** Initial value used when `workingDirectory` is uncontrolled. */
@@ -296,6 +302,15 @@ export interface ChatPaneProps extends UserTextRedactionOptions {
      */
     workingDirectoryControlPlacement?: 'below' | 'composer' | 'none';
     projectFileNames?: ReadonlySet<string>;
+    /**
+     * Transcript display choices (a host's chat settings, 2026-10-11), passed straight to
+     * `MessageList`: how tool calls show (`'show'` default, `'collapsed'` one line per turn, `'hidden'`
+     * all but failed ones — see `tool-call-display.ts`), whether the "Done · time · cost" lines show
+     * (default `true`), and whether the model's reasoning shows (default `false`).
+     */
+    toolCallDisplay?: ToolCallDisplay;
+    showUsageLine?: boolean;
+    showThinking?: boolean;
     uploadAttachments?: (files: File[], options?: ChatPaneAttachmentUploadOptions) => Promise<ChatAttachment[]>;
     attachmentAccept?: string;
     disabled?: boolean;

package/dist/react/hooks/useAnsweredCards.d.ts

@@ -0,0 +1,20 @@
+import type { IsAnsweredCard } from '../../core/index.js';
+export interface AnsweredCards {
+    /** Whether the slot's card was answered. */
+    isAnswered(slot: string): boolean;
+    /** Records the slot's card as answered. Idempotent. */
+    markAnswered(slot: string): void;
+    /** The same answer as `isAnswered`, keyed by an event — for `deriveRunActivity`. Stable while nothing new is answered. */
+    isAnsweredCard: IsAnsweredCard;
+}
+/**
+ * @param slotOf - Maps an ext event to its render slot (`extEventSlot`).
+ * @complexity O(1) per lookup; O(answered cards) space.
+ */
+export declare function useAnsweredCards({ slotOf }: {
+    slotOf: (card: {
+        name: string;
+        data: unknown;
+    }) => string;
+}): AnsweredCards;
+//# sourceMappingURL=useAnsweredCards.d.ts.map

package/dist/react/hooks/useAnsweredCards.js

@@ -0,0 +1,23 @@
+/**
+ * @module useAnsweredCards
+ *
+ * Which of a message's cards the person has already answered, by ext-event slot. A held-open
+ * question's tool call stays open after the click while the confirmed work runs, so the event
+ * stream alone still reads "waiting for an answer"; the card reports its own delivered answer here
+ * and the activity line and countdown clear at once (owner, 2026-10-11).
+ */
+import { useCallback, useState } from 'react';
+/**
+ * @param slotOf - Maps an ext event to its render slot (`extEventSlot`).
+ * @complexity O(1) per lookup; O(answered cards) space.
+ */
+export function useAnsweredCards({ slotOf }) {
+    const [answered, setAnswered] = useState(() => new Set());
+    const markAnswered = useCallback((slot) => {
+        setAnswered((current) => (current.has(slot) ? current : new Set(current).add(slot)));
+    }, []);
+    const isAnswered = useCallback((slot) => answered.has(slot), [answered]);
+    const isAnsweredCard = useCallback((card) => answered.has(slotOf(card)), [answered, slotOf]);
+    return { isAnswered, markAnswered, isAnsweredCard };
+}
+//# sourceMappingURL=useAnsweredCards.js.map

package/dist/react/hooks/useConversation.d.ts

@@ -4,6 +4,14 @@ import type { ChatTransport, RunContext } from '../../core/index.js';
 export interface UseConversationOptions extends UserTextRedactionOptions {
     transport: ChatTransport;
     initialMessages?: ChatMessage[];
+    /** Optional host loader and browser ports, e.g. `{ loadMessages, visibility: document, focus: window }`; refresh stays passive. */
+    refreshSignal?: {
+        loadMessages: () => Promise<ChatMessage[]>;
+        visibility: EventTarget & {
+            readonly visibilityState: string;
+        };
+        focus: EventTarget;
+    };
     conversationId?: string | null;
     agentId?: string;
     /** Defaults to a `crypto.randomUUID()`-based id generator when available, else a counter. */

package/dist/react/hooks/useConversation.js

@@ -34,6 +34,40 @@ export function useConversation(options) {
     const setMessages = useCallback((updater) => {
         setMessagesState((prev) => (typeof updater === 'function' ? updater(prev) : updater));
     }, []);
+    // Map upserts preserve order in O(local + saved) time/space; cleanup fences late reads on switch/unmount/local runs.
+    useEffect(() => {
+        const source = options.refreshSignal;
+        if (!source || run.isStreaming)
+            return;
+        let disposed = false, pending = false, timer;
+        const refresh = async () => {
+            if (pending)
+                return;
+            pending = true;
+            try {
+                const saved = await source.loadMessages();
+                if (!disposed)
+                    setMessagesState(prev => [...new Map([...prev, ...saved].map(message => [message.id, message])).values()]);
+            }
+            catch (error) {
+                if (!disposed)
+                    console.error('[chat] conversation refresh failed', error);
+            }
+            finally {
+                pending = false;
+            }
+        };
+        const schedule = () => {
+            clearTimeout(timer);
+            if (source.visibility.visibilityState === 'visible')
+                timer = setTimeout(() => { void refresh(); }, 500);
+        };
+        const events = [[source.visibility, 'visibilitychange'], [source.focus, 'focus']];
+        for (const [target, event] of events)
+            target.addEventListener(event, schedule);
+        return () => { disposed = true; clearTimeout(timer); for (const [target, event] of events)
+            target.removeEventListener(event, schedule); };
+    }, [options.refreshSignal, run.isStreaming]);
     /**
      * The mount-time snapshot of `initialMessages`, captured once — the same "read once, never react
      * to a later identity change" contract `messages`'s own `useState` initializer above already has

package/dist/react/hooks/useRunActivity.d.ts

@@ -1,17 +1,19 @@
-import type { AgentEvent } from '../../core/index.js';
+import type { AgentEvent, IsAnsweredCard } from '../../core/index.js';
 /** Wall-clock source, swappable in tests. */
 export type NowFn = () => number;
 /**
  * @param events - The running message's events.
  * @param active - True while the turn is in progress; the clock only ticks while true.
  * @param now - Clock source (default `Date.now`).
+ * @param isAnsweredCard - Cards the person already answered (see `RunActivityOptions`).
  * @returns The activity line's text, or `null` when `active` is false.
- * @complexity O(n) in events per render (memoized on the events array).
+ * @complexity O(n) in events per render (memoized on the events array and the answered predicate).
  */
 export declare function useRunActivity({ events, active }: {
     events: readonly AgentEvent[] | undefined;
     active: boolean;
-}, { now }?: {
+}, { now, isAnsweredCard }?: {
     now?: (NowFn) | undefined;
+    isAnsweredCard?: IsAnsweredCard | undefined;
 }): string | null;
 //# sourceMappingURL=useRunActivity.d.ts.map

package/dist/react/hooks/useRunActivity.js

@@ -12,12 +12,13 @@ import { useT } from './context.js';
  * @param events - The running message's events.
  * @param active - True while the turn is in progress; the clock only ticks while true.
  * @param now - Clock source (default `Date.now`).
+ * @param isAnsweredCard - Cards the person already answered (see `RunActivityOptions`).
  * @returns The activity line's text, or `null` when `active` is false.
- * @complexity O(n) in events per render (memoized on the events array).
+ * @complexity O(n) in events per render (memoized on the events array and the answered predicate).
  */
-export function useRunActivity({ events, active }, { now = Date.now } = {}) {
+export function useRunActivity({ events, active }, { now = Date.now, isAnsweredCard } = {}) {
     const t = useT();
-    const state = useMemo(() => deriveRunActivity({ events: events }), [events]);
+    const state = useMemo(() => deriveRunActivity({ events: events }, { isAnsweredCard }), [events, isAnsweredCard]);
     const [, setTick] = useState(0);
     const signal = useRef(null);
     const visible = useRef(null);

package/dist/react/index.d.ts

@@ -84,6 +84,10 @@ export { appendComposerDiscovery } from './components/composer-discovery.js';
  */
 export { interleaveMessageBlocks } from './message-blocks.js';
 export type { MessageBlock } from './message-blocks.js';
+/** Transcript display modes for tool calls (`ChatPaneProps.toolCallDisplay`, 2026-10-11) — public so
+ * a custom message row can apply the same show / collapsed / hidden rules to its own blocks. */
+export { applyToolCallDisplay, isFailedToolRow, summarizeToolGroup, toolGroupLabel, toolRowsForDisplay } from './tool-call-display.js';
+export type { ToolCallDisplay, ToolDisplayRow, ToolGroupSummary } from './tool-call-display.js';
 export { TodoCard } from './components/TodoCard.js';
 export type { TodoCardProps } from './components/TodoCard.js';
 /**

package/dist/react/index.js

@@ -78,6 +78,9 @@ export { appendComposerDiscovery } from './components/composer-discovery.js';
  * the one live instance §10 found of R10's documented transitive-reach scope limit.
  */
 export { interleaveMessageBlocks } from './message-blocks.js';
+/** Transcript display modes for tool calls (`ChatPaneProps.toolCallDisplay`, 2026-10-11) — public so
+ * a custom message row can apply the same show / collapsed / hidden rules to its own blocks. */
+export { applyToolCallDisplay, isFailedToolRow, summarizeToolGroup, toolGroupLabel, toolRowsForDisplay } from './tool-call-display.js';
 export { TodoCard } from './components/TodoCard.js';
 /**
  * The conversation switcher — new / select / delete / search / rename-on-double-click. Storage

package/dist/react/message-blocks.d.ts

@@ -35,8 +35,8 @@
  * so every check below prefers the former.
  *
  * It refuses when:
- * - there are no events, or no tool rows AND no ext events to interleave (nothing to do — the flat
- *   path is identical);
+ * - there are no events, or no tool rows AND no ext events (AND no thinking, when the caller asked
+ *   for it) to interleave (nothing to do — the flat path is identical);
  * - the concatenated text events do not reproduce `content` byte for byte. This is the load-bearing
  *   check. A message persisted before the events schema settled, one rebuilt by a host that
  *   assembles `content` some other way, or any future divergence between the two, all land here;
@@ -69,6 +69,21 @@ export type MessageBlock<Row> = {
     readonly name: string;
     readonly slot: string;
     readonly key: string;
+}
+/** Where reply `index` of a run ends: just before the mid-run user message that started the next
+ * reply (`isReplyBoundary`). `MessageRow` hangs that reply's own "Done" line here. */
+ | {
+    readonly kind: 'reply-end';
+    readonly index: number;
+    readonly key: string;
+}
+/** The model's reasoning (`kind: 'thinking'` events), where it happened. Emitted only when the
+ * caller passes `includeThinking` (a host's "show thinking" display choice, 2026-10-11);
+ * back-to-back thinking events with no text between them join into one block. */
+ | {
+    readonly kind: 'thinking';
+    readonly text: string;
+    readonly key: string;
 };
 /**
  * Rebuilds an assistant message as ordered blocks, or returns `null` if that cannot be done
@@ -79,6 +94,9 @@ export type MessageBlock<Row> = {
  * @param rows - The tool timeline rows, already deduped and paired by `useToolTimeline`. Only rows
  *   present here are emitted, so a row the timeline chose to drop stays dropped.
  * @param slotOf - The render slot an ext event belongs to (default: its `name`).
+ * @param includeThinking - Emit `thinking` blocks for the model's reasoning (default `false`: thinking
+ *   events are skipped, the layout every host had before this option). Thinking text is not part of
+ *   `content`, so it never affects the lossless check below.
  * @returns Ordered blocks, or `null` to signal "render the flat layout instead".
  * @complexity O(n + m) in the event and row counts.
  */
@@ -88,10 +106,11 @@ export declare function interleaveMessageBlocks<Row extends {
     events: readonly AgentEvent[] | undefined;
     content: string;
     rows: readonly Row[];
-}, { slotOf }?: {
+}, { slotOf, includeThinking }?: {
     slotOf?: (ev: {
         readonly name: string;
         readonly data: unknown;
     }) => string;
+    includeThinking?: boolean;
 }): MessageBlock<Row>[] | null;
 //# sourceMappingURL=message-blocks.d.ts.map

package/dist/react/message-blocks.js

@@ -1,4 +1,4 @@
-import { assistantContentFromEvents, legacyAssistantContentFromEvents } from '../core/index.js';
+import { assistantContentFromEvents, isReplyBoundary, legacyAssistantContentFromEvents } from '../core/index.js';
 /**
  * Rebuilds an assistant message as ordered blocks, or returns `null` if that cannot be done
  * losslessly.
@@ -8,14 +8,18 @@ import { assistantContentFromEvents, legacyAssistantContentFromEvents } from '..
  * @param rows - The tool timeline rows, already deduped and paired by `useToolTimeline`. Only rows
  *   present here are emitted, so a row the timeline chose to drop stays dropped.
  * @param slotOf - The render slot an ext event belongs to (default: its `name`).
+ * @param includeThinking - Emit `thinking` blocks for the model's reasoning (default `false`: thinking
+ *   events are skipped, the layout every host had before this option). Thinking text is not part of
+ *   `content`, so it never affects the lossless check below.
  * @returns Ordered blocks, or `null` to signal "render the flat layout instead".
  * @complexity O(n + m) in the event and row counts.
  */
-export function interleaveMessageBlocks({ events, content, rows }, { slotOf = (ev) => ev.name } = {}) {
+export function interleaveMessageBlocks({ events, content, rows }, { slotOf = (ev) => ev.name, includeThinking = false } = {}) {
     if (!events || events.length === 0)
         return null;
     const hasExtEvent = events.some((ev) => ev.kind === 'ext');
-    if (rows.length === 0 && !hasExtEvent)
+    const hasThinking = includeThinking && events.some((ev) => ev.kind === 'thinking' && ev.text.trim() !== '');
+    if (rows.length === 0 && !hasExtEvent && !hasThinking)
         return null;
     // The reconstruction is only trustworthy if the text events are demonstrably the source `content`
     // was built from. Anything else and the offsets below are fiction.
@@ -28,6 +32,7 @@ export function interleaveMessageBlocks({ events, content, rows }, { slotOf = (e
     const emitted = new Set();
     const emittedExtSlots = new Set();
     let buffer = '';
+    let replies = 0;
     const flushText = () => {
         if (buffer.length === 0)
             return;
@@ -39,6 +44,23 @@ export function interleaveMessageBlocks({ events, content, rows }, { slotOf = (e
             buffer += ev.text;
             continue;
         }
+        if (ev.kind === 'thinking') {
+            if (!includeThinking)
+                continue;
+            flushText();
+            const last = blocks[blocks.length - 1];
+            if (last && last.kind === 'thinking')
+                blocks[blocks.length - 1] = { kind: 'thinking', text: last.text + ev.text, key: last.key };
+            else
+                blocks.push({ kind: 'thinking', text: ev.text, key: `thinking-${blocks.length}` });
+            continue;
+        }
+        if (isReplyBoundary({ event: ev })) {
+            // Emitted per boundary, before any slot dedupe below, so every reply gets its own end marker.
+            flushText();
+            blocks.push({ kind: 'reply-end', index: replies, key: `reply-end-${replies}` });
+            replies += 1;
+        }
         if (ev.kind === 'ext') {
             // One block per SLOT, at its first occurrence — later events in the same slot fold into it
             // (`useExtEventGroups`'s job in `MessageRow.tsx`), not a second block. A slot is the `name`

package/dist/react/tool-call-display.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @module tool-call-display
+ *
+ * How a transcript shows tool calls (owner, 2026-10-11 — the Tovu dock's Chat settings → Display):
+ *
+ * - `'show'`      — every tool card, where it happened. The layout every host had before this.
+ * - `'collapsed'` — each turn's tool cards fold into ONE line ("Used 3 tools") that expands on
+ *   click; while a tool runs the line names it instead ("Running Bash…").
+ * - `'hidden'`    — no tool cards at all, EXCEPT a failed one: an error must never vanish from the
+ *   transcript just because the reader asked for a quieter view.
+ *
+ * Pure rules over `interleaveMessageBlocks`' output (or the flat row list when that refused), kept
+ * out of `MessageRow.tsx` so every mode is testable without rendering.
+ */
+import type { ToolStatus } from '../core/index.js';
+import type { MessageBlock } from './message-blocks.js';
+export type ToolCallDisplay = 'show' | 'collapsed' | 'hidden';
+/** The fields of a tool row these rules read — `ToolTimelineRow` satisfies it. */
+export interface ToolDisplayRow {
+    readonly id: string;
+    readonly name: string;
+    readonly status: ToolStatus;
+    readonly use?: {
+        readonly input: unknown;
+    };
+}
+/**
+ * Whether a row is a failure the reader must always see: the tool returned an error, or the run
+ * ended without the tool ever answering (`deriveToolStatus` maps both to `'error'`).
+ * @complexity O(1).
+ */
+export declare function isFailedToolRow({ row }: {
+    row: Pick<ToolDisplayRow, 'status'>;
+}): boolean;
+/**
+ * Applies a display mode to an interleaved message.
+ *
+ * `'collapsed'` merges every `tools` block of one turn into the turn's FIRST `tools` block (its
+ * position and key), so the turn shows a single fold-up line. A turn ends at a `reply-end` block —
+ * the mid-run user message that starts the next reply — so a message holding several replies keeps
+ * one line per reply. Keeping the first block's key keeps the line's open/closed state across
+ * streaming updates, since later blocks append after it.
+ *
+ * `'hidden'` keeps only failed rows and drops `tools` blocks left empty.
+ *
+ * @param input.blocks - `interleaveMessageBlocks` output.
+ * @param input.mode - The display mode.
+ * @returns New blocks; the input is never mutated. `'show'` returns `blocks` itself.
+ * @complexity O(n) in blocks + rows.
+ */
+export declare function applyToolCallDisplay<Row extends ToolDisplayRow>({ blocks, mode }: {
+    blocks: readonly MessageBlock<Row>[];
+    mode: ToolCallDisplay;
+}): readonly MessageBlock<Row>[];
+/**
+ * The flat layout's counterpart (used when `interleaveMessageBlocks` refused): `'hidden'` keeps only
+ * failed rows; the other modes keep every row (`'collapsed'` folds them into one line at render).
+ * @complexity O(n) in rows.
+ */
+export declare function toolRowsForDisplay<Row extends ToolDisplayRow>({ rows, mode }: {
+    rows: readonly Row[];
+    mode: ToolCallDisplay;
+}): readonly Row[];
+/** What a collapsed tool line says: the tool running now, or how many ran (and how many failed). */
+export type ToolGroupSummary = {
+    readonly kind: 'running';
+    readonly name: string;
+} | {
+    readonly kind: 'done';
+    readonly count: number;
+    readonly failed: number;
+};
+/**
+ * Summarises one turn's tool rows. The LAST running row wins, so a line over several in-flight calls
+ * names the newest one, matching what the run is doing now.
+ * @complexity O(n) in rows.
+ */
+export declare function summarizeToolGroup({ rows }: {
+    rows: readonly ToolDisplayRow[];
+}): ToolGroupSummary;
+/**
+ * The collapsed line's text. Each phrase is its own translation key (the English string is the key,
+ * see `slots.ts`), with `{count}`/`{name}` filled by the translator.
+ * @complexity O(1).
+ */
+export declare function toolGroupLabel({ summary, t }: {
+    summary: ToolGroupSummary;
+    t: (key: string, vars?: Record<string, string | number>) => string;
+}): string;
+//# sourceMappingURL=tool-call-display.d.ts.map

package/dist/react/tool-call-display.js

@@ -0,0 +1,97 @@
+import { humanizeToolName } from '../core/index.js';
+/**
+ * Whether a row is a failure the reader must always see: the tool returned an error, or the run
+ * ended without the tool ever answering (`deriveToolStatus` maps both to `'error'`).
+ * @complexity O(1).
+ */
+export function isFailedToolRow({ row }) {
+    return row.status === 'error';
+}
+/** Running = no result yet while the run streams (`'executing'`), or not started (`'inProgress'`). */
+function isRunningToolRow(row) {
+    return row.status === 'executing' || row.status === 'inProgress';
+}
+/**
+ * Applies a display mode to an interleaved message.
+ *
+ * `'collapsed'` merges every `tools` block of one turn into the turn's FIRST `tools` block (its
+ * position and key), so the turn shows a single fold-up line. A turn ends at a `reply-end` block —
+ * the mid-run user message that starts the next reply — so a message holding several replies keeps
+ * one line per reply. Keeping the first block's key keeps the line's open/closed state across
+ * streaming updates, since later blocks append after it.
+ *
+ * `'hidden'` keeps only failed rows and drops `tools` blocks left empty.
+ *
+ * @param input.blocks - `interleaveMessageBlocks` output.
+ * @param input.mode - The display mode.
+ * @returns New blocks; the input is never mutated. `'show'` returns `blocks` itself.
+ * @complexity O(n) in blocks + rows.
+ */
+export function applyToolCallDisplay({ blocks, mode }) {
+    if (mode === 'show')
+        return blocks;
+    if (mode === 'hidden') {
+        const out = [];
+        for (const block of blocks) {
+            if (block.kind !== 'tools') {
+                out.push(block);
+                continue;
+            }
+            const failed = block.rows.filter((row) => isFailedToolRow({ row }));
+            if (failed.length > 0)
+                out.push({ kind: 'tools', rows: failed, key: block.key });
+        }
+        return out;
+    }
+    const out = [];
+    let turnToolsIndex = -1;
+    for (const block of blocks) {
+        if (block.kind === 'reply-end')
+            turnToolsIndex = -1;
+        if (block.kind !== 'tools') {
+            out.push(block);
+            continue;
+        }
+        const first = turnToolsIndex === -1 ? undefined : out[turnToolsIndex];
+        if (first && first.kind === 'tools') {
+            out[turnToolsIndex] = { kind: 'tools', rows: [...first.rows, ...block.rows], key: first.key };
+            continue;
+        }
+        turnToolsIndex = out.length;
+        out.push(block);
+    }
+    return out;
+}
+/**
+ * The flat layout's counterpart (used when `interleaveMessageBlocks` refused): `'hidden'` keeps only
+ * failed rows; the other modes keep every row (`'collapsed'` folds them into one line at render).
+ * @complexity O(n) in rows.
+ */
+export function toolRowsForDisplay({ rows, mode }) {
+    return mode === 'hidden' ? rows.filter((row) => isFailedToolRow({ row })) : rows;
+}
+/**
+ * Summarises one turn's tool rows. The LAST running row wins, so a line over several in-flight calls
+ * names the newest one, matching what the run is doing now.
+ * @complexity O(n) in rows.
+ */
+export function summarizeToolGroup({ rows }) {
+    for (let i = rows.length - 1; i >= 0; i -= 1) {
+        const row = rows[i];
+        if (isRunningToolRow(row))
+            return { kind: 'running', name: humanizeToolName({ name: row.name }, { input: row.use?.input }) };
+    }
+    return { kind: 'done', count: rows.length, failed: rows.filter((row) => isFailedToolRow({ row })).length };
+}
+/**
+ * The collapsed line's text. Each phrase is its own translation key (the English string is the key,
+ * see `slots.ts`), with `{count}`/`{name}` filled by the translator.
+ * @complexity O(1).
+ */
+export function toolGroupLabel({ summary, t }) {
+    if (summary.kind === 'running')
+        return t('Running {name}…', { name: summary.name });
+    const used = summary.count === 1 ? t('Used 1 tool') : t('Used {count} tools', { count: summary.count });
+    return summary.failed > 0 ? `${used} · ${t('{count} failed', { count: summary.failed })}` : used;
+}
+//# sourceMappingURL=tool-call-display.js.map