@adecore/agents-react 0.31.11 → 0.32.0

package/src/chat/ui/SubagentTimeline.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Bot, LoaderCircle } from 'lucide-react';
 import { deriveTimelineRows } from '../logic/timeline';
@@ -34,8 +34,8 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
     const scope = useChatScope();
     const { commandLooks } = useChatHost();
     const connected = useSyncExternalStore(
-        useCallback((changed) => scope.transport.subscribeStatus(changed), [scope]),
-        useCallback(() => scope.transport.status === 'open', [scope]),
+        (changed) => scope.transport.subscribeStatus(changed),
+        () => scope.transport.status === 'open',
         () => false
     );
     const { trail, show } = useSubagentTrail(chatId);
@@ -46,9 +46,9 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
     const threadRef = useRef<HTMLDivElement>(null);
     const [target, setTarget] = useState<TimelineTarget>(EMPTY_TARGET);
     const followRef = useRef(true);
-    const stopFollowing = useCallback(() => {
+    const stopFollowing = () => {
         followRef.current = false;
-    }, []);
+    };
     const groups = useToggleSet(stopFollowing);
     const subagents = useToggleSet(stopFollowing);
     // The row being read when an earlier page was asked for, so it stays where it was once that page is in.
@@ -72,17 +72,13 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
         }
     }, [state.unsupported, scope]);
 
-    const rows = useMemo(
-        () =>
-            deriveTimelineRows(state.items, {
-                expandedGroups: groups.ids,
-                expandedTurns: NO_TURNS,
-                expandedSubagents: subagents.ids,
-                activeTurnId: null,
-                commandLooks
-            }),
-        [state.items, groups.ids, subagents.ids, commandLooks]
-    );
+    const rows = deriveTimelineRows(state.items, {
+        expandedGroups: groups.ids,
+        expandedTurns: NO_TURNS,
+        expandedSubagents: subagents.ids,
+        activeTurnId: null,
+        commandLooks
+    });
 
     useLayoutEffect(() => {
         const element = scrollRef.current;

package/src/chat/ui/Timeline.tsx

@@ -79,6 +79,7 @@ import { FileLinkContext } from './file-links';
 import { AgentIcon } from '../../agents/AgentIcon';
 import { useModelName } from '../../agents/model-name';
 import { ContextMenu, EmptyState, ErrorBoundary, Icon, SectionLabel } from '@adecore/ui';
+import { useHostContextSources, useHostHidesFolder, useHostThreadCards, useHostTimelineFind, useHostWelcome } from '../../host-hooks';
 
 const ESTIMATED_ROW_PX = 56;
 // How long a jump waits for a thread that is still loading before it calls the item missing.
@@ -95,12 +96,11 @@ 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 = host.useContextSources(chatId);
-    const hidesFolder = host.useHidesFolder(chatId);
+    const sources = useHostContextSources(chatId);
+    const hidesFolder = useHostHidesFolder(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">
@@ -262,7 +262,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
             }
         );
     }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns, host.commandLooks]);
-    const cards = host.useThreadCards(scopeId, chatId);
+    const cards = useHostThreadCards(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);
@@ -270,7 +270,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         () => withTimedRows(threadRows, timedRowsOf(cards, drawsVisuals ? (visuals ?? []) : null, heldFrom)),
         [threadRows, cards, drawsVisuals, visuals, heldFrom]
     );
-    const welcomes = host.useWelcome(chatId);
+    const welcomes = useHostWelcome(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.
@@ -475,7 +475,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         }),
         [chatId, onMainAgent, rows, items, order, virtualizer, turns.add, groups.add, subagents.add, stopFollowing]
     );
-    const chatFind = host.useTimelineFind(findOptions);
+    const chatFind = useHostTimelineFind(findOptions);
     const searching = chatFind.open;
     // A find covers the whole thread, so every page before this one comes in while it is open.
     useEffect(() => {

package/src/chat/ui/UnifiedDiff.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../lazy';
@@ -20,11 +19,11 @@ export default function UnifiedDiff(props: UnifiedDiffProps) {
     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]);
+    const sourceAllowed = diffSourceBudget(oldText, newText) && patchSourceBudget(change.diff);
     const legacyMode = !allowEditor || loadEngine === undefined;
     const hasHunks = /^@@/m.test(change.diff);
-    const legacyAllowed = useMemo(() => legacyMode && legacyDiffBudget(oldText, newText, change.diff), [legacyMode, oldText, newText, change.diff]);
-    const rawAllowed = useMemo(() => hasHunks || legacyDiffBudget('', '', change.diff), [hasHunks, change.diff]);
+    const legacyAllowed = legacyMode && legacyDiffBudget(oldText, newText, change.diff);
+    const rawAllowed = hasHunks || legacyDiffBudget('', '', change.diff);
     const omitted = <DiffOmitted path={change.path} />;
     const fallback = legacyAllowed ? (
         <DiffFallbackBoundary fallback={omitted} resetKeys={[change.path, change.diff, oldText, newText, diffStyle]}>

package/src/chat/ui/VisualFrame.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { visualThemeFragment, type ChatVisual, type VisualAppearance, type VisualTheme } from '@adecore/agent-contracts/visual';
@@ -44,13 +44,10 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
     const controllerRef = useRef<VisualViewportController | null>(null);
     const [viewportReady, setViewportReady] = useState(false);
     const [measure, width] = useMeasuredWidth();
-    const setBox = useCallback(
-        (node: HTMLDivElement | null) => {
-            boxRef.current = node;
-            measure(node);
-        },
-        [measure]
-    );
+    const setBox = (node: HTMLDivElement | null) => {
+        boxRef.current = node;
+        measure(node);
+    };
     const theme = useVisualTheme(boxRef);
     const widthRef = useRef(width);
     const [reported, setReported] = useState<number | null>(null);

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

@@ -1,11 +1,11 @@
 import type { ThemeRegistration } from 'shiki';
-import { useChatHost, type ChatHost } from '../../host';
+import { type ChatHost } from '../../host';
+import { useHostCodeMode, useHostCodeThemes } from '../../host-hooks';
 
 /* The Shiki theme code is drawn in under the app's current light or dark. */
 export function useCodeTheme(): string {
-    const { code } = useChatHost();
-    const mode = code.useMode();
-    const themes = code.useThemes();
+    const mode = useHostCodeMode();
+    const themes = useHostCodeThemes();
     return mode === 'dark' ? themes.dark : themes.light;
 }
 

package/src/chat/ui/composer/placeholder.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useChatHost } from '../../../host';
 import { useChatScope } from '../../../scope';
+import { useHostComposerPlaceholder } from '../../../host-hooks';
 
 /* The empty box names its sigils as key caps, so they read as keys to press rather than as punctuation. */
 function hintedPlaceholder(lead: string, joiner: string, hints: ReadonlyArray<{ key: string; label: string }>): HTMLElement {
@@ -31,7 +31,7 @@ interface PlaceholderInput {
 export function useHintedPlaceholder({ chatId, disabled, readOnly, mentionable, hasSkills }: PlaceholderInput): string | HTMLElement {
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
-    const lead = useChatHost().useComposerPlaceholder(scope.id, chatId);
+    const lead = useHostComposerPlaceholder(scope.id, chatId);
     return useMemo(() => {
         if (disabled) {
             return t('composer.placeholder.disconnected');

package/src/chat/ui/composer/use-compaction-offer.ts

@@ -1,25 +1,45 @@
+import { useEffect, useState } from 'react';
 import type { ChatInfo, ChatItem, ProviderCapabilities } from '@adecore/agent-contracts';
-import { useNow } from '@adecore/ui';
 import { useChatRow } from '../../../state/chats';
-import { RESUME_COMPACTION_TOKENS, resumeCompactionOffer } from '../../logic/resume-compaction';
+import { RESUME_COMPACTION_TOKENS, resumeCompactionDueAt, resumeCompactionOffer, watchDueAt, type DueClock } from '../../logic/resume-compaction';
 import { useResumeCompactionDismissal } from '../../resume-compaction-dismissals';
 
-/* The offer to fold a long context before a chat that sat idle goes on, or null when there is none. */
+const PAGE_CLOCK: DueClock = {
+    now: () => Date.now(),
+    setTimer: (run, ms) => setTimeout(run, ms),
+    clearTimer: (timer) => clearTimeout(timer as ReturnType<typeof setTimeout>),
+    onWake: (wake) => {
+        if (typeof window === 'undefined') {
+            return () => {};
+        }
+        window.addEventListener('focus', wake);
+        document.addEventListener('visibilitychange', wake);
+        return () => {
+            window.removeEventListener('focus', wake);
+            document.removeEventListener('visibilitychange', wake);
+        };
+    }
+};
+
+/* The offer to fold a long context before a chat whose cache went cold goes on, or null when there is none. */
 export function useCompactionOffer(chatId: string, info: ChatInfo, compaction: ProviderCapabilities['compaction'] | undefined) {
     const order = useChatRow(chatId, (row) => row?.order);
-    const items = useChatRow(chatId, (row) => row?.structure);
+    const structure = useChatRow(chatId, (row) => row?.structure);
     const dismissedTurnId = useResumeCompactionDismissal(chatId);
-    // The cheap half of the offer, so a chat that can never make one keeps no timer.
+    const [now, setNow] = useState(Date.now);
+    // The cheap half of the offer, so a chat that can never make one walks no thread.
     const couldOffer = compaction !== undefined && compaction !== 'none' && info.usage.contextTokens >= RESUME_COMPACTION_TOKENS;
-    const now = useNow(60_000, couldOffer);
-    if (!couldOffer) {
-        return null;
-    }
-    return resumeCompactionOffer({
-        info,
-        compaction,
-        items: (order ?? []).map((id) => items?.[id]).filter((item): item is ChatItem => item !== undefined),
-        dismissedTurnId,
-        now
-    });
+    const items = couldOffer ? (order ?? []).map((id) => structure?.[id]).filter((item): item is ChatItem => item !== undefined) : [];
+    const input = { info, compaction, items, dismissedTurnId };
+    const dueAt = couldOffer ? resumeCompactionDueAt(input) : null;
+
+    // A watch for the moment the offer comes due, so a chat that can never make one keeps none.
+    useEffect(() => {
+        if (dueAt === null) {
+            return;
+        }
+        return watchDueAt(dueAt, setNow, PAGE_CLOCK);
+    }, [dueAt]);
+
+    return dueAt === null ? null : resumeCompactionOffer({ ...input, now });
 }

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

@@ -23,6 +23,7 @@ import type { ComposerInputHandle } from '../ComposerInput';
 import type { ComposerDraft } from './use-composer-draft';
 import { inCode } from './keys';
 import { clampMenuIndex, composerMenuAria } from './menu-aria';
+import { useHostReferableChats } from '../../../host-hooks';
 
 const SEARCH_DEBOUNCE_MS = 80;
 // What fits above the composer without turning the picker into a file tree.
@@ -62,7 +63,7 @@ export function useComposerMenus({ chatId, info, capabilities, providerName, dra
     const scope = useChatScope();
     const host = useChatHost();
     const { searchFiles } = host;
-    const chats = host.useReferableChats();
+    const chats = useHostReferableChats();
     const [menuIndex, setMenuIndex] = useState(0);
     const [mention, setMention] = useState<MentionQuery | null>(null);
     const [skillQuery, setSkillQuery] = useState<MentionQuery | null>(null);
@@ -156,10 +157,7 @@ export function useComposerMenus({ chatId, info, capabilities, providerName, dra
     const mentionMenuOpen = !commandMenuOpen && !skillMenuOpen && mention !== null;
     // Results belong to the query that asked for them; a closed picker shows none while the next answer is on its way.
     const files = mention === null ? [] : searched.files;
-    const chatMatches = useMemo(
-        () => (mention === null ? [] : chatSuggestions(chats, mention.query, [chatId, ...draft.chats], CHAT_RESULTS)),
-        [chatId, chats, draft.chats, mention]
-    );
+    const chatMatches = mention === null ? [] : chatSuggestions(chats, mention.query, [chatId, ...draft.chats], CHAT_RESULTS);
     const mentionCount = chatMatches.length + files.length;
     // One menu is open at a time, so they share an id.
     const listId = useId();
@@ -167,10 +165,7 @@ export function useComposerMenus({ chatId, info, capabilities, providerName, dra
     const menuCount = commandMenuOpen ? commands.length : skillMenuOpen ? skillMatches.length : mentionCount;
     // The list can shrink under a stale index; every reader takes the one that still points at an option.
     const activeIndex = clampMenuIndex(menuIndex, menuCount);
-    const inputAria = useMemo(
-        () => composerMenuAria({ label: t('composer.inputLabel'), listId, open: menuOpen, activeIndex, count: menuCount }),
-        [t, listId, menuOpen, activeIndex, menuCount]
-    );
+    const inputAria = composerMenuAria({ label: t('composer.inputLabel'), listId, open: menuOpen, activeIndex, count: menuCount });
 
     /* Which picker the caret opens: `@` for a file, `$` for a skill, or neither. In code a sigil is just text. */
     const trackTriggers = (value: string, selection: TextRange, state: EditorState): void => {

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

@@ -19,6 +19,7 @@ import type { ComposerDraft } from './use-composer-draft';
 import type { ComposerMenus } from './use-composer-menus';
 import type { PromptHistory } from './use-prompt-history';
 import type { ComposerPromptHold } from './use-prompt-hold';
+import { useHostReferableChats } from '../../../host-hooks';
 
 interface SubmitInput {
     chatId: string;
@@ -58,7 +59,7 @@ export function useComposerSubmit({
     const host = useChatHost();
     const scope = useChatScope();
     const { draft, setDraft } = box;
-    const referable = host.useReferableChats();
+    const referable = useHostReferableChats();
 
     /* Opens the host's new chat once the host took the message; a host that answers nothing took it. */
     const afterSend = (sent: void | Promise<boolean>, andNew: boolean): void => {

package/src/chat/ui/composer/use-effort-stepper.ts

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ChatInfo, ModelInfo } from '@adecore/agent-contracts';
+import { useChatScope } from '../../../scope';
+import { choiceWord } from '../../../agents/option-words';
+import { registerEffortStepper } from '../../composer-effort';
+import { EFFORT_OPTION, stepEffort, type EffortStep } from '../../logic/effort';
+import type { ChatControls } from './use-chat-controls';
+import type { ComposerNotice } from './use-notice';
+
+interface EffortStepperInput {
+    chatId: string;
+    info: ChatInfo;
+    model: ModelInfo | undefined;
+    writable: boolean;
+    controls: ChatControls;
+    setNotice: ComposerNotice['setNotice'];
+}
+
+/* Lets a command of the host step this chat's reasoning effort, as picking it in the pill's menu does, and says where it landed. */
+export function useEffortStepper({ chatId, info, model, writable, controls, setNotice }: EffortStepperInput): void {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+
+    const step = (direction: EffortStep): void => {
+        // The pill is disabled then too, and a second configuration would be dropped anyway.
+        if (!writable || controls.configurationPending) {
+            return;
+        }
+        const name = model?.name ?? info.selection.model;
+        const result = stepEffort(model, info.selection, direction);
+        if (result.kind === 'none') {
+            setNotice(t('composer.notice.noEffort', { model: name }), 'info');
+            return;
+        }
+        if (result.kind === 'edge') {
+            setNotice(
+                t(direction === 'up' ? 'composer.notice.effortHighest' : 'composer.notice.effortLowest', {
+                    effort: choiceWord(EFFORT_OPTION, result.choice),
+                    model: name
+                }),
+                'info'
+            );
+            return;
+        }
+        controls.configure({ selection: result.selection });
+        setNotice(t('composer.notice.effort', { effort: choiceWord(EFFORT_OPTION, result.choice) }), 'info');
+    };
+
+    // A command means the chat as it stands when it is given, so the registration reads the latest step.
+    const stepRef = useRef(step);
+    useEffect(() => {
+        stepRef.current = step;
+    });
+    useEffect(() => registerEffortStepper(scope.keyOf(chatId), (direction) => stepRef.current(direction)), [scope, chatId]);
+}

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const NOTICE_MS = 4000;
 
@@ -24,7 +24,7 @@ export function useNotice(): ComposerNotice {
         return () => clearTimeout(timer);
     }, [shown]);
 
-    const setNotice = useCallback((notice: string | null, tone: NoticeTone = 'error'): void => setShown(notice ? { text: notice, tone } : null), []);
+    const setNotice = (notice: string | null, tone: NoticeTone = 'error'): void => setShown(notice ? { text: notice, tone } : null);
 
     return {
         notice: shown?.text ?? null,

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

@@ -1,16 +1,16 @@
 import { useReviewSettled } from './review-settle';
-import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getFiletypeFromFileName } from '@pierre/diffs';
 import type { EditorEngine } from '@adecore/editor';
 import { DiffView } from '@adecore/editor-react';
 import { diffDocument, patchOf, type DiffDocument } from '@adecore/merge';
-import { useChatHost } from '../../../host';
 import type { FileChange } from '../../logic/tools';
 import { useDiffSourceTokens } from '../use-diff-source-tokens';
 import { diffSourceBudget } from './diff-source-budget';
 import { DiffOmitted } from './DiffOmitted';
 import { canRenderEditorDiff, EDITOR_DIFF_LIMITS, EDITOR_DIFF_WORK } from './editor-edit-model';
+import { useHostCodeMode, useHostCodeThemes } from '../../../host-hooks';
 
 type EngineLoader = () => Promise<EditorEngine>;
 
@@ -34,11 +34,10 @@ function ReadyDiff({
     layout: 'unified' | 'split';
     maxHeight: number;
 }) {
-    const host = useChatHost();
     useReviewSettled();
     const { t } = useTranslation('agent-chat');
-    const mode = host.code.useMode();
-    const theme = host.code.useThemes()[mode];
+    const mode = useHostCodeMode();
+    const theme = useHostCodeThemes()[mode];
     const language = getFiletypeFromFileName(path);
     const tokens = useDiffSourceTokens(document, language, theme);
     return (
@@ -78,7 +77,7 @@ export function EditorDocumentDiff({
     maxHeight?: number;
 }) {
     const { t } = useTranslation('agent-chat');
-    const withinLimits = useMemo(() => canRenderEditorDiff(document), [document]);
+    const withinLimits = canRenderEditorDiff(document);
     const [loaded, setLoaded] = useState<{ load: EngineLoader; engine: EditorEngine | null }>();
     useEffect(() => {
         if (!withinLimits || engines.has(loadEngine)) {
@@ -132,13 +131,10 @@ export default function EditorEditDiff({
     fallback: ReactNode;
     maxHeight?: number;
 }) {
-    const document = useMemo(
-        () =>
-            sourceChecked || diffSourceBudget(change.before, change.after)
-                ? diffDocument(patchOf(change.before, change.after, 3, { maxWork: EDITOR_DIFF_WORK }), { old: change.before, new: change.after })
-                : undefined,
-        [change.before, change.after, sourceChecked]
-    );
+    const document =
+        sourceChecked || diffSourceBudget(change.before, change.after)
+            ? diffDocument(patchOf(change.before, change.after, 3, { maxWork: EDITOR_DIFF_WORK }), { old: change.before, new: change.after })
+            : undefined;
     if (document === undefined) {
         return <DiffOmitted path={change.path} />;
     }

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

@@ -1,29 +1,24 @@
 import { LegacyDiffPool } from './LegacyDiffPool';
 import { useReviewSettled } from './review-settle';
-import { useMemo } from 'react';
 import { MultiFileDiff } from '@pierre/diffs/react';
-import { useChatHost } from '../../../host';
 import { useDiffTheme } from '../diff-theme';
 import type { FileChange } from '../../logic/tools';
+import { useHostCodeMode } from '../../../host-hooks';
 
 export default function LegacyEditDiff({ change, maxHeight }: { change: FileChange; maxHeight?: number }) {
-    const host = useChatHost();
     useReviewSettled();
-    const resolved = host.code.useMode();
+    const resolved = useHostCodeMode();
     const theme = useDiffTheme();
-    const oldFile = useMemo(() => ({ name: change.path, contents: change.before }), [change.path, change.before]);
-    const newFile = useMemo(() => ({ name: change.path, contents: change.after }), [change.path, change.after]);
-    const options = useMemo(
-        () => ({
-            diffStyle: 'unified' as const,
-            theme,
-            themeType: resolved,
-            disableFileHeader: true,
-            overflow: 'wrap' as const,
-            hunkSeparators: 'simple' as const
-        }),
-        [theme, resolved]
-    );
+    const oldFile = { name: change.path, contents: change.before };
+    const newFile = { name: change.path, contents: change.after };
+    const options = {
+        diffStyle: 'unified' as const,
+        theme,
+        themeType: resolved,
+        disableFileHeader: true,
+        overflow: 'wrap' as const,
+        hunkSeparators: 'simple' as const
+    };
     return (
         <div className="chat-diff select-text" style={maxHeight === undefined ? undefined : { maxHeight, overflow: 'auto' }}>
             <LegacyDiffPool>

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

@@ -1,13 +1,12 @@
 import { LegacyDiffPool } from './LegacyDiffPool';
 import { useReviewSettled } from './review-settle';
-import { useMemo } from 'react';
 import clsx from 'clsx';
 import { FileDiff, PatchDiff } from '@pierre/diffs/react';
 import type { ChatFileChange } from '@adecore/agent-contracts';
-import { useChatHost } from '../../../host';
 import { useDiffTheme } from '../diff-theme';
 import { fullFileDiff } from '../full-diff';
 import type { UnifiedDiffProps } from './diff-props';
+import { useHostCodeMode } from '../../../host-hooks';
 
 /*
  * A patch the CLI reported itself. The renderer needs a file header, which a CLI that only sends hunks
@@ -45,30 +44,23 @@ function lineClass(line: string): string {
 }
 
 export default function LegacyUnifiedDiff({ change, overflow = 'wrap', diffStyle = 'unified', fill = false, contents, maxHeight }: UnifiedDiffProps) {
-    const host = useChatHost();
     useReviewSettled();
-    const resolved = host.code.useMode();
+    const resolved = useHostCodeMode();
     const theme = useDiffTheme();
-    const patch = useMemo(() => asPatch(change), [change]);
+    const patch = asPatch(change);
     const oldText = contents?.old;
     const newText = contents?.new;
-    const full = useMemo(
-        () => (patch === null || oldText === undefined || newText === undefined ? null : fullFileDiff(patch, change.path, { old: oldText, new: newText })),
-        [patch, change.path, oldText, newText]
-    );
+    const full = patch === null || oldText === undefined || newText === undefined ? null : fullFileDiff(patch, change.path, { old: oldText, new: newText });
     const unfolds = full !== null;
-    const options = useMemo(
-        () => ({
-            theme,
-            themeType: resolved,
-            disableFileHeader: true,
-            diffStyle,
-            overflow,
-            hunkSeparators: unfolds ? ('line-info' as const) : ('simple' as const),
-            unsafeCSS: fill ? FILL_CSS : undefined
-        }),
-        [diffStyle, overflow, theme, resolved, fill, unfolds]
-    );
+    const options = {
+        theme,
+        themeType: resolved,
+        disableFileHeader: true,
+        diffStyle,
+        overflow,
+        hunkSeparators: unfolds ? ('line-info' as const) : ('simple' as const),
+        unsafeCSS: fill ? FILL_CSS : undefined
+    };
     if (patch === null) {
         return (
             <pre className="max-h-64 overflow-auto px-3 py-2 font-mono text-code select-text" style={fill ? undefined : { maxHeight }}>

package/src/chat/ui/diff/use-review-stack.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { planReview, type ReviewEntry, type ReviewSlot } from './review-plan';
 
 export interface ReviewStack {
@@ -10,7 +10,7 @@ export interface ReviewStack {
 
 export function useReviewStack(entries: readonly ReviewEntry[]): ReviewStack {
     const [promoted, setPromoted] = useState<string | null>(null);
-    const slots = useMemo(() => planReview(entries, promoted), [entries, promoted]);
+    const slots = planReview(entries, promoted);
     const selected = [...slots].filter(([, slot]) => slot === 'editor').map(([key]) => key);
     const [admitted, setAdmitted] = useState<string[]>(() => selected.slice(0, 1));
     const retained = admitted.filter((key) => selected.includes(key));
@@ -22,9 +22,9 @@ export function useReviewStack(entries: readonly ReviewEntry[]): ReviewStack {
     if ([...settled].some((key) => !selected.includes(key))) {
         setSettled(new Set([...settled].filter((key) => selected.includes(key))));
     }
-    const settle = useCallback((key: string) => {
+    const settle = (key: string) => {
         setSettled((previous) => (previous.has(key) ? previous : new Set([...previous, key])));
-    }, []);
+    };
     const allSettled = live.every((key) => settled.has(key));
     const next = selected.find((key) => !live.includes(key));
     useEffect(() => {

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

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
 import { registerCustomTheme, type ThemesType } from '@pierre/diffs';
 import { useChatHost, type ChatHost } from '../../host';
+import { useHostCodeThemes } from '../../host-hooks';
 
 // The library's registry is global and refuses a name twice, so what is registered is kept by name.
 const registered = new Set<string>();
@@ -23,6 +23,6 @@ function registerThemes(custom: ChatHost['code']['custom']): void {
 export function useDiffTheme(): ThemesType {
     const { code } = useChatHost();
     registerThemes(code.custom);
-    const { light, dark } = code.useThemes();
-    return useMemo(() => ({ light, dark }), [light, dark]);
+    const { light, dark } = useHostCodeThemes();
+    return { light, dark };
 }

package/src/chat/ui/file-links.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext } from 'react';
 import { useChatHost, type FileRef } from '../../host';
 import { ChatScopeContext } from '../../scope';
 
@@ -22,7 +22,7 @@ export function useFileLinkTarget(text: string): FileRef | null {
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
     const { fileLinks } = useChatHost();
-    return useMemo(() => fileLinks?.target(text, cwd, scopeId) ?? null, [fileLinks, text, cwd, scopeId]);
+    return fileLinks?.target(text, cwd, scopeId) ?? null;
 }
 
 /* Follows a reference the way the app opens a file or a folder. */

package/src/chat/ui/intelligent-ui/UiReply.tsx

@@ -399,6 +399,8 @@ function UiBlockBody({
     /* Set for a finished reply the machine keeps no readings for, which nothing will ever look up. */
     unrecorded: boolean;
 }): ReactNode {
+    // The block's state changes in place and only its revision says so; compiled, the evaluation of the first revision would stay.
+    'use no memo';
     const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const key = JSON.stringify([context.scopeId, context.chatId, context.itemId, block.id]);

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

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import type { TFunction } from 'i18next';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -439,7 +439,7 @@ function DrawnChart({
     const [measure, width] = useMeasuredWidth();
     const character = useChartCharacter();
     const [measureRows, rowsCut] = useTruncated<HTMLDivElement>(true);
-    const values = useMemo(() => uiChartValues(data), [data]);
+    const values = uiChartValues(data);
     const { kind } = chart;
     return (
         <figure className="chat-ui-flat flex flex-col gap-2.5 rounded-xl bg-ui-tile p-3.5">
@@ -473,7 +473,7 @@ function DrawnChart({
  */
 export function ChartRenderer({ node, context }: UiRendererProps<UiProps<'Chart'>>) {
     const { kind, data, unit } = node.props;
-    const chart = useMemo(() => (node.complete ? uiChartData(data, kind) : null), [node.complete, data, kind]);
+    const chart = node.complete ? uiChartData(data, kind) : null;
     if (!node.complete) {
         return <div aria-hidden className="rounded-xl bg-ui-tile" style={{ height: chartHeight(kind, data.length) }} />;
     }