@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/chat/ui/MessageActions.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { markdownOf, messageTextOf } from '../logic/timeline-copy';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatRow, useChats } from '../../state/chats';
+import { BTN_GROUP } from '@ruimte/ui/classes';
+import { copyText } from '@ruimte/ui/clipboard';
+import { Icon } from '@ruimte/ui/Icon';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+const COPIED_MS = 1500;
+/*
+ * 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 }) {
+    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) => {
+        const item = useChats.getState().byKey[scope.keyOf(chatId)]?.items[row.id];
+        const current = item?.kind === row.kind ? { ...row, item } : row;
+        const text = (plain ? null : markdownOf(current)) ?? messageTextOf(current);
+        if (text !== null) {
+            copyText(text);
+            setCopied(true);
+        }
+    };
+    return (_jsx("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'), children: !streaming && (_jsxs("span", { className: BTN_GROUP, children: [bookmark === null && (_jsx(Tooltip, { label: t('bookmarks.add'), name: true, children: _jsx("button", { type: "button", className: "icon-btn icon-btn-sm", onClick: () => void placeBookmark(scope, chatId, row.id), children: _jsx(Icon, { icon: Bookmark, size: 14 }) }) })), canFork && turnId !== null && fork !== null && (_jsx(Tooltip, { label: t('timeline.menu.forkFromHere'), name: true, children: _jsx("button", { type: "button", className: "icon-btn icon-btn-sm", onClick: () => fork(chatId, turnId), children: _jsx(Icon, { icon: GitFork, size: 14 }) }) })), hasText && (_jsx(Tooltip, { label: copied ? t('timeline.actions.copied') : t('timeline.menu.copyMessage'), name: true, children: _jsx("button", { type: "button", className: "icon-btn icon-btn-sm", onClick: (e) => copy(e.shiftKey), children: _jsx(Icon, { icon: copied ? Check : Copy, size: 14 }) }) }))] })) }));
+}

package/dist/chat/ui/Pickers.d.ts

@@ -0,0 +1,15 @@
+import type { AgentKind, ModelSelection, ProviderInfo } from '@ruimte/agent-contracts';
+import { type StashedPrompt } from '../stash';
+interface ModelPickerProps {
+    providers: ProviderInfo[];
+    provider: AgentKind;
+    selection: ModelSelection;
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    onChange(provider: AgentKind, model: string): void;
+}
+export declare function ModelPicker({ providers, provider, selection, open, onOpenChange, onChange }: ModelPickerProps): import("react").JSX.Element;
+export declare function StashPicker({ onRestore }: {
+    onRestore(prompt: StashedPrompt): void;
+}): import("react").JSX.Element | null;
+export {};

package/dist/chat/ui/Pickers.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Popover } from '@base-ui-components/react/popover';
+import { Bookmark, ChevronDown, ChevronRight, Search, Trash2 } from 'lucide-react';
+import { AgentIcon } from '../../agents/AgentIcon';
+import { modelName } from '../../agents/model-name';
+import { forgetStashed, STASH_SHORTCUT, useStash } from '../stash';
+import { MENU_LABEL } from '@ruimte/ui/classes';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+import { Icon } from '@ruimte/ui/Icon';
+import { MenuCheck } from '@ruimte/ui/MenuCheck';
+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 matches = (model, query) => model.name.toLowerCase().includes(query) || model.slug.toLowerCase().includes(query);
+/*
+ * 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 }) {
+    const { t } = useTranslation('agent-chat');
+    const [query, setQuery] = useState('');
+    const [legacyOpen, setLegacyOpen] = useState(false);
+    const [index, setIndex] = useState(0);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const owner = providers.find((entry) => entry.kind === provider);
+    const current = modelName(selection.model, owner?.models);
+    const grouped = providers.length > 1;
+    const trimmed = query.trim().toLowerCase();
+    const entries = useMemo(() => {
+        const rows = providers.flatMap((entry) => entry.models.map((model) => ({ kind: 'model', 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) => {
+        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('[data-active="true"]')?.scrollIntoView({ block: 'nearest' });
+    }, [index]);
+    const choose = (entry) => {
+        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) => {
+        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 (_jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsx(Tooltip, { label: owner ? `${owner.name} · ${current}` : t('pickers.model.choose'), kbd: "/model", children: _jsxs(Popover.Trigger, { className: triggerClass, children: [_jsx(AgentIcon, { kind: provider, size: 12 }), _jsx("span", { className: "max-w-40 truncate", children: current }), _jsx(Icon, { icon: ChevronDown, size: 12, className: "text-text-faint" })] }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Positioner, { className: "z-(--z-popup)", side: "top", sideOffset: 8, align: "start", children: _jsxs(Popover.Popup, { className: "picker-popup", initialFocus: inputRef, children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-2.5", children: [_jsx(Icon, { icon: Search, size: 14, className: "shrink-0 text-text-faint" }), _jsx("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 })] }), _jsxs("div", { ref: listRef, className: "max-h-72 overflow-auto p-1", role: "listbox", children: [entries.length === 0 && (_jsx("div", { className: "px-3 py-6 text-center text-xs text-text-faint", children: providers.length === 0 ? t('pickers.model.noProvider') : t('pickers.model.noMatch') })), entries.map((entry, i) => {
+                                        if (entry.kind === 'legacy') {
+                                            return (_jsxs("button", { "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), children: [_jsx(Icon, { icon: legacyOpen ? ChevronDown : ChevronRight, size: 12 }), t('pickers.model.legacyGroup', { count: entry.count })] }, "legacy"));
+                                        }
+                                        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 (_jsxs("div", { children: [first && (_jsxs("div", { className: `${MENU_LABEL} flex items-center gap-1.5`, children: [_jsx(AgentIcon, { kind: entry.provider.kind, size: 12 }), entry.provider.name] })), _jsxs("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), children: [_jsx(MenuCheck, { kind: "radio", checked: chosen }), _jsx("span", { className: "min-w-0 truncate", children: entry.model.name }), entry.model.badge && (_jsx("span", { className: "rounded bg-accent-soft px-1 text-xs font-medium text-accent", children: entry.model.badge })), _jsx("span", { className: "grow" }), entry.model.legacy && _jsx("span", { className: "text-xs text-text-faint", children: t('pickers.model.legacy') })] })] }, `${entry.provider.kind}/${entry.model.slug}`));
+                                    })] })] }) }) })] }));
+}
+/*
+ * 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 }) {
+    const { t } = useTranslation('agent-chat');
+    const prompts = useStash((s) => s.prompts);
+    if (prompts.length === 0) {
+        return null;
+    }
+    return (_jsxs(Popover.Root, { children: [_jsx(Tooltip, { label: t('pickers.stash.title'), kbd: STASH_SHORTCUT, children: _jsxs(Popover.Trigger, { className: triggerClass, children: [_jsx(Icon, { icon: Bookmark, size: 12 }), _jsx("span", { className: "tabular-nums", children: prompts.length })] }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Positioner, { className: "z-(--z-popup)", side: "top", sideOffset: 8, align: "start", children: _jsx(Popover.Popup, { className: "picker-popup w-80", children: _jsx("div", { className: "max-h-72 overflow-auto p-1", children: prompts.map((prompt) => (_jsxs("div", { className: "group/stash flex items-start gap-1", children: [_jsxs(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), children: [_jsx("span", { className: "line-clamp-2 whitespace-pre-wrap", children: prompt.text || t('pickers.stash.noText') }), prompt.attachments.length > 0 && (_jsx("span", { className: "text-text-faint", children: t('pickers.stash.files', { count: prompt.attachments.length }) }))] }), _jsx(Tooltip, { label: t('common.action.delete'), name: true, children: _jsx("button", { className: "icon-btn icon-btn-xs mt-1 opacity-0 group-hover/stash:opacity-100 focus-visible:opacity-100", onClick: () => forgetStashed(prompt.id), children: _jsx(Icon, { icon: Trash2, size: 12 }) }) })] }, prompt.id))) }) }) }) })] }));
+}

package/dist/chat/ui/PromptComposer.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type PendingPrompt } from '../../prompts/logic/prompts';
+export declare function PromptComposer({ chatId, pending, focused, onShowElsewhere, disabled, hasDraft, denyReason, onAllAnswered, children }: {
+    chatId: string;
+    pending: PendingPrompt[];
+    focused: boolean;
+    onShowElsewhere?: () => void;
+    disabled: boolean;
+    hasDraft: boolean;
+    denyReason: boolean;
+    onAllAnswered?: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/chat/ui/PromptComposer.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ArrowDown, Hand, MessageCircleQuestionMark } from 'lucide-react';
+import { focusPromptStart } from '../../prompts/logic/focus';
+import { orderPrompts } from '../../prompts/logic/prompts';
+import { answerPrompt, isBlockingSubject, promptCreatedAt, promptIdOf } from '../../prompts/logic/subjects';
+import { useFocusAfterAnswer } from '../../prompts/logic/useFocusAfterAnswer';
+import { usePromptSession } from '../../prompts/logic/usePromptSession';
+import { PromptView } from '../../prompts/ui/PromptView';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatActions } from '../actions';
+import { Icon } from '@ruimte/ui/Icon';
+/* The one being read stays in front; otherwise blocking before optional, oldest first, as everywhere else. */
+const pickSubject = (waiting, activeId) => waiting.find((subject) => promptIdOf(subject) === activeId) ?? orderPrompts(waiting, isBlockingSubject, promptCreatedAt)[0] ?? null;
+export function PromptComposer({ chatId, pending, focused, onShowElsewhere, disabled, hasDraft, denyReason, onAllAnswered, children }) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    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 = chatHost().prompts.useExtra(id, chatId);
+    const subjects = useMemo(() => [
+        ...pending.map((item) => ({ kind: 'chat', nodeId: chatId, item })),
+        ...extra.map((prompt) => ({ kind: 'host', nodeId: chatId, prompt }))
+    ], [pending, extra, chatId]);
+    const session = usePromptSession({ prompts: subjects, idOf: promptIdOf, pick: pickSubject, disabled });
+    const ref = useRef(null);
+    const { active, activeId: activeKey } = session;
+    const expanded = !!active;
+    const refocus = useFocusAfterAnswer(activeKey, ref, () => onAllAnswered?.());
+    useEffect(() => {
+        if (focused && expanded && !elsewhere && !ref.current?.querySelector('.prompt-card')?.contains(document.activeElement)) {
+            focusPromptStart(ref.current);
+        }
+    }, [activeKey, expanded, focused, elsewhere]);
+    return (_jsxs("div", { ref: ref, onPointerDownCapture: session.onPointerDownCapture, onClickCapture: session.onClickCapture, children: [active && elsewhere && (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-3.5 py-3 text-left text-sm text-text-muted hover:text-text", onClick: onShowElsewhere, children: [_jsx(Icon, { icon: (active.kind === 'chat' ? active.item.kind === 'approval' : active.prompt.asks === 'approval') ? Hand : MessageCircleQuestionMark, size: 16, className: "shrink-0 text-status-needs-you" }), _jsx("span", { className: "grow", children: t('composer.waitingBelow') }), _jsx(Icon, { icon: ArrowDown, size: 16, className: "shrink-0" })] })), active && !elsewhere && (_jsx("div", { hidden: !expanded, children: _jsx(PromptView, { subject: active, draft: session.draftOf(promptIdOf(active)), onDraft: (draft) => session.setDraft(promptIdOf(active), draft), onAction: (action) => {
+                        refocus.hold();
+                        void session
+                            .act(active, () => answerPrompt(active, action, actions))
+                            .then((result) => {
+                            if (result === 'failed') {
+                                refocus.release();
+                            }
+                        });
+                    }, more: session.waiting.length - 1, hasDraft: hasDraft, denyReason: denyReason, disabled: disabled, sending: session.sending, error: session.errorOf(promptIdOf(active)) }, activeKey) })), _jsx("div", { hidden: expanded, children: children })] }));
+}

package/dist/chat/ui/QuoteButton.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+import { type QuoteTaker } from './quote-selection';
+export declare function QuoteButton({ thread, frame, taker }: {
+    thread: RefObject<HTMLElement | null>;
+    frame: RefObject<HTMLElement | null>;
+    taker: RefObject<QuoteTaker | null>;
+}): import("react").JSX.Element | null;

package/dist/chat/ui/QuoteButton.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Quote } from 'lucide-react';
+import { selectedAnswerQuote } from './quote-selection';
+import { Button } from '@ruimte/ui/Button';
+import { FLOAT } from '@ruimte/ui/classes';
+import { Icon } from '@ruimte/ui/Icon';
+const GAP_PX = 6;
+// Keeps the button's middle far enough from the edges that it never sticks out of the thread.
+const EDGE_PX = 40;
+/* The last line the range covers. A triple-click ends on an empty rect at the start of the next row. */
+const lastLineOf = (range) => {
+    const rects = [...range.getClientRects()].filter((rect) => rect.width > 0);
+    return rects.at(-1) ?? null;
+};
+/*
+ * A button under a selection in an answer that hands it to the composer. Quoting on the selection
+ * alone grew the composer while the person was still selecting, which moved the thread under the
+ * pointer. It only shows once the pointer is up, so a drag never has it jump along.
+ */
+export function QuoteButton({ thread, frame, taker }) {
+    const { t } = useTranslation('agent-chat');
+    const [offer, setOffer] = useState(null);
+    useEffect(() => {
+        let pressed = false;
+        const read = () => {
+            const selection = document.getSelection();
+            const quote = taker.current === null ? null : selectedAnswerQuote(selection, thread.current);
+            const box = frame.current;
+            const line = quote === null || selection === null ? null : lastLineOf(selection.getRangeAt(0));
+            if (quote === null || box === null || line === null) {
+                setOffer(null);
+                return;
+            }
+            const bounds = box.getBoundingClientRect();
+            // The canvas may zoom the cell; the button is placed in the frame's own pixels.
+            const zoom = box.offsetWidth > 0 ? bounds.width / box.offsetWidth : 1;
+            const x = Math.min(Math.max((line.right - bounds.left) / zoom, EDGE_PX), box.offsetWidth - EDGE_PX);
+            const y = (line.bottom - bounds.top) / zoom + GAP_PX;
+            setOffer({ quote, x: Math.round(x), y: Math.round(y) });
+        };
+        const press = () => {
+            pressed = true;
+        };
+        const release = () => {
+            pressed = false;
+            read();
+        };
+        const change = () => {
+            if (pressed) {
+                setOffer(null);
+                return;
+            }
+            read();
+        };
+        document.addEventListener('pointerdown', press, true);
+        document.addEventListener('pointerup', release, true);
+        document.addEventListener('selectionchange', change);
+        return () => {
+            document.removeEventListener('pointerdown', press, true);
+            document.removeEventListener('pointerup', release, true);
+            document.removeEventListener('selectionchange', change);
+        };
+    }, [thread, frame, taker]);
+    if (offer === null) {
+        return null;
+    }
+    return (_jsxs(Button, { size: "sm", className: `${FLOAT} absolute z-10 -translate-x-1/2 select-none`, style: { left: offer.x, top: offer.y }, 
+        // Pressing a button moves the selection, and the selection is what it quotes.
+        onMouseDown: (e) => e.preventDefault(), onClick: () => {
+            document.getSelection()?.removeAllRanges();
+            taker.current?.(offer.quote);
+            setOffer(null);
+        }, children: [_jsx(Icon, { icon: Quote, size: 12 }), t('composer.quote.add')] }));
+}

package/dist/chat/ui/ResumeCompactionDock.d.ts

@@ -0,0 +1,5 @@
+export declare function ResumeCompactionDock({ tokens, onCompact, onDismiss }: {
+    tokens: number;
+    onCompact(): void;
+    onDismiss(): void;
+}): import("react").JSX.Element;

package/dist/chat/ui/ResumeCompactionDock.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Minimize2 } from 'lucide-react';
+import { formatTokens } from '@ruimte/ui/format/number';
+import { Button } from '@ruimte/ui/Button';
+import { Icon } from '@ruimte/ui/Icon';
+/*
+ * The offer at the top of the composer, for a chat that lay still long enough that 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 }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3.5 py-2.5", children: [_jsx(Icon, { icon: Minimize2, size: 16, className: "shrink-0 text-text-faint" }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "truncate text-sm text-text", children: t('resumeCompaction.title') }), _jsx("span", { className: "truncate text-xs tabular-nums text-text-faint", children: t('resumeCompaction.carried', { tokens: formatTokens(tokens) }) })] }), _jsx(Button, { size: "sm", onClick: onDismiss, children: t('resumeCompaction.keep') }), _jsx(Button, { size: "sm", variant: "primary", onClick: onCompact, children: t('resumeCompaction.compact') })] }));
+}

package/dist/chat/ui/RunSettings.d.ts

@@ -0,0 +1,25 @@
+import type { AgentKind, ChatUsage, ModelInfo, ModelSelection, ProviderInfo, RuntimeMode } from '@ruimte/agent-contracts';
+import type { AccountChoice } from '../account-choice';
+interface RunSettingsProps {
+    providers: ProviderInfo[];
+    provider: AgentKind;
+    selection: ModelSelection;
+    model: ModelInfo | undefined;
+    runtimeMode: RuntimeMode;
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    onModel(provider: AgentKind, slug: string): void;
+    onOption(id: string, value: string | boolean): void;
+    onMode(mode: RuntimeMode): void;
+    usage: ChatUsage;
+    compactDisabled: boolean;
+    onCompact(): void;
+    account: AccountPick | null;
+}
+interface AccountPick {
+    choice: AccountChoice;
+    started: boolean;
+    onPick(id: string): void;
+}
+export declare function RunSettings({ providers, provider, selection, model, runtimeMode, open, onOpenChange, onModel, onOption, onMode, usage, compactDisabled, onCompact, account }: RunSettingsProps): import("react").JSX.Element;
+export {};

package/dist/chat/ui/RunSettings.js

@@ -0,0 +1,148 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Menu } from '@base-ui-components/react/menu';
+import clsx from 'clsx';
+import { Activity, ChevronDown, ChevronRight, ChevronUp, FilePen, Gauge, Hand, Settings, Shield, ShieldAlert, SlidersHorizontal } from 'lucide-react';
+import { AccountDot } from '../../agents/AccountDot';
+import { limitsOfAccount, sessionWindow } from '../../agents/account-limits';
+import { canContinueOn } from '../../agents/accounts';
+import { AgentIcon } from '../../agents/AgentIcon';
+import { modelName, shortModelName } from '../../agents/model-name';
+import { CONTEXT_OPTION, contextFraction, contextSegments, orderOptions } from '../logic/context-usage';
+import { RUNTIME_MODES } from '../runtime-modes';
+import { formatClock, formatWeekdayClock, isSameDay } from '@ruimte/ui/format/datetime';
+import { formatPercent, formatTokens } from '@ruimte/ui/format/number';
+import { chatHost } from '../../host';
+import { useUsageLimits } from '../../usage/limits';
+import { MENU_HINT, MENU_LABEL, MENU_SEPARATOR } from '@ruimte/ui/classes';
+import { Icon } from '@ruimte/ui/Icon';
+import { MenuCheck } from '@ruimte/ui/MenuCheck';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+import { useNow } from '@ruimte/ui/useNow';
+const MINUTE_MS = 60_000;
+const MODE_ICONS = {
+    supervised: Hand,
+    'auto-accept-edits': FilePen,
+    auto: Shield,
+    'full-access': ShieldAlert
+};
+// More choices than this do not fit beside the label, so they go in a submenu of their own.
+const INLINE_CHOICES = 3;
+const PART_COLORS = {
+    toolOutput: 'bg-chart-context-tools',
+    filesRead: 'bg-chart-context-files',
+    conversation: 'bg-chart-context-conversation',
+    system: 'bg-chart-context-system'
+};
+const RING_RADIUS = 5;
+const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+const SUBMENU_POSITIONER = { sideOffset: 4, alignOffset: -4 };
+const optionSummary = (option, selection) => {
+    const value = selection.options[option.id];
+    if (option.type === 'select') {
+        return option.choices.find((choice) => choice.id === (value ?? option.defaultChoice))?.label ?? null;
+    }
+    return (value ?? option.defaultValue) === true ? option.label : null;
+};
+const optionIcon = (option) => option.type === 'boolean' ? Gauge : option.id === CONTEXT_OPTION ? Activity : SlidersHorizontal;
+const contextTone = (fraction) => (fraction >= 0.9 ? 'text-status-error' : fraction >= 0.7 ? 'text-status-needs-you' : 'text-text');
+// A radio group holds one string, so a model is named by its provider and its slug together.
+const modelValue = (provider, slug) => `${provider}/${slug}`;
+/*
+ * Everything that decides how the next turn runs, behind one pill: the model, its own knobs and the
+ * permission mode. The pill reads back all of it, so nothing has to be opened to know what is set.
+ */
+export function RunSettings({ providers, provider, selection, model, runtimeMode, open, onOpenChange, onModel, onOption, onMode, usage, compactDisabled, onCompact, account }) {
+    const { t } = useTranslation('agent-chat');
+    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 summary = options.flatMap((option) => {
+        const label = optionSummary(option, selection);
+        return label === null ? [] : [{ id: option.id, label, ring: option.id === CONTEXT_OPTION }];
+    });
+    // A CLI without a context choice still fills one, so the ring stands on its own next to the size.
+    const hasContextOption = options.some((option) => option.id === CONTEXT_OPTION);
+    const standaloneContext = !hasContextOption && Boolean(usage.contextWindow);
+    if (standaloneContext) {
+        summary.push({ id: CONTEXT_OPTION, label: formatTokens(usage.contextWindow ?? 0), ring: true });
+    }
+    const grouped = providers.length > 1;
+    const live = providers.map((entry) => ({ entry, models: entry.models.filter((row) => !row.legacy) })).filter((group) => group.models.length > 0);
+    const legacy = providers.map((entry) => ({ entry, models: entry.models.filter((row) => row.legacy) })).filter((group) => group.models.length > 0);
+    const chosenLegacy = owner?.models.find((row) => row.legacy && row.slug === selection.model);
+    const chosenModel = modelValue(provider, selection.model);
+    const fullAccess = runtimeMode === 'full-access';
+    const chooseModel = (value) => {
+        const slash = value.indexOf('/');
+        onModel(value.slice(0, slash), value.slice(slash + 1));
+    };
+    const modelGroups = (groups) => groups.map(({ entry, models }) => (_jsxs(Menu.Group, { children: [grouped && (_jsxs(Menu.GroupLabel, { className: `${MENU_LABEL} flex items-center gap-1.5`, children: [_jsx(AgentIcon, { kind: entry.kind, size: 12 }), entry.name] })), models.map((row) => (_jsxs(Menu.RadioItem, { value: modelValue(entry.kind, row.slug), closeOnClick: true, className: "menu-item", children: [_jsx(MenuCheck, { kind: "radio" }), _jsx(AgentIcon, { kind: entry.kind, size: 14, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.name }), row.badge && _jsx("span", { className: "rounded bg-accent-soft px-1 text-xs font-medium text-accent", children: row.badge })] }, row.slug)))] }, entry.kind)));
+    return (_jsxs(Menu.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(Tooltip, { label: t('pickers.settings.title'), kbd: "/model", children: _jsxs(Menu.Trigger, { className: clsx('flex h-8 min-w-0 items-center gap-2 rounded-full border pr-3 pl-2.5 text-xs whitespace-nowrap text-text-muted @max-xl/composer:gap-1.5 @max-sm/composer:pr-2.5', open ? 'border-accent bg-accent-soft' : 'border-border hover:bg-surface-hover'), children: [_jsx(AgentIcon, { kind: provider, size: 14, className: "shrink-0" }), _jsxs("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden @max-xl/composer:gap-1.5", children: [_jsx("span", { className: "truncate font-medium text-text @max-xl/composer:hidden", children: current }), _jsx("span", { className: "hidden truncate font-medium text-text @max-xl/composer:inline", children: short }), account !== null && (_jsxs("span", { className: "flex min-w-0 items-center gap-2 @max-xl/composer:gap-1.5", children: [_jsx("span", { className: "shrink-0 text-text-faint", children: "\u00B7" }), _jsx(AccountDot, { color: account.choice.current?.account.color }), _jsx("span", { className: "truncate @max-xl/composer:hidden", children: account.choice.current === null ? account.choice.currentId : account.choice.nameOf(account.choice.current) })] })), summary.map((entry) => (_jsxs("span", { className: clsx('flex shrink-0 items-center gap-2 @max-xl/composer:gap-1.5', !entry.ring && '@max-md/composer:hidden'), children: [_jsx("span", { className: "text-text-faint", children: "\u00B7" }), entry.ring && _jsx(ContextRing, { usage: usage }), _jsx("span", { className: clsx(entry.ring && '@max-sm/composer:hidden'), children: entry.label })] }, entry.id))), _jsx("span", { className: "shrink-0 text-text-faint", children: "\u00B7" }), _jsxs("span", { className: clsx('flex shrink-0 items-center gap-1', fullAccess && 'text-status-needs-you'), children: [_jsx(Icon, { icon: MODE_ICONS[runtimeMode], size: 12, className: "shrink-0" }), _jsx("span", { className: "@max-xl/composer:hidden", children: t(`modes.${runtimeMode}.short`) })] })] }), _jsx(Icon, { icon: open ? ChevronUp : ChevronDown, size: 12, className: "shrink-0 @max-sm/composer:hidden" })] }) }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { className: "z-(--z-popup)", side: "top", sideOffset: 8, align: "start", children: _jsxs(Menu.Popup, { className: "menu-popup w-80", children: [providers.length === 0 && _jsx("div", { className: "px-2.5 py-3 text-xs text-text-faint", children: t('pickers.model.noProvider') }), _jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: modelGroups(live) }), legacy.length > 0 && (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "menu-item text-text-muted", children: [_jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.model.legacyGroup', { count: legacy.reduce((count, group) => count + group.models.length, 0) }) }), chosenLegacy && _jsx("span", { className: `${MENU_HINT} truncate`, children: chosenLegacy.name }), _jsx(Icon, { icon: ChevronRight, size: 14, className: "shrink-0 text-text-faint" })] }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { className: "z-(--z-popup)", ...SUBMENU_POSITIONER, children: _jsx(Menu.Popup, { className: "menu-popup min-w-56", children: _jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: modelGroups(legacy) }) }) }) })] })), _jsx(Menu.Separator, { className: MENU_SEPARATOR }), account !== null && _jsx(AccountSubmenu, { provider: provider, account: account }), _jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "menu-item text-text-muted", children: [_jsx(Icon, { icon: MODE_ICONS[runtimeMode], size: 14, className: clsx('shrink-0', fullAccess ? 'text-status-needs-you' : 'text-text-faint') }), _jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.mode.label') }), _jsx("span", { className: `${MENU_HINT} truncate`, children: t(`modes.${runtimeMode}.label`) }), _jsx(Icon, { icon: ChevronRight, size: 14, className: "shrink-0 text-text-faint" })] }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { className: "z-(--z-popup)", ...SUBMENU_POSITIONER, children: _jsx(Menu.Popup, { className: "menu-popup w-72", children: _jsx(Menu.RadioGroup, { value: runtimeMode, onValueChange: (mode) => onMode(mode), children: RUNTIME_MODES.map((mode) => (_jsxs(Menu.RadioItem, { value: mode, className: "menu-item items-start", children: [_jsx(MenuCheck, { kind: "radio" }), _jsx("span", { className: "grid h-lh w-4 shrink-0 place-items-center", children: _jsx(Icon, { icon: MODE_ICONS[mode], size: 14, className: mode === 'full-access' ? 'text-status-needs-you' : 'text-text-faint' }) }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [t(`modes.${mode}.label`), _jsx("span", { className: "text-xs text-text-faint", children: t(`modes.${mode}.hint`) })] })] }, mode))) }) }) }) })] }), options.map((option) => (_jsx(OptionRow, { option: option, selection: selection, onChange: (value) => onOption(option.id, value) }, option.id))), (hasContextOption || standaloneContext) && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, { className: MENU_SEPARATOR }), _jsx(ContextUsage, { usage: usage, disabled: compactDisabled, onCompact: onCompact })] }))] }) }) })] }));
+}
+/* Red where a window is nearly spent, amber where it is worth knowing, as the usage bars have it. */
+const sessionTone = (used) => used >= 0.9
+    ? { bar: 'bg-status-error', text: 'text-status-error' }
+    : used >= 0.7
+        ? { bar: 'bg-status-needs-you', text: 'text-status-needs-you' }
+        : { bar: 'bg-text-muted', text: 'text-text-muted' };
+/*
+ * The account the next turn runs under, for the chat's own CLI. Before the first turn any of them;
+ * after it one that reads the conversation, since the others would start it over, and a fork is how
+ * the conversation goes along to those. A switch applies from the next turn.
+ */
+function AccountSubmenu({ provider, account }) {
+    const { t } = useTranslation('agent-chat');
+    const { choice, started, onPick } = account;
+    return (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "menu-item text-text-muted", children: [_jsx("span", { className: "grid w-3.5 shrink-0 place-items-center", children: _jsx(AccountDot, { color: choice.current?.account.color }) }), _jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.account.label') }), _jsx("span", { className: `${MENU_HINT} truncate`, children: choice.current === null ? choice.currentId : choice.nameOf(choice.current) }), _jsx(Icon, { icon: ChevronRight, size: 14, className: "shrink-0 text-text-faint" })] }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { className: "z-(--z-popup)", ...SUBMENU_POSITIONER, children: _jsxs(Menu.Popup, { className: "menu-popup min-w-64", children: [_jsxs(Menu.Group, { children: [_jsxs(Menu.GroupLabel, { className: `${MENU_LABEL} flex items-center gap-1.5`, children: [_jsx(AgentIcon, { kind: provider, size: 12 }), choice.providerName] }), _jsx(Menu.RadioGroup, { value: choice.currentId, onValueChange: (id) => onPick(id), children: _jsx(AccountRows, { choice: choice, locked: (id) => started && !canContinueOn(choice.accounts, provider, choice.currentId, id) }) })] }), _jsx(Menu.Separator, { className: MENU_SEPARATOR }), _jsxs(Menu.Item, { className: "menu-item text-text-muted", onClick: () => chatHost().openSettings('providers'), children: [_jsx(Icon, { icon: Settings, size: 14, className: "shrink-0 text-text-faint" }), t('pickers.account.manage')] })] }) }) })] }));
+}
+/* Mounted only while the submenu is open, since asking for the plan windows starts a CLI per account. */
+function AccountRows({ choice, locked }) {
+    const { t } = useTranslation('agent-chat');
+    const limits = useUsageLimits();
+    const now = useNow(MINUTE_MS);
+    return choice.offered.map((entry) => {
+        const session = sessionWindow(limitsOfAccount(limits, entry.id));
+        const disabled = locked(entry.id);
+        const row = (_jsxs(Menu.RadioItem, { value: entry.id, disabled: disabled, closeOnClick: true, className: "menu-item items-start data-disabled:opacity-50", children: [_jsx(MenuCheck, { kind: "radio" }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(AccountDot, { color: entry.account.color }), _jsx("span", { className: "truncate", children: choice.nameOf(entry) })] }), session !== null && _jsx(SessionLine, { used: session.used, resetsAt: session.resetsAt, now: now })] })] }, entry.id));
+        return disabled ? (_jsx(Tooltip, { label: t('pickers.account.forkToSwitch', { account: choice.nameOf(entry) }), side: "right", sideOffset: 12, children: row }, entry.id)) : (row);
+    });
+}
+function SessionLine({ used, resetsAt, now }) {
+    const { t } = useTranslation('agent-chat');
+    const percent = Math.round(used * 100);
+    const tone = sessionTone(used);
+    return (_jsxs("span", { className: "flex items-center gap-2 text-xs text-text-faint tabular-nums", children: [_jsx("span", { "aria-hidden": true, className: "relative h-1 w-14 shrink-0 overflow-hidden rounded-full bg-surface-sunken", children: _jsx("span", { className: clsx('absolute inset-y-0 left-0 rounded-full', tone.bar), style: { width: `${Math.min(100, percent)}%` } }) }), _jsx("span", { className: tone.text, children: formatPercent(percent) }), resetsAt !== null && (_jsxs("span", { className: "whitespace-nowrap", children: ["\u00B7 ", t('pickers.account.resets', { time: isSameDay(resetsAt, now) ? formatClock(resetsAt) : formatWeekdayClock(resetsAt) })] }))] }));
+}
+/* How full the context is, drawn small enough to sit in the pill beside the window's size. */
+function ContextRing({ usage }) {
+    const fraction = contextFraction(usage);
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", className: clsx('shrink-0', contextTone(fraction)), "aria-hidden": "true", children: [_jsx("circle", { cx: "7", cy: "7", r: RING_RADIUS, fill: "none", strokeWidth: "2", className: "stroke-border-strong" }), _jsx("circle", { cx: "7", cy: "7", r: RING_RADIUS, fill: "none", strokeWidth: "2", stroke: "currentColor", strokeDasharray: RING_CIRCUMFERENCE, strokeDashoffset: RING_CIRCUMFERENCE * (1 - fraction), transform: "rotate(-90 7 7)" })] }));
+}
+/* How full the context is and what fills it, and the one thing to do about a full context. */
+function ContextUsage({ usage, disabled, onCompact }) {
+    const { t } = useTranslation('agent-chat');
+    const fraction = contextFraction(usage);
+    const percent = Math.round(fraction * 100);
+    const segments = contextSegments(usage);
+    const used = formatTokens(usage.contextTokens);
+    return (_jsxs(Menu.Group, { className: "flex flex-col gap-2 px-2.5 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Menu.GroupLabel, { className: "min-w-0 grow truncate text-sm font-medium text-text", children: t('contextMeter.title') }), _jsx("span", { className: clsx('shrink-0 text-xs tabular-nums', fraction >= 0.7 ? contextTone(fraction) : 'text-text-faint'), children: usage.contextWindow ? t('contextMeter.of', { used, window: formatTokens(usage.contextWindow) }) : t('contextMeter.used', { tokens: used }) })] }), usage.contextWindow ? (_jsx("div", { role: "meter", "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": t('contextMeter.aria', { percent }), className: "flex h-1.5 overflow-hidden rounded-full bg-surface-sunken", children: segments ? (segments.map((segment) => (_jsx("div", { className: clsx('h-full shrink-0', PART_COLORS[segment.part]), style: { width: `${segment.fraction * 100}%` } }, segment.part)))) : (_jsx("div", { className: clsx('h-full rounded-full bg-current', contextTone(fraction)), style: { width: `${percent}%` } })) })) : null, segments && (_jsx("div", { className: "flex flex-col gap-0.5 text-xs", children: segments.map((segment) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: clsx('size-2 shrink-0 rounded-xs', PART_COLORS[segment.part]) }), _jsx("span", { className: "min-w-0 grow truncate text-text-muted", children: t(`contextMeter.parts.${segment.part}`) }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: t('contextMeter.estimate', { tokens: formatTokens(segment.tokens) }) })] }, segment.part))) })), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-faint tabular-nums", children: [_jsx("span", { className: "min-w-0 grow truncate", children: usage.contextWindow ? t('contextMeter.percentUsed', { percent: formatPercent(fraction * 100) }) : null }), _jsxs(Menu.Item, { className: "flex shrink-0 cursor-default items-center gap-0.5 rounded font-medium text-accent outline-none data-disabled:opacity-50 data-highlighted:underline", disabled: disabled || usage.contextTokens === 0, onClick: onCompact, children: [t('contextMeter.compactNow'), _jsx(Icon, { icon: ChevronRight, size: 12 })] })] })] }));
+}
+/*
+ * One of the model's own knobs: a few choices side by side, more of them in a submenu, a checkbox for
+ * a boolean. Every choice is a menu item, so the arrow keys reach it.
+ */
+function OptionRow({ option, selection, onChange }) {
+    const icon = _jsx(Icon, { icon: optionIcon(option), size: 14, className: "shrink-0 text-text-faint" });
+    if (option.type === 'boolean') {
+        const checked = (selection.options[option.id] ?? option.defaultValue) === true;
+        const item = (_jsxs(Menu.CheckboxItem, { className: "menu-item text-text-muted", checked: checked, onCheckedChange: onChange, closeOnClick: false, children: [icon, _jsx("span", { className: "min-w-0 grow truncate", children: option.label }), _jsx(MenuCheck, { kind: "checkbox" })] }));
+        return option.description ? (_jsx(Tooltip, { label: option.description, side: "right", sideOffset: 12, children: item })) : (item);
+    }
+    const value = String(selection.options[option.id] ?? option.defaultChoice);
+    if (option.choices.length > INLINE_CHOICES) {
+        return (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "menu-item text-text-muted", children: [icon, _jsx("span", { className: "min-w-0 grow truncate", children: option.label }), _jsx("span", { className: MENU_HINT, children: option.choices.find((choice) => choice.id === value)?.label }), _jsx(Icon, { icon: ChevronRight, size: 14, className: "shrink-0 text-text-faint" })] }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { className: "z-(--z-popup)", ...SUBMENU_POSITIONER, children: _jsx(Menu.Popup, { className: "menu-popup min-w-56", children: _jsx(Menu.RadioGroup, { value: value, onValueChange: (next) => onChange(next), children: option.choices.map((choice) => (_jsxs(Menu.RadioItem, { value: choice.id, className: clsx('menu-item', choice.description && 'items-start'), children: [_jsx(MenuCheck, { kind: "radio" }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [choice.label, choice.description && _jsx("span", { className: "text-xs text-text-faint", children: choice.description })] })] }, choice.id))) }) }) }) })] }));
+    }
+    return (_jsxs("div", { className: "flex items-center gap-2.5 px-2.5 py-1.5 text-sm text-text-muted", children: [icon, _jsx("span", { className: "min-w-0 grow truncate", children: option.label }), _jsx(Menu.RadioGroup, { value: value, onValueChange: (next) => onChange(next), "aria-label": option.label, className: "flex gap-0.5 rounded-md bg-surface-sunken p-0.5", children: option.choices.map((choice) => (_jsx(Menu.RadioItem, { value: choice.id, className: clsx('flex h-6 cursor-default items-center rounded px-2 text-xs outline-none', choice.id === value ? 'bg-surface-active text-text' : 'text-text-muted data-highlighted:text-text'), children: choice.label }, choice.id))) })] }));
+}

package/dist/chat/ui/Scrubber.d.ts

@@ -0,0 +1,17 @@
+import { type ScrubberTick } from '../logic/scrubber';
+export interface CardChat {
+    chatId: string;
+    canFork(turnId: string): boolean;
+    fork(turnId: string): void;
+}
+interface ScrubberProps {
+    ticks: readonly ScrubberTick[];
+    firstInView: number | null;
+    lastInView: number | null;
+    onPick(index: number): void;
+    chat?: CardChat | null;
+    found?: readonly boolean[];
+    foundCurrent?: number | null;
+}
+export declare const Scrubber: import("react").MemoExoticComponent<({ ticks, firstInView, lastInView, onPick, chat, found, foundCurrent }: ScrubberProps) => import("react").JSX.Element>;
+export {};