@adecore/agents-react 0.31.12 → 0.33.0

package/src/chat/ui/diff/EditorEditDiff.tsx

@@ -1,16 +1,16 @@
 import { useReviewSettled } from './review-settle';
-import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getFiletypeFromFileName } from '@pierre/diffs';
 import type { EditorEngine } from '@adecore/editor';
 import { DiffView } from '@adecore/editor-react';
 import { diffDocument, patchOf, type DiffDocument } from '@adecore/merge';
-import { useChatHost } from '../../../host';
 import type { FileChange } from '../../logic/tools';
 import { useDiffSourceTokens } from '../use-diff-source-tokens';
 import { diffSourceBudget } from './diff-source-budget';
 import { DiffOmitted } from './DiffOmitted';
 import { canRenderEditorDiff, EDITOR_DIFF_LIMITS, EDITOR_DIFF_WORK } from './editor-edit-model';
+import { useHostCodeMode, useHostCodeThemes } from '../../../host-hooks';
 
 type EngineLoader = () => Promise<EditorEngine>;
 
@@ -34,11 +34,10 @@ function ReadyDiff({
     layout: 'unified' | 'split';
     maxHeight: number;
 }) {
-    const host = useChatHost();
     useReviewSettled();
     const { t } = useTranslation('agent-chat');
-    const mode = host.code.useMode();
-    const theme = host.code.useThemes()[mode];
+    const mode = useHostCodeMode();
+    const theme = useHostCodeThemes()[mode];
     const language = getFiletypeFromFileName(path);
     const tokens = useDiffSourceTokens(document, language, theme);
     return (
@@ -78,7 +77,7 @@ export function EditorDocumentDiff({
     maxHeight?: number;
 }) {
     const { t } = useTranslation('agent-chat');
-    const withinLimits = useMemo(() => canRenderEditorDiff(document), [document]);
+    const withinLimits = canRenderEditorDiff(document);
     const [loaded, setLoaded] = useState<{ load: EngineLoader; engine: EditorEngine | null }>();
     useEffect(() => {
         if (!withinLimits || engines.has(loadEngine)) {
@@ -132,13 +131,10 @@ export default function EditorEditDiff({
     fallback: ReactNode;
     maxHeight?: number;
 }) {
-    const document = useMemo(
-        () =>
-            sourceChecked || diffSourceBudget(change.before, change.after)
-                ? diffDocument(patchOf(change.before, change.after, 3, { maxWork: EDITOR_DIFF_WORK }), { old: change.before, new: change.after })
-                : undefined,
-        [change.before, change.after, sourceChecked]
-    );
+    const document =
+        sourceChecked || diffSourceBudget(change.before, change.after)
+            ? diffDocument(patchOf(change.before, change.after, 3, { maxWork: EDITOR_DIFF_WORK }), { old: change.before, new: change.after })
+            : undefined;
     if (document === undefined) {
         return <DiffOmitted path={change.path} />;
     }

package/src/chat/ui/diff/LegacyEditDiff.tsx

@@ -1,29 +1,24 @@
 import { LegacyDiffPool } from './LegacyDiffPool';
 import { useReviewSettled } from './review-settle';
-import { useMemo } from 'react';
 import { MultiFileDiff } from '@pierre/diffs/react';
-import { useChatHost } from '../../../host';
 import { useDiffTheme } from '../diff-theme';
 import type { FileChange } from '../../logic/tools';
+import { useHostCodeMode } from '../../../host-hooks';
 
 export default function LegacyEditDiff({ change, maxHeight }: { change: FileChange; maxHeight?: number }) {
-    const host = useChatHost();
     useReviewSettled();
-    const resolved = host.code.useMode();
+    const resolved = useHostCodeMode();
     const theme = useDiffTheme();
-    const oldFile = useMemo(() => ({ name: change.path, contents: change.before }), [change.path, change.before]);
-    const newFile = useMemo(() => ({ name: change.path, contents: change.after }), [change.path, change.after]);
-    const options = useMemo(
-        () => ({
-            diffStyle: 'unified' as const,
-            theme,
-            themeType: resolved,
-            disableFileHeader: true,
-            overflow: 'wrap' as const,
-            hunkSeparators: 'simple' as const
-        }),
-        [theme, resolved]
-    );
+    const oldFile = { name: change.path, contents: change.before };
+    const newFile = { name: change.path, contents: change.after };
+    const options = {
+        diffStyle: 'unified' as const,
+        theme,
+        themeType: resolved,
+        disableFileHeader: true,
+        overflow: 'wrap' as const,
+        hunkSeparators: 'simple' as const
+    };
     return (
         <div className="chat-diff select-text" style={maxHeight === undefined ? undefined : { maxHeight, overflow: 'auto' }}>
             <LegacyDiffPool>

package/src/chat/ui/diff/LegacyUnifiedDiff.tsx

@@ -1,13 +1,12 @@
 import { LegacyDiffPool } from './LegacyDiffPool';
 import { useReviewSettled } from './review-settle';
-import { useMemo } from 'react';
 import clsx from 'clsx';
 import { FileDiff, PatchDiff } from '@pierre/diffs/react';
 import type { ChatFileChange } from '@adecore/agent-contracts';
-import { useChatHost } from '../../../host';
 import { useDiffTheme } from '../diff-theme';
 import { fullFileDiff } from '../full-diff';
 import type { UnifiedDiffProps } from './diff-props';
+import { useHostCodeMode } from '../../../host-hooks';
 
 /*
  * A patch the CLI reported itself. The renderer needs a file header, which a CLI that only sends hunks
@@ -45,30 +44,23 @@ function lineClass(line: string): string {
 }
 
 export default function LegacyUnifiedDiff({ change, overflow = 'wrap', diffStyle = 'unified', fill = false, contents, maxHeight }: UnifiedDiffProps) {
-    const host = useChatHost();
     useReviewSettled();
-    const resolved = host.code.useMode();
+    const resolved = useHostCodeMode();
     const theme = useDiffTheme();
-    const patch = useMemo(() => asPatch(change), [change]);
+    const patch = asPatch(change);
     const oldText = contents?.old;
     const newText = contents?.new;
-    const full = useMemo(
-        () => (patch === null || oldText === undefined || newText === undefined ? null : fullFileDiff(patch, change.path, { old: oldText, new: newText })),
-        [patch, change.path, oldText, newText]
-    );
+    const full = patch === null || oldText === undefined || newText === undefined ? null : fullFileDiff(patch, change.path, { old: oldText, new: newText });
     const unfolds = full !== null;
-    const options = useMemo(
-        () => ({
-            theme,
-            themeType: resolved,
-            disableFileHeader: true,
-            diffStyle,
-            overflow,
-            hunkSeparators: unfolds ? ('line-info' as const) : ('simple' as const),
-            unsafeCSS: fill ? FILL_CSS : undefined
-        }),
-        [diffStyle, overflow, theme, resolved, fill, unfolds]
-    );
+    const options = {
+        theme,
+        themeType: resolved,
+        disableFileHeader: true,
+        diffStyle,
+        overflow,
+        hunkSeparators: unfolds ? ('line-info' as const) : ('simple' as const),
+        unsafeCSS: fill ? FILL_CSS : undefined
+    };
     if (patch === null) {
         return (
             <pre className="max-h-64 overflow-auto px-3 py-2 font-mono text-code select-text" style={fill ? undefined : { maxHeight }}>

package/src/chat/ui/diff/use-review-stack.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { planReview, type ReviewEntry, type ReviewSlot } from './review-plan';
 
 export interface ReviewStack {
@@ -10,7 +10,7 @@ export interface ReviewStack {
 
 export function useReviewStack(entries: readonly ReviewEntry[]): ReviewStack {
     const [promoted, setPromoted] = useState<string | null>(null);
-    const slots = useMemo(() => planReview(entries, promoted), [entries, promoted]);
+    const slots = planReview(entries, promoted);
     const selected = [...slots].filter(([, slot]) => slot === 'editor').map(([key]) => key);
     const [admitted, setAdmitted] = useState<string[]>(() => selected.slice(0, 1));
     const retained = admitted.filter((key) => selected.includes(key));
@@ -22,9 +22,9 @@ export function useReviewStack(entries: readonly ReviewEntry[]): ReviewStack {
     if ([...settled].some((key) => !selected.includes(key))) {
         setSettled(new Set([...settled].filter((key) => selected.includes(key))));
     }
-    const settle = useCallback((key: string) => {
+    const settle = (key: string) => {
         setSettled((previous) => (previous.has(key) ? previous : new Set([...previous, key])));
-    }, []);
+    };
     const allSettled = live.every((key) => settled.has(key));
     const next = selected.find((key) => !live.includes(key));
     useEffect(() => {

package/src/chat/ui/diff-theme.ts

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
 import { registerCustomTheme, type ThemesType } from '@pierre/diffs';
 import { useChatHost, type ChatHost } from '../../host';
+import { useHostCodeThemes } from '../../host-hooks';
 
 // The library's registry is global and refuses a name twice, so what is registered is kept by name.
 const registered = new Set<string>();
@@ -23,6 +23,6 @@ function registerThemes(custom: ChatHost['code']['custom']): void {
 export function useDiffTheme(): ThemesType {
     const { code } = useChatHost();
     registerThemes(code.custom);
-    const { light, dark } = code.useThemes();
-    return useMemo(() => ({ light, dark }), [light, dark]);
+    const { light, dark } = useHostCodeThemes();
+    return { light, dark };
 }

package/src/chat/ui/file-links.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext } from 'react';
 import { useChatHost, type FileRef } from '../../host';
 import { ChatScopeContext } from '../../scope';
 
@@ -22,7 +22,7 @@ export function useFileLinkTarget(text: string): FileRef | null {
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
     const { fileLinks } = useChatHost();
-    return useMemo(() => fileLinks?.target(text, cwd, scopeId) ?? null, [fileLinks, text, cwd, scopeId]);
+    return fileLinks?.target(text, cwd, scopeId) ?? null;
 }
 
 /* Follows a reference the way the app opens a file or a folder. */

package/src/chat/ui/intelligent-ui/UiReply.tsx

@@ -399,6 +399,8 @@ function UiBlockBody({
     /* Set for a finished reply the machine keeps no readings for, which nothing will ever look up. */
     unrecorded: boolean;
 }): ReactNode {
+    // The block's state changes in place and only its revision says so; compiled, the evaluation of the first revision would stay.
+    'use no memo';
     const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const key = JSON.stringify([context.scopeId, context.chatId, context.itemId, block.id]);

package/src/chat/ui/intelligent-ui/renderers/chart.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import type { TFunction } from 'i18next';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -439,7 +439,7 @@ function DrawnChart({
     const [measure, width] = useMeasuredWidth();
     const character = useChartCharacter();
     const [measureRows, rowsCut] = useTruncated<HTMLDivElement>(true);
-    const values = useMemo(() => uiChartValues(data), [data]);
+    const values = uiChartValues(data);
     const { kind } = chart;
     return (
         <figure className="chat-ui-flat flex flex-col gap-2.5 rounded-xl bg-ui-tile p-3.5">
@@ -473,7 +473,7 @@ function DrawnChart({
  */
 export function ChartRenderer({ node, context }: UiRendererProps<UiProps<'Chart'>>) {
     const { kind, data, unit } = node.props;
-    const chart = useMemo(() => (node.complete ? uiChartData(data, kind) : null), [node.complete, data, kind]);
+    const chart = node.complete ? uiChartData(data, kind) : null;
     if (!node.complete) {
         return <div aria-hidden className="rounded-xl bg-ui-tile" style={{ height: chartHeight(kind, data.length) }} />;
     }

package/src/chat/ui/intelligent-ui/renderers/content.tsx

@@ -12,6 +12,7 @@ import { ImageThumb } from '../../ImageView';
 import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text';
 import type { UiRendererProps } from '../render-context';
 import { useTruncated } from '../use-truncated';
+import { useHostAttachmentUrl } from '../../../../host-hooks';
 
 // The number of every source by its node id, which the list counts in its own order.
 const SourceNumbers = createContext<ReadonlyMap<string, number>>(new Map());
@@ -55,8 +56,7 @@ function AttachedImage({
     cell: boolean;
     unnamed: boolean;
 }) {
-    const host = useChatHost();
-    const source = host.attachments.useUrl(scopeId, chatId, attachmentId);
+    const source = useHostAttachmentUrl(scopeId, chatId, attachmentId);
     if (!cell) {
         return <ImageThumb source={source} alt={alt} className="max-h-70 max-w-full rounded-xl object-contain" />;
     }
@@ -117,12 +117,11 @@ const COMPARE_MAX_HEIGHT = 384;
  */
 export function CompareRenderer({ node, children, context }: UiRendererProps<UiProps<'Compare'>>) {
     const { t } = useTranslation('agent-chat');
-    const host = useChatHost();
     const { before, after } = node.props;
     const beforeLabel = node.props.beforeLabel || t('blocks.compare.before');
     const afterLabel = node.props.afterLabel || t('blocks.compare.after');
-    const first = host.attachments.useUrl(context.scopeId, context.chatId, before);
-    const second = host.attachments.useUrl(context.scopeId, context.chatId, after);
+    const first = useHostAttachmentUrl(context.scopeId, context.chatId, before);
+    const second = useHostAttachmentUrl(context.scopeId, context.chatId, after);
     const [split, setSplit] = useState(0.5);
     const [aspect, setAspect] = useState(COMPARE_ASPECT);
     const caption = uiNodeLabel(node);
@@ -205,7 +204,7 @@ export function ModelRenderer({ node, children, context }: UiRendererProps<UiPro
     const { t } = useTranslation('agent-chat');
     const host = useChatHost();
     const { attachment, alt } = node.props;
-    const source = host.attachments.useUrl(context.scopeId, context.chatId, attachment);
+    const source = useHostAttachmentUrl(context.scopeId, context.chatId, attachment);
     const caption = uiNodeLabel(node);
     const label = alt ?? (caption === '' ? t('blocks.model.label') : caption);
     const View = host.ModelView;

package/src/chat/ui/intelligent-ui/renderers/map-view.tsx

@@ -7,6 +7,7 @@ import { ButtonGroup, IconButton } from '@adecore/ui';
 import { useChatHost, type UiMapSource } from '../../../../host';
 import { watchTheme } from '../../theme-watch';
 import { baseMapStyle, boundsOf, localizedTextField, mapFitOptions, spreadOverlaps, type MapColors, type MapPoint } from './map-style';
+import { useHostCodeMode } from '../../../../host-hooks';
 
 /*
  * What the view is drawing: `base` by the source's choice, `offline` and `unavailable` as a fallback from tiles that
@@ -63,7 +64,7 @@ function readColors(element: HTMLElement): MapColors {
 export function MapView({ markers, source, selected, onPick, onStatus }: MapViewProps) {
     const { t, i18n } = useTranslation('agent-chat');
     const host = useChatHost();
-    const mode = host.code.useMode();
+    const mode = useHostCodeMode();
     const workerUrl = host.maps?.workerUrl;
     const element = useRef<HTMLDivElement>(null);
     const [map, setMap] = useState<MapLibreMap | null>(null);

package/src/chat/ui/intelligent-ui/renderers/map.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import type { UiProps, UiViewNode } from '@adecore/intelligent-ui';
 import { Button, LazyBoundary, Spinner } from '@adecore/ui';
 import { useChatHost, type UiMapSource } from '../../../../host';
+import { useHostMapSource } from '../../../../host-hooks';
 import { lazyNamed } from '../../../../lazy';
 import { DiffFallbackBoundary } from '../../diff/DiffFallbackBoundary';
 import { uiChildrenOf, uiNodeLabel } from '../node-text';
@@ -170,7 +171,7 @@ function MapFrame({ markers, source, selected, onPick }: FrameProps) {
 
 /* Asks the host for its tiles in a component of its own, since a host that offers none has no hook to call. */
 function HostedFrame({ maps, scopeId, ...frame }: Omit<FrameProps, 'source'> & { maps: NonNullable<ReturnType<typeof useChatHost>['maps']>; scopeId: string }) {
-    return <MapFrame {...frame} source={maps.useSource(scopeId)} />;
+    return <MapFrame {...frame} source={useHostMapSource(maps, scopeId)} />;
 }
 
 /*

package/src/chat/ui/intelligent-ui/use-truncated.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 
 function cut(element: HTMLElement): boolean {
     return element.scrollWidth > element.clientWidth + 1;
@@ -11,23 +11,20 @@ function cut(element: HTMLElement): boolean {
  */
 export function useTruncated<T extends HTMLElement>(within = false): [(element: T | null) => (() => void) | undefined, boolean] {
     const [truncated, setTruncated] = useState(false);
-    const measure = useCallback(
-        (element: T | null) => {
-            if (element === null || typeof ResizeObserver === 'undefined') {
-                return undefined;
-            }
-            const check = () => setTruncated(within ? [...element.querySelectorAll<HTMLElement>('.truncate')].some(cut) : cut(element));
-            check();
-            const resize = new ResizeObserver(check);
-            resize.observe(element);
-            const text = new MutationObserver(check);
-            text.observe(element, { characterData: true, childList: true, subtree: true });
-            return () => {
-                resize.disconnect();
-                text.disconnect();
-            };
-        },
-        [within]
-    );
+    const measure = (element: T | null) => {
+        if (element === null || typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        const check = () => setTruncated(within ? [...element.querySelectorAll<HTMLElement>('.truncate')].some(cut) : cut(element));
+        check();
+        const resize = new ResizeObserver(check);
+        resize.observe(element);
+        const text = new MutationObserver(check);
+        text.observe(element, { characterData: true, childList: true, subtree: true });
+        return () => {
+            resize.disconnect();
+            text.disconnect();
+        };
+    };
     return [measure, truncated];
 }

package/src/chat/ui/intelligent-ui/use-ui-links.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { ChatUiLinkReading, ChatUiQueryState } from '@adecore/agent-contracts';
 import { uiLinkTargets, type UiLinkTarget } from '@adecore/intelligent-ui/links';
 import { uiInputValues, UI_HOST_LIMITS, type UiBlock, UiState } from '@adecore/intelligent-ui';
@@ -40,7 +40,7 @@ export function useUiLinks(
     const signature = JSON.stringify(targets);
     const input = JSON.stringify(values);
     const tickets = JSON.stringify(reads);
-    const defaultInput = useMemo(() => JSON.stringify(uiInputValues(block, new UiState(block))), [block]);
+    const defaultInput = JSON.stringify(uiInputValues(block, new UiState(block)));
     const link = host?.link;
     useEffect(() => {
         asked.current.clear();
@@ -134,7 +134,7 @@ export function useUiLinks(
             });
     };
     const hostOpenUrl = host?.openUrl;
-    const openUrl = useCallback((url: string) => hostOpenUrl?.(context.scopeId, url), [hostOpenUrl, context.scopeId]);
+    const openUrl = (url: string) => hostOpenUrl?.(context.scopeId, url);
     return {
         link: link ? resolution : undefined,
         openLink: link && host?.openLink ? open : undefined,

package/src/chat/ui/mermaid.ts

@@ -1,116 +1,72 @@
-import type { MermaidConfig } from 'mermaid';
+import type { RenderOptions } from 'pele';
 
-/* The colors of a diagram, each a token of the theme resolved to an opaque color over the frame it is drawn in. */
-export interface MermaidColors {
-    ground: string;
-    node: string;
-    nodeBorder: string;
-    text: string;
-    line: string;
-    cluster: string;
-    clusterBorder: string;
-    note: string;
-}
-
-/* The token each color reads. Borders carry an alpha, so they are resolved over the ground. */
-export const MERMAID_TOKENS: Readonly<Record<keyof MermaidColors, string>> = {
-    ground: '--chat-code-bg',
-    node: '--surface-raised',
-    nodeBorder: '--border-strong',
-    text: '--text',
-    line: '--text-muted',
-    cluster: '--surface',
-    clusterBorder: '--border',
-    note: '--accent-soft'
+/* The variable of Pele each token of the theme fills. Borders carry an alpha, so every color is resolved over the ground. */
+export const DIAGRAM_TOKENS: Readonly<Record<string, string>> = {
+    '--pele-bg': '--chat-code-bg',
+    '--pele-fg': '--text',
+    '--pele-muted': '--text-muted',
+    '--pele-line': '--text-muted',
+    '--pele-surface': '--surface-raised',
+    '--pele-surface-alt': '--surface',
+    '--pele-border': '--border-strong',
+    '--pele-accent': '--accent',
+    '--pele-critical': '--status-error',
+    '--pele-series-1': '--accent',
+    '--pele-series-2': '--chart-2',
+    '--pele-series-3': '--chart-3',
+    '--pele-series-4': '--chart-4',
+    '--pele-series-5': '--chart-5',
+    '--pele-series-6': '--chart-6'
 };
 
-// Mermaid's own list plus what keeps a diagram in the theme and out of HTML: a directive in the text cannot change these.
-const SECURE_KEYS = [
-    'secure',
-    'securityLevel',
-    'startOnLoad',
-    'maxTextSize',
-    'maxEdges',
-    'suppressErrorRendering',
-    'htmlLabels',
-    'theme',
-    'themeVariables',
-    'themeCSS',
-    'darkMode',
-    'fontFamily'
-];
+export const GROUND_TOKEN = DIAGRAM_TOKENS['--pele-bg']!;
+
+export interface DiagramFont {
+    family: string;
+    mono: string;
+    size: number;
+}
 
 /*
- * Strict: no HTML in labels, no click handlers, no links that run script. What comes out is drawn as an
- * image as well, which never runs script and loads nothing, whatever the text of the diagram says.
+ * At the size it was laid out at, since an image has no container to shrink to. No links and no images, and no
+ * math or icon resolver, which are the only markup Pele inserts unfiltered. What comes out is drawn as an image as
+ * well, which never runs script and loads nothing, whatever the text of the diagram says.
  */
-export function mermaidConfig(colors: MermaidColors, dark: boolean, font: { family: string; size: string }): MermaidConfig {
+export function renderOptions(font: DiagramFont, idPrefix: string): RenderOptions {
     return {
-        startOnLoad: false,
-        securityLevel: 'strict',
-        htmlLabels: false,
-        suppressErrorRendering: true,
-        secure: SECURE_KEYS,
-        theme: 'base',
-        darkMode: dark,
+        responsive: false,
+        idPrefix,
         fontFamily: font.family,
-        themeVariables: {
-            darkMode: dark,
-            fontFamily: font.family,
-            fontSize: font.size,
-            background: colors.ground,
-            primaryColor: colors.node,
-            primaryTextColor: colors.text,
-            primaryBorderColor: colors.nodeBorder,
-            secondaryColor: colors.note,
-            tertiaryColor: colors.cluster,
-            mainBkg: colors.node,
-            nodeBorder: colors.nodeBorder,
-            textColor: colors.text,
-            titleColor: colors.text,
-            lineColor: colors.line,
-            clusterBkg: colors.cluster,
-            clusterBorder: colors.clusterBorder,
-            edgeLabelBackground: colors.ground,
-            noteBkgColor: colors.note,
-            noteTextColor: colors.text,
-            noteBorderColor: colors.nodeBorder
-        }
+        fontFamilyMono: font.mono,
+        fontSize: font.size,
+        links: false,
+        images: false
     };
 }
 
-export interface SizedSvg {
-    svg: string;
-    width: number;
-    height: number;
-}
-
 const ROOT = /<svg\b[^>]*>/;
-const VIEW_BOX = /\sviewBox="([^"]*)"/;
-const SIZE_ATTRIBUTES = /\s(?:width|height|style)="[^"]*"/g;
+const STYLE = /\sstyle="/;
+
+function attributeText(value: string): string {
+    return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
 
 /*
- * The diagram at the size it was laid out at. Mermaid fits it to the width of its container instead,
- * which an image does not have, so the root takes the size its view box names. Null for anything
- * without one.
+ * The drawing with the colors set on its root. An image does not see the variables of the page, so they are
+ * written in, and a change of the theme only writes them again.
  */
-export function sizedSvg(svg: string): SizedSvg | null {
+export function themedSvg(svg: string, colors: Readonly<Record<string, string>>): string {
     const root = ROOT.exec(svg);
-    const viewBox = root === null ? null : VIEW_BOX.exec(root[0]);
-    if (root === null || viewBox === null) {
-        return null;
-    }
-    const [, , boxWidth, boxHeight] = viewBox[1]!
-        .trim()
-        .split(/[\s,]+/)
-        .map(Number);
-    if (!Number.isFinite(boxWidth) || !Number.isFinite(boxHeight) || boxWidth! <= 0 || boxHeight! <= 0) {
-        return null;
+    if (root === null) {
+        return svg;
     }
-    const width = Math.ceil(boxWidth!);
-    const height = Math.ceil(boxHeight!);
-    const tag = root[0].replace(SIZE_ATTRIBUTES, '').replace(/^<svg\b/, `<svg width="${width}" height="${height}"`);
-    return { svg: svg.slice(0, root.index) + tag + svg.slice(root.index + root[0].length), width, height };
+    const variables = attributeText(
+        Object.entries(colors)
+            .map(([name, value]) => `${name}:${value};`)
+            .join('')
+    );
+    const tag = STYLE.test(root[0]) ? root[0].replace(STYLE, (style) => style + variables) : root[0].replace(/^<svg\b/, `<svg style="${variables}"`);
+    return svg.slice(0, root.index) + tag + svg.slice(root.index + root[0].length);
 }
 
 export function svgDataUrl(svg: string): string {

package/src/chat/ui/rows/ForksRow.tsx

@@ -2,8 +2,8 @@ import { useTranslation } from 'react-i18next';
 import { ChevronRight, GitFork } from 'lucide-react';
 import { useForkIdsAfter } from '../../forks';
 import { ROW_GUTTER } from '../icons';
-import { useChatHost } from '../../../host';
 import { Icon, Menu } from '@adecore/ui';
+import { useHostChatPlace } from '../../../host-hooks';
 
 const LINE = '-mx-1 mb-0.5 flex h-7 items-center gap-2 rounded-md px-1 text-xs text-text-muted';
 const LINK = `${LINE} hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-hover data-[popup-open]:text-text`;
@@ -52,8 +52,7 @@ function ForksLabel({ label, link = true }: { label: string; link?: boolean }) {
 
 // A fork no longer in this project has nowhere to lead, so it only says it is there.
 function OneFork({ forkId, label }: { forkId: string; label: string }) {
-    const host = useChatHost();
-    const place = host.useChatPlace(forkId);
+    const place = useHostChatPlace(forkId);
     return (
         <div className="flex">
             {place.title === null ? (
@@ -70,9 +69,8 @@ function OneFork({ forkId, label }: { forkId: string; label: string }) {
 }
 
 function ForkItem({ forkId }: { forkId: string }) {
-    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const place = host.useChatPlace(forkId);
+    const place = useHostChatPlace(forkId);
     return (
         <Menu.Item disabled={place.title === null} onClick={place.go}>
             <Icon icon={GitFork} size={14} /> <span className="truncate">{place.title ?? t('fork.pill.label')}</span>

package/src/chat/ui/rows/GeneratedImageRow.tsx

@@ -16,6 +16,7 @@ import { useFileLinkCwd, useOpenFileLink } from '../file-links';
 import { ImageThumb } from '../ImageView';
 import { ROW_GUTTER } from '../icons';
 import { RunningFor, WorkRow } from './WorkRows';
+import { useHostAttachmentUrl } from '../../../host-hooks';
 
 const SAVED_FLASH_MS = 2000;
 
@@ -94,7 +95,7 @@ function ReadyImage({ chatId, attachment, prompt, transparent }: { chatId: strin
     const { t } = useTranslation('agent-chat');
     const { id: scopeId } = useChatScope();
     const { attachments } = useChatHost();
-    const source = attachments.useUrl(scopeId, chatId, attachment.id);
+    const source = useHostAttachmentUrl(scopeId, chatId, attachment.id);
     const savedKey = `${scopeId}\n${chatId}\n${attachment.id}`;
     const [lightbox, setLightbox] = useState(false);
     const [saving, setSaving] = useState(false);