@jini-ai/chat 0.5.7 → 0.5.8

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/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/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,6 +1,6 @@
 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. */

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

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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';
 /**
  * Memoized: the pane re-renders on every composer keystroke, and re-rendering a long transcript
@@ -21,13 +21,14 @@ import { MessageRow } from './MessageRow.js';
  * 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, pendingPrompt = null, }) {
+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;

package/dist/react/components/MessageRow.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { terminalMessageNotice, continuingRunNotice } from '../../core/durable-projection.js';
-import { turnUsage } from '../../core/turn-usage.js';
+import { usageLayout, usageLineMeetsActions, useMessageUsage, useUsageSummary } from './MessageRow.usage.js';
 /**
  * @module MessageRow
  *
@@ -57,21 +57,19 @@ 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 { useAnsweredCards } from '../hooks/useAnsweredCards.js';
 import { interleaveMessageBlocks } from '../message-blocks.js';
 import { useT } from '../hooks/context.js';
 import { extEventSlot, getExtEventRenderer } from '../ext-event-renderer-registry.js';
 import { ExtEventErrorBoundary } from './ExtEventErrorBoundary.js';
 import { AttachmentPreviewModal } from './AttachmentPreviewModal.js';
+import { SentAttachmentButton } from './SentAttachment.js';
 import { Icon } from './Icon.js';
 import { Markdown } from './Markdown.js';
 import { ToolCard } from './ToolCard.js';
 import { QuestionForm } from './QuestionForm.js';
-function formatDuration(ms) {
-    const totalSeconds = Math.round(ms / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    return minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
-}
+import { ToolCallGroup } from './ToolCallGroup.js';
+import { applyToolCallDisplay, toolRowsForDisplay } from '../tool-call-display.js';
 /**
  * True while an assistant message is still fully pending — no visible text
  * and no tool rows have arrived yet. Shared by the "Thinking…" placeholder
@@ -108,21 +106,17 @@ function isPendingWithNoContent(message, visibleContent, toolRowCount) {
 function isRunInProgress(runStatus) {
     return runStatus !== undefined && !isTerminalRunStatus({ status: runStatus });
 }
-/** One "Done · 6m 29s · 2612 out · $0.4028" summary line, from the run's own `kind:'usage'` event — never estimated client-side. Renders only the fields the event actually carries, so a transport that supplies partial usage data degrades gracefully instead of showing fabricated zeros. */
-function UsageSummary({ usage }) {
+/** One "Done · 6m 29s · $0.41 · total $2.50" line from reported usage, never estimated (the total is
+ * left off when `showTotal` is false). Partial usage stays partial; output tokens are available to
+ * assistive technology and in the tooltip. */
+function UsageSummary({ usage, showTotal }) {
     const t = useT();
-    const parts = [];
-    if (usage.durationMs !== undefined)
-        parts.push(formatDuration(usage.durationMs));
-    if (usage.outputTokens !== undefined)
-        parts.push(t('{n} out', { n: usage.outputTokens }));
-    if (usage.costUsd !== undefined)
-        parts.push(`$${usage.costUsd.toFixed(4)}`);
-    if (parts.length === 0)
+    const { text, title, ariaLabel } = useUsageSummary({ usage }, { showTotal });
+    if (!text)
         return null;
-    return (_jsxs("div", { className: "jini-message-usage", children: [_jsx("span", { className: "jini-message-usage-dot", "aria-hidden": true, children: "\u25CF" }), t('Done'), " \u00B7 ", parts.join(' · ')] }));
+    return (_jsxs("div", { className: "jini-message-usage", title: title, role: "note", "aria-label": ariaLabel, children: [_jsx("span", { className: "jini-message-usage-dot", "aria-hidden": true, children: "\u25CF" }), t('Done'), " \u00B7 ", text] }));
 }
-function messageBlocks({ visibleContent, message, rows }, _optional = {}) {
+function messageBlocks({ visibleContent, message, rows }, { toolCallDisplay = 'show', includeThinking = false } = {}) {
     // Interleaving is skipped outright when an artifact was stripped. `stripArtifact` operates on the
     // whole string and trims, so the surviving text no longer lines up with the per-run offsets the
     // event walk produces, and an artifact block could legitimately span a tool call. Rather than
@@ -130,14 +124,22 @@ function messageBlocks({ visibleContent, message, rows }, _optional = {}) {
     // messages are dominated by the artifact panel anyway, so the ordering matters least there.
     if (visibleContent !== message.content)
         return null;
-    return interleaveMessageBlocks({ events: message.events, content: message.content, rows }, { slotOf: (ev) => extEventSlot({ name: ev.name, data: ev.data }) });
+    const blocks = interleaveMessageBlocks({ events: message.events, content: message.content, rows }, { slotOf: (ev) => extEventSlot({ name: ev.name, data: ev.data }), includeThinking });
+    return blocks ? applyToolCallDisplay({ blocks, mode: toolCallDisplay }) : null;
+}
+/** The model's reasoning, folded under a "Thinking" summary so it never crowds the answer. */
+function ThinkingBlock({ text }) {
+    const t = useT();
+    if (!text.trim())
+        return null;
+    return (_jsxs("details", { className: "jini-message-thinking", children: [_jsx("summary", { children: t('Thinking') }), _jsx("div", { className: "jini-message-thinking__text", children: text })] }));
 }
-function messageAwaitingAnswer({ runStreaming, runInProgress, events }, _optional = {}) {
-    return runStreaming === true && runInProgress && isAwaitingAnswer({ events });
+function messageAwaitingAnswer({ runStreaming, runInProgress, events }, { isAnsweredCard } = {}) {
+    return runStreaming === true && runInProgress && isAwaitingAnswer({ events }, { isAnsweredCard });
 }
-function AssistantMessageFooter({ message, usageEvent, terminalNotice, pending, runInProgress, runStreaming, visibleContent }, _optional = {}) {
+function AssistantMessageFooter({ message, usageEvent, showUsageTotal, terminalNotice, pending, runInProgress, runStreaming, visibleContent, isAnsweredCard }, _optional = {}) {
     const t = useT();
-    return _jsxs(_Fragment, { children: [usageEvent ? _jsx(UsageSummary, { usage: usageEvent }) : null, terminalNotice ? _jsx("div", { className: "jini-message-error", role: "status", children: t(terminalNotice) }) : null, !pending && !runInProgress ? (_jsx("div", { className: "jini-message-actions jini-message-actions--assistant", children: _jsx(CopyMessageButton, { text: visibleContent, label: t('Copy message') }) })) : null, runInProgress ? _jsx(RunActivityLine, { events: message.events, active: pending || (runStreaming === true && runInProgress) }) : null] });
+    return _jsxs(_Fragment, { children: [usageEvent ? _jsx(UsageSummary, { usage: usageEvent, showTotal: showUsageTotal }) : null, terminalNotice ? _jsx("div", { className: "jini-message-error", role: "status", children: t(terminalNotice) }) : null, !pending && !runInProgress ? (_jsx("div", { className: "jini-message-actions jini-message-actions--assistant", children: _jsx(CopyMessageButton, { text: visibleContent, label: t('Copy message') }) })) : null, runInProgress ? _jsx(RunActivityLine, { events: message.events, active: pending || (runStreaming === true && runInProgress), isAnsweredCard: isAnsweredCard }) : null] });
 }
 /**
  * Quiet, icon-only copy affordance shared by the user- and assistant-message
@@ -160,26 +162,34 @@ function CopyMessageButton({ text, label }) {
  * 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 const MessageRow = memo(function MessageRow({ message, runStreaming = false, runSucceeded = false, questionFormInteractive = false, questionFormSubmittedAnswers, onQuestionFormSubmit, projectFileNames, onRequestOpenFile, renderAttachment, }) {
+export const MessageRow = memo(function MessageRow({ message, usageSummary, showUsageTotal = true, showUsageLine = true, toolCallDisplay = 'show', showThinking = false, runStreaming = false, runSucceeded = false, questionFormInteractive = false, questionFormSubmittedAnswers, onQuestionFormSubmit, projectFileNames, onRequestOpenFile, renderAttachment, }) {
     const t = useT();
+    const messageUsage = useMessageUsage({ message, ...(usageSummary === undefined ? {} : { summary: usageSummary }) });
     const timeline = useToolTimeline({ events: message.events }, { runStreaming, runSucceeded });
     const extGroups = useExtEventGroups({ events: message.events }, { slotOf: (name, data) => extEventSlot({ name, data }) });
+    const answeredCards = useAnsweredCards({ slotOf: 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.
     const [openAttachment, setOpenAttachment] = useState(null);
     if (message.role === 'user') {
-        return (_jsxs("div", { className: "jini-message jini-message-user", "data-message-id": message.id, "data-agent-element": `chat-message-${message.id}`, "data-agent-role": "region", "data-agent-label": "A message from the user", children: [message.attachments && message.attachments.length > 0 ? (_jsx("div", { className: "jini-message-attachments", children: message.attachments.map((a) => (_jsx("button", { type: "button", className: "jini-message-attachment-chip", onClick: () => setOpenAttachment(a), title: t('Open {name}', { name: a.name }), "aria-label": t('Open {name}', { name: a.name }), children: renderAttachment ? renderAttachment(a) : a.name }, a.path))) })) : null, _jsx("div", { className: "jini-message-content", children: message.content }), _jsx("div", { className: "jini-message-actions jini-message-actions--user", children: _jsx(CopyMessageButton, { text: message.content, label: t('Copy message') }) }), openAttachment ? (_jsx(AttachmentPreviewModal, { attachment: openAttachment, onClose: () => setOpenAttachment(null) })) : null] }));
+        return (_jsxs("div", { className: "jini-message jini-message-user", "data-message-id": message.id, "data-agent-element": `chat-message-${message.id}`, "data-agent-role": "region", "data-agent-label": "A message from the user", children: [message.attachments && message.attachments.length > 0 ? (_jsx("div", { className: "jini-message-attachments", children: message.attachments.map((a) => (_jsx(SentAttachmentButton, { attachment: a, onOpen: setOpenAttachment, renderAttachment: renderAttachment }, a.path))) })) : null, _jsx("div", { className: "jini-message-content", children: message.content }), _jsx("div", { className: "jini-message-actions jini-message-actions--user", children: _jsx(CopyMessageButton, { text: message.content, label: t('Copy message') }) }), openAttachment ? (_jsx(AttachmentPreviewModal, { attachment: openAttachment, onClose: () => setOpenAttachment(null) })) : null] }));
     }
     const terminalNotice = terminalMessageNotice({ message }, {});
     const visibleContent = stripArtifact({ content: message.content });
     const segments = splitOnQuestionForms({ input: visibleContent });
-    const usageEvent = turnUsage({ events: message.events }, {});
-    const blocks = messageBlocks({ visibleContent, message, rows: timeline.rows }, {});
+    const blocks = messageBlocks({ visibleContent, message, rows: timeline.rows }, { toolCallDisplay, includeThinking: showThinking });
     const pending = isPendingWithNoContent(message, visibleContent, timeline.rows.length);
     const runInProgress = isRunInProgress(message.runStatus);
-    const awaitingAnswer = messageAwaitingAnswer({ runStreaming, runInProgress, events: message.events }, {});
+    const awaitingAnswer = messageAwaitingAnswer({ runStreaming, runInProgress, events: message.events }, { isAnsweredCard: answeredCards.isAnsweredCard });
+    const usage = usageLayout({ usage: messageUsage, interleaved: blocks !== null, runInProgress }, { runStreaming });
+    const footerUsage = showUsageLine ? usage.footer : undefined;
     const renderToolCard = (row) => (_jsx(ToolCard, { use: row.use, result: row.result, runStreaming: runStreaming, runSucceeded: runSucceeded, ...(projectFileNames !== undefined ? { projectFileNames } : {}), ...(onRequestOpenFile !== undefined ? { onRequestOpenFile } : {}) }, row.id));
+    // One turn's cards: a fold-up line when collapsed, the plain card list otherwise.
+    const renderTools = (rows, key) => (toolCallDisplay === 'collapsed'
+        ? _jsx(ToolCallGroup, { rows: rows, renderRow: renderToolCard }, key)
+        : _jsx("div", { className: "jini-message-tools", children: rows.map(renderToolCard) }, key));
+    const flatToolRows = toolRowsForDisplay({ rows: timeline.rows, mode: toolCallDisplay });
     const renderExtGroup = (group) => {
         const renderer = getExtEventRenderer({ name: group.name });
         if (!renderer)
@@ -192,6 +202,8 @@ export const MessageRow = memo(function MessageRow({ message, runStreaming = fal
             awaitingAnswer,
             runId: message.runId,
             ...(group.call === undefined ? {} : { call: group.call }),
+            answered: answeredCards.isAnswered(group.slot),
+            onAnswered: () => answeredCards.markAnswered(group.slot),
         });
         if (!node)
             return null;
@@ -202,28 +214,35 @@ export const MessageRow = memo(function MessageRow({ message, runStreaming = fal
         _jsx(ExtEventErrorBoundary, { name: group.name, children: _jsx("div", { children: node }) }, `${group.slot}:${group.events.length}`));
     };
     const renderTextSegments = (text, keyPrefix) => splitOnQuestionForms({ input: 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
+    return (_jsxs("div", { className: usageLineMeetsActions({ footer: footerUsage, terminalNotice, pending, runInProgress })
+            ? 'jini-message jini-message-assistant jini-message-assistant--usage-actions'
+            : '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
                 ? blocks.map((block) => {
                     if (block.kind === 'text') {
                         return _jsx(React.Fragment, { children: renderTextSegments(block.text, block.key) }, block.key);
                     }
-                    if (block.kind === 'tools') {
-                        return (_jsx("div", { className: "jini-message-tools", children: block.rows.map(renderToolCard) }, block.key));
+                    if (block.kind === 'reply-end') {
+                        const reply = usage.replies[block.index];
+                        return reply && showUsageLine ? _jsx(UsageSummary, { usage: reply, showTotal: showUsageTotal }, block.key) : null;
                     }
+                    if (block.kind === 'tools')
+                        return renderTools(block.rows, block.key);
+                    if (block.kind === 'thinking')
+                        return _jsx(ThinkingBlock, { text: block.text }, block.key);
                     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] })), _jsx(AssistantMessageFooter, { message, usageEvent, terminalNotice, pending, runInProgress, runStreaming, visibleContent })] }));
+                : (_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))), flatToolRows.length > 0 ? renderTools(flatToolRows) : null, extGroups.length > 0 ? _jsx("div", { className: "jini-message-ext-events", children: extGroups.map(renderExtGroup) }) : null] })), _jsx(AssistantMessageFooter, { message, usageEvent: footerUsage, showUsageTotal, terminalNotice, pending, runInProgress, runStreaming, visibleContent, isAnsweredCard: answeredCards.isAnsweredCard })] }));
 });
 /**
  * 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 activityLabel = useRunActivity({ events: events, active: active });
+function RunActivityLine({ events, active, isAnsweredCard }) {
+    const activityLabel = useRunActivity({ events: events, active: active }, { isAnsweredCard });
     const label = continuingRunNotice({ events, active }, {}) ?? activityLabel;
     if (label === null)
         return null;

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

@@ -0,0 +1,48 @@
+import type { ChatMessage } from '../../core/messages.js';
+import { type ChatUsageSummary } from '../../core/turn-usage.js';
+/** A standalone row has one turn; MessageList supplies the full conversation projection. */
+export declare function useMessageUsage({ message, summary }: {
+    message: ChatMessage;
+    summary?: ChatUsageSummary;
+}, _optional?: {}): ChatUsageSummary | undefined;
+/** Which "Done" lines a message shows. Each finished reply gets its own line where it ends; the reply
+ * still running gets none, so a stale line never sits above live work (owner, 2026-10-10). Per-reply
+ * lines need the ordered block layout to know where a reply ends; the flat fallback keeps one
+ * whole-message line under the message once the run is over. A row still streaming counts as running
+ * even when its `runStatus` was never set, so the previous reply's line cannot slide down under the
+ * live tool rows above "Running …" (owner bug, 2026-10-10). O(r) for r replies.
+ * @example usageLayout({ usage, interleaved: true, runInProgress: true }).footer // undefined */
+export declare function usageLayout({ usage, interleaved, runInProgress }: {
+    usage: ChatUsageSummary | undefined;
+    interleaved: boolean;
+    runInProgress: boolean;
+}, { runStreaming }?: {
+    runStreaming?: boolean;
+}): {
+    footer: ChatUsageSummary | undefined;
+    replies: readonly (ChatUsageSummary | undefined)[];
+};
+/** Whether the footer's "Done" line renders directly above the copy row: a finished turn with a
+ * non-empty usage line and no notice between them. Rows get a modifier class from this so a host can
+ * lay the two out on one line with a plain class selector — a `:has(> usage + actions)` selector made
+ * every keystroke restyle the whole page in long chats (2026-10-11). O(1).
+ * @example usageLineMeetsActions({ footer: { kind: 'usage', costUsd: 0.1 }, terminalNotice: null, pending: false, runInProgress: false }) // true */
+export declare function usageLineMeetsActions({ footer, terminalNotice, pending, runInProgress }: {
+    footer: ChatUsageSummary | undefined;
+    terminalNotice: string | null;
+    pending: boolean;
+    runInProgress: boolean;
+}, _optional?: {}): boolean;
+/** Build footer display values outside JSX; token counts remain available in the tooltip and accessible footer label.
+ * Each line carries the chat's running total as of that reply, "Done · 16s · $0.39 · total $3.95" (owner,
+ * 2026-10-10: keep the total, always shown, even on the first turn). `showTotal: false` turns it off. */
+export declare function useUsageSummary({ usage }: {
+    usage: ChatUsageSummary;
+}, { showTotal }?: {
+    showTotal?: boolean;
+}): {
+    text: string;
+    title: string | undefined;
+    ariaLabel: string | undefined;
+};
+//# sourceMappingURL=MessageRow.usage.d.ts.map