@adecore/agents-react 0.23.0 → 0.24.0

package/dist/chat/ui/composer/use-draft-files.js

@@ -0,0 +1,111 @@
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EditorView } from '@codemirror/view';
+import { useChatHost } from '../../../host.js';
+import { checkAttachmentLimits, filesOf, readAttachments, uploadBytes } from '../../attachments.js';
+import { pasteBecomesAttachment, pastedTextName } from '../../guards.js';
+import { carriesMentions, droppedMentions, pastedMentions } from '../../mentions.js';
+/* The card turns dropped files and paths into attachments and chips; CodeMirror would also paste their text at the drop point. */
+export const LEAVE_DROPS_TO_THE_CARD = EditorView.domEventHandlers({
+    drop: (event) => event.dataTransfer !== null && (event.dataTransfer.types.includes('Files') || carriesMentions(event.dataTransfer.types))
+});
+/* What reaches the draft besides typing: files as attachments, dragged paths as mentions, and a long paste as a file of its own. */
+export function useDraftFiles({ capabilities, providerName, writable, draft: { draft, setDraft, setText }, inputRef, setNotice }) {
+    const { t } = useTranslation('agent-chat');
+    const { isApplePlatform } = useChatHost();
+    const [dragging, setDragging] = useState(false);
+    // A paste event says nothing about the keys behind it, so the key that asked for text inline is remembered here.
+    const pasteInline = useRef(false);
+    /* Paths dragged in from a list of files. With no mention query to insert into, they land at the end of the prompt. */
+    const addMentions = (paths) => {
+        const fresh = paths.filter((path) => path !== '');
+        if (fresh.length === 0 || capabilities?.mentions === false) {
+            return;
+        }
+        const appended = fresh.map((path) => `@${path}`).join(' ');
+        const before = draft.text.replace(/\s+$/, '');
+        setText(before === '' ? `${appended} ` : `${before} ${appended} `, [...draft.mentions, ...fresh.filter((path) => !draft.mentions.includes(path))]);
+    };
+    const addFiles = (incoming) => {
+        if (incoming.length === 0) {
+            return;
+        }
+        if (capabilities?.attachments === false) {
+            setNotice(t('composer.notice.noAttachments', { agent: providerName ?? t('composer.notice.thisAgent') }));
+            return;
+        }
+        const checked = checkAttachmentLimits(draft.attachments.length, incoming.map((file) => ({ name: file.name, mime: file.type, bytes: file.size, file })), draft.attachments.reduce((bytes, attachment) => bytes + uploadBytes(attachment), 0));
+        if (checked.rejected[0]) {
+            setNotice(t('composer.notice.rejected', { name: checked.rejected[0].name || t('composer.notice.thatFile'), reason: checked.rejected[0].reason }));
+        }
+        if (checked.accepted.length === 0) {
+            return;
+        }
+        readAttachments(checked.accepted.map((entry) => entry.file))
+            .then((attachments) => setDraft((current) => ({ ...current, attachments: [...current.attachments, ...attachments] })))
+            .catch(() => setNotice(t('composer.notice.unreadable')));
+    };
+    /* Shift with the paste shortcut pastes a large text inline after all; any other key forgets it. */
+    const noteKey = (e) => {
+        pasteInline.current = e.shiftKey && e.key.toLowerCase() === 'v' && (isApplePlatform() ? e.metaKey : e.ctrlKey);
+    };
+    /* Files become attachments and a long text a file of its own; anything else the editor pastes as plain text. */
+    const onPaste = (e, view) => {
+        const data = e.clipboardData;
+        if (!data) {
+            return false;
+        }
+        const pasted = filesOf(data);
+        if (pasted.length > 0) {
+            addFiles(pasted);
+            return true;
+        }
+        const inline = pasteInline.current;
+        pasteInline.current = false;
+        const clip = data.getData('text/plain');
+        const mentions = capabilities?.mentions === false ? [] : pastedMentions(clip);
+        if (mentions.length > 0) {
+            // The editor's own change reads the draft as it was rendered, so the mentions join it after that change.
+            view.dispatch(view.state.replaceSelection(clip), { scrollIntoView: true, userEvent: 'input.paste' });
+            setDraft((current) => ({ ...current, mentions: [...current.mentions, ...mentions.filter((path) => !current.mentions.includes(path))] }));
+            return true;
+        }
+        // Without attachments there is nowhere else for the text to go, so it pastes as it always did.
+        if (inline || capabilities?.attachments === false || !pasteBecomesAttachment(clip)) {
+            return false;
+        }
+        // The paste still replaces what was selected; it just puts nothing in its place.
+        const { from, to } = view.state.selection.main;
+        if (from !== to) {
+            view.dispatch({ changes: { from, to }, userEvent: 'delete' });
+        }
+        const name = pastedTextName(draft.attachments.map((attachment) => attachment.name));
+        addFiles([new File([clip], name, { type: 'text/plain' })]);
+        return true;
+    };
+    /* The whole card takes a dropped file, so a layout around it that takes drops of its own leaves it alone. */
+    const dropTarget = {
+        'data-takes-drop': 'all',
+        onDragOver: (e) => {
+            if (writable && (e.dataTransfer.types.includes('Files') || carriesMentions(e.dataTransfer.types))) {
+                e.preventDefault();
+                e.stopPropagation();
+                setDragging(true);
+            }
+        },
+        onDragLeave: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                setDragging(false);
+            }
+        },
+        onDrop: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDragging(false);
+            addMentions(droppedMentions(e.dataTransfer));
+            addFiles(filesOf(e.dataTransfer));
+            inputRef.current?.focus();
+        }
+    };
+    return { dragging, dropTarget, addFiles, noteKey, onPaste };
+}

package/dist/chat/ui/composer/use-notice.d.ts

@@ -0,0 +1,6 @@
+export interface ComposerNotice {
+    notice: string | null;
+    setNotice(notice: string | null): void;
+    showError(error: unknown): void;
+}
+export declare function useNotice(): ComposerNotice;

package/dist/chat/ui/composer/use-notice.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+const NOTICE_MS = 4000;
+/* A line under the box that says what went wrong, gone again after a few seconds. */
+export function useNotice() {
+    const [notice, setNotice] = useState(null);
+    useEffect(() => {
+        if (!notice) {
+            return;
+        }
+        const timer = setTimeout(() => setNotice(null), NOTICE_MS);
+        return () => clearTimeout(timer);
+    }, [notice]);
+    return {
+        notice,
+        setNotice,
+        showError: (error) => setNotice(error instanceof Error ? error.message : String(error))
+    };
+}

package/dist/chat/ui/composer/use-pending-requests.d.ts

@@ -0,0 +1,2 @@
+import type { ChatApprovalItem, ChatQuestionItem } from '@adecore/agent-contracts';
+export declare function usePendingRequests(chatId: string): Array<ChatApprovalItem | ChatQuestionItem>;

package/dist/chat/ui/composer/use-pending-requests.js

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { useChatRow, waitingRequestsOf } from '../../../state/chats.js';
+/* The approvals and then the questions the chat waits on, which take the composer's place until answered. */
+export function usePendingRequests(chatId) {
+    // The structure, which a delta leaves alone. The prompts and the requests are items of their own.
+    const structure = useChatRow(chatId, (row) => row?.structure);
+    const order = useChatRow(chatId, (row) => row?.order);
+    const waitingBefore = useChatRow(chatId, (row) => row?.waitingBefore);
+    return useMemo(() => {
+        const approvals = [];
+        const questions = [];
+        for (const item of waitingRequestsOf(structure && order ? { structure, order, waitingBefore } : undefined)) {
+            if (item.kind === 'approval') {
+                approvals.push(item);
+            }
+            else {
+                questions.push(item);
+            }
+        }
+        return [...approvals, ...questions];
+    }, [structure, order, waitingBefore]);
+}

package/dist/chat/ui/composer/use-prompt-history.d.ts

@@ -0,0 +1,8 @@
+export interface PromptHistory {
+    recalled(text: string): boolean;
+    recall(direction: -1 | 1): boolean;
+    forget(): void;
+    leave(): boolean;
+    edited(text: string): void;
+}
+export declare function usePromptHistory(chatId: string, setText: (next: string, mentions?: string[], skills?: string[]) => void): PromptHistory;

package/dist/chat/ui/composer/use-prompt-history.js

@@ -0,0 +1,57 @@
+import { useMemo, useState } from 'react';
+import { useChatRow } from '../../../state/chats.js';
+// How many sent prompts the arrow keys walk back through, per chat.
+const PROMPT_HISTORY = 50;
+/* The prompts sent in this chat, for the arrow keys to put back in an empty box. */
+export function usePromptHistory(chatId, setText) {
+    const order = useChatRow(chatId, (row) => row?.order);
+    const items = useChatRow(chatId, (row) => row?.structure);
+    const [index, setIndex] = useState(null);
+    const history = useMemo(() => {
+        const prompts = [];
+        for (const id of order ?? []) {
+            const item = items?.[id];
+            if (item?.kind === 'user') {
+                prompts.push({ text: item.text, mentions: item.mentions ?? [] });
+            }
+        }
+        // Walking back further than this is faster with the timeline than with the arrow key.
+        return prompts.slice(-PROMPT_HISTORY);
+    }, [order, items]);
+    const recall = (direction) => {
+        if (history.length === 0) {
+            return false;
+        }
+        const next = index === null ? (direction === -1 ? history.length - 1 : null) : index + direction;
+        if (next === null || next >= history.length) {
+            setIndex(null);
+            setText('', [], []);
+            return true;
+        }
+        if (next < 0) {
+            return true;
+        }
+        setIndex(next);
+        setText(history[next].text, history[next].mentions);
+        return true;
+    };
+    const leave = () => {
+        if (index === null) {
+            return false;
+        }
+        setIndex(null);
+        setText('', [], []);
+        return true;
+    };
+    return {
+        recalled: (text) => index !== null && text === history[index]?.text,
+        recall,
+        forget: () => setIndex(null),
+        leave,
+        edited: (text) => {
+            if (index !== null && text !== history[index]?.text) {
+                setIndex(null);
+            }
+        }
+    };
+}

package/dist/chat/ui/composer/use-prompt-hold.d.ts

@@ -0,0 +1,6 @@
+import type { PromptHold } from '../PromptComposer.js';
+export type ComposerPromptHold = PromptHold & {
+    noteInput(): void;
+    setComposing(composing: boolean): void;
+};
+export declare function usePromptHold(): ComposerPromptHold;

package/dist/chat/ui/composer/use-prompt-hold.js

@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from 'react';
+import { holdLiftsIn } from '../../prompt-hold.js';
+/*
+ * Keeps a waiting prompt card behind the draft while the person types. Typing, pasting and dictating
+ * all change the draft, so `noteInput` is called from its change handler; the hold lifts after a pause.
+ */
+export function usePromptHold() {
+    const typedAt = useRef(null);
+    const composing = useRef(false);
+    const timer = useRef(null);
+    const [state, setState] = useState({ held: false, releasedBy: null });
+    const clearTimer = () => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+    };
+    const release = (reason) => {
+        clearTimer();
+        typedAt.current = null;
+        composing.current = false;
+        setState((current) => (current.held ? { held: false, releasedBy: reason } : current));
+    };
+    const schedule = () => {
+        clearTimer();
+        const wait = holdLiftsIn({ typedAt: typedAt.current, composing: composing.current }, Date.now());
+        if (wait !== null) {
+            timer.current = setTimeout(() => release('pause'), wait);
+        }
+    };
+    const noteInput = () => {
+        typedAt.current = Date.now();
+        setState({ held: true, releasedBy: null });
+        schedule();
+    };
+    const setComposing = (next) => {
+        composing.current = next;
+        if (next) {
+            setState({ held: true, releasedBy: null });
+        }
+        else {
+            typedAt.current = Date.now();
+        }
+        schedule();
+    };
+    useEffect(() => clearTimer, []);
+    return { held: state.held, releasedBy: state.releasedBy, release, noteInput, setComposing };
+}

package/dist/chat/ui/composer/use-take-back.d.ts

@@ -0,0 +1,13 @@
+import type { ChatQueuedMessage } from '@adecore/agent-contracts';
+import type { ComposerDraft } from './use-composer-draft.js';
+interface TakeBackInput {
+    chatId: string;
+    draft: ComposerDraft;
+    setNotice(notice: string): void;
+    onTaken(): void;
+}
+export declare function useTakeBack({ chatId, draft: { latest, setDraft }, setNotice, onTaken }: TakeBackInput): {
+    takingBack: string | null;
+    takeBack: (message: ChatQueuedMessage) => Promise<void>;
+};
+export {};

package/dist/chat/ui/composer/use-take-back.js

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useChatHost } from '../../../host.js';
+import { useChatScope } from '../../../scope.js';
+import { errorCode } from '../../../transport.js';
+import { useChatActions } from '../../actions.js';
+import { readStoredAttachments } from '../../attachments.js';
+import { takeBackIntoDraft } from '../../drafts.js';
+/* Takes a queued message out of the queue and back into the draft, to be edited before it goes. */
+export function useTakeBack({ chatId, draft: { latest, setDraft }, setNotice, onTaken }) {
+    const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
+    const scope = useChatScope();
+    const actions = useChatActions();
+    const [takingBack, setTakingBack] = useState(null);
+    /*
+     * The files come back from the machine before the message leaves the queue, since the machine only
+     * serves a file some message still holds. The machine's refusal is what says it already went out.
+     */
+    const takeBack = async (message) => {
+        if (takingBack !== null) {
+            return;
+        }
+        const failed = (e) => {
+            host.notify({ kind: 'error', title: t('composer.queue.editFailed'), description: e instanceof Error ? e.message : String(e) });
+        };
+        const readFiles = async () => {
+            const stored = message.attachments ?? [];
+            if (stored.length === 0) {
+                return [];
+            }
+            const files = host.attachments;
+            return readStoredAttachments((attachment) => files.read(scope.id, chatId, attachment.id), stored);
+        };
+        setTakingBack(message.id);
+        try {
+            let uploads;
+            try {
+                uploads = await readFiles();
+            }
+            catch (e) {
+                failed(e);
+                return;
+            }
+            const taken = {
+                text: message.text,
+                mentions: message.mentions ?? [],
+                skills: message.skills ?? [],
+                chats: message.chats ?? [],
+                attachments: uploads
+            };
+            // A file that would not fit is refused here, while the message still holds it on the machine.
+            const wouldReject = takeBackIntoDraft(latest.current, taken).rejected[0];
+            if (wouldReject) {
+                setNotice(t('composer.notice.queuedDoesNotFit', { name: wouldReject.name || t('composer.notice.thatFile'), reason: wouldReject.reason }));
+                return;
+            }
+            try {
+                await actions.unqueue(chatId, message.id);
+            }
+            catch (e) {
+                if (errorCode(e) === 'request-not-found') {
+                    host.notify({ kind: 'error', title: t('composer.queue.alreadySent') });
+                }
+                else {
+                    failed(e);
+                }
+                return;
+            }
+            const merged = takeBackIntoDraft(latest.current, taken);
+            setDraft(merged.draft);
+            if (merged.rejected[0]) {
+                setNotice(t('composer.notice.rejected', { name: merged.rejected[0].name, reason: merged.rejected[0].reason }));
+            }
+            onTaken();
+        }
+        finally {
+            setTakingBack(null);
+        }
+    };
+    return { takingBack, takeBack };
+}

package/dist/chat/ui/diff/EditorEditDiff.js

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { getFiletypeFromFileName } from '@pierre/diffs';
 import { DiffView } from '@adecore/editor-react';
 import { diffDocument, patchOf } from '@adecore/merge';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import { useDiffSourceTokens } from '../use-diff-source-tokens.js';
 import { diffSourceBudget } from './diff-source-budget.js';
 import { DiffOmitted } from './DiffOmitted.js';
@@ -13,10 +13,11 @@ import { canRenderEditorDiff, EDITOR_DIFF_LIMITS, EDITOR_DIFF_WORK } from './edi
 // Virtualized rows remount; retain the engine so their height does not return to the loading placeholder.
 const engines = new WeakMap();
 function ReadyDiff({ document, path, engine, wrap, fill, layout, maxHeight }) {
+    const host = useChatHost();
     useReviewSettled();
     const { t } = useTranslation('agent-chat');
-    const mode = chatHost().code.useMode();
-    const theme = chatHost().code.useThemes()[mode];
+    const mode = host.code.useMode();
+    const theme = host.code.useThemes()[mode];
     const language = getFiletypeFromFileName(path);
     const tokens = useDiffSourceTokens(document, language, theme);
     return (_jsx(DiffView, { engine: engine, document: document, tokens: tokens, theme: theme, maxHeight: maxHeight, unfoldLimits: EDITOR_DIFF_LIMITS, label: t('work.diffLabel', { path }), layout: layout, wrap: wrap, fill: fill, className: "chat-diff select-text" }));

package/dist/chat/ui/diff/LegacyDiffPool.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useWorkerPool } from '@pierre/diffs/react';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import DiffPool from '../DiffPool.js';
 export function LegacyDiffPool({ children }) {
+    const host = useChatHost();
     const outer = useWorkerPool();
-    const workerFactory = chatHost().code.legacyDiffWorker;
+    const workerFactory = host.code.legacyDiffWorker;
     if (outer !== undefined || workerFactory === undefined) {
         return children;
     }

package/dist/chat/ui/diff/LegacyEditDiff.js

@@ -3,11 +3,12 @@ import { LegacyDiffPool } from './LegacyDiffPool.js';
 import { useReviewSettled } from './review-settle.js';
 import { useMemo } from 'react';
 import { MultiFileDiff } from '@pierre/diffs/react';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import { useDiffTheme } from '../diff-theme.js';
 export default function LegacyEditDiff({ change, maxHeight }) {
+    const host = useChatHost();
     useReviewSettled();
-    const resolved = chatHost().code.useMode();
+    const resolved = host.code.useMode();
     const theme = useDiffTheme();
     const oldFile = useMemo(() => ({ name: change.path, contents: change.before }), [change.path, change.before]);
     const newFile = useMemo(() => ({ name: change.path, contents: change.after }), [change.path, change.after]);

package/dist/chat/ui/diff/LegacyUnifiedDiff.js

@@ -4,7 +4,7 @@ import { useReviewSettled } from './review-settle.js';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { FileDiff, PatchDiff } from '@pierre/diffs/react';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import { useDiffTheme } from '../diff-theme.js';
 import { fullFileDiff } from '../full-diff.js';
 /*
@@ -40,8 +40,9 @@ function lineClass(line) {
     return 'text-text-muted';
 }
 export default function LegacyUnifiedDiff({ change, overflow = 'wrap', diffStyle = 'unified', fill = false, contents, maxHeight }) {
+    const host = useChatHost();
     useReviewSettled();
-    const resolved = chatHost().code.useMode();
+    const resolved = host.code.useMode();
     const theme = useDiffTheme();
     const patch = useMemo(() => asPatch(change), [change]);
     const oldText = contents?.old;

package/dist/chat/ui/diff/syntax-runtime.d.ts

@@ -1,5 +1,6 @@
 import type { Highlighter, ThemeRegistration } from 'shiki';
 import { type DiffSyntaxDocument, type DiffSyntaxTokens } from '@adecore/editor/shiki-worker';
+import type { ChatHost } from '../../../host.js';
 export interface DiffSyntaxSession {
     request(index: number): Promise<DiffSyntaxTokens | null>;
     cancel(): void;
@@ -14,5 +15,5 @@ export interface DiffSyntaxRuntimeOptions {
     themes: readonly ThemeRegistration[];
     highlighter?: () => Promise<Highlighter>;
 }
-export declare function diffSyntaxRuntime(): DiffSyntaxRuntime;
+export declare function diffSyntaxRuntime(code: ChatHost['code']): DiffSyntaxRuntime;
 export declare function createDiffSyntaxRuntime(options: DiffSyntaxRuntimeOptions): DiffSyntaxRuntime;

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

@@ -1,10 +1,14 @@
 import { createSyntaxService } from '@adecore/editor/shiki-worker';
-import { chatHost } from '../../../host.js';
 let nextGeneration = 0;
-let shared;
-export function diffSyntaxRuntime() {
-    const code = chatHost().code;
-    return (shared ??= createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: code.custom, highlighter: code.highlighter }));
+const shared = new WeakMap();
+/* The runtime of a host's `code`, made on first use and shared by every diff under that host. */
+export function diffSyntaxRuntime(code) {
+    let runtime = shared.get(code);
+    if (runtime === undefined) {
+        runtime = createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: code.custom, highlighter: code.highlighter });
+        shared.set(code, runtime);
+    }
+    return runtime;
 }
 export function createDiffSyntaxRuntime(options) {
     const sessions = new Map();

package/dist/chat/ui/diff-syntax.d.ts

@@ -1,7 +1,7 @@
 import type { LineToken } from '@adecore/editor';
 import { type DiffSyntaxDocument } from '@adecore/editor/shiki-worker';
 import type { DiffDocument } from '@adecore/merge';
-import { type DiffSyntaxRuntime } from './diff/syntax-runtime.js';
+import type { DiffSyntaxRuntime } from './diff/syntax-runtime.js';
 export { createDiffSyntaxRuntime, diffSyntaxRuntime } from './diff/syntax-runtime.js';
 export type { DiffSyntaxRuntime, DiffSyntaxRuntimeOptions, DiffSyntaxSession } from './diff/syntax-runtime.js';
 export interface DiffSyntaxMapping {
@@ -16,4 +16,4 @@ export interface DiffSourceTokenSession {
     subscribe(listener: () => void): () => void;
     dispose(): void;
 }
-export declare function diffSourceTokens(document: DiffDocument, mapping: DiffSyntaxMapping, runtime?: DiffSyntaxRuntime): DiffSourceTokenSession;
+export declare function diffSourceTokens(document: DiffDocument, mapping: DiffSyntaxMapping, runtime: DiffSyntaxRuntime): DiffSourceTokenSession;

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

@@ -1,8 +1,7 @@
 import { lineTokensOf } from '@adecore/editor/shiki-worker';
-import { diffSyntaxRuntime } from './diff/syntax-runtime.js';
 export { createDiffSyntaxRuntime, diffSyntaxRuntime } from './diff/syntax-runtime.js';
 /* Structurally accepts the editor's source mapping without depending on its React renderer. */
-export function diffSourceTokens(document, mapping, runtime = diffSyntaxRuntime()) {
+export function diffSourceTokens(document, mapping, runtime) {
     const sides = { old: runtime.open(mapping.documents.old), new: runtime.open(mapping.documents.new) };
     const cache = { old: new Map(), new: new Map() };
     const pending = { old: new Set(), new: new Set() };

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

@@ -1,20 +1,21 @@
 import { useMemo } from 'react';
 import { registerCustomTheme } from '@pierre/diffs';
-import { chatHost } from '../../host.js';
-let registered = false;
-/* The library resolves Shiki's bundled themes by id on its own; the app's own it only knows by registration, done once the host is set. */
-function registerThemes() {
-    if (registered) {
+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. */
+function registerThemes(custom) {
+    if (registered.has(custom)) {
         return;
     }
-    registered = true;
-    for (const theme of chatHost().code.custom) {
+    registered.add(custom);
+    for (const theme of custom) {
         registerCustomTheme(theme.name, () => Promise.resolve(theme));
     }
 }
 /* The code themes a diff is drawn in, the same pair a chat's code blocks use. */
 export function useDiffTheme() {
-    registerThemes();
-    const { light, dark } = chatHost().code.useThemes();
+    const { code } = useChatHost();
+    registerThemes(code.custom);
+    const { light, dark } = code.useThemes();
     return useMemo(() => ({ light, dark }), [light, dark]);
 }

package/dist/chat/ui/file-links.d.ts

@@ -3,4 +3,4 @@ export declare const FileLinkContext: import("react").Context<string | null>;
 export declare function useFileLinkCwd(): string | null;
 export declare function useFileLinkScopeId(): string | null;
 export declare function useFileLinkTarget(text: string): FileRef | null;
-export declare function openFileLink(cwd: string | null, ref: FileRef, scopeId?: string | null): void;
+export declare function useOpenFileLink(): (cwd: string | null, ref: FileRef, scopeId?: string | null) => void;

package/dist/chat/ui/file-links.js

@@ -1,5 +1,5 @@
 import { createContext, useContext, useMemo } from 'react';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { ChatScopeContext } from '../../scope.js';
 /*
  * The folder a relative reference in rendered text counts from: a chat's own cwd, which is a
@@ -17,9 +17,11 @@ export function useFileLinkScopeId() {
 export function useFileLinkTarget(text) {
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
-    return useMemo(() => chatHost().fileLinks?.target(text, cwd, scopeId) ?? null, [text, cwd, scopeId]);
+    const { fileLinks } = useChatHost();
+    return useMemo(() => fileLinks?.target(text, cwd, scopeId) ?? null, [fileLinks, text, cwd, scopeId]);
 }
-/* A reference followed, the way the app opens a file or a folder. */
-export function openFileLink(cwd, ref, scopeId = null) {
-    chatHost().fileLinks?.open(cwd, ref, scopeId);
+/* Follows a reference the way the app opens a file or a folder. */
+export function useOpenFileLink() {
+    const { fileLinks } = useChatHost();
+    return (cwd, ref, scopeId = null) => fileLinks?.open(cwd, ref, scopeId);
 }

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

@@ -0,0 +1,27 @@
+import type { CSSProperties } from 'react';
+import type { Highlighter } from 'shiki';
+import type { CodeToken, Tokenize } from './code-lines.js';
+import { type ChatHost } from '../../host.js';
+export type { Highlighter };
+export type GrammarState = ReturnType<Highlighter['getLastGrammarState']>;
+export interface CodeHighlighter {
+    loadLanguage(lang: string): Promise<void>;
+    loadTheme(theme: string, custom: ChatHost['code']['custom']): Promise<void>;
+    ready(langs: Iterable<string>, theme: string): Highlighter | null;
+    language(lang: string): string;
+    tokenizer(lang: string, theme: string): {
+        tokenize: Tokenize<GrammarState>;
+        fg: string | undefined;
+    } | null;
+}
+export declare function codeHighlighter(source?: () => Promise<Highlighter>): CodeHighlighter;
+export declare function useCodeHighlighter(): CodeHighlighter;
+export declare function loadLanguage(lang: string): Promise<void>;
+export declare function loadTheme(theme: string, custom: ChatHost['code']['custom']): Promise<void>;
+export declare function readyHighlighter(langs: Iterable<string>, theme: string): Highlighter | null;
+export declare function loadedLanguage(lang: string): string;
+export declare function tokenizerFor(lang: string, theme: string): {
+    tokenize: Tokenize<GrammarState>;
+    fg: string | undefined;
+} | null;
+export declare function tokenStyle(token: CodeToken): CSSProperties | undefined;