@jini-ai/chat 0.5.6 → 0.5.8

package/dist/react/components/A2uiSurfaceCard.js

@@ -54,7 +54,7 @@ function extractSurfaceId(message) {
     return undefined;
 }
 /** Renders one component and its children by walking the surface's component map from `componentId` — identical degrade-sanely behavior to `A2uiLab.tsx`'s `RenderComponent`. */
-function RenderComponent({ interpreter, surfaceId, componentId, ancestors, onAction, }) {
+function RenderComponent({ interpreter, surfaceId, componentId, ancestors, onAction, registry, }) {
     if (ancestors.has(componentId)) {
         return (_jsxs("span", { className: "a2ui-placeholder a2ui-placeholder-cycle", "data-a2ui-status": "cycle", "data-a2ui-component-id": componentId, children: ["\u27F2 circular reference at \u201C", componentId, "\u201D"] }));
     }
@@ -65,7 +65,7 @@ function RenderComponent({ interpreter, surfaceId, componentId, ancestors, onAct
     }
     const nextAncestors = new Set(ancestors);
     nextAncestors.add(componentId);
-    const childProps = { interpreter, surfaceId, ancestors: nextAncestors, onAction };
+    const childProps = { interpreter, surfaceId, ancestors: nextAncestors, onAction, registry };
     function resolveText(value) {
         // Text props already passed the catalog schema. Parsing preserves that wire type at this
         // Record<string, unknown> boundary without asserting a shape the compiler cannot verify.
@@ -108,9 +108,9 @@ function RenderComponent({ interpreter, surfaceId, componentId, ancestors, onAct
             // one of the 13 basic types this switch has no case for, or a registry-sourced component
             // (`shadcn.*`/`recharts.*`) merged into the catalog by `A2uiSurfaceCard`'s own
             // `buildA2uiCatalogFromRegistry` call below. Resolved against the SAME registry
-            // `@jini-ai/ui`'s own `A2uiSurfaceRenderer` uses, so a type addable to the catalog and
+            // the catalog below uses, so a type addable to the catalog and
             // renderable there is addable and renderable here too.
-            const entry = DEFAULT_INTERACTIVE_UI_REGISTRY.resolveById({ id: component.component });
+            const entry = registry.resolveById({ id: component.component });
             if (!entry) {
                 return (_jsxs("span", { className: "a2ui-placeholder", "data-a2ui-status": "unrenderable-type", children: ["\u26A0 no renderer yet for component type \u201C", component.component, "\u201D"] }));
             }
@@ -139,16 +139,16 @@ function isThenable(value) {
     return typeof value === 'object' && value !== null && typeof value.then === 'function';
 }
 /** Registered against `ext-event-renderer-registry.ts`'s `'a2ui'` name — see module doc. */
-export function A2uiSurfaceCard({ events, runId, onAgentAction }) {
+export function A2uiSurfaceCard({ events, runId, onAgentAction, registry = DEFAULT_INTERACTIVE_UI_REGISTRY }) {
     const t = useT();
-    // Merges `DEFAULT_INTERACTIVE_UI_REGISTRY` (shadcn/recharts) into the lab catalog, keyed under
+    // Merges the host registry (shadcn/recharts by default) into the lab catalog, keyed under
     // the SAME `catalogId` the lab catalog already uses — so a tool built against
     // `createLabCatalog({}).catalogId` (e.g. `demo-a2ui-tool.ts`) still validates unchanged, and now
     // ALSO gains every registry component as a real, addable/removable catalog entry.
     const catalog = useMemo(() => {
         const base = createLabCatalog({});
-        return buildA2uiCatalogFromRegistry({ registry: DEFAULT_INTERACTIVE_UI_REGISTRY, catalogId: base.catalogId }, { base });
-    }, []);
+        return buildA2uiCatalogFromRegistry({ registry, catalogId: base.catalogId }, { base });
+    }, [registry]);
     const interpreterRef = useRef(null);
     if (!interpreterRef.current) {
         const clock = createSystemClock();
@@ -283,7 +283,7 @@ export function A2uiSurfaceCard({ events, runId, onAgentAction }) {
     if (!root) {
         return refusalNotice ? (_jsx("div", { className: "a2ui-surface-card a2ui-surface-refused", role: "status", children: t('A2UI surface refused: {reason}', { reason: refusalNotice }) })) : (_jsx("div", { className: "a2ui-surface-card a2ui-surface-waiting", role: "status", children: t('Waiting for the agent to send a root component…') }));
     }
-    return (_jsxs("div", { className: "a2ui-surface-card", "data-a2ui-surface-id": surfaceId, children: [_jsx(RenderComponent, { interpreter: interpreter, surfaceId: surfaceId, componentId: "root", ancestors: new Set(), onAction: handleAction }), refusalNotice ? (_jsx("div", { className: "a2ui-surface-notice a2ui-surface-notice-refused", role: "status", children: t('Action refused: {reason}', { reason: refusalNotice }) })) : null, pendingAgentAction ? (_jsx("div", { className: "a2ui-surface-notice a2ui-surface-notice-unwired", role: "status", children: t('This action is meant for the agent, but this host has not wired up a live agent-action relay yet.') })) : null, deliveryFailureNotice ? (
+    return (_jsxs("div", { className: "a2ui-surface-card", "data-a2ui-surface-id": surfaceId, children: [_jsx(RenderComponent, { interpreter: interpreter, surfaceId: surfaceId, componentId: "root", ancestors: new Set(), onAction: handleAction, registry: registry }), refusalNotice ? (_jsx("div", { className: "a2ui-surface-notice a2ui-surface-notice-refused", role: "status", children: t('Action refused: {reason}', { reason: refusalNotice }) })) : null, pendingAgentAction ? (_jsx("div", { className: "a2ui-surface-notice a2ui-surface-notice-unwired", role: "status", children: t('This action is meant for the agent, but this host has not wired up a live agent-action relay yet.') })) : null, deliveryFailureNotice ? (
             // Deliberately its own notice, not folded into `refusalNotice` above: that one fires
             // *before* anything is sent (the interpreter said no); this one fires *after* — the message
             // left this component but the host reports it never arrived. Conflating them would tell the

package/dist/react/components/AttachmentPreviewModal.hooks.d.ts

@@ -58,6 +58,13 @@ export declare function readFileAsText({ file }: {
 }, { createReader }?: {
     createReader?: () => FileReader;
 }): Promise<string>;
+/**
+ * `false` in an environment with no Blob-URL support — real browsers have shipped this for well
+ * over a decade, but jsdom (this package's own test environment) never implemented it, and this
+ * package cannot assume every embedding host is a browser tab. Feature-detected the same way this
+ * file already feature-detects `<dialog>`'s `showModal`/`close`, rather than assumed.
+ */
+export declare function canCreateObjectUrl(): boolean;
 export interface AttachmentTextPreview {
     content: string;
     truncated: boolean;

package/dist/react/components/AttachmentPreviewModal.hooks.js

@@ -78,7 +78,7 @@ export function readFileAsText({ file }, { createReader = () => new FileReader()
  * package cannot assume every embedding host is a browser tab. Feature-detected the same way this
  * file already feature-detects `<dialog>`'s `showModal`/`close`, rather than assumed.
  */
-function canCreateObjectUrl() {
+export function canCreateObjectUrl() {
     return typeof URL !== 'undefined' && typeof URL.createObjectURL === 'function';
 }
 /**

package/dist/react/components/ChatFab.d.ts

@@ -3,6 +3,9 @@ export interface ChatFabProps {
     readonly onToggle: () => void;
     /** Rendered as the accessible name, and announced as a state change to assistive tech. */
     readonly label?: string;
+    readonly 'aria-label'?: string;
+    readonly 'aria-controls'?: string;
+    readonly 'aria-haspopup'?: 'dialog';
 }
-export declare function ChatFab({ open, onToggle, label }: ChatFabProps): import("react").JSX.Element;
+export declare function ChatFab({ open, onToggle, label, 'aria-label': accessibleLabel, 'aria-controls': controls, 'aria-haspopup': popup }: ChatFabProps): import("react").JSX.Element;
 //# sourceMappingURL=ChatFab.d.ts.map

package/dist/react/components/ChatFab.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * for the `chat-fab`/`chat-fab-open` classes.
  */
 import { useChatFabDrag } from '../hooks/useChatFabDrag.js';
-export function ChatFab({ open, onToggle, label = 'chat' }) {
+export function ChatFab({ open, onToggle, label = 'chat', 'aria-label': accessibleLabel, 'aria-controls': controls, 'aria-haspopup': popup }) {
     const { buttonRef, position, onPointerDown, onPointerMove, onPointerUp, onPointerCancel } = useChatFabDrag({ onClick: onToggle });
     return (_jsx("button", { ref: buttonRef, type: "button", className: `chat-fab${open ? ' chat-fab-open' : ''}`, 
         // Not `onClick`: the pointer gesture already decides click-versus-drag, and keeping both
@@ -19,6 +19,6 @@ export function ChatFab({ open, onToggle, label = 'chat' }) {
                 event.preventDefault();
                 onToggle();
             }
-        }, style: position === null ? undefined : { left: position.x, top: position.y, right: 'auto', bottom: 'auto' }, "aria-expanded": open, "aria-label": open ? `Hide ${label}` : `Show ${label}`, children: _jsx("span", { "aria-hidden": "true", children: open ? '×' : '💬' }) }));
+        }, style: position === null ? undefined : { left: position.x, top: position.y, right: 'auto', bottom: 'auto' }, "aria-expanded": open, "aria-label": accessibleLabel ?? (open ? `Hide ${label}` : `Show ${label}`), "aria-controls": controls, "aria-haspopup": popup, children: _jsx("span", { "aria-hidden": "true", children: open ? '×' : '💬' }) }));
 }
 //# sourceMappingURL=ChatFab.js.map

package/dist/react/components/Composer.d.ts

@@ -19,6 +19,8 @@ export interface ComposerProps {
      * separately placed cancel affordance elsewhere in the pane. Always clickable when true,
      * regardless of `disabled`/`sendDisabled`/`composer.canSubmit`: those all gate *submitting a new
      * draft*, which has nothing to do with whether a caller may cancel the run already in flight.
+     * Once the draft is submittable (and neither gate refuses it), Send comes back beside Stop, so a
+     * message can go out mid-run without stopping anything.
      */
     running?: boolean;
     /** Cancels the in-flight run. Required when `running` is true; ignored otherwise. */

package/dist/react/components/Composer.js

@@ -338,7 +338,10 @@ export function Composer({ composer, onSend, disabled = false, sendDisabled = fa
                     composer.setDraft(e.target.value);
                     setSlashActiveIndex(0);
                     setDismissedSlashDraft(null);
-                }, onKeyDown: handleKeyDown, onPaste: handleAttachmentPaste, "aria-controls": slashOpen ? 'jini-composer-slash-menu' : undefined, "aria-expanded": slashOpen, "aria-activedescendant": slashOpen
+                }, onKeyDown: handleKeyDown, 
+                // Draft persistence is debounced (see `DRAFT_PERSIST_DEBOUNCE_MS`); leaving the field is a
+                // natural point to make it durable now.
+                onBlur: () => composer.flushDraft?.(), onPaste: handleAttachmentPaste, "aria-controls": slashOpen ? 'jini-composer-slash-menu' : undefined, "aria-expanded": slashOpen, "aria-activedescendant": slashOpen
                     ? `jini-composer-slash-option-${Math.min(slashActiveIndex, slashMatches.length - 1)}`
                     : undefined, rows: 3 }), slashOpen ? (_jsx(ComposerSlashMenu, { matches: slashMatches, activeIndex: Math.min(slashActiveIndex, slashMatches.length - 1), onSelect: (item) => selectSlashItem(slashMatches.findIndex((match) => match.item === item)), showFilterHint: showSlashFilterHint, style: slashMenuPosition, t: t })) : null, _jsxs("div", { className: "jini-composer-footer", children: [attachmentPicker && !hasDiscoveryItems ? (_jsxs("div", { className: "jini-composer-attachment-picker", children: [_jsx("input", { ref: attachmentInputRef, className: "jini-composer-file-input", "data-testid": "composer-attachment-input", type: "file", multiple: true, "aria-label": t('Attach files'), accept: attachmentPicker.accept, disabled: disabled || attachmentPicker.uploading, onChange: handleAttachmentChange }), _jsx("button", { type: "button", className: "jini-composer-attach", disabled: disabled || attachmentPicker.uploading, onClick: () => attachmentInputRef.current?.click(), title: t(attachmentPicker.uploading ? 'Attaching files…' : 'Attach files'), "aria-label": t(attachmentPicker.uploading ? 'Attaching files…' : 'Attach files'), children: _jsx(RemixIcon, { name: attachmentPicker.uploading ? 'refresh-line' : 'add-line', size: 20, ...(attachmentPicker.uploading ? { className: 'jini-composer-spinner' } : {}) }) })] })) : null, hasDiscoveryItems ? (_jsx(ComposerDiscoveryMenu, { groups: discoveryGroups, open: discoveryMenuOpen, disabled: disabled, ...(attachmentPicker ? { attachmentPicker } : {}), attachmentInputRef: attachmentInputRef, onToggle: () => setDiscoveryMenuOpen((open) => !open), onClose: () => setDiscoveryMenuOpen(false), onSelect: selectPlusItem, onAttachmentChange: handleAttachmentChange, style: discoveryMenuPosition, t: t })) : null, slots?.footerLeadingAccessory ? (_jsx("div", { className: "jini-composer-footer-leading", children: slots.footerLeadingAccessory })) : null, onChangeWorkingDirectory || onPickWorkingDirectory ? (_jsxs("div", { className: "jini-composer-workdir", "data-testid": "composer-workdir", children: [_jsx("button", { type: "button", className: "jini-composer-attach", "data-testid": "composer-workdir-trigger", disabled: disabled, onClick: onPickWorkingDirectory ? () => onPickWorkingDirectory() : toggleWorkdir, ...(onPickWorkingDirectory ? {} : { 'aria-haspopup': 'dialog', 'aria-expanded': workdirOpen }), title: workingDirectory ?? t('Set working directory'), "aria-label": workingDirectory
                                     ? t('Working directory: {dir}', { dir: workingDirectory })
@@ -351,6 +354,6 @@ export function Composer({ composer, onSend, disabled = false, sendDisabled = fa
                                                 e.preventDefault();
                                                 setWorkdirOpen(false);
                                             }
-                                        }, placeholder: t('Working directory path'), "aria-label": t('Working directory path'), autoFocus: true }), _jsx("button", { type: "button", className: "jini-composer-workdir-confirm", "data-testid": "composer-workdir-confirm", onClick: confirmWorkdir, children: t('Set') })] })) : null] })) : null, slots?.footerAccessories ? (_jsx("div", { className: "jini-composer-footer-accessories", children: slots.footerAccessories })) : null, slots?.plusMenuItems && slots.plusMenuItems.length > 0 ? (_jsx("div", { className: "jini-composer-plus-menu", children: slots.plusMenuItems.map((item) => (_jsxs("button", { type: "button", className: "jini-composer-plus-item", onClick: () => runComposerHostEffect('plusMenuItems.onSelect', () => item.onSelect()), title: t(item.label), children: [item.icon ?? null, _jsx("span", { children: t(item.label) })] }, item.id))) })) : null, running ? (_jsx("button", { type: "button", className: "jini-composer-send jini-composer-send--stop", onClick: onCancel, title: t('Stop run'), "aria-label": t('Stop run'), children: _jsx(RemixIcon, { name: "stop-fill", size: 14 }) })) : (_jsx("button", { type: "button", className: "jini-composer-send", disabled: disabled || sendDisabled || !composer.canSubmit, onClick: onSend, title: t('Send'), "aria-label": t('Send'), children: _jsx(RemixIcon, { name: "send-plane-2-line", size: 16 }) }))] })] }));
+                                        }, placeholder: t('Working directory path'), "aria-label": t('Working directory path'), autoFocus: true }), _jsx("button", { type: "button", className: "jini-composer-workdir-confirm", "data-testid": "composer-workdir-confirm", onClick: confirmWorkdir, children: t('Set') })] })) : null] })) : null, slots?.footerAccessories ? (_jsx("div", { className: "jini-composer-footer-accessories", children: slots.footerAccessories })) : null, slots?.plusMenuItems && slots.plusMenuItems.length > 0 ? (_jsx("div", { className: "jini-composer-plus-menu", children: slots.plusMenuItems.map((item) => (_jsxs("button", { type: "button", className: "jini-composer-plus-item", onClick: () => runComposerHostEffect('plusMenuItems.onSelect', () => item.onSelect()), title: t(item.label), children: [item.icon ?? null, _jsx("span", { children: t(item.label) })] }, item.id))) })) : null, _jsxs("span", { className: "jini-composer-send-group", children: [!running || (!disabled && !sendDisabled && composer.canSubmit) ? (_jsx("button", { type: "button", className: "jini-composer-send", disabled: disabled || sendDisabled || !composer.canSubmit, onClick: onSend, title: t('Send'), "aria-label": t('Send'), children: _jsx(RemixIcon, { name: "send-plane-2-line", size: 16 }) })) : null, running ? (_jsx("button", { type: "button", className: "jini-composer-send jini-composer-send--stop", onClick: onCancel, title: t('Stop run'), "aria-label": t('Stop run'), children: _jsx(RemixIcon, { name: "stop-fill", size: 14 }) })) : null] })] })] }));
 }
 //# sourceMappingURL=Composer.js.map

package/dist/react/components/ConversationList.d.ts

@@ -26,6 +26,13 @@ export interface ConversationListProps {
     /** Disables the "New" action — e.g. while the current conversation is still empty. */
     createDisabled?: boolean;
     emptyState?: React.ReactNode;
+    /** Replaces the trigger's accessible name (default "Conversations — {active title}"). */
+    triggerLabel?: string;
+    /**
+     * `false` drops the trigger's native `title` tooltip, for a host that draws its own tooltip over
+     * the icon (the browser's dark tip would otherwise show on top of it). Defaults to true.
+     */
+    nativeTitle?: boolean;
 }
-export declare function ConversationList({ conversations, activeConversationId, onSelect, onCreate, onDelete, onRename, onSearch, confirmDelete, createDisabled, emptyState, }: ConversationListProps): import("react").JSX.Element;
+export declare function ConversationList({ conversations: savedConversations, activeConversationId, onSelect, onCreate, onDelete, onRename, onSearch, confirmDelete, createDisabled, emptyState, triggerLabel, nativeTitle, }: ConversationListProps): import("react").JSX.Element;
 //# sourceMappingURL=ConversationList.d.ts.map

package/dist/react/components/ConversationList.hooks.d.ts

@@ -0,0 +1,18 @@
+import type { ConversationListItem } from './ConversationList.js';
+/** Project saved/search titles for presentation without renaming durable conversations.
+ * The switcher has no prompt or title provenance, so keep wording and casing while stripping
+ * markup through the same owner as the panel title. Caller arrays and objects stay untouched.
+ * @param input.conversations - The loaded conversations.
+ * @param input.serverResults - Optional server search results, or null before a response.
+ * @returns Plain-text display lists and raw titles for lossless editing. Hosts ellipsize rows in CSS.
+ * @complexity O(n + sum(t²)) worst-case cleanup time; O(n + sum(t)) space for n items of length t.
+ */
+export declare function useConversationListTitles({ conversations, serverResults }: {
+    conversations: ConversationListItem[];
+    serverResults: ConversationListItem[] | null;
+}, _options?: {}): {
+    conversations: ConversationListItem[];
+    serverResults: ConversationListItem[] | null;
+    rawTitles: ReadonlyMap<string, string | null>;
+};
+//# sourceMappingURL=ConversationList.hooks.d.ts.map

package/dist/react/components/ConversationList.hooks.js

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { stripConversationTitleMarkdown } from '../../core/persistence/title.js';
+/** Project saved/search titles for presentation without renaming durable conversations.
+ * The switcher has no prompt or title provenance, so keep wording and casing while stripping
+ * markup through the same owner as the panel title. Caller arrays and objects stay untouched.
+ * @param input.conversations - The loaded conversations.
+ * @param input.serverResults - Optional server search results, or null before a response.
+ * @returns Plain-text display lists and raw titles for lossless editing. Hosts ellipsize rows in CSS.
+ * @complexity O(n + sum(t²)) worst-case cleanup time; O(n + sum(t)) space for n items of length t.
+ */
+export function useConversationListTitles({ conversations, serverResults }, _options = {}) {
+    return useMemo(() => {
+        const rawTitles = new Map();
+        const display = (items) => items.map(item => ({
+            ...item, title: item.title === null ? null : stripConversationTitleMarkdown({ text: item.title }) || null,
+        }));
+        // Search results can contain unloaded rows or newer titles for loaded ids; visible results win.
+        for (const item of conversations)
+            rawTitles.set(item.id, item.title);
+        for (const item of serverResults ?? [])
+            rawTitles.set(item.id, item.title);
+        return { conversations: display(conversations), serverResults: serverResults === null ? null : display(serverResults), rawTitles };
+    }, [conversations, serverResults]);
+}
+//# sourceMappingURL=ConversationList.hooks.js.map

package/dist/react/components/ConversationList.js

@@ -24,6 +24,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
 import { useT } from '../hooks/context.js';
 import { Icon } from './Icon.js';
+import { useConversationListTitles } from './ConversationList.hooks.js';
+import { conversationTriggerAttributes } from './ConversationList.rules.js';
 /**
  * How long a click waits to see whether it is really the first half of a double-click.
  *
@@ -63,13 +65,15 @@ function relativeTime(updatedAt, now) {
         return `${hours}h ago`;
     return `${Math.round(hours / 24)}d ago`;
 }
-export function ConversationList({ conversations, activeConversationId, onSelect, onCreate, onDelete, onRename, onSearch, confirmDelete, createDisabled = false, emptyState, }) {
+export function ConversationList({ conversations: savedConversations, activeConversationId, onSelect, onCreate, onDelete, onRename, onSearch, confirmDelete, createDisabled = false, emptyState, triggerLabel, nativeTitle = true, }) {
     const t = useT();
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState('');
-    const [serverResults, setServerResults] = useState(null);
+    const [savedServerResults, setServerResults] = useState(null);
+    const { conversations, serverResults, rawTitles } = useConversationListTitles({ conversations: savedConversations, serverResults: savedServerResults });
     const [editingId, setEditingId] = useState(null);
     const [draft, setDraft] = useState('');
+    const originalDraftRef = useRef('');
     const rootRef = useRef(null);
     const deferredQuery = useDeferredValue(query);
     /**
@@ -169,7 +173,8 @@ export function ConversationList({ conversations, activeConversationId, onSelect
         // No optimistic title update happens here — the row keeps rendering `item.title` from
         // props until the host's own state updates, so a rejection cannot leave the UI showing a
         // title the server didn't accept. Reporting the failure is what closes the remaining gap.
-        if (next)
+        // Merely opening and leaving the editor must not normalize a deliberately saved title.
+        if (next && draft !== originalDraftRef.current)
             runConversationListHostEffect('onRename', () => onRename(id, next));
     }, [draft, onRename]);
     const requestDelete = useCallback((item) => {
@@ -188,7 +193,7 @@ export function ConversationList({ conversations, activeConversationId, onSelect
         });
     }, [confirmDelete, onDelete, t]);
     const active = conversations.find((c) => c.id === activeConversationId) ?? null;
-    return (_jsxs("div", { className: "jini-conv", ref: rootRef, children: [_jsx("button", { type: "button", className: `jini-conv-trigger${open ? ' jini-conv-trigger-open' : ''}`, "aria-haspopup": "menu", "aria-expanded": open, "aria-label": active?.title ? `${t('Conversations')} — ${active.title}` : t('Conversations'), title: active?.title ?? t('Conversations'), "data-testid": "conversation-trigger", onClick: () => setOpen((v) => !v), children: _jsx(Icon, { name: "comment", size: 16 }) }), open ? (_jsxs("div", { className: "jini-conv-menu", role: "menu", "data-testid": "conversation-menu", children: [_jsxs("div", { className: "jini-conv-head", children: [_jsxs("span", { className: "jini-conv-heading", children: [t('Conversations'), _jsx("span", { className: "jini-conv-count", "data-testid": "conversation-count", children: conversations.length })] }), _jsxs("button", { type: "button", className: "jini-conv-new", disabled: createDisabled, "data-testid": "conversation-new", onClick: () => {
+    return (_jsxs("div", { className: "jini-conv", ref: rootRef, children: [_jsx("button", { type: "button", className: `jini-conv-trigger${open ? ' jini-conv-trigger-open' : ''}`, "aria-haspopup": "menu", "aria-expanded": open, ...conversationTriggerAttributes({ activeTitle: active?.title, t }, { label: triggerLabel, nativeTitle }), "data-testid": "conversation-trigger", onClick: () => setOpen((v) => !v), children: _jsx(Icon, { name: "comment", size: 16 }) }), open ? (_jsxs("div", { className: "jini-conv-menu", role: "menu", "data-testid": "conversation-menu", children: [_jsxs("div", { className: "jini-conv-head", children: [_jsxs("span", { className: "jini-conv-heading", children: [t('Conversations'), _jsx("span", { className: "jini-conv-count", "data-testid": "conversation-count", children: conversations.length })] }), _jsxs("button", { type: "button", className: "jini-conv-new", disabled: createDisabled, "data-testid": "conversation-new", onClick: () => {
                                     if (createDisabled)
                                         return;
                                     // No optimistic row is inserted — the list still comes straight from props — so a
@@ -211,8 +216,10 @@ export function ConversationList({ conversations, activeConversationId, onSelect
                                         }, DOUBLE_CLICK_GRACE_MS);
                                     }, onDoubleClick: () => {
                                         cancelPendingSelect();
+                                        // Snapshot the raw seed: a host refresh during editing is not a user edit.
+                                        originalDraftRef.current = rawTitles.get(item.id) ?? '';
                                         setEditingId(item.id);
-                                        setDraft(item.title ?? '');
+                                        setDraft(originalDraftRef.current);
                                     }, children: [_jsx("span", { className: "jini-conv-item-title", children: item.title ?? t('Untitled') }), _jsxs("span", { className: "jini-conv-item-meta", children: [item.messageCount === undefined ? '' : `${item.messageCount} msg · `, relativeTime(item.updatedAt, now)] })] })), _jsx("button", { type: "button", className: "jini-conv-item-delete", "aria-label": t('Delete conversation'), "data-testid": `conversation-delete-${item.id}`, onClick: (event) => {
                                         event.stopPropagation();
                                         requestDelete(item);

package/dist/react/components/ConversationList.rules.d.ts

@@ -0,0 +1,25 @@
+/** Accessible name and optional native tooltip for the conversation switcher's icon-only trigger. */
+export interface ConversationTriggerAttributes {
+    'aria-label': string;
+    title?: string;
+}
+/**
+ * Resolves the switcher trigger's `aria-label` and native `title`. By default both name the active
+ * conversation. A host that draws its own tooltip over the icon passes `nativeTitle: false`, so the
+ * browser's dark native tip does not show on top of it, and `label` to rename the control (for
+ * example "Chats") instead of stripping the attribute at runtime.
+ * @param input.activeTitle - The active conversation's display title, or null/undefined when none.
+ * @param input.t - The package translator.
+ * @param options.label - Replaces the default accessible name (and the native title, when kept).
+ * @param options.nativeTitle - `false` omits the native `title` attribute. Defaults to true.
+ * @returns Props to spread onto the trigger button.
+ * @complexity O(1).
+ */
+export declare function conversationTriggerAttributes({ activeTitle, t }: {
+    activeTitle: string | null | undefined;
+    t: (key: string) => string;
+}, { label, nativeTitle }?: {
+    label?: string | undefined;
+    nativeTitle?: boolean | undefined;
+}): ConversationTriggerAttributes;
+//# sourceMappingURL=ConversationList.rules.d.ts.map

package/dist/react/components/ConversationList.rules.js

@@ -0,0 +1,19 @@
+/**
+ * Resolves the switcher trigger's `aria-label` and native `title`. By default both name the active
+ * conversation. A host that draws its own tooltip over the icon passes `nativeTitle: false`, so the
+ * browser's dark native tip does not show on top of it, and `label` to rename the control (for
+ * example "Chats") instead of stripping the attribute at runtime.
+ * @param input.activeTitle - The active conversation's display title, or null/undefined when none.
+ * @param input.t - The package translator.
+ * @param options.label - Replaces the default accessible name (and the native title, when kept).
+ * @param options.nativeTitle - `false` omits the native `title` attribute. Defaults to true.
+ * @returns Props to spread onto the trigger button.
+ * @complexity O(1).
+ */
+export function conversationTriggerAttributes({ activeTitle, t }, { label, nativeTitle = true } = {}) {
+    const ariaLabel = label ?? (activeTitle ? `${t('Conversations')} — ${activeTitle}` : t('Conversations'));
+    if (!nativeTitle)
+        return { 'aria-label': ariaLabel };
+    return { 'aria-label': ariaLabel, title: label ?? activeTitle ?? t('Conversations') };
+}
+//# sourceMappingURL=ConversationList.rules.js.map

package/dist/react/components/Markdown.js

@@ -389,16 +389,16 @@ const INLINE_RE = new RegExp(String.raw `(\x60[^\x60]+\x60)|(${MD_LINK})|(\*\*[^
 // Only these targets become anchors; anything else (`javascript:`, `data:`, protocol-relative
 // `//host`) stays literal text, since the text is untrusted model output.
 const SAFE_LINK_HREF = /^(?:https?:\/\/|mailto:|\/(?!\/)|#)/iu;
-// Off-site links open in a new tab; a same-origin path stays in the tab so the host's in-app link
-// interceptor (an SPA router) can take it without a reload.
-const OFFSITE_LINK_HREF = /^(?:https?:|mailto:)/iu;
+// Every link opens in a new tab — an in-app path too, so following one never navigates the tab the
+// chat lives in (owner 2026-10-08). Only a `#` same-document anchor stays in place. ChatPane's
+// click guard (`useChatPaneNewTabLinks`) covers links this renderer does not draw.
+const NEW_TAB = { target: '_blank', rel: 'noopener noreferrer' };
 function renderMarkdownLink(source, key) {
     // `MD_LINK` already matched `source`, so these two groups always capture.
     const [, label, href] = MD_LINK_PARTS.exec(source);
     if (!SAFE_LINK_HREF.test(href))
         return source;
-    const offsite = OFFSITE_LINK_HREF.test(href);
-    return (_jsx("a", { href: href, ...(offsite ? { target: '_blank', rel: 'noreferrer' } : {}), children: renderInline(label) }, key));
+    return (_jsx("a", { href: href, ...(href.startsWith('#') ? {} : NEW_TAB), children: renderInline(label) }, key));
 }
 function renderInline(text) {
     const nodes = [];
@@ -421,7 +421,7 @@ function renderInline(text) {
         else if (italic)
             nodes.push(_jsx("em", { children: italic.slice(1, -1) }, key++));
         else if (link)
-            nodes.push(_jsx("a", { href: link, target: "_blank", rel: "noreferrer", children: link }, key++));
+            nodes.push(_jsx("a", { href: link, ...NEW_TAB, children: link }, key++));
         // `whole` is `match[0]` — a successful `RegExpExecArray` always has a
         // defined (if possibly empty) full-match string at index 0, so this
         // fallback is unreachable (same dead-fallback reasoning as above).

package/dist/react/components/McpUiSurfaceCard.d.ts

@@ -30,7 +30,7 @@ export interface McpUiSurfaceCardProps extends ExtEventRenderProps {
     expiryClock?: SurfaceExpiryClock;
 }
 /** Registered against `ext-event-renderer-registry.ts`'s `'mcp-ui'` name — see module doc. */
-export declare function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLink, maxHeight, call, runStreaming, expiryClock }: McpUiSurfaceCardProps): import("react").JSX.Element;
+export declare function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLink, maxHeight, call, runStreaming, expiryClock, answered, onAnswered }: McpUiSurfaceCardProps): import("react").JSX.Element;
 /**
  * The ext-event slot key for MCP-UI: one slot per `ui://` URI. Each resource is its own card, so a
  * run's second card renders where it arrived instead of inside the first card's slot, while a

package/dist/react/components/McpUiSurfaceCard.js

@@ -66,7 +66,7 @@ import { McpUiHost, parseUIResource, readActionPlan, readExpiresAt, readPreferre
 import { registerExtEventRenderer } from '../ext-event-renderer-registry.js';
 import { useT } from '../hooks/context.js';
 import { useSurfaceExpiry } from '../hooks/useSurfaceExpiry.js';
-import { closedSurfaceLabel } from './mcp-ui-surface-state.js';
+import { closedSurfaceLabel, reportDeliveredAnswer } from './mcp-ui-surface-state.js';
 /** The `kind: 'ext'` event name this renderer claims. */
 export const MCP_UI_EXT_EVENT_NAME = 'mcp-ui';
 /** Collapses the event stream to the newest resource per `ui://` URI, in first-appearance order. */
@@ -120,18 +120,22 @@ function ClosedSurface({ call, label }) {
     return (_jsx("div", { className: "mcpui-surface-card mcpui-surface-card-closed", role: "status", children: typeof title === 'string' && title.trim() !== '' ? `${title}: ${label}` : label }));
 }
 /** Registered against `ext-event-renderer-registry.ts`'s `'mcp-ui'` name — see module doc. */
-export function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLink, maxHeight, call, runStreaming, expiryClock }) {
+export function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLink, maxHeight, call, runStreaming, expiryClock, answered, onAnswered }) {
     const t = useT();
     const resources = useMemo(() => latestResourcesByUri(events), [events]);
     // One card per slot is the registered shape (`mcpUiSurfaceSlotKey`), so `call` belongs to exactly
     // that card. A group holding several URIs has no single call to judge them by, and stays live.
     const single = resources.length === 1 ? resources[0] : undefined;
-    const expiry = useSurfaceExpiry({ expiresAtMs: single === undefined ? undefined : readExpiresAt(single) }, expiryClock === undefined ? {} : { clock: expiryClock });
+    // An answered card has no deadline left: its countdown goes, and the deadline passing while the
+    // answer's work still runs must not relabel it "This question expired".
+    const expiry = useSurfaceExpiry({ expiresAtMs: single === undefined || answered === true ? undefined : readExpiresAt(single) }, expiryClock === undefined ? {} : { clock: expiryClock });
     const closed = single === undefined
         ? undefined
         : closedSurfaceLabel({ t, call, runStreaming, documentsForUri: events.length, expired: expiry?.expired === true });
     if (closed !== undefined)
         return _jsx(ClosedSurface, { call: call, label: closed });
+    // Reports the person's delivered answer to the row, which stops the "Waiting for your answer" line.
+    const toolCall = onToolCall === undefined || onAnswered === undefined ? onToolCall : reportDeliveredAnswer({ onToolCall, onAnswered });
     if (resources.length === 0) {
         // Visible rather than silent: an `ext` event named `mcp-ui` that carries no parseable resource
         // is a producer bug, and a transcript that renders nothing for it hides the bug behind what
@@ -150,7 +154,7 @@ export function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLi
                             // the previous iframe session, so the handshake never re-ran and the frame kept serving
                             // the OLD document's state. The URI stays in the key because it is real identity; the
                             // length was never a substitute for content.
-                            sessionKey: `${resource.resource.uri}:${resource.resource.text}`, ...(onToolCall === undefined ? {} : { onToolCall }), ...(onOpenLink === undefined ? {} : { onOpenLink }), ...(height === undefined || Number.isNaN(height) ? {} : { initialHeight: height }), ...(maxHeight === undefined ? {} : { maxHeight }) }), plan !== undefined && _jsx(PendingSurfaceMirror, { uri: resource.resource.uri, plan: plan, t: t })] }, resource.resource.uri));
+                            sessionKey: `${resource.resource.uri}:${resource.resource.text}`, ...(toolCall === undefined ? {} : { onToolCall: toolCall }), ...(onOpenLink === undefined ? {} : { onOpenLink }), ...(height === undefined || Number.isNaN(height) ? {} : { initialHeight: height }), ...(maxHeight === undefined ? {} : { maxHeight }) }), plan !== undefined && _jsx(PendingSurfaceMirror, { uri: resource.resource.uri, plan: plan, t: t })] }, resource.resource.uri));
             }), expiry?.expired === false && (_jsx("p", { className: "mcpui-surface-expiry", role: "timer", children: t('Expires in {time}', { time: expiry.remaining }) }))] }));
 }
 /**

package/dist/react/components/MessageList.d.ts

@@ -1,17 +1,6 @@
-/**
- * @module MessageList
- *
- * Renders a conversation's messages via `<MessageRow>`, and — matching
- * `useConversation`'s `scrollIntent` flag (see
- * `ADS-memory/reports/jini-port/recon/r4b-webui-design.md` §4: "message array, optimistic
- * user message, scroll-intent flag") — auto-scrolls to the newest content
- * whenever `scrollIntent` is true, calling `onScrolled` once it has. The
- * scroll-anchoring state lives in `useMessageListAutoScroll`
- * (`MessageList.hooks.ts`); see that file for why it is presentational.
- */
 import type { ChatMessage } from '../../core/index.js';
 import { type MessageRowProps } from './MessageRow.js';
-export interface MessageListProps extends Pick<MessageRowProps, 'projectFileNames' | 'onRequestOpenFile' | 'renderAttachment'> {
+export interface MessageListProps extends Pick<MessageRowProps, 'projectFileNames' | 'onRequestOpenFile' | 'renderAttachment' | 'showUsageTotal' | 'showUsageLine' | 'toolCallDisplay' | 'showThinking'> {
     messages: ChatMessage[];
     isStreaming?: boolean;
     /** Mirrors `useConversation().scrollIntent` — when `true`, this component scrolls to the bottom on mount/update. */
@@ -35,5 +24,11 @@ export interface MessageListProps extends Pick<MessageRowProps, 'projectFileName
         onCancel: () => void;
     } | null;
 }
-export declare function MessageList({ messages, isStreaming, scrollIntent, onScrolled, activeQuestionFormMessageId, questionFormSubmittedAnswersByMessageId, onQuestionFormSubmit, projectFileNames, onRequestOpenFile, renderAttachment, pendingPrompt, }: MessageListProps): import("react").JSX.Element;
+/**
+ * Memoized: the pane re-renders on every composer keystroke, and re-rendering a long transcript
+ * (hundreds of tool rows, MCP-UI cards, markdown) per key made typing lag (owner report
+ * 2026-10-08). Callers must pass stable props — `ChatPane` memoizes `pendingPrompt` and
+ * `projectFileNames` for exactly this.
+ */
+export declare const MessageList: import("react").NamedExoticComponent<MessageListProps>;
 //# sourceMappingURL=MessageList.d.ts.map

package/dist/react/components/MessageList.hooks.d.ts

@@ -10,6 +10,10 @@ export interface MessageListAutoScroll {
     containerRef: RefObject<HTMLDivElement | null>;
     onScroll: (event: UIEvent<HTMLElement>) => void;
 }
+/** Recompute costs once per immutable transcript snapshot, including saved history on reload. */
+export declare function useConversationUsage({ messages }: {
+    messages: readonly ChatMessage[];
+}, _optional?: {}): Map<string, import("../../core/turn-usage.js").ChatUsageSummary>;
 export declare function useMessageListAutoScroll({ messages, scrollIntent }: {
     messages: ChatMessage[];
     scrollIntent: boolean;

package/dist/react/components/MessageList.hooks.js

@@ -4,8 +4,13 @@
  * lives here (presentational), not in the headless `useConversation` hook, per that hook's own
  * "transport-agnostic hooks never touch DOM" contract.
  */
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import { conversationUsage } from '../../core/turn-usage.js';
 import { nextStickToBottom, startsNewTurn } from './MessageList.rules.js';
+/** Recompute costs once per immutable transcript snapshot, including saved history on reload. */
+export function useConversationUsage({ messages }, _optional = {}) {
+    return useMemo(() => conversationUsage({ messages }), [messages]);
+}
 export function useMessageListAutoScroll({ messages, scrollIntent }, { onScrolled } = {}) {
     const containerRef = useRef(null);
     // Whether the transcript was scrolled to its bottom as of the last user scroll or programmatic

package/dist/react/components/MessageList.js

@@ -1,15 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @module MessageList
+ *
+ * Renders a conversation's messages via `<MessageRow>`, and — matching
+ * `useConversation`'s `scrollIntent` flag (see
+ * `ADS-memory/reports/jini-port/recon/r4b-webui-design.md` §4: "message array, optimistic
+ * user message, scroll-intent flag") — auto-scrolls to the newest content
+ * whenever `scrollIntent` is true, calling `onScrolled` once it has. The
+ * scroll-anchoring state lives in `useMessageListAutoScroll`
+ * (`MessageList.hooks.ts`); see that file for why it is presentational.
+ */
+import { memo } from 'react';
 import { isTerminalRunStatus } from '../../core/index.js';
 import { useT } from '../hooks/context.js';
-import { useMessageListAutoScroll } from './MessageList.hooks.js';
+import { useMessageListAutoScroll, useConversationUsage } from './MessageList.hooks.js';
 import { MessageRow } from './MessageRow.js';
-export function MessageList({ messages, isStreaming = false, scrollIntent = false, onScrolled, activeQuestionFormMessageId = null, questionFormSubmittedAnswersByMessageId, onQuestionFormSubmit, projectFileNames, onRequestOpenFile, renderAttachment, pendingPrompt = null, }) {
+/**
+ * Memoized: the pane re-renders on every composer keystroke, and re-rendering a long transcript
+ * (hundreds of tool rows, MCP-UI cards, markdown) per key made typing lag (owner report
+ * 2026-10-08). Callers must pass stable props — `ChatPane` memoizes `pendingPrompt` and
+ * `projectFileNames` for exactly this.
+ */
+export const MessageList = memo(function MessageList({ messages, isStreaming = false, scrollIntent = false, onScrolled, activeQuestionFormMessageId = null, questionFormSubmittedAnswersByMessageId, onQuestionFormSubmit, projectFileNames, onRequestOpenFile, renderAttachment, showUsageTotal = true, showUsageLine = true, toolCallDisplay = 'show', showThinking = false, pendingPrompt = null, }) {
     const t = useT();
+    const usageByMessage = useConversationUsage({ messages });
     const { containerRef, onScroll } = useMessageListAutoScroll({ messages, scrollIntent }, onScrolled !== undefined ? { onScrolled } : {});
     return (_jsxs("div", { className: "jini-message-list", ref: containerRef, onScroll: onScroll, "data-agent-element": "chat-transcript", "data-agent-role": "list", "data-agent-label": "The conversation transcript, oldest message first", children: [messages.map((message) => {
                 const isLast = message.id === messages[messages.length - 1]?.id;
                 const runStreaming = isLast && isStreaming && !isTerminalRunStatus({ status: message.runStatus });
-                return (_jsx(MessageRow, { message: message, runStreaming: runStreaming, runSucceeded: message.runStatus === 'succeeded', questionFormInteractive: message.id === activeQuestionFormMessageId, ...(questionFormSubmittedAnswersByMessageId?.[message.id] !== undefined ? { questionFormSubmittedAnswers: questionFormSubmittedAnswersByMessageId[message.id] } : {}), ...(onQuestionFormSubmit !== undefined ? { onQuestionFormSubmit: (text, answers) => onQuestionFormSubmit(message.id, text, answers) } : {}), ...(projectFileNames !== undefined ? { projectFileNames } : {}), ...(onRequestOpenFile !== undefined ? { onRequestOpenFile } : {}), ...(renderAttachment !== undefined ? { renderAttachment } : {}) }, message.id));
+                return (_jsx(MessageRow, { message: message, ...(usageByMessage.has(message.id) ? { usageSummary: usageByMessage.get(message.id) } : {}), showUsageTotal: showUsageTotal, showUsageLine: showUsageLine, toolCallDisplay: toolCallDisplay, showThinking: showThinking, runStreaming: runStreaming, runSucceeded: message.runStatus === 'succeeded', questionFormInteractive: message.id === activeQuestionFormMessageId, ...(questionFormSubmittedAnswersByMessageId?.[message.id] !== undefined ? { questionFormSubmittedAnswers: questionFormSubmittedAnswersByMessageId[message.id] } : {}), ...(onQuestionFormSubmit !== undefined ? { onQuestionFormSubmit: (text, answers) => onQuestionFormSubmit(message.id, text, answers) } : {}), ...(projectFileNames !== undefined ? { projectFileNames } : {}), ...(onRequestOpenFile !== undefined ? { onRequestOpenFile } : {}), ...(renderAttachment !== undefined ? { renderAttachment } : {}) }, message.id));
             }), pendingPrompt ? (_jsxs("div", { className: "jini-chat-pane__queued", role: "status", "aria-label": t('Message queued — not yet sent, will send once the current run finishes'), "data-testid": "chat-pane-queued", "data-agent-element": "chat-message-pending", "data-agent-role": "region", "data-agent-label": "A message queued to send once the current run finishes", children: [_jsx("div", { className: "jini-chat-pane__queued-text", children: pendingPrompt.text }), _jsx("div", { className: "jini-chat-pane__queued-actions", children: _jsx("button", { type: "button", className: "jini-chat-pane__queued-cancel", onClick: pendingPrompt.onCancel, title: t('Cancel queued message'), children: t('Cancel') }) })] })) : null] }));
-}
+});
 //# sourceMappingURL=MessageList.js.map

package/dist/react/components/MessageRow.d.ts

@@ -1,3 +1,4 @@
+import type { ChatUsageSummary } from '../../core/turn-usage.js';
 /**
  * @module MessageRow
  *
@@ -50,8 +51,24 @@
  */
 import React, { type ReactNode } from 'react';
 import type { ChatAttachment, ChatMessage } from '../../core/index.js';
+import { type ToolCallDisplay } from '../tool-call-display.js';
 export interface MessageRowProps {
     message: ChatMessage;
+    /** Per-turn charge and prefix total derived from the complete conversation's persisted events. */
+    usageSummary?: ChatUsageSummary;
+    /** Append the chat's running total as of each reply ("· total $3.95") to its Done line. On by default
+     * (owner, 2026-10-10: keep the total); pass `false` to show only each turn's own cost. */
+    showUsageTotal?: boolean;
+    /** Show the "Done · time · cost" line(s) at all. On by default; `false` hides every one, total
+     * included (a host's "Done line" display choice, 2026-10-11). */
+    showUsageLine?: boolean;
+    /** How tool calls show (`../tool-call-display.ts`): every card (`'show'`, the default), one
+     * fold-up line per turn (`'collapsed'`), or only failed ones (`'hidden'`). */
+    toolCallDisplay?: ToolCallDisplay;
+    /** Show the model's reasoning (`thinking` events) as a fold-up block where it happened. Off by
+     * default — the transcript never showed it before this option. Needs the interleaved layout; a
+     * message that falls back to the flat layout shows none. */
+    showThinking?: boolean;
     /** Whether this message's own run is still streaming. */
     runStreaming?: boolean;
     runSucceeded?: boolean;
@@ -64,5 +81,10 @@ export interface MessageRowProps {
     /** Host-supplied renderer for a `ChatAttachment` chip. Falls back to a plain filename chip. */
     renderAttachment?: (attachment: ChatAttachment) => ReactNode;
 }
-export declare function MessageRow({ message, runStreaming, runSucceeded, questionFormInteractive, questionFormSubmittedAnswers, onQuestionFormSubmit, projectFileNames, onRequestOpenFile, renderAttachment, }: MessageRowProps): React.JSX.Element;
+/**
+ * Memoized so a transcript re-render (a streaming update to the newest message, or a parent that
+ * re-renders per composer keystroke) only re-renders rows whose props actually changed. Messages
+ * are replaced, never mutated, so identity is a sound change signal.
+ */
+export declare const MessageRow: React.NamedExoticComponent<MessageRowProps>;
 //# sourceMappingURL=MessageRow.d.ts.map