@adecore/agents-react 0.23.1 → 0.24.1

package/src/chat/ui/Timeline.tsx

@@ -1,4 +1,16 @@
-import { type CSSProperties, type RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import {
+    type CSSProperties,
+    memo,
+    type RefObject,
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useReducer,
+    useRef,
+    useState,
+    type ReactNode
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
 import clsx from 'clsx';
@@ -21,6 +33,8 @@ import {
     type TurnTarget
 } from '../timeline-scroll';
 import { useTimelineFlash } from '../timeline-flash';
+import { useChatPreferences } from '../preferences';
+import { readingMeasure, readingWidthStyle } from '../reading-width';
 import {
     SCRUBBER_MIN_TICKS,
     STRIP_INSET_PX,
@@ -55,11 +69,11 @@ import { QuoteButton } from './QuoteButton';
 import { QuoteTakerContext, type QuoteTaker } from './quote-selection';
 import { useToggleSet } from './useToggleSet';
 import { WelcomeGreeting } from './Welcome';
-import { Row } from './rows/Rows';
+import { Row, type RowProps } from './rows/Rows';
 import { RowContainer } from './rows/RowContainer';
 import { ReplyHeader } from './rows/MessageRows';
 import { useChatRow, useChats } from '../../state/chats';
-import { chatHost } from '../../host';
+import { useChatHost, type TimelineFindOptions } from '../../host';
 import { useChatScope } from '../../scope';
 import { FileLinkContext } from './file-links';
 import { AgentIcon } from '../../agents/AgentIcon';
@@ -81,11 +95,12 @@ function showRowAtTop(virtualizer: Virtualizer<HTMLDivElement, Element>, followR
  * and the folder it works in, so a first question can lean on all three.
  */
 function EmptyThread({ chatId }: { chatId: string }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const info = useChatRow(chatId, (row) => row?.info ?? null);
     const model = useModelName(info?.provider, info?.selection.model ?? '');
-    const sources = chatHost().useContextSources(chatId);
-    const hidesFolder = chatHost().useHidesFolder(chatId);
+    const sources = host.useContextSources(chatId);
+    const hidesFolder = host.useHidesFolder(chatId);
     return (
         <div className="flex grow items-center justify-center">
             <div className="flex max-w-sm flex-col items-center gap-3 px-6 py-8 text-center">
@@ -133,11 +148,42 @@ function MarkableRow({ row, chatId, bookmark, children }: { row: TimelineRow; ch
     );
 }
 
+interface ThreadRowProps extends Omit<RowProps, 'openConversation'> {
+    previous: TimelineRow | null;
+    index: number;
+    top: number;
+    measure: (element: HTMLDivElement | null) => void;
+    /* The nonce of the flash on this row, or null when it has none. */
+    flashNonce: number | null;
+    bookmark: ChatBookmark | null;
+    openConversation(step: SubagentStep): void;
+}
+
+/* Memoized with stable props, so a streamed word or a scroll draws only the rows it changed. */
+const ThreadRow = memo(function ThreadRow({ row, previous, index, top, measure, chatId, flashNonce, bookmark, ...actions }: ThreadRowProps) {
+    const header = replyHeader(row, previous);
+    return (
+        <RowContainer row={row} previous={previous} index={index} top={top} ref={measure}>
+            {flashNonce !== null && <span key={flashNonce} className="chat-flash pointer-events-none absolute inset-0 rounded-lg" aria-hidden />}
+            {header !== null && (
+                <div className="chat-column-content w-full">
+                    <ReplyHeader chatId={chatId} at={header.at} />
+                </div>
+            )}
+            <MarkableRow row={row} chatId={chatId} bookmark={bookmark}>
+                <Row row={row} chatId={chatId} {...actions} />
+            </MarkableRow>
+        </RowContainer>
+    );
+});
+
 /*
  * `overlay` stands in the thread's place and ends where the composer starts, so the thread keeps
  * where it was underneath and the composer stays in reach for the prompts it answers.
  */
 export function Timeline({ chatId, composer, overlay }: { chatId: string; composer?: ReactNode; overlay?: ReactNode }) {
+    const host = useChatHost();
+    const { fork } = host;
     const { t } = useTranslation('agent-chat');
     const order = useChatRow(chatId, (row) => row?.order);
     // The structure, not the items. A delta growing a reply must not derive every row again.
@@ -209,15 +255,15 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
             { expandedGroups: groups.ids, expandedTurns: turns.ids, expandedSubagents: subagents.ids, activeTurnId, forkedTurns }
         );
     }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns]);
-    const cards = chatHost().useThreadCards(scopeId, chatId);
-    const drawsVisuals = chatHost().visuals !== null;
+    const cards = host.useThreadCards(scopeId, chatId);
+    const drawsVisuals = host.visuals !== null;
     // Where the part of the thread this client holds begins, while there is a page before it.
     const heldFrom = cursor === null ? null : (items?.[order?.[0] ?? '']?.createdAt ?? null);
     const rows = useMemo(
         () => withTimedRows(threadRows, timedRowsOf(cards, drawsVisuals ? (visuals ?? []) : null, heldFrom)),
         [threadRows, cards, drawsVisuals, visuals, heldFrom]
     );
-    const welcomes = chatHost().useWelcome(chatId);
+    const welcomes = host.useWelcome(chatId);
 
     const empty = rows.length === 0;
     // A chat that took a turn before is one whose thread has not come in yet, not one to greet.
@@ -308,17 +354,11 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         scrollPaddingEnd: coveredHeight
     });
 
-    // A change in what the last row says (a streaming delta) must also pull the view down.
-    const lastRow = rows[rows.length - 1];
-    const lastReplyLength = useChatRow(chatId, (row) => {
-        const item = lastRow?.kind === 'assistant' ? row?.items[lastRow.id] : undefined;
-        return item?.kind === 'assistant' ? item.text.length : null;
-    });
-    const tail = lastReplyLength ?? rows.length;
     /*
-     * Rows are measured as they render, so the end moves while it is drawn (a diff that highlights, an
-     * image that loads). `scrollToIndex` aims at where a row was when asked and fell short; the
-     * scroller's own bottom is a fact, and a new total size says a row was measured again.
+     * Rows are measured as they render, so the end moves while it is drawn (a streamed line, a diff that
+     * highlights, an image that loads). `scrollToIndex` aims at where a row was when asked and fell
+     * short; the scroller's own bottom is a fact, and a new total size says a row was measured again.
+     * A word that does not add a line moves nothing, so the thread does not listen to the words.
      */
     const totalSize = virtualizer.getTotalSize();
     useLayoutEffect(() => {
@@ -329,7 +369,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         // The composer is in the scroll flow, so its measured height is part of this end position.
         element.scrollTop = element.scrollHeight;
         scrollGeometry.current = { top: element.scrollTop, height: element.scrollHeight, viewport: element.clientHeight };
-    }, [rows.length, tail, totalSize, composerHeight, frame.height]);
+    }, [rows.length, totalSize, composerHeight, frame.height]);
 
     // A page that went in above moves every row down by what it measures; the reader stays on the row they were on.
     useLayoutEffect(() => {
@@ -364,7 +404,8 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
     const onMainAgent = trail.length === 0;
     // A node on a canvas has no strip. It is too narrow to give up a column of its width.
     const showsScrubber = frame.column && onMainAgent && ticks.length >= SCRUBBER_MIN_TICKS;
-    const paddingLeft = threadPaddingLeft(frame.width, showsScrubber);
+    const readingWidth = useChatPreferences((preferences) => preferences.readingWidth);
+    const paddingLeft = threadPaddingLeft(frame.width, showsScrubber, readingMeasure(readingWidth));
 
     /*
      * Where each message starts, from the virtualizer's measurements (an estimate for a row it never
@@ -375,35 +416,59 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
     const scrollTop = virtualizer.scrollOffset ?? 0;
     const viewport = virtualizer.scrollRect?.height ?? 0;
     const visibleHeight = Math.max(0, viewport - coveredHeight);
+    const visibleHeightRef = useRef(visibleHeight);
+    visibleHeightRef.current = visibleHeight;
     const inView = showsScrubber ? messagesInView({ starts, scrollTop, visibleHeight }) : null;
+    /*
+     * The virtualizer draws again only when its range of rows changes, which a scroll inside one long
+     * row never does; the scroll itself redraws the strip once the messages in view are others.
+     */
+    const [, redrawStrip] = useReducer((count: number) => count + 1, 0);
+    const stripRef = useRef({ starts, inView });
+    stripRef.current = { starts, inView };
+    const followStrip = (element: HTMLElement): void => {
+        const { starts: current, inView: shown } = stripRef.current;
+        if (shown === null) {
+            return;
+        }
+        const next = messagesInView({ starts: current, scrollTop: element.scrollTop, visibleHeight: visibleHeightRef.current });
+        if (next?.first !== shown.first || next?.last !== shown.last) {
+            redrawStrip();
+        }
+    };
 
-    const chatFind = chatHost().useTimelineFind({
-        chatId,
-        frame: frameRef,
-        thread: threadRef,
-        scroller: scrollRef,
-        enabled: onMainAgent,
-        rows,
-        structure: items,
-        order,
-        firstRowInView: () => {
-            const top = scrollRef.current?.scrollTop ?? 0;
-            return virtualizer.getVirtualItems().find((virtualRow) => virtualRow.end > top)?.index ?? 0;
-        },
-        openTurn: turns.add,
-        openGroup: groups.add,
-        openSubagent: subagents.add,
-        // A row already on screen stays put; the find scrolls to the match itself once it is drawn.
-        scrollToRow: (index) => {
-            const top = scrollRef.current?.scrollTop ?? 0;
-            const bottom = top + visibleHeight;
-            if (!virtualizer.getVirtualItems().some((virtualRow) => virtualRow.index === index && virtualRow.end > top && virtualRow.start < bottom)) {
-                virtualizer.scrollToIndex(index, { align: 'center' });
-            }
-        },
-        coveredHeight: () => coveredHeightRef.current,
-        stopFollowing
-    });
+    // One object while what it holds stays, so a find that keys an effect on it does not run it for every scroll.
+    const findOptions = useMemo<TimelineFindOptions>(
+        () => ({
+            chatId,
+            frame: frameRef,
+            thread: threadRef,
+            scroller: scrollRef,
+            enabled: onMainAgent,
+            rows,
+            structure: items,
+            order,
+            firstRowInView: () => {
+                const top = scrollRef.current?.scrollTop ?? 0;
+                return virtualizer.getVirtualItems().find((virtualRow) => virtualRow.end > top)?.index ?? 0;
+            },
+            openTurn: turns.add,
+            openGroup: groups.add,
+            openSubagent: subagents.add,
+            // A row already on screen stays put; the find scrolls to the match itself once it is drawn.
+            scrollToRow: (index) => {
+                const top = scrollRef.current?.scrollTop ?? 0;
+                const bottom = top + visibleHeightRef.current;
+                if (!virtualizer.getVirtualItems().some((virtualRow) => virtualRow.index === index && virtualRow.end > top && virtualRow.start < bottom)) {
+                    virtualizer.scrollToIndex(index, { align: 'center' });
+                }
+            },
+            coveredHeight: () => coveredHeightRef.current,
+            stopFollowing
+        }),
+        [chatId, onMainAgent, rows, items, order, virtualizer, turns.add, groups.add, subagents.add, stopFollowing]
+    );
+    const chatFind = host.useTimelineFind(findOptions);
     const searching = chatFind.open;
     // A find covers the whole thread, so every page before this one comes in while it is open.
     useEffect(() => {
@@ -548,15 +613,15 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         () => ({
             chatId,
             canFork: (turnId) => {
-                if (chatHost().fork === null) {
+                if (fork === null) {
                     return false;
                 }
                 const row = useChats.getState().byKey[keyOf(chatId)];
                 return forkRefusal(row?.info ?? null, row?.structure[turnId]) === null;
             },
-            fork: (turnId) => chatHost().fork?.(chatId, turnId)
+            fork: (turnId) => fork?.(chatId, turnId)
         }),
-        [keyOf, chatId]
+        [keyOf, chatId, fork]
     );
 
     const stepRef = useRef<(direction: -1 | 1) => boolean>(() => false);
@@ -573,26 +638,40 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
     };
     useEffect(() => registerMessageStepper(keyOf(chatId), (direction) => stepRef.current(direction)), [keyOf, chatId]);
 
+    // Read through a ref, so the rows keep one callback for their life and their memo holds.
+    const opensRef = useRef({ rows, show });
+    opensRef.current = { rows, show };
     /* The whole of what a sub-agent did, in the thread's place. Its row only keeps the beginning. */
-    const openConversation = (step: SubagentStep): void => {
-        show(openFromMain(step));
-    };
+    const openConversation = useCallback((step: SubagentStep): void => {
+        opensRef.current.show(openFromMain(step));
+    }, []);
 
+    const addSubagent = subagents.add;
     /* The header of a turn a sub-agent woke. It points at the row that agent worked in, or the one it hangs under. */
-    const openSubagent = (toolUseId: string): void => {
-        const found = findSubagentBranch(rows, toolUseId);
-        if (!found) {
-            return;
-        }
-        subagents.add(found.branch.id);
-        showRowAtTop(virtualizer, followRef, found.index);
-    };
+    const openSubagent = useCallback(
+        (toolUseId: string): void => {
+            const found = findSubagentBranch(opensRef.current.rows, toolUseId);
+            if (!found) {
+                return;
+            }
+            addSubagent(found.branch.id);
+            showRowAtTop(virtualizer, followRef, found.index);
+        },
+        [addSubagent, virtualizer]
+    );
+    const flashedRow = flash !== null && flash.key === keyOf(chatId) && !flash.block ? flash.rowId : null;
 
     return (
         // A file an answer names is relative to the folder this chat runs in, which is a worktree as
         // often as it is the project itself.
         <FileLinkContext.Provider value={info?.cwd ?? null}>
-            <div ref={frameRef} className="relative flex min-h-0 grow flex-col" data-file-cwd={info?.cwd ?? ''} data-file-scope-id={scope.id}>
+            <div
+                ref={frameRef}
+                className="relative flex min-h-0 grow flex-col"
+                style={readingWidthStyle(readingWidth)}
+                data-file-cwd={info?.cwd ?? ''}
+                data-file-scope-id={scope.id}
+            >
                 {searching && chatFind.bar}
                 <ContextMenu.Root>
                     <div
@@ -618,6 +697,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
                             if (wantsEarlier(el)) {
                                 loadEarlier();
                             }
+                            followStrip(el);
                         }}
                     >
                         {/* A welcome centers the greeting and the composer as one group. The composer keeps its
@@ -643,49 +723,31 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
                                     <EmptyThread chatId={chatId} />
                                 ) : (
                                     <div className="relative w-full shrink-0" style={{ height: virtualizer.getTotalSize() }}>
-                                        {virtualizer.getVirtualItems().map((virtualRow) => {
-                                            const row = rows[virtualRow.index]!;
-                                            const previous = virtualRow.index > 0 ? rows[virtualRow.index - 1]! : null;
-                                            const header = replyHeader(row, previous);
-                                            return (
-                                                <RowContainer
-                                                    key={row.id}
-                                                    row={row}
-                                                    previous={previous}
-                                                    index={virtualRow.index}
-                                                    top={virtualRow.start}
-                                                    ref={virtualizer.measureElement}
-                                                >
-                                                    {flash !== null && flash.key === keyOf(chatId) && flash.rowId === row.id && !flash.block && (
-                                                        <span
-                                                            key={flash.nonce}
-                                                            className="chat-flash pointer-events-none absolute inset-0 rounded-lg"
-                                                            aria-hidden
+                                        <UiReplyNavigationContext.Provider value={uiNavigation}>
+                                            <FindRevealContext.Provider value={chatFind.reveal}>
+                                                {virtualizer.getVirtualItems().map((virtualRow) => {
+                                                    const row = rows[virtualRow.index]!;
+                                                    return (
+                                                        <ThreadRow
+                                                            key={row.id}
+                                                            row={row}
+                                                            previous={virtualRow.index > 0 ? rows[virtualRow.index - 1]! : null}
+                                                            index={virtualRow.index}
+                                                            top={virtualRow.start}
+                                                            measure={virtualizer.measureElement}
+                                                            chatId={chatId}
+                                                            flashNonce={flash !== null && flashedRow === row.id ? flash.nonce : null}
+                                                            bookmark={marks.get(row.id) ?? null}
+                                                            toggleGroup={groups.toggle}
+                                                            toggleTurn={turns.toggle}
+                                                            toggleSubagent={subagents.toggle}
+                                                            openSubagent={openSubagent}
+                                                            openConversation={openConversation}
                                                         />
-                                                    )}
-                                                    {header !== null && (
-                                                        <div className="chat-column-content w-full">
-                                                            <ReplyHeader chatId={chatId} at={header.at} />
-                                                        </div>
-                                                    )}
-                                                    <UiReplyNavigationContext.Provider value={uiNavigation}>
-                                                        <FindRevealContext.Provider value={chatFind.reveal}>
-                                                            <MarkableRow row={row} chatId={chatId} bookmark={marks.get(row.id) ?? null}>
-                                                                <Row
-                                                                    row={row}
-                                                                    chatId={chatId}
-                                                                    toggleGroup={groups.toggle}
-                                                                    toggleTurn={turns.toggle}
-                                                                    toggleSubagent={subagents.toggle}
-                                                                    openSubagent={openSubagent}
-                                                                    openConversation={openConversation}
-                                                                />
-                                                            </MarkableRow>
-                                                        </FindRevealContext.Provider>
-                                                    </UiReplyNavigationContext.Provider>
-                                                </RowContainer>
-                                            );
-                                        })}
+                                                    );
+                                                })}
+                                            </FindRevealContext.Provider>
+                                        </UiReplyNavigationContext.Provider>
                                     </div>
                                 )}
                             </ContextMenu.Trigger>
@@ -703,7 +765,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
                             </div>
                         </div>
                     </div>
-                    <TimelineMenuPopup target={target} thread={threadRef} chatId={onMainAgent ? chatId : null} />
+                    <TimelineMenuPopup target={target} thread={threadRef} chatId={onMainAgent ? chatId : null} column={frame.column} />
                 </ContextMenu.Root>
                 {drawsVisuals && <VisualDialogs chatId={chatId} />}
                 {loadingEarlier && !overlay && (

package/src/chat/ui/TimelineMenu.tsx

@@ -1,26 +1,31 @@
 import type { RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BookmarkPlus, BookmarkX, Braces, Copy, Eye, FileText, GitFork, MessageSquare, Pencil, Scan } from 'lucide-react';
+import { BookmarkPlus, BookmarkX, Braces, Copy, Eye, FileText, GitFork, MessageSquare, MoveHorizontal, Pencil, Scan } from 'lucide-react';
 import { placeBookmark, removeBookmark, useBookmarkNaming } from '../bookmarks';
+import { rememberReadingWidth, useChatPreferences } from '../preferences';
+import { CHAT_READING_WIDTHS, readingWidthLabel, type ChatReadingWidth } from '../reading-width';
 import { forkRefusal, turnIdOfRow } from '../logic/fork';
 import { markdownOf, messageTextOf } from '../logic/timeline-copy';
 import type { TimelineTarget } from '../logic/timeline-target';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatRow } from '../../state/chats';
-import { openFileLink, useFileLinkCwd, useFileLinkScopeId } from './file-links';
+import { useFileLinkCwd, useFileLinkScopeId, useOpenFileLink } from './file-links';
 import { ContextMenu, copyText, DisabledReason, EDIT_SHORTCUTS, Icon, Kbd, selectAllWithin } from '@adecore/ui';
 
 /* The menu behind a right-click in a thread, mostly for copying: a whole message, a code block or an answer's markdown. */
 export function TimelineMenuPopup({
     target,
     thread,
-    chatId = null
+    chatId = null,
+    column = false
 }: {
     target: TimelineTarget;
     thread: RefObject<HTMLDivElement | null>;
     /* The chat whose own thread this is; a thread in its place (a sub-agent's) has nothing to fork. */
     chatId?: string | null;
+    /* The thread is a view of its own (`.chat-column`), the one place its reading width shows. */
+    column?: boolean;
 }) {
     const { t } = useTranslation('agent-chat');
     const message = target.row === null ? null : messageTextOf(target.row);
@@ -31,7 +36,8 @@ export function TimelineMenuPopup({
     // A thread outside a chat (a sub-agent's transcript) has no cwd of its own; the app answers for it then.
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
-    const { fork, fileLinks } = chatHost();
+    const { fork, fileLinks } = useChatHost();
+    const openFileLink = useOpenFileLink();
     const openInPreview = (): void => {
         if (target.file != null) {
             openFileLink(target.file.cwd, target.file.ref, target.file.scopeId);
@@ -79,6 +85,12 @@ export function TimelineMenuPopup({
                     </ContextMenu.Item>
                 </>
             )}
+            {column && (
+                <>
+                    <ContextMenu.Separator />
+                    <ReadingWidthSubmenu />
+                </>
+            )}
         </ContextMenu.Popup>
     );
 }
@@ -90,12 +102,13 @@ export function TimelineMenuPopup({
 export function BookmarkMenuItems({ chatId, itemId, onName }: { chatId: string; itemId: string; onName?: () => void }) {
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
+    const host = useChatHost();
     const bookmark = useChatRow(chatId, (row) => row?.bookmarks?.find((candidate) => candidate.itemId === itemId) ?? null);
     if (bookmark === null) {
         return (
             <ContextMenu.Item
                 onClick={() => {
-                    void placeBookmark(scope, chatId, itemId);
+                    void placeBookmark(scope, host, chatId, itemId);
                     onName?.();
                 }}
             >
@@ -113,9 +126,31 @@ export function BookmarkMenuItems({ chatId, itemId, onName }: { chatId: string;
             >
                 <Icon icon={Pencil} size={14} /> {t('bookmarks.rename')}
             </ContextMenu.Item>
-            <ContextMenu.Item onClick={() => void removeBookmark(scope, chatId, bookmark)}>
+            <ContextMenu.Item onClick={() => void removeBookmark(scope, host, chatId, bookmark)}>
                 <Icon icon={BookmarkX} size={14} /> {t('bookmarks.remove')}
             </ContextMenu.Item>
         </>
     );
 }
+
+/* The person's reading width for every chat of its own on this client. */
+function ReadingWidthSubmenu() {
+    const { t } = useTranslation('agent-chat');
+    const readingWidth = useChatPreferences((preferences) => preferences.readingWidth);
+    return (
+        <ContextMenu.SubmenuRoot>
+            <ContextMenu.SubmenuTrigger>
+                <Icon icon={MoveHorizontal} size={14} /> {t('readingWidth.label')}
+            </ContextMenu.SubmenuTrigger>
+            <ContextMenu.Popup className="min-w-40">
+                <ContextMenu.RadioGroup value={readingWidth} onValueChange={(width: ChatReadingWidth) => rememberReadingWidth(width)}>
+                    {CHAT_READING_WIDTHS.map((width) => (
+                        <ContextMenu.RadioItem key={width} value={width}>
+                            {readingWidthLabel(width)}
+                        </ContextMenu.RadioItem>
+                    ))}
+                </ContextMenu.RadioGroup>
+            </ContextMenu.Popup>
+        </ContextMenu.SubmenuRoot>
+    );
+}

package/src/chat/ui/UnifiedDiff.tsx

@@ -6,16 +6,17 @@ import { DiffOmitted } from './diff/DiffOmitted';
 import { DiffUnavailable } from './diff/DiffUnavailable';
 import { RawDiff } from './diff/RawDiff';
 import { DiffFallbackBoundary } from './diff/DiffFallbackBoundary';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import type { UnifiedDiffProps } from './diff/diff-props';
 
 const LegacyUnifiedDiff = lazyNamed(() => import('./diff/LegacyUnifiedDiff'), 'default', { prefetch: false });
 const EditorPatchDiff = lazyNamed(() => import('./diff/EditorPatchDiff'), 'default');
 
 export default function UnifiedDiff(props: UnifiedDiffProps) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { change, contents, allowEditor = true, ignoreWhitespace = false, overflow = 'wrap', diffStyle = 'unified', fill = false, maxHeight } = props;
-    const loadEngine = chatHost().code.editor;
+    const loadEngine = host.code.editor;
     const oldText = contents?.old ?? '';
     const newText = contents?.new ?? '';
     const sourceAllowed = useMemo(() => diffSourceBudget(oldText, newText) && patchSourceBudget(change.diff), [oldText, newText, change.diff]);

package/src/chat/ui/VisualFrame.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { visualThemeFragment, type ChatVisual, type VisualAppearance, type VisualTheme } from '@adecore/agent-contracts/visual';
 import { Spinner, useMeasuredWidth } from '@adecore/ui';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { initialVisualContentHeight, rememberVisualHeight } from '../logic/visual-height';
 import { VisualBridge } from '../visual-bridge';
@@ -33,9 +33,10 @@ function personActsIn(frame: HTMLIFrameElement): boolean {
  * when the host page is served on the app's own. Its box keeps one height while it loads or fails.
  */
 export function VisualFrame({ chatId, visual, fill = false, className }: VisualFrameProps) {
+    const { visuals, attachments } = useChatHost();
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
-    const frameUrl = chatHost().visuals?.frameUrl ?? null;
+    const frameUrl = visuals?.frameUrl ?? null;
     const boxRef = useRef<HTMLDivElement | null>(null);
     const frameRef = useRef<HTMLIFrameElement>(null);
     const bridgeRef = useRef<VisualBridge | null>(null);
@@ -75,12 +76,10 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
         const bridge = new VisualBridge({
             frame: () => frame.contentWindow,
             visual: { maxHeight: visual.maxHeight },
-            page: chatHost()
-                .attachments.read(scope.id, chatId, visual.id)
-                .then((blob) => blob.text()),
+            page: attachments.read(scope.id, chatId, visual.id).then((blob) => blob.text()),
             theme: opening.theme,
             mayOpenLink: () => personActsIn(frame),
-            openLink: (url) => chatHost().visuals?.openLink(url),
+            openLink: (url) => visuals?.openLink(url),
             onHeight: (next) => {
                 if (fill) {
                     return;
@@ -106,7 +105,7 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
             bridge.dispose();
             bridgeRef.current = null;
         };
-    }, [opening, scope.id, chatId, visual.id, visual.maxHeight, fill]);
+    }, [opening, scope.id, chatId, visual.id, visual.maxHeight, fill, visuals, attachments]);
 
     useLayoutEffect(() => {
         const box = boxRef.current;

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

@@ -1,15 +1,15 @@
 import type { ThemeRegistration } from 'shiki';
-import { chatHost } from '../../host';
+import { useChatHost, type ChatHost } from '../../host';
 
 /* The Shiki theme code is drawn in under the app's current light or dark. */
 export function useCodeTheme(): string {
-    const { code } = chatHost();
+    const { code } = useChatHost();
     const mode = code.useMode();
     const themes = code.useThemes();
     return mode === 'dark' ? themes.dark : themes.light;
 }
 
 /* What to hand Shiki for a theme id: a theme the app ships itself, or the id of a bundled one for Shiki to load. */
-export function shikiThemeOf(id: string): string | ThemeRegistration {
-    return chatHost().code.custom.find((theme) => theme.name === id) ?? id;
+export function shikiThemeOf(id: string, custom: ChatHost['code']['custom']): string | ThemeRegistration {
+    return custom.find((theme) => theme.name === id) ?? id;
 }