@adecore/agents-react 0.23.0 → 0.24.0

package/dist/chat/ui/rows/Rows.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { ErrorBoundary } from '@adecore/ui';
-import { AgentTurnRow, ApprovalHistoryRow, AssistantRow, CompactionRow, NoteRow, QuestionHistoryRow, ReportRow, ThinkingRow, UserRow } from './MessageRows.js';
+import { AgentTurnRow, ApprovalHistoryRow, AssistantRow, CompactionRow, LiveThoughtRow, NoteRow, QuestionHistoryRow, ReportRow, ThinkingRow, UserRow } from './MessageRows.js';
 import { isImageGeneration } from '../../logic/generated-image.js';
 import { ForksRow } from './ForksRow.js';
 import { GeneratedImageRow } from './GeneratedImageRow.js';
@@ -32,6 +32,8 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
             return _jsx(ReportRow, { id: row.id, text: row.text });
         case 'thinking':
             return _jsx(ThinkingRow, { chatId: chatId, item: row.item });
+        case 'live-thought':
+            return _jsx(LiveThoughtRow, { chatId: chatId, item: row.item });
         case 'work':
             return isImageGeneration(row.tool) ? _jsx(GeneratedImageRow, { chatId: chatId, tool: row.tool }) : _jsx(WorkRow, { tool: row.tool });
         case 'work-live':

package/dist/chat/ui/rows/SubagentRow.js

@@ -14,7 +14,7 @@ import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows.js';
 import { entryTimeOf, statusWordOf, taskIdOf } from '../../subagent-list.js';
 import { useSubagentSupport } from '../../subagent-support.js';
 import { canOpenSubagent, crumbOf } from '../../subagent-view.js';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import { useChatScope } from '../../../scope.js';
 import { useCurrentItem } from '../../../state/chats.js';
 // The work of a long-running agent scrolls inside its row instead of pushing the thread away.
@@ -85,10 +85,11 @@ function SubagentResult({ itemId, result }) {
  * the work the thread kept and, once it settled, the report it wrote.
  */
 export function SubagentRow({ chatId, item, work, expanded, onToggle, onOpenConversation }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const taskId = taskIdOf(item);
-    const task = chatHost().tasks.useTask(id, taskId);
+    const task = host.tasks.useTask(id, taskId);
     // A task paused on its child's limit is still a running row on the wire, but nothing is at work.
     const running = item.status === 'running' && statusWordOf(item, task) !== 'paused';
     const detail = item.description || item.summary || item.subagentType || '';

package/dist/chat/ui/rows/VisualRow.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { Ellipsis, Maximize2, Trash2 } from 'lucide-react';
 import { ButtonGroup, ErrorBoundary, Icon, IconButton, Menu, Surface } from '@adecore/ui';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import { useChatScope } from '../../../scope.js';
 import { useVisualDialog } from '../../visuals.js';
 import { VisualFrame } from '../VisualFrame.js';
@@ -13,9 +13,10 @@ import { VisualFrame } from '../VisualFrame.js';
  * sit here.
  */
 export function VisualRow({ chatId, visual }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { keyOf } = useChatScope();
-    if (chatHost().visuals === null) {
+    if (host.visuals === null) {
         return null;
     }
     const open = (kind) => useVisualDialog.getState().open(keyOf(chatId), visual.id, kind);

package/dist/chat/ui/rows/WorkRows.d.ts

@@ -1,15 +1,18 @@
 import { type ReactNode } from 'react';
 import type { ChatCheckpointDiff, ChatToolItem, ChatTurnItem } from '@adecore/agent-contracts';
 import type { BaseMoved } from '../../logic/timeline.js';
-export declare function ToggleLine({ icon, label, detail, open, onToggle, failed, live, trailing, className }: {
+export declare function ToggleLine({ icon, label, detail, command, path, open, onToggle, failed, live, trailing, time, className }: {
     icon: ReactNode;
     label: string;
     detail?: string;
-    open: boolean;
-    onToggle(): void;
+    command?: boolean;
+    path?: boolean;
+    open?: boolean;
+    onToggle?(): void;
     failed?: boolean;
     live?: boolean;
     trailing?: ReactNode;
+    time?: number;
     className?: string;
 }): import("react").JSX.Element;
 export declare function WorkRow({ tool, nested, detail, icon, label, failed }: {

package/dist/chat/ui/rows/WorkRows.js

@@ -1,36 +1,49 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useEffect, useState } from 'react';
+import { Fragment, Suspense, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import i18next from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { ChevronRight, FileDiff, X } from 'lucide-react';
-import { fileChanges, liveOutput, readImagePath, toolStartedAt, toolSummary, unifiedChanges } from '../../logic/tools.js';
+import { exitCodeOf, fileChanges, hasOutput, hasToolBody, liveOutput, readImagePath, shellCommand, toolCallLines, toolStartedAt, toolSummary, toolSummaryIsPath, unifiedChanges } from '../../logic/tools.js';
 import { useOpenForFind } from '../find-reveal.js';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import { lazyNamed } from '../../../lazy.js';
 import { useChatActions } from '../../actions.js';
 import { useChatScope } from '../../../scope.js';
 import { useCurrentItem } from '../../../state/chats.js';
 import { useTimelineFlash } from '../../timeline-flash.js';
 import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
-import { Icon, Spinner, useTickingText } from '@adecore/ui';
+import { Icon, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
 import { ROW_GUTTER, toolIcon } from '../icons.js';
 import { AnsiOutput } from '../AnsiOutput.js';
+import { RowTime } from '../RowTime.js';
+import { ShellCommand } from '../ShellCommand.js';
 import { DiffStack, ReviewStackView } from '../diff/DiffStack.js';
 import { reviewEntries } from '../diff/review-plan.js';
 import { useReviewStack } from '../diff/use-review-stack.js';
 // A checkpoint opens its renderer only when a file is expanded.
 const UnifiedDiff = lazyNamed(() => import('../UnifiedDiff.js'), 'default');
 const OUTPUT_LIMIT = 4000;
+/* The line that says how much of a text past the limit is left out; empty for a text within it. */
+function clipNotice(text) {
+    return text.length > OUTPUT_LIMIT ? `\n${i18next.t('agent-chat:work.moreCharacters', { count: text.length - OUTPUT_LIMIT })}` : '';
+}
 function clip(text) {
-    return text.length > OUTPUT_LIMIT
-        ? `${text.slice(0, OUTPUT_LIMIT)}\n${i18next.t('agent-chat:work.moreCharacters', { count: text.length - OUTPUT_LIMIT })}`
-        : text;
+    return text.slice(0, OUTPUT_LIMIT) + clipNotice(text);
 }
-export function ToggleLine({ icon, label, detail, open, onToggle, failed, live, trailing, className }) {
-    return (_jsxs("button", { className: clsx(
-        // Fix the width so long commands reach the truncation inside the negative margins.
-        '-mx-1 mb-0.5 flex h-7 w-[calc(100%+8px)] items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover', failed && 'text-status-error', className), onClick: onToggle, children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsx("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: label }), detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: detail })), _jsx("span", { className: "grow" }), trailing, failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') })] }));
+/*
+ * The line of a call, a subagent or a group. Without `onToggle` it has nothing to open: no chevron, and
+ * not a button. `time` shows at the right edge while the line is hovered or focused.
+ */
+export function ToggleLine({ icon, label, detail, command, path, open = false, onToggle, failed, live, trailing, time, className }) {
+    const classes = clsx(
+    // Fix the width so long commands reach the truncation inside the negative margins.
+    'group/line -mx-1 mb-0.5 flex h-7 w-[calc(100%+8px)] items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted', onToggle !== undefined && 'hover:bg-surface-hover', failed && 'text-status-error', className);
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsx("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: label }), detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: command ? _jsx(ShellCommand, { command: detail }) : path ? _jsx(MiddleTruncate, { text: detail }) : detail })), _jsx("span", { className: "grow" }), trailing, time !== undefined && _jsx(RowTime, { at: time }), failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), onToggle !== undefined && (_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }))] }));
+    if (onToggle === undefined) {
+        return _jsx("div", { className: classes, children: content });
+    }
+    return (_jsx("button", { className: classes, onClick: onToggle, children: content }));
 }
 /* The diff renderers load lazily, so a diff waits on them under a line that says so. */
 function DiffSuspense({ children }) {
@@ -39,23 +52,45 @@ function DiffSuspense({ children }) {
 }
 /* A file in a changed files card, which opens its diff under it. */
 function ChangedFileLine({ path, open, onToggle, trailing, children }) {
-    return (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": path, onClick: onToggle, children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: path }), _jsx("span", { className: "grow" }), trailing] }), open && _jsx("div", { className: "border-t border-border", children: children })] }));
+    return (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": path, onClick: onToggle, children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }), _jsx(MiddleTruncate, { text: path, className: "font-mono text-text" }), _jsx("span", { className: "grow" }), trailing] }), open && _jsx("div", { className: "border-t border-border", children: children })] }));
+}
+/* A diff keeps its card, with what the call answered under it. */
+function DiffBody({ tool, entries, patched }) {
+    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [_jsx(DiffStack, { entries: entries }), hasOutput(tool.output) && !patched && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
 }
+/* What a call answered, muted under the call; a failure in the error color, or its exit code when the tool names one. */
+function ToolOutput({ tool }) {
+    const { t } = useTranslation('agent-chat');
+    if (!hasOutput(tool.output)) {
+        return null;
+    }
+    const failed = tool.state === 'error';
+    const { code, rest } = failed ? exitCodeOf(tool.output) : { code: null, rest: tool.output };
+    return (_jsxs(_Fragment, { children: [hasOutput(rest) && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap', failed && code === null ? 'text-status-error' : 'text-text-muted'), children: _jsx(AnsiOutput, { text: rest, limit: OUTPUT_LIMIT }) })), code !== null && _jsx("div", { className: "text-status-error", children: t('work.exitCode', { code: String(code) }) })] }));
+}
+/* An opened call without a card: what it was asked in the foreground, what it answered muted below. */
 function ToolBody({ tool }) {
     const patches = unifiedChanges(tool);
     const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
-    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length + changes.length > 0 ? (_jsx(DiffStack, { entries: reviewEntries(patches, changes) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
+    if (patches.length + changes.length > 0) {
+        return _jsx(DiffBody, { tool: tool, entries: reviewEntries(patches, changes), patched: patches.length > 0 });
+    }
+    const lines = toolCallLines(tool.name, tool.input);
+    return (_jsxs("div", { className: "mt-0.5 mb-2 ml-6 flex flex-col gap-1.5 font-mono text-code select-text", children: [lines.command !== null && (_jsxs("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap wrap-anywhere text-text", children: [_jsx(ShellCommand, { command: lines.command.slice(0, OUTPUT_LIMIT) }), clipNotice(lines.command)] })), lines.args.length > 0 && (_jsx("dl", { className: "grid max-h-64 grid-cols-[auto_minmax(0,1fr)] gap-x-3 overflow-auto", children: lines.args.map(([key, value]) => (_jsxs(Fragment, { children: [_jsx("dt", { className: "text-text-faint", children: key }), _jsx("dd", { className: "whitespace-pre-wrap wrap-anywhere text-text", children: clip(value) })] }, key))) })), lines.text !== null && _jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap wrap-anywhere text-text", children: clip(lines.text) }), _jsx(ToolOutput, { tool: tool })] }));
 }
 /*
- * One settled tool call: a line, and its input and output behind it. An image the call looked at is
- * drawn under the line. `icon`, `label` and `failed` let a row that knows the call better name it.
+ * One settled tool call: a line, and what it was asked and answered behind it. An image the call
+ * looked at is drawn under the line. `icon`, `label` and `failed` let a row that knows the call better name it.
  */
 export function WorkRow({ tool, nested, detail, icon, label, failed }) {
+    const host = useChatHost();
     const [open, setOpen] = useState(false);
     const image = tool.state === 'done' ? readImagePath(tool.name, tool.input) : null;
-    const { ReadImage } = chatHost();
+    const { ReadImage } = host;
     useOpenForFind(tool.id, 'output', setOpen);
-    return (_jsxs("div", { "data-find-item": tool.id, className: nested ? 'ml-6' : undefined, children: [_jsx(ToggleLine, { icon: icon ?? toolIcon(tool.name), label: label ?? tool.name, detail: detail ?? toolSummary(tool.name, tool.input), open: open, onToggle: () => setOpen((o) => !o), failed: failed ?? tool.state === 'error' }), image !== null && ReadImage !== null && _jsx(ReadImage, { path: image }), open && _jsx(ToolBody, { tool: tool })] }));
+    const summary = detail ?? toolSummary(tool.name, tool.input);
+    const opens = hasToolBody(tool);
+    return (_jsxs("div", { "data-find-item": tool.id, className: nested ? 'ml-6' : undefined, children: [_jsx(ToggleLine, { icon: icon ?? toolIcon(tool.name), label: label ?? tool.name, detail: summary, command: detail === undefined && summary === shellCommand(tool.name, tool.input), path: detail === undefined && toolSummaryIsPath(tool.name, tool.input), open: open && opens, onToggle: opens ? () => setOpen((o) => !o) : undefined, failed: failed ?? tool.state === 'error', time: tool.createdAt }), image !== null && ReadImage !== null && _jsx(ReadImage, { path: image }), open && opens && _jsx(ToolBody, { tool: tool })] }));
 }
 /* "running for 12s" next to a live call. */
 export function RunningFor({ startedAt }) {
@@ -68,19 +103,21 @@ export function WorkLiveRow({ chatId, tool: derived }) {
     const [open, setOpen] = useState(false);
     const tool = useCurrentItem(chatId, derived);
     const tail = liveOutput(tool);
-    return (_jsxs("div", { children: [_jsx(ToggleLine, { icon: toolIcon(tool.name), label: tool.name, detail: toolSummary(tool.name, tool.input) || tool.progress?.description || '', open: open, onToggle: () => setOpen((o) => !o), trailing: _jsx(RunningFor, { startedAt: toolStartedAt(tool) }), live: true }), open && _jsx(ToolBody, { tool: tool }), tail !== null && !open && (_jsx("pre", { className: "mt-1.5 mb-2 ml-6 max-h-48 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-code whitespace-pre-wrap text-chat-output select-text", children: _jsx(AnsiOutput, { text: tail, tailLines: 12 }) }))] }));
+    const summary = toolSummary(tool.name, tool.input);
+    const opens = hasToolBody(tool);
+    return (_jsxs("div", { children: [_jsx(ToggleLine, { icon: toolIcon(tool.name), label: tool.name, detail: summary || tool.progress?.description || '', command: summary !== '' && summary === shellCommand(tool.name, tool.input), path: summary !== '' && toolSummaryIsPath(tool.name, tool.input), open: open && opens, onToggle: opens ? () => setOpen((o) => !o) : undefined, trailing: _jsx(RunningFor, { startedAt: toolStartedAt(tool) }), live: true }), open && opens && _jsx(ToolBody, { tool: tool }), tail !== null && !open && (_jsx("pre", { className: "mt-1.5 mb-2 ml-6 max-h-48 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-code whitespace-pre-wrap text-chat-output select-text", children: _jsx(AnsiOutput, { text: tail, tailLines: 12 }) }))] }));
 }
 /* A run of tool calls as one line ("Read 4 files"); opening it lists every call. */
 export function WorkGroupRow({ tools, summary, expanded, onToggle }) {
     const failed = tools.some((tool) => tool.state === 'error');
-    return (_jsx("div", { children: _jsx(ToggleLine, { icon: toolIcon(tools[0].name), label: summary, open: expanded, onToggle: onToggle, failed: failed }) }));
+    return (_jsx("div", { children: _jsx(ToggleLine, { icon: toolIcon(tools[0].name), label: summary, open: expanded, onToggle: onToggle, failed: failed, time: tools[0].createdAt }) }));
 }
 /*
  * A settled turn folded behind how long it took and what it did. A line and not a button, like the
  * tool lines it hides; the work reads fainter than the time so the eye lands on the time first.
  */
 export function TurnFoldRow({ turn, label, work, expanded, onToggle }) {
-    return (_jsxs("button", { className: clsx('group -mx-1 mb-2 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover', turn.state === 'error' && 'text-status-error'), "aria-expanded": expanded, onClick: onToggle, children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('transition-transform', expanded && 'rotate-90') }) }), _jsx("span", { className: "shrink-0 group-hover:text-text", children: label }), work.length > 0 && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: work.map((part) => ` · ${part}`).join('') })] }));
+    return (_jsxs("button", { className: clsx('group group/line -mx-1 mb-2 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover', turn.state === 'error' && 'text-status-error'), "aria-expanded": expanded, onClick: onToggle, children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('transition-transform', expanded && 'rotate-90') }) }), _jsx("span", { className: "shrink-0 group-hover:text-text", children: label }), work.length > 0 && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: work.map((part) => ` · ${part}`).join('') }), _jsx("span", { className: "grow" }), _jsx(RowTime, { at: turn.createdAt })] }));
 }
 function omittedLabel(reason) {
     return reason === 'binary' ? i18next.t('agent-chat:work.omitted.binary') : i18next.t('agent-chat:work.omitted.tooLarge');

package/dist/chat/ui/rows/WorkflowRow.js

@@ -9,7 +9,7 @@ import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows.js';
 import { useChatScope } from '../../../scope.js';
 import { Icon, IconButton } from '@adecore/ui';
 import { useChatActions } from '../../actions.js';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 function AgentLine({ view, onOpen }) {
     const { agent, state } = view;
     const time = workflowAgentTime(view);
@@ -25,6 +25,7 @@ function PhaseBlock({ phase, onOpen }) {
 }
 // Keep background progress visible after the launcher turn ends.
 export function WorkflowRow({ tool, workflow, chatId, onOpenAgent }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     // A host that does not answer `chat.subagent` has no conversation to open for anyone.
@@ -36,7 +37,7 @@ export function WorkflowRow({ tool, workflow, chatId, onOpenAgent }) {
     const stop = () => {
         if (chatId && workflow.taskId) {
             void actions.stopTask(chatId, workflow.taskId).catch((error) => {
-                chatHost().notify({
+                host.notify({
                     kind: 'error',
                     title: t('activity.stopFailed'),
                     description: error instanceof Error ? error.message : t('subagents.noAnswer')

package/dist/chat/ui/timestamp-format.d.ts

@@ -0,0 +1 @@
+export declare const TIMESTAMP_FORMAT: Intl.DateTimeFormatOptions;

package/dist/chat/ui/timestamp-format.js

@@ -0,0 +1,2 @@
+/* The full date and time a row's time names on its tooltip. */
+export const TIMESTAMP_FORMAT = { dateStyle: 'full', timeStyle: 'medium' };

package/dist/chat/ui/use-diff-source-tokens.js

@@ -1,13 +1,14 @@
 import { useLayoutEffect, useMemo } from 'react';
 import { diffSyntaxDocument } from '@adecore/editor-react';
-import { diffSourceTokens } from './diff-syntax.js';
+import { useChatHost } from '../../host.js';
+import { diffSourceTokens, diffSyntaxRuntime } from './diff-syntax.js';
 function createSourceBinding(document, language, theme, runtime) {
     const mapping = diffSyntaxDocument(document, language, theme);
     const listeners = new Set();
     let source;
     const current = () => {
         if (source === undefined) {
-            source = diffSourceTokens(document, mapping, runtime);
+            source = diffSourceTokens(document, mapping, runtime());
             source.subscribe(() => {
                 for (const listener of [...listeners]) {
                     listener();
@@ -33,8 +34,10 @@ function createSourceBinding(document, language, theme, runtime) {
         }
     };
 }
+/* Without a `runtime`, the shared one of the host's `code`. */
 export function useDiffSourceTokens(document, language, theme, runtime) {
-    const binding = useMemo(() => createSourceBinding(document, language, theme, runtime), [document, language, theme, runtime]);
+    const { code } = useChatHost();
+    const binding = useMemo(() => createSourceBinding(document, language, theme, () => runtime ?? diffSyntaxRuntime(code)), [document, language, theme, runtime, code]);
     useLayoutEffect(() => () => binding.release(), [binding]);
     return binding.tokens;
 }

package/dist/chat/ui/visual-theme.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useState } from 'react';
 import { cleanVisualVariables } from '@adecore/agent-contracts/visual';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 /*
  * A page's theme from the app's tokens. The names follow common component themes, where `--accent`
  * is a quiet hover ground and `--primary` the color that stands out, so the app's accent is the
@@ -142,7 +142,8 @@ const THEME_ATTRIBUTES = ['class', 'style', 'data-theme'];
  * accent or a font a person picks reaches every frame as well.
  */
 export function useVisualTheme(ref) {
-    const mode = chatHost().code.useMode();
+    const host = useChatHost();
+    const mode = host.code.useMode();
     const [theme, setTheme] = useState(null);
     useLayoutEffect(() => {
         const element = ref.current;

package/dist/host.d.ts

@@ -1,14 +1,13 @@
-import type { ComponentProps, ComponentType, ReactNode, RefObject } from 'react';
+import { type ComponentProps, type ComponentType, type ReactNode, type RefObject } from 'react';
 import type { Extension } from '@codemirror/state';
 import type { EditorView } from '@codemirror/view';
 import type { Highlighter, ThemeRegistration } from 'shiki';
 import type { EditorEngine } from '@adecore/editor';
-import type { AgentKind, ChatCheckpointDiff, ChatConfigurePayload, ChatItem, ChatSubagentItem, ChatUiChoicePayload, ChatUiQueryPayload, ChatUiQueryReading, ChatUiLinkPayload, ChatUiLinkReading } from '@adecore/agent-contracts';
+import type { AgentKind, ChatCheckpointDiff, ChatConfigurePayload, ChatGoalAction, ChatItem, ChatSubagentItem, ChatUiChoicePayload, ChatUiQueryPayload, ChatUiQueryReading, ChatUiLinkPayload, ChatUiLinkReading } from '@adecore/agent-contracts';
 import type { TimelineRow } from './chat/logic/timeline.js';
 import type { FindReveal } from './chat/ui/find-reveal.js';
 import type { PromptAction } from './prompts/logic/prompts.js';
 import type { HostPrompt, PromptViewProps } from './prompts/logic/subjects.js';
-import { type ChatStorageOptions } from './storage.js';
 export interface AccentChoice {
     id: string;
     color: string;
@@ -34,6 +33,7 @@ export interface ChatActions {
     turnDiff(chatId: string, turnId: string): Promise<ChatCheckpointDiff | null>;
     stopSubagent(chatId: string, toolUseId: string): Promise<void>;
     stopTask(chatId: string, taskId: string): Promise<void>;
+    goal?(chatId: string, action: ChatGoalAction): Promise<void>;
     approve(chatId: string, requestId: string, decision: 'allow' | 'allow-always' | 'deny', message?: string): Promise<void>;
     answer(chatId: string, requestId: string, answers: Record<string, string>): Promise<void>;
     dismiss(chatId: string, itemId: string): Promise<void>;
@@ -126,7 +126,6 @@ export interface ReplyAuthor {
     mark?: ReactNode;
 }
 export interface ChatHost {
-    storage?: ChatStorageOptions;
     intelligentUi?: {
         subscribe?(scopeId: string, chatId: string, changed: () => void): () => void;
         link?(scopeId: string, payload: ChatUiLinkPayload): Promise<ChatUiLinkReading>;
@@ -215,6 +214,7 @@ export interface ChatHost {
         stopTask(scopeId: string, childId: string, title: string, run: () => void): void;
     };
     fork: ((chatId: string, turnId: string) => void) | null;
+    openNewChat: ((scopeId: string, chatId: string) => void) | null;
     openSettings(section: 'providers' | 'agents'): void;
     useResumeAtReset(scopeId: string): boolean;
     useComposerPlaceholder(scopeId: string, chatId: string): string | null;
@@ -224,5 +224,8 @@ export interface ChatHost {
     useReplyAuthor(scopeId: string, chatId: string): ReplyAuthor | null;
     visuals: VisualHost | null;
 }
-export declare function setChatHost(patch: Partial<ChatHost>): void;
-export declare function chatHost(): ChatHost;
+export declare function ChatHostProvider({ host, children }: {
+    host: Partial<ChatHost>;
+    children?: ReactNode;
+}): import("react").FunctionComponentElement<import("react").ProviderProps<ChatHost>>;
+export declare function useChatHost(): ChatHost;

package/dist/host.js

@@ -1,6 +1,6 @@
+import { createContext, createElement, useContext, useState } from 'react';
 import { isApplePlatform } from '@adecore/ui';
 import { PlainTextarea } from './ui/PlainTextarea.js';
-import { configureChatStorage } from './storage.js';
 const NO_PROMPTS = [];
 const NO_CHATS = [];
 const NO_ROWS = [];
@@ -37,6 +37,7 @@ const DEFAULT_HOST = {
     tasks: { useTasks: () => undefined, useTask: () => null },
     confirm: { stopSubagents: (_scopeId, _chatId, run) => run(), stopTask: (_scopeId, _childId, _title, run) => run() },
     fork: null,
+    openNewChat: null,
     openSettings: () => undefined,
     useResumeAtReset: () => true,
     useComposerPlaceholder: () => null,
@@ -46,13 +47,23 @@ const DEFAULT_HOST = {
     useReplyAuthor: () => null,
     visuals: null
 };
-let host = DEFAULT_HOST;
-export function setChatHost(patch) {
-    if (patch.storage !== undefined) {
-        configureChatStorage(patch.storage);
+const ChatHostContext = createContext(DEFAULT_HOST);
+/*
+ * Hands the views under it a host: `host` over the one of a provider above it, member by member, and
+ * over the defaults at the top. A part of an app that loads later and adds hooks renders a provider of
+ * its own around what it draws, so every view under it calls the same hooks from its first render on.
+ * The host is read once, as the provider mounts, since a hook that changed under a mounted view would
+ * break the order of its hooks: a provider that gets another `host` throws, and a new `key` remounts it.
+ */
+export function ChatHostProvider({ host, children }) {
+    const parent = useContext(ChatHostContext);
+    const [pinned] = useState(() => ({ host, value: { ...parent, ...host } }));
+    if (pinned.host !== host) {
+        throw new Error('A ChatHostProvider reads its host once: hand it the same object on every render, or a new key to mount it with another');
     }
-    host = { ...host, ...patch };
+    return createElement(ChatHostContext.Provider, { value: pinned.value }, children);
 }
-export function chatHost() {
-    return host;
+/* The host of the nearest `ChatHostProvider`, or the defaults outside one. */
+export function useChatHost() {
+    return useContext(ChatHostContext);
 }

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { type ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPlace, type SubagentTask, type TimelineFindOptions, type TimelineFind, type ComposerDictationProps, type ComposerSlotProps, type SubagentSlotProps, type ThreadCard, type VisualHost, type ReplyAuthor, type ChatHost, ChatHostProvider, useChatHost, type AccentChoice, type ChatToast, type TextareaProps, type ResourceUrl } from './host.js';
+export { type ChatScope, ChatScopeContext, useChatScope } from './scope.js';
+export { type ChatRequestMap, type ChatEventMap, type ChatTransportStatus, type ChatTransport, ChatTransportError, errorCode, isConnectionError } from './transport.js';
+export { portTransport, type PortTransport } from './port-transport.js';
+export { onChatStorageConfiguration, configureChatStorage, chatStorageKey, chatStorageLegacyKeys, chatStorageAdapter, hydrateChatStorage, createChatStore, type ChatStorageRecord, type ChatStorageAdapter, type ChatStorageOptions } from './storage.js';
+export { setLazyPrefetch, onLazyOpenError } from './lazy.js';
+export { type MountedEntry, MountedRegistry } from './mounted-registry.js';
+export { type AgentsSettingsSection, PROVIDERS_SECTION, USAGE_SECTION, settingsSection } from './settings/sections.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { ChatHostProvider, useChatHost } from './host.js';
+export { ChatScopeContext, useChatScope } from './scope.js';
+export { ChatTransportError, errorCode, isConnectionError } from './transport.js';
+export { portTransport } from './port-transport.js';
+export { onChatStorageConfiguration, configureChatStorage, chatStorageKey, chatStorageLegacyKeys, chatStorageAdapter, hydrateChatStorage, createChatStore } from './storage.js';
+export { setLazyPrefetch, onLazyOpenError } from './lazy.js';
+export { MountedRegistry } from './mounted-registry.js';
+export { PROVIDERS_SECTION, USAGE_SECTION, settingsSection } from './settings/sections.js';