@adecore/agents-react 0.23.1 → 0.24.0

package/src/chat/ui/composer/use-composer-submit.ts

@@ -0,0 +1,163 @@
+import { useEffect, useRef, type RefObject } from 'react';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { checkAttachmentLimits, uploadBytes } from '../../attachments';
+import type { ChatSendExtras } from '../../chat-client';
+import { registerComposerSender, type ComposerSend } from '../../composer-send';
+import { isEmptyDraft } from '../../drafts';
+import type { PromptGuard } from '../../guards';
+import { presentMentions, presentSkills } from '../../mentions';
+import { withQuote } from '../../quote';
+import { stashDraft, useStash, type StashedPrompt } from '../../stash';
+import { scrollTimelineToEnd } from '../../timeline-scroll';
+import type { ComposerInputHandle } from '../ComposerInput';
+import type { ChatControls } from './use-chat-controls';
+import type { ComposerDraft } from './use-composer-draft';
+import type { ComposerMenus } from './use-composer-menus';
+import type { PromptHistory } from './use-prompt-history';
+import type { ComposerPromptHold } from './use-prompt-hold';
+
+interface SubmitInput {
+    chatId: string;
+    writable: boolean;
+    guard: PromptGuard;
+    /* Whether the provider lets a send join a running turn; without it every send queues. */
+    steerable: boolean;
+    /* Where a running turn takes a send by default; Alt sends the other way. */
+    sendDelivery: 'queue' | 'steer';
+    draft: ComposerDraft;
+    menus: ComposerMenus;
+    controls: ChatControls;
+    history: PromptHistory;
+    hold: ComposerPromptHold;
+    inputRef: RefObject<ComposerInputHandle | null>;
+    setNotice(notice: string): void;
+    onSend(text: string, extras: ChatSendExtras): void | Promise<boolean>;
+}
+
+/* Sends the draft, or runs the command it names, and puts it away in the stash and back. */
+export function useComposerSubmit({
+    chatId,
+    writable,
+    guard,
+    steerable,
+    sendDelivery,
+    draft: box,
+    menus,
+    controls,
+    history,
+    hold,
+    inputRef,
+    setNotice,
+    onSend
+}: SubmitInput) {
+    const host = useChatHost();
+    const scope = useChatScope();
+    const { draft, setDraft } = box;
+
+    /* Opens the host's new chat once the host took the message; a host that answers nothing took it. */
+    const afterSend = (sent: void | Promise<boolean>, andNew: boolean): void => {
+        const openNewChat = host.openNewChat;
+        if (!andNew || openNewChat === null) {
+            return;
+        }
+        void Promise.resolve(sent)
+            .then((taken) => {
+                if (taken !== false) {
+                    openNewChat(scope.id, chatId);
+                }
+            })
+            .catch(() => undefined);
+    };
+
+    const submit = (how: ComposerSend = 'default'): void => {
+        const alternate = how === 'alternate';
+        const delivery = steerable && (alternate ? sendDelivery === 'queue' : sendDelivery === 'steer') ? 'steer' : 'queue';
+        const { text, quote, quoteSource } = draft;
+        const trimmed = text.trim();
+        if (isEmptyDraft(draft) || !writable || guard.tooLong) {
+            return;
+        }
+        // Recheck restored drafts and files that finished reading concurrently.
+        const rejected = checkAttachmentLimits(
+            0,
+            draft.attachments.map((attachment) => ({ ...attachment, bytes: uploadBytes(attachment) }))
+        ).rejected[0];
+        if (rejected) {
+            setNotice(`${rejected.name}: ${rejected.reason}`);
+            return;
+        }
+        hold.release('send');
+        const { commandQuery } = menus;
+        const chosen = menus.commands[menus.activeIndex];
+        if (commandQuery !== null && chosen?.local && controls.runCommand(chosen.name)) {
+            box.clear();
+            return;
+        }
+        if (commandQuery !== null && chosen?.skill) {
+            menus.chooseSkill(chosen.name);
+            return;
+        }
+        // Whoever sends wants to see what comes back, wherever they were reading.
+        scrollTimelineToEnd(chatId, 'instant');
+        if (commandQuery !== null && chosen && !chosen.local) {
+            afterSend(onSend(`/${chosen.name}`, {}), how === 'and-new');
+            box.clear();
+            return;
+        }
+        const sent = onSend(withQuote(quote, trimmed), {
+            delivery,
+            mentions: presentMentions(trimmed, draft.mentions),
+            skills: presentSkills(trimmed, draft.skills),
+            chats: draft.chats,
+            quoteSource: quote !== '' && quoteSource !== null ? { itemId: quoteSource } : undefined,
+            attachments: draft.attachments
+        });
+        afterSend(sent, how === 'and-new');
+        box.clear();
+        menus.close();
+        history.forget();
+    };
+
+    // A menu row means the draft as it stands when it is picked, so the registration reads the latest submit.
+    const submitRef = useRef(submit);
+    useEffect(() => {
+        submitRef.current = submit;
+    });
+    useEffect(() => registerComposerSender(scope.keyOf(chatId), (how) => submitRef.current(how)), [scope, chatId]);
+
+    /*
+     * A stashed prompt comes back as text, mentions and skills; its files were never kept. Its quote
+     * keeps leading to its reply in the chat it came from, and is plain text in any other.
+     */
+    const restoreStashed = (prompt: StashedPrompt): void => {
+        const stashedQuote = prompt.quote;
+        const here = stashedQuote !== undefined && stashedQuote.chatId === chatId;
+        setDraft((current) => ({
+            ...current,
+            text: stashedQuote === undefined || here ? prompt.text : withQuote(stashedQuote.text, prompt.text),
+            mentions: [...prompt.mentions],
+            skills: [...prompt.skills],
+            ...(here ? { quote: stashedQuote.text, quoteSource: stashedQuote.itemId } : {})
+        }));
+        history.forget();
+        inputRef.current?.focus();
+    };
+
+    /* Cmd+S puts the draft away and clears the box; on an empty box the same key takes the last one back. */
+    const toggleStash = (): void => {
+        if (isEmptyDraft(draft)) {
+            const newest = useStash.getState().prompts[0];
+            if (newest) {
+                restoreStashed(newest);
+            }
+            return;
+        }
+        if (stashDraft(draft, chatId)) {
+            box.clear();
+            menus.close();
+        }
+    };
+
+    return { submit, restoreStashed, toggleStash };
+}

package/src/chat/ui/composer/use-draft-files.ts

@@ -0,0 +1,135 @@
+import { useRef, useState, type DragEvent, type RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EditorView } from '@codemirror/view';
+import type { ProviderCapabilities } from '@adecore/agent-contracts';
+import { useChatHost } from '../../../host';
+import { checkAttachmentLimits, filesOf, readAttachments, uploadBytes } from '../../attachments';
+import { pasteBecomesAttachment, pastedTextName } from '../../guards';
+import { carriesMentions, droppedMentions, pastedMentions } from '../../mentions';
+import type { ComposerInputHandle } from '../ComposerInput';
+import type { ComposerDraft } from './use-composer-draft';
+
+/* 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))
+});
+
+interface DraftFilesInput {
+    capabilities: ProviderCapabilities | undefined;
+    providerName: string | undefined;
+    writable: boolean;
+    draft: ComposerDraft;
+    inputRef: RefObject<ComposerInputHandle | null>;
+    setNotice(notice: string): void;
+}
+
+/* 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 }: DraftFilesInput) {
+    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: string[]): void => {
+        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: File[]): void => {
+        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: KeyboardEvent): void => {
+        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: ClipboardEvent, view: EditorView): boolean => {
+        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: DragEvent<HTMLDivElement>): void => {
+            if (writable && (e.dataTransfer.types.includes('Files') || carriesMentions(e.dataTransfer.types))) {
+                e.preventDefault();
+                e.stopPropagation();
+                setDragging(true);
+            }
+        },
+        onDragLeave: (e: DragEvent<HTMLDivElement>): void => {
+            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+                setDragging(false);
+            }
+        },
+        onDrop: (e: DragEvent<HTMLDivElement>): void => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDragging(false);
+            addMentions(droppedMentions(e.dataTransfer));
+            addFiles(filesOf(e.dataTransfer));
+            inputRef.current?.focus();
+        }
+    };
+
+    return { dragging, dropTarget, addFiles, noteKey, onPaste };
+}

package/src/chat/ui/composer/use-notice.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+const NOTICE_MS = 4000;
+
+export interface ComposerNotice {
+    notice: string | null;
+    setNotice(notice: string | null): void;
+    showError(error: unknown): void;
+}
+
+/* A line under the box that says what went wrong, gone again after a few seconds. */
+export function useNotice(): ComposerNotice {
+    const [notice, setNotice] = useState<string | null>(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/src/chat/ui/composer/use-pending-requests.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import type { ChatApprovalItem, ChatQuestionItem } from '@adecore/agent-contracts';
+import { useChatRow, waitingRequestsOf } from '../../../state/chats';
+
+/* The approvals and then the questions the chat waits on, which take the composer's place until answered. */
+export function usePendingRequests(chatId: string): Array<ChatApprovalItem | ChatQuestionItem> {
+    // 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: ChatApprovalItem[] = [];
+        const questions: ChatQuestionItem[] = [];
+        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/src/chat/ui/composer/use-prompt-history.ts

@@ -0,0 +1,76 @@
+import { useMemo, useState } from 'react';
+import { useChatRow } from '../../../state/chats';
+
+// How many sent prompts the arrow keys walk back through, per chat.
+const PROMPT_HISTORY = 50;
+
+export interface PromptHistory {
+    /* Whether a prompt was recalled and the box still holds it unedited. */
+    recalled(text: string): boolean;
+    /* Walks one prompt back (-1) or forward (1); false when there is nothing to walk through. */
+    recall(direction: -1 | 1): boolean;
+    /* Leaves a recalled prompt in the box as a draft of its own. */
+    forget(): void;
+    /* Leaves the walk and empties the box; false when no prompt was recalled. */
+    leave(): boolean;
+    /* Forgets the walk once the text no longer is the recalled prompt. */
+    edited(text: string): void;
+}
+
+/* The prompts sent in this chat, for the arrow keys to put back in an empty box. */
+export function usePromptHistory(chatId: string, setText: (next: string, mentions?: string[], skills?: string[]) => void): PromptHistory {
+    const order = useChatRow(chatId, (row) => row?.order);
+    const items = useChatRow(chatId, (row) => row?.structure);
+    const [index, setIndex] = useState<number | null>(null);
+
+    const history = useMemo(() => {
+        const prompts: Array<{ text: string; mentions: string[] }> = [];
+        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: -1 | 1): boolean => {
+        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 = (): boolean => {
+        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/src/chat/ui/composer/use-prompt-hold.ts

@@ -0,0 +1,58 @@
+import { useEffect, useRef, useState } from 'react';
+import { holdLiftsIn, type HoldRelease } from '../../prompt-hold';
+import type { PromptHold } from '../PromptComposer';
+
+export type ComposerPromptHold = PromptHold & { noteInput(): void; setComposing(composing: boolean): void };
+
+/*
+ * 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(): ComposerPromptHold {
+    const typedAt = useRef<number | null>(null);
+    const composing = useRef(false);
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const [state, setState] = useState<{ held: boolean; releasedBy: HoldRelease | null }>({ held: false, releasedBy: null });
+
+    const clearTimer = (): void => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+    };
+
+    const release = (reason: HoldRelease): void => {
+        clearTimer();
+        typedAt.current = null;
+        composing.current = false;
+        setState((current) => (current.held ? { held: false, releasedBy: reason } : current));
+    };
+
+    const schedule = (): void => {
+        clearTimer();
+        const wait = holdLiftsIn({ typedAt: typedAt.current, composing: composing.current }, Date.now());
+        if (wait !== null) {
+            timer.current = setTimeout(() => release('pause'), wait);
+        }
+    };
+
+    const noteInput = (): void => {
+        typedAt.current = Date.now();
+        setState({ held: true, releasedBy: null });
+        schedule();
+    };
+
+    const setComposing = (next: boolean): void => {
+        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/src/chat/ui/composer/use-take-back.ts

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ChatAttachmentUpload, ChatQueuedMessage } from '@adecore/agent-contracts';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { errorCode } from '../../../transport';
+import { useChatActions } from '../../actions';
+import { readStoredAttachments } from '../../attachments';
+import { takeBackIntoDraft, type ChatDraft } from '../../drafts';
+import type { ComposerDraft } from './use-composer-draft';
+
+interface TakeBackInput {
+    chatId: string;
+    draft: ComposerDraft;
+    setNotice(notice: string): void;
+    /* The message is back in the draft. */
+    onTaken(): void;
+}
+
+/* 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 }: TakeBackInput) {
+    const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
+    const scope = useChatScope();
+    const actions = useChatActions();
+    const [takingBack, setTakingBack] = useState<string | null>(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: ChatQueuedMessage): Promise<void> => {
+        if (takingBack !== null) {
+            return;
+        }
+        const failed = (e: unknown): void => {
+            host.notify({ kind: 'error', title: t('composer.queue.editFailed'), description: e instanceof Error ? e.message : String(e) });
+        };
+        const readFiles = async (): Promise<ChatAttachmentUpload[]> => {
+            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: ChatAttachmentUpload[];
+            try {
+                uploads = await readFiles();
+            } catch (e) {
+                failed(e);
+                return;
+            }
+            const taken: Omit<ChatDraft, 'quote' | 'quoteSource'> = {
+                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/src/chat/ui/diff/DiffFallbackBoundary.tsx

@@ -13,7 +13,7 @@ interface State {
 
 /* A failed view or lazy chunk must leave the containing review card usable. */
 export class DiffFallbackBoundary extends Component<Props, State> {
-    state: State = { failed: false, resetKeys: this.props.resetKeys };
+    override state: State = { failed: false, resetKeys: this.props.resetKeys };
 
     static getDerivedStateFromError(): Partial<State> {
         return { failed: true };
@@ -26,7 +26,7 @@ export class DiffFallbackBoundary extends Component<Props, State> {
         return null;
     }
 
-    render(): ReactNode {
+    override render(): ReactNode {
         return this.state.failed ? this.props.fallback : this.props.children;
     }
 }

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

@@ -5,7 +5,7 @@ import { getFiletypeFromFileName } from '@pierre/diffs';
 import type { EditorEngine } from '@adecore/editor';
 import { DiffView } from '@adecore/editor-react';
 import { diffDocument, patchOf, type DiffDocument } from '@adecore/merge';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import type { FileChange } from '../../logic/tools';
 import { useDiffSourceTokens } from '../use-diff-source-tokens';
 import { diffSourceBudget } from './diff-source-budget';
@@ -34,10 +34,11 @@ function ReadyDiff({
     layout: 'unified' | 'split';
     maxHeight: number;
 }) {
+    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 (

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

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
 import { useWorkerPool } from '@pierre/diffs/react';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import DiffPool from '../DiffPool';
 
 export function LegacyDiffPool({ children }: { children: ReactNode }) {
+    const host = useChatHost();
     const outer = useWorkerPool();
-    const workerFactory = chatHost().code.legacyDiffWorker;
+    const workerFactory = host.code.legacyDiffWorker;
     if (outer !== undefined || workerFactory === undefined) {
         return children;
     }

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

@@ -2,13 +2,14 @@ import { LegacyDiffPool } from './LegacyDiffPool';
 import { useReviewSettled } from './review-settle';
 import { useMemo } from 'react';
 import { MultiFileDiff } from '@pierre/diffs/react';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import { useDiffTheme } from '../diff-theme';
 import type { FileChange } from '../../logic/tools';
 
 export default function LegacyEditDiff({ change, maxHeight }: { change: FileChange; maxHeight?: number }) {
+    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/src/chat/ui/diff/LegacyUnifiedDiff.tsx

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import clsx from 'clsx';
 import { FileDiff, PatchDiff } from '@pierre/diffs/react';
 import type { ChatFileChange } from '@adecore/agent-contracts';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import { useDiffTheme } from '../diff-theme';
 import { fullFileDiff } from '../full-diff';
 import type { UnifiedDiffProps } from './diff-props';
@@ -45,8 +45,9 @@ function lineClass(line: string): string {
 }
 
 export default function LegacyUnifiedDiff({ change, overflow = 'wrap', diffStyle = 'unified', fill = false, contents, maxHeight }: UnifiedDiffProps) {
+    const host = useChatHost();
     useReviewSettled();
-    const resolved = chatHost().code.useMode();
+    const resolved = host.code.useMode();
     const theme = useDiffTheme();
     const patch = useMemo(() => asPatch(change), [change]);
     const oldText = contents?.old;