@adecore/agents-react 0.23.1 → 0.24.1

package/dist/chat/preferences.d.ts

@@ -1,10 +1,14 @@
 import type { AgentKind, ChatPreferencesPayload, ModelSelection, ProviderInfo, ProviderAccounts, RuntimeMode } from '@adecore/agent-contracts';
+import { type ChatReadingWidth } from './reading-width.js';
+import { type ChatSendKey } from './send-key.js';
 export interface ChatPreferences {
     selectionByProvider: Partial<Record<AgentKind, ModelSelection>>;
     lastProvider: AgentKind | null;
     runtimeMode: RuntimeMode;
     terminalRuntimeMode: RuntimeMode;
     accountByMachine: Record<string, Partial<Record<AgentKind, string>>>;
+    readingWidth: ChatReadingWidth;
+    sendKey: ChatSendKey;
     changedAt: number;
 }
 export declare const DEFAULT_CHAT_PREFERENCES: ChatPreferences;
@@ -22,6 +26,8 @@ export declare let CHAT_PREFERENCES_KEY: string;
 export declare function chatPreferencesKey(): string;
 export declare function reloadChatPreferences(): void;
 export declare function rememberChatPreferences(patch: Partial<ChatPreferences>): void;
+export declare function rememberReadingWidth(readingWidth: ChatReadingWidth): void;
+export declare function rememberSendKey(sendKey: ChatSendKey): void;
 export declare function rememberChatSelection(provider: AgentKind, selection: ModelSelection): void;
 export declare function rememberChatAccount(scopeId: string, provider: AgentKind, account: string | null): void;
 export declare function forgetChatSelection(provider: AgentKind): void;

package/dist/chat/preferences.js

@@ -1,5 +1,7 @@
 import { chatStorageKey, chatStorageLegacyKeys, createChatStore, onChatStorageConfiguration } from '../storage.js';
 import { persistedJson } from './persisted-json.js';
+import { DEFAULT_READING_WIDTH, isChatReadingWidth } from './reading-width.js';
+import { DEFAULT_SEND_KEY, isChatSendKey } from './send-key.js';
 const storageKey = () => chatStorageKey('preferences');
 export const DEFAULT_CHAT_PREFERENCES = {
     selectionByProvider: {},
@@ -7,6 +9,8 @@ export const DEFAULT_CHAT_PREFERENCES = {
     runtimeMode: 'full-access',
     terminalRuntimeMode: 'full-access',
     accountByMachine: {},
+    readingWidth: DEFAULT_READING_WIDTH,
+    sendKey: DEFAULT_SEND_KEY,
     changedAt: 0
 };
 /*
@@ -26,6 +30,8 @@ export function parseChatPreferences(raw) {
             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
         };
     }
@@ -108,15 +114,25 @@ export function chatPreferencesKey() {
 export function reloadChatPreferences() {
     useChatPreferences.setState(storage.read(), true);
 }
+function store(preferences) {
+    useChatPreferences.setState(preferences);
+    storage.write(preferences);
+}
 function write(preferences) {
-    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. */
 export function rememberChatPreferences(patch) {
     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) {
+    store({ ...useChatPreferences.getState(), readingWidth });
+}
+/* Leaves `changedAt` alone, like the reading width. */
+export function rememberSendKey(sendKey) {
+    store({ ...useChatPreferences.getState(), sendKey });
+}
 export function rememberChatSelection(provider, selection) {
     const current = useChatPreferences.getState();
     const previous = current.selectionByProvider[provider];

package/dist/chat/reading-width.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+export type ChatReadingWidth = 'narrow' | 'comfortable' | 'full';
+export declare const CHAT_READING_WIDTHS: readonly ChatReadingWidth[];
+export declare const DEFAULT_READING_WIDTH: ChatReadingWidth;
+export declare function isChatReadingWidth(value: unknown): value is ChatReadingWidth;
+export declare function readingMeasure(width: ChatReadingWidth): number;
+export declare function readingWidthStyle(width: ChatReadingWidth): CSSProperties;
+export declare function readingWidthLabel(width: ChatReadingWidth): string;
+export declare function readingWidthHint(width: ChatReadingWidth): string;

package/dist/chat/reading-width.js

@@ -0,0 +1,27 @@
+import i18next from 'i18next';
+export const CHAT_READING_WIDTHS = ['narrow', 'comfortable', 'full'];
+export const DEFAULT_READING_WIDTH = 'comfortable';
+// About 75 and 90 characters of the thread's text a line.
+const MEASURES = {
+    narrow: 640,
+    comfortable: 768,
+    full: Number.POSITIVE_INFINITY
+};
+export function isChatReadingWidth(value) {
+    return typeof value === 'string' && CHAT_READING_WIDTHS.includes(value);
+}
+/* The widest the content column runs, in pixels; `full` is unbounded. */
+export function readingMeasure(width) {
+    return MEASURES[width];
+}
+/* What `.chat-column-content` and `.chat-composer-content` read their width from. */
+export function readingWidthStyle(width) {
+    const measure = MEASURES[width];
+    return { '--chat-measure': Number.isFinite(measure) ? `${measure}px` : '100%' };
+}
+export function readingWidthLabel(width) {
+    return i18next.t(`agent-chat:readingWidth.${width}.label`);
+}
+export function readingWidthHint(width) {
+    return i18next.t(`agent-chat:readingWidth.${width}.hint`);
+}

package/dist/chat/send-key.d.ts

@@ -0,0 +1,10 @@
+import { type Shortcut } from '@adecore/ui';
+export type ChatSendKey = 'enter' | 'mod-enter-multiline' | 'mod-enter';
+export declare const CHAT_SEND_KEYS: readonly ChatSendKey[];
+export declare const DEFAULT_SEND_KEY: ChatSendKey;
+export declare const SEND_AND_NEW_SHORTCUT: Shortcut;
+export declare function isChatSendKey(value: unknown): value is ChatSendKey;
+export declare function modSends(sendKey: ChatSendKey, multiline: boolean): boolean;
+export declare function sendShortcut(sendKey: ChatSendKey, multiline: boolean): Shortcut;
+export declare function sendKeyLabel(sendKey: ChatSendKey, apple: boolean): string;
+export declare function sendKeyHint(sendKey: ChatSendKey, apple: boolean): string;

package/dist/chat/send-key.js

@@ -0,0 +1,24 @@
+import i18next from 'i18next';
+import { KEY_SHORTCUTS, shortcut } from '@adecore/ui';
+export const CHAT_SEND_KEYS = ['enter', 'mod-enter-multiline', 'mod-enter'];
+export const DEFAULT_SEND_KEY = '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) {
+    return typeof value === 'string' && CHAT_SEND_KEYS.includes(value);
+}
+/* Whether Enter alone adds a line to a message, so only Mod+Enter sends it. */
+export function modSends(sendKey, multiline) {
+    return sendKey === 'mod-enter' || (sendKey === 'mod-enter-multiline' && multiline);
+}
+/* The key that sends a message, as a hint prints it. */
+export function sendShortcut(sendKey, multiline) {
+    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, apple) {
+    return i18next.t(`agent-chat:sendKey.${sendKey}.label`, { mod: apple ? '⌘' : 'Ctrl' });
+}
+export function sendKeyHint(sendKey, apple) {
+    return i18next.t(`agent-chat:sendKey.${sendKey}.hint`, { mod: apple ? '⌘' : 'Ctrl' });
+}

package/dist/chat/ui/BookmarkMarker.js

@@ -6,6 +6,7 @@ import { Bookmark, Pencil, X } from 'lucide-react';
 import { CHAT_BOOKMARK_LIMITS } from '@adecore/agent-contracts';
 import { nameBookmark, removeBookmark, useBookmarkNaming } from '../bookmarks.js';
 import { bookmarkLabel } from '../logic/bookmarks.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { ButtonGroup, Icon, IconButton, Input } from '@adecore/ui';
 /*
@@ -15,6 +16,7 @@ import { ButtonGroup, Icon, IconButton, Input } from '@adecore/ui';
 export function BookmarkMarker({ chatId, itemId, bookmark }) {
     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);
     if (bookmark === null && !naming) {
@@ -23,9 +25,9 @@ export function BookmarkMarker({ chatId, itemId, bookmark }) {
     return (_jsxs("div", { className: "group/bookmark mb-2 flex h-7 min-w-0 items-center gap-2 text-xs select-none", children: [_jsx(Icon, { icon: Bookmark, size: 14, className: "shrink-0 text-accent" }), naming ? (_jsx(NameField, { initial: bookmark?.name ?? '', 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);
                     }
-                } })) : (bookmark !== null && (_jsx("span", { className: clsx('min-w-0 truncate', bookmark.name === undefined ? 'text-text-muted' : 'text-text'), children: bookmarkLabel(bookmark) }))), _jsx("span", { className: "min-w-6 grow border-t border-border" }), bookmark !== null && !naming && (_jsxs(ButtonGroup, { render: _jsx("span", {}), 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", children: [_jsx(IconButton, { icon: Pencil, size: "xs", label: t('bookmarks.rename'), onClick: () => useBookmarkNaming.getState().open(chatKey, itemId) }), _jsx(IconButton, { icon: X, size: "xs", label: t('bookmarks.remove'), onClick: () => void removeBookmark(scope, chatId, bookmark) })] }))] }));
+                } })) : (bookmark !== null && (_jsx("span", { className: clsx('min-w-0 truncate', bookmark.name === undefined ? 'text-text-muted' : 'text-text'), children: bookmarkLabel(bookmark) }))), _jsx("span", { className: "min-w-6 grow border-t border-border" }), bookmark !== null && !naming && (_jsxs(ButtonGroup, { render: _jsx("span", {}), 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", children: [_jsx(IconButton, { icon: Pencil, size: "xs", label: t('bookmarks.rename'), onClick: () => useBookmarkNaming.getState().open(chatKey, itemId) }), _jsx(IconButton, { icon: X, size: "xs", label: t('bookmarks.remove'), onClick: () => void removeBookmark(scope, host, chatId, bookmark) })] }))] }));
 }
 /* Settles with the name on Enter or when the focus leaves, and with null on Escape, which keeps the name as it was. */
 function NameField({ initial, onDone }) {

package/dist/chat/ui/BookmarkSubmenu.js

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Bookmark, Pencil, X } from 'lucide-react';
 import { goToBookmark, removeBookmark } from '../bookmarks.js';
 import { bookmarkLabel, bookmarksInThreadOrder } from '../logic/bookmarks.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow } from '../../state/chats.js';
 import { Icon, Menu } from '@adecore/ui';
@@ -15,7 +15,8 @@ export function BookmarkSubmenu({ chatId }) {
     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;
@@ -25,5 +26,5 @@ export function BookmarkSubmenu({ chatId }) {
             place.go();
         }
     };
-    return (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { children: [_jsx(Icon, { icon: Bookmark, size: 14 }), " ", t('bookmarks.menu')] }), _jsx(Menu.Popup, { className: "max-w-80 min-w-56", children: sorted.map((bookmark) => (_jsxs(Menu.Row, { "aria-label": bookmarkLabel(bookmark), children: [_jsxs(Menu.Item, { onClick: () => go(bookmark.itemId, false), children: [_jsx(Icon, { icon: Bookmark, size: 14, className: "shrink-0 text-accent" }), _jsx("span", { className: clsx('min-w-0 grow truncate', bookmark.name === undefined && 'text-text-muted'), children: bookmarkLabel(bookmark) })] }), _jsx(Menu.RowAction, { icon: Pencil, label: t('bookmarks.rename'), onClick: () => go(bookmark.itemId, true) }), _jsx(Menu.RowAction, { icon: X, label: t('bookmarks.remove'), onClick: () => void removeBookmark(scope, chatId, bookmark) })] }, bookmark.itemId))) })] }));
+    return (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { children: [_jsx(Icon, { icon: Bookmark, size: 14 }), " ", t('bookmarks.menu')] }), _jsx(Menu.Popup, { className: "max-w-80 min-w-56", children: sorted.map((bookmark) => (_jsxs(Menu.Row, { "aria-label": bookmarkLabel(bookmark), children: [_jsxs(Menu.Item, { onClick: () => go(bookmark.itemId, false), children: [_jsx(Icon, { icon: Bookmark, size: 14, className: "shrink-0 text-accent" }), _jsx("span", { className: clsx('min-w-0 grow truncate', bookmark.name === undefined && 'text-text-muted'), children: bookmarkLabel(bookmark) })] }), _jsx(Menu.RowAction, { icon: Pencil, label: t('bookmarks.rename'), onClick: () => go(bookmark.itemId, true) }), _jsx(Menu.RowAction, { icon: X, label: t('bookmarks.remove'), onClick: () => void removeBookmark(scope, host, chatId, bookmark) })] }, bookmark.itemId))) })] }));
 }

package/dist/chat/ui/ChatActivity.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } 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 { backgroundCounts } from '../activity.js';
@@ -11,7 +12,7 @@ import { SubagentStopButton } from './SubagentStopButton.js';
 import { formatElapsedShort } from '@adecore/ui/format';
 import { Icon, IconButton, Popover, Surface, useNow } from '@adecore/ui';
 import { useChatRow, useChats } from '../../state/chats.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatActions } from '../actions.js';
 import { statusLookOf } from '../../agents/status-look.js';
@@ -20,18 +21,19 @@ const NO_ITEMS = [];
 const ROW_BODY = 'flex min-h-9 min-w-0 grow items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left';
 /* 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 }) {
+    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 progress = useMemo(() => progressOf(subagents.map((item) => {
+    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, 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);
-    })), [subagents, tasks, statuses, keyOf]);
+        return taskRowStateOf(item, taskId === null ? null : (tasks?.[taskId] ?? null), children[index]);
+    })), [subagents, tasks, children]);
     const words = useMemo(() => subagents.map((item) => {
         const taskId = taskIdOf(item);
         return statusWordOf(item, taskId === null ? null : (tasks?.[taskId] ?? null));
@@ -41,7 +43,7 @@ export function ChatActivity({ chatId }) {
         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 })]
@@ -73,10 +75,11 @@ function SubagentRows({ chatId, items }) {
     return items.map((item) => _jsx(SubagentEntry, { chatId: chatId, item: item, now: now }, item.id));
 }
 function SubagentEntry({ chatId, item, now }) {
+    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);
@@ -85,13 +88,14 @@ function SubagentEntry({ chatId, item, now }) {
 }
 /* Only drawn while the flyout is open, so the clock ticks for nobody otherwise. */
 function BackgroundTaskRows({ chatId, tasks }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const now = useNow(1000);
     const actions = useChatActions();
     function stop(taskId) {
         void actions.stopTask(chatId, taskId).catch((e) => {
             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 });
         });
     }
     return tasks.map((task) => (_jsx(ActivityRow, { icon: _jsx(Icon, { icon: task.kind === 'shell' ? SquareTerminal : Activity, size: 14, className: "shrink-0 text-text-faint" }), title: task.description || task.command || t(`activity.${task.kind}`), detail: task.description ? task.command : null, time: formatElapsedShort(now - task.startedAt), children: _jsx(IconButton, { icon: Square, size: "xs", label: t('activity.stop'), className: "mr-1.5", onClick: () => stop(task.id) }) }, task.id)));

package/dist/chat/ui/ChatReferenceChip.js

@@ -2,15 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { MessageSquare, X } from 'lucide-react';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { CHIP_IN_MESSAGE, MENTION_TONE } from './chips.js';
 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 }) {
+    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 (_jsxs("span", { className: clsx(MENTION_TONE, CHIP_IN_MESSAGE), children: [_jsx(Icon, { icon: MessageSquare, size: 12, className: "shrink-0" }), _jsx("span", { className: "truncate", children: title }), onRemove && (_jsx(Tooltip, { label: t('chatReference.remove', { title }), name: true, children: _jsx("button", { className: "-mr-0.5 shrink-0 rounded-sm opacity-70 hover:opacity-100", onClick: onRemove, children: _jsx(Icon, { icon: X, size: 12 }) }) }))] }));
 }

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

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
-export declare function CodeBlock({ code, lang, actions }: {
+export declare function CodeBlock({ code, lang, actions, view }: {
     code: string;
     lang: string;
     actions?: ReactNode;
+    view?: ReactNode;
 }): import("react").JSX.Element;

package/dist/chat/ui/CodeBlock.js

@@ -7,113 +7,31 @@ import { ButtonGroup, IconButton } from '@adecore/ui';
 import { IncrementalLines } from './code-lines.js';
 import { CodeStreamingContext } from './code-streaming.js';
 import { WHOLE_FADE_CLASS } from './rehype-fade.js';
-import { shikiThemeOf, useCodeTheme } from './code-theme.js';
-// A plain language needs no grammar; shiki draws it in the theme's own foreground.
-const PLAIN = 'text';
+import { useChatHost } from '../../host.js';
+import { useCodeTheme } from './code-theme.js';
+import { tokenStyle, useCodeHighlighter } from './highlighter.js';
 const COPIED_MS = 1500;
-let highlighter = null;
-let highlighterLoad = null;
-const loadedLanguages = new Set([PLAIN]);
-const languageLoads = new Map();
-const loadedThemes = new Set();
-const themeLoads = new Map();
-const tokenizers = new Map();
-// Shiki loads on the first code block, not with the app; the web bundle covers the languages a coding agent writes.
-function loadHighlighter() {
-    highlighterLoad ??= import('shiki/bundle/web').then(async ({ createHighlighter }) => {
-        highlighter = await createHighlighter({ themes: [], langs: [] });
-        return highlighter;
-    });
-    return highlighterLoad;
-}
-function resolveLanguage(lang, known) {
-    return known !== null && lang in known ? lang : PLAIN;
-}
-let bundled = null;
-/* Loads the highlighter and the grammar of one language, once each. */
-function loadLanguage(lang) {
-    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);
-                loadedLanguages.add(language);
-            }
-        });
-        languageLoads.set(lang, load);
-    }
-    return load;
-}
-/* Loads a theme into the highlighter, once. */
-function loadTheme(theme) {
-    let load = themeLoads.get(theme);
-    if (!load) {
-        load = loadHighlighter().then(async (loaded) => {
-            await loaded.loadTheme(shikiThemeOf(theme));
-            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, theme) {
-    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, 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) {
-    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 }) {
-    return (_jsx("span", { className: "line", children: tokens.map((token, index) => (_jsx("span", { style: styleOf(token), children: token.content }, index))) }));
+    return (_jsx("span", { className: "line", children: tokens.map((token, index) => (_jsx("span", { style: tokenStyle(token), children: token.content }, index))) }));
 });
 /*
  * 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 }) {
+export function CodeBlock({ code, lang, actions, view }) {
     const { t } = useTranslation('agent-chat');
     const theme = useCodeTheme();
+    const { custom } = useChatHost().code;
+    const highlighter = useCodeHighlighter();
     const streaming = useContext(CodeStreamingContext);
     const [copyState, setCopyState] = useState('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(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]);
@@ -148,15 +66,15 @@ export function CodeBlock({ code, lang, actions }) {
             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 (_jsxs("div", { className: "chat-code", "data-copy-state": copyState, children: [_jsx("pre", { className: clsx(pending && 'invisible', !pending && tokens !== null && waited && WHOLE_FADE_CLASS), "aria-hidden": pending || undefined, style: { color: tokenizer?.fg }, children: _jsx("code", { children: tokens === null
+    return (_jsxs("div", { className: "chat-code", "data-copy-state": copyState, children: [view ?? (_jsx("pre", { className: clsx(pending && 'invisible', !pending && tokens !== null && waited && WHOLE_FADE_CLASS), "aria-hidden": pending || undefined, style: { color: tokenizer?.fg }, children: _jsx("code", { children: tokens === null
                         ? code
-                        : tokens.map((line, index) => (_jsxs(Fragment, { children: [_jsx(CodeLine, { tokens: line }), index < tokens.length - 1 && '\n'] }, index))) }) }), _jsxs(ButtonGroup, { className: "chat-code-actions", role: "group", "aria-label": t('code.actions'), children: [_jsx(IconButton, { icon: copyState === 'copied' ? Check : Copy, size: "sm", label: copyState === 'copied' ? t('timeline.actions.copied') : t('timeline.menu.copyCode'), busy: copyState === 'copying', "aria-busy": copyState === 'copying', "aria-disabled": copyState === 'copying', onClick: () => void copy() }), actions] }), _jsx("span", { className: "sr-only", role: "status", children: copyState === 'copied' ? t('timeline.actions.copied') : '' }), copyState === 'failed' && (_jsx("p", { className: "chat-code-error", role: "alert", children: t('code.copyFailed') }))] }));
+                        : tokens.map((line, index) => (_jsxs(Fragment, { children: [_jsx(CodeLine, { tokens: line }), index < tokens.length - 1 && '\n'] }, index))) }) })), _jsxs(ButtonGroup, { className: "chat-code-actions", role: "group", "aria-label": t('code.actions'), children: [_jsx(IconButton, { icon: copyState === 'copied' ? Check : Copy, size: "sm", label: copyState === 'copied' ? t('timeline.actions.copied') : t('timeline.menu.copyCode'), busy: copyState === 'copying', "aria-busy": copyState === 'copying', "aria-disabled": copyState === 'copying', onClick: () => void copy() }), actions] }), _jsx("span", { className: "sr-only", role: "status", children: copyState === 'copied' ? t('timeline.actions.copied') : '' }), copyState === 'failed' && (_jsx("p", { className: "chat-code-error", role: "alert", children: t('code.copyFailed') }))] }));
 }

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

@@ -8,7 +8,7 @@ interface ComposerProps {
     disabled: boolean;
     readOnly?: boolean;
     providerFixed: boolean;
-    onSend(text: string, extras: ChatSendExtras): void;
+    onSend(text: string, extras: ChatSendExtras): void | Promise<boolean>;
     onRetarget(provider: AgentKind, selection: ModelSelection): Promise<void>;
 }
 export declare function Composer({ chatId, info, focused, answerPromptsElsewhere, disabled, readOnly, providerFixed, onSend, onRetarget }: ComposerProps): import("react").JSX.Element;