@adecore/agents-react 0.31.12 → 0.33.0

package/src/chat/ui/ChatActivity.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import clsx from 'clsx';
 import { useShallow } from 'zustand/shallow';
 import { useTranslation } from 'react-i18next';
@@ -16,6 +16,7 @@ import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatActions } from '../actions';
 import { statusLookOf, type StatusWord } from '../../agents/status-look';
+import { useHostTask, useHostTasks } from '../../host-hooks';
 
 const NO_TASKS: readonly ChatBackgroundTask[] = [];
 
@@ -30,29 +31,21 @@ export function ChatActivity({ chatId }: { chatId: string }) {
     const order = useChatRow(chatId, (row) => row?.order) ?? NO_ITEMS;
     const before = useChatRow(chatId, (row) => row?.subagentsBefore) ?? NO_ITEMS;
     const structure = useChatRow(chatId, (row) => row?.structure);
-    const subagents = useMemo(() => (structure === undefined ? [] : flyoutSubagents([...before, ...order], structure)), [before, order, structure]);
+    const subagents = structure === undefined ? [] : flyoutSubagents([...before, ...order], structure);
     const { id, keyOf } = useChatScope();
-    const tasks = host.tasks.useTasks(id);
+    const tasks = useHostTasks(id);
     // The infos of these sub-agents' own chats, so the info of any other chat changing does not draw this again.
     const children = useChats(useShallow((s) => subagents.map((item) => (item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info))));
-    const progress = useMemo(
-        () =>
-            progressOf(
-                subagents.map((item, index) => {
-                    const taskId = taskIdOf(item);
-                    return taskRowStateOf(item, taskId === null ? null : (tasks?.[taskId] ?? null), children[index]);
-                })
-            ),
-        [subagents, tasks, children]
-    );
-    const words = useMemo(
-        () =>
-            subagents.map((item) => {
-                const taskId = taskIdOf(item);
-                return statusWordOf(item, taskId === null ? null : (tasks?.[taskId] ?? null));
-            }),
-        [subagents, tasks]
+    const progress = progressOf(
+        subagents.map((item, index) => {
+            const taskId = taskIdOf(item);
+            return taskRowStateOf(item, taskId === null ? null : (tasks?.[taskId] ?? null), children[index]);
+        })
     );
+    const words = subagents.map((item) => {
+        const taskId = taskIdOf(item);
+        return statusWordOf(item, taskId === null ? null : (tasks?.[taskId] ?? null));
+    });
     const background = useChatRow(chatId, (row) => row?.info.background) ?? NO_TASKS;
     if (subagents.length === 0 && background.length === 0) {
         return null;
@@ -174,11 +167,10 @@ function SubagentRows({ chatId, items }: { chatId: string; items: readonly ChatS
 }
 
 function SubagentEntry({ chatId, item, now }: { chatId: string; item: ChatSubagentItem; now: number }) {
-    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id, keyOf } = useChatScope();
     const refused = useSubagentSupport((s) => s.unsupported[id] === true);
-    const task = host.tasks.useTask(id, taskIdOf(item));
+    const task = useHostTask(id, taskIdOf(item));
     const { show } = useSubagentTrail(chatId);
     const child = useChats((s) => (item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info));
     const word = statusWordOf(item, task);

package/src/chat/ui/ChatReferenceChip.tsx

@@ -1,15 +1,14 @@
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { MessageSquare, X } from 'lucide-react';
-import { useChatHost } from '../../host';
 import { CHIP_IN_MESSAGE, MENTION_TONE } from './chips';
 import { Icon, Tooltip } from '@adecore/ui';
+import { useHostReferableChats } from '../../host-hooks';
 
 /* A chat attached to a message, under the title it has now rather than the one it had when it was attached. */
 export function ChatReferenceChip({ chatId, onRemove }: { chatId: string; onRemove?: () => void }) {
-    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const chat = host.useReferableChats().find((candidate) => candidate.id === chatId);
+    const chat = useHostReferableChats().find((candidate) => candidate.id === chatId);
     const title = chat === undefined ? t('chatReference.gone') : chat.title || t('chatReference.untitled');
     return (
         <span className={clsx(MENTION_TONE, CHIP_IN_MESSAGE)}>

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,20 +2,23 @@ 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 { DIAGRAM_TOKENS, GROUND_TOKEN, renderOptions, svgDataUrl, themedSvg, type DiagramFont } from './mermaid';
 import { watchTheme } from './theme-watch';
+import { useHostCodeMode } from '../../host-hooks';
 
-type Drawing = { state: 'drawing' } | { state: 'drawn'; image: SizedSvg } | { state: 'failed' };
+interface LaidOut {
+    svg: string;
+    width: number;
+    height: number;
+}
 
-// Mermaid keeps one configuration for the page, so one diagram is drawn at a time with its own.
-let queue: Promise<unknown> = Promise.resolve();
+type Drawing = { state: 'drawing' } | { state: 'drawn'; image: LaidOut } | { state: 'failed' };
 
 let probeCanvas: HTMLCanvasElement | null = null;
 
-/* A token as an opaque `#rrggbb` over `ground`, which is what Mermaid's color math reads. */
+/* A token as an opaque `#rrggbb` over `ground`, so a border with an alpha mixes with the ground and not with what is under the image. */
 function resolveColor(element: HTMLElement, token: string, ground: string): string {
     probeCanvas ??= document.createElement('canvas');
     probeCanvas.width = 1;
@@ -33,47 +36,58 @@ function resolveColor(element: HTMLElement, token: string, ground: string): stri
     return `#${[red, green, blue].map((channel) => channel!.toString(16).padStart(2, '0')).join('')}`;
 }
 
-function themeColors(element: HTMLElement): MermaidColors {
-    const ground = resolveColor(element, MERMAID_TOKENS.ground, '#808080');
-    const entries = Object.entries(MERMAID_TOKENS).map(([name, token]) => [name, name === 'ground' ? ground : resolveColor(element, token, ground)]);
-    return Object.fromEntries(entries) as unknown as MermaidColors;
-}
-
 /* What a diagram reads of the theme where it stands. */
 interface DiagramLook {
-    colors: MermaidColors;
-    font: { family: string; size: string };
+    colors: Record<string, string>;
+    font: DiagramFont;
 }
 
 function diagramLook(element: HTMLElement): DiagramLook {
     const style = getComputedStyle(element);
-    return { colors: themeColors(element), font: { family: style.fontFamily, size: style.fontSize } };
+    const ground = resolveColor(element, GROUND_TOKEN, '#808080');
+    const colors = Object.fromEntries(
+        Object.entries(DIAGRAM_TOKENS).map(([name, token]) => [name, token === GROUND_TOKEN ? ground : resolveColor(element, token, ground)])
+    );
+    const font = {
+        family: style.fontFamily,
+        mono: style.getPropertyValue('--font-mono').trim() || 'monospace',
+        size: Number.parseFloat(style.fontSize) || 14
+    };
+    return { colors, font };
+}
+
+/* Keeps the look on screen when nothing of it changed, so a change of the root that leaves every color alone draws nothing again. */
+function keepingSame(next: DiagramLook) {
+    return (current: DiagramLook | null) => (current !== null && JSON.stringify(current) === JSON.stringify(next) ? current : next);
 }
 
-async function drawDiagram(id: string, source: string, look: DiagramLook, dark: boolean): Promise<SizedSvg | null> {
-    const { default: mermaid } = await import('mermaid');
-    mermaid.initialize(mermaidConfig(look.colors, dark, look.font));
-    const { svg } = await mermaid.render(id, source);
-    return sizedSvg(svg);
+async function layOut(id: string, source: string, font: DiagramFont): Promise<LaidOut> {
+    const { renderAsync } = await import('pele/lazy');
+    const { svg, width, height } = await renderAsync(source, renderOptions(font, id));
+    return { svg, width: Math.ceil(width), height: Math.ceil(height) };
 }
 
 /*
- * A ```mermaid fence, drawn as the diagram once the fence is closed. Mermaid is large, so it loads on
- * the first diagram of the page. While the fence grows, and when the text is no diagram Mermaid can
- * draw, it is the code block it would otherwise be.
+ * A ```mermaid fence, drawn as the diagram once the fence is closed. Pele loads on the first diagram of the
+ * page, and then only what a diagram of that kind needs. While the fence grows, and when the text is no diagram
+ * Pele can 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);
     const [drawing, setDrawing] = useState<Drawing>({ state: 'drawing' });
-    // The look of the diagram on screen or on its way there, null before the first.
-    const drawnLook = useRef<string | null>(null);
-    const [themeRevision, setThemeRevision] = useState(0);
+    const [look, setLook] = useState<DiagramLook | null>(null);
+
+    useEffect(() => {
+        const element = frame.current;
+        if (element !== null) {
+            setLook(keepingSame(diagramLook(element)));
+        }
+    }, [dark]);
 
     // An app may change its colors without turning light or dark, which only the root of the page tells.
     useEffect(() => {
@@ -81,34 +95,28 @@ export function MermaidBlock({ code }: { code: string }) {
         if (element === null) {
             return;
         }
-        return watchTheme(element.ownerDocument, () => {
-            if (drawnLook.current !== null && JSON.stringify(diagramLook(element)) !== drawnLook.current) {
-                setThemeRevision((revision) => revision + 1);
-            }
-        });
+        return watchTheme(element.ownerDocument, () => setLook(keepingSame(diagramLook(element))));
     }, []);
 
+    const fontFamily = look?.font.family;
+    const fontMono = look?.font.mono;
+    const fontSize = look?.font.size;
     useEffect(() => {
-        const element = frame.current;
-        if (streaming || element === null) {
+        if (streaming || fontFamily === undefined || fontMono === undefined || fontSize === undefined) {
             return;
         }
         let cancelled = false;
-        const look = diagramLook(element);
-        drawnLook.current = JSON.stringify(look);
-        // A diagram already drawn stays until the next one is there, so a change of the theme does not make it blink.
-        setDrawing((current) => (current.state === 'drawn' ? current : { state: 'drawing' }));
-        const drawn = queue.then(() => (cancelled ? null : drawDiagram(id, code, look, dark)));
-        queue = drawn.catch(() => undefined);
-        drawn.then(
-            (image) => !cancelled && setDrawing(image === null ? { state: 'failed' } : { state: 'drawn', image }),
+        // A diagram already drawn stays until the next one is there, so it does not blink.
+        layOut(id, code, { family: fontFamily, mono: fontMono, size: fontSize }).then(
+            (image) => !cancelled && setDrawing({ state: 'drawn', image }),
             () => !cancelled && setDrawing({ state: 'failed' })
         );
         return () => {
             cancelled = true;
         };
-    }, [code, dark, id, streaming, themeRevision]);
+    }, [code, fontFamily, fontMono, fontSize, id, streaming]);
 
+    const image = drawing.state === 'drawn' && look !== null ? { ...drawing.image, svg: themedSvg(drawing.image.svg, look.colors) } : null;
     const showsDiagram = !streaming && !source && drawing.state !== 'failed';
     const toggle =
         streaming || drawing.state === 'failed' ? undefined : (
@@ -128,12 +136,12 @@ export function MermaidBlock({ code }: { code: string }) {
                 actions={toggle}
                 view={
                     showsDiagram ? (
-                        <div className="overflow-x-auto p-3" aria-busy={drawing.state === 'drawing' || undefined}>
-                            {drawing.state === 'drawn' && (
+                        <div className="overflow-x-auto p-3" aria-busy={image === null || undefined}>
+                            {image !== null && (
                                 <img
-                                    src={svgDataUrl(drawing.image.svg)}
-                                    width={drawing.image.width}
-                                    height={drawing.image.height}
+                                    src={svgDataUrl(image.svg)}
+                                    width={image.width}
+                                    height={image.height}
                                     alt={t('code.mermaid.diagram')}
                                     className="m-0 max-w-none"
                                     draggable={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;