@adecore/agents-react 0.37.3 → 0.39.0

package/src/agents/AgentModelLabel.tsx

@@ -0,0 +1,40 @@
+import { useContext } from 'react';
+import clsx from 'clsx';
+import type { AgentKind, UsageProvider } from '@adecore/agent-contracts';
+import { ChatScopeContext } from '../scope';
+import { useProvidersStore } from '../state/providers';
+import { AgentIcon } from './AgentIcon';
+import { modelName } from './model-name';
+import { ProviderLogo } from './ProviderLogo';
+
+interface AgentModelLabelProps {
+    provider: AgentKind;
+    /* The model's slug; absent names the CLI itself. */
+    model?: string;
+    /* The machine whose catalog names the model; absent, the chat scope the label is drawn in. */
+    scopeId?: string;
+    size?: number;
+    className?: string;
+}
+
+/*
+ * Who answered or will answer, in one line: the CLI's mark and the model, named the way the machine's
+ * catalog names it, as a row of facts writes it ("made by", "runs as").
+ */
+export function AgentModelLabel({ provider, model, scopeId, size = 14, className }: AgentModelLabelProps) {
+    // Outside a chat scope a host names the machine itself; with neither, the CLI still draws, by its kind.
+    const scope = useContext(ChatScopeContext);
+    const id = scopeId ?? scope?.id;
+    const catalog = useProvidersStore((s) => (id === undefined ? undefined : s.byScope[id]?.providers.find((entry) => entry.kind === provider)));
+    const name = model === undefined ? (catalog?.name ?? provider) : modelName(model, catalog?.models);
+    return (
+        <span className={clsx('flex min-w-0 items-center gap-1.5', className)}>
+            {provider === 'claude' || provider === 'codex' ? (
+                <ProviderLogo provider={provider as UsageProvider} size={size} />
+            ) : (
+                <AgentIcon kind={provider} size={size} className="shrink-0" />
+            )}
+            <span className="truncate">{name}</span>
+        </span>
+    );
+}

package/src/chat/logic/visual-height.ts

@@ -1,7 +1,7 @@
 import { VISUAL_LIMITS, visualFrameHeight, type ChatVisual } from '@adecore/agent-contracts/visual';
 
 /* A frame before anything measured its page: room for a chart, never taller than the page may grow. */
-const DEFAULT_HEIGHT_PX = 240;
+export const DEFAULT_HEIGHT_PX = 240;
 /* Plenty for the visuals of a long session; the oldest goes first. */
 const REMEMBERED_HEIGHTS = 500;
 // Stay within browser layout coordinates even if a page reports a bogus finite size.

package/src/chat/ui/Composer.tsx

@@ -44,7 +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';
+import { useHostComposerSendActions, useHostExtraPrompts, useHostSendDelivery } from '../../host-hooks';
 
 interface ComposerProps {
     chatId: string;
@@ -121,6 +121,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     // 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 = useHostExtraPrompts(scope.id, chatId);
+    const sendActions = useHostComposerSendActions(scope.id, chatId);
     const { submit, continueTurn, restoreStashed, toggleStash } = useComposerSubmit({
         chatId,
         writable,
@@ -189,7 +190,6 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
         history,
         noteKey: files.noteKey,
         toggleStash,
-        setText: (next) => box.setText(next),
         submit
     });
 
@@ -336,7 +336,16 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                                 onContinue:
                                     continuable !== null && continuable !== sentFor && empty && writable && pending.length === 0 && extraPrompts.length === 0
                                         ? continueTurn
-                                        : null
+                                        : null,
+                                actions: sendActions,
+                                draft: {
+                                    scopeId: scope.id,
+                                    chatId,
+                                    text: withQuote(draft.quote, draft.text.trim()),
+                                    provider: info.provider,
+                                    selection: info.selection,
+                                    runtimeMode: info.runtimeMode
+                                }
                             }}
                             dictationToolbar={setDictationToolbar}
                             onFiles={(picked) => {

package/src/chat/ui/HostMenuItems.tsx

@@ -0,0 +1,11 @@
+import { Icon, Menu } from '@adecore/ui';
+import type { HostMenuAction } from '../../host';
+
+/* The items a host adds to a menu of the chat's, in the order it gave them. */
+export function HostMenuItems({ actions }: { actions: readonly HostMenuAction[] }) {
+    return actions.map((action) => (
+        <Menu.Item key={action.id} disabled={action.disabled} onClick={() => action.run()}>
+            {action.icon !== undefined && <Icon icon={action.icon} size={14} />} {action.label}
+        </Menu.Item>
+    ));
+}

package/src/chat/ui/Pickers.tsx

@@ -34,6 +34,8 @@ interface ModelPickerProps {
     side?: 'top' | 'bottom';
     /* `chip` names the provider beside the model on a secondary button, for a picker that sits in a card or a form. */
     trigger?: 'plain' | 'chip';
+    /* The chip's height: `sm` in a card, `md` beside the fields of a form. */
+    chipSize?: 'sm' | 'md';
     /* 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. */
@@ -55,6 +57,7 @@ export function ModelPicker({
     kbd = '/model',
     side = 'top',
     trigger = 'plain',
+    chipSize = 'sm',
     finalFocus,
     footer
 }: ModelPickerProps) {
@@ -150,7 +153,7 @@ export function ModelPicker({
         <Popover.Root open={open} onOpenChange={setOpen}>
             <Tooltip label={owner ? `${owner.name} · ${current}` : t('pickers.model.choose')} kbd={kbd ?? undefined}>
                 {trigger === 'chip' ? (
-                    <Popover.Trigger render={<Button variant="secondary" size="sm" className="min-w-0 shrink gap-1.5" />}>
+                    <Popover.Trigger render={<Button variant="secondary" size={chipSize} className="min-w-0 shrink gap-1.5" />}>
                         {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>

package/src/chat/ui/PromptEditor.tsx

@@ -0,0 +1,130 @@
+import { useLayoutEffect, useRef, type SetStateAction } from 'react';
+import clsx from 'clsx';
+import { Surface } from '@adecore/ui';
+import type { ChatSkill } from '@adecore/agent-contracts';
+import type { Referables } from '../chat-references';
+import { ComposerInput, type ComposerInputHandle } from './ComposerInput';
+import { chipDecorations } from './composer/chips';
+import { ComposerMenu } from './composer/ComposerMenu';
+import { pickInMenu } from './composer/key-handler';
+import { usePromptMenus, type PromptDraft } from './composer/use-prompt-menus';
+
+interface PromptEditorProps {
+    value: PromptDraft;
+    onChange(next: PromptDraft): void;
+    /* The editor's accessible name; a label element cannot point at the editable element. */
+    label: string;
+    placeholder: string;
+    skills: readonly ChatSkill[];
+    /* What the CLI answers after `/`, besides `/goal` where `goals` is set. */
+    slashCommands?: readonly string[];
+    goals?: boolean;
+    /* Where `@` searches for files; null offers none. */
+    cwd: string | null;
+    referables: Referables;
+    providerName?: string;
+    disabled?: boolean;
+    className?: string;
+}
+
+const NO_COMMANDS: readonly string[] = [];
+
+/*
+ * A prompt written now and sent later, as a form field: the composer's editor with its pickers and chips,
+ * without a chat behind it. The host hands in what the CLI it goes to has, and keeps what was picked.
+ */
+export function PromptEditor({
+    value,
+    onChange,
+    label,
+    placeholder,
+    skills,
+    slashCommands = NO_COMMANDS,
+    goals = false,
+    cwd,
+    referables,
+    providerName,
+    disabled = false,
+    className
+}: PromptEditorProps) {
+    const inputRef = useRef<ComposerInputHandle>(null);
+    // A pick writes twice in one event (the text, then what it picked), and the second must build on the first.
+    const latest = useRef(value);
+
+    useLayoutEffect(() => {
+        latest.current = value;
+    }, [value]);
+
+    const setDraft = (action: SetStateAction<PromptDraft>): void => {
+        const next = typeof action === 'function' ? action(latest.current) : action;
+        latest.current = next;
+        onChange(next);
+    };
+
+    const setText = (next: string, mentions = value.mentions, chosen = value.skills): void => {
+        setDraft((current) => ({ ...current, text: next, mentions, skills: chosen }));
+    };
+
+    const menus = usePromptMenus({
+        draft: { draft: value, setDraft, setText },
+        inputRef,
+        cwd,
+        skills,
+        slashCommands,
+        goals,
+        providerName,
+        referables,
+        label
+    });
+    const extensions = chipDecorations({ mentions: value.mentions, skills: value.skills, references: menus.referenceChips });
+
+    const onKeyDown = (e: KeyboardEvent): boolean => {
+        if (e.isComposing) {
+            return false;
+        }
+        // Escape closes the picker, and only that: the dialog around the field stays.
+        if (e.key === 'Escape' && menus.menuOpen) {
+            menus.close();
+            e.stopPropagation();
+            return true;
+        }
+        // Enter adds a line here rather than sending, so on a command it completes like Tab.
+        if (e.key === 'Enter' && menus.commandMenuOpen) {
+            menus.completeCommand(menus.commands[menus.activeIndex]!);
+            return true;
+        }
+        return pickInMenu(e, menus);
+    };
+
+    return (
+        <div className={clsx('relative', className)}>
+            {/* Over the form under the field, not inside it, so what a person types never moves while the picker opens and closes. */}
+            {menus.menuOpen && (
+                <Surface className="absolute inset-x-0 top-full z-50 mt-1 overflow-hidden rounded-lg bg-clip-padding *:border-b-0">
+                    <ComposerMenu menus={menus} />
+                </Surface>
+            )}
+            <div className="field h-auto overflow-hidden p-0 focus-ring-within">
+                <ComposerInput
+                    ref={inputRef}
+                    dictationToolbar={null}
+                    className="composer-input prompt-editor select-text text-sm leading-normal text-text"
+                    value={value.text}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    tabbable
+                    extensions={extensions}
+                    aria={menus.inputAria}
+                    onChange={(text, selection, state) => {
+                        setText(text);
+                        menus.setMenuIndex(0);
+                        menus.trackTriggers(text, selection, state);
+                    }}
+                    onSelectionChange={menus.trackTriggers}
+                    onBlur={menus.close}
+                    onKeyDown={onKeyDown}
+                />
+            </div>
+        </div>
+    );
+}

package/src/chat/ui/Timeline.tsx

@@ -180,8 +180,21 @@ const ThreadRow = memo(function ThreadRow({ row, previous, index, top, measure,
 /*
  * `overlay` stands in the thread's place and ends where the composer starts, so the thread keeps
  * where it was underneath and the composer stays in reach for the prompts it answers.
+ * `onContentHeight` hears what the thread's rows and its padding take, without the composer, once
+ * the rows in view are laid out at their real heights, for a host that sizes its frame to the thread.
+ * Rows out of view still count at an estimate, so a frame up to the viewport's height gets it exact.
  */
-export function Timeline({ chatId, composer, overlay }: { chatId: string; composer?: ReactNode; overlay?: ReactNode }) {
+export function Timeline({
+    chatId,
+    composer,
+    overlay,
+    onContentHeight
+}: {
+    chatId: string;
+    composer?: ReactNode;
+    overlay?: ReactNode;
+    onContentHeight?: (height: number) => void;
+}) {
     const host = useChatHost();
     const { fork } = host;
     const { t } = useTranslation('agent-chat');
@@ -406,6 +419,14 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
             setMeasuredThread(keyOf(chatId));
         }
     }, [initialLayout, empty, loadingHistory, frame.height, virtualRows, virtualizer, rows.length, keyOf, chatId]);
+    useLayoutEffect(() => {
+        const thread = threadRef.current;
+        if (onContentHeight === undefined || initialLayout || empty || loadingHistory || thread === null) {
+            return;
+        }
+        const style = getComputedStyle(thread);
+        onContentHeight(totalSize + (Number.parseFloat(style.paddingTop) || 0) + (Number.parseFloat(style.paddingBottom) || 0));
+    }, [onContentHeight, initialLayout, empty, loadingHistory, totalSize]);
     useLayoutEffect(() => {
         const element = scrollRef.current;
         if (!followRef.current || element === null) {

package/src/chat/ui/VisualFrame.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { visualThemeFragment, type ChatVisual, type VisualAppearance, type VisualTheme } from '@adecore/agent-contracts/visual';
+import { VISUAL_LIMITS, visualThemeFragment, type ChatVisual, type VisualAppearance, type VisualTheme } from '@adecore/agent-contracts/visual';
 import { Spinner, useMeasuredWidth } from '@adecore/ui';
 import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
-import { initialVisualContentHeight, rememberVisualHeight } from '../logic/visual-height';
+import { DEFAULT_HEIGHT_PX, initialVisualContentHeight, rememberVisualHeight } from '../logic/visual-height';
 import { VisualBridge } from '../visual-bridge';
 import { VisualViewportController } from '../visual-viewport';
 import { useVisualTheme } from './visual-theme';
@@ -18,6 +18,25 @@ export interface VisualFrameProps {
     className?: string;
 }
 
+export interface VisualPageFrameProps {
+    /* Reads the page's HTML each time the frame opens; the frame opens again when this changes, so keep it the same function while the page is. */
+    page: () => Promise<string>;
+    /* The frame's accessible name. */
+    title: string;
+    /* The tallest the page may grow on a host page without the viewport; left out, the limit of every visual. */
+    maxHeight?: number;
+    /* Fills its positioned parent and lets the page scroll inside it, rather than taking the height the page reports. */
+    fill?: boolean;
+    className?: string;
+}
+
+interface PageFrameProps extends VisualPageFrameProps {
+    maxHeight: number;
+    /* The height to start at before the page reports one, for a frame `width` pixels wide. */
+    initialHeight(width: number): number;
+    onHeight?(width: number, height: number): void;
+}
+
 /*
  * A link the page asks to open counts only while a person acts in the frame: it has the focus, and a
  * click or a key in it is recent. A page can take the focus by script, so this stops a link opened as
@@ -27,15 +46,43 @@ function personActsIn(frame: HTMLIFrameElement): boolean {
     return frame.ownerDocument.activeElement === frame && navigator.userActivation?.isActive !== false;
 }
 
+const defaultHeight = (): number => DEFAULT_HEIGHT_PX;
+
+/* A visual of a chat, its page read from the chat's attachments under the visual's id. */
+export function VisualFrame({ chatId, visual, fill = false, className }: VisualFrameProps) {
+    const { attachments } = useChatHost();
+    const scope = useChatScope();
+    // The frame opens again when its page changes, so the reader keeps its identity while the visual does.
+    const page = useCallback(() => attachments.read(scope.id, chatId, visual.id).then((blob) => blob.text()), [attachments, scope.id, chatId, visual.id]);
+    return (
+        <PageFrame
+            page={page}
+            title={visual.title}
+            maxHeight={visual.maxHeight}
+            fill={fill}
+            className={className}
+            initialHeight={(width) => initialVisualContentHeight(visual, width)}
+            onHeight={(width, height) => rememberVisualHeight(visual.id, width, height)}
+        />
+    );
+}
+
 /*
- * One visual's page in a frame that loads the app's sandbox host page; the bridge hands it the page and
- * the theme. The frame never gets `allow-same-origin`, which keeps the page on an opaque origin even
- * when the host page is served on the app's own. Its box keeps one height while it loads or fails.
+ * A visual's page outside a chat thread, such as one an app kept: the same sandboxed frame, theme and
+ * links as in a thread, with the page read through `page`. Draws nothing while the host has no `visuals`.
  */
-export function VisualFrame({ chatId, visual, fill = false, className }: VisualFrameProps) {
-    const { visuals, attachments } = useChatHost();
+export function VisualPageFrame({ maxHeight = VISUAL_LIMITS.maxHeight, ...props }: VisualPageFrameProps) {
+    return <PageFrame {...props} maxHeight={maxHeight} initialHeight={defaultHeight} />;
+}
+
+/*
+ * One page in a frame that loads the app's sandbox host page; the bridge hands it the page and the
+ * theme. The frame never gets `allow-same-origin`, which keeps the page on an opaque origin even when
+ * the host page is served on the app's own. Its box keeps one height while it loads or fails.
+ */
+function PageFrame({ page, title, maxHeight, fill = false, className, initialHeight, onHeight }: PageFrameProps) {
+    const { visuals } = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const scope = useChatScope();
     const frameUrl = visuals?.frameUrl ?? null;
     const boxRef = useRef<HTMLDivElement | null>(null);
     const frameRef = useRef<HTMLIFrameElement>(null);
@@ -50,6 +97,7 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
     };
     const theme = useVisualTheme(boxRef);
     const widthRef = useRef(width);
+    const onHeightRef = useRef(onHeight);
     const [reported, setReported] = useState<number | null>(null);
     // The appearance the page is drawn in once it runs; until then the frame matches the sandbox host page, which declares none.
     const [drawn, setDrawn] = useState<VisualAppearance | null>(null);
@@ -59,11 +107,12 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
     if (opening === null && frameUrl !== null && theme !== null && width > 0) {
         setOpening({ src: frameUrl + visualThemeFragment(theme), theme });
     }
-    const height = fill || width === 0 ? undefined : (reported ?? initialVisualContentHeight(visual, width));
+    const height = fill || width === 0 ? undefined : (reported ?? initialHeight(width));
 
     useLayoutEffect(() => {
         widthRef.current = width;
-    }, [width]);
+        onHeightRef.current = onHeight;
+    }, [width, onHeight]);
 
     useLayoutEffect(() => {
         const frame = frameRef.current;
@@ -72,8 +121,8 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
         }
         const bridge = new VisualBridge({
             frame: () => frame.contentWindow,
-            visual: { maxHeight: visual.maxHeight },
-            page: attachments.read(scope.id, chatId, visual.id).then((blob) => blob.text()),
+            visual: { maxHeight },
+            page: page(),
             theme: opening.theme,
             mayOpenLink: () => personActsIn(frame),
             openLink: (url) => visuals?.openLink(url),
@@ -82,7 +131,7 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
                     return;
                 }
                 setReported(next);
-                rememberVisualHeight(visual.id, widthRef.current, next);
+                onHeightRef.current?.(widthRef.current, next);
             },
             ...(!fill
                 ? {
@@ -102,7 +151,7 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
             bridge.dispose();
             bridgeRef.current = null;
         };
-    }, [opening, scope.id, chatId, visual.id, visual.maxHeight, fill, visuals, attachments]);
+    }, [opening, page, maxHeight, fill, visuals]);
 
     useLayoutEffect(() => {
         const box = boxRef.current;
@@ -118,7 +167,7 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
             controller.dispose();
             controllerRef.current = null;
         };
-    }, [fill, viewportReady, opening, scope.id, chatId, visual.id, visual.maxHeight]);
+    }, [fill, viewportReady, opening, page, maxHeight]);
 
     useLayoutEffect(() => controllerRef.current?.refresh(), [height, width]);
 
@@ -135,7 +184,7 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
                     <iframe
                         ref={frameRef}
                         src={opening.src}
-                        title={visual.title}
+                        title={title}
                         loading="lazy"
                         sandbox="allow-scripts allow-forms"
                         className={clsx('block size-full border-0', failed && 'invisible')}
@@ -145,13 +194,11 @@ export function VisualFrame({ chatId, visual, fill = false, className }: VisualF
                     />
                 )}
                 {failed ? (
-                    <p className="absolute inset-0 grid place-items-center px-4 text-center text-xs text-text-muted">
-                        {t('visuals.failed', { title: visual.title })}
-                    </p>
+                    <p className="absolute inset-0 grid place-items-center px-4 text-center text-xs text-text-muted">{t('visuals.failed', { title })}</p>
                 ) : (
                     drawn === null && (
                         <span className="chat-visual-wait pointer-events-none absolute inset-0 grid place-items-center text-text-faint">
-                            <Spinner size={16} label={t('visuals.loading', { title: visual.title })} />
+                            <Spinner size={16} label={t('visuals.loading', { title })} />
                         </span>
                     )
                 )}

package/src/chat/ui/composer/ComposerControls.tsx

@@ -1,14 +1,16 @@
-import { useRef, type Ref } from 'react';
+import { useRef, useState, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ArrowUp, Play, Plus, Square } from 'lucide-react';
+import clsx from 'clsx';
+import { ArrowUp, ChevronDown, Play, Plus, Square } from 'lucide-react';
 import type { ChatInfo } from '@adecore/agent-contracts';
-import { Button, ErrorBoundary, Icon, Tooltip, type Shortcut } from '@adecore/ui';
-import { useChatHost } from '../../../host';
+import { Button, ErrorBoundary, Icon, Menu, Tooltip, type Shortcut } from '@adecore/ui';
+import { useChatHost, type ComposerSendAction, type ComposerSendDraft } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { useProviders } from '../../../state/providers';
 import { useAccountChoice } from '../../account-choice';
 import type { StashedPrompt } from '../../stash';
 import { composerStopLabel } from '../../subagent-list';
+import { HostMenuItems } from '../HostMenuItems';
 import { StashPicker } from '../Pickers';
 import { RunSettings } from '../RunSettings';
 import type { ChatControls } from './use-chat-controls';
@@ -22,6 +24,64 @@ interface SendProps {
     onSend(alternate: boolean): void;
     /* Set when a person stopped the last turn and the box is empty: Continue stands where the send button would. */
     onContinue: (() => void) | null;
+    /* The host's own, behind a chevron on the send button; empty draws the send button alone. */
+    actions: readonly ComposerSendAction[];
+    draft: ComposerSendDraft;
+}
+
+interface SendButtonProps {
+    send: SendProps;
+    /* The chevron only follows whether the box takes input: an action may want an empty draft, such as to reuse the last message. */
+    writable: boolean;
+}
+
+/* The send button, split with a chevron that opens the host's send actions when it has any. */
+function SendButton({ send, writable }: SendButtonProps) {
+    const { t } = useTranslation('agent-chat');
+    const [box, setBox] = useState<HTMLDivElement | null>(null);
+    const split = send.actions.length > 0;
+    const button = (
+        <Tooltip label={send.label} kbd={send.kbd} name>
+            <button
+                className={clsx(
+                    'flex h-9 w-9 shrink-0 items-center justify-center bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100',
+                    split ? 'focus-visible:-outline-offset-2' : 'rounded-full'
+                )}
+                disabled={send.disabled}
+                onClick={(event) => send.onSend(event.altKey)}
+            >
+                <Icon icon={ArrowUp} size={16} />
+            </button>
+        </Tooltip>
+    );
+    if (!split) {
+        return button;
+    }
+    const { draft } = send;
+    return (
+        // One round shape that clips both halves, the way a split button of the library draws its frame.
+        <div ref={setBox} className="flex h-9 shrink-0 overflow-clip rounded-full">
+            {button}
+            <Menu.Root>
+                <Tooltip label={t('composer.sendActions')} name>
+                    <Menu.Trigger
+                        render={
+                            <button
+                                type="button"
+                                className='relative flex h-9 w-6 shrink-0 items-center justify-center bg-accent text-accent-text before:absolute before:inset-y-0 before:left-0 before:my-auto before:h-4 before:w-px before:bg-current/30 before:content-[""] hover:brightness-90 focus-visible:-outline-offset-2 disabled:opacity-50 disabled:hover:brightness-100'
+                            />
+                        }
+                        disabled={!writable}
+                    >
+                        <Icon icon={ChevronDown} size={14} />
+                    </Menu.Trigger>
+                </Tooltip>
+                <Menu.Popup anchor={box} side="top" sideOffset={8} align="end" className="min-w-48">
+                    <HostMenuItems actions={send.actions.map((action) => ({ ...action, run: () => action.run(draft) }))} />
+                </Menu.Popup>
+            </Menu.Root>
+        </div>
+    );
 }
 
 interface ComposerControlsProps {
@@ -140,17 +200,7 @@ export function ComposerControls({
                         </Button>
                     </Tooltip>
                 )}
-                {send.onContinue === null && send.visible && (
-                    <Tooltip label={send.label} kbd={send.kbd} name>
-                        <button
-                            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100"
-                            disabled={send.disabled}
-                            onClick={(event) => send.onSend(event.altKey)}
-                        >
-                            <Icon icon={ArrowUp} size={16} />
-                        </button>
-                    </Tooltip>
-                )}
+                {send.onContinue === null && send.visible && <SendButton send={send} writable={writable} />}
             </div>
         </div>
     );

package/src/chat/ui/composer/key-handler.ts

@@ -26,7 +26,6 @@ interface KeyHandlerInput {
     history: PromptHistory;
     noteKey(e: KeyboardEvent): void;
     toggleStash(): void;
-    setText(next: string): void;
     submit(how: ComposerSend): void;
 }
 
@@ -50,19 +49,14 @@ function indentInFence(e: KeyboardEvent, view: EditorView): boolean {
 }
 
 /* The keys an open picker takes: the arrows walk it, and Tab (or Enter, outside the commands) picks. */
-function pickInMenu(e: KeyboardEvent, { menus, setText }: KeyHandlerInput): boolean {
+export function pickInMenu(e: KeyboardEvent, menus: ComposerMenus): boolean {
     const { activeIndex } = menus;
     if (menus.commandMenuOpen) {
         if (menus.moveInMenu(e.key, menus.commands.length)) {
             return true;
         }
         if (e.key === 'Tab') {
-            const chosen = menus.commands[activeIndex]!;
-            if (chosen.skill) {
-                menus.chooseSkill(chosen.name);
-            } else {
-                setText(`/${chosen.name} `);
-            }
+            menus.completeCommand(menus.commands[activeIndex]!);
             return true;
         }
     }
@@ -167,7 +161,7 @@ export function composerKeyHandler(input: KeyHandlerInput): (e: KeyboardEvent, v
             input.toggleStash();
             return true;
         }
-        if (pickInMenu(e, input)) {
+        if (pickInMenu(e, input.menus)) {
             return true;
         }
         if (e.key === 'Tab' && !e.altKey && !e.metaKey && !e.ctrlKey && indentInFence(e, view)) {

package/src/chat/ui/composer/prompt-picks.ts

@@ -0,0 +1,17 @@
+import type { ChatSendExtras } from '../../chat-client';
+import { referenceTokens, type Referables } from '../../chat-references';
+import { presentMentions, presentReferences, presentSkills } from '../../mentions';
+import type { PromptDraft } from './use-prompt-menus';
+
+/* What a prompt still holds of what was picked in it, as a send of the composer carries it. */
+export function promptPicks(value: PromptDraft, referables: Referables): Pick<ChatSendExtras, 'mentions' | 'skills' | 'chats' | 'references'> {
+    const text = value.text.trim();
+    const tokens = referenceTokens([...value.chats, ...value.references], referables.items, value.referenceNames);
+    return {
+        mentions: presentMentions(text, value.mentions),
+        skills: presentSkills(text, value.skills),
+        chats: presentReferences(text, value.chats, tokens),
+        // A machine that resolves only chats would drop the rest.
+        references: referables.chatsOnly ? [] : presentReferences(text, value.references, tokens)
+    };
+}