@adecore/agents-react 0.31.12 → 0.33.0

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,6 +23,7 @@ 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';
@@ -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';
@@ -278,7 +283,7 @@ function ToolOutput({ tool }: { tool: ChatToolItem }) {
 }
 
 /* An opened call without a card: what it was asked in the foreground, what it answered muted below. */
-function ToolBody({ tool }: { tool: ChatToolItem }) {
+export function ToolBody({ tool }: { tool: ChatToolItem }) {
     const patches = unifiedChanges(tool);
     const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
     if (patches.length + changes.length > 0) {

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

@@ -1,68 +1,129 @@
+import { useState } from 'react';
+import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Bot, ListTree, TriangleAlert, Square } from 'lucide-react';
-import { workflowAgentRef, type ChatToolItem, type ChatWorkflow } from '@adecore/agent-contracts';
-import { workflowAgentTime, workflowPhases, type WorkflowAgentView, type WorkflowPhaseView } from '../../logic/workflow';
+import { Bot, ChevronRight, Square, TriangleAlert, Workflow, X } from 'lucide-react';
+import { workflowAgentRef, type AgentKind, type ChatToolItem, type ChatWorkflow } from '@adecore/agent-contracts';
+import { formatElapsedShort } from '@adecore/ui/format';
+import { Icon, IconButton, useTickingText } from '@adecore/ui';
+import { AgentIcon } from '../../../agents/AgentIcon';
+import {
+    workflowAgentPreview,
+    workflowAgentTime,
+    workflowCounts,
+    workflowDescription,
+    workflowPhases,
+    type WorkflowAgentState,
+    type WorkflowAgentView,
+    type WorkflowCounts,
+    type WorkflowPhaseView
+} from '../../logic/workflow';
+import { hasToolBody } from '../../logic/tools';
 import { useSubagentSupport } from '../../subagent-support';
 import type { SubagentStep } from '../../subagent-view';
 import { ROW_GUTTER } from '../icons';
-import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows';
+import { ToolBody } from './WorkRows';
 import { useChatScope } from '../../../scope';
-import { Icon, IconButton } from '@adecore/ui';
+import { useChats } from '../../../state/chats';
 import { useChatActions } from '../../actions';
 import { useChatHost } from '../../../host';
 
-function AgentLine({ view, onOpen }: { view: WorkflowAgentView; onOpen?(step: SubagentStep): void }) {
+const DOT: Record<WorkflowAgentState, string> = {
+    running: 'bg-status-running',
+    waiting: 'bg-text-faint',
+    stopped: 'bg-text-faint',
+    done: 'bg-status-idle',
+    failed: 'bg-status-error'
+};
+
+const TIME = 'shrink-0 text-xs text-text-faint tabular-nums';
+
+function Elapsed({ startedAt }: { startedAt: number }) {
+    const ref = useTickingText(() => formatElapsedShort(Date.now() - startedAt));
+    return <span ref={ref} className={TIME} />;
+}
+
+function AgentLine({ view, provider, onOpen }: { view: WorkflowAgentView; provider: AgentKind | undefined; onOpen?(step: SubagentStep): void }) {
     const { agent, state } = view;
     const time = workflowAgentTime(view);
-    const running = state === 'running';
+    const preview = workflowAgentPreview(view);
     const agentId = agent.agentId;
     // One still waiting has no transcript yet.
-    const open = onOpen !== undefined && agentId !== null ? () => onOpen({ toolUseId: workflowAgentRef(agentId), description: agent.label }) : () => undefined;
+    const open = onOpen !== undefined && agentId !== null ? () => onOpen({ toolUseId: workflowAgentRef(agentId), description: agent.label }) : undefined;
     return (
-        <ToggleLine
-            icon={<Icon icon={Bot} size={12} />}
-            label={agent.label}
-            detail={running ? (agent.lastTool ?? undefined) : undefined}
-            open={false}
-            onToggle={open}
-            failed={state === 'failed'}
-            live={running}
-            trailing={
-                running && agent.startedAt !== null ? (
-                    <RunningFor startedAt={agent.startedAt} />
+        <button
+            className="-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-start gap-2 rounded-md px-1 py-1 text-left enabled:hover:bg-surface-hover"
+            disabled={open === undefined}
+            onClick={open}
+        >
+            <span className={clsx(ROW_GUTTER, 'relative text-text')}>
+                {provider === undefined ? <Icon icon={Bot} size={14} /> : <AgentIcon kind={provider} size={14} />}
+                <span className={clsx('absolute -right-0.75 bottom-0 size-2 rounded-full ring-2 ring-surface', DOT[state])} />
+            </span>
+            <span className="flex min-w-0 grow flex-col">
+                <span data-find-field="summary" className={clsx('truncate text-xs font-medium', state === 'failed' ? 'text-status-error' : 'text-text')}>
+                    {agent.label}
+                </span>
+                {(preview.tool !== null || preview.text !== null) && (
+                    <span className="truncate text-2xs text-text-muted">
+                        {preview.tool !== null && <span className="font-mono text-code">{preview.tool}</span>}
+                        {preview.tool !== null && preview.text !== null && ' · '}
+                        {preview.text}
+                    </span>
+                )}
+            </span>
+            <span className="flex h-5 shrink-0 items-center gap-2">
+                {state === 'running' && agent.startedAt !== null ? (
+                    <Elapsed startedAt={agent.startedAt} />
                 ) : (
-                    <span className="shrink-0 text-xs text-text-faint tabular-nums">{time}</span>
-                )
-            }
-        />
+                    time !== null && <span className={TIME}>{time}</span>
+                )}
+                {state === 'failed' && <Icon icon={X} size={12} className="shrink-0 text-status-error" />}
+                <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint', open === undefined && 'invisible')} />
+            </span>
+        </button>
     );
 }
 
-function PhaseBlock({ phase, onOpen }: { phase: WorkflowPhaseView; onOpen?(step: SubagentStep): void }) {
+function PhaseBlock({ phase, provider, onOpen }: { phase: WorkflowPhaseView; provider: AgentKind | undefined; onOpen?(step: SubagentStep): void }) {
     const { t } = useTranslation('agent-chat');
+    const settled = phase.agents.filter((view) => view.state === 'done' || view.state === 'failed').length;
     return (
-        <div>
+        <div className="mt-3">
             {phase.title !== null && (
-                <div className="mb-0.5 flex h-7 min-w-0 items-center gap-2 text-xs text-text-muted">
-                    <span className={ROW_GUTTER}>
-                        <Icon icon={ListTree} size={12} />
+                <div className="flex h-7 min-w-0 items-center gap-2 text-xs">
+                    <span className="min-w-0 truncate font-medium text-text">{phase.title}</span>
+                    <span className="shrink-0 text-text-faint tabular-nums">
+                        {phase.agents.length === 0 ? t('rows.workflow.notStarted') : `${settled}/${phase.agents.length}`}
                     </span>
-                    <span className="min-w-0 truncate">{phase.title}</span>
-                    <span className="grow" />
-                    {phase.agents.length === 0 && <span className="shrink-0 text-text-faint">{t('rows.workflow.notStarted')}</span>}
-                </div>
-            )}
-            {phase.agents.length > 0 && (
-                <div className={phase.title === null ? undefined : 'ml-6'}>
-                    {phase.agents.map((view) => (
-                        <AgentLine key={view.agent.index} view={view} onOpen={onOpen} />
-                    ))}
                 </div>
             )}
+            {phase.agents.map((view) => (
+                <AgentLine key={view.agent.index} view={view} provider={provider} onOpen={onOpen} />
+            ))}
         </div>
     );
 }
 
+function Counts({ counts }: { counts: WorkflowCounts }) {
+    const { t } = useTranslation('agent-chat');
+    const parts = [
+        { key: 'working', count: counts.running, tone: 'text-status-running' },
+        { key: 'finished', count: counts.done, tone: 'text-status-idle' },
+        { key: 'failedCount', count: counts.failed, tone: 'text-status-error' }
+    ].filter((part) => part.count > 0);
+    return (
+        <span className="shrink-0 truncate text-xs text-text-faint tabular-nums">
+            {t('rows.workflow.agents', { count: counts.total })}
+            {parts.map((part) => (
+                <span key={part.key}>
+                    {' · '}
+                    <span className={part.tone}>{t(`rows.workflow.${part.key}`, { count: part.count })}</span>
+                </span>
+            ))}
+        </span>
+    );
+}
+
 // Keep background progress visible after the launcher turn ends.
 export function WorkflowRow({
     tool,
@@ -77,11 +138,16 @@ export function WorkflowRow({
 }) {
     const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const { id } = useChatScope();
+    const { id, keyOf } = useChatScope();
+    const [open, setOpen] = useState(false);
     // A host that does not answer `chat.subagent` has no conversation to open for anyone.
     const refused = useSubagentSupport((s) => s.unsupported[id] === true);
+    const provider = useChats((s) => (chatId === undefined ? undefined : s.statusByKey[keyOf(chatId)]?.info?.provider));
     const running = tool.state === 'running';
     const phases = workflowPhases(workflow, running);
+    const counts = workflowCounts(phases);
+    const description = workflowDescription(tool.input);
+    const opens = hasToolBody(tool);
     const onOpen = refused ? undefined : onOpenAgent;
     const actions = useChatActions();
     const stop = (): void => {
@@ -95,27 +161,51 @@ export function WorkflowRow({
             });
         }
     };
+    const failed = tool.state === 'error';
+    const header = (
+        <>
+            <span className={clsx(ROW_GUTTER, running && 'text-accent')}>
+                <Icon icon={Workflow} size={12} />
+            </span>
+            <span className={clsx('shrink-0', running && 'chat-live-text')}>{t(`rows.workflow.${running ? 'running' : failed ? 'failed' : 'done'}`)}</span>
+            <span className="grow" />
+            {counts.total > 0 && <Counts counts={counts} />}
+            {opens && <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />}
+        </>
+    );
+    const headerClasses = clsx(
+        '-mx-1 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs',
+        failed ? 'text-status-error' : 'text-text-muted',
+        opens && 'hover:bg-surface-hover'
+    );
     return (
-        <div>
+        <div data-find-item={tool.id} className="mb-1">
             <div className="flex items-center gap-1">
                 <div className="min-w-0 grow">
-                    {running ? <WorkLiveRow chatId={chatId ?? ''} tool={tool} /> : <WorkRow chatId={chatId} tool={tool} detail={workflow.name ?? undefined} />}
+                    {opens ? (
+                        <button className={headerClasses} onClick={() => setOpen((value) => !value)}>
+                            {header}
+                        </button>
+                    ) : (
+                        <div className={headerClasses}>{header}</div>
+                    )}
                 </div>
                 {running && chatId && workflow.taskId && <IconButton icon={Square} size="xs" label={t('activity.stop')} onClick={stop} />}
             </div>
-            {running && workflow.stalledAt !== undefined && (
-                <p role="status" className="ml-6 mb-1 flex items-start gap-1.5 text-xs text-text-muted">
-                    <Icon icon={TriangleAlert} size={12} className="mt-0.5 shrink-0 text-status-needs-you" />
-                    <span>{t('rows.workflow.stalled')}</span>
-                </p>
-            )}
-            {phases.length > 0 && (
-                <div className="ml-6">
-                    {phases.map((phase) => (
-                        <PhaseBlock key={phase.key} phase={phase} onOpen={onOpen} />
-                    ))}
-                </div>
-            )}
+            {open && opens && <ToolBody tool={tool} />}
+            <div className="mt-1.5 ml-6">
+                {workflow.name !== null && <div className="truncate text-sm font-medium text-text">{workflow.name}</div>}
+                {description !== null && <p className="mt-0.5 line-clamp-2 text-xs text-text-muted">{description}</p>}
+                {running && workflow.stalledAt !== undefined && (
+                    <p role="status" className="mt-1 flex items-start gap-1.5 text-xs text-text-muted">
+                        <Icon icon={TriangleAlert} size={12} className="mt-0.5 shrink-0 text-status-needs-you" />
+                        <span>{t('rows.workflow.stalled')}</span>
+                    </p>
+                )}
+                {phases.map((phase) => (
+                    <PhaseBlock key={phase.key} phase={phase} provider={provider} onOpen={onOpen} />
+                ))}
+            </div>
         </div>
     );
 }

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} />;
     };