@adecore/agents-react 0.39.0 → 0.40.0

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/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}

package/src/prompts/ui/PromptView.tsx

@@ -26,23 +26,29 @@ export function PromptView(props: PromptViewProps) {
     const question = item.kind === 'question' ? item.questions[Math.min(draft.index, item.questions.length - 1)]! : null;
     const answer = question ? questionAnswer(draft, question) : null;
     const last = item.kind === 'question' && draft.index === item.questions.length - 1;
+
     // Whether Next or Answer may go with this draft. The keys ask it as well as the button.
     const readyWith = (next: PromptDraft): boolean =>
         item.kind === 'question' && !!question && !!answerValue(questionAnswer(next, question)) && !(last && !promptAnswers(item, next));
+
     const commit = (next: PromptDraft) => {
         if (item.kind !== 'question' || locked || !readyWith(next)) {
             return;
         }
+
         if (!last) {
             onDraft({ ...next, index: next.index + 1 });
         } else {
             const answers = promptAnswers(item, next);
+
             if (answers) {
                 onAction({ kind: 'answer', answers });
             }
         }
     };
+
     const multiple = item.kind === 'question' && item.questions.length > 1;
+
     const meta =
         subject.source !== undefined || more > 0 || hasDraft || multiple ? (
             <>

package/src/prompts/ui/QuestionBody.tsx

@@ -38,7 +38,9 @@ export function QuestionBody({
         if (shownQuestion.current === question.id) {
             return;
         }
+
         shownQuestion.current = question.id;
+
         if (document.activeElement === null || document.activeElement === document.body) {
             (items.current[tabStop] ?? items.current[0])?.focus({ preventScroll: true });
         }
@@ -49,10 +51,13 @@ export function QuestionBody({
             multiSelect: question.multiSelect,
             anyChosen: !answer.custom && answer.choices.length > 0
         });
+
         if (action === null) {
             return;
         }
+
         event.preventDefault();
+
         if (action.kind === 'move') {
             items.current[stepIndex(index, count, action.to)]?.focus();
         } else if (action.kind === 'commit') {
@@ -60,6 +65,7 @@ export function QuestionBody({
         } else {
             const next = pickPromptChoice(answer, question, label);
             onAnswer(next);
+
             if (action.kind === 'pick-and-commit') {
                 onCommit(next);
             }
@@ -68,15 +74,19 @@ export function QuestionBody({
 
     const onFieldKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
         const field = event.currentTarget;
+
         const action = answerFieldKey(event.nativeEvent, {
             belowChoices: question.choices.length > 0,
             caretAtStart: field.selectionStart === 0 && field.selectionEnd === 0,
             hasText: field.value.trim() !== ''
         });
+
         if (action === null) {
             return;
         }
+
         event.preventDefault();
+
         if (action.kind === 'to-last-choice') {
             items.current[question.choices.length - 1]?.focus();
         } else if (action.kind === 'commit') {
@@ -91,6 +101,7 @@ export function QuestionBody({
                 <div role={question.multiSelect ? 'group' : 'radiogroup'} aria-label={question.question} className="flex flex-col gap-2">
                     {question.choices.map((choice, index) => {
                         const selected = !answer.custom && answer.choices.includes(choice.label);
+
                         return (
                             <button
                                 key={choice.label}

package/src/providers/AccountColors.tsx

@@ -4,5 +4,6 @@ import { useChatHost } from '../host';
 /* The colors an account may wear, the host's palette. */
 export function AccountColors({ value, label, onChange }: { value: string | undefined; label: string; onChange(id: string): void }) {
     const { all, featured, label: labelOf } = useChatHost().accents;
+
     return <AccentSwatches value={value} label={label} accents={all} featured={featured} labelOf={labelOf} onValueChange={onChange} />;
 }

package/src/providers/AccountDetail.tsx

@@ -32,14 +32,19 @@ interface AccountDetailProps {
 /* The name a person types, saved when they leave the field; an empty one goes back to what was there. */
 function NameField({ value, label, onSave }: { value: string; label: string; onSave(name: string): void }) {
     const [draft, setDraft] = useState(value);
+
     const commit = (): void => {
         const name = draft.trim();
+
         if (name === '' || name === value) {
             setDraft(value);
+
             return;
         }
+
         onSave(name);
     };
+
     return (
         <Input
             className="w-55 max-w-full"
@@ -80,9 +85,11 @@ export function AccountDetail({ provider, entry, login, canOpenLogin, loginBlock
         if (trouble !== null) {
             return trouble;
         }
+
         if (!signedIn) {
             return t('account.login.signedOutDetail');
         }
+
         return status?.plan ? t('account.login.planDetail', { plan: status.plan }) : t('account.login.detail');
     };