@adecore/agents-react 0.0.1 → 0.17.0-beta.1

package/src/chat/ui/Markdown.tsx

@@ -0,0 +1,258 @@
+import { memo, useMemo, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { Zap } from 'lucide-react';
+import ReactMarkdown, { type Components, type Options } from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+import { CHIP_IN_MESSAGE, MENTION_TONE, SKILL_TONE } from './chips';
+import { CodeBlock } from './CodeBlock';
+import { CodeStreamingContext } from './code-streaming';
+import { splitMarkdownBlocks } from './markdown-blocks';
+import { rehypeChips, type ChipOptions } from './rehype-chips';
+import { rehypeFadeWords } from './rehype-fade';
+import { remarkHtmlAsText } from './remark-html-as-text';
+import type { FileRef } from '../../host';
+import { openFileLink, useFileLinkCwd, useFileLinkTarget } from './file-links';
+import { FileIcon, Icon } from '@adecore/ui';
+
+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';
+
+/*
+ * A path an agent wrote down, opened in the preview panel. It keeps the shape of the code chip it
+ * would otherwise be, so a sentence full of them does not start dancing; only the color says it can
+ * be clicked. `data-file-path` is what the thread's own right-click menu reads, so a link answers to
+ * both ways of opening it.
+ */
+function FileLink({ target, className, children }: { target: FileRef; className?: string; children: ReactNode }) {
+    const cwd = useFileLinkCwd();
+    return (
+        // `select-text` because a thread is copied as often as it is clicked, and a button is not
+        // selectable on its own.
+        <button
+            type="button"
+            className={clsx('cursor-pointer select-text', className)}
+            data-file-path={target.path}
+            data-file-line={target.line}
+            onClick={() => openFileLink(cwd, target)}
+        >
+            {children}
+        </button>
+    );
+}
+
+/* Inline code, which is a file reference often enough that it is worth asking every time. */
+function InlineCode({ text }: { text: string }) {
+    const target = useFileLinkTarget(text);
+    if (target === null) {
+        return <code className={INLINE_CODE}>{text}</code>;
+    }
+    return (
+        <FileLink target={target} className={`${INLINE_CODE} text-accent hover:underline`}>
+            {text}
+        </FileLink>
+    );
+}
+
+/* The path a link target spells, with the one scheme that still means a file on the host's machine
+   taken off. A href nobody encoded is left as it is, since decoding throws on a stray percent. */
+function hrefPath(href: string): string {
+    const bare = href.replace(/^file:\/\//, '');
+    try {
+        return decodeURI(bare);
+    } catch {
+        return bare;
+    }
+}
+
+/* A markdown link, which is a file when its target names no scheme of its own. */
+function MarkdownLink({ href, children }: { href?: string; children?: ReactNode }) {
+    const target = useFileLinkTarget(hrefPath(href ?? ''));
+    if (target !== null) {
+        return (
+            <FileLink target={target} className="text-accent underline underline-offset-2">
+                {children}
+            </FileLink>
+        );
+    }
+    return (
+        <a href={href} target="_blank" rel="noreferrer">
+            {children}
+        </a>
+    );
+}
+
+const components = {
+    pre({ children }: { children?: ReactNode }) {
+        return <>{children}</>;
+    },
+    code({ className, children }: { className?: string; children?: ReactNode }) {
+        const text = String(children ?? '');
+        // Fenced blocks end with a newline and carry a language; anything else is inline.
+        if (className?.startsWith('language-') || text.includes('\n')) {
+            return <CodeBlock code={text.replace(/\n$/, '')} lang={languageOf(className)} />;
+        }
+        return <InlineCode text={text} />;
+    },
+    a({ href, children }: { href?: string; children?: ReactNode }) {
+        return <MarkdownLink href={href}>{children}</MarkdownLink>;
+    },
+    table({ children }: { children?: ReactNode }) {
+        // A table wider than the column scrolls on its own instead of pushing the thread sideways.
+        return (
+            <div className="chat-table">
+                <table>{children}</table>
+            </div>
+        );
+    }
+};
+
+/* For text from outside this machine, where a path in inline code is not a file anybody meant to open here. */
+const plainComponents = {
+    ...components,
+    code({ className, children }: { className?: string; children?: ReactNode }) {
+        const text = String(children ?? '');
+        if (className?.startsWith('language-') || text.includes('\n')) {
+            return <CodeBlock code={text.replace(/\n$/, '')} lang={languageOf(className)} />;
+        }
+        return <code className={INLINE_CODE}>{text}</code>;
+    },
+    a({ href, children }: { href?: string; children?: ReactNode }) {
+        return (
+            <a href={href} target="_blank" rel="noreferrer">
+                {children}
+            </a>
+        );
+    }
+};
+
+// A reply sits under the heading of its message, an `h3`, so its own headings start one level below
+// that. Only `aria-level` moves. The tag stays, since the styles and a copy of the thread read it.
+const REPLY_HEADING_OFFSET = 3;
+
+function replyHeading(level: 1 | 2 | 3 | 4 | 5 | 6) {
+    const Tag = `h${level}` as const;
+    return function ReplyHeading({ children }: { children?: ReactNode }) {
+        return <Tag aria-level={Math.min(6, level + REPLY_HEADING_OFFSET)}>{children}</Tag>;
+    };
+}
+
+const replyComponents = {
+    ...components,
+    h1: replyHeading(1),
+    h2: replyHeading(2),
+    h3: replyHeading(3),
+    h4: replyHeading(4),
+    h5: replyHeading(5),
+    h6: replyHeading(6)
+};
+
+/* A picked file or skill in a sent message. The glyph stands in for the sigil the text still carries. */
+function Chip({ kind, value }: { kind: string; value: string }) {
+    if (kind === 'skill') {
+        return (
+            <span className={clsx(CHIP_IN_MESSAGE, SKILL_TONE)}>
+                <Icon icon={Zap} size={14} className="shrink-0 opacity-85" />
+                <span className="truncate">{value}</span>
+            </span>
+        );
+    }
+    return (
+        // The path is what the thread's menu opens in the preview from here.
+        <span className={clsx(CHIP_IN_MESSAGE, MENTION_TONE)} data-file-path={value}>
+            <FileIcon path={value} size={14} />
+            <span className="truncate">{value}</span>
+        </span>
+    );
+}
+
+const messageComponents = {
+    ...replyComponents,
+    span({ children, 'data-chip': chip, 'data-value': value }: { children?: ReactNode; 'data-chip'?: string; 'data-value'?: string }) {
+        if (chip === undefined || value === undefined) {
+            return <span>{children}</span>;
+        }
+        return <Chip kind={chip} value={value} />;
+    }
+};
+
+// Module constants, so a render never hands react-markdown a fresh array and makes it parse again.
+const PLUGINS = [remarkGfm];
+const PLUGINS_WITH_BREAKS = [remarkGfm, remarkBreaks];
+const MESSAGE_PLUGINS = [remarkGfm, remarkHtmlAsText, remarkBreaks];
+const FADE_PLUGINS = [rehypeFadeWords];
+const NO_PLUGINS: typeof FADE_PLUGINS = [];
+
+/* One block of a reply. It renders no element of its own, so prose still sees the paragraphs as
+   direct children and keeps its first and last margins. */
+const ReplyBlock = memo(function ReplyBlock({ text, fade, open }: { text: string; fade: boolean; open: boolean }) {
+    return (
+        // A context rather than a second set of components. A component that changed would mount the
+        // code block again the moment its fence closes, and it would lose the lines it already has.
+        <CodeStreamingContext.Provider value={open}>
+            <ReactMarkdown remarkPlugins={PLUGINS} rehypePlugins={fade ? FADE_PLUGINS : NO_PLUGINS} components={replyComponents}>
+                {text}
+            </ReactMarkdown>
+        </CodeStreamingContext.Provider>
+    );
+});
+
+/*
+ * A reply in a chat thread, parsed a block at a time so a delta only parses the block that grows.
+ * While it streams every new word fades in, and a fence that has not closed yet is highlighted a
+ * line at a time as it grows. `arriving` fades in each block as it is added instead, for a reply
+ * that is shown a block at a time.
+ */
+export const ReplyMarkdown = memo(function ReplyMarkdown({ text, streaming, arriving = false }: { text: string; streaming: boolean; arriving?: boolean }) {
+    const blocks = useMemo(() => splitMarkdownBlocks(text), [text]);
+    return (
+        <div className="chat-markdown prose prose-sm max-w-none text-sm" data-arriving={arriving || undefined}>
+            {blocks.map((block, index) => (
+                // Blocks only ever grow at the end, so the place of a block is a stable key.
+                <ReplyBlock key={index} text={block.text} fade={streaming} open={streaming && block.openFence} />
+            ))}
+        </div>
+    );
+});
+
+/*
+ * A message a person sent. Enter meant a line break, a tag typed without backticks stays the text
+ * 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]);
+    return (
+        <div className="chat-markdown prose prose-sm max-w-none text-sm">
+            <ReactMarkdown remarkPlugins={MESSAGE_PLUGINS} rehypePlugins={rehypePlugins} components={messageComponents}>
+                {text}
+            </ReactMarkdown>
+        </div>
+    );
+});
+
+/* `breaks` is for person-authored notes; applying it to CLI markdown would change its layout. */
+export const Markdown = memo(function Markdown({
+    text,
+    breaks = false,
+    fileLinks = true,
+    rehypePlugins,
+    componentOverrides
+}: {
+    text: string;
+    breaks?: boolean;
+    fileLinks?: boolean;
+    rehypePlugins?: Options['rehypePlugins'];
+    componentOverrides?: Components;
+}) {
+    const renderComponents = useMemo(() => ({ ...(fileLinks ? components : plainComponents), ...componentOverrides }), [fileLinks, componentOverrides]);
+    return (
+        <div className="chat-markdown prose prose-sm max-w-none text-sm">
+            <ReactMarkdown remarkPlugins={breaks ? PLUGINS_WITH_BREAKS : PLUGINS} rehypePlugins={rehypePlugins} components={renderComponents}>
+                {text}
+            </ReactMarkdown>
+        </div>
+    );
+});

package/src/chat/ui/MessageActions.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bookmark, Check, Copy, GitFork } from 'lucide-react';
+import { placeBookmark } from '../bookmarks';
+import { forkRefusal } from '../logic/fork';
+import type { TimelineRow } from '../logic/timeline';
+import { markdownOf, messageTextOf } from '../logic/timeline-copy';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatRow, useChats } from '../../state/chats';
+import { ButtonGroup, copyText, IconButton } from '@adecore/ui';
+
+const COPIED_MS = 1500;
+
+type MessageRow = Extract<TimelineRow, { kind: 'user' | 'assistant' }>;
+
+/*
+ * Bookmark, fork and copy under a message, shown while the pointer or the focus is on a
+ * `group/message`. The row always takes its height, so the virtualizer never measures it again on a
+ * hover. Like the strip's card, it leaves out an action the message cannot take right now.
+ */
+export function MessageActions({ chatId, row }: { chatId: string; row: MessageRow }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const { fork } = chatHost();
+    const turnId = row.item.turnId;
+    const bookmark = useChatRow(chatId, (chat) => chat?.bookmarks?.find((candidate) => candidate.itemId === row.id) ?? null);
+    const canFork = useChatRow(chatId, (chat) => turnId !== null && forkRefusal(chat?.info ?? null, chat?.structure[turnId]) === null);
+    const streaming = useChatRow(chatId, (chat) => {
+        const item = chat?.items[row.id];
+        return item?.kind === 'assistant' && item.streaming;
+    });
+    const hasText = useChatRow(chatId, (chat) => {
+        const item = chat?.items[row.id];
+        return (item?.kind === 'user' || item?.kind === 'assistant') && item.text.trim() !== '';
+    });
+    const [copied, setCopied] = useState(false);
+
+    useEffect(() => {
+        if (!copied) {
+            return;
+        }
+        const timer = setTimeout(() => setCopied(false), COPIED_MS);
+        return () => clearTimeout(timer);
+    }, [copied]);
+
+    // The row was derived from the structure, which a delta leaves alone; the text to copy is the one held now.
+    const copy = (plain: boolean): void => {
+        const item = useChats.getState().byKey[scope.keyOf(chatId)]?.items[row.id];
+        const current = item?.kind === row.kind ? ({ ...row, item } as MessageRow) : row;
+        const text = (plain ? null : markdownOf(current)) ?? messageTextOf(current);
+        if (text !== null) {
+            copyText(text);
+            setCopied(true);
+        }
+    };
+
+    return (
+        <div
+            role="toolbar"
+            aria-label={t('timeline.actions.label')}
+            className={clsx(
+                'flex h-7 items-center opacity-0 transition-opacity group-has-focus-visible/message:opacity-100 group-hover/message:opacity-100',
+                row.kind === 'user' ? '-mr-1.5 mt-1.5 justify-end' : '-ml-1.5'
+            )}
+        >
+            {!streaming && (
+                <ButtonGroup render={<span />}>
+                    {bookmark === null && (
+                        <IconButton icon={Bookmark} size="sm" label={t('bookmarks.add')} onClick={() => void placeBookmark(scope, chatId, row.id)} />
+                    )}
+                    {canFork && turnId !== null && fork !== null && (
+                        <IconButton icon={GitFork} size="sm" label={t('timeline.menu.forkFromHere')} onClick={() => fork(chatId, turnId)} />
+                    )}
+                    {hasText && (
+                        <IconButton
+                            icon={copied ? Check : Copy}
+                            size="sm"
+                            label={copied ? t('timeline.actions.copied') : t('timeline.menu.copyMessage')}
+                            onClick={(e) => copy(e.shiftKey)}
+                        />
+                    )}
+                </ButtonGroup>
+            )}
+        </div>
+    );
+}

package/src/chat/ui/Pickers.tsx

@@ -0,0 +1,272 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Bookmark, ChevronDown, ChevronRight, Search, Trash2 } from 'lucide-react';
+import type { AgentKind, ModelInfo, ModelSelection, ProviderInfo, UsageProvider } from '@adecore/agent-contracts';
+import { AgentIcon } from '../../agents/AgentIcon';
+import { ProviderLogo } from '../../agents/ProviderLogo';
+import { agentChipOf, modelName } from '../../agents/model-name';
+import { forgetStashed, STASH_SHORTCUT, useStash, type StashedPrompt } from '../stash';
+import { Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
+
+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';
+
+const chipClass =
+    'flex h-6 min-w-0 shrink items-center gap-1.5 whitespace-nowrap rounded-md bg-surface-hover px-2 text-xs text-text hover:bg-surface-active data-[popup-open]:bg-surface-active';
+
+/* A model row, or the one row that folds the legacy models open. Both take a turn in the arrow keys. */
+type PickerEntry = { kind: 'model'; provider: ProviderInfo; model: ModelInfo } | { kind: 'legacy'; count: number };
+
+function matches(model: ModelInfo, query: string): boolean {
+    return model.name.toLowerCase().includes(query) || model.slug.toLowerCase().includes(query);
+}
+
+interface ModelPickerProps {
+    /* Whose models may be picked: every installed chat CLI before the first message, the chat's own after it. */
+    providers: ProviderInfo[];
+    provider: AgentKind;
+    selection: ModelSelection;
+    /* Controlled, so `/model` in the composer can open the same popup a click on the trigger does. */
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    onChange(provider: AgentKind, model: string): void;
+    /* The composer's `/model`; `null` for a picker outside a chat, where that command does nothing. */
+    kbd?: string | null;
+    /* Where the popup opens: over the composer by default, below the trigger in a form. */
+    side?: 'top' | 'bottom';
+    /* `chip` names the provider beside the model, on a ground of its own, for a picker that sits in a card or a form. */
+    trigger?: 'plain' | 'chip';
+    /* Where the focus goes when the popup closes; by default back to the trigger. */
+    finalFocus?: RefObject<HTMLElement | null>;
+    /* A note under the list, such as what picking an agent here does. */
+    footer?: ReactNode;
+}
+
+/*
+ * Which model answers: the provider's mark plus the model's short name
+ * as the trigger, a search field over the popup, one group per provider and the legacy models
+ * behind an expander. Before the first message the list carries every installed CLI, so picking
+ * another provider's model is also how a chat picks its provider. A chat bound to one CLI passes
+ * only that CLI, which drops the group headers and leaves its own catalog to choose from.
+ */
+export function ModelPicker({
+    providers,
+    provider,
+    selection,
+    open,
+    onOpenChange,
+    onChange,
+    kbd = '/model',
+    side = 'top',
+    trigger = 'plain',
+    finalFocus,
+    footer
+}: ModelPickerProps) {
+    const { t } = useTranslation('agent-chat');
+    const [query, setQuery] = useState('');
+    const [legacyOpen, setLegacyOpen] = useState(false);
+    const [index, setIndex] = useState(0);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const listRef = useRef<HTMLDivElement>(null);
+
+    const owner = providers.find((entry) => entry.kind === provider);
+    const current = modelName(selection.model, owner?.models);
+    const chip = agentChipOf(providers, provider, selection.model);
+    const grouped = providers.length > 1;
+    const trimmed = query.trim().toLowerCase();
+
+    const entries = useMemo((): PickerEntry[] => {
+        const rows = providers.flatMap((entry) => entry.models.map((model) => ({ kind: 'model' as const, provider: entry, model })));
+        if (trimmed !== '') {
+            return rows.filter((row) => matches(row.model, trimmed));
+        }
+        const live = rows.filter((row) => !row.model.legacy);
+        const legacy = rows.filter((row) => row.model.legacy);
+        if (legacy.length === 0) {
+            return live;
+        }
+        return legacyOpen ? [...live, { kind: 'legacy', count: legacy.length }, ...legacy] : [...live, { kind: 'legacy', count: legacy.length }];
+    }, [providers, trimmed, legacyOpen]);
+
+    /* Closing forgets the search, so the next open (a click or `/model`) starts on the whole list. */
+    const setOpen = (next: boolean): void => {
+        if (!next) {
+            setQuery('');
+            setLegacyOpen(false);
+        }
+        setIndex(0);
+        onOpenChange(next);
+    };
+
+    // The list scrolls, so the row the arrows moved to has to come along.
+    useEffect(() => {
+        listRef.current?.querySelector<HTMLElement>('[data-active="true"]')?.scrollIntoView({ block: 'nearest' });
+    }, [index]);
+
+    const choose = (entry: PickerEntry | undefined): void => {
+        if (!entry) {
+            return;
+        }
+        if (entry.kind === 'legacy') {
+            setLegacyOpen(true);
+            inputRef.current?.focus();
+            return;
+        }
+        onChange(entry.provider.kind, entry.model.slug);
+        setOpen(false);
+    };
+
+    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setIndex((i) => (entries.length === 0 ? 0 : (i + 1) % entries.length));
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setIndex((i) => (entries.length === 0 ? 0 : (i - 1 + entries.length) % entries.length));
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            choose(entries[index]);
+        }
+    };
+
+    return (
+        <Popover.Root open={open} onOpenChange={setOpen}>
+            <Tooltip label={owner ? `${owner.name} · ${current}` : t('pickers.model.choose')} kbd={kbd ?? undefined}>
+                {trigger === 'chip' ? (
+                    <Popover.Trigger className={chipClass}>
+                        {chip.mark === 'logo' ? <ProviderLogo provider={provider as UsageProvider} size={12} /> : <AgentIcon kind={provider} size={12} />}
+                        <span className="truncate">{chip.name}</span>
+                        <span className="max-w-32 truncate text-text-muted">{chip.model}</span>
+                        <Icon icon={ChevronDown} size={12} className="shrink-0 text-text-faint" />
+                    </Popover.Trigger>
+                ) : (
+                    <Popover.Trigger className={triggerClass}>
+                        <AgentIcon kind={provider} size={12} />
+                        <span className="max-w-40 truncate">{current}</span>
+                        <Icon icon={ChevronDown} size={12} className="text-text-faint" />
+                    </Popover.Trigger>
+                )}
+            </Tooltip>
+            <Popover.Popup variant="picker" side={side} initialFocus={inputRef} {...(finalFocus === undefined ? {} : { finalFocus })}>
+                <div className="flex items-center gap-2 border-b border-border px-2.5">
+                    <Icon icon={Search} size={14} className="shrink-0 text-text-faint" />
+                    <input
+                        ref={inputRef}
+                        className="h-8 w-full bg-transparent text-sm text-text outline-none placeholder:text-text-faint"
+                        placeholder={t('pickers.model.search')}
+                        spellCheck={false}
+                        value={query}
+                        onChange={(e) => {
+                            setQuery(e.target.value);
+                            setIndex(0);
+                        }}
+                        onKeyDown={onKeyDown}
+                    />
+                </div>
+                <div ref={listRef} className="max-h-72 overflow-auto p-1" role="listbox">
+                    {entries.length === 0 && (
+                        <div className="px-3 py-6 text-center text-xs text-text-faint">
+                            {providers.length === 0 ? t('pickers.model.noProvider') : t('pickers.model.noMatch')}
+                        </div>
+                    )}
+                    {entries.map((entry, i) => {
+                        if (entry.kind === 'legacy') {
+                            return (
+                                <button
+                                    key="legacy"
+                                    data-active={i === index}
+                                    className="cursor-row flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-xs text-text-faint"
+                                    onMouseEnter={() => setIndex(i)}
+                                    onClick={() => choose(entry)}
+                                >
+                                    <Icon icon={legacyOpen ? ChevronDown : ChevronRight} size={12} />
+                                    {t('pickers.model.legacyGroup', { count: entry.count })}
+                                </button>
+                            );
+                        }
+                        const previous = entries[i - 1];
+                        const first = grouped && (previous === undefined || previous.kind !== 'model' || previous.provider.kind !== entry.provider.kind);
+                        const chosen = entry.provider.kind === provider && entry.model.slug === selection.model;
+                        return (
+                            <div key={`${entry.provider.kind}/${entry.model.slug}`}>
+                                {first && (
+                                    <Menu.Label className="flex items-center gap-1.5">
+                                        <AgentIcon kind={entry.provider.kind} size={12} />
+                                        {entry.provider.name}
+                                    </Menu.Label>
+                                )}
+                                <button
+                                    role="option"
+                                    aria-selected={chosen}
+                                    data-active={i === index}
+                                    className="cursor-row flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-text-muted"
+                                    onMouseEnter={() => setIndex(i)}
+                                    onClick={() => choose(entry)}
+                                >
+                                    <Menu.Check kind="radio" checked={chosen} />
+                                    <span className="min-w-0 truncate">{entry.model.name}</span>
+                                    {entry.model.badge && (
+                                        <span className="rounded bg-accent-soft px-1 text-[11px] leading-5 font-medium uppercase text-accent">
+                                            {entry.model.badge}
+                                        </span>
+                                    )}
+                                    <span className="grow" />
+                                    {entry.model.legacy && <span className="text-xs text-text-faint">{t('pickers.model.legacy')}</span>}
+                                </button>
+                            </div>
+                        );
+                    })}
+                </div>
+                {footer !== undefined && <div className="border-t border-border-soft px-3 py-2 text-xs text-text-faint">{footer}</div>}
+            </Popover.Popup>
+        </Popover.Root>
+    );
+}
+
+/*
+ * Prompts put aside with Cmd+S. The shelf is the whole app's, not this chat's. On a canvas a
+ * stashed prompt usually moves to another node, which is the reason to put it away in the first
+ * place. Restoring drops the text, the mentions and the skills into this composer; the files a
+ * draft held are named on the row but not kept, because their bytes never go to storage.
+ */
+export function StashPicker({ onRestore }: { onRestore(prompt: StashedPrompt): void }) {
+    const { t } = useTranslation('agent-chat');
+    const prompts = useStash((s) => s.prompts);
+    if (prompts.length === 0) {
+        return null;
+    }
+    return (
+        <Popover.Root>
+            <Tooltip label={t('pickers.stash.title')} kbd={STASH_SHORTCUT}>
+                <Popover.Trigger className={triggerClass}>
+                    <Icon icon={Bookmark} size={12} />
+                    <span className="tabular-nums">{prompts.length}</span>
+                </Popover.Trigger>
+            </Tooltip>
+            <Popover.Popup variant="picker" side="top" className="w-80">
+                <div className="max-h-72 overflow-auto p-1">
+                    {prompts.map((prompt) => (
+                        <div key={prompt.id} className="group/stash flex items-start gap-1">
+                            <Popover.Close
+                                className="flex min-w-0 grow flex-col gap-0.5 rounded-md px-2 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover hover:text-text"
+                                onClick={() => onRestore(prompt)}
+                            >
+                                <span className="line-clamp-2 whitespace-pre-wrap">{prompt.text || t('pickers.stash.noText')}</span>
+                                {prompt.attachments.length > 0 && (
+                                    <span className="text-text-faint">{t('pickers.stash.files', { count: prompt.attachments.length })}</span>
+                                )}
+                            </Popover.Close>
+                            <IconButton
+                                icon={Trash2}
+                                size="xs"
+                                label={t('common.action.delete')}
+                                className="mt-1 opacity-0 group-hover/stash:opacity-100 focus-visible:opacity-100"
+                                onClick={() => forgetStashed(prompt.id)}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </Popover.Popup>
+        </Popover.Root>
+    );
+}