@adecore/agents-react 0.38.0 → 0.40.0

package/src/host.ts

@@ -18,7 +18,9 @@ import type {
     ChatUiLinkPayload,
     ChatUiLinkReading,
     ChatVisual,
-    ProviderPlatform
+    ModelSelection,
+    ProviderPlatform,
+    RuntimeMode
 } from '@adecore/agent-contracts';
 import { isApplePlatform } from '@adecore/ui';
 import type { Referables } from './chat/chat-references';
@@ -168,6 +170,28 @@ export interface ComposerSlotProps {
     insert(text: string): void;
 }
 
+/* What a send action of the app's gets: the message as it stands when a person picks the action. */
+export interface ComposerSendDraft {
+    scopeId: string;
+    chatId: string;
+    /* The draft as Send would send it, trimmed and with its quote; empty when nothing is written. */
+    text: string;
+    provider: AgentKind;
+    selection: ModelSelection;
+    runtimeMode: RuntimeMode;
+}
+
+/* An action of the app's own in the menu beside the composer's send button, such as sending the draft later. */
+export interface ComposerSendAction {
+    /* Unique among the actions of one composer. */
+    id: string;
+    label: string;
+    icon?: LucideIcon;
+    disabled?: boolean;
+    /* Runs once a person picks it; the draft stays in the box, and the host shows a failure itself. */
+    run(draft: ComposerSendDraft): void;
+}
+
 /* What an app's own chips for a chat's sub-agents get, in place of the one flyout over the composer. */
 export interface SubagentSlotProps {
     chatId: string;
@@ -453,6 +477,8 @@ export interface ChatHost {
     useComposerPlaceholder(scopeId: string, chatId: string): string | null;
     /* The app's own control in the composer's row, after the pickers; null draws none. */
     ComposerSlot: ComponentType<ComposerSlotProps> | null;
+    /* Actions of the app's own behind a chevron on the send button, in the order given; left out, or none, Send stands alone. */
+    useComposerSendActions?(scopeId: string, chatId: string): readonly ComposerSendAction[];
     /* The app's own chips for a chat's sub-agents over the composer; null draws the one flyout. */
     SubagentSlot: ComponentType<SubagentSlotProps> | null;
     /* Cards of the app's own in a thread, in any order. Hand back the same array while none changed, or the thread lays out its rows again on every render. */
@@ -525,9 +551,11 @@ const ChatHostContext = createContext<ChatHost>(DEFAULT_HOST);
 export function ChatHostProvider({ host, children }: { host: Partial<ChatHost>; children?: ReactNode }) {
     const parent = useContext(ChatHostContext);
     const [pinned] = useState(() => ({ host, value: { ...parent, ...host } }));
+
     if (pinned.host !== host) {
         throw new Error('A ChatHostProvider reads its host once: hand it the same object on every render, or a new key to mount it with another');
     }
+
     return createElement(ChatHostContext.Provider, { value: pinned.value }, children);
 }
 

package/src/index.ts

@@ -9,6 +9,8 @@ export {
     type TimelineFind,
     type ComposerDictationProps,
     type ComposerSlotProps,
+    type ComposerSendAction,
+    type ComposerSendDraft,
     type SubagentSlotProps,
     type ThreadCard,
     type VisualHost,
@@ -27,7 +29,9 @@ export {
     type TextareaProps,
     type ResourceUrl
 } from './host';
+
 export { type ChatScope, ChatScopeContext, useChatScope } from './scope';
+
 export {
     type ChatRequestMap,
     type ChatEventMap,
@@ -37,6 +41,7 @@ export {
     errorCode,
     isConnectionError
 } from './transport';
+
 export { portTransport, type PortTransport } from './port-transport';
 export { configureAgentMarks, type AgentMark } from './agents/agent-marks';
 export { configureChatStorage, type ChatStorageRecord, type ChatStorageAdapter, type ChatStorageOptions } from './storage';

package/src/lazy.tsx

@@ -13,6 +13,7 @@ const openErrorListeners = new Set<(error: unknown) => void>();
  */
 export function setLazyPrefetch(next: (load: Loader) => void): void {
     register = next;
+
     for (const load of loaders) {
         next(load);
     }
@@ -24,6 +25,7 @@ export function setLazyPrefetch(next: (load: Loader) => void): void {
  */
 export function onLazyOpenError(listener: (error: unknown) => void): () => void {
     openErrorListeners.add(listener);
+
     return () => {
         openErrorListeners.delete(listener);
     };
@@ -41,11 +43,14 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
 ): ComponentType<ComponentProps<Module[Name]>> {
     // Through `LoadedComponent`, so a `LazyBoundary` around it draws the moment the module lands.
     const loaded = new LoadedComponent<ComponentType<any>>(async () => (await load())[name]);
+
     const open = (): Promise<ComponentType<any>> => loaded.load();
+
     if (options?.prefetch !== false) {
         loaders.push(open);
         register?.(open);
     }
+
     // Only a render loads through here; a prefetch calls `open` itself, so its failures report nothing.
     const Lazy = lazy(async () => {
         try {
@@ -54,14 +59,18 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
             for (const listener of openErrorListeners) {
                 listener(error);
             }
+
             throw error;
         }
     });
+
     const LazyNamed = (props: ComponentProps<Module[Name]>) => {
         // `loaded` fills in place; compiled, the element drawn before the module landed would stay.
         'use no memo';
         const Component: ComponentType<any> = loaded.current ?? Lazy;
+
         return <Component {...props} />;
     };
+
     return LazyNamed;
 }

package/src/locales/en/agent-chat.ts

@@ -391,6 +391,7 @@ export default {
         continue: 'Continue',
         continueHint: 'Continue the stopped turn',
         send: 'Send',
+        sendActions: 'More send options',
         clear: {
             title: 'Clear thread?',
             description: 'A turn is running.',

package/src/locales/nl/agent-chat.ts

@@ -391,6 +391,7 @@ export default {
         continue: 'Doorgaan',
         continueHint: 'Ga verder met de gestopte beurt',
         send: 'Versturen',
+        sendActions: 'Meer verzendopties',
         clear: {
             title: 'Thread wissen?',
             description: 'Er loopt een turn.',

package/src/mounted-registry.ts

@@ -27,12 +27,15 @@ export class MountedRegistry<T extends MountedEntry> extends Map<string, T> {
      */
     async reattachAll(reattach: (id: string, entry: T) => Promise<void>): Promise<void> {
         const queue = [...this];
+
         const work = async (): Promise<void> => {
             for (let next = queue.shift(); next !== undefined; next = queue.shift()) {
                 const [id, entry] = next;
+
                 if (entry.attached || this.get(id) !== entry) {
                     continue;
                 }
+
                 try {
                     await reattach(id, entry);
                 } catch {
@@ -40,6 +43,7 @@ export class MountedRegistry<T extends MountedEntry> extends Map<string, T> {
                 }
             }
         };
+
         await Promise.all(Array.from({ length: REATTACH_CONCURRENCY }, work));
     }
 }

package/src/port-transport.ts

@@ -34,32 +34,45 @@ export function portTransport(port: FramePort): PortTransport {
 
     const answer = (id: string, frame: { ok: true; result: unknown } | { ok: false; error: { code: string; message: string } }): void => {
         const entry = pending.get(id);
+
         if (!entry) {
             return;
         }
+
         pending.delete(id);
+
         if (!frame.ok) {
             entry.reject(new ChatTransportError(frame.error.code, frame.error.message));
+
             return;
         }
+
         const result = AGENT_REQUEST_SCHEMAS[entry.type].result.safeParse(frame.result);
+
         if (!result.success) {
             entry.reject(new ChatTransportError('bad-reply', i18next.t('agent-chat:transport.badReply', { type: entry.type })));
+
             return;
         }
+
         entry.resolve(result.data);
     };
 
     const dispatch = (event: string, payload: unknown): void => {
         if (!isEventType(event)) {
             console.warn('Dropped an unknown event', event);
+
             return;
         }
+
         const parsed = AGENT_EVENT_SCHEMAS[event].safeParse(payload);
+
         if (!parsed.success) {
             console.warn(`Dropped a malformed ${event} event`);
+
             return;
         }
+
         // A copy, so a handler that unsubscribes while it runs does not change the set being walked.
         for (const handler of [...(eventHandlers.get(event) ?? [])]) {
             (handler as (payload: unknown) => void)(parsed.data);
@@ -70,21 +83,30 @@ export function portTransport(port: FramePort): PortTransport {
         if (status === 'closed') {
             return;
         }
+
         const parsed = parseServerFrame(raw);
+
         if (!parsed.ok) {
             console.warn('Dropped a malformed frame', parsed.message);
+
             return;
         }
+
         const frame = parsed.value;
+
         if ('event' in frame) {
             dispatch(frame.event, frame.payload);
+
             return;
         }
+
         if (frame.id === null) {
             // An answer without an id is about a frame the host could not read; nothing waits for it.
             console.warn('The chat host refused a frame', frame);
+
             return;
         }
+
         answer(frame.id, frame);
     });
 
@@ -96,29 +118,36 @@ export function portTransport(port: FramePort): PortTransport {
             if (status !== 'open') {
                 return Promise.reject(new ChatTransportError('not-connected', i18next.t('agent-chat:transport.notConnected')));
             }
+
             const id = String(nextId++);
+
             const promise = new Promise<ChatRequestMap[T]['result']>((resolve, reject) => {
                 pending.set(id, { type, resolve: resolve as (result: unknown) => void, reject });
             });
+
             try {
                 port.send({ id, type, payload });
             } catch {
                 // A payload the port cannot clone throws here, and the caller only listens to the promise.
                 pending.delete(id);
+
                 return Promise.reject(new ChatTransportError('not-sent', i18next.t('agent-chat:transport.notSent', { type })));
             }
+
             return promise;
         },
         on<E extends AgentEventType>(event: E, handler: (payload: ChatEventMap[E]) => void): () => void {
             const handlers = eventHandlers.get(event) ?? new Set();
             eventHandlers.set(event, handlers);
             handlers.add(handler);
+
             return () => {
                 handlers.delete(handler);
             };
         },
         subscribeStatus(handler: (status: ChatTransportStatus) => void): () => void {
             statusHandlers.add(handler);
+
             return () => {
                 statusHandlers.delete(handler);
             };
@@ -127,13 +156,16 @@ export function portTransport(port: FramePort): PortTransport {
             if (status === 'closed') {
                 return;
             }
+
             status = 'closed';
             stopListening();
             const waiting = [...pending.values()];
             pending.clear();
+
             for (const entry of waiting) {
                 entry.reject(new ChatTransportError('disconnected', i18next.t('agent-chat:transport.closedBeforeAnswer')));
             }
+
             for (const handler of [...statusHandlers]) {
                 handler(status);
             }

package/src/prompts/index.ts

@@ -2,6 +2,7 @@
 export { focusPromptStart } from './logic/focus';
 export { PROMPT_SHORTCUTS, pageKey, type PromptKeyEvent } from './logic/keys';
 export { type PendingPrompt, type PromptAction, emptyPromptDraft, orderPrompts, type PromptAnswer, type PromptDraft } from './logic/prompts';
+
 export {
     type HostPrompt,
     type PromptSubject,
@@ -13,6 +14,7 @@ export {
     isBlockingSubject,
     answerPrompt
 } from './logic/subjects';
+
 export { useFocusAfterAnswer, type FocusAfterAnswer } from './logic/useFocusAfterAnswer';
 export { usePromptSession, type PromptSession } from './logic/usePromptSession';
 export { PromptPrimary, ApprovalActions, type ApprovalButton } from './ui/PromptActions';

package/src/prompts/logic/focus.ts

@@ -5,15 +5,19 @@
  */
 export function focusPromptStart(root: ParentNode | null | undefined): boolean {
     const card = root?.querySelector<HTMLElement>('.prompt-card');
+
     if (!card) {
         return false;
     }
+
     const start =
         card.querySelector<HTMLElement>('[data-prompt-entry]:not(:disabled)') ??
         card.querySelector<HTMLElement>('[role="toolbar"] button:not(:disabled):not([data-prompt-primary]):not([data-prompt-lasting])') ??
         card.querySelector<HTMLElement>('[data-prompt-primary]:not(:disabled)') ??
         card.querySelector<HTMLElement>('.prompt-heading');
+
     start?.focus({ preventScroll: true });
+
     return start !== null;
 }
 
@@ -21,5 +25,6 @@ export function focusPromptStart(root: ParentNode | null | undefined): boolean {
 export function focusPromptHeading(root: ParentNode | null | undefined): boolean {
     const heading = root?.querySelector<HTMLElement>('.prompt-card .prompt-heading');
     heading?.focus({ preventScroll: true });
+
     return !!heading;
 }

package/src/prompts/logic/keys.ts

@@ -30,6 +30,7 @@ export function stepIndex(index: number, count: number, to: ListStep): number {
     if (count === 0) {
         return -1;
     }
+
     switch (to) {
         case 'first':
             return 0;
@@ -50,19 +51,25 @@ export function choiceKey(event: PromptKeyEvent, { multiSelect, anyChosen }: { m
     if (!isPlain(event)) {
         return null;
     }
+
     const step = LIST_KEYS[event.key];
+
     if (step) {
         return { kind: 'move', to: step };
     }
+
     if (event.code === 'Space') {
         return { kind: 'pick' };
     }
+
     if (event.key === 'Enter') {
         if (!multiSelect) {
             return { kind: 'pick-and-commit' };
         }
+
         return anyChosen ? { kind: 'commit' } : { kind: 'pick' };
     }
+
     return null;
 }
 
@@ -74,13 +81,16 @@ export function answerFieldKey(
     if (!isPlain(event)) {
         return null;
     }
+
     if (event.key === 'ArrowUp' && belowChoices && caretAtStart) {
         return { kind: 'to-last-choice' };
     }
+
     if (event.key === 'Enter') {
         // An empty answer is not sent, and an empty line in front of the answer is never what Enter meant.
         return hasText ? { kind: 'commit' } : { kind: 'ignore' };
     }
+
     return null;
 }
 
@@ -101,9 +111,11 @@ export function pageKey(event: PromptKeyEvent, apple: boolean, typing: boolean):
     if (typing || event.isComposing) {
         return null;
     }
+
     if (matchesShortcut(PROMPT_SHORTCUTS.previousPrompt, event, apple)) {
         return -1;
     }
+
     return matchesShortcut(PROMPT_SHORTCUTS.nextPrompt, event, apple) ? 1 : null;
 }
 

package/src/prompts/logic/prompts.ts

@@ -2,17 +2,20 @@ import type { ChatApprovalItem, ChatQuestionItem, ChatQuestion } from '@adecore/
 import { toggleChoice } from '../../chat/logic/answers';
 
 export type PendingPrompt = ChatApprovalItem | ChatQuestionItem;
+
 export type PromptAction =
     | { kind: 'approve'; decision: 'allow' | 'allow-always' | 'deny'; message?: string }
     | { kind: 'answer'; answers: Record<string, string> }
     | { kind: 'dismiss' }
     // A terminal's permission request, answered with one of the choices the host offered.
     | { kind: 'choose'; choiceId: string };
+
 export interface PromptAnswer {
     choices: string[];
     text: string;
     custom: boolean;
 }
+
 export interface PromptDraft {
     index: number;
     answers: Record<string, PromptAnswer>;
@@ -23,9 +26,11 @@ export interface PromptDraft {
 export function emptyPromptDraft(): PromptDraft {
     return { index: 0, answers: {}, reason: '', showReason: false };
 }
+
 export function answerValue(answer: PromptAnswer): string {
     return answer.custom ? answer.text.trim() : answer.choices.join(', ');
 }
+
 export function questionAnswer(draft: PromptDraft, question: ChatQuestion): PromptAnswer {
     return draft.answers[question.id] ?? { choices: [], text: '', custom: question.choices.length === 0 };
 }
@@ -46,13 +51,16 @@ export function orderPrompts<T>(prompts: readonly T[], blocking: (prompt: T) =>
 
 export function nextPrompt(items: readonly PendingPrompt[], activeId: string | null): PendingPrompt | null {
     const active = items.find((item) => item.requestId === activeId);
+
     if (active) {
         return active;
     }
+
     return orderPrompts(items, isBlockingPrompt, (item) => item.createdAt)[0] ?? null;
 }
 
 export function promptAnswers(item: ChatQuestionItem, draft: PromptDraft): Record<string, string> | null {
     const answers = Object.fromEntries(item.questions.map((question) => [question.id, answerValue(questionAnswer(draft, question))]));
+
     return Object.values(answers).every((answer) => answer !== '') ? answers : null;
 }

package/src/prompts/logic/subjects.ts

@@ -78,8 +78,10 @@ export function approvalButtons(subject: PromptSubject, reason: string): Approva
     if (subject.kind !== 'chat' || subject.item.kind !== 'approval') {
         return [];
     }
+
     const { item } = subject;
     const message = reason.trim();
+
     return [
         ...(item.canAllowAlways && item.allowAlways
             ? [
@@ -116,18 +118,24 @@ export async function answerPrompt(
     if (subject.kind === 'host') {
         return host.prompts.answer(subject.prompt, action);
     }
+
     if (chat === null) {
         throw new Error(i18next.t('agent-prompts:error.notConnected'));
     }
+
     const { item, nodeId } = subject;
+
     if (action.kind === 'approve') {
         return chat.approve(nodeId, item.requestId, action.decision, action.message);
     }
+
     if (action.kind === 'answer') {
         return chat.answer(nodeId, item.requestId, action.answers);
     }
+
     if (action.kind === 'dismiss') {
         return chat.dismiss(nodeId, item.id);
     }
+
     throw new Error(i18next.t('agent-prompts:error.noChoices'));
 }

package/src/prompts/logic/useFocusAfterAnswer.ts

@@ -19,7 +19,9 @@ export function useFocusAfterAnswer(activeId: string | null, container: RefObjec
         if (!pending.current) {
             return;
         }
+
         pending.current = false;
+
         if (!focusPromptStart(container.current)) {
             onEmpty();
         }

package/src/prompts/logic/usePromptSession.ts

@@ -1,4 +1,5 @@
 import { useRef, useState, type MouseEvent } from 'react';
+import { errorMessage } from '../../transport';
 import { emptyPromptDraft, type PromptDraft } from './prompts';
 
 interface PromptSessionOptions<T> {
@@ -42,13 +43,16 @@ export function usePromptSession<T>({ prompts, idOf, pick, disabled }: PromptSes
     const busy = useRef(false);
     const pressedRequest = useRef<string | null>(null);
     const stillCompleted = completed.filter((id) => prompts.some((prompt) => idOf(prompt) === id));
+
     if (stillCompleted.length !== completed.length) {
         setCompleted(stillCompleted);
     }
+
     const waiting = prompts.filter((prompt) => !completed.includes(idOf(prompt)));
     const active = pick(waiting, activeId, activeIndex);
     const activeKey = active === null ? null : idOf(active);
     const index = active === null ? 0 : waiting.indexOf(active);
+
     if (index !== activeIndex) {
         setActiveIndex(index);
     }
@@ -60,32 +64,40 @@ export function usePromptSession<T>({ prompts, idOf, pick, disabled }: PromptSes
 
     const finish = (id: string) => {
         setCompleted((current) => [...current, id]);
+
         setDrafts((current) => {
             const next = { ...current };
             delete next[id];
+
             return next;
         });
     };
+
     const act = async (prompt: T, send: () => Promise<void>): Promise<'sent' | 'failed' | 'busy'> => {
         if (busy.current || disabled) {
             return 'busy';
         }
+
         const id = idOf(prompt);
         busy.current = true;
         setSending(true);
         setError(null);
+
         try {
             await send();
             finish(id);
+
             return 'sent';
         } catch (cause) {
-            setError({ id, message: cause instanceof Error ? cause.message : String(cause) });
+            setError({ id, message: errorMessage(cause) });
+
             return 'failed';
         } finally {
             busy.current = false;
             setSending(false);
         }
     };
+
     return {
         active,
         activeId: activeKey,

package/src/prompts/ui/ApprovalBody.tsx

@@ -32,6 +32,7 @@ function ApprovalDetails({ item }: { item: ChatApprovalItem }) {
     const input = typeof item.input === 'object' && item.input !== null ? (item.input as Record<string, unknown>) : {};
     // Some agents describe a command by the command itself, which the box under it already shows.
     const describes = item.description && item.description.trim() !== (typeof input.command === 'string' ? input.command.trim() : null);
+
     return (
         <>
             {describes && <p className="text-sm text-text-muted">{item.description}</p>}
@@ -82,6 +83,7 @@ export function ApprovalBody({
     const host = useChatHost();
     const { t } = useTranslation('agent-prompts');
     const AnswerField = host.dictation.Textarea;
+
     return (
         <>
             <ApprovalDetails item={item} />

package/src/prompts/ui/PromptActions.tsx

@@ -32,6 +32,7 @@ export function ApprovalActions({
     sending: boolean;
 }) {
     const { t } = useTranslation('agent-prompts');
+
     return (
         <>
             {onAddReason && (
@@ -87,6 +88,7 @@ export function QuestionActions({
     onCommit(): void;
 }) {
     const { t } = useTranslation(['agent-prompts', 'agent-chat']);
+
     return (
         <>
             {index > 0 && (

package/src/prompts/ui/PromptCard.tsx

@@ -35,6 +35,7 @@ interface PromptCardProps {
 function onCardKeyDown(event: KeyboardEvent<HTMLDivElement>, apple: boolean) {
     const card = event.currentTarget;
     const target = event.target instanceof HTMLElement ? event.target : null;
+
     if (!event.defaultPrevented) {
         if (isPrimaryKey(event.nativeEvent, apple)) {
             event.preventDefault();
@@ -46,6 +47,7 @@ function onCardKeyDown(event: KeyboardEvent<HTMLDivElement>, apple: boolean) {
         } else {
             const toolbar = target?.closest('[role="toolbar"]');
             const step = toolbar ? toolbarKey(event.nativeEvent) : null;
+
             if (toolbar && step !== null) {
                 event.preventDefault();
                 const buttons = [...toolbar.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')];
@@ -54,6 +56,7 @@ function onCardKeyDown(event: KeyboardEvent<HTMLDivElement>, apple: boolean) {
             }
         }
     }
+
     if (event.defaultPrevented || staysInCard(event.nativeEvent)) {
         event.stopPropagation();
     }
@@ -63,6 +66,7 @@ function onCardKeyDown(event: KeyboardEvent<HTMLDivElement>, apple: boolean) {
 export function PromptCard({ kind, heading, meta, top, actions, busy, notice, error, children }: PromptCardProps) {
     const { t } = useTranslation('agent-prompts');
     const { isApplePlatform } = useChatHost();
+
     const card = (
         <div
             className="prompt-card flex min-h-0 flex-col gap-2 p-3"
@@ -96,9 +100,11 @@ export function PromptCard({ kind, heading, meta, top, actions, busy, notice, er
             </div>
         </div>
     );
+
     if (top === undefined) {
         return card;
     }
+
     return (
         <div className="flex min-h-0 flex-col">
             {top}