@adecore/agents-react 0.31.11 → 0.32.0

package/src/chat/ui/intelligent-ui/renderers/content.tsx

@@ -12,6 +12,7 @@ import { ImageThumb } from '../../ImageView';
 import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text';
 import type { UiRendererProps } from '../render-context';
 import { useTruncated } from '../use-truncated';
+import { useHostAttachmentUrl } from '../../../../host-hooks';
 
 // The number of every source by its node id, which the list counts in its own order.
 const SourceNumbers = createContext<ReadonlyMap<string, number>>(new Map());
@@ -55,8 +56,7 @@ function AttachedImage({
     cell: boolean;
     unnamed: boolean;
 }) {
-    const host = useChatHost();
-    const source = host.attachments.useUrl(scopeId, chatId, attachmentId);
+    const source = useHostAttachmentUrl(scopeId, chatId, attachmentId);
     if (!cell) {
         return <ImageThumb source={source} alt={alt} className="max-h-70 max-w-full rounded-xl object-contain" />;
     }
@@ -117,12 +117,11 @@ const COMPARE_MAX_HEIGHT = 384;
  */
 export function CompareRenderer({ node, children, context }: UiRendererProps<UiProps<'Compare'>>) {
     const { t } = useTranslation('agent-chat');
-    const host = useChatHost();
     const { before, after } = node.props;
     const beforeLabel = node.props.beforeLabel || t('blocks.compare.before');
     const afterLabel = node.props.afterLabel || t('blocks.compare.after');
-    const first = host.attachments.useUrl(context.scopeId, context.chatId, before);
-    const second = host.attachments.useUrl(context.scopeId, context.chatId, after);
+    const first = useHostAttachmentUrl(context.scopeId, context.chatId, before);
+    const second = useHostAttachmentUrl(context.scopeId, context.chatId, after);
     const [split, setSplit] = useState(0.5);
     const [aspect, setAspect] = useState(COMPARE_ASPECT);
     const caption = uiNodeLabel(node);
@@ -205,7 +204,7 @@ export function ModelRenderer({ node, children, context }: UiRendererProps<UiPro
     const { t } = useTranslation('agent-chat');
     const host = useChatHost();
     const { attachment, alt } = node.props;
-    const source = host.attachments.useUrl(context.scopeId, context.chatId, attachment);
+    const source = useHostAttachmentUrl(context.scopeId, context.chatId, attachment);
     const caption = uiNodeLabel(node);
     const label = alt ?? (caption === '' ? t('blocks.model.label') : caption);
     const View = host.ModelView;

package/src/chat/ui/intelligent-ui/renderers/map-view.tsx

@@ -7,6 +7,7 @@ import { ButtonGroup, IconButton } from '@adecore/ui';
 import { useChatHost, type UiMapSource } from '../../../../host';
 import { watchTheme } from '../../theme-watch';
 import { baseMapStyle, boundsOf, localizedTextField, mapFitOptions, spreadOverlaps, type MapColors, type MapPoint } from './map-style';
+import { useHostCodeMode } from '../../../../host-hooks';
 
 /*
  * What the view is drawing: `base` by the source's choice, `offline` and `unavailable` as a fallback from tiles that
@@ -63,7 +64,7 @@ function readColors(element: HTMLElement): MapColors {
 export function MapView({ markers, source, selected, onPick, onStatus }: MapViewProps) {
     const { t, i18n } = useTranslation('agent-chat');
     const host = useChatHost();
-    const mode = host.code.useMode();
+    const mode = useHostCodeMode();
     const workerUrl = host.maps?.workerUrl;
     const element = useRef<HTMLDivElement>(null);
     const [map, setMap] = useState<MapLibreMap | null>(null);

package/src/chat/ui/intelligent-ui/renderers/map.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import type { UiProps, UiViewNode } from '@adecore/intelligent-ui';
 import { Button, LazyBoundary, Spinner } from '@adecore/ui';
 import { useChatHost, type UiMapSource } from '../../../../host';
+import { useHostMapSource } from '../../../../host-hooks';
 import { lazyNamed } from '../../../../lazy';
 import { DiffFallbackBoundary } from '../../diff/DiffFallbackBoundary';
 import { uiChildrenOf, uiNodeLabel } from '../node-text';
@@ -170,7 +171,7 @@ function MapFrame({ markers, source, selected, onPick }: FrameProps) {
 
 /* Asks the host for its tiles in a component of its own, since a host that offers none has no hook to call. */
 function HostedFrame({ maps, scopeId, ...frame }: Omit<FrameProps, 'source'> & { maps: NonNullable<ReturnType<typeof useChatHost>['maps']>; scopeId: string }) {
-    return <MapFrame {...frame} source={maps.useSource(scopeId)} />;
+    return <MapFrame {...frame} source={useHostMapSource(maps, scopeId)} />;
 }
 
 /*

package/src/chat/ui/intelligent-ui/use-truncated.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 
 function cut(element: HTMLElement): boolean {
     return element.scrollWidth > element.clientWidth + 1;
@@ -11,23 +11,20 @@ function cut(element: HTMLElement): boolean {
  */
 export function useTruncated<T extends HTMLElement>(within = false): [(element: T | null) => (() => void) | undefined, boolean] {
     const [truncated, setTruncated] = useState(false);
-    const measure = useCallback(
-        (element: T | null) => {
-            if (element === null || typeof ResizeObserver === 'undefined') {
-                return undefined;
-            }
-            const check = () => setTruncated(within ? [...element.querySelectorAll<HTMLElement>('.truncate')].some(cut) : cut(element));
-            check();
-            const resize = new ResizeObserver(check);
-            resize.observe(element);
-            const text = new MutationObserver(check);
-            text.observe(element, { characterData: true, childList: true, subtree: true });
-            return () => {
-                resize.disconnect();
-                text.disconnect();
-            };
-        },
-        [within]
-    );
+    const measure = (element: T | null) => {
+        if (element === null || typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        const check = () => setTruncated(within ? [...element.querySelectorAll<HTMLElement>('.truncate')].some(cut) : cut(element));
+        check();
+        const resize = new ResizeObserver(check);
+        resize.observe(element);
+        const text = new MutationObserver(check);
+        text.observe(element, { characterData: true, childList: true, subtree: true });
+        return () => {
+            resize.disconnect();
+            text.disconnect();
+        };
+    };
     return [measure, truncated];
 }

package/src/chat/ui/intelligent-ui/use-ui-links.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { ChatUiLinkReading, ChatUiQueryState } from '@adecore/agent-contracts';
 import { uiLinkTargets, type UiLinkTarget } from '@adecore/intelligent-ui/links';
 import { uiInputValues, UI_HOST_LIMITS, type UiBlock, UiState } from '@adecore/intelligent-ui';
@@ -40,7 +40,7 @@ export function useUiLinks(
     const signature = JSON.stringify(targets);
     const input = JSON.stringify(values);
     const tickets = JSON.stringify(reads);
-    const defaultInput = useMemo(() => JSON.stringify(uiInputValues(block, new UiState(block))), [block]);
+    const defaultInput = JSON.stringify(uiInputValues(block, new UiState(block)));
     const link = host?.link;
     useEffect(() => {
         asked.current.clear();
@@ -134,7 +134,7 @@ export function useUiLinks(
             });
     };
     const hostOpenUrl = host?.openUrl;
-    const openUrl = useCallback((url: string) => hostOpenUrl?.(context.scopeId, url), [hostOpenUrl, context.scopeId]);
+    const openUrl = (url: string) => hostOpenUrl?.(context.scopeId, url);
     return {
         link: link ? resolution : undefined,
         openLink: link && host?.openLink ? open : undefined,

package/src/chat/ui/rows/ForksRow.tsx

@@ -2,8 +2,8 @@ import { useTranslation } from 'react-i18next';
 import { ChevronRight, GitFork } from 'lucide-react';
 import { useForkIdsAfter } from '../../forks';
 import { ROW_GUTTER } from '../icons';
-import { useChatHost } from '../../../host';
 import { Icon, Menu } from '@adecore/ui';
+import { useHostChatPlace } from '../../../host-hooks';
 
 const LINE = '-mx-1 mb-0.5 flex h-7 items-center gap-2 rounded-md px-1 text-xs text-text-muted';
 const LINK = `${LINE} hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-hover data-[popup-open]:text-text`;
@@ -52,8 +52,7 @@ function ForksLabel({ label, link = true }: { label: string; link?: boolean }) {
 
 // A fork no longer in this project has nowhere to lead, so it only says it is there.
 function OneFork({ forkId, label }: { forkId: string; label: string }) {
-    const host = useChatHost();
-    const place = host.useChatPlace(forkId);
+    const place = useHostChatPlace(forkId);
     return (
         <div className="flex">
             {place.title === null ? (
@@ -70,9 +69,8 @@ function OneFork({ forkId, label }: { forkId: string; label: string }) {
 }
 
 function ForkItem({ forkId }: { forkId: string }) {
-    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const place = host.useChatPlace(forkId);
+    const place = useHostChatPlace(forkId);
     return (
         <Menu.Item disabled={place.title === null} onClick={place.go}>
             <Icon icon={GitFork} size={14} /> <span className="truncate">{place.title ?? t('fork.pill.label')}</span>

package/src/chat/ui/rows/GeneratedImageRow.tsx

@@ -16,6 +16,7 @@ import { useFileLinkCwd, useOpenFileLink } from '../file-links';
 import { ImageThumb } from '../ImageView';
 import { ROW_GUTTER } from '../icons';
 import { RunningFor, WorkRow } from './WorkRows';
+import { useHostAttachmentUrl } from '../../../host-hooks';
 
 const SAVED_FLASH_MS = 2000;
 
@@ -94,7 +95,7 @@ function ReadyImage({ chatId, attachment, prompt, transparent }: { chatId: strin
     const { t } = useTranslation('agent-chat');
     const { id: scopeId } = useChatScope();
     const { attachments } = useChatHost();
-    const source = attachments.useUrl(scopeId, chatId, attachment.id);
+    const source = useHostAttachmentUrl(scopeId, chatId, attachment.id);
     const savedKey = `${scopeId}\n${chatId}\n${attachment.id}`;
     const [lightbox, setLightbox] = useState(false);
     const [saving, setSaving] = useState(false);

package/src/chat/ui/rows/MessageRows.tsx

@@ -1,4 +1,4 @@
-import { useContext, useMemo, useState, type ReactNode } from 'react';
+import { useContext, useState, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQuestionMark, Reply, TriangleAlert, X } from 'lucide-react';
@@ -14,7 +14,6 @@ import type {
 import { WAITING_NOTE_PREFIX } from '@adecore/agent-contracts';
 import { fileBadge, formatBytes, isImageAttachment } from '../../attachments';
 import { useChatRow, useCurrentItem } from '../../../state/chats';
-import { useChatHost } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { splitQuote } from '../../quote';
 import { jumpToTimelineItem } from '../../timeline-scroll';
@@ -34,6 +33,7 @@ import { ROW_GUTTER } from '../icons';
 import { useOpenForFind } from '../find-reveal';
 import { ReplyContext, UiReplyNavigationContext } from '../reply-context';
 import { UiReply } from '../intelligent-ui/UiReply';
+import { useHostAttachmentUrl, useHostChatPlace, useHostReplyAuthor, useHostStreaming } from '../../../host-hooks';
 
 // A long prompt folds so the answer stays in view; the reader can open it.
 const USER_FOLD_LINES = 8;
@@ -43,10 +43,9 @@ const USER_FOLD_CHARS = 600;
 const FOLD = 'max-h-[10em] overflow-hidden [mask-image:linear-gradient(to_bottom,black_70%,transparent)]';
 
 function useReplyAuthor(chatId: string) {
-    const host = useChatHost();
     const { id } = useChatScope();
     const context = useContext(ReplyContext);
-    const author = host.useReplyAuthor(id, context?.chatId ?? chatId);
+    const author = useHostReplyAuthor(id, context?.chatId ?? chatId);
     return context !== null && context.chatId === undefined ? null : author;
 }
 
@@ -55,9 +54,8 @@ function useReplyAuthor(chatId: string) {
  * hands a link that opens a window to the system browser, which cannot reach a blob of this page.
  */
 function AttachmentLink({ chatId, attachment }: { chatId: string; attachment: ChatAttachment }) {
-    const host = useChatHost();
     const { id } = useChatScope();
-    const { url } = host.attachments.useUrl(id, chatId, attachment.id);
+    const { url } = useHostAttachmentUrl(id, chatId, attachment.id);
     const badge = fileBadge(attachment.name);
     return (
         <Tooltip label={attachment.name}>
@@ -81,9 +79,8 @@ function AttachmentLink({ chatId, attachment }: { chatId: string; attachment: Ch
 
 /* A picture attached to a message, which opens large. */
 function AttachmentThumb({ chatId, attachment }: { chatId: string; attachment: ChatAttachment }) {
-    const host = useChatHost();
     const { id } = useChatScope();
-    const source = host.attachments.useUrl(id, chatId, attachment.id);
+    const source = useHostAttachmentUrl(id, chatId, attachment.id);
     return <ImageThumb source={source} alt={attachment.name} className="max-h-32 max-w-48 object-cover" />;
 }
 
@@ -268,15 +265,11 @@ function Writing() {
  * written fades anything: an old reply scrolled back into view just stands there.
  */
 export function AssistantRow({ chatId, item: derived }: { chatId: string; item: ChatAssistantItem }) {
-    const host = useChatHost();
     const item = useCurrentItem(chatId, derived);
     const scope = useChatScope();
     const context = useContext(ReplyContext);
-    const reply = useMemo(
-        () => (context === null && !item.parentToolUseId ? { scopeId: scope.id, chatId, itemId: item.id, streaming: item.streaming } : undefined),
-        [context, item.parentToolUseId, scope.id, chatId, item.id, item.streaming]
-    );
-    const mode = host.useStreaming();
+    const reply = context === null && !item.parentToolUseId ? { scopeId: scope.id, chatId, itemId: item.id, streaming: item.streaming } : undefined;
+    const mode = useHostStreaming();
     const [sawWriting] = useState(item.streaming);
     const live = mode === 'words' && item.streaming;
     const reveal = useRevealedText(item.text, live);
@@ -338,10 +331,9 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
  * folded, it shows the heading it opens with or itself on one line, and opened, it reads as Markdown.
  */
 export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: ChatThinkingItem }) {
-    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const item = useCurrentItem(chatId, derived);
-    const mode = host.useStreaming();
+    const mode = useHostStreaming();
     const [open, setOpen] = useState(false);
     const reveal = useRevealedText(item.text, mode === 'words' && item.streaming);
     // A block at a time, the paragraphs of the thought that closed are shown as they land.
@@ -349,8 +341,8 @@ export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: C
     // Whole, the thought stays behind "Thinking…" until it is done and then folds like any other.
     const shown = open || reveal.active || (settled !== null && settled !== '');
     const text = settled ?? reveal.text;
-    const live = useMemo(() => (item.streaming && mode !== 'whole' ? thoughtLine(text) : ''), [item.streaming, mode, text]);
-    const preview = useMemo(() => (item.streaming ? '' : thoughtPreview(item.text)), [item.streaming, item.text]);
+    const live = item.streaming && mode !== 'whole' ? thoughtLine(text) : '';
+    const preview = item.streaming ? '' : thoughtPreview(item.text);
     const duration = formatElapsedShort((item.endedAt ?? item.createdAt) - item.createdAt);
     useOpenForFind(item.id, 'text', setOpen);
     return (
@@ -401,7 +393,7 @@ export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: C
  */
 export function LiveThoughtRow({ chatId, item: derived }: { chatId: string; item: ChatThinkingItem }) {
     const item = useCurrentItem(chatId, derived);
-    const line = useMemo(() => thoughtLine(item.text), [item.text]);
+    const line = thoughtLine(item.text);
     if (line === '') {
         return null;
     }
@@ -465,9 +457,8 @@ export function NoteRow({ id, level, text, from }: { id: string; level: 'info' |
 
 /* "Open fork" on a note a fork sent, or "Open to answer" on one about a waiting child, while that chat is still in the project. */
 function OpenChatButton({ chatId, label }: { chatId: string; label: 'openFork' | 'openWaiting' }) {
-    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const place = host.useChatPlace(chatId);
+    const place = useHostChatPlace(chatId);
     if (place.title === null) {
         return null;
     }

package/src/chat/ui/rows/SubagentRow.tsx

@@ -15,9 +15,10 @@ import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows';
 import { entryTimeOf, statusWordOf, taskIdOf } from '../../subagent-list';
 import { useSubagentSupport } from '../../subagent-support';
 import { canOpenSubagent, crumbOf, type SubagentStep } from '../../subagent-view';
-import { useChatHost, type SubagentTask } from '../../../host';
+import { type SubagentTask } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { useCurrentItem } from '../../../state/chats';
+import { useHostTask } from '../../../host-hooks';
 
 // The work of a long-running agent scrolls inside its row instead of pushing the thread away.
 const CHILDREN_MAX_PX = 320;
@@ -135,11 +136,10 @@ export function SubagentRow({
     /* Opens everything it did in the thread's place, for a surface that has somewhere to open it. */
     onOpenConversation?(): void;
 }) {
-    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const taskId = taskIdOf(item);
-    const task = host.tasks.useTask(id, taskId);
+    const task = useHostTask(id, taskId);
     // A task paused on its child's limit is still a running row on the wire, but nothing is at work.
     const running = item.status === 'running' && statusWordOf(item, task) !== 'paused';
     const detail = item.description || item.summary || item.subagentType || '';

package/src/chat/ui/rows/TaskRow.tsx

@@ -39,7 +39,7 @@ function Elapsed({ startedAt }: { startedAt: number }) {
 function StateLine({ state, task }: { state: TaskRowState; task: SubagentTask | null }) {
     const { t } = useTranslation('agent-chat');
     const until = state === 'paused' ? task?.paused?.until : undefined;
-    const now = useNow(60_000, until === undefined);
+    const now = useNow(60_000, until !== undefined);
     return (
         <span className={clsx('truncate text-2xs', STATE_TONE[state])}>
             {until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) })}

package/src/chat/ui/rows/WorkRows.tsx

@@ -23,10 +23,11 @@ import {
 } from '../../logic/tools';
 import { useOpenForFind } from '../find-reveal';
 import { useChatHost, type CommandLook } from '../../../host';
+import { useCommandNames } from '../../../host-hooks';
 import { lazyNamed } from '../../../lazy';
 import { useChatActions } from '../../actions';
 import { ChatScopeContext, useChatScope } from '../../../scope';
-import { useCurrentItem } from '../../../state/chats';
+import { useAwaitsApproval, useCurrentItem } from '../../../state/chats';
 import { useTimelineFlash } from '../../timeline-flash';
 import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
 import { Icon, LazyBoundary, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
@@ -71,10 +72,14 @@ function withBrand(text: string, brands: readonly string[]): ReactNode {
     return text;
 }
 
+function hasNames(look: CommandLook): look is CommandLook & Required<Pick<CommandLook, 'useNames'>> {
+    return look.useNames !== undefined;
+}
+
 /* The detail of a look's run, with the words its host names drawn as those names. */
-function NamedLookDetail({ run, chatId, useNames }: { run: CommandLookRun; chatId: string; useNames: NonNullable<CommandLook['useNames']> }) {
+function NamedLookDetail({ run, chatId, look }: { run: CommandLookRun; chatId: string; look: Required<Pick<CommandLook, 'useNames'>> }) {
     const scope = useContext(ChatScopeContext);
-    const nameOf = useNames(scope?.id ?? '', chatId);
+    const nameOf = useCommandNames(look, scope?.id ?? '', chatId);
     const names = run.words.flatMap((word): NamedWord[] => {
         const name = nameOf(word.text, word.option);
         return name === null ? [] : [{ start: word.start, end: word.end, word: word.text, name }];
@@ -83,12 +88,12 @@ function NamedLookDetail({ run, chatId, useNames }: { run: CommandLookRun; chatI
 }
 
 function LookDetail({ run, chatId }: { run: CommandLookRun; chatId: string }) {
-    const { useNames } = run.look;
-    if (useNames === undefined) {
+    const { look } = run;
+    if (!hasNames(look)) {
         return <ShellCommand command={run.detail} code={run.code} />;
     }
     // Keyed by the look, so a row whose command turns into another look's starts its hooks again.
-    return <NamedLookDetail key={run.look.program} run={run} chatId={chatId} useNames={useNames} />;
+    return <NamedLookDetail key={look.program} run={run} chatId={chatId} look={look} />;
 }
 
 const TAG = 'shrink-0 rounded bg-surface-hover px-1.5 text-text-faint';
@@ -378,6 +383,8 @@ export function WorkLiveRow({ chatId, tool: derived }: { chatId: string; tool: C
     const shell = shellCommand(tool.name, tool.input);
     const { commandLooks } = useChatHost();
     const run = shell === null ? null : matchCommandLook(shell, commandLooks);
+    const awaiting = useAwaitsApproval(chatId, tool.toolUseId);
+    const { t } = useTranslation('agent-chat');
     return (
         <div>
             <ToggleLine
@@ -390,7 +397,13 @@ export function WorkLiveRow({ chatId, tool: derived }: { chatId: string; tool: C
                 path={summary !== '' && toolSummaryIsPath(tool.name, tool.input)}
                 open={open && opens}
                 onToggle={opens ? () => setOpen((o) => !o) : undefined}
-                trailing={<RunningFor startedAt={toolStartedAt(tool)} />}
+                trailing={
+                    awaiting ? (
+                        <span className="shrink-0 text-xs text-text-faint">{t('work.awaitingApproval')}</span>
+                    ) : (
+                        <RunningFor startedAt={toolStartedAt(tool)} />
+                    )
+                }
                 live
             />
             {open && opens && <ToolBody tool={tool} />}

package/src/chat/ui/useToggleSet.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 
 export interface ToggleSet {
     ids: ReadonlySet<string>;
@@ -15,25 +15,22 @@ export interface ToggleSet {
 export function useToggleSet(onToggle?: () => void): ToggleSet {
     const [ids, setIds] = useState<ReadonlySet<string>>(() => new Set());
 
-    const toggle = useCallback(
-        (id: string): void => {
-            setIds((current) => {
-                const next = new Set(current);
-                if (next.has(id)) {
-                    next.delete(id);
-                } else {
-                    next.add(id);
-                }
-                return next;
-            });
-            onToggle?.();
-        },
-        [onToggle]
-    );
+    const toggle = (id: string): void => {
+        setIds((current) => {
+            const next = new Set(current);
+            if (next.has(id)) {
+                next.delete(id);
+            } else {
+                next.add(id);
+            }
+            return next;
+        });
+        onToggle?.();
+    };
 
-    const add = useCallback((id: string): void => {
+    const add = (id: string): void => {
         setIds((current) => new Set(current).add(id));
-    }, []);
+    };
 
     return { ids, toggle, add };
 }

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

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useState, type RefObject } from 'react';
 import { cleanVisualVariables, type VisualAppearance, type VisualTheme, type VisualThemeVariable } from '@adecore/agent-contracts/visual';
-import { useChatHost } from '../../host';
 import { watchTheme } from './theme-watch';
+import { useHostCodeMode } from '../../host-hooks';
 
 /* The tokens of the app's theme where a frame stands; each answers '' for a token the theme lacks. */
 export interface VisualTokens {
@@ -165,8 +165,7 @@ function readTheme(element: HTMLElement, mode: VisualAppearance): VisualTheme {
  * accent or a font a person picks reaches every frame as well.
  */
 export function useVisualTheme(ref: RefObject<HTMLElement | null>): VisualTheme | null {
-    const host = useChatHost();
-    const mode = host.code.useMode();
+    const mode = useHostCodeMode();
     const [theme, setTheme] = useState<VisualTheme | null>(null);
     useLayoutEffect(() => {
         const element = ref.current;

package/src/host-hooks.ts

@@ -0,0 +1,113 @@
+'use no memo';
+/*
+ * The hooks a host hands the views, each called through a hook of its own here. To the React Compiler a
+ * hook read from a context may be another function on the next render, so it leaves a component that
+ * calls one as written. `ChatHostProvider` pins its host and a command look's hooks stay with its row's
+ * key, so they never change under a mounted view; only these wrappers go uncompiled for it.
+ */
+import type { ProviderPlatform } from '@adecore/agent-contracts';
+import { useChatHost, type ChatHost, type CommandLook } from './host';
+
+export function useHostCodeMode(): 'light' | 'dark' {
+    return useChatHost().code.useMode();
+}
+
+export function useHostCodeThemes(): { light: string; dark: string } {
+    return useChatHost().code.useThemes();
+}
+
+export function useHostAttachmentUrl(...args: Parameters<ChatHost['attachments']['useUrl']>): ReturnType<ChatHost['attachments']['useUrl']> {
+    return useChatHost().attachments.useUrl(...args);
+}
+
+export function useHostTasks(...args: Parameters<ChatHost['tasks']['useTasks']>): ReturnType<ChatHost['tasks']['useTasks']> {
+    return useChatHost().tasks.useTasks(...args);
+}
+
+export function useHostTask(...args: Parameters<ChatHost['tasks']['useTask']>): ReturnType<ChatHost['tasks']['useTask']> {
+    return useChatHost().tasks.useTask(...args);
+}
+
+export function useHostExtraPrompts(...args: Parameters<ChatHost['prompts']['useExtra']>): ReturnType<ChatHost['prompts']['useExtra']> {
+    return useChatHost().prompts.useExtra(...args);
+}
+
+export function useHostStreaming(): ReturnType<ChatHost['useStreaming']> {
+    return useChatHost().useStreaming();
+}
+
+export function useHostSendDelivery(): ReturnType<ChatHost['useSendDelivery']> {
+    return useChatHost().useSendDelivery();
+}
+
+export function useHostTimelineFind(...args: Parameters<ChatHost['useTimelineFind']>): ReturnType<ChatHost['useTimelineFind']> {
+    return useChatHost().useTimelineFind(...args);
+}
+
+export function useHostReferableChats(): ReturnType<ChatHost['useReferableChats']> {
+    return useChatHost().useReferableChats();
+}
+
+export function useHostLoginBlocked(...args: Parameters<ChatHost['useLoginBlocked']>): ReturnType<ChatHost['useLoginBlocked']> {
+    return useChatHost().useLoginBlocked(...args);
+}
+
+const noPlatform = (): ProviderPlatform | null => null;
+
+/* Null where the host does not say, as it need not. */
+export function useHostMachinePlatform(scopeId: string): ProviderPlatform | null {
+    const useMachinePlatform = useChatHost().useMachinePlatform ?? noPlatform;
+    return useMachinePlatform(scopeId);
+}
+
+export function useHostProjectLook(...args: Parameters<ChatHost['useProjectLook']>): ReturnType<ChatHost['useProjectLook']> {
+    return useChatHost().useProjectLook(...args);
+}
+
+export function useHostMachineLabel(...args: Parameters<ChatHost['useMachineLabel']>): ReturnType<ChatHost['useMachineLabel']> {
+    return useChatHost().useMachineLabel(...args);
+}
+
+export function useHostChatPlace(...args: Parameters<ChatHost['useChatPlace']>): ReturnType<ChatHost['useChatPlace']> {
+    return useChatHost().useChatPlace(...args);
+}
+
+export function useHostContextSources(...args: Parameters<ChatHost['useContextSources']>): ReturnType<ChatHost['useContextSources']> {
+    return useChatHost().useContextSources(...args);
+}
+
+export function useHostHidesFolder(...args: Parameters<ChatHost['useHidesFolder']>): ReturnType<ChatHost['useHidesFolder']> {
+    return useChatHost().useHidesFolder(...args);
+}
+
+export function useHostWelcome(...args: Parameters<ChatHost['useWelcome']>): ReturnType<ChatHost['useWelcome']> {
+    return useChatHost().useWelcome(...args);
+}
+
+export function useHostResumeAtReset(...args: Parameters<ChatHost['useResumeAtReset']>): ReturnType<ChatHost['useResumeAtReset']> {
+    return useChatHost().useResumeAtReset(...args);
+}
+
+export function useHostComposerPlaceholder(...args: Parameters<ChatHost['useComposerPlaceholder']>): ReturnType<ChatHost['useComposerPlaceholder']> {
+    return useChatHost().useComposerPlaceholder(...args);
+}
+
+export function useHostThreadCards(...args: Parameters<ChatHost['useThreadCards']>): ReturnType<ChatHost['useThreadCards']> {
+    return useChatHost().useThreadCards(...args);
+}
+
+export function useHostReplyAuthor(...args: Parameters<ChatHost['useReplyAuthor']>): ReturnType<ChatHost['useReplyAuthor']> {
+    return useChatHost().useReplyAuthor(...args);
+}
+
+export function useHostMapSource(maps: NonNullable<ChatHost['maps']>, scopeId: string): ReturnType<NonNullable<ChatHost['maps']>['useSource']> {
+    return maps.useSource(scopeId);
+}
+
+export function useCommandNames(
+    look: Required<Pick<CommandLook, 'useNames'>>,
+    scopeId: string,
+    chatId: string
+): ReturnType<NonNullable<CommandLook['useNames']>> {
+    return look.useNames(scopeId, chatId);
+}

package/src/lazy.tsx

@@ -58,6 +58,8 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
         }
     });
     const LazyNamed = (props: ComponentProps<Module[Name]>) => {
+        // `loaded` fills in place; compiled, the element drawn before the module landed would stay.
+        'use no memo';
         const Component: ComponentType<any> = loaded.current ?? Lazy;
         return <Component {...props} />;
     };