@adecore/agents-react 0.31.12 → 0.32.0

package/src/chat/ui/Composer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, useSyncExternalStore, type MouseEvent, type PointerEvent } from 'react';
+import { useEffect, useRef, useState, useSyncExternalStore, type MouseEvent, type PointerEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
@@ -35,6 +35,7 @@ import { useCompactionOffer } from './composer/use-compaction-offer';
 import { useComposerDraft } from './composer/use-composer-draft';
 import { useComposerMenus } from './composer/use-composer-menus';
 import { useComposerSubmit } from './composer/use-composer-submit';
+import { useEffortStepper } from './composer/use-effort-stepper';
 import { LEAVE_DROPS_TO_THE_CARD, useDraftFiles } from './composer/use-draft-files';
 import { useContinuableTurn } from './composer/use-continuable-turn';
 import { useNotice } from './composer/use-notice';
@@ -43,6 +44,7 @@ import { usePromptHistory } from './composer/use-prompt-history';
 import { usePromptHold } from './composer/use-prompt-hold';
 import { surfacePartOf } from './composer/surface';
 import { useTakeBack } from './composer/use-take-back';
+import { useHostExtraPrompts, useHostSendDelivery } from '../../host-hooks';
 
 interface ComposerProps {
     chatId: string;
@@ -78,7 +80,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const { t } = useTranslation('agent-chat');
     const host = useChatHost();
     const scope = useChatScope();
-    const sendDelivery = host.useSendDelivery();
+    const sendDelivery = useHostSendDelivery();
     const sendKey = useChatPreferences((preferences) => preferences.sendKey);
     const provider = useProviders((row) => row.providers.find((entry) => entry.kind === info.provider));
     // Absent until the host answered `provider.list`, so only an explicit false hides anything.
@@ -96,11 +98,19 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const menus = useComposerMenus({ chatId, info, capabilities, providerName: provider?.name, draft: box, inputRef });
     const files = useDraftFiles({ capabilities, providerName: provider?.name, writable, draft: box, inputRef, setNotice: notice.setNotice });
     const controls = useChatControls({ chatId, info, notice, onRetarget });
+    useEffortStepper({
+        chatId,
+        info,
+        model: provider?.models.find((entry) => entry.slug === info.selection.model),
+        writable,
+        controls,
+        setNotice: notice.setNotice
+    });
     const guard = promptGuard(withQuote(draft.quote, draft.text));
     const continuable = useContinuableTurn(chatId, info);
     // The stopped turn something went out for, since the chat takes a moment to answer and Continue must not stand there meanwhile.
     const [sentFor, setSentFor] = useState<string | null>(null);
-    const extraPrompts = host.prompts.useExtra(scope.id, chatId);
+    const extraPrompts = useHostExtraPrompts(scope.id, chatId);
     const { submit, continueTurn, restoreStashed, toggleStash } = useComposerSubmit({
         chatId,
         writable,
@@ -144,10 +154,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const pending = usePendingRequests(chatId);
     const compactionOffer = useCompactionOffer(chatId, info, capabilities?.compaction);
     const placeholder = useHintedPlaceholder({ chatId, disabled, readOnly, mentionable: capabilities?.mentions !== false, hasSkills: menus.hasSkills });
-    const editorExtensions = useMemo(
-        () => [chipDecorations({ mentions: draft.mentions, skills: draft.skills }), LEAVE_DROPS_TO_THE_CARD],
-        [draft.mentions, draft.skills]
-    );
+    const editorExtensions = [chipDecorations({ mentions: draft.mentions, skills: draft.skills }), LEAVE_DROPS_TO_THE_CARD];
     /* The timeline owns the scroller; this is the one bit of it the composer needs to know. */
     const atEnd = useSyncExternalStore(
         subscribeTimelineEnd,
@@ -232,6 +239,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                         {compactionOffer && (
                             <ResumeCompactionDock
                                 tokens={compactionOffer.tokens}
+                                reason={compactionOffer.reason}
                                 onCompact={controls.compact}
                                 onDismiss={() => dismissResumeCompaction(scope, chatId, compactionOffer.turnId)}
                             />

package/src/chat/ui/EditDiff.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { LazyBoundary } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
 import { lazyNamed } from '../../lazy';
@@ -17,9 +16,9 @@ export default function EditDiff({ change, allowEditor = true, maxHeight }: { ch
     const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const loadEngine = host.code.editor;
-    const sourceAllowed = useMemo(() => diffSourceBudget(change.before, change.after), [change.before, change.after]);
+    const sourceAllowed = diffSourceBudget(change.before, change.after);
     const legacyMode = !allowEditor || loadEngine === undefined;
-    const legacyAllowed = useMemo(() => legacyMode && legacyDiffBudget(change.before, change.after), [legacyMode, change.before, change.after]);
+    const legacyAllowed = legacyMode && legacyDiffBudget(change.before, change.after);
     const omitted = <DiffOmitted path={change.path} />;
     const fallback = legacyAllowed ? (
         <DiffFallbackBoundary fallback={omitted} resetKeys={[change.path, change.before, change.after]}>

package/src/chat/ui/LimitState.tsx

@@ -14,6 +14,7 @@ import { useChatHost } from '../../host';
 import { useChatScope, type ChatScope } from '../../scope';
 import { useChatActions } from '../actions';
 import { useUsageStore } from '../../state/usage';
+import { useHostResumeAtReset } from '../../host-hooks';
 
 // A time a limit names reads as a clock today and with its day after that, so the words follow the minute.
 const MINUTE_MS = 60_000;
@@ -43,11 +44,10 @@ function readUnreadAccounts(scope: ChatScope): void {
  * switch off it stands off and says where that switch is.
  */
 function ResumeAtResetToggle({ chatId, info }: { chatId: string; info: ChatInfo }) {
-    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const actions = useChatActions();
-    const machineAllows = host.useResumeAtReset(id);
+    const machineAllows = useHostResumeAtReset(id);
     const set = (on: boolean): void => {
         void actions.configure(chatId, { resumeAtReset: on }).catch(() => undefined);
     };

package/src/chat/ui/Markdown.tsx

@@ -1,4 +1,4 @@
-import { createContext, memo, useContext, useMemo, type ReactNode } from 'react';
+import { createContext, memo, useContext, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { Zap } from 'lucide-react';
 import ReactMarkdown, { type Components, type ExtraProps, type Options } from 'react-markdown';
@@ -85,7 +85,7 @@ function languageOf(className: string | undefined): string {
     return /language-([\w-]+)/.exec(className ?? '')?.[1] ?? 'text';
 }
 
-const INLINE_CODE = 'rounded-sm bg-surface-sunken px-1 py-px font-mono text-code';
+const INLINE_CODE = 'rounded-sm bg-surface-sunken px-1 py-px font-mono text-code box-decoration-clone';
 
 /*
  * A path an agent wrote down. It keeps the shape of the code chip it would otherwise be, so a sentence
@@ -99,7 +99,7 @@ function FileLink({ target, className, children }: { target: FileRef; className?
         // A button is not selectable on its own, and a thread is copied as often as it is clicked.
         <button
             type="button"
-            className={clsx('cursor-pointer select-text', className)}
+            className={clsx('cursor-pointer select-text text-left', className)}
             data-file-path={target.path}
             data-file-line={target.line}
             data-file-column={target.column}
@@ -121,8 +121,10 @@ function InlineCode({ text }: { text: string }) {
         return <code className={INLINE_CODE}>{text}</code>;
     }
     return (
-        <FileLink target={target} className={`${INLINE_CODE} text-accent hover:underline`}>
-            {text}
+        // The chip sits on a code inside the button, since a button is always a box of its own and its
+        // background would fill the whole box once a long path wraps.
+        <FileLink target={target} className="text-accent">
+            <code className={clsx(INLINE_CODE, 'hover:underline')}>{text}</code>
         </FileLink>
     );
 }
@@ -393,7 +395,7 @@ export const ReplyMarkdown = memo(function ReplyMarkdown({
     arriving?: boolean;
     reply?: ShellCodeBlockReply;
 }) {
-    const blocks = useMemo(() => splitMarkdownBlocks(text), [text]);
+    const blocks = splitMarkdownBlocks(text);
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm" data-arriving={arriving || undefined}>
             {blocks.map((block, index) =>
@@ -420,7 +422,7 @@ export const ReplyMarkdown = memo(function ReplyMarkdown({
  * it was, and the files and skills picked in the composer are chips again.
  */
 export const MessageMarkdown = memo(function MessageMarkdown({ text, mentions, skills }: { text: string; mentions?: string[]; skills?: string[] }) {
-    const rehypePlugins = useMemo((): [typeof rehypeChips, ChipOptions][] => [[rehypeChips, { mentions, skills }]], [mentions, skills]);
+    const rehypePlugins: [typeof rehypeChips, ChipOptions][] = [[rehypeChips, { mentions, skills }]];
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm">
             <ReactMarkdown remarkPlugins={MESSAGE_PLUGINS} rehypePlugins={rehypePlugins} components={messageComponents}>
@@ -449,7 +451,7 @@ export const Markdown = memo(function Markdown({
     rehypePlugins?: Options['rehypePlugins'];
     componentOverrides?: Components;
 }) {
-    const renderComponents = useMemo(() => ({ ...(fileLinks ? components : plainComponents), ...componentOverrides }), [fileLinks, componentOverrides]);
+    const renderComponents = { ...(fileLinks ? components : plainComponents), ...componentOverrides };
     return (
         <div className="chat-markdown prose prose-sm max-w-none text-sm" data-muted={muted || undefined}>
             <ReactMarkdown remarkPlugins={breaks ? PLUGINS_WITH_BREAKS : PLUGINS} rehypePlugins={rehypePlugins} components={renderComponents}>

package/src/chat/ui/MermaidBlock.tsx

@@ -2,11 +2,11 @@ import { useContext, useEffect, useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Code, Workflow } from 'lucide-react';
 import { IconButton } from '@adecore/ui';
-import { useChatHost } from '../../host';
 import { CodeBlock } from './CodeBlock';
 import { CodeStreamingContext } from './code-streaming';
 import { MERMAID_TOKENS, mermaidConfig, sizedSvg, svgDataUrl, type MermaidColors, type SizedSvg } from './mermaid';
 import { watchTheme } from './theme-watch';
+import { useHostCodeMode } from '../../host-hooks';
 
 type Drawing = { state: 'drawing' } | { state: 'drawn'; image: SizedSvg } | { state: 'failed' };
 
@@ -63,10 +63,9 @@ async function drawDiagram(id: string, source: string, look: DiagramLook, dark:
  * draw, it is the code block it would otherwise be.
  */
 export function MermaidBlock({ code }: { code: string }) {
-    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const streaming = useContext(CodeStreamingContext);
-    const dark = host.code.useMode() === 'dark';
+    const dark = useHostCodeMode() === 'dark';
     const id = `mermaid-${useId().replace(/[^\w-]/g, '')}`;
     const frame = useRef<HTMLDivElement>(null);
     const [source, setSource] = useState(false);

package/src/chat/ui/Pickers.tsx

@@ -1,6 +1,6 @@
-import { useContext, useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from 'react';
+import { useContext, useEffect, useRef, useState, type ReactNode, type RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Bookmark, ChevronDown, ChevronRight, Search, Trash2 } from 'lucide-react';
+import { Bookmark, ChevronDown, ChevronRight, Search, Star, Trash2 } from 'lucide-react';
 import type { AgentKind, ModelSelection, ProviderInfo, UsageProvider } from '@adecore/agent-contracts';
 import { AgentIcon } from '../../agents/AgentIcon';
 import { ProviderLogo } from '../../agents/ProviderLogo';
@@ -11,8 +11,10 @@ import { ChatScopeContext } from '../../scope';
 import { useReportedModels } from '../../state/chats';
 import { ModelMarks } from './ModelMarks';
 import { pickerEntriesOf, type PickerEntry } from '../logic/picker-entries';
+import { favoriteModelsOf, toggleFavoriteModel, useChatPreferences } from '../preferences';
 import { forgetStashed, STASH_SHORTCUT, useStash, type StashedPrompt } from '../stash';
 import { Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
+import { useHostMachineLabel } from '../../host-hooks';
 
 const triggerClass =
     'flex h-7 shrink-0 items-center gap-1 whitespace-nowrap rounded-md px-2 text-xs text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text';
@@ -74,12 +76,13 @@ export function ModelPicker({
     const grouped = providers.length > 1;
     const trimmed = query.trim().toLowerCase();
 
-    const entries = useMemo(
-        () => pickerEntriesOf(providers, trimmed, legacyOpen, expanded, { provider, model: selection.model }),
-        [providers, trimmed, legacyOpen, expanded, provider, selection.model]
+    const favorites = useChatPreferences((preferences) => preferences.favoriteModels);
+    const starredHere = (row: PickerEntry | undefined): boolean => row?.kind === 'model' && favorites[row.provider.kind]?.includes(row.model.slug) === true;
+    const entries = pickerEntriesOf(providers, trimmed, legacyOpen, expanded, { provider, model: selection.model }, (kind) =>
+        favoriteModelsOf(favorites, kind)
     );
     const scope = useContext(ChatScopeContext);
-    const machine = host.useMachineLabel(scope?.id ?? '');
+    const machine = useHostMachineLabel(scope?.id ?? '');
     const reported = useReportedModels(provider);
     const requirementOf = (entry: PickerEntry & { kind: 'model' }) => modelRequirementOf(entry.model, entry.provider, reported);
     // A CLI that is too old blocks all its models; one way to its settings under the group says it once.
@@ -226,17 +229,21 @@ export function ModelPicker({
                         const first = grouped && (previous === undefined || previous.kind === 'legacy' || previous.provider.kind !== entry.provider.kind);
                         // The makers read as groups only where the whole list is shown, so a short list is not cut by labels.
                         const vendorOpen = trimmed !== '' || expanded.has(entry.provider.kind);
+                        // The starred rows lead their CLI without a maker's label; the makers start after them.
                         const vendorFirst =
                             vendorOpen &&
                             entry.model.vendor !== undefined &&
+                            !starredHere(entry) &&
                             (previous === undefined ||
                                 previous.kind !== 'model' ||
                                 previous.provider.kind !== entry.provider.kind ||
+                                starredHere(previous) ||
                                 previous.model.vendor !== entry.model.vendor);
                         const requirement = requirementOf(entry);
                         const next = entries[i + 1];
                         const lastOfGroup = next === undefined || next.kind !== 'model' || next.provider.kind !== entry.provider.kind;
                         const chosen = entry.provider.kind === provider && entry.model.slug === selection.model;
+                        const starred = starredHere(entry);
                         return (
                             <div key={`${entry.provider.kind}/${entry.model.slug}`}>
                                 {first && (
@@ -246,30 +253,43 @@ export function ModelPicker({
                                     </Menu.Label>
                                 )}
                                 {vendorFirst && <Menu.Label>{entry.model.vendor}</Menu.Label>}
-                                <button
-                                    role="option"
-                                    aria-selected={chosen}
-                                    aria-disabled={requirement !== null || undefined}
-                                    data-active={i === index}
-                                    className={`cursor-row flex w-full flex-col items-stretch gap-0.5 rounded-md px-2.5 py-1.5 text-left text-sm ${requirement === null ? 'text-text-muted' : 'text-text-faint'}`}
-                                    onMouseEnter={() => setIndex(i)}
-                                    onClick={() => choose(entry)}
-                                >
-                                    <span className="flex w-full items-center gap-2">
-                                        <Menu.Check kind="radio" checked={chosen} />
-                                        <span className="min-w-0 truncate">{entry.model.name}</span>
-                                        <ModelMarks model={entry.model} />
-                                        <span className="grow" />
-                                        {entry.model.legacy && <span className="text-xs text-text-faint">{t('pickers.model.legacy')}</span>}
-                                    </span>
-                                    {requirement !== null && (
-                                        <span className="pl-6 text-xs text-text-faint">
-                                            {machine === null
-                                                ? t('pickers.model.requiresHere', { cli: requirement.cli, version: requirement.minVersion })
-                                                : t('pickers.model.requires', { cli: requirement.cli, version: requirement.minVersion, machine })}
+                                {/* The star sits beside the option rather than in it, since a button holds no other button. */}
+                                <div className="flex items-start gap-0.5">
+                                    <button
+                                        role="option"
+                                        aria-selected={chosen}
+                                        aria-disabled={requirement !== null || undefined}
+                                        data-active={i === index}
+                                        className={`cursor-row flex min-w-0 grow flex-col items-stretch gap-0.5 rounded-md px-2.5 py-1.5 text-left text-sm ${requirement === null ? 'text-text-muted' : 'text-text-faint'}`}
+                                        onMouseEnter={() => setIndex(i)}
+                                        onClick={() => choose(entry)}
+                                    >
+                                        <span className="flex w-full items-center gap-2">
+                                            <Menu.Check kind="radio" checked={chosen} />
+                                            {/* Wrapped rather than cut, so a long name a provider gives is read whole. */}
+                                            <span className="min-w-0 break-words">{entry.model.name}</span>
+                                            <ModelMarks model={entry.model} />
+                                            <span className="grow" />
+                                            {entry.model.legacy && <span className="text-xs text-text-faint">{t('pickers.model.legacy')}</span>}
                                         </span>
-                                    )}
-                                </button>
+                                        {requirement !== null && (
+                                            <span className="pl-6 text-xs text-text-faint">
+                                                {machine === null
+                                                    ? t('pickers.model.requiresHere', { cli: requirement.cli, version: requirement.minVersion })
+                                                    : t('pickers.model.requires', { cli: requirement.cli, version: requirement.minVersion, machine })}
+                                            </span>
+                                        )}
+                                    </button>
+                                    <IconButton
+                                        icon={Star}
+                                        size="sm"
+                                        label={starred ? t('pickers.model.unstar') : t('pickers.model.star')}
+                                        aria-pressed={starred}
+                                        iconClassName={starred ? 'fill-current text-accent' : undefined}
+                                        className="mt-0.5 shrink-0"
+                                        onClick={() => toggleFavoriteModel(entry.provider.kind, entry.model.slug)}
+                                    />
+                                </div>
                                 {lastOfGroup && blockedKinds.has(entry.provider.kind) && (
                                     <button
                                         type="button"

package/src/chat/ui/PromptComposer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, type ReactNode } from 'react';
+import { useEffect, useRef, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ArrowDown, Hand, MessageCircleQuestionMark } from 'lucide-react';
 import type { HoldRelease } from '../prompt-hold';
@@ -12,6 +12,7 @@ import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatActions } from '../actions';
 import { Button, Icon } from '@adecore/ui';
+import { useHostExtraPrompts } from '../../host-hooks';
 
 /* Keeps a prompt card behind the draft while the person types; `released` says what lifted the hold last. */
 export interface PromptHold {
@@ -57,14 +58,11 @@ export function PromptComposer({
     const actions = useChatActions();
     const elsewhere = onShowElsewhere !== undefined;
     // A card the app raises itself waits in the chat beside the CLI's own requests.
-    const extra = host.prompts.useExtra(id, chatId);
-    const subjects = useMemo(
-        (): PromptSubject[] => [
-            ...pending.map((item): PromptSubject => ({ kind: 'chat', nodeId: chatId, item })),
-            ...extra.map((prompt): PromptSubject => ({ kind: 'host', nodeId: chatId, prompt }))
-        ],
-        [pending, extra, chatId]
-    );
+    const extra = useHostExtraPrompts(id, chatId);
+    const subjects: PromptSubject[] = [
+        ...pending.map((item): PromptSubject => ({ kind: 'chat', nodeId: chatId, item })),
+        ...extra.map((prompt): PromptSubject => ({ kind: 'host', nodeId: chatId, prompt }))
+    ];
     const session = usePromptSession({ prompts: subjects, idOf: promptIdOf, pick: pickSubject, disabled });
     const ref = useRef<HTMLDivElement>(null);
     const { active, activeId: activeKey } = session;

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);