@adecore/agents-react 0.23.1 → 0.24.1

package/src/chat/logic/tools.ts

@@ -32,6 +32,82 @@ export function toolSummary(name: string, input: unknown): string {
     return '';
 }
 
+// The input keys whose value is a file a call is about.
+const PATH_KEYS = new Set(['file_path', 'notebook_path']);
+
+/* Whether the one line of a call is the path of a file, which a row cuts in the middle so the name stays. */
+export function toolSummaryIsPath(name: string, input: unknown): boolean {
+    const known = toolEntry(name);
+    if (known === undefined || !isRecord(input)) {
+        return false;
+    }
+    const key = known.summary.find((candidate) => str(input[candidate]) !== null);
+    return key !== undefined && PATH_KEYS.has(key);
+}
+
+/* The command of a shell call, as it was run; null for any other call or one without a command. */
+export function shellCommand(name: string, input: unknown): string | null {
+    if (toolEntry(name)?.shell !== true || !isRecord(input)) {
+        return null;
+    }
+    const command = str(input.command);
+    return command === null || command.trim() === '' ? null : command;
+}
+
+/* What a call was asked to do, as the lines its opened row shows. */
+export interface ToolCallLines {
+    /* The command of a shell call, whole. */
+    readonly command: string | null;
+    /* The rest of the input as key and value: a string as it is, anything else as compact JSON. */
+    readonly args: ReadonlyArray<readonly [key: string, value: string]>;
+    /* An input that is not an object, as text. */
+    readonly text: string | null;
+}
+
+// A shell call's description is already the detail of its row.
+const SHELL_SHOWN = new Set(['command', 'description']);
+
+function valueText(value: unknown): string {
+    // An empty string can be the point of a call (clearing a field), so it shows as one.
+    return typeof value === 'string' && value !== '' ? value : (JSON.stringify(value) ?? String(value));
+}
+
+/* The input of a call as lines: a shell command as itself, every other key as `key value`, null included. */
+export function toolCallLines(name: string, input: unknown): ToolCallLines {
+    if (!isRecord(input)) {
+        const text = input === null || input === undefined || input === '' ? null : valueText(input);
+        return { command: null, args: [], text };
+    }
+    const command = shellCommand(name, input);
+    const args = Object.entries(input)
+        .filter(([key, value]) => value !== undefined && !(command !== null && SHELL_SHOWN.has(key)))
+        .map(([key, value]) => [key, valueText(value)] as const);
+    return { command, args, text: null };
+}
+
+/* A failed call's output with the exit code its tool put on the first line ("Exit code 1"), as Claude Code's shell does. */
+export function exitCodeOf(output: string): { code: number | null; rest: string } {
+    const match = /^Exit code (-?\d+)[ \t]*(?:\r?\n|$)/.exec(output);
+    if (match === null || Number(match[1]) === 0) {
+        return { code: null, rest: output };
+    }
+    return { code: Number(match[1]), rest: output.slice(match[0].length) };
+}
+
+/* Whether an output says anything; whitespace alone does not. */
+export function hasOutput(output: string | null): output is string {
+    return output !== null && output.trim() !== '';
+}
+
+/* Whether opening a call shows anything: a diff, the input it was given or what it answered. */
+export function hasToolBody(tool: ChatToolItem): boolean {
+    if (hasFileChanges(tool) || hasOutput(tool.output)) {
+        return true;
+    }
+    const lines = toolCallLines(tool.name, tool.input);
+    return lines.command !== null || lines.args.length > 0 || lines.text !== null;
+}
+
 // What `GET /fs/file` will serve; a path with another suffix is not worth asking the host about.
 const IMAGE_SUFFIXES = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'];
 

package/src/chat/preferences.ts

@@ -1,6 +1,8 @@
 import { chatStorageKey, chatStorageLegacyKeys, createChatStore, onChatStorageConfiguration } from '../storage';
 import type { AgentKind, ChatPreferencesPayload, ModelSelection, ProviderInfo, ProviderAccounts, RuntimeMode } from '@adecore/agent-contracts';
 import { persistedJson } from './persisted-json';
+import { DEFAULT_READING_WIDTH, isChatReadingWidth, type ChatReadingWidth } from './reading-width';
+import { DEFAULT_SEND_KEY, isChatSendKey, type ChatSendKey } from './send-key';
 
 const storageKey = (): string => chatStorageKey('preferences');
 
@@ -14,6 +16,10 @@ export interface ChatPreferences {
     terminalRuntimeMode: RuntimeMode;
     /* Per machine, the account a new agent of each CLI starts under; an account id only means something on its own machine. */
     accountByMachine: Record<string, Partial<Record<AgentKind, string>>>;
+    /* How wide a chat of its own reads. It never reaches a machine. */
+    readingWidth: ChatReadingWidth;
+    /* Which key sends from the composer. It never reaches a machine either. */
+    sendKey: ChatSendKey;
     /* When a person last changed any of it; what settles whose pick a machine uses when several clients told it one. */
     changedAt: number;
 }
@@ -24,6 +30,8 @@ export const DEFAULT_CHAT_PREFERENCES: ChatPreferences = {
     runtimeMode: 'full-access',
     terminalRuntimeMode: 'full-access',
     accountByMachine: {},
+    readingWidth: DEFAULT_READING_WIDTH,
+    sendKey: DEFAULT_SEND_KEY,
     changedAt: 0
 };
 
@@ -44,6 +52,8 @@ export function parseChatPreferences(raw: string | null): ChatPreferences {
             runtimeMode: stored.runtimeMode ?? DEFAULT_CHAT_PREFERENCES.runtimeMode,
             terminalRuntimeMode: stored.terminalRuntimeMode ?? DEFAULT_CHAT_PREFERENCES.terminalRuntimeMode,
             accountByMachine: { ...stored.accountByMachine },
+            readingWidth: isChatReadingWidth(stored.readingWidth) ? stored.readingWidth : DEFAULT_READING_WIDTH,
+            sendKey: isChatSendKey(stored.sendKey) ? stored.sendKey : DEFAULT_SEND_KEY,
             changedAt: typeof stored.changedAt === 'number' ? stored.changedAt : 0
         };
     } catch {
@@ -142,10 +152,13 @@ export function reloadChatPreferences(): void {
     useChatPreferences.setState(storage.read(), true);
 }
 
+function store(preferences: ChatPreferences): void {
+    useChatPreferences.setState(preferences);
+    storage.write(preferences);
+}
+
 function write(preferences: ChatPreferences): void {
-    const next = { ...preferences, changedAt: Date.now() };
-    useChatPreferences.setState(next);
-    storage.write(next);
+    store({ ...preferences, changedAt: Date.now() });
 }
 
 /* The composer writes here on every change and the settings dialog too; both edit the same remembered default. */
@@ -153,6 +166,16 @@ export function rememberChatPreferences(patch: Partial<ChatPreferences>): void {
     write({ ...useChatPreferences.getState(), ...patch });
 }
 
+/* The reading width leaves `changedAt` alone: it is no pick a machine weighs against another client's. */
+export function rememberReadingWidth(readingWidth: ChatReadingWidth): void {
+    store({ ...useChatPreferences.getState(), readingWidth });
+}
+
+/* Leaves `changedAt` alone, like the reading width. */
+export function rememberSendKey(sendKey: ChatSendKey): void {
+    store({ ...useChatPreferences.getState(), sendKey });
+}
+
 export function rememberChatSelection(provider: AgentKind, selection: ModelSelection): void {
     const current = useChatPreferences.getState();
     const previous = current.selectionByProvider[provider];

package/src/chat/reading-width.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties } from 'react';
+import i18next from 'i18next';
+
+/* How wide a chat that is a view of its own lets its thread and composer run. A node on a canvas is narrower than any of them. */
+export type ChatReadingWidth = 'narrow' | 'comfortable' | 'full';
+
+export const CHAT_READING_WIDTHS: readonly ChatReadingWidth[] = ['narrow', 'comfortable', 'full'];
+
+export const DEFAULT_READING_WIDTH: ChatReadingWidth = 'comfortable';
+
+// About 75 and 90 characters of the thread's text a line.
+const MEASURES: Readonly<Record<ChatReadingWidth, number>> = {
+    narrow: 640,
+    comfortable: 768,
+    full: Number.POSITIVE_INFINITY
+};
+
+export function isChatReadingWidth(value: unknown): value is ChatReadingWidth {
+    return typeof value === 'string' && (CHAT_READING_WIDTHS as readonly string[]).includes(value);
+}
+
+/* The widest the content column runs, in pixels; `full` is unbounded. */
+export function readingMeasure(width: ChatReadingWidth): number {
+    return MEASURES[width];
+}
+
+/* What `.chat-column-content` and `.chat-composer-content` read their width from. */
+export function readingWidthStyle(width: ChatReadingWidth): CSSProperties {
+    const measure = MEASURES[width];
+    return { '--chat-measure': Number.isFinite(measure) ? `${measure}px` : '100%' } as CSSProperties;
+}
+
+export function readingWidthLabel(width: ChatReadingWidth): string {
+    return i18next.t(`agent-chat:readingWidth.${width}.label`);
+}
+
+export function readingWidthHint(width: ChatReadingWidth): string {
+    return i18next.t(`agent-chat:readingWidth.${width}.hint`);
+}

package/src/chat/send-key.ts

@@ -0,0 +1,38 @@
+import i18next from 'i18next';
+import { KEY_SHORTCUTS, shortcut, type Shortcut } from '@adecore/ui';
+
+/*
+ * Which key sends a message: Enter, Enter until the message runs over more than one line and Mod+Enter
+ * after that, or Mod+Enter always. Where Enter does not send, it adds a line.
+ */
+export type ChatSendKey = 'enter' | 'mod-enter-multiline' | 'mod-enter';
+
+export const CHAT_SEND_KEYS: readonly ChatSendKey[] = ['enter', 'mod-enter-multiline', 'mod-enter'];
+
+export const DEFAULT_SEND_KEY: ChatSendKey = 'enter';
+
+/* Sends, then opens a new chat through the host's `openNewChat`; a key of the composer, for a menu or a list of keys to print. */
+export const SEND_AND_NEW_SHORTCUT = /* @__PURE__ */ shortcut('Mod+Alt+Enter');
+
+export function isChatSendKey(value: unknown): value is ChatSendKey {
+    return typeof value === 'string' && (CHAT_SEND_KEYS as readonly string[]).includes(value);
+}
+
+/* Whether Enter alone adds a line to a message, so only Mod+Enter sends it. */
+export function modSends(sendKey: ChatSendKey, multiline: boolean): boolean {
+    return sendKey === 'mod-enter' || (sendKey === 'mod-enter-multiline' && multiline);
+}
+
+/* The key that sends a message, as a hint prints it. */
+export function sendShortcut(sendKey: ChatSendKey, multiline: boolean): Shortcut {
+    return modSends(sendKey, multiline) ? KEY_SHORTCUTS.modEnter : KEY_SHORTCUTS.enter;
+}
+
+/* `apple` writes Mod as the Command sign, and as Ctrl elsewhere. */
+export function sendKeyLabel(sendKey: ChatSendKey, apple: boolean): string {
+    return i18next.t(`agent-chat:sendKey.${sendKey}.label`, { mod: apple ? '⌘' : 'Ctrl' });
+}
+
+export function sendKeyHint(sendKey: ChatSendKey, apple: boolean): string {
+    return i18next.t(`agent-chat:sendKey.${sendKey}.hint`, { mod: apple ? '⌘' : 'Ctrl' });
+}

package/src/chat/ui/BookmarkMarker.tsx

@@ -5,6 +5,7 @@ import { Bookmark, Pencil, X } from 'lucide-react';
 import { CHAT_BOOKMARK_LIMITS, type ChatBookmark } from '@adecore/agent-contracts';
 import { nameBookmark, removeBookmark, useBookmarkNaming } from '../bookmarks';
 import { bookmarkLabel } from '../logic/bookmarks';
+import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { ButtonGroup, Icon, IconButton, Input } from '@adecore/ui';
 
@@ -22,6 +23,7 @@ interface BookmarkMarkerProps {
 export function BookmarkMarker({ chatId, itemId, bookmark }: BookmarkMarkerProps) {
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
+    const host = useChatHost();
     const chatKey = scope.keyOf(chatId);
     const naming = useBookmarkNaming((s) => s.chatKey === chatKey && s.itemId === itemId);
 
@@ -38,7 +40,7 @@ export function BookmarkMarker({ chatId, itemId, bookmark }: BookmarkMarkerProps
                     onDone={(name) => {
                         useBookmarkNaming.getState().close();
                         if (name !== null) {
-                            void nameBookmark(scope, chatId, itemId, name, bookmark?.name);
+                            void nameBookmark(scope, host, chatId, itemId, name, bookmark?.name);
                         }
                     }}
                 />
@@ -54,7 +56,7 @@ export function BookmarkMarker({ chatId, itemId, bookmark }: BookmarkMarkerProps
                     className="-ml-2 max-w-0 shrink-0 overflow-hidden opacity-0 group-hover/bookmark:ml-0 group-hover/bookmark:max-w-none group-hover/bookmark:opacity-100 group-has-focus-visible/bookmark:ml-0 group-has-focus-visible/bookmark:max-w-none group-has-focus-visible/bookmark:opacity-100"
                 >
                     <IconButton icon={Pencil} size="xs" label={t('bookmarks.rename')} onClick={() => useBookmarkNaming.getState().open(chatKey, itemId)} />
-                    <IconButton icon={X} size="xs" label={t('bookmarks.remove')} onClick={() => void removeBookmark(scope, chatId, bookmark)} />
+                    <IconButton icon={X} size="xs" label={t('bookmarks.remove')} onClick={() => void removeBookmark(scope, host, chatId, bookmark)} />
                 </ButtonGroup>
             )}
         </div>

package/src/chat/ui/BookmarkSubmenu.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Bookmark, Pencil, X } from 'lucide-react';
 import { goToBookmark, removeBookmark } from '../bookmarks';
 import { bookmarkLabel, bookmarksInThreadOrder } from '../logic/bookmarks';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatRow } from '../../state/chats';
 import { Icon, Menu } from '@adecore/ui';
@@ -15,7 +15,8 @@ export function BookmarkSubmenu({ chatId }: { chatId: string }) {
     const scope = useChatScope();
     const bookmarks = useChatRow(chatId, (row) => row?.bookmarks);
     const order = useChatRow(chatId, (row) => row?.order);
-    const place = chatHost().useChatPlace(chatId);
+    const host = useChatHost();
+    const place = host.useChatPlace(chatId);
     const sorted = useMemo(() => bookmarksInThreadOrder(bookmarks ?? [], order ?? []), [bookmarks, order]);
     if (sorted.length === 0) {
         return null;
@@ -40,7 +41,7 @@ export function BookmarkSubmenu({ chatId }: { chatId: string }) {
                             <span className={clsx('min-w-0 grow truncate', bookmark.name === undefined && 'text-text-muted')}>{bookmarkLabel(bookmark)}</span>
                         </Menu.Item>
                         <Menu.RowAction icon={Pencil} label={t('bookmarks.rename')} onClick={() => go(bookmark.itemId, true)} />
-                        <Menu.RowAction icon={X} label={t('bookmarks.remove')} onClick={() => void removeBookmark(scope, chatId, bookmark)} />
+                        <Menu.RowAction icon={X} label={t('bookmarks.remove')} onClick={() => void removeBookmark(scope, host, chatId, bookmark)} />
                     </Menu.Row>
                 ))}
             </Menu.Popup>

package/src/chat/ui/ChatActivity.tsx

@@ -1,5 +1,6 @@
 import { useMemo, type ReactNode } from 'react';
 import clsx from 'clsx';
+import { useShallow } from 'zustand/shallow';
 import { useTranslation } from 'react-i18next';
 import { Activity, MessageCircleQuestionMark, Square, SquareTerminal } from 'lucide-react';
 import type { ChatBackgroundTask, ChatSubagentItem } from '@adecore/agent-contracts';
@@ -11,7 +12,7 @@ import { SubagentStopButton } from './SubagentStopButton';
 import { formatElapsedShort } from '@adecore/ui/format';
 import { Icon, IconButton, Popover, Surface, useNow } from '@adecore/ui';
 import { useChatRow, useChats } from '../../state/chats';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatActions } from '../actions';
 import { statusLookOf, type StatusWord } from '../../agents/status-look';
@@ -24,23 +25,24 @@ const ROW_BODY = 'flex min-h-9 min-w-0 grow items-center gap-2.5 rounded-md px-2
 
 /* What the chat keeps working on beside the thread, in one small line over the composer: its sub-agents and what runs in the background. */
 export function ChatActivity({ chatId }: { chatId: string }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const order = useChatRow(chatId, (row) => row?.order) ?? NO_ITEMS;
     const structure = useChatRow(chatId, (row) => row?.structure);
     const subagents = useMemo(() => (structure === undefined ? [] : flyoutSubagents(order, structure)), [order, structure]);
     const { id, keyOf } = useChatScope();
-    const tasks = chatHost().tasks.useTasks(id);
-    const statuses = useChats((s) => s.statusByKey);
+    const tasks = host.tasks.useTasks(id);
+    // The infos of these sub-agents' own chats, so the info of any other chat changing does not draw this again.
+    const children = useChats(useShallow((s) => subagents.map((item) => (item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info))));
     const progress = useMemo(
         () =>
             progressOf(
-                subagents.map((item) => {
+                subagents.map((item, index) => {
                     const taskId = taskIdOf(item);
-                    const child = item.childId === undefined ? undefined : statuses[keyOf(item.childId)]?.info;
-                    return taskRowStateOf(item, taskId === null ? null : (tasks?.[taskId] ?? null), child);
+                    return taskRowStateOf(item, taskId === null ? null : (tasks?.[taskId] ?? null), children[index]);
                 })
             ),
-        [subagents, tasks, statuses, keyOf]
+        [subagents, tasks, children]
     );
     const words = useMemo(
         () =>
@@ -55,7 +57,7 @@ export function ChatActivity({ chatId }: { chatId: string }) {
         return null;
     }
     const { shells, monitors } = backgroundCounts(background);
-    const Slot = chatHost().SubagentSlot;
+    const Slot = host.SubagentSlot;
     const counting = progress.active > 0 && progress.total > 1;
     const label = counting
         ? [t('activity.progress', { done: progress.done, total: progress.total }), progress.waiting > 0 && t('activity.needsYou', { count: progress.waiting })]
@@ -171,10 +173,11 @@ function SubagentRows({ chatId, items }: { chatId: string; items: readonly ChatS
 }
 
 function SubagentEntry({ chatId, item, now }: { chatId: string; item: ChatSubagentItem; now: number }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id, keyOf } = useChatScope();
     const refused = useSubagentSupport((s) => s.unsupported[id] === true);
-    const task = chatHost().tasks.useTask(id, taskIdOf(item));
+    const task = host.tasks.useTask(id, taskIdOf(item));
     const { show } = useSubagentTrail(chatId);
     const child = useChats((s) => (item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info));
     const word = statusWordOf(item, task);
@@ -199,6 +202,7 @@ function SubagentEntry({ chatId, item, now }: { chatId: string; item: ChatSubage
 
 /* Only drawn while the flyout is open, so the clock ticks for nobody otherwise. */
 function BackgroundTaskRows({ chatId, tasks }: { chatId: string; tasks: readonly ChatBackgroundTask[] }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const now = useNow(1000);
     const actions = useChatActions();
@@ -206,7 +210,7 @@ function BackgroundTaskRows({ chatId, tasks }: { chatId: string; tasks: readonly
     function stop(taskId: string): void {
         void actions.stopTask(chatId, taskId).catch((e: unknown) => {
             const description = e instanceof Error ? e.message : t('subagents.noAnswer');
-            chatHost().notify({ kind: 'error', title: t('activity.stopFailed'), description });
+            host.notify({ kind: 'error', title: t('activity.stopFailed'), description });
         });
     }
 

package/src/chat/ui/ChatReferenceChip.tsx

@@ -1,16 +1,15 @@
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { MessageSquare, X } from 'lucide-react';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { CHIP_IN_MESSAGE, MENTION_TONE } from './chips';
 import { Icon, Tooltip } from '@adecore/ui';
 
 /* A chat attached to a message, under the title it has now rather than the one it had when it was attached. */
 export function ChatReferenceChip({ chatId, onRemove }: { chatId: string; onRemove?: () => void }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const chat = chatHost()
-        .useReferableChats()
-        .find((candidate) => candidate.id === chatId);
+    const chat = host.useReferableChats().find((candidate) => candidate.id === chatId);
     const title = chat === undefined ? t('chatReference.gone') : chat.title || t('chatReference.untitled');
     return (
         <span className={clsx(MENTION_TONE, CHIP_IN_MESSAGE)}>

package/src/chat/ui/CodeBlock.tsx

@@ -1,119 +1,23 @@
-import { Fragment, memo, useContext, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
+import { Fragment, memo, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Check, Copy } from 'lucide-react';
 import { ButtonGroup, IconButton } from '@adecore/ui';
-import type { BundledLanguage, BundledTheme, createHighlighter, ThemeRegistration } from 'shiki/bundle/web';
-import { IncrementalLines, type CodeToken, type Tokenize } from './code-lines';
+import { IncrementalLines, type CodeToken } from './code-lines';
 import { CodeStreamingContext } from './code-streaming';
 import { WHOLE_FADE_CLASS } from './rehype-fade';
-import { shikiThemeOf, useCodeTheme } from './code-theme';
+import { useChatHost } from '../../host';
+import { useCodeTheme } from './code-theme';
+import { tokenStyle, useCodeHighlighter } from './highlighter';
 
-type Highlighter = Awaited<ReturnType<typeof createHighlighter>>;
-type GrammarState = ReturnType<Highlighter['getLastGrammarState']>;
-// A plain language needs no grammar; shiki draws it in the theme's own foreground.
-const PLAIN = 'text';
 const COPIED_MS = 1500;
 
-let highlighter: Highlighter | null = null;
-let highlighterLoad: Promise<Highlighter> | null = null;
-const loadedLanguages = new Set<string>([PLAIN]);
-const languageLoads = new Map<string, Promise<void>>();
-const loadedThemes = new Set<string>();
-const themeLoads = new Map<string, Promise<void>>();
-const tokenizers = new Map<string, { tokenize: Tokenize<GrammarState>; fg: string | undefined }>();
-
-// Shiki loads on the first code block, not with the app; the web bundle covers the languages a coding agent writes.
-function loadHighlighter(): Promise<Highlighter> {
-    highlighterLoad ??= import('shiki/bundle/web').then(async ({ createHighlighter }) => {
-        highlighter = await createHighlighter({ themes: [], langs: [] });
-        return highlighter;
-    });
-    return highlighterLoad;
-}
-
-function resolveLanguage(lang: string, known: Record<string, unknown> | null): string {
-    return known !== null && lang in known ? lang : PLAIN;
-}
-
-let bundled: Record<string, unknown> | null = null;
-
-/* Loads the highlighter and the grammar of one language, once each. */
-function loadLanguage(lang: string): Promise<void> {
-    let load = languageLoads.get(lang);
-    if (!load) {
-        load = Promise.all([loadHighlighter(), import('shiki/bundle/web')]).then(async ([loaded, { bundledLanguages }]) => {
-            bundled = bundledLanguages;
-            const language = resolveLanguage(lang, bundledLanguages);
-            if (!loadedLanguages.has(language)) {
-                await loaded.loadLanguage(language as BundledLanguage);
-                loadedLanguages.add(language);
-            }
-        });
-        languageLoads.set(lang, load);
-    }
-    return load;
-}
-
-/* Loads a theme into the highlighter, once. */
-function loadTheme(theme: string): Promise<void> {
-    let load = themeLoads.get(theme);
-    if (!load) {
-        load = loadHighlighter().then(async (loaded) => {
-            await loaded.loadTheme(shikiThemeOf(theme) as BundledTheme | ThemeRegistration);
-            loadedThemes.add(theme);
-        });
-        themeLoads.set(theme, load);
-    }
-    return load;
-}
-
-/* The tokenizer for a language in a theme, or null while shiki, the grammar or the theme is still on its way. */
-function tokenizerFor(lang: string, theme: string): { tokenize: Tokenize<GrammarState>; fg: string | undefined } | null {
-    if (highlighter === null || bundled === null || !languageLoads.has(lang) || !loadedThemes.has(theme)) {
-        return null;
-    }
-    const language = resolveLanguage(lang, bundled);
-    if (!loadedLanguages.has(language)) {
-        return null;
-    }
-    const key = `${language}:${theme}`;
-    let entry = tokenizers.get(key);
-    if (!entry) {
-        const loaded = highlighter;
-        const options = { lang: language as BundledLanguage, theme };
-        entry = {
-            tokenize: (code, state) => {
-                const result = loaded.codeToTokens(code, state ? { ...options, grammarState: state } : options);
-                return { lines: result.tokens, state: result.grammarState };
-            },
-            fg: loaded.getTheme(theme).fg
-        };
-        tokenizers.set(key, entry);
-    }
-    return entry;
-}
-
-function styleOf(token: CodeToken): CSSProperties | undefined {
-    const style = token.fontStyle ?? 0;
-    if (token.color === undefined && style <= 0) {
-        return undefined;
-    }
-    const decorations = [style & 4 ? 'underline' : '', style & 8 ? 'line-through' : ''].filter(Boolean).join(' ');
-    return {
-        color: token.color,
-        ...(style & 1 ? { fontStyle: 'italic' } : {}),
-        ...(style & 2 ? { fontWeight: 'bold' } : {}),
-        ...(decorations ? { textDecoration: decorations } : {})
-    };
-}
-
 /* A line whose tokens did not change keeps its elements, so a selection in it survives the next delta. */
 const CodeLine = memo(function CodeLine({ tokens }: { tokens: CodeToken[] }) {
     return (
         <span className="line">
             {tokens.map((token, index) => (
-                <span key={index} style={styleOf(token)}>
+                <span key={index} style={tokenStyle(token)}>
                     {token.content}
                 </span>
             ))}
@@ -124,17 +28,20 @@ const CodeLine = memo(function CodeLine({ tokens }: { tokens: CodeToken[] }) {
 /*
  * A fenced block, highlighted a line at a time. Until shiki and the grammar are there it holds its
  * place invisibly, so bare code never turns colored. An open fence is tokenized as it grows, and
- * closing it does not draw it again.
+ * closing it does not draw it again. `view` takes the place of the code, such as what the code draws,
+ * and Copy still copies the code.
  */
-export function CodeBlock({ code, lang, actions }: { code: string; lang: string; actions?: ReactNode }) {
+export function CodeBlock({ code, lang, actions, view }: { code: string; lang: string; actions?: ReactNode; view?: ReactNode }) {
     const { t } = useTranslation('agent-chat');
     const theme = useCodeTheme();
+    const { custom } = useChatHost().code;
+    const highlighter = useCodeHighlighter();
     const streaming = useContext(CodeStreamingContext);
     const [copyState, setCopyState] = useState<'idle' | 'copying' | 'copied' | 'failed'>('idle');
     const copying = useRef(false);
     // What loaded last, so a block whose theme changes draws again once the new one is in.
     const [loaded, setLoaded] = useState<string | null>(null);
-    const tokenizer = tokenizerFor(lang, theme);
+    const tokenizer = highlighter.tokenizer(lang, theme);
     // Only a block that had to wait fades in; one drawn highlighted from its first frame just stands there.
     const [waited] = useState(tokenizer === null);
     const lines = useMemo(() => (tokenizer ? new IncrementalLines(tokenizer.tokenize) : null), [tokenizer]);
@@ -170,34 +77,36 @@ export function CodeBlock({ code, lang, actions }: { code: string; lang: string;
             return;
         }
         let cancelled = false;
-        Promise.all([loadLanguage(lang), loadTheme(theme)])
+        Promise.all([highlighter.loadLanguage(lang), highlighter.loadTheme(theme, custom)])
             .then(() => !cancelled && setLoaded(`${lang}:${theme}`))
             .catch(() => !cancelled && setLoaded('failed'));
         return () => {
             cancelled = true;
         };
-    }, [lang, theme, tokenizer]);
+    }, [highlighter, lang, theme, custom, tokenizer]);
 
     const pending = (tokenizer === null || tokens === null) && loaded !== 'failed';
     return (
         <div className="chat-code" data-copy-state={copyState}>
-            <pre
-                className={clsx(pending && 'invisible', !pending && tokens !== null && waited && WHOLE_FADE_CLASS)}
-                aria-hidden={pending || undefined}
-                style={{ color: tokenizer?.fg }}
-            >
-                <code>
-                    {tokens === null
-                        ? code
-                        : tokens.map((line, index) => (
-                              // Lines only ever grow at the end, so the place of a line is a stable key.
-                              <Fragment key={index}>
-                                  <CodeLine tokens={line} />
-                                  {index < tokens.length - 1 && '\n'}
-                              </Fragment>
-                          ))}
-                </code>
-            </pre>
+            {view ?? (
+                <pre
+                    className={clsx(pending && 'invisible', !pending && tokens !== null && waited && WHOLE_FADE_CLASS)}
+                    aria-hidden={pending || undefined}
+                    style={{ color: tokenizer?.fg }}
+                >
+                    <code>
+                        {tokens === null
+                            ? code
+                            : tokens.map((line, index) => (
+                                  // Lines only ever grow at the end, so the place of a line is a stable key.
+                                  <Fragment key={index}>
+                                      <CodeLine tokens={line} />
+                                      {index < tokens.length - 1 && '\n'}
+                                  </Fragment>
+                              ))}
+                    </code>
+                </pre>
+            )}
             <ButtonGroup className="chat-code-actions" role="group" aria-label={t('code.actions')}>
                 <IconButton
                     icon={copyState === 'copied' ? Check : Copy}