@jini-ai/chat 0.3.9 → 0.3.10

package/dist/react/components/MessageRow.js

@@ -54,9 +54,10 @@ import { isTerminalRunStatus, splitOnQuestionForms, stripArtifact } from '../../
 import { useToolTimeline } from '../hooks/useToolTimeline.js';
 import { useExtEventGroups } from '../hooks/useExtEventGroups.js';
 import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
+import { useRunActivity } from '../hooks/useRunActivity.js';
 import { interleaveMessageBlocks } from '../message-blocks.js';
 import { useT } from '../hooks/context.js';
-import { getExtEventRenderer } from '../ext-event-renderer-registry.js';
+import { extEventSlot, getExtEventRenderer } from '../ext-event-renderer-registry.js';
 import { ExtEventErrorBoundary } from './ExtEventErrorBoundary.js';
 import { AttachmentPreviewModal } from './AttachmentPreviewModal.js';
 import { Icon } from './Icon.js';
@@ -138,7 +139,7 @@ function CopyMessageButton({ text, label }) {
 export function MessageRow({ message, runStreaming = false, runSucceeded = false, questionFormInteractive = false, questionFormSubmittedAnswers, onQuestionFormSubmit, projectFileNames, onRequestOpenFile, renderAttachment, }) {
     const t = useT();
     const timeline = useToolTimeline(message.events, { runStreaming, runSucceeded });
-    const extGroups = useExtEventGroups(message.events);
+    const extGroups = useExtEventGroups(message.events, extEventSlot);
     // Which attachment chip (if any) this row's preview modal is open for. Row-local, not
     // module-level: two attachments in the same message can never be "open" at once, but two
     // different messages opening their own attachments independently is fine and expected.
@@ -154,7 +155,9 @@ export function MessageRow({ message, runStreaming = false, runSucceeded = false
     // event walk produces, and an artifact block could legitimately span a tool call. Rather than
     // reason about partial overlaps, an artifact-bearing message keeps the flat layout — those
     // messages are dominated by the artifact panel anyway, so the ordering matters least there.
-    const blocks = visibleContent === message.content ? interleaveMessageBlocks(message.events, message.content, timeline.rows) : null;
+    const blocks = visibleContent === message.content
+        ? interleaveMessageBlocks(message.events, message.content, timeline.rows, (ev) => extEventSlot(ev.name, ev.data))
+        : null;
     const pending = isPendingWithNoContent(message, visibleContent, timeline.rows.length);
     const runInProgress = isRunInProgress(message.runStatus);
     const renderToolCard = (row) => (_jsx(ToolCard, { use: row.use, result: row.result, runStreaming: runStreaming, runSucceeded: runSucceeded, ...(projectFileNames !== undefined ? { projectFileNames } : {}), ...(onRequestOpenFile !== undefined ? { onRequestOpenFile } : {}) }, row.id));
@@ -162,14 +165,21 @@ export function MessageRow({ message, runStreaming = false, runSucceeded = false
         const renderer = getExtEventRenderer(group.name);
         if (!renderer)
             return null;
-        const node = renderer({ name: group.name, events: group.events, runStreaming, runSucceeded, runId: message.runId });
+        const node = renderer({
+            name: group.name,
+            events: group.events,
+            runStreaming,
+            runSucceeded,
+            runId: message.runId,
+            ...(group.call === undefined ? {} : { call: group.call }),
+        });
         if (!node)
             return null;
         return (
         // `key` includes the event count so a group that failed on an earlier, shorter event list
         // gets a fresh boundary instance (not the still-tripped one) once a new event actually
         // arrives for it, instead of staying tombstoned for the message's whole lifetime.
-        _jsx(ExtEventErrorBoundary, { name: group.name, children: _jsx("div", { children: node }) }, `${group.name}:${group.events.length}`));
+        _jsx(ExtEventErrorBoundary, { name: group.name, children: _jsx("div", { children: node }) }, `${group.slot}:${group.events.length}`));
     };
     const renderTextSegments = (text, keyPrefix) => splitOnQuestionForms(text).map((segment, i) => segment.kind === 'text' ? (segment.text.trim() ? (_jsx("div", { className: "jini-message-content", children: _jsx(Markdown, { children: segment.text }) }, `${keyPrefix}-${i}`)) : null) : (_jsx(QuestionForm, { form: segment.form, interactive: questionFormInteractive, ...(questionFormSubmittedAnswers !== undefined ? { submittedAnswers: questionFormSubmittedAnswers } : {}), ...(onQuestionFormSubmit !== undefined ? { onSubmit: onQuestionFormSubmit } : {}) }, `${keyPrefix}-${i}`)));
     return (_jsxs("div", { className: "jini-message jini-message-assistant", "data-message-id": message.id, "data-run-status": message.runStatus, "data-agent-element": `chat-message-${message.id}`, "data-agent-role": "region", "data-agent-label": "A reply from the assistant", children: [message.agentName ? _jsx("div", { className: "jini-message-agent", children: message.agentName }) : null, blocks
@@ -180,11 +190,22 @@ export function MessageRow({ message, runStreaming = false, runSucceeded = false
                     if (block.kind === 'tools') {
                         return (_jsx("div", { className: "jini-message-tools", children: block.rows.map(renderToolCard) }, block.key));
                     }
-                    const group = extGroups.find((g) => g.name === block.name);
+                    const group = extGroups.find((g) => g.slot === block.slot);
                     if (!group)
                         return null;
                     return (_jsx("div", { className: "jini-message-ext-events", children: renderExtGroup(group) }, block.key));
                 })
-                : (_jsxs(_Fragment, { children: [segments.map((segment, i) => segment.kind === 'text' ? (segment.text.trim() ? (_jsx("div", { className: "jini-message-content", children: _jsx(Markdown, { children: segment.text }) }, i)) : null) : (_jsx(QuestionForm, { form: segment.form, interactive: questionFormInteractive, ...(questionFormSubmittedAnswers !== undefined ? { submittedAnswers: questionFormSubmittedAnswers } : {}), ...(onQuestionFormSubmit !== undefined ? { onSubmit: onQuestionFormSubmit } : {}) }, i))), timeline.rows.length > 0 ? (_jsx("div", { className: "jini-message-tools", children: timeline.rows.map(renderToolCard) })) : null, extGroups.length > 0 ? _jsx("div", { className: "jini-message-ext-events", children: extGroups.map(renderExtGroup) }) : null] })), usageEvent ? _jsx(UsageSummary, { usage: usageEvent }) : null, message.runStatus === 'failed' ? _jsx("div", { className: "jini-message-error", children: t('This turn failed.') }) : null, !pending && !runInProgress ? (_jsx("div", { className: "jini-message-actions jini-message-actions--assistant", children: _jsx(CopyMessageButton, { text: visibleContent, label: t('Copy message') }) })) : null, pending ? (_jsx("div", { className: "jini-message-pending", "aria-live": "polite", children: t('Thinking…') })) : null] }));
+                : (_jsxs(_Fragment, { children: [segments.map((segment, i) => segment.kind === 'text' ? (segment.text.trim() ? (_jsx("div", { className: "jini-message-content", children: _jsx(Markdown, { children: segment.text }) }, i)) : null) : (_jsx(QuestionForm, { form: segment.form, interactive: questionFormInteractive, ...(questionFormSubmittedAnswers !== undefined ? { submittedAnswers: questionFormSubmittedAnswers } : {}), ...(onQuestionFormSubmit !== undefined ? { onSubmit: onQuestionFormSubmit } : {}) }, i))), timeline.rows.length > 0 ? (_jsx("div", { className: "jini-message-tools", children: timeline.rows.map(renderToolCard) })) : null, extGroups.length > 0 ? _jsx("div", { className: "jini-message-ext-events", children: extGroups.map(renderExtGroup) }) : null] })), usageEvent ? _jsx(UsageSummary, { usage: usageEvent }) : null, message.runStatus === 'failed' ? _jsx("div", { className: "jini-message-error", children: t('This turn failed.') }) : null, !pending && !runInProgress ? (_jsx("div", { className: "jini-message-actions jini-message-actions--assistant", children: _jsx(CopyMessageButton, { text: visibleContent, label: t('Copy message') }) })) : null, _jsx(RunActivityLine, { events: message.events, active: pending || (runStreaming === true && runInProgress) })] }));
+}
+/**
+ * The live "what is it doing" line under a running reply (see `core/run-activity.ts`). Replaces the
+ * old "Thinking…" placeholder, which vanished for good as soon as the first tool row appeared.
+ * Kept a separate component so its one-second tick re-renders only this line, not the whole row.
+ */
+function RunActivityLine({ events, active }) {
+    const label = useRunActivity(events, active);
+    if (label === null)
+        return null;
+    return (_jsx("div", { className: "jini-message-pending jini-run-activity", "aria-live": "off", children: label }));
 }
 //# sourceMappingURL=MessageRow.js.map

package/dist/react/components/ToolCard.js

@@ -21,7 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * generic rendering for it.
  */
 import { useState } from 'react';
-import { isTodoWriteToolName, parseTodoWriteInput, toRenderProps } from '../../core/index.js';
+import { formatToolOutputForDisplay, isTodoWriteToolName, parseTodoWriteInput, toRenderProps } from '../../core/index.js';
 import { useT } from '../hooks/context.js';
 import { getToolRenderer } from '../tool-renderer-registry.js';
 import { Icon } from './Icon.js';
@@ -137,21 +137,21 @@ function DelegatedToolCard({ name, input, result, runStreaming, runSucceeded })
     const args = EXECUTE_DELEGATED_TOOL_NAMES.has(name) ? wrapper.input : input;
     const target = primaryTarget(args);
     const isRunning = runStreaming && !result;
-    return (_jsxs("div", { className: "op-card op-jini-tool", children: [_jsxs("button", { type: "button", className: "op-card-head", onClick: () => setOpen((o) => !o), children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsxs("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: [t('Tool call'), " \u00B7 ", humanizeToolId(toolId)] }), target ? _jsx("span", { className: "op-meta", children: target }) : null, _jsx("span", { className: "op-expand-chev", "aria-hidden": true, children: _jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right', size: 11 }) })] }), _jsx("div", { className: `accordion-collapsible${open ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsxs("div", { className: "op-card-detail", children: [_jsx("pre", { className: "op-command", children: JSON.stringify(args ?? {}) }), result?.content ? _jsx("pre", { className: "op-output", children: truncate(result.content, 2000) }) : null, _jsx(ToolResultMedia, { result: result })] }) }) }), _jsx(FileErrorDetail, { result: result })] }));
+    return (_jsxs("div", { className: "op-card op-jini-tool", children: [_jsxs("button", { type: "button", className: "op-card-head", onClick: () => setOpen((o) => !o), children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsxs("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: [t('Tool call'), " \u00B7 ", humanizeToolId(toolId)] }), target ? _jsx("span", { className: "op-meta", children: target }) : null, _jsx("span", { className: "op-expand-chev", "aria-hidden": true, children: _jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right', size: 11 }) })] }), _jsx("div", { className: `accordion-collapsible${open ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsxs("div", { className: "op-card-detail", children: [_jsx("pre", { className: "op-command", children: JSON.stringify(args ?? {}) }), result?.content ? _jsx("pre", { className: "op-output", children: truncate(formatToolOutputForDisplay(result.content), 2000) }) : null, _jsx(ToolResultMedia, { result: result })] }) }) }), _jsx(FileErrorDetail, { result: result })] }));
 }
 function SearchToolsCard({ input, result, runStreaming, runSucceeded }) {
     const t = useT();
     const [open, setOpen] = useState(false);
     const obj = (input ?? {});
     const isRunning = runStreaming && !result;
-    return (_jsxs("div", { className: "op-card op-jini-tool", children: [_jsxs("button", { type: "button", className: "op-card-head", onClick: () => setOpen((o) => !o), children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Search tools') }), obj.query ? _jsx("span", { className: "op-meta", children: obj.query }) : null, _jsx("span", { className: "op-expand-chev", "aria-hidden": true, children: _jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right', size: 11 }) })] }), _jsx("div", { className: `accordion-collapsible${open ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsx("div", { className: "op-card-detail", children: result?.content ? _jsx("pre", { className: "op-output", children: truncate(result.content, 2000) }) : null }) }) }), _jsx(FileErrorDetail, { result: result })] }));
+    return (_jsxs("div", { className: "op-card op-jini-tool", children: [_jsxs("button", { type: "button", className: "op-card-head", onClick: () => setOpen((o) => !o), children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Search tools') }), obj.query ? _jsx("span", { className: "op-meta", children: obj.query }) : null, _jsx("span", { className: "op-expand-chev", "aria-hidden": true, children: _jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right', size: 11 }) })] }), _jsx("div", { className: `accordion-collapsible${open ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsx("div", { className: "op-card-detail", children: result?.content ? _jsx("pre", { className: "op-output", children: truncate(formatToolOutputForDisplay(result.content), 2000) }) : null }) }) }), _jsx(FileErrorDetail, { result: result })] }));
 }
 function DescribeToolCard({ input, result, runStreaming, runSucceeded }) {
     const t = useT();
     const [open, setOpen] = useState(false);
     const obj = (input ?? {});
     const isRunning = runStreaming && !result;
-    return (_jsxs("div", { className: "op-card op-jini-tool", children: [_jsxs("button", { type: "button", className: "op-card-head", onClick: () => setOpen((o) => !o), children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Describe tool') }), obj.id ? _jsx("span", { className: "op-meta", children: obj.id }) : null, _jsx("span", { className: "op-expand-chev", "aria-hidden": true, children: _jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right', size: 11 }) })] }), _jsx("div", { className: `accordion-collapsible${open ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsx("div", { className: "op-card-detail", children: result?.content ? _jsx("pre", { className: "op-output", children: truncate(result.content, 2000) }) : null }) }) }), _jsx(FileErrorDetail, { result: result })] }));
+    return (_jsxs("div", { className: "op-card op-jini-tool", children: [_jsxs("button", { type: "button", className: "op-card-head", onClick: () => setOpen((o) => !o), children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Describe tool') }), obj.id ? _jsx("span", { className: "op-meta", children: obj.id }) : null, _jsx("span", { className: "op-expand-chev", "aria-hidden": true, children: _jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right', size: 11 }) })] }), _jsx("div", { className: `accordion-collapsible${open ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsx("div", { className: "op-card-detail", children: result?.content ? _jsx("pre", { className: "op-output", children: truncate(formatToolOutputForDisplay(result.content), 2000) }) : null }) }) }), _jsx(FileErrorDetail, { result: result })] }));
 }
 function OpenInTabButton({ filePath, ctx }) {
     const t = useT();
@@ -208,7 +208,7 @@ function BashCard({ input, result, runStreaming, runSucceeded }) {
     const desc = obj.description;
     const [open, setOpen] = useState(false);
     const isRunning = runStreaming && !result;
-    return (_jsxs("div", { className: "op-card op-bash", children: [_jsxs("button", { type: "button", className: "op-card-head", onClick: () => setOpen((o) => !o), children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Bash') }), desc ? _jsx("span", { className: "op-meta op-desc", children: desc }) : null, _jsx("span", { className: "op-expand-chev", "aria-hidden": true, children: _jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right', size: 11 }) })] }), _jsx("div", { className: `accordion-collapsible${open ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsxs("div", { className: "op-card-detail", children: [_jsx("pre", { className: "op-command", children: truncate(command, 400) }), result?.content ? _jsx("pre", { className: "op-output", children: truncate(result.content, 4000) }) : null] }) }) })] }));
+    return (_jsxs("div", { className: "op-card op-bash", children: [_jsxs("button", { type: "button", className: "op-card-head", onClick: () => setOpen((o) => !o), children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Bash') }), desc ? _jsx("span", { className: "op-meta op-desc", children: desc }) : null, _jsx("span", { className: "op-expand-chev", "aria-hidden": true, children: _jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right', size: 11 }) })] }), _jsx("div", { className: `accordion-collapsible${open ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsxs("div", { className: "op-card-detail", children: [_jsx("pre", { className: "op-command", children: truncate(command, 400) }), result?.content ? _jsx("pre", { className: "op-output", children: truncate(formatToolOutputForDisplay(result.content), 4000) }) : null] }) }) })] }));
 }
 function GlobCard({ input, result, runStreaming, runSucceeded }) {
     const t = useT();
@@ -268,7 +268,7 @@ function ToolResultMedia({ result }) {
 function FileErrorDetail({ result }) {
     if (!result?.isError || !result.content.trim())
         return null;
-    return _jsx("pre", { className: "op-output", children: truncate(result.content, 1200) });
+    return _jsx("pre", { className: "op-output", children: truncate(formatToolOutputForDisplay(result.content), 1200) });
 }
 function describeInput(input) {
     if (input == null)

package/dist/react/ext-event-renderer-registry.d.ts

@@ -19,6 +19,20 @@
  */
 import type { ReactNode } from 'react';
 /** Render-prop payload for one `name` group of `kind: 'ext'` events belonging to a message. */
+/**
+ * The tool call that was still open when a group's first ext event arrived: the call that emitted
+ * the surface. For a held-open question (a tool that shows a card and waits for the answer), the
+ * call's `result` is the exchange ending: answered, expired or dismissed. Absent `result` means
+ * the call is still waiting, or its run ended before it returned.
+ */
+export interface ExtEventCall {
+    readonly name: string;
+    readonly input: unknown;
+    readonly result?: {
+        readonly content: string;
+        readonly isError: boolean;
+    };
+}
 export interface ExtEventRenderProps {
     name: string;
     /** Every matching event's `data`, in arrival order. Never empty. */
@@ -28,6 +42,8 @@ export interface ExtEventRenderProps {
     runSucceeded: boolean;
     /** The owning message's `ChatMessage.runId`, if known — a renderer that needs to send something back to this specific run (e.g. an A2UI action) needs this; omitted (`undefined`) for a message with no run association. */
     runId: string | undefined;
+    /** See {@link ExtEventCall}. Absent when the group's first event arrived outside any tool call. */
+    call?: ExtEventCall;
 }
 /**
  * Ext-event render callback. Runs inline during `MessageRow`'s render — hook-free, like
@@ -40,12 +56,34 @@ export interface ExtEventRenderProps {
  * name+JSON card).
  */
 export type ExtEventRenderer = (props: ExtEventRenderProps) => ReactNode;
+/**
+ * Names the independent surface one ext event belongs to, or `undefined` for "the name's shared slot".
+ *
+ * Without one, every event sharing a `name` folds into ONE render slot at the name's first
+ * occurrence — right for a stream that builds a single surface (A2UI's create → update sequence).
+ * It is wrong for a protocol whose events are separate surfaces: MCP-UI emits one resource per
+ * card, so a run's second card rendered inside the first card's slot, far above where it arrived,
+ * and a run blocked on it waited for an answer nobody could see (Tovu stuck-chat investigation,
+ * 2026-09-27). A slot key gives each surface its own slot at its own first occurrence; later events
+ * with the same key still update that slot in place.
+ */
+export type ExtEventSlotKey = (data: unknown) => string | undefined;
+export interface ExtEventRendererOptions {
+    /** See {@link ExtEventSlotKey}. Omit for one shared slot per `name`. */
+    slotKey?: ExtEventSlotKey;
+}
 /**
  * Register a renderer for an ext-event `name`. Returns an unregister handle so tests / hot-reloads
  * can dispose cleanly. Re-registering the same name overwrites — last writer wins.
  */
-export declare function registerExtEventRenderer(name: string, renderer: ExtEventRenderer): () => void;
+export declare function registerExtEventRenderer(name: string, renderer: ExtEventRenderer, options?: ExtEventRendererOptions): () => void;
 export declare function getExtEventRenderer(name: string): ExtEventRenderer | undefined;
+/**
+ * The render slot an ext event belongs to: its `name`, or `name:key` when the name's renderer was
+ * registered with a {@link ExtEventSlotKey} that recognizes this event. A throwing key function
+ * falls back to the shared slot rather than taking the whole message down.
+ */
+export declare function extEventSlot(name: string, data: unknown): string;
 /** Visible mainly for tests. */
 export declare function clearExtEventRenderers(): void;
 //# sourceMappingURL=ext-event-renderer-registry.d.ts.map

package/dist/react/ext-event-renderer-registry.js

@@ -3,15 +3,34 @@ const renderers = new Map();
  * Register a renderer for an ext-event `name`. Returns an unregister handle so tests / hot-reloads
  * can dispose cleanly. Re-registering the same name overwrites — last writer wins.
  */
-export function registerExtEventRenderer(name, renderer) {
-    renderers.set(name, renderer);
+export function registerExtEventRenderer(name, renderer, options = {}) {
+    const entry = { renderer, slotKey: options.slotKey };
+    renderers.set(name, entry);
     return () => {
-        if (renderers.get(name) === renderer)
+        if (renderers.get(name) === entry)
             renderers.delete(name);
     };
 }
 export function getExtEventRenderer(name) {
-    return renderers.get(name);
+    return renderers.get(name)?.renderer;
+}
+/**
+ * The render slot an ext event belongs to: its `name`, or `name:key` when the name's renderer was
+ * registered with a {@link ExtEventSlotKey} that recognizes this event. A throwing key function
+ * falls back to the shared slot rather than taking the whole message down.
+ */
+export function extEventSlot(name, data) {
+    const slotKey = renderers.get(name)?.slotKey;
+    if (!slotKey)
+        return name;
+    let key;
+    try {
+        key = slotKey(data);
+    }
+    catch {
+        key = undefined;
+    }
+    return key === undefined || key === '' ? name : `${name}:${key}`;
 }
 /** Visible mainly for tests. */
 export function clearExtEventRenderers() {

package/dist/react/features/chat-pane/components/ChatPane.js

@@ -29,11 +29,12 @@ function chatPaneClassName(variant, className) {
 }
 function resolveRuntimeAccessView(runtimeAccess, injectedAgents, scanningAgents, daemonOnline, onRescanAgents, inventory) {
     if (runtimeAccess === undefined) {
-        return { agents: injectedAgents, scanningAgents, daemonOnline, rescanAgents: onRescanAgents };
+        return { agents: injectedAgents, scanningAgents, connectingAgents: false, daemonOnline, rescanAgents: onRescanAgents };
     }
     return {
         agents: inventory.agents,
         scanningAgents: inventory.scanningAgents,
+        connectingAgents: inventory.connectingAgents,
         daemonOnline: inventory.daemonOnline,
         rescanAgents: () => void inventory.rescanAgents(),
     };
@@ -72,8 +73,8 @@ function ChatPaneNoUsableCliMessage({ executionMode, apiModeAvailable, onExecuti
 }
 /** The pane's stack of mutually-independent error/status banners — each condition is its own
  * source of truth, so they are rendered as siblings rather than folded into one derived state. */
-function ChatPaneStatusMessages({ unavailable, scanningAgents, executionMode, apiModeAvailable, onExecutionModeChange, conversationError, attachmentError, dropReadError, workingDirectoryError, workingDirectoryPending, workingDirectoryInvalid, runtimeInventoryError, t, }) {
-    return (_jsxs(_Fragment, { children: [unavailable && scanningAgents ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Loading available CLIs') })) : unavailable ? (_jsx(ChatPaneNoUsableCliMessage, { executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, t: t })) : null, conversationError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: conversationError.message })) : null, attachmentError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: attachmentError.message })) : null, dropReadError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: dropReadError })) : null, workingDirectoryError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: workingDirectoryError.message })) : null, workingDirectoryPending ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Checking working directory…') })) : workingDirectoryInvalid ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: t('Working directory is unavailable.') })) : null, runtimeInventoryError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: runtimeInventoryError.message })) : null] }));
+function ChatPaneStatusMessages({ unavailable, scanningAgents, connectingAgents, executionMode, apiModeAvailable, onExecutionModeChange, conversationError, attachmentError, dropReadError, workingDirectoryError, workingDirectoryPending, workingDirectoryInvalid, runtimeInventoryError, t, }) {
+    return (_jsxs(_Fragment, { children: [unavailable && connectingAgents ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Connecting to the assistant…') })) : unavailable && scanningAgents ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Loading available CLIs') })) : unavailable ? (_jsx(ChatPaneNoUsableCliMessage, { executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, t: t })) : null, conversationError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: conversationError.message })) : null, attachmentError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: attachmentError.message })) : null, dropReadError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: dropReadError })) : null, workingDirectoryError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: workingDirectoryError.message })) : null, workingDirectoryPending ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Checking working directory…') })) : workingDirectoryInvalid ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: t('Working directory is unavailable.') })) : null, runtimeInventoryError && !connectingAgents ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: runtimeInventoryError.message })) : null] }));
 }
 function ChatPaneWorkingDirectoryBlock({ workingDirectoryAccess, workingDirectoryControlPlacement, pane, t, }) {
     if (workingDirectoryAccess && workingDirectoryControlPlacement === 'below') {
@@ -261,6 +262,6 @@ export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, run
         footerAccessories: (_jsx(AgentRuntimePicker, { agents: runtimeView.agents, value: pane.selection, onChange: pane.setSelection, ...definedProps({ onRescan: runtimeView.rescanAgents }), scanning: runtimeView.scanningAgents, daemonOnline: runtimeView.daemonOnline, placement: runtimePickerPlacement, executionMode: executionMode, apiModeAvailable: apiModeAvailable, ...definedProps({ onExecutionModeChange, byokRuntime, onByokModelChange }) })),
     });
     const { rootRef, controlsRef } = useChatPaneControlsHeight();
-    return (_jsxs("section", { className: chatPaneClassName(variant, className), style: style, "data-activity": pane.activity, ref: rootRef, children: [_jsx("style", { "data-jini-chat-pane-styles": "true", children: CHAT_PANE_STYLES }), resolveChatPaneHeader(header, title, pane.reset, t), _jsxs("div", { className: "jini-chat-pane__body", children: [_jsx(MessageList, { messages: pane.conversation.messages, isStreaming: pane.conversation.isStreaming, scrollIntent: pane.conversation.scrollIntent, onScrolled: pane.conversation.acknowledgeScroll, pendingPrompt: pane.queuedPrompt === null ? null : { text: pane.queuedPrompt, onCancel: pane.cancelQueued }, ...(projectFileNames === undefined ? {} : { projectFileNames: new Set(projectFileNames) }) }), _jsxs("div", { className: "jini-chat-pane__controls", ref: controlsRef, children: [_jsx(ChatPaneSuggestionsRow, { suggestions: suggestions, onSelect: pane.composer.setDraft, t: t }), _jsx(ChatPaneStatusMessages, { unavailable: unavailable, scanningAgents: runtimeView.scanningAgents, executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, conversationError: pane.conversation.error, attachmentError: pane.attachmentError, dropReadError: fileDrop.dropReadError, workingDirectoryError: pane.workingDirectoryError, workingDirectoryPending: pane.workingDirectoryPending, workingDirectoryInvalid: pane.workingDirectoryInvalid, runtimeInventoryError: inventory.runtimeInventoryError, t: t }), _jsx(ChatPaneComposerArea, { fileDrop: fileDrop, uploadAttachments: uploadAttachments, pane: pane, disabled: disabled, unavailable: unavailable, placeholder: composerPlaceholder, slots: slots, attachmentAccept: attachmentAccept, workingDirectoryAccess: workingDirectoryAccess, workingDirectoryControlPlacement: workingDirectoryControlPlacement, t: t })] })] }), footer] }));
+    return (_jsxs("section", { className: chatPaneClassName(variant, className), style: style, "data-activity": pane.activity, ref: rootRef, children: [_jsx("style", { "data-jini-chat-pane-styles": "true", children: CHAT_PANE_STYLES }), resolveChatPaneHeader(header, title, pane.reset, t), _jsxs("div", { className: "jini-chat-pane__body", children: [_jsx(MessageList, { messages: pane.conversation.messages, isStreaming: pane.conversation.isStreaming, scrollIntent: pane.conversation.scrollIntent, onScrolled: pane.conversation.acknowledgeScroll, pendingPrompt: pane.queuedPrompt === null ? null : { text: pane.queuedPrompt, onCancel: pane.cancelQueued }, ...(projectFileNames === undefined ? {} : { projectFileNames: new Set(projectFileNames) }) }), _jsxs("div", { className: "jini-chat-pane__controls", ref: controlsRef, children: [_jsx(ChatPaneSuggestionsRow, { suggestions: suggestions, onSelect: pane.composer.setDraft, t: t }), _jsx(ChatPaneStatusMessages, { unavailable: unavailable, scanningAgents: runtimeView.scanningAgents, connectingAgents: runtimeView.connectingAgents, executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, conversationError: pane.conversation.error, attachmentError: pane.attachmentError, dropReadError: fileDrop.dropReadError, workingDirectoryError: pane.workingDirectoryError, workingDirectoryPending: pane.workingDirectoryPending, workingDirectoryInvalid: pane.workingDirectoryInvalid, runtimeInventoryError: inventory.runtimeInventoryError, t: t }), _jsx(ChatPaneComposerArea, { fileDrop: fileDrop, uploadAttachments: uploadAttachments, pane: pane, disabled: disabled, unavailable: unavailable, placeholder: composerPlaceholder, slots: slots, attachmentAccept: attachmentAccept, workingDirectoryAccess: workingDirectoryAccess, workingDirectoryControlPlacement: workingDirectoryControlPlacement, t: t })] })] }), footer] }));
 }
 //# sourceMappingURL=ChatPane.js.map

package/dist/react/features/chat-pane/hooks/useChatPaneRuntimeInventory.hooks.d.ts

@@ -3,10 +3,18 @@ export interface UseChatPaneRuntimeInventoryOptions {
     access?: ChatPaneRuntimeAccess;
     initialAgents?: readonly ChatPaneAgent[];
     pollIntervalMs?: number;
+    /** Backoff between retries of a failed inventory load; the last entry repeats. */
+    retryDelaysMs?: readonly number[];
 }
 export interface UseChatPaneRuntimeInventoryResult {
     agents: readonly ChatPaneAgent[];
     scanningAgents: boolean;
+    /**
+     * `listAgents` has not answered successfully yet and its last attempt failed — the host is
+     * unreachable (typically a daemon restart), so a retry is pending. Not "no usable CLI": that is
+     * only known once a load RESOLVES.
+     */
+    connectingAgents: boolean;
     daemonOnline: boolean;
     runtimeInventoryError: Error | null;
     rescanAgents: () => Promise<void>;
@@ -18,8 +26,14 @@ export interface UseChatPaneRuntimeInventoryResult {
  * Inventory and health are tracked as two independent operations: a slow `listAgents` must not
  * suppress a health tick that resolved after it, and vice versa.
  *
+ * A REJECTED `listAgents` is "no answer yet", never a final empty inventory (2026-09-28: the
+ * daemon restarting under an open pane left it on "No usable CLI is selected" until a hard
+ * reload). Until the first successful answer the hook retries on a backoff, and immediately when
+ * the daemon goes from offline to online, the window regains focus, or the tab becomes visible.
+ * A RESOLVED list — even an empty one — is a finished answer; hosts reject when theirs is not one.
+ *
  * @complexity Time: O(n) per inventory response; space: O(n) for the snapshot.
  * @overallScore 100/100
  */
-export declare function useChatPaneRuntimeInventory({ access, initialAgents, pollIntervalMs, }: UseChatPaneRuntimeInventoryOptions): UseChatPaneRuntimeInventoryResult;
+export declare function useChatPaneRuntimeInventory({ access, initialAgents, pollIntervalMs, retryDelaysMs, }: UseChatPaneRuntimeInventoryOptions): UseChatPaneRuntimeInventoryResult;
 //# sourceMappingURL=useChatPaneRuntimeInventory.hooks.d.ts.map

package/dist/react/features/chat-pane/hooks/useChatPaneRuntimeInventory.hooks.js

@@ -1,6 +1,9 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useLatestOperation } from '../../../hooks/useLatestOperation.js';
 const EMPTY_AGENTS = [];
+/** Waits between inventory retries while `listAgents` keeps failing: quick at first (a daemon
+ *  restart takes seconds), then every 30s for as long as the pane stays mounted. */
+const DEFAULT_RETRY_DELAYS_MS = [1_000, 2_000, 4_000, 8_000, 15_000, 30_000];
 /**
  * Owns agent inventory, explicit rescans, and daemon-health polling while the
  * host supplies only the environment-specific I/O effects.
@@ -8,10 +11,16 @@ const EMPTY_AGENTS = [];
  * Inventory and health are tracked as two independent operations: a slow `listAgents` must not
  * suppress a health tick that resolved after it, and vice versa.
  *
+ * A REJECTED `listAgents` is "no answer yet", never a final empty inventory (2026-09-28: the
+ * daemon restarting under an open pane left it on "No usable CLI is selected" until a hard
+ * reload). Until the first successful answer the hook retries on a backoff, and immediately when
+ * the daemon goes from offline to online, the window regains focus, or the tab becomes visible.
+ * A RESOLVED list — even an empty one — is a finished answer; hosts reject when theirs is not one.
+ *
  * @complexity Time: O(n) per inventory response; space: O(n) for the snapshot.
  * @overallScore 100/100
  */
-export function useChatPaneRuntimeInventory({ access, initialAgents = EMPTY_AGENTS, pollIntervalMs = 5_000, }) {
+export function useChatPaneRuntimeInventory({ access, initialAgents = EMPTY_AGENTS, pollIntervalMs = 5_000, retryDelaysMs = DEFAULT_RETRY_DELAYS_MS, }) {
     const [agents, setAgents] = useState(initialAgents);
     // Seeded from `access` at mount, not `false`: the load effect below only flips this to `true`
     // once it runs, which is after the first paint. Starting at `false` when `access` is already
@@ -19,70 +28,160 @@ export function useChatPaneRuntimeInventory({ access, initialAgents = EMPTY_AGEN
     // loading — indistinguishable from "detection finished, nothing usable" to any consumer keyed
     // off this flag, which is exactly the frame `ChatPane`'s "No usable CLI" banner flashed on.
     const [scanningAgents, setScanningAgents] = useState(() => access !== undefined);
+    const [connectingAgents, setConnectingAgents] = useState(false);
     const [daemonOnline, setDaemonOnline] = useState(false);
     const [runtimeInventoryError, setRuntimeInventoryError] = useState(null);
     const inventory = useLatestOperation();
     const health = useLatestOperation();
+    const retry = useInventoryRetry(retryDelaysMs);
     useEffect(() => {
         if (access !== undefined)
             return;
         inventory.supersede();
+        retry.reset();
         setAgents(initialAgents);
         setScanningAgents(false);
+        setConnectingAgents(false);
         setRuntimeInventoryError(null);
-    }, [access, initialAgents, inventory]);
+    }, [access, initialAgents, inventory, retry]);
     const loadAgents = useCallback(async (rescan) => {
         if (!access)
             return;
+        retry.cancel();
         setScanningAgents(true);
         setRuntimeInventoryError(null);
         await inventory.run(async (token) => {
             const nextAgents = await (rescan ? access.rescanAgents() : access.listAgents());
             token.ensureCurrent();
+            retry.answered();
             setAgents([...nextAgents]);
+            setConnectingAgents(false);
             setScanningAgents(false);
         }, (error) => {
-            // A failed rescan keeps the last good inventory on screen; a failed initial load has no
-            // last-good to keep, so it clears to empty rather than showing agents that may be gone.
-            if (!rescan)
+            // A failed load after a good answer keeps that inventory on screen. Before one there is no
+            // last-good to keep: clear to empty, report "connecting", and try again on the backoff.
+            if (!retry.hasAnswer()) {
                 setAgents([]);
+                setConnectingAgents(true);
+                retry.schedule(() => void loadAgents(false));
+            }
             setRuntimeInventoryError(error);
             setScanningAgents(false);
         });
-    }, [access, inventory]);
+    }, [access, inventory, retry]);
+    /** A fresh attempt now, with the backoff restarted — only while nothing has answered yet. */
+    const reloadIfUnanswered = useCallback(() => {
+        if (retry.hasAnswer())
+            return;
+        retry.restart();
+        void loadAgents(false);
+    }, [loadAgents, retry]);
     const refreshStatus = useCallback(async () => {
         // No `if (!access) return` guard here (unlike `loadAgents`, which is reachable through
         // the publicly-exposed `rescanAgents` and so can be invoked with a stale closure by the
-        // host): `refreshStatus` is never returned from this hook, so its only two call sites
-        // (the effect below, both the immediate call and the interval tick) are inside the SAME
-        // closure as the effect's own `if (!access) return` at its top — `access` is guaranteed
-        // defined by the time either one runs.
+        // host): `refreshStatus` is never returned from this hook, so its call sites (the effects
+        // below) all sit behind their own `if (!access) return` — `access` is guaranteed defined by
+        // the time any one runs.
         const runtimeAccess = access;
         await health.run(async (token) => {
             const online = await runtimeAccess.daemonOnline();
             token.ensureCurrent();
             setDaemonOnline(online);
-        }, () => setDaemonOnline(false));
-    }, [access, health]);
+            if (retry.observeOnline(online))
+                reloadIfUnanswered();
+        }, () => {
+            retry.observeOnline(false);
+            setDaemonOnline(false);
+        });
+    }, [access, health, reloadIfUnanswered, retry]);
     useEffect(() => {
         if (!access)
             return;
+        retry.reset();
         void loadAgents(false);
         void refreshStatus();
         const timer = window.setInterval(() => void refreshStatus(), pollIntervalMs);
         return () => {
             window.clearInterval(timer);
+            retry.cancel();
             inventory.supersede();
             health.supersede();
         };
-    }, [access, health, inventory, loadAgents, pollIntervalMs, refreshStatus]);
+    }, [access, health, inventory, loadAgents, pollIntervalMs, refreshStatus, retry]);
+    useEffect(() => {
+        if (!access)
+            return;
+        const onWake = () => {
+            if (document.visibilityState === 'hidden')
+                return;
+            void refreshStatus();
+            reloadIfUnanswered();
+        };
+        window.addEventListener('focus', onWake);
+        document.addEventListener('visibilitychange', onWake);
+        return () => {
+            window.removeEventListener('focus', onWake);
+            document.removeEventListener('visibilitychange', onWake);
+        };
+    }, [access, refreshStatus, reloadIfUnanswered]);
     const rescanAgents = useCallback(() => loadAgents(true), [loadAgents]);
     return {
         agents,
         scanningAgents,
+        connectingAgents,
         daemonOnline,
         runtimeInventoryError,
         rescanAgents,
     };
 }
+/**
+ * The retry bookkeeping `useChatPaneRuntimeInventory` needs, in refs so none of it re-renders:
+ * whether an answer has arrived, the pending retry timer, the backoff step, and the last health
+ * result (`null` until the first one, so the first "online" report is not a reconnect).
+ */
+function useInventoryRetry(delaysMs) {
+    const answeredRef = useRef(false);
+    const timerRef = useRef(undefined);
+    const stepRef = useRef(0);
+    const lastOnlineRef = useRef(null);
+    const delaysRef = useRef(delaysMs);
+    delaysRef.current = delaysMs;
+    const [retry] = useState(() => {
+        const cancel = () => {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        };
+        const restart = () => {
+            cancel();
+            stepRef.current = 0;
+        };
+        return {
+            hasAnswer: () => answeredRef.current,
+            answered: () => {
+                answeredRef.current = true;
+                restart();
+            },
+            schedule: (attempt) => {
+                cancel();
+                const delays = delaysRef.current;
+                const delay = delays[Math.min(stepRef.current, delays.length - 1)] ?? 0;
+                stepRef.current += 1;
+                timerRef.current = window.setTimeout(attempt, delay);
+            },
+            cancel,
+            restart,
+            reset: () => {
+                restart();
+                answeredRef.current = false;
+                lastOnlineRef.current = null;
+            },
+            observeOnline: (online) => {
+                const reconnected = online && lastOnlineRef.current === false;
+                lastOnlineRef.current = online;
+                return reconnected;
+            },
+        };
+    });
+    return retry;
+}
 //# sourceMappingURL=useChatPaneRuntimeInventory.hooks.js.map