@adecore/agents-react 0.26.3 → 0.27.1

package/dist/chat/ui/MermaidBlock.js

@@ -7,6 +7,7 @@ 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';
+import { watchTheme } from './theme-watch.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;
@@ -32,10 +33,13 @@ function themeColors(element) {
     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');
+function diagramLook(element) {
     const style = getComputedStyle(element);
-    mermaid.initialize(mermaidConfig(themeColors(element), dark, { family: style.fontFamily, size: style.fontSize }));
+    return { colors: themeColors(element), font: { family: style.fontFamily, size: style.fontSize } };
+}
+async function drawDiagram(id, source, look, dark) {
+    const { default: mermaid } = await import('mermaid');
+    mermaid.initialize(mermaidConfig(look.colors, dark, look.font));
     const { svg } = await mermaid.render(id, source);
     return sizedSvg(svg);
 }
@@ -53,20 +57,38 @@ export function MermaidBlock({ code }) {
     const frame = useRef(null);
     const [source, setSource] = useState(false);
     const [drawing, setDrawing] = useState({ state: 'drawing' });
+    // The look of the diagram on screen or on its way there, null before the first.
+    const drawnLook = useRef(null);
+    const [themeRevision, setThemeRevision] = useState(0);
+    // An app may change its colors without turning light or dark, which only the root of the page tells.
+    useEffect(() => {
+        const element = frame.current;
+        if (element === null) {
+            return;
+        }
+        return watchTheme(element.ownerDocument, () => {
+            if (drawnLook.current !== null && JSON.stringify(diagramLook(element)) !== drawnLook.current) {
+                setThemeRevision((revision) => revision + 1);
+            }
+        });
+    }, []);
     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)));
+        const look = diagramLook(element);
+        drawnLook.current = JSON.stringify(look);
+        // A diagram already drawn stays until the next one is there, so a change of the theme does not make it blink.
+        setDrawing((current) => (current.state === 'drawn' ? current : { state: 'drawing' }));
+        const drawn = queue.then(() => (cancelled ? null : drawDiagram(id, code, look, 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]);
+    }, [code, dark, id, streaming, themeRevision]);
     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/diff/syntax-runtime.d.ts

@@ -12,7 +12,7 @@ export interface DiffSyntaxRuntime {
 }
 export interface DiffSyntaxRuntimeOptions {
     workerFactory?: () => Worker;
-    themes: readonly ThemeRegistration[];
+    themes: readonly ThemeRegistration[] | (() => readonly ThemeRegistration[]);
     highlighter?: () => Promise<Highlighter>;
 }
 export declare function diffSyntaxRuntime(code: ChatHost['code']): DiffSyntaxRuntime;

package/dist/chat/ui/diff/syntax-runtime.js

@@ -5,7 +5,7 @@ const shared = new WeakMap();
 export function diffSyntaxRuntime(code) {
     let runtime = shared.get(code);
     if (runtime === undefined) {
-        runtime = createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: code.custom, highlighter: code.highlighter });
+        runtime = createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: () => code.custom, highlighter: code.highlighter });
         shared.set(code, runtime);
     }
     return runtime;
@@ -17,6 +17,9 @@ export function createDiffSyntaxRuntime(options) {
     let highlighter;
     let started = false;
     let stopped = false;
+    // The names of the custom themes the current worker or fallback has, each sent once.
+    const sentThemes = new Set();
+    const themes = () => (typeof options.themes === 'function' ? options.themes() : options.themes);
     const settle = (session) => {
         for (const pending of session.pending.values()) {
             pending.resolve(null);
@@ -34,13 +37,34 @@ export function createDiffSyntaxRuntime(options) {
         highlighter ??= import('shiki').then(({ createHighlighter }) => createHighlighter({ langs: [], themes: [] }));
         return highlighter;
     };
+    const start = () => {
+        const current = themes();
+        sentThemes.clear();
+        for (const theme of current) {
+            if (theme.name !== undefined) {
+                sentThemes.add(theme.name);
+            }
+        }
+        dispatch({ type: 'start', themes: current, maxLines: 100000 });
+    };
+    /* Sends a custom theme the host added after the start, ahead of the first request drawn in it. */
+    const sendTheme = (name) => {
+        if (sentThemes.has(name)) {
+            return;
+        }
+        const theme = themes().find((candidate) => candidate.name === name);
+        if (theme !== undefined) {
+            sentThemes.add(name);
+            dispatch({ type: 'themes', themes: [theme] });
+        }
+    };
     const startFallback = () => {
         stopWorker();
         if (fallback !== undefined || stopped) {
             return;
         }
         fallback = createSyntaxService({ highlighter: options.highlighter ?? loadHighlighter, send: receive });
-        dispatch({ type: 'start', themes: options.themes, maxLines: 100000 });
+        start();
         for (const [generation, session] of sessions) {
             session.sent = false;
             for (const index of session.pending.keys()) {
@@ -66,7 +90,7 @@ export function createDiffSyntaxRuntime(options) {
                 worker.addEventListener('message', onMessage);
                 worker.addEventListener('error', onError);
                 worker.addEventListener('messageerror', onError);
-                dispatch({ type: 'start', themes: options.themes, maxLines: 100000 });
+                start();
                 return;
             }
             catch {
@@ -99,6 +123,9 @@ export function createDiffSyntaxRuntime(options) {
     };
     const request = (generation, session, index, resend = false) => {
         const document = !session.sent || resend ? session.definition : undefined;
+        if (document !== undefined) {
+            sendTheme(document.theme);
+        }
         session.sent = true;
         dispatch({ type: 'request', generation, index, ...(document ? { document } : {}) });
     };

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

@@ -1,14 +1,18 @@
 import { useMemo } from 'react';
 import { registerCustomTheme } from '@pierre/diffs';
 import { useChatHost } from '../../host.js';
-const registered = new WeakSet();
-/* The library resolves Shiki's bundled themes by id on its own; the app's own it only knows by registration, done once per host. */
+// The library's registry is global and refuses a name twice, so what is registered is kept by name.
+const registered = new Set();
+/*
+ * The library resolves Shiki's bundled themes by id on its own; the app's own it only knows by registration.
+ * Read on every render, so a theme the host adds to `custom` later is in before a diff is drawn in it.
+ */
 function registerThemes(custom) {
-    if (registered.has(custom)) {
-        return;
-    }
-    registered.add(custom);
     for (const theme of custom) {
+        if (registered.has(theme.name)) {
+            continue;
+        }
+        registered.add(theme.name);
         registerCustomTheme(theme.name, () => Promise.resolve(theme));
     }
 }

package/dist/chat/ui/intelligent-ui/renderers/map-view.js

@@ -6,6 +6,7 @@ import { Maximize, Minus, Plus } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { ButtonGroup, IconButton } from '@adecore/ui';
 import { useChatHost } from '../../../../host.js';
+import { watchTheme } from '../../theme-watch.js';
 import { baseMapStyle, boundsOf, localizedTextField, mapFitOptions, spreadOverlaps } from './map-style.js';
 const MARKER = 'flex size-5 items-center justify-center rounded-full bg-map-marker text-xs text-map-marker-text tabular-nums shadow-raised';
 const PICKED = 'z-1 bg-accent text-accent-text outline-2 outline-surface';
@@ -55,7 +56,7 @@ export function MapView({ markers, source, selected, onPick, onStatus }) {
             return;
         }
         const current = latest.current.source;
-        const colors = readColors(container);
+        let colors = readColors(container);
         const offline = current.state === 'tiles' && typeof navigator !== 'undefined' && navigator.onLine === false;
         const tiles = current.state === 'tiles' && !offline;
         let created;
@@ -175,8 +176,21 @@ export function MapView({ markers, source, selected, onPick, onStatus }) {
             window.addEventListener('online', goOnline);
         }
         canvas.addEventListener('webglcontextlost', contextLost);
+        // Colors that change within the side repaint the outline in place: a style that differs only in its paint is
+        // applied as a diff, so the map, its camera and its markers stay. The tiles draw colors of their own.
+        const stopWatching = watchTheme(container.ownerDocument, () => {
+            const next = readColors(container);
+            if (next.land === colors.land && next.water === colors.water) {
+                return;
+            }
+            colors = next;
+            if (drawing === 'outline') {
+                created.setStyle(baseMapStyle(colors));
+            }
+        });
         setMap(created);
         return () => {
+            stopWatching();
             window.removeEventListener('offline', goOffline);
             window.removeEventListener('online', goOnline);
             canvas.removeEventListener('webglcontextlost', contextLost);

package/dist/chat/ui/theme-watch.d.ts

@@ -0,0 +1 @@
+export declare function watchTheme(owner: Document, changed: () => void): () => void;

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

@@ -0,0 +1,36 @@
+/* The attributes of the root and the body an app switches its theme, its accent or its palette with. */
+const THEME_ATTRIBUTES = ['class', 'style', 'data-theme'];
+/*
+ * Calls `changed` after the root of `owner` or its body changes a theme attribute, at most once a
+ * frame, for whatever resolves the theme's tokens into colors of its own. A stylesheet that changes
+ * changes no attribute, so an app that rewrites its palette that way touches the root's `style` as
+ * well, the signal the terminal follows too. Returns what stops it.
+ *
+ * Any change of those attributes counts, also one that leaves every token as it was (a dialog that
+ * locks the scroll writes the root's `style`), so a caller compares what it reads with what it drew.
+ */
+export function watchTheme(owner, changed) {
+    const view = owner.defaultView ?? window;
+    let frame = 0;
+    const schedule = () => {
+        if (frame === 0) {
+            frame = view.requestAnimationFrame(() => {
+                frame = 0;
+                changed();
+            });
+        }
+    };
+    const observer = new view.MutationObserver(schedule);
+    for (const root of [owner.documentElement, owner.body]) {
+        if (root !== null) {
+            observer.observe(root, { attributes: true, attributeFilter: THEME_ATTRIBUTES });
+        }
+    }
+    return () => {
+        observer.disconnect();
+        if (frame !== 0) {
+            view.cancelAnimationFrame(frame);
+            frame = 0;
+        }
+    };
+}

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

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useState } from 'react';
 import { cleanVisualVariables } from '@adecore/agent-contracts/visual';
 import { useChatHost } from '../../host.js';
+import { watchTheme } from './theme-watch.js';
 /*
  * A page's theme from the app's tokens. The names follow common component themes, where `--accent`
  * is a quiet hover ground and `--primary` the color that stands out, so the app's accent is the
@@ -134,8 +135,6 @@ function readTheme(element, mode) {
         probe.remove();
     }
 }
-/* The attributes an app switches its theme or its accent with. */
-const THEME_ATTRIBUTES = ['class', 'style', 'data-theme'];
 /*
  * The app's theme for a visual drawn in `ref`, null until the element is there. It is read again when
  * the app turns light or dark, and when the root of the document changes a theme attribute, so an
@@ -156,16 +155,11 @@ export function useVisualTheme(ref) {
         };
         read();
         const owner = element.ownerDocument;
-        const observer = new MutationObserver(read);
-        for (const root of [owner.documentElement, owner.body]) {
-            if (root !== null) {
-                observer.observe(root, { attributes: true, attributeFilter: THEME_ATTRIBUTES });
-            }
-        }
+        const stopWatching = watchTheme(owner, read);
         const scheme = owner.defaultView?.matchMedia?.('(prefers-color-scheme: dark)') ?? null;
         scheme?.addEventListener('change', read);
         return () => {
-            observer.disconnect();
+            stopWatching();
             scheme?.removeEventListener('change', read);
         };
     }, [ref, mode]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.26.3",
+  "version": "0.27.1",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.26.3",
-    "@adecore/editor": "0.26.3",
-    "@adecore/editor-react": "0.26.3",
-    "@adecore/intelligent-ui": "0.26.3",
-    "@adecore/merge": "0.26.3",
+    "@adecore/agent-contracts": "0.27.1",
+    "@adecore/editor": "0.27.1",
+    "@adecore/editor-react": "0.27.1",
+    "@adecore/intelligent-ui": "0.27.1",
+    "@adecore/merge": "0.27.1",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.26.3",
+    "@adecore/ui": "^0.27.1",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.26.3",
+    "@adecore/ui": "0.27.1",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/ui/MermaidBlock.tsx

@@ -6,6 +6,7 @@ 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';
+import { watchTheme } from './theme-watch';
 
 type Drawing = { state: 'drawing' } | { state: 'drawn'; image: SizedSvg } | { state: 'failed' };
 
@@ -38,10 +39,20 @@ function themeColors(element: HTMLElement): MermaidColors {
     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');
+/* What a diagram reads of the theme where it stands. */
+interface DiagramLook {
+    colors: MermaidColors;
+    font: { family: string; size: string };
+}
+
+function diagramLook(element: HTMLElement): DiagramLook {
     const style = getComputedStyle(element);
-    mermaid.initialize(mermaidConfig(themeColors(element), dark, { family: style.fontFamily, size: style.fontSize }));
+    return { colors: themeColors(element), font: { family: style.fontFamily, size: style.fontSize } };
+}
+
+async function drawDiagram(id: string, source: string, look: DiagramLook, dark: boolean): Promise<SizedSvg | null> {
+    const { default: mermaid } = await import('mermaid');
+    mermaid.initialize(mermaidConfig(look.colors, dark, look.font));
     const { svg } = await mermaid.render(id, source);
     return sizedSvg(svg);
 }
@@ -60,6 +71,22 @@ export function MermaidBlock({ code }: { code: string }) {
     const frame = useRef<HTMLDivElement>(null);
     const [source, setSource] = useState(false);
     const [drawing, setDrawing] = useState<Drawing>({ state: 'drawing' });
+    // The look of the diagram on screen or on its way there, null before the first.
+    const drawnLook = useRef<string | null>(null);
+    const [themeRevision, setThemeRevision] = useState(0);
+
+    // An app may change its colors without turning light or dark, which only the root of the page tells.
+    useEffect(() => {
+        const element = frame.current;
+        if (element === null) {
+            return;
+        }
+        return watchTheme(element.ownerDocument, () => {
+            if (drawnLook.current !== null && JSON.stringify(diagramLook(element)) !== drawnLook.current) {
+                setThemeRevision((revision) => revision + 1);
+            }
+        });
+    }, []);
 
     useEffect(() => {
         const element = frame.current;
@@ -67,8 +94,11 @@ export function MermaidBlock({ code }: { code: string }) {
             return;
         }
         let cancelled = false;
-        setDrawing({ state: 'drawing' });
-        const drawn = queue.then(() => (cancelled ? null : drawDiagram(id, code, element, dark)));
+        const look = diagramLook(element);
+        drawnLook.current = JSON.stringify(look);
+        // A diagram already drawn stays until the next one is there, so a change of the theme does not make it blink.
+        setDrawing((current) => (current.state === 'drawn' ? current : { state: 'drawing' }));
+        const drawn = queue.then(() => (cancelled ? null : drawDiagram(id, code, look, dark)));
         queue = drawn.catch(() => undefined);
         drawn.then(
             (image) => !cancelled && setDrawing(image === null ? { state: 'failed' } : { state: 'drawn', image }),
@@ -77,7 +107,7 @@ export function MermaidBlock({ code }: { code: string }) {
         return () => {
             cancelled = true;
         };
-    }, [code, dark, id, streaming]);
+    }, [code, dark, id, streaming, themeRevision]);
 
     const showsDiagram = !streaming && !source && drawing.state !== 'failed';
     const toggle =

package/src/chat/ui/diff/syntax-runtime.ts

@@ -34,7 +34,8 @@ export interface DiffSyntaxRuntime {
 
 export interface DiffSyntaxRuntimeOptions {
     workerFactory?: () => Worker;
-    themes: readonly ThemeRegistration[];
+    /* The custom themes, or a function read again whenever a document names a theme not yet sent, so a theme made later draws too. */
+    themes: readonly ThemeRegistration[] | (() => readonly ThemeRegistration[]);
     highlighter?: () => Promise<Highlighter>;
 }
 
@@ -45,7 +46,7 @@ const shared = new WeakMap<ChatHost['code'], DiffSyntaxRuntime>();
 export function diffSyntaxRuntime(code: ChatHost['code']): DiffSyntaxRuntime {
     let runtime = shared.get(code);
     if (runtime === undefined) {
-        runtime = createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: code.custom, highlighter: code.highlighter });
+        runtime = createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: () => code.custom, highlighter: code.highlighter });
         shared.set(code, runtime);
     }
     return runtime;
@@ -58,6 +59,9 @@ export function createDiffSyntaxRuntime(options: DiffSyntaxRuntimeOptions): Diff
     let highlighter: Promise<Highlighter> | undefined;
     let started = false;
     let stopped = false;
+    // The names of the custom themes the current worker or fallback has, each sent once.
+    const sentThemes = new Set<string>();
+    const themes = (): readonly ThemeRegistration[] => (typeof options.themes === 'function' ? options.themes() : options.themes);
     const settle = (session: Session): void => {
         for (const pending of session.pending.values()) {
             pending.resolve(null);
@@ -75,13 +79,34 @@ export function createDiffSyntaxRuntime(options: DiffSyntaxRuntimeOptions): Diff
         highlighter ??= import('shiki').then(({ createHighlighter }) => createHighlighter({ langs: [], themes: [] }));
         return highlighter;
     };
+    const start = (): void => {
+        const current = themes();
+        sentThemes.clear();
+        for (const theme of current) {
+            if (theme.name !== undefined) {
+                sentThemes.add(theme.name);
+            }
+        }
+        dispatch({ type: 'start', themes: current, maxLines: 100000 });
+    };
+    /* Sends a custom theme the host added after the start, ahead of the first request drawn in it. */
+    const sendTheme = (name: string): void => {
+        if (sentThemes.has(name)) {
+            return;
+        }
+        const theme = themes().find((candidate) => candidate.name === name);
+        if (theme !== undefined) {
+            sentThemes.add(name);
+            dispatch({ type: 'themes', themes: [theme] });
+        }
+    };
     const startFallback = (): void => {
         stopWorker();
         if (fallback !== undefined || stopped) {
             return;
         }
         fallback = createSyntaxService({ highlighter: options.highlighter ?? loadHighlighter, send: receive });
-        dispatch({ type: 'start', themes: options.themes, maxLines: 100000 });
+        start();
         for (const [generation, session] of sessions) {
             session.sent = false;
             for (const index of session.pending.keys()) {
@@ -107,7 +132,7 @@ export function createDiffSyntaxRuntime(options: DiffSyntaxRuntimeOptions): Diff
                 worker.addEventListener('message', onMessage);
                 worker.addEventListener('error', onError);
                 worker.addEventListener('messageerror', onError);
-                dispatch({ type: 'start', themes: options.themes, maxLines: 100000 });
+                start();
                 return;
             } catch {
                 startFallback();
@@ -136,6 +161,9 @@ export function createDiffSyntaxRuntime(options: DiffSyntaxRuntimeOptions): Diff
     };
     const request = (generation: number, session: Session, index: number, resend = false): void => {
         const document = !session.sent || resend ? session.definition : undefined;
+        if (document !== undefined) {
+            sendTheme(document.theme);
+        }
         session.sent = true;
         dispatch({ type: 'request', generation, index, ...(document ? { document } : {}) });
     };

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

@@ -2,15 +2,19 @@ import { useMemo } from 'react';
 import { registerCustomTheme, type ThemesType } from '@pierre/diffs';
 import { useChatHost, type ChatHost } from '../../host';
 
-const registered = new WeakSet<ChatHost['code']['custom']>();
+// The library's registry is global and refuses a name twice, so what is registered is kept by name.
+const registered = new Set<string>();
 
-/* The library resolves Shiki's bundled themes by id on its own; the app's own it only knows by registration, done once per host. */
+/*
+ * The library resolves Shiki's bundled themes by id on its own; the app's own it only knows by registration.
+ * Read on every render, so a theme the host adds to `custom` later is in before a diff is drawn in it.
+ */
 function registerThemes(custom: ChatHost['code']['custom']): void {
-    if (registered.has(custom)) {
-        return;
-    }
-    registered.add(custom);
     for (const theme of custom) {
+        if (registered.has(theme.name)) {
+            continue;
+        }
+        registered.add(theme.name);
         registerCustomTheme(theme.name, () => Promise.resolve(theme));
     }
 }

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

@@ -5,6 +5,7 @@ import { Maximize, Minus, Plus } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 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';
 
 /*
@@ -81,7 +82,7 @@ export function MapView({ markers, source, selected, onPick, onStatus }: MapView
             return;
         }
         const current = latest.current.source;
-        const colors = readColors(container);
+        let colors = readColors(container);
         const offline = current.state === 'tiles' && typeof navigator !== 'undefined' && navigator.onLine === false;
         const tiles = current.state === 'tiles' && !offline;
         let created: MapLibreMap;
@@ -202,8 +203,21 @@ export function MapView({ markers, source, selected, onPick, onStatus }: MapView
             window.addEventListener('online', goOnline);
         }
         canvas.addEventListener('webglcontextlost', contextLost);
+        // Colors that change within the side repaint the outline in place: a style that differs only in its paint is
+        // applied as a diff, so the map, its camera and its markers stay. The tiles draw colors of their own.
+        const stopWatching = watchTheme(container.ownerDocument, () => {
+            const next = readColors(container);
+            if (next.land === colors.land && next.water === colors.water) {
+                return;
+            }
+            colors = next;
+            if (drawing === 'outline') {
+                created.setStyle(baseMapStyle(colors));
+            }
+        });
         setMap(created);
         return () => {
+            stopWatching();
             window.removeEventListener('offline', goOffline);
             window.removeEventListener('online', goOnline);
             canvas.removeEventListener('webglcontextlost', contextLost);

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

@@ -0,0 +1,37 @@
+/* The attributes of the root and the body an app switches its theme, its accent or its palette with. */
+const THEME_ATTRIBUTES = ['class', 'style', 'data-theme'];
+
+/*
+ * Calls `changed` after the root of `owner` or its body changes a theme attribute, at most once a
+ * frame, for whatever resolves the theme's tokens into colors of its own. A stylesheet that changes
+ * changes no attribute, so an app that rewrites its palette that way touches the root's `style` as
+ * well, the signal the terminal follows too. Returns what stops it.
+ *
+ * Any change of those attributes counts, also one that leaves every token as it was (a dialog that
+ * locks the scroll writes the root's `style`), so a caller compares what it reads with what it drew.
+ */
+export function watchTheme(owner: Document, changed: () => void): () => void {
+    const view = owner.defaultView ?? window;
+    let frame = 0;
+    const schedule = (): void => {
+        if (frame === 0) {
+            frame = view.requestAnimationFrame(() => {
+                frame = 0;
+                changed();
+            });
+        }
+    };
+    const observer = new view.MutationObserver(schedule);
+    for (const root of [owner.documentElement, owner.body]) {
+        if (root !== null) {
+            observer.observe(root, { attributes: true, attributeFilter: THEME_ATTRIBUTES });
+        }
+    }
+    return () => {
+        observer.disconnect();
+        if (frame !== 0) {
+            view.cancelAnimationFrame(frame);
+            frame = 0;
+        }
+    };
+}

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

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useState, type RefObject } from 'react';
 import { cleanVisualVariables, type VisualAppearance, type VisualTheme, type VisualThemeVariable } from '@adecore/agent-contracts/visual';
 import { useChatHost } from '../../host';
+import { watchTheme } from './theme-watch';
 
 /* The tokens of the app's theme where a frame stands; each answers '' for a token the theme lacks. */
 export interface VisualTokens {
@@ -158,9 +159,6 @@ function readTheme(element: HTMLElement, mode: VisualAppearance): VisualTheme {
     }
 }
 
-/* The attributes an app switches its theme or its accent with. */
-const THEME_ATTRIBUTES = ['class', 'style', 'data-theme'];
-
 /*
  * The app's theme for a visual drawn in `ref`, null until the element is there. It is read again when
  * the app turns light or dark, and when the root of the document changes a theme attribute, so an
@@ -181,16 +179,11 @@ export function useVisualTheme(ref: RefObject<HTMLElement | null>): VisualTheme
         };
         read();
         const owner = element.ownerDocument;
-        const observer = new MutationObserver(read);
-        for (const root of [owner.documentElement, owner.body]) {
-            if (root !== null) {
-                observer.observe(root, { attributes: true, attributeFilter: THEME_ATTRIBUTES });
-            }
-        }
+        const stopWatching = watchTheme(owner, read);
         const scheme = owner.defaultView?.matchMedia?.('(prefers-color-scheme: dark)') ?? null;
         scheme?.addEventListener('change', read);
         return () => {
-            observer.disconnect();
+            stopWatching();
             scheme?.removeEventListener('change', read);
         };
     }, [ref, mode]);

package/src/host.ts

@@ -319,7 +319,10 @@ export interface ChatHost {
         useMode(): 'light' | 'dark';
         /* The Shiki theme ids code is drawn in, one per mode. */
         useThemes(): { light: string; dark: string };
-        /* Themes the app ships itself, found by name; the rest Shiki looks up by id. */
+        /*
+         * Themes the app ships itself, found by name; the rest Shiki looks up by id. Read again whenever a theme is
+         * picked, so a getter that answers a longer array draws a theme made later; a name keeps its first theme.
+         */
         custom: ReadonlyArray<ThemeRegistration & { name: string }>;
         /* One syntax worker shared by chat diffs and standalone review panes; omitted, tokenize on the page. */
         syntaxWorker?: () => Worker;