@adecore/agents-react 0.38.0 → 0.39.0

package/dist/theme.css

@@ -288,6 +288,9 @@
 .composer-input .cm-editor .cm-scroller .cm-content { padding: 18px 14px 6px 20px; caret-color: var(--text); }
 .composer-input .cm-scroller .cm-content .cm-line { padding: 0; }
 .composer-input .cm-scroller .cm-content .cm-placeholder { color: var(--text-faint); }
+/* The same editor as a form field (`PromptEditor`): the field's inset, and room for a few lines before it scrolls. */
+.composer-input.prompt-editor .cm-editor { max-height: 240px; }
+.composer-input.prompt-editor .cm-editor .cm-scroller .cm-content { min-height: 80px; padding: 6px 10px; }
 .composer-hints, .composer-hints-extra { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
 /* The joiner starts with its own comma, so it sits against the lead without the gap. */
 .composer-hints-extra { margin-left: -8px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.38.0",
-    "@adecore/editor": "0.38.0",
-    "@adecore/editor-react": "0.38.0",
-    "@adecore/intelligent-ui": "0.38.0",
-    "@adecore/merge": "0.38.0",
+    "@adecore/agent-contracts": "0.39.0",
+    "@adecore/editor": "0.39.0",
+    "@adecore/editor-react": "0.39.0",
+    "@adecore/intelligent-ui": "0.39.0",
+    "@adecore/merge": "0.39.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.38.0",
+    "@adecore/ui": "^0.39.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.38.0",
+    "@adecore/ui": "0.39.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.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/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/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/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)
+    };
+}