@adecore/agents-react 0.23.1 → 0.24.0

package/src/chat/ui/ComposerInput.tsx

@@ -1,7 +1,7 @@
 import { useImperativeHandle, useLayoutEffect, useRef, useState, type Ref } from 'react';
 import { Compartment, EditorState, Prec, Transaction, type Extension } from '@codemirror/state';
 import { EditorView, placeholder as placeholderText } from '@codemirror/view';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { composerEditorExtensions, externalChange } from './composer/editor';
 import { insertAtSelection } from './composer/insert';
 
@@ -63,6 +63,7 @@ export function ComposerInput({
     aria = NO_ARIA,
     ...handlers
 }: ComposerInputProps) {
+    const { dictation } = useChatHost();
     const hostRef = useRef<HTMLDivElement>(null);
     const targetRef = useRef<HTMLDivElement>(null);
     const viewRef = useRef<EditorView | null>(null);
@@ -93,7 +94,7 @@ export function ComposerInput({
                 selection: { anchor: initial.length },
                 extensions: [
                     composerEditorExtensions(),
-                    chatHost().dictation.composer?.extensions ?? [],
+                    dictation.composer?.extensions ?? [],
                     compartments.attributes.of([]),
                     compartments.editable.of([]),
                     compartments.placeholder.of([]),
@@ -137,7 +138,7 @@ export function ComposerInput({
             view.destroy();
             viewRef.current = null;
         };
-    }, [compartments]);
+    }, [compartments, dictation.composer?.extensions]);
 
     useLayoutEffect(() => {
         viewRef.current?.dispatch({
@@ -192,7 +193,7 @@ export function ComposerInput({
         []
     );
 
-    const Dictation = chatHost().dictation.composer?.Control;
+    const Dictation = dictation.composer?.Control;
     return (
         <div ref={targetRef} className="min-w-0">
             <div ref={hostRef} className={className} />

package/src/chat/ui/EditDiff.tsx

@@ -5,7 +5,7 @@ import { diffSourceBudget, legacyDiffBudget } from './diff/diff-source-budget';
 import { DiffOmitted } from './diff/DiffOmitted';
 import { DiffUnavailable } from './diff/DiffUnavailable';
 import { DiffFallbackBoundary } from './diff/DiffFallbackBoundary';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 
 import type { FileChange } from '../logic/tools';
 
@@ -13,8 +13,9 @@ const LegacyEditDiff = lazyNamed(() => import('./diff/LegacyEditDiff'), 'default
 const EditorEditDiff = lazyNamed(() => import('./diff/EditorEditDiff'), 'default');
 
 export default function EditDiff({ change, allowEditor = true, maxHeight }: { change: FileChange; allowEditor?: boolean; maxHeight?: number }) {
+    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/src/chat/ui/GoalDock.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import clsx from 'clsx';
+import { Target } from 'lucide-react';
+import type { ChatGoal, ChatGoalAction, ChatInfo, ProviderCapabilities } from '@adecore/agent-contracts';
+import { Button, Icon, Pill, Tooltip } from '@adecore/ui';
+import { formatTokens, useFormatLocale } from '@adecore/ui/format';
+import { useChatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChats } from '../../state/chats';
+import { useChatActions } from '../actions';
+import { goalView } from '../logic/goal';
+
+/* 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: ChatGoal, t: TFunction<'agent-chat'>): string | null {
+    const parts: string[] = [];
+    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 }: { chatId: string; info: ChatInfo; goals: ProviderCapabilities['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: ChatGoalAction): void => {
+        if (!actions.goal) {
+            return;
+        }
+        setChanging(true);
+        actions
+            .goal(chatId, action)
+            .catch((e: unknown) => host.notify({ kind: 'error', title: t('goal.failed'), description: e instanceof Error ? e.message : String(e) }))
+            .finally(() => setChanging(false));
+    };
+    return (
+        <div className="flex items-center gap-2 border-b border-border px-3.5 py-2.5">
+            <Icon icon={Target} size={16} className={clsx('shrink-0', goal.status === 'active' ? 'text-accent' : 'text-text-faint')} />
+            <span className="flex min-w-0 grow flex-col">
+                <span className="truncate text-sm text-text">{t(`goal.status.${goal.status}`)}</span>
+                <Tooltip
+                    label={
+                        goal.lastCheck === undefined ? (
+                            goal.objective
+                        ) : (
+                            <>
+                                {goal.objective}
+                                <br />
+                                {t('goal.lastCheck', { check: goal.lastCheck })}
+                            </>
+                        )
+                    }
+                >
+                    <span className="truncate text-xs tabular-nums text-text-faint">
+                        {progress === null ? goal.objective : `${goal.objective} · ${progress}`}
+                    </span>
+                </Tooltip>
+            </span>
+            {view.actions.map((action) => (
+                <Button key={action} size="sm" disabled={changing} onClick={() => act(action)}>
+                    {t(`goal.${action}`)}
+                </Button>
+            ))}
+        </div>
+    );
+}
+
+/* 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 }: { chatId: string }) {
+    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 (
+        <Tooltip label={`${t('goal.status.active')}: ${goal.objective}`}>
+            <Pill tone="accent" icon={<Icon icon={Target} size={12} />}>
+                {t('goal.pill')}
+            </Pill>
+        </Tooltip>
+    );
+}

package/src/chat/ui/LimitState.tsx

@@ -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';
 import { useChats } from '../../state/chats';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { useChatScope, type ChatScope } from '../../scope';
 import { useChatActions } from '../actions';
 import { useUsageStore } from '../../state/usage';
@@ -43,10 +43,11 @@ function readUnreadAccounts(scope: ChatScope): void {
  * switch off it stands off and says where that switch is.
  */
 function ResumeAtResetToggle({ chatId, info }: { chatId: string; info: ChatInfo }) {
+    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: boolean): void => {
         void actions.configure(chatId, { resumeAtReset: on }).catch(() => undefined);
     };
@@ -66,6 +67,7 @@ function ResumeAtResetToggle({ chatId, info }: { chatId: string; info: ChatInfo
  * conversation takes it over; any other goes on in a fork, which then opens the way a fork does.
  */
 function ContinueOn({ chatId, info, choice }: { chatId: string; info: ChatInfo; choice: AccountChoice }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
     const actions = useChatActions();
@@ -89,7 +91,7 @@ function ContinueOn({ chatId, info, choice }: { chatId: string; info: ChatInfo;
         actions
             .continueOn(chatId, target.id)
             .catch((e: unknown) =>
-                chatHost().notify({
+                host.notify({
                     kind: 'error',
                     title: t('limit.continueFailed', { account: name }),
                     description: e instanceof Error ? e.message : String(e)

package/src/chat/ui/Markdown.tsx

@@ -6,17 +6,21 @@ import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import { CHIP_IN_MESSAGE, MENTION_TONE, SKILL_TONE } from './chips';
 import { CodeBlock } from './CodeBlock';
+import { MermaidBlock } from './MermaidBlock';
 import { CodeStreamingContext } from './code-streaming';
 import { splitMarkdownBlocks } from './markdown-blocks';
 import { rehypeChips, type ChipOptions } from './rehype-chips';
 import { rehypeFadeWords } from './rehype-fade';
 import { remarkHtmlAsText } from './remark-html-as-text';
-import { chatHost, type FileRef, type ShellCodeBlockContext } from '../../host';
-import { openFileLink, useFileLinkCwd, useFileLinkScopeId, useFileLinkTarget } from './file-links';
-import { FileIcon, Icon } from '@adecore/ui';
+import { useChatHost, type ChatHost, type FileRef, type ShellCodeBlockContext } from '../../host';
+import { useFileLinkCwd, useFileLinkScopeId, useFileLinkTarget, useOpenFileLink } from './file-links';
+import { ErrorBoundary, FileIcon, Icon } from '@adecore/ui';
+import { useTranslation } from 'react-i18next';
 
 type ShellCodeBlockReply = Pick<ShellCodeBlockContext, 'scopeId' | 'chatId' | 'itemId'> & { streaming: boolean };
 
+type ShellFence = Pick<ShellCodeBlockContext, 'language' | 'code'> & { closed: boolean };
+
 const ShellCodeBlockReplyContext = createContext<ShellCodeBlockReply | null>(null);
 const BlockCodeContext = createContext(false);
 
@@ -27,6 +31,18 @@ interface MarkdownNode {
     data?: { hProperties?: Record<string, unknown> };
 }
 
+/* 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: string): ShellFence | null {
+    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] as ShellFence['language'], 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: MarkdownNode, file: { value: unknown }) => {
@@ -39,27 +55,32 @@ 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: ShellCodeBlockReply | null, shell: ShellFence | null, render: ChatHost['renderShellCodeBlock']): ReactNode {
+    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: string | undefined): string {
     return /language-([\w-]+)/.exec(className ?? '')?.[1] ?? 'text';
 }
@@ -73,6 +94,7 @@ const INLINE_CODE = 'rounded-sm bg-surface-sunken px-1 py-px font-mono text-code
 function FileLink({ target, className, children }: { target: FileRef; className?: string; children: ReactNode }) {
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
+    const openFileLink = useOpenFileLink();
     return (
         // A button is not selectable on its own, and a thread is copied as often as it is clicked.
         <button
@@ -139,11 +161,23 @@ function ExternalLink({ href, children }: { href?: string; children?: ReactNode
     );
 }
 
+/* A ```mermaid fence, which draws what it says. */
+function Diagram({ code }: { code: string }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <ErrorBoundary label={t('code.mermaid.crashed')} resetKeys={[code]} compact className="rounded-lg border border-border">
+            <MermaidBlock code={code} />
+        </ErrorBoundary>
+    );
+}
+
 function MarkdownCode({ className, children, plain = false }: { className?: string; children?: ReactNode; plain?: boolean }) {
     const block = useContext(BlockCodeContext);
     const text = String(children ?? '');
     if (block) {
-        return <CodeBlock code={text.replace(/\n$/, '')} lang={languageOf(className)} />;
+        const lang = languageOf(className);
+        const code = text.replace(/\n$/, '');
+        return lang === 'mermaid' ? <Diagram code={code} /> : <CodeBlock code={code} lang={lang} />;
     }
     return plain ? <code className={INLINE_CODE}>{text}</code> : <InlineCode text={text} />;
 }
@@ -204,29 +238,20 @@ const replyComponents = {
 function ReplyCode({ className, children, node }: { className?: string; children?: ReactNode } & ExtraProps) {
     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: ShellCodeBlockContext | null =
-        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: ShellFence | null =
+        (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 <Diagram code={text.replace(/\n$/, '')} />;
+    }
     if (block) {
-        return (
-            <CodeBlock
-                code={text.replace(/\n$/, '')}
-                lang={languageOf(className)}
-                actions={context !== null ? chatHost().renderShellCodeBlock?.(context) : undefined}
-            />
-        );
+        return <CodeBlock code={text.replace(/\n$/, '')} lang={languageOf(className)} actions={shellCodeBlockActions(reply, shell, renderShellCodeBlock)} />;
     }
     return <InlineCode text={text} />;
 }
@@ -284,10 +309,43 @@ const ReplyBlock = memo(function ReplyBlock({ text, fade, open, reply }: { 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
+}: {
+    info: string;
+    body: string;
+    source: string;
+    open: boolean;
+    reply?: ShellCodeBlockReply;
+}) {
+    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 (
+        <CodeStreamingContext.Provider value={open}>
+            {lang === 'mermaid' ? (
+                <Diagram code={body} />
+            ) : (
+                <CodeBlock code={body} lang={lang} actions={shellCodeBlockActions(reply ?? null, shell, renderShellCodeBlock)} />
+            )}
+        </CodeStreamingContext.Provider>
+    );
+});
+
+/*
+ * 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,
@@ -303,10 +361,21 @@ export const ReplyMarkdown = memo(function ReplyMarkdown({
     const blocks = useMemo(() => splitMarkdownBlocks(text), [text]);
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm" data-arriving={arriving || undefined}>
-            {blocks.map((block, index) => (
+            {blocks.map((block, index) =>
                 // Blocks only ever grow at the end, so the place of a block is a stable key.
-                <ReplyBlock key={index} text={block.text} fade={streaming} open={streaming && block.openFence} reply={reply} />
-            ))}
+                block.fence !== undefined ? (
+                    <ReplyFence
+                        key={index}
+                        info={block.fence.info}
+                        body={block.fence.body}
+                        source={block.fence.source}
+                        open={streaming && !block.fence.closed}
+                        reply={reply}
+                    />
+                ) : (
+                    <ReplyBlock key={index} text={block.text} fade={streaming} open={streaming && block.openFence} reply={reply} />
+                )
+            )}
         </div>
     );
 });
@@ -326,23 +395,28 @@ export const MessageMarkdown = memo(function MessageMarkdown({ text, mentions, s
     );
 });
 
-/* `breaks` is for person-authored notes; applying it to CLI markdown would change its layout. */
+/*
+ * `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
 }: {
     text: string;
     breaks?: boolean;
     fileLinks?: boolean;
+    muted?: boolean;
     rehypePlugins?: Options['rehypePlugins'];
     componentOverrides?: Components;
 }) {
     const renderComponents = useMemo(() => ({ ...(fileLinks ? components : plainComponents), ...componentOverrides }), [fileLinks, componentOverrides]);
     return (
-        <div className="chat-markdown prose prose-sm max-w-none text-sm">
+        <div className="chat-markdown prose prose-sm max-w-none text-sm" data-muted={muted || undefined}>
             <ReactMarkdown remarkPlugins={breaks ? PLUGINS_WITH_BREAKS : PLUGINS} rehypePlugins={rehypePlugins} components={renderComponents}>
                 {text}
             </ReactMarkdown>

package/src/chat/ui/MermaidBlock.tsx

@@ -0,0 +1,119 @@
+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';
+import { CodeBlock } from './CodeBlock';
+import { CodeStreamingContext } from './code-streaming';
+import { MERMAID_TOKENS, mermaidConfig, sizedSvg, svgDataUrl, type MermaidColors, type SizedSvg } from './mermaid';
+
+type Drawing = { state: 'drawing' } | { state: 'drawn'; image: SizedSvg } | { state: 'failed' };
+
+// Mermaid keeps one configuration for the page, so one diagram is drawn at a time with its own.
+let queue: Promise<unknown> = Promise.resolve();
+
+let probeCanvas: HTMLCanvasElement | null = null;
+
+/* A token as an opaque `#rrggbb` over `ground`, which is what Mermaid's color math reads. */
+function resolveColor(element: HTMLElement, token: string, ground: string): string {
+    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: HTMLElement): MermaidColors {
+    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) as unknown as MermaidColors;
+}
+
+async function drawDiagram(id: string, source: string, element: HTMLElement, dark: boolean): Promise<SizedSvg | null> {
+    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 }: { code: string }) {
+    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<HTMLDivElement>(null);
+    const [source, setSource] = useState(false);
+    const [drawing, setDrawing] = useState<Drawing>({ 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 : (
+            <IconButton
+                icon={source ? Workflow : Code}
+                size="sm"
+                label={source ? t('code.mermaid.showDiagram') : t('code.mermaid.showSource')}
+                onClick={() => setSource((shown) => !shown)}
+            />
+        );
+    return (
+        // One tree in every state, so the code block keeps the lines it has when the fence closes.
+        <div ref={frame}>
+            <CodeBlock
+                code={code}
+                lang="mermaid"
+                actions={toggle}
+                view={
+                    showsDiagram ? (
+                        <div className="overflow-x-auto p-3" aria-busy={drawing.state === 'drawing' || undefined}>
+                            {drawing.state === 'drawn' && (
+                                <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}
+                                />
+                            )}
+                        </div>
+                    ) : undefined
+                }
+            />
+            {drawing.state === 'failed' && <p className="m-0 mt-1 text-xs text-text-faint">{t('code.mermaid.failed')}</p>}
+        </div>
+    );
+}

package/src/chat/ui/MessageActions.tsx

@@ -6,14 +6,14 @@ import { placeBookmark } from '../bookmarks';
 import { forkRefusal } from '../logic/fork';
 import type { TimelineRow } from '../logic/timeline';
 import { markdownOf, messageTextOf } from '../logic/timeline-copy';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatRow, useChats } from '../../state/chats';
 import { ButtonGroup, copyText, IconButton, Tooltip } from '@adecore/ui';
 import { formatClock, formatDateTime, useFormatLocale } from '@adecore/ui/format';
+import { TIMESTAMP_FORMAT } from './timestamp-format';
 
 const COPIED_MS = 1500;
-const TIMESTAMP_FORMAT: Intl.DateTimeFormatOptions = { dateStyle: 'full', timeStyle: 'medium' };
 
 type MessageRow = Extract<TimelineRow, { kind: 'user' | 'assistant' }>;
 
@@ -22,18 +22,23 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
     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(() => {
@@ -66,8 +71,8 @@ export function MessageActions({ chatId, row }: { chatId: string; row: MessageRo
         >
             {!streaming && (
                 <ButtonGroup render={<span />}>
-                    {bookmark === null && (
-                        <IconButton icon={Bookmark} size="sm" label={t('bookmarks.add')} onClick={() => void placeBookmark(scope, chatId, row.id)} />
+                    {!bookmarked && (
+                        <IconButton icon={Bookmark} size="sm" label={t('bookmarks.add')} onClick={() => void placeBookmark(scope, host, chatId, row.id)} />
                     )}
                     {canFork && turnId !== null && fork !== null && (
                         <IconButton icon={GitFork} size="sm" label={t('timeline.menu.forkFromHere')} onClick={() => fork(chatId, turnId)} />