@adecore/agents-react 0.31.12 → 0.33.0

package/src/chat/ui/ResumeCompactionDock.tsx

@@ -2,20 +2,32 @@ import { useTranslation } from 'react-i18next';
 import { Minimize2 } from 'lucide-react';
 import { formatTokens } from '@adecore/ui/format';
 import { Button, Icon } from '@adecore/ui';
+import type { ResumeCompactionReason } from '../logic/resume-compaction';
+
+interface ResumeCompactionDockProps {
+    tokens: number;
+    /* Why the next message pays for the whole thread; without it the chat only lay still. */
+    reason?: ResumeCompactionReason;
+    onCompact(): void;
+    onDismiss(): void;
+}
 
 /*
- * The offer at the top of the composer, for a chat that lay still long enough that the next message
+ * The offer at the top of the composer, for a chat whose prompt cache went cold, so the next message
  * pays for the whole thread again. It takes no keys and blocks nothing: typing and sending keeps the
  * full history, which is what a person who ignores this does.
  */
-export function ResumeCompactionDock({ tokens, onCompact, onDismiss }: { tokens: number; onCompact(): void; onDismiss(): void }) {
+export function ResumeCompactionDock({ tokens, reason = 'idle', onCompact, onDismiss }: ResumeCompactionDockProps) {
     const { t } = useTranslation('agent-chat');
+    const cold = reason === 'cache-expired';
     return (
         <div className="flex items-center gap-2 border-b border-border px-3.5 py-2.5">
             <Icon icon={Minimize2} size={16} className="shrink-0 text-text-faint" />
             <span className="flex min-w-0 grow flex-col">
-                <span className="truncate text-sm text-text">{t('resumeCompaction.title')}</span>
-                <span className="truncate text-xs tabular-nums text-text-faint">{t('resumeCompaction.carried', { tokens: formatTokens(tokens) })}</span>
+                <span className="truncate text-sm text-text">{cold ? t('resumeCompaction.cacheExpired.title') : t('resumeCompaction.title')}</span>
+                <span className="truncate text-xs tabular-nums text-text-faint">
+                    {t(cold ? 'resumeCompaction.cacheExpired.carried' : 'resumeCompaction.carried', { tokens: formatTokens(tokens) })}
+                </span>
             </span>
             <Button size="sm" onClick={onDismiss}>
                 {t('resumeCompaction.keep')}

package/src/chat/ui/RunSettings.tsx

@@ -15,9 +15,10 @@ import {
     Shield,
     ShieldAlert,
     SlidersHorizontal,
+    Star,
     type LucideIcon
 } from 'lucide-react';
-import type { AgentKind, ChatUsage, ModelInfo, ModelOptionDescriptor, ModelSelection, ProviderInfo, RuntimeMode } from '@adecore/agent-contracts';
+import type { AgentKind, ChatUsage, ModelInfo, ModelOptionDescriptor, ModelSelection, ProviderInfo, RuntimeMode, UsageWindow } from '@adecore/agent-contracts';
 import { AccountDot } from '../../agents/AccountDot';
 import { limitsOfAccount, sessionWindow } from '../../agents/account-limits';
 import { canContinueOn } from '../../agents/accounts';
@@ -25,12 +26,15 @@ import { AgentIcon } from '../../agents/AgentIcon';
 import type { AccountChoice } from '../account-choice';
 import { modelName, shortModelName } from '../../agents/model-name';
 import { ModelMarks } from './ModelMarks';
-import { modelsByVendor, searchModels, shortlistOf, wantsModelSearch } from '../logic/picker-entries';
+import { favoritesFirst, searchModels, shortlistOf, wantsModelSearch } from '../logic/picker-entries';
+import { favoriteModelsOf, toggleFavoriteModel, useChatPreferences } from '../preferences';
 import { CONTEXT_OPTION, contextFraction, contextSegments, orderOptions, type ContextPart } from '../logic/context-usage';
 import { RUNTIME_MODES } from '../runtime-modes';
+import { localizedOption } from '../../agents/option-words';
 import { formatClock, formatWeekdayClock, isSameDay, formatPercent, formatTokens } from '@adecore/ui/format';
 import { Icon, Menu, Tooltip, useNow } from '@adecore/ui';
 import { useChatHost } from '../../host';
+import { evenPace, paceText } from '../../usage/limit-groups';
 import { useUsageLimits } from '../../usage/limits';
 
 const MINUTE_MS = 60_000;
@@ -143,7 +147,7 @@ export function RunSettings({
     const owner = providers.find((entry) => entry.kind === provider);
     const current = modelName(selection.model, owner?.models);
     const short = shortModelName(current, owner?.models);
-    const options = orderOptions(model?.options ?? []);
+    const options = orderOptions((model?.options ?? []).map(localizedOption));
     const summary = options.flatMap((option) => {
         const label = optionSummary(option, selection);
         return label === null ? [] : [{ id: option.id, label, ring: option.id === CONTEXT_OPTION }];
@@ -171,7 +175,9 @@ export function RunSettings({
     };
 
     const searchable = wantsModelSearch(providers);
-    const found = query.trim() === '' ? null : searchModels(providers, query);
+    const favorites = useChatPreferences((preferences) => preferences.favoriteModels);
+    const favoritesOf = (kind: AgentKind): ReadonlySet<string> => favoriteModelsOf(favorites, kind);
+    const found = query.trim() === '' ? null : searchModels(providers, query, favoritesOf);
 
     // The menu moves the focus to its popup as it opens, so the search field takes it a frame later.
     useEffect(() => {
@@ -226,28 +232,49 @@ export function RunSettings({
         }
     };
 
-    const modelRow = (entry: ProviderInfo, row: ModelInfo) => (
-        <Menu.RadioItem key={row.slug} value={modelValue(entry.kind, row.slug)} closeOnClick>
-            <AgentIcon kind={entry.kind} size={14} className="shrink-0" />
-            <span className="min-w-0 truncate">{row.name}</span>
-            <ModelMarks model={row} />
-        </Menu.RadioItem>
-    );
+    // The name wraps rather than truncates, so a long name a provider gives is read whole.
+    const modelRow = (entry: ProviderInfo, row: ModelInfo) => {
+        const starred = favoritesOf(entry.kind).has(row.slug);
+        return (
+            <Menu.Row key={row.slug} aria-label={row.name}>
+                <Menu.RadioItem value={modelValue(entry.kind, row.slug)} closeOnClick>
+                    <AgentIcon kind={entry.kind} size={14} className="shrink-0" />
+                    <span className="min-w-0 break-words">{row.name}</span>
+                    <ModelMarks model={row} />
+                </Menu.RadioItem>
+                <Menu.RowAction
+                    icon={Star}
+                    label={starred ? t('pickers.model.unstar') : t('pickers.model.star')}
+                    iconClassName={starred ? 'fill-current text-accent' : 'text-text-faint'}
+                    closeOnClick={false}
+                    onClick={() => toggleFavoriteModel(entry.kind, row.slug)}
+                />
+            </Menu.Row>
+        );
+    };
 
-    // Every model of one provider, under a label per maker where the provider names them.
-    const byMaker = (entry: ProviderInfo, models: ModelInfo[]) =>
-        modelsByVendor(models).map((row, i, sorted) => (
-            <Fragment key={row.slug}>
-                {row.vendor !== undefined && sorted[i - 1]?.vendor !== row.vendor && <Menu.GroupLabel>{row.vendor}</Menu.GroupLabel>}
-                {modelRow(entry, row)}
-            </Fragment>
-        ));
+    // Every model of one provider, the starred ones first and the rest under a label per maker where the provider names them.
+    const byMaker = (entry: ProviderInfo, models: ModelInfo[]) => {
+        const starred = favoritesOf(entry.kind);
+        return favoritesFirst(models, starred).map((row, i, sorted) => {
+            const previous = sorted[i - 1];
+            const labeled =
+                row.vendor !== undefined && !starred.has(row.slug) && (previous === undefined || starred.has(previous.slug) || previous.vendor !== row.vendor);
+            return (
+                <Fragment key={row.slug}>
+                    {labeled && <Menu.GroupLabel>{row.vendor}</Menu.GroupLabel>}
+                    {modelRow(entry, row)}
+                </Fragment>
+            );
+        });
+    };
 
-    // A provider with many models shows the default and the chosen one, with all of them one submenu away.
+    // A provider with many models shows the starred ones, the default and the chosen one, with all of them one submenu away.
     const providerModels = (entry: ProviderInfo, models: ModelInfo[]) => {
-        const shortlist = shortlistOf(entry.kind, models, { provider, model: selection.model });
+        const starred = favoritesOf(entry.kind);
+        const shortlist = shortlistOf(entry.kind, models, { provider, model: selection.model }, starred);
         if (shortlist === null) {
-            return models.map((row) => modelRow(entry, row));
+            return [...models.filter((row) => starred.has(row.slug)), ...models.filter((row) => !starred.has(row.slug))].map((row) => modelRow(entry, row));
         }
         return (
             <>
@@ -488,7 +515,7 @@ function AccountRows({ choice, locked }: { choice: AccountChoice; locked(id: str
                         <AccountDot color={entry.account.color} />
                         <span className="truncate">{choice.nameOf(entry)}</span>
                     </span>
-                    {session !== null && <SessionLine used={session.used} resetsAt={session.resetsAt} now={now} />}
+                    {session !== null && <SessionLine window={session} now={now} />}
                 </span>
             </Menu.RadioItem>
         );
@@ -502,16 +529,28 @@ function AccountRows({ choice, locked }: { choice: AccountChoice; locked(id: str
     });
 }
 
-function SessionLine({ used, resetsAt, now }: { used: number; resetsAt: number | null; now: number }) {
+function SessionLine({ window, now }: { window: UsageWindow; now: number }) {
     const { t } = useTranslation('agent-chat');
-    const percent = Math.round(used * 100);
-    const tone = sessionTone(used);
+    const percent = Math.round(window.used * 100);
+    const tone = sessionTone(window.used);
+    const mark = evenPace(window, now)?.percent ?? null;
+    const resetsAt = window.resetsAt;
     return (
         <span className="flex items-center gap-2 text-xs text-text-faint tabular-nums">
-            <span aria-hidden className="relative h-1 w-14 shrink-0 overflow-hidden rounded-full bg-surface-sunken">
+            <span aria-hidden className="relative h-1 w-14 shrink-0 rounded-full bg-surface-sunken">
                 <span className={clsx('absolute inset-y-0 left-0 rounded-full', tone.bar)} style={{ width: `${Math.min(100, percent)}%` }} />
+                {/* Where an even spread over the window would stand, as the usage bars mark it. */}
+                {mark !== null && (
+                    <span
+                        className={clsx('absolute -inset-y-0.5 w-px -translate-x-1/2', mark <= percent ? 'bg-surface-raised' : 'bg-text-muted')}
+                        style={{ left: `${mark}%` }}
+                    />
+                )}
+            </span>
+            <span aria-hidden className={tone.text}>
+                {formatPercent(percent)}
             </span>
-            <span className={tone.text}>{formatPercent(percent)}</span>
+            <span className="sr-only">{paceText(window, now)}</span>
             {resetsAt !== null && (
                 <span className="whitespace-nowrap">
                     · {t('pickers.account.resets', { time: isSameDay(resetsAt, now) ? formatClock(resetsAt) : formatWeekdayClock(resetsAt) })}

package/src/chat/ui/Scrubber.tsx

@@ -104,9 +104,9 @@ export const Scrubber = memo(function Scrubber({
         return () => observer.disconnect();
     }, [strip]);
 
-    const kinds = useMemo(() => ticks.map((tick) => tick.kind), [ticks]);
-    const marked = useMemo(() => ticks.map((tick) => tick.bookmark !== null), [ticks]);
-    const layout = useMemo(() => layoutTicks(kinds, height, marked, found), [kinds, height, marked, found]);
+    const kinds = ticks.map((tick) => tick.kind);
+    const marked = ticks.map((tick) => tick.bookmark !== null);
+    const layout = layoutTicks(kinds, height, marked, found);
     const currentSlot = foundCurrent === null ? null : slotOf(layout, foundCurrent);
     const inView = firstInView === null || lastInView === null ? null : { first: firstInView, last: lastInView };
     const hoveredTick = hovered === null ? null : (ticks[hovered] ?? null);

package/src/chat/ui/ShellCommand.tsx

@@ -166,6 +166,8 @@ function drawNamed(command: string, runs: readonly Run[] | null, names: readonly
  * caller knows, and `names` draws words as the names a host gave them, both as offsets into `command`.
  */
 export function ShellCommand({ command, code = NO_CODE, names = NO_NAMES }: { command: string; code?: readonly EmbeddedCode[]; names?: readonly NamedWord[] }) {
+    // The highlighter's cache fills in place; compiled, the runs it gave before its grammars loaded would stay.
+    'use no memo';
     const theme = useCodeTheme();
     const { custom } = useChatHost().code;
     const highlighter = useCodeHighlighter();

package/src/chat/ui/SubagentInfo.tsx

@@ -7,20 +7,19 @@ import { SubagentActions, SubagentBreadcrumb } from './SubagentControls';
 import { useNow } from '@adecore/ui';
 import { useModelName } from '../../agents/model-name';
 import { useChatRow } from '../../state/chats';
-import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
+import { useHostTask } from '../../host-hooks';
 
 /*
  * What a sub-agent is, over its conversation: the way down to it, its state and time, the model it runs on
  * and what it spent, and the way out. Only the way down and out for a conversation whose row the thread lost.
  */
 export function SubagentInfo({ chatId, toolUseId }: { chatId: string; toolUseId: string }) {
-    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const item = useSubagentItem(chatId, toolUseId);
     const provider = useChatRow(chatId, (row) => row?.info.provider);
-    const task = host.tasks.useTask(id, item === null ? null : taskIdOf(item));
+    const task = useHostTask(id, item === null ? null : taskIdOf(item));
     const modelName = useModelName(provider, item?.model ?? '');
     const now = useNow(1000, item?.status === 'running');
     const word = item === null ? null : statusWordOf(item, task);

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,