@adecore/agents-react 0.23.1 → 0.24.1

package/dist/chat/ui/ComposerInput.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 import { Compartment, EditorState, Prec, Transaction } from '@codemirror/state';
 import { EditorView, placeholder as placeholderText } from '@codemirror/view';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { composerEditorExtensions, externalChange } from './composer/editor.js';
 import { insertAtSelection } from './composer/insert.js';
 const NO_EXTENSIONS = [];
@@ -13,6 +13,7 @@ const NO_ARIA = {};
  * character, which a textarea with a painted layer behind it could not.
  */
 export function ComposerInput({ ref, value, placeholder, disabled, tabbable, className, dictationToolbar, extensions = NO_EXTENSIONS, aria = NO_ARIA, ...handlers }) {
+    const { dictation } = useChatHost();
     const hostRef = useRef(null);
     const targetRef = useRef(null);
     const viewRef = useRef(null);
@@ -41,7 +42,7 @@ export function ComposerInput({ ref, value, placeholder, disabled, tabbable, cla
                 selection: { anchor: initial.length },
                 extensions: [
                     composerEditorExtensions(),
-                    chatHost().dictation.composer?.extensions ?? [],
+                    dictation.composer?.extensions ?? [],
                     compartments.attributes.of([]),
                     compartments.editable.of([]),
                     compartments.placeholder.of([]),
@@ -84,7 +85,7 @@ export function ComposerInput({ ref, value, placeholder, disabled, tabbable, cla
             view.destroy();
             viewRef.current = null;
         };
-    }, [compartments]);
+    }, [compartments, dictation.composer?.extensions]);
     useLayoutEffect(() => {
         viewRef.current?.dispatch({
             effects: [
@@ -131,6 +132,6 @@ export function ComposerInput({ ref, value, placeholder, disabled, tabbable, cla
             view.focus();
         }
     }), []);
-    const Dictation = chatHost().dictation.composer?.Control;
+    const Dictation = dictation.composer?.Control;
     return (_jsxs("div", { ref: targetRef, className: "min-w-0", children: [_jsx("div", { ref: hostRef, className: className }), Dictation && _jsx(Dictation, { buttonContainer: dictationToolbar, targetRef: targetRef, disabled: disabled, editor: () => viewRef.current })] }));
 }

package/dist/chat/ui/EditDiff.js

@@ -6,12 +6,13 @@ import { diffSourceBudget, legacyDiffBudget } from './diff/diff-source-budget.js
 import { DiffOmitted } from './diff/DiffOmitted.js';
 import { DiffUnavailable } from './diff/DiffUnavailable.js';
 import { DiffFallbackBoundary } from './diff/DiffFallbackBoundary.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 const LegacyEditDiff = lazyNamed(() => import('./diff/LegacyEditDiff.js'), 'default', { prefetch: false });
 const EditorEditDiff = lazyNamed(() => import('./diff/EditorEditDiff.js'), 'default');
 export default function EditDiff({ change, allowEditor = true, maxHeight }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const loadEngine = chatHost().code.editor;
+    const loadEngine = host.code.editor;
     const sourceAllowed = useMemo(() => diffSourceBudget(change.before, change.after), [change.before, change.after]);
     const legacyMode = !allowEditor || loadEngine === undefined;
     const legacyAllowed = useMemo(() => legacyMode && legacyDiffBudget(change.before, change.after), [legacyMode, change.before, change.after]);

package/dist/chat/ui/GoalDock.d.ts

@@ -0,0 +1,9 @@
+import type { ChatInfo, ProviderCapabilities } from '@adecore/agent-contracts';
+export declare function GoalDock({ chatId, info, goals }: {
+    chatId: string;
+    info: ChatInfo;
+    goals: ProviderCapabilities['goals'];
+}): import("react").JSX.Element | null;
+export declare function GoalPill({ chatId }: {
+    chatId: string;
+}): import("react").JSX.Element | null;

package/dist/chat/ui/GoalDock.js

@@ -0,0 +1,63 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import { Target } from 'lucide-react';
+import { Button, Icon, Pill, Tooltip } from '@adecore/ui';
+import { formatTokens, useFormatLocale } from '@adecore/ui/format';
+import { useChatHost } from '../../host.js';
+import { useChatScope } from '../../scope.js';
+import { useChats } from '../../state/chats.js';
+import { useChatActions } from '../actions.js';
+import { goalView } from '../logic/goal.js';
+/* How far the goal got, in what its CLI counts: the checks that sent the agent on, or the tokens it spent. */
+function progressOf(goal, t) {
+    const parts = [];
+    if (goal.checks !== undefined && goal.checks > 0) {
+        parts.push(t('goal.checks', { count: goal.checks }));
+    }
+    if (goal.tokensUsed !== undefined && (goal.tokensUsed > 0 || goal.tokenBudget !== undefined)) {
+        parts.push(goal.tokenBudget === undefined
+            ? t('goal.tokens', { tokens: formatTokens(goal.tokensUsed) })
+            : t('goal.budget', { tokens: formatTokens(goal.tokensUsed), budget: formatTokens(goal.tokenBudget) }));
+    }
+    return parts.length === 0 ? null : parts.join(' · ');
+}
+/*
+ * At the top of the composer while the chat has a goal: where it stands, the objective, how far it got,
+ * and what a person may do to it. The whole objective and what the last check said are in the tooltip.
+ */
+export function GoalDock({ chatId, info, goals }) {
+    const host = useChatHost();
+    const { t } = useTranslation('agent-chat');
+    useFormatLocale();
+    const actions = useChatActions();
+    const [changing, setChanging] = useState(false);
+    const view = goalView(info, goals, actions.goal !== undefined);
+    if (view === null) {
+        return null;
+    }
+    const { goal } = view;
+    const progress = progressOf(goal, t);
+    const act = (action) => {
+        if (!actions.goal) {
+            return;
+        }
+        setChanging(true);
+        actions
+            .goal(chatId, action)
+            .catch((e) => host.notify({ kind: 'error', title: t('goal.failed'), description: e instanceof Error ? e.message : String(e) }))
+            .finally(() => setChanging(false));
+    };
+    return (_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3.5 py-2.5", children: [_jsx(Icon, { icon: Target, size: 16, className: clsx('shrink-0', goal.status === 'active' ? 'text-accent' : 'text-text-faint') }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "truncate text-sm text-text", children: t(`goal.status.${goal.status}`) }), _jsx(Tooltip, { label: goal.lastCheck === undefined ? (goal.objective) : (_jsxs(_Fragment, { children: [goal.objective, _jsx("br", {}), t('goal.lastCheck', { check: goal.lastCheck })] })), children: _jsx("span", { className: "truncate text-xs tabular-nums text-text-faint", children: progress === null ? goal.objective : `${goal.objective} · ${progress}` }) })] }), view.actions.map((action) => (_jsx(Button, { size: "sm", disabled: changing, onClick: () => act(action), children: t(`goal.${action}`) }, action)))] }));
+}
+/* The same in a chat node's header while a goal works, read from the status every client gets, so a node nobody opened says it too. */
+export function GoalPill({ chatId }) {
+    const { t } = useTranslation('agent-chat');
+    const { keyOf } = useChatScope();
+    const goal = useChats((s) => s.statusByKey[keyOf(chatId)]?.info.goal);
+    if (goal?.status !== 'active') {
+        return null;
+    }
+    return (_jsx(Tooltip, { label: `${t('goal.status.active')}: ${goal.objective}`, children: _jsx(Pill, { tone: "accent", icon: _jsx(Icon, { icon: Target, size: 12 }), children: t('goal.pill') }) }));
+}

package/dist/chat/ui/LimitState.js

@@ -10,7 +10,7 @@ import { useFormatLocale } from '@adecore/ui/format';
 import { Switch, Button, Icon, Pill, Tooltip, useNow } from '@adecore/ui';
 import { useUsageLimits } from '../../usage/limits.js';
 import { useChats } from '../../state/chats.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatActions } from '../actions.js';
 import { useUsageStore } from '../../state/usage.js';
@@ -39,10 +39,11 @@ function readUnreadAccounts(scope) {
  * switch off it stands off and says where that switch is.
  */
 function ResumeAtResetToggle({ chatId, info }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const actions = useChatActions();
-    const machineAllows = chatHost().useResumeAtReset(id);
+    const machineAllows = host.useResumeAtReset(id);
     const set = (on) => {
         void actions.configure(chatId, { resumeAtReset: on }).catch(() => undefined);
     };
@@ -54,6 +55,7 @@ function ResumeAtResetToggle({ chatId, info }) {
  * conversation takes it over; any other goes on in a fork, which then opens the way a fork does.
  */
 function ContinueOn({ chatId, info, choice }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
     const actions = useChatActions();
@@ -74,7 +76,7 @@ function ContinueOn({ chatId, info, choice }) {
         setBusy(true);
         actions
             .continueOn(chatId, target.id)
-            .catch((e) => chatHost().notify({
+            .catch((e) => host.notify({
             kind: 'error',
             title: t('limit.continueFailed', { account: name }),
             description: e instanceof Error ? e.message : String(e)

package/dist/chat/ui/Markdown.d.ts

@@ -14,10 +14,11 @@ export declare const MessageMarkdown: import("react").MemoExoticComponent<({ tex
     mentions?: string[];
     skills?: string[];
 }) => import("react").JSX.Element>;
-export declare const Markdown: import("react").MemoExoticComponent<({ text, breaks, fileLinks, rehypePlugins, componentOverrides }: {
+export declare const Markdown: import("react").MemoExoticComponent<({ text, breaks, fileLinks, muted, rehypePlugins, componentOverrides }: {
     text: string;
     breaks?: boolean;
     fileLinks?: boolean;
+    muted?: boolean;
     rehypePlugins?: Options['rehypePlugins'];
     componentOverrides?: Components;
 }) => import("react").JSX.Element>;

package/dist/chat/ui/Markdown.js

@@ -7,16 +7,29 @@ import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import { CHIP_IN_MESSAGE, MENTION_TONE, SKILL_TONE } from './chips.js';
 import { CodeBlock } from './CodeBlock.js';
+import { MermaidBlock } from './MermaidBlock.js';
 import { CodeStreamingContext } from './code-streaming.js';
 import { splitMarkdownBlocks } from './markdown-blocks.js';
 import { rehypeChips } from './rehype-chips.js';
 import { rehypeFadeWords } from './rehype-fade.js';
 import { remarkHtmlAsText } from './remark-html-as-text.js';
-import { chatHost } from '../../host.js';
-import { openFileLink, useFileLinkCwd, useFileLinkScopeId, useFileLinkTarget } from './file-links.js';
-import { FileIcon, Icon } from '@adecore/ui';
+import { useChatHost } from '../../host.js';
+import { useFileLinkCwd, useFileLinkScopeId, useFileLinkTarget, useOpenFileLink } from './file-links.js';
+import { ErrorBoundary, FileIcon, Icon } from '@adecore/ui';
+import { useTranslation } from 'react-i18next';
 const ShellCodeBlockReplyContext = createContext(null);
 const BlockCodeContext = createContext(false);
+/* The command a shell fence holds, read from the fence as written, so it keeps the indentation and line endings it has. */
+function shellFence(source) {
+    const opening = /^ {0,3}(`{3,}|~{3,})[ \t]*(sh|bash|zsh)[ \t]*\r?\n/.exec(source);
+    if (opening === null) {
+        return null;
+    }
+    const body = source.slice(opening[0].length);
+    const closing = /(?:^|\r?\n) {0,3}(`{3,}|~{3,})[ \t]*$/.exec(body);
+    const closed = closing !== null && closing[1][0] === opening[1][0] && closing[1].length >= opening[1].length;
+    return { language: opening[2], code: closed ? body.slice(0, closing.index) : body, closed };
+}
 /* Only root children qualify; Markdown's parser decides whether a fence belongs to a list or quote. */
 function remarkShellCodeBlocks() {
     return (tree, file) => {
@@ -29,26 +42,30 @@ function remarkShellCodeBlocks() {
             if (start === undefined || end === undefined) {
                 continue;
             }
-            const raw = String(file.value).slice(start, end);
-            const opening = /^ {0,3}(`{3,}|~{3,})[ \t]*(sh|bash|zsh)[ \t]*\r?\n/.exec(raw);
-            if (opening === null) {
+            const shell = shellFence(String(file.value).slice(start, end));
+            if (shell === null) {
                 continue;
             }
-            const body = raw.slice(opening[0].length);
-            const closing = /(?:^|\r?\n) {0,3}(`{3,}|~{3,})[ \t]*$/.exec(body);
-            const closed = closing !== null && closing[1][0] === opening[1][0] && closing[1].length >= opening[1].length;
             node.data = {
                 ...node.data,
                 hProperties: {
                     ...node.data?.hProperties,
-                    'data-shell-language': opening[2],
-                    'data-shell-code': closed ? body.slice(0, closing.index) : body,
-                    'data-shell-closed': closed
+                    'data-shell-language': shell.language,
+                    'data-shell-code': shell.code,
+                    'data-shell-closed': shell.closed
                 }
             };
         }
     };
 }
+/* What the host adds to a shell fence of a main reply, which is complete once the fence closed and the reply stopped. */
+function shellCodeBlockActions(reply, shell, render) {
+    if (reply === null || shell === null) {
+        return undefined;
+    }
+    const { scopeId, chatId, itemId } = reply;
+    return render?.({ scopeId, chatId, itemId, language: shell.language, code: shell.code, complete: !reply.streaming && shell.closed });
+}
 function languageOf(className) {
     return /language-([\w-]+)/.exec(className ?? '')?.[1] ?? 'text';
 }
@@ -60,6 +77,7 @@ const INLINE_CODE = 'rounded-sm bg-surface-sunken px-1 py-px font-mono text-code
 function FileLink({ target, className, children }) {
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
+    const openFileLink = useOpenFileLink();
     return (_jsx("button", { type: "button", className: clsx('cursor-pointer select-text', className), "data-file-path": target.path, "data-file-line": target.line, "data-file-column": target.column, "data-file-end-line": target.endLine, "data-file-directory": target.directory, "data-file-cwd": cwd ?? '', "data-file-scope-id": scopeId ?? '', onClick: () => openFileLink(cwd, target, scopeId), children: children }));
 }
 /* Inline code, which is a file reference often enough that it is worth asking every time. */
@@ -94,11 +112,18 @@ function MarkdownLink({ href, children }) {
 function ExternalLink({ href, children }) {
     return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
 }
+/* A ```mermaid fence, which draws what it says. */
+function Diagram({ code }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsx(ErrorBoundary, { label: t('code.mermaid.crashed'), resetKeys: [code], compact: true, className: "rounded-lg border border-border", children: _jsx(MermaidBlock, { code: code }) }));
+}
 function MarkdownCode({ className, children, plain = false }) {
     const block = useContext(BlockCodeContext);
     const text = String(children ?? '');
     if (block) {
-        return _jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className) });
+        const lang = languageOf(className);
+        const code = text.replace(/\n$/, '');
+        return lang === 'mermaid' ? _jsx(Diagram, { code: code }) : _jsx(CodeBlock, { code: code, lang: lang });
     }
     return plain ? _jsx("code", { className: INLINE_CODE, children: text }) : _jsx(InlineCode, { text: text });
 }
@@ -145,22 +170,19 @@ const replyComponents = {
 function ReplyCode({ className, children, node }) {
     const reply = useContext(ShellCodeBlockReplyContext);
     const block = useContext(BlockCodeContext);
+    const { renderShellCodeBlock } = useChatHost();
     const properties = node?.properties;
     const language = properties?.['data-shell-language'];
     const code = properties?.['data-shell-code'];
-    const context = reply !== null && (language === 'sh' || language === 'bash' || language === 'zsh') && typeof code === 'string'
-        ? {
-            scopeId: reply.scopeId,
-            chatId: reply.chatId,
-            itemId: reply.itemId,
-            language,
-            code,
-            complete: !reply.streaming && properties?.['data-shell-closed'] === true
-        }
+    const shell = (language === 'sh' || language === 'bash' || language === 'zsh') && typeof code === 'string'
+        ? { language, code, closed: properties?.['data-shell-closed'] === true }
         : null;
     const text = String(children ?? '');
+    if (block && languageOf(className) === 'mermaid') {
+        return _jsx(Diagram, { code: text.replace(/\n$/, '') });
+    }
     if (block) {
-        return (_jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className), actions: context !== null ? chatHost().renderShellCodeBlock?.(context) : undefined }));
+        return _jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className), actions: shellCodeBlockActions(reply, shell, renderShellCodeBlock) });
     }
     return _jsx(InlineCode, { text: text });
 }
@@ -192,14 +214,28 @@ const ReplyBlock = memo(function ReplyBlock({ text, fade, open, reply }) {
     return (_jsx(CodeStreamingContext.Provider, { value: open, children: _jsx(ShellCodeBlockReplyContext.Provider, { value: reply ?? null, children: _jsx(ReactMarkdown, { remarkPlugins: REPLY_PLUGINS, rehypePlugins: fade ? FADE_PLUGINS : NO_PLUGINS, components: replyComponents, children: text }) }) }));
 });
 /*
- * A reply in a chat thread, parsed a block at a time so a delta only parses the block that grows.
- * While it streams every new word fades in, and a fence that has not closed yet is highlighted a
- * line at a time as it grows. `arriving` fades in each block as it is added instead, for a reply
- * that is shown a block at a time.
+ * A code fence at the top level of a reply, drawn as markdown draws it but without parsing, so a word
+ * added to a long fence costs no more than one added to a short one. It is the same tree whether the
+ * fence is open or closed, so closing it keeps the lines its code block already has.
+ */
+const ReplyFence = memo(function ReplyFence({ info, body, source, open, reply }) {
+    const { renderShellCodeBlock } = useChatHost();
+    // The class markdown gives the code, read back the way a parsed fence's is.
+    const lang = languageOf(`language-${info.split(/[ \t]/, 1)[0]}`);
+    const shell = reply === undefined ? null : shellFence(source);
+    return (_jsx(CodeStreamingContext.Provider, { value: open, children: lang === 'mermaid' ? (_jsx(Diagram, { code: body })) : (_jsx(CodeBlock, { code: body, lang: lang, actions: shellCodeBlockActions(reply ?? null, shell, renderShellCodeBlock) })) }));
+});
+/*
+ * A reply in a chat thread, parsed a block at a time so a delta only parses the block that grows,
+ * and a code fence at the top level not at all. While it streams every new word fades in, and a fence
+ * that has not closed yet is highlighted a line at a time as it grows. `arriving` fades in each block
+ * as it is added instead, for a reply that is shown a block at a time.
  */
 export const ReplyMarkdown = memo(function ReplyMarkdown({ text, streaming, arriving = false, reply }) {
     const blocks = useMemo(() => splitMarkdownBlocks(text), [text]);
-    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", "data-arriving": arriving || undefined, children: blocks.map((block, index) => (_jsx(ReplyBlock, { text: block.text, fade: streaming, open: streaming && block.openFence, reply: reply }, index))) }));
+    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", "data-arriving": arriving || undefined, children: blocks.map((block, index) => 
+        // Blocks only ever grow at the end, so the place of a block is a stable key.
+        block.fence !== undefined ? (_jsx(ReplyFence, { info: block.fence.info, body: block.fence.body, source: block.fence.source, open: streaming && !block.fence.closed, reply: reply }, index)) : (_jsx(ReplyBlock, { text: block.text, fade: streaming, open: streaming && block.openFence, reply: reply }, index))) }));
 });
 /*
  * A message a person sent. Enter meant a line break, a tag typed without backticks stays the text
@@ -209,8 +245,11 @@ export const MessageMarkdown = memo(function MessageMarkdown({ text, mentions, s
     const rehypePlugins = useMemo(() => [[rehypeChips, { mentions, skills }]], [mentions, skills]);
     return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", children: _jsx(ReactMarkdown, { remarkPlugins: MESSAGE_PLUGINS, rehypePlugins: rehypePlugins, components: messageComponents, children: text }) }));
 });
-/* `breaks` is for person-authored notes; applying it to CLI markdown would change its layout. */
-export const Markdown = memo(function Markdown({ text, breaks = false, fileLinks = true, rehypePlugins, componentOverrides }) {
+/*
+ * `breaks` is for person-authored notes; applying it to CLI markdown would change its layout. `muted`
+ * sets the text a step back, for what stands beside an answer rather than being one.
+ */
+export const Markdown = memo(function Markdown({ text, breaks = false, fileLinks = true, muted = false, rehypePlugins, componentOverrides }) {
     const renderComponents = useMemo(() => ({ ...(fileLinks ? components : plainComponents), ...componentOverrides }), [fileLinks, componentOverrides]);
-    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", children: _jsx(ReactMarkdown, { remarkPlugins: breaks ? PLUGINS_WITH_BREAKS : PLUGINS, rehypePlugins: rehypePlugins, components: renderComponents, children: text }) }));
+    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", "data-muted": muted || undefined, children: _jsx(ReactMarkdown, { remarkPlugins: breaks ? PLUGINS_WITH_BREAKS : PLUGINS, rehypePlugins: rehypePlugins, components: renderComponents, children: text }) }));
 });

package/dist/chat/ui/MermaidBlock.d.ts

@@ -0,0 +1,3 @@
+export declare function MermaidBlock({ code }: {
+    code: string;
+}): import("react").JSX.Element;

package/dist/chat/ui/MermaidBlock.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useId, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Code, Workflow } from 'lucide-react';
+import { IconButton } from '@adecore/ui';
+import { useChatHost } from '../../host.js';
+import { CodeBlock } from './CodeBlock.js';
+import { CodeStreamingContext } from './code-streaming.js';
+import { MERMAID_TOKENS, mermaidConfig, sizedSvg, svgDataUrl } from './mermaid.js';
+// Mermaid keeps one configuration for the page, so one diagram is drawn at a time with its own.
+let queue = Promise.resolve();
+let probeCanvas = null;
+/* A token as an opaque `#rrggbb` over `ground`, which is what Mermaid's color math reads. */
+function resolveColor(element, token, ground) {
+    probeCanvas ??= document.createElement('canvas');
+    probeCanvas.width = 1;
+    probeCanvas.height = 1;
+    const context = probeCanvas.getContext('2d', { willReadFrequently: true });
+    const value = getComputedStyle(element).getPropertyValue(token).trim();
+    if (context === null || value === '') {
+        return ground;
+    }
+    context.fillStyle = ground;
+    context.fillRect(0, 0, 1, 1);
+    context.fillStyle = value;
+    context.fillRect(0, 0, 1, 1);
+    const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
+    return `#${[red, green, blue].map((channel) => channel.toString(16).padStart(2, '0')).join('')}`;
+}
+function themeColors(element) {
+    const ground = resolveColor(element, MERMAID_TOKENS.ground, '#808080');
+    const entries = Object.entries(MERMAID_TOKENS).map(([name, token]) => [name, name === 'ground' ? ground : resolveColor(element, token, ground)]);
+    return Object.fromEntries(entries);
+}
+async function drawDiagram(id, source, element, dark) {
+    const { default: mermaid } = await import('mermaid');
+    const style = getComputedStyle(element);
+    mermaid.initialize(mermaidConfig(themeColors(element), dark, { family: style.fontFamily, size: style.fontSize }));
+    const { svg } = await mermaid.render(id, source);
+    return sizedSvg(svg);
+}
+/*
+ * A ```mermaid fence, drawn as the diagram once the fence is closed. Mermaid is large, so it loads on
+ * the first diagram of the page. While the fence grows, and when the text is no diagram Mermaid can
+ * draw, it is the code block it would otherwise be.
+ */
+export function MermaidBlock({ code }) {
+    const host = useChatHost();
+    const { t } = useTranslation('agent-chat');
+    const streaming = useContext(CodeStreamingContext);
+    const dark = host.code.useMode() === 'dark';
+    const id = `mermaid-${useId().replace(/[^\w-]/g, '')}`;
+    const frame = useRef(null);
+    const [source, setSource] = useState(false);
+    const [drawing, setDrawing] = useState({ state: 'drawing' });
+    useEffect(() => {
+        const element = frame.current;
+        if (streaming || element === null) {
+            return;
+        }
+        let cancelled = false;
+        setDrawing({ state: 'drawing' });
+        const drawn = queue.then(() => (cancelled ? null : drawDiagram(id, code, element, dark)));
+        queue = drawn.catch(() => undefined);
+        drawn.then((image) => !cancelled && setDrawing(image === null ? { state: 'failed' } : { state: 'drawn', image }), () => !cancelled && setDrawing({ state: 'failed' }));
+        return () => {
+            cancelled = true;
+        };
+    }, [code, dark, id, streaming]);
+    const showsDiagram = !streaming && !source && drawing.state !== 'failed';
+    const toggle = streaming || drawing.state === 'failed' ? undefined : (_jsx(IconButton, { icon: source ? Workflow : Code, size: "sm", label: source ? t('code.mermaid.showDiagram') : t('code.mermaid.showSource'), onClick: () => setSource((shown) => !shown) }));
+    return (_jsxs("div", { ref: frame, children: [_jsx(CodeBlock, { code: code, lang: "mermaid", actions: toggle, view: showsDiagram ? (_jsx("div", { className: "overflow-x-auto p-3", "aria-busy": drawing.state === 'drawing' || undefined, children: drawing.state === 'drawn' && (_jsx("img", { src: svgDataUrl(drawing.image.svg), width: drawing.image.width, height: drawing.image.height, alt: t('code.mermaid.diagram'), className: "m-0 max-w-none", draggable: false })) })) : undefined }), drawing.state === 'failed' && _jsx("p", { className: "m-0 mt-1 text-xs text-text-faint", children: t('code.mermaid.failed') })] }));
+}

package/dist/chat/ui/MessageActions.js

@@ -6,30 +6,35 @@ import { Bookmark, Check, Copy, GitFork } from 'lucide-react';
 import { placeBookmark } from '../bookmarks.js';
 import { forkRefusal } from '../logic/fork.js';
 import { markdownOf, messageTextOf } from '../logic/timeline-copy.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow, useChats } from '../../state/chats.js';
 import { ButtonGroup, copyText, IconButton, Tooltip } from '@adecore/ui';
 import { formatClock, formatDateTime, useFormatLocale } from '@adecore/ui/format';
+import { TIMESTAMP_FORMAT } from './timestamp-format.js';
 const COPIED_MS = 1500;
-const TIMESTAMP_FORMAT = { dateStyle: 'full', timeStyle: 'medium' };
 /* Hidden actions keep their height, so hovering never forces the virtualizer to remeasure. */
 export function MessageActions({ chatId, row }) {
     const { t } = useTranslation('agent-chat');
     useFormatLocale();
     const scope = useChatScope();
-    const { fork } = chatHost();
+    const host = useChatHost();
+    const { fork } = host;
     const turnId = row.item.turnId;
-    const bookmark = useChatRow(chatId, (chat) => chat?.bookmarks?.find((candidate) => candidate.itemId === row.id) ?? null);
-    const canFork = useChatRow(chatId, (chat) => turnId !== null && forkRefusal(chat?.info ?? null, chat?.structure[turnId]) === null);
+    // Every selector runs on every streamed word of the thread, so each only looks a field up; the work happens in render.
+    const bookmarks = useChatRow(chatId, (chat) => chat?.bookmarks);
+    const info = useChatRow(chatId, (chat) => chat?.info ?? null);
+    const turn = useChatRow(chatId, (chat) => (turnId === null ? undefined : chat?.structure[turnId]));
     const streaming = useChatRow(chatId, (chat) => {
         const item = chat?.items[row.id];
         return item?.kind === 'assistant' && item.streaming;
     });
     const hasText = useChatRow(chatId, (chat) => {
         const item = chat?.items[row.id];
-        return (item?.kind === 'user' || item?.kind === 'assistant') && item.text.trim() !== '';
+        return (item?.kind === 'user' || item?.kind === 'assistant') && /\S/.test(item.text);
     });
+    const bookmarked = bookmarks?.some((candidate) => candidate.itemId === row.id) === true;
+    const canFork = turnId !== null && forkRefusal(info, turn) === null;
     const [copied, setCopied] = useState(false);
     useEffect(() => {
         if (!copied) {
@@ -48,5 +53,5 @@ export function MessageActions({ chatId, row }) {
             setCopied(true);
         }
     };
-    return (_jsxs("div", { role: "toolbar", "aria-label": t('timeline.actions.label'), className: clsx('flex h-7 items-center gap-2 opacity-0 transition-opacity group-has-focus-visible/message:opacity-100 group-hover/message:opacity-100', row.kind === 'user' && 'mt-1.5 justify-end'), children: [!streaming && (_jsxs(ButtonGroup, { render: _jsx("span", {}), children: [bookmark === null && (_jsx(IconButton, { icon: Bookmark, size: "sm", label: t('bookmarks.add'), onClick: () => void placeBookmark(scope, chatId, row.id) })), canFork && turnId !== null && fork !== null && (_jsx(IconButton, { icon: GitFork, size: "sm", label: t('timeline.menu.forkFromHere'), onClick: () => fork(chatId, turnId) })), hasText && (_jsx(IconButton, { icon: copied ? Check : Copy, size: "sm", label: copied ? t('timeline.actions.copied') : t('timeline.menu.copyMessage'), onClick: (e) => copy(e.shiftKey) }))] })), _jsx(Tooltip, { label: formatDateTime(row.item.createdAt, TIMESTAMP_FORMAT), children: _jsx("time", { dateTime: new Date(row.item.createdAt).toISOString(), className: clsx('shrink-0 text-xs text-text-faint tabular-nums select-none', row.kind === 'assistant' && 'order-first'), children: formatClock(row.item.createdAt) }) })] }));
+    return (_jsxs("div", { role: "toolbar", "aria-label": t('timeline.actions.label'), className: clsx('flex h-7 items-center gap-2 opacity-0 transition-opacity group-has-focus-visible/message:opacity-100 group-hover/message:opacity-100', row.kind === 'user' && 'mt-1.5 justify-end'), children: [!streaming && (_jsxs(ButtonGroup, { render: _jsx("span", {}), children: [!bookmarked && (_jsx(IconButton, { icon: Bookmark, size: "sm", label: t('bookmarks.add'), onClick: () => void placeBookmark(scope, host, chatId, row.id) })), canFork && turnId !== null && fork !== null && (_jsx(IconButton, { icon: GitFork, size: "sm", label: t('timeline.menu.forkFromHere'), onClick: () => fork(chatId, turnId) })), hasText && (_jsx(IconButton, { icon: copied ? Check : Copy, size: "sm", label: copied ? t('timeline.actions.copied') : t('timeline.menu.copyMessage'), onClick: (e) => copy(e.shiftKey) }))] })), _jsx(Tooltip, { label: formatDateTime(row.item.createdAt, TIMESTAMP_FORMAT), children: _jsx("time", { dateTime: new Date(row.item.createdAt).toISOString(), className: clsx('shrink-0 text-xs text-text-faint tabular-nums select-none', row.kind === 'assistant' && 'order-first'), children: formatClock(row.item.createdAt) }) })] }));
 }

package/dist/chat/ui/Pickers.js

@@ -6,12 +6,12 @@ import { AgentIcon } from '../../agents/AgentIcon.js';
 import { ProviderLogo } from '../../agents/ProviderLogo.js';
 import { agentChipOf, modelName } from '../../agents/model-name.js';
 import { modelRequirementOf } from '../../agents/model-requirement.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { ChatScopeContext } from '../../scope.js';
 import { useReportedModels } from '../../state/chats.js';
 import { pickerEntriesOf } from '../logic/picker-entries.js';
 import { forgetStashed, STASH_SHORTCUT, useStash } from '../stash.js';
-import { Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
+import { Icon, IconButton, Menu, Pill, Popover, Tooltip } from '@adecore/ui';
 const triggerClass = 'flex h-7 shrink-0 items-center gap-1 whitespace-nowrap rounded-md px-2 text-xs text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text';
 const chipClass = 'flex h-6 min-w-0 shrink items-center gap-1.5 whitespace-nowrap rounded-md bg-surface-hover px-2 text-xs text-text hover:bg-surface-active data-[popup-open]:bg-surface-active';
 /*
@@ -20,6 +20,7 @@ const chipClass = 'flex h-6 min-w-0 shrink items-center gap-1.5 whitespace-nowra
  * provider's model is also how a chat picks its provider; with one CLI the group headers drop.
  */
 export function ModelPicker({ providers, provider, selection, open, onOpenChange, onChange, kbd = '/model', side = 'top', trigger = 'plain', finalFocus, footer }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const [query, setQuery] = useState('');
     const [legacyOpen, setLegacyOpen] = useState(false);
@@ -33,7 +34,7 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
     const trimmed = query.trim().toLowerCase();
     const entries = useMemo(() => pickerEntriesOf(providers, trimmed, legacyOpen), [providers, trimmed, legacyOpen]);
     const scope = useContext(ChatScopeContext);
-    const machine = chatHost().useMachineLabel(scope?.id ?? '');
+    const machine = host.useMachineLabel(scope?.id ?? '');
     const reported = useReportedModels(provider);
     const requirementOf = (entry) => modelRequirementOf(entry.model, entry.provider, reported);
     // A CLI that is too old blocks all its models; one way to its settings under the group says it once.
@@ -93,11 +94,11 @@ export function ModelPicker({ providers, provider, selection, open, onOpenChange
                                 const next = entries[i + 1];
                                 const lastOfGroup = next === undefined || next.kind !== 'model' || next.provider.kind !== entry.provider.kind;
                                 const chosen = entry.provider.kind === provider && entry.model.slug === selection.model;
-                                return (_jsxs("div", { children: [first && (_jsxs(Menu.Label, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.provider.kind, size: 12 }), entry.provider.name] })), _jsxs("button", { role: "option", "aria-selected": chosen, "aria-disabled": requirement !== null || undefined, "data-active": i === index, className: `cursor-row flex w-full flex-col items-stretch gap-0.5 rounded-md px-2.5 py-1.5 text-left text-sm ${requirement === null ? 'text-text-muted' : 'text-text-faint'}`, onMouseEnter: () => setIndex(i), onClick: () => choose(entry), children: [_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx(Menu.Check, { kind: "radio", checked: chosen }), _jsx("span", { className: "min-w-0 truncate", children: entry.model.name }), entry.model.badge && (_jsx("span", { className: "rounded bg-accent-soft px-1 text-[11px] leading-5 font-medium uppercase text-accent", children: entry.model.badge })), _jsx("span", { className: "grow" }), entry.model.legacy && _jsx("span", { className: "text-xs text-text-faint", children: t('pickers.model.legacy') })] }), requirement !== null && (_jsx("span", { className: "pl-6 text-xs text-text-faint", children: machine === null
+                                return (_jsxs("div", { children: [first && (_jsxs(Menu.Label, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.provider.kind, size: 12 }), entry.provider.name] })), _jsxs("button", { role: "option", "aria-selected": chosen, "aria-disabled": requirement !== null || undefined, "data-active": i === index, className: `cursor-row flex w-full flex-col items-stretch gap-0.5 rounded-md px-2.5 py-1.5 text-left text-sm ${requirement === null ? 'text-text-muted' : 'text-text-faint'}`, onMouseEnter: () => setIndex(i), onClick: () => choose(entry), children: [_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx(Menu.Check, { kind: "radio", checked: chosen }), _jsx("span", { className: "min-w-0 truncate", children: entry.model.name }), entry.model.badge && (_jsx(Pill, { tone: "accent", shape: "tag", size: "sm", children: entry.model.badge.charAt(0).toLocaleUpperCase() + entry.model.badge.slice(1) })), _jsx("span", { className: "grow" }), entry.model.legacy && _jsx("span", { className: "text-xs text-text-faint", children: t('pickers.model.legacy') })] }), requirement !== null && (_jsx("span", { className: "pl-6 text-xs text-text-faint", children: machine === null
                                                         ? t('pickers.model.requiresHere', { cli: requirement.cli, version: requirement.minVersion })
                                                         : t('pickers.model.requires', { cli: requirement.cli, version: requirement.minVersion, machine }) }))] }), lastOfGroup && blockedKinds.has(entry.provider.kind) && (_jsx("button", { type: "button", className: "cursor-row flex w-full items-center rounded-md px-2.5 py-1.5 text-left text-xs text-text-muted", onClick: () => {
                                                 setOpen(false);
-                                                chatHost().openSettings('providers');
+                                                host.openSettings('providers');
                                             }, children: t('pickers.model.providerSettings') }))] }, `${entry.provider.kind}/${entry.model.slug}`));
                             })] }), footer !== undefined && _jsx("div", { className: "border-t border-border-soft px-3 py-2 text-xs text-text-faint", children: footer })] })] }));
 }

package/dist/chat/ui/PromptComposer.js

@@ -8,7 +8,7 @@ import { answerPrompt, isBlockingSubject, promptCreatedAt, promptIdOf } from '..
 import { useFocusAfterAnswer } from '../../prompts/logic/useFocusAfterAnswer.js';
 import { usePromptSession } from '../../prompts/logic/usePromptSession.js';
 import { PromptView } from '../../prompts/ui/PromptView.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatActions } from '../actions.js';
 import { Button, Icon } from '@adecore/ui';
@@ -19,10 +19,11 @@ function pickSubject(waiting, activeId) {
 export function PromptComposer({ chatId, pending, focused, onShowElsewhere, disabled, hasDraft, denyReason, onAllAnswered, hold, children }) {
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
+    const host = useChatHost();
     const actions = useChatActions();
     const elsewhere = onShowElsewhere !== undefined;
     // A card the app raises itself waits in the chat beside the CLI's own requests.
-    const extra = chatHost().prompts.useExtra(id, chatId);
+    const extra = host.prompts.useExtra(id, chatId);
     const subjects = useMemo(() => [
         ...pending.map((item) => ({ kind: 'chat', nodeId: chatId, item })),
         ...extra.map((prompt) => ({ kind: 'host', nodeId: chatId, prompt }))
@@ -58,7 +59,7 @@ export function PromptComposer({ chatId, pending, focused, onShowElsewhere, disa
     return (_jsxs("div", { ref: ref, onPointerDownCapture: session.onPointerDownCapture, onClickCapture: session.onClickCapture, children: [active && elsewhere && (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-3.5 py-3 text-left text-sm text-text-muted hover:text-text", onClick: onShowElsewhere, children: [_jsx(Icon, { icon: asksApproval ? Hand : MessageCircleQuestionMark, size: 16, className: "shrink-0 text-status-needs-you" }), _jsx("span", { className: "grow", children: t('composer.waitingBelow') }), _jsx(Icon, { icon: ArrowDown, size: 16, className: "shrink-0" })] })), active && !elsewhere && (_jsx("div", { hidden: !expanded, children: _jsx(PromptView, { subject: active, draft: session.draftOf(promptIdOf(active)), onDraft: (draft) => session.setDraft(promptIdOf(active), draft), onAction: (action) => {
                         refocus.hold();
                         void session
-                            .act(active, () => answerPrompt(active, action, actions))
+                            .act(active, () => answerPrompt(active, action, actions, host))
                             .then((result) => {
                             if (result === 'failed') {
                                 refocus.release();

package/dist/chat/ui/RowTime.d.ts

@@ -0,0 +1,3 @@
+export declare function RowTime({ at }: {
+    at: number;
+}): import("react").JSX.Element;

package/dist/chat/ui/RowTime.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@adecore/ui';
+import { formatClock, formatDateTime, useFormatLocale } from '@adecore/ui/format';
+import { TIMESTAMP_FORMAT } from './timestamp-format.js';
+/*
+ * The wall-clock time of a row at its right edge, shown only while an element marked `group/line`
+ * around it is hovered or has the keyboard focus. Hidden, it takes no room and is no tab stop.
+ */
+export function RowTime({ at }) {
+    useFormatLocale();
+    return (_jsx(Tooltip, { label: formatDateTime(at, TIMESTAMP_FORMAT), children: _jsx("time", { dateTime: new Date(at).toISOString(), className: "hidden shrink-0 text-xs text-text-faint tabular-nums select-none group-hover/line:inline group-focus-visible/line:inline group-has-focus-visible/line:inline", children: formatClock(at) }) }));
+}