@adecore/agents-react 0.39.0 → 0.40.1

package/src/chat/ui/composer/use-draft-files.ts

@@ -54,9 +54,11 @@ export function useDraftFiles({
     /* Paths dragged in from a list of files. With no mention query to insert into, they land at the end of the prompt. */
     const addMentions = (paths: string[]): void => {
         const fresh = paths.filter((path) => path !== '');
+
         if (fresh.length === 0 || capabilities?.mentions === false) {
             return;
         }
+
         const appended = fresh.map((path) => `@${path}`).join(' ');
         const before = draft.text.replace(/\s+$/, '');
         setText(before === '' ? `${appended} ` : `${before} ${appended} `, [...draft.mentions, ...fresh.filter((path) => !draft.mentions.includes(path))]);
@@ -66,21 +68,27 @@ export function useDraftFiles({
         if (incoming.length === 0) {
             return;
         }
+
         if (capabilities?.attachments === false) {
             setNotice(t('composer.notice.noAttachments', { agent: providerName ?? t('composer.notice.thisAgent') }));
+
             return;
         }
+
         const checked = checkAttachmentLimits(
             draft.attachments.length,
             incoming.map((file) => ({ name: file.name, mime: file.type, bytes: file.size, file })),
             draft.attachments.reduce((bytes, attachment) => bytes + uploadBytes(attachment), 0)
         );
+
         if (checked.rejected[0]) {
             setNotice(t('composer.notice.rejected', { name: checked.rejected[0].name || t('composer.notice.thatFile'), reason: checked.rejected[0].reason }));
         }
+
         if (checked.accepted.length === 0) {
             return;
         }
+
         readAttachments(checked.accepted.map((entry) => entry.file))
             .then((attachments) => setDraft((current) => ({ ...current, attachments: [...current.attachments, ...attachments] })))
             .catch(() => setNotice(t('composer.notice.unreadable')));
@@ -94,24 +102,32 @@ export function useDraftFiles({
     /* Files become attachments and a long text a file of its own; anything else the editor pastes as plain text. */
     const onPaste = (e: ClipboardEvent, view: EditorView): boolean => {
         const data = e.clipboardData;
+
         if (!data) {
             return false;
         }
+
         const pasted = filesOf(data);
+
         if (pasted.length > 0) {
             addFiles(pasted);
+
             return true;
         }
+
         const inline = pasteInline.current;
         pasteInline.current = false;
         const clip = data.getData('text/plain');
         const mentions = capabilities?.mentions === false ? [] : pastedMentions(clip);
+
         if (mentions.length > 0) {
             // The editor's own change reads the draft as it was rendered, so the mentions join it after that change.
             view.dispatch(view.state.replaceSelection(clip), { scrollIntoView: true, userEvent: 'input.paste' });
             setDraft((current) => ({ ...current, mentions: [...current.mentions, ...mentions.filter((path) => !current.mentions.includes(path))] }));
+
             return true;
         }
+
         // Without attachments there is nowhere else for the text to go, so it pastes as it always did.
         if (inline || capabilities?.attachments === false || !pasteBecomesAttachment(clip)) {
             const choices: PasteChoices = {
@@ -120,21 +136,29 @@ export function useDraftFiles({
                 referenced: [...draft.chats, ...draft.references],
                 mentions: capabilities?.mentions !== false
             };
+
             const chips = pasteWithChips(view, clip, readClipboardChips(data), choices);
+
             if (chips === null) {
                 return false;
             }
+
             // After the editor's own change, which reads the draft as it was rendered.
             setDraft((current) => withPastedChips(current, chips, choices));
+
             return true;
         }
+
         // The paste still replaces what was selected; it just puts nothing in its place.
         const { from, to } = view.state.selection.main;
+
         if (from !== to) {
             view.dispatch({ changes: { from, to }, userEvent: 'delete' });
         }
+
         const name = pastedTextName(draft.attachments.map((attachment) => attachment.name));
         addFiles([new File([clip], name, { type: 'text/plain' })]);
+
         return true;
     };
 

package/src/chat/ui/composer/use-effort-stepper.ts

@@ -27,12 +27,16 @@ export function useEffortStepper({ chatId, info, model, writable, controls, setN
         if (!writable || controls.configurationPending) {
             return;
         }
+
         const name = model?.name ?? info.selection.model;
         const result = stepEffort(model, info.selection, direction);
+
         if (result.kind === 'none') {
             setNotice(t('composer.notice.noEffort', { model: name }), 'info');
+
             return;
         }
+
         if (result.kind === 'edge') {
             setNotice(
                 t(direction === 'up' ? 'composer.notice.effortHighest' : 'composer.notice.effortLowest', {
@@ -41,16 +45,20 @@ export function useEffortStepper({ chatId, info, model, writable, controls, setN
                 }),
                 'info'
             );
+
             return;
         }
+
         controls.configure({ selection: result.selection });
         setNotice(t('composer.notice.effort', { effort: choiceWord(EFFORT_OPTION, result.choice) }), 'info');
     };
 
     // A command means the chat as it stands when it is given, so the registration reads the latest step.
     const stepRef = useRef(step);
+
     useEffect(() => {
         stepRef.current = step;
     });
+
     useEffect(() => registerEffortStepper(scope.keyOf(chatId), (direction) => stepRef.current(direction)), [scope, chatId]);
 }

package/src/chat/ui/composer/use-notice.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { errorMessage } from '../../../transport';
 
 const NOTICE_MS = 4000;
 
@@ -20,7 +21,9 @@ export function useNotice(): ComposerNotice {
         if (!shown) {
             return;
         }
+
         const timer = setTimeout(() => setShown(null), NOTICE_MS);
+
         return () => clearTimeout(timer);
     }, [shown]);
 
@@ -30,6 +33,6 @@ export function useNotice(): ComposerNotice {
         notice: shown?.text ?? null,
         tone: shown?.tone ?? 'error',
         setNotice,
-        showError: (error) => setNotice(error instanceof Error ? error.message : String(error))
+        showError: (error) => setNotice(errorMessage(error))
     };
 }

package/src/chat/ui/composer/use-pending-requests.ts

@@ -6,10 +6,13 @@ import { ChatPromptFeed } from '../../pending-prompts';
 export function usePendingRequests(chatId: string): PromptSubject[] {
     const scope = useChatScope();
     const [subjects, setSubjects] = useState<PromptSubject[]>([]);
+
     useEffect(() => {
         const feed = new ChatPromptFeed(scope, chatId, setSubjects);
         feed.start();
+
         return () => feed.dispose();
     }, [scope, chatId]);
+
     return subjects;
 }

package/src/chat/ui/composer/use-prompt-history.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { useChatRow } from '../../../state/chats';
 
 // How many sent prompts the arrow keys walk back through, per chat.
@@ -23,33 +23,40 @@ export function usePromptHistory(chatId: string, setText: (next: string, mention
     const items = useChatRow(chatId, (row) => row?.structure);
     const [index, setIndex] = useState<number | null>(null);
 
-    const history = useMemo(() => {
-        const prompts: Array<{ text: string; mentions: string[] }> = [];
-        for (const id of order ?? []) {
-            const item = items?.[id];
-            if (item?.kind === 'user') {
-                prompts.push({ text: item.text, mentions: item.mentions ?? [] });
-            }
+    const prompts: Array<{ text: string; mentions: string[] }> = [];
+
+    for (const id of order ?? []) {
+        const item = items?.[id];
+
+        if (item?.kind === 'user') {
+            prompts.push({ text: item.text, mentions: item.mentions ?? [] });
         }
-        // Walking back further than this is faster with the timeline than with the arrow key.
-        return prompts.slice(-PROMPT_HISTORY);
-    }, [order, items]);
+    }
+
+    // Walking back further than this is faster with the timeline than with the arrow key.
+    const history = prompts.slice(-PROMPT_HISTORY);
 
     const recall = (direction: -1 | 1): boolean => {
         if (history.length === 0) {
             return false;
         }
+
         const next = index === null ? (direction === -1 ? history.length - 1 : null) : index + direction;
+
         if (next === null || next >= history.length) {
             setIndex(null);
             setText('', [], []);
+
             return true;
         }
+
         if (next < 0) {
             return true;
         }
+
         setIndex(next);
         setText(history[next]!.text, history[next]!.mentions);
+
         return true;
     };
 
@@ -57,8 +64,10 @@ export function usePromptHistory(chatId: string, setText: (next: string, mention
         if (index === null) {
             return false;
         }
+
         setIndex(null);
         setText('', [], []);
+
         return true;
     };
 

package/src/chat/ui/composer/use-prompt-hold.ts

@@ -31,6 +31,7 @@ export function usePromptHold(): ComposerPromptHold {
     const schedule = (): void => {
         clearTimer();
         const wait = holdLiftsIn({ typedAt: typedAt.current, composing: composing.current }, Date.now());
+
         if (wait !== null) {
             timer.current = setTimeout(() => release('pause'), wait);
         }
@@ -44,11 +45,13 @@ export function usePromptHold(): ComposerPromptHold {
 
     const setComposing = (next: boolean): void => {
         composing.current = next;
+
         if (next) {
             setState({ held: true, releasedBy: null });
         } else {
             typedAt.current = Date.now();
         }
+
         schedule();
     };
 

package/src/chat/ui/composer/use-prompt-menus.ts

@@ -1,4 +1,4 @@
-import { useEffect, useId, useMemo, useState, type Dispatch, type RefObject, type SetStateAction } from 'react';
+import { useEffect, useId, useState, type Dispatch, type RefObject, type SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
 import type { EditorState } from '@codemirror/state';
@@ -108,11 +108,14 @@ export function usePromptMenus<D extends PromptDraft>({
         if (mention === null || cwd === null) {
             return;
         }
+
         let stale = false;
+
         const search = (): void => {
             if (searchFiles === null) {
                 return;
             }
+
             searchFiles(scope.id, cwd, mention.query, MENTION_RESULTS)
                 .then((files) => {
                     if (!stale) {
@@ -122,14 +125,18 @@ export function usePromptMenus<D extends PromptDraft>({
                 })
                 .catch(() => undefined);
         };
+
         // A bare `@` is not a keystroke in a query. It opens the list of what is there, at once.
         if (mention.query === '') {
             search();
+
             return () => {
                 stale = true;
             };
         }
+
         const timer = setTimeout(search, SEARCH_DEBOUNCE_MS);
+
         return () => {
             stale = true;
             clearTimeout(timer);
@@ -137,14 +144,13 @@ export function usePromptMenus<D extends PromptDraft>({
     }, [scope, cwd, mention, searchFiles]);
 
     const commandQuery = text.startsWith('/') && !text.includes('\n') ? text.slice(1).trim().toLowerCase() : null;
-    const commands = useMemo((): ComposerCommand[] => {
-        if (commandQuery === null) {
-            return [];
-        }
+
+    const commandsOf = (query: string): ComposerCommand[] => {
         const known = new Set(skills.map((skill) => skill.name));
         const own = localCommands.map((name) => ({ name, hint: t(`composer.commands.${name}`), local: true, skill: false }));
         // Every CLI with goals reads `/goal`, also one that lists no commands of its own.
         const goal = goals ? [{ name: 'goal', hint: t('composer.commands.goal'), local: false, skill: false }] : [];
+
         const cli = usableSlashCommands([...slashCommands])
             .filter((name) => !localCommands.includes(name) && (!goals || name !== 'goal'))
             .map((name) => ({
@@ -153,16 +159,12 @@ export function usePromptMenus<D extends PromptDraft>({
                 local: false,
                 skill: known.has(name)
             }));
-        return [...own, ...goal, ...cli].filter((command) => command.name.startsWith(commandQuery)).slice(0, 8);
-    }, [commandQuery, goals, localCommands, slashCommands, providerName, skills, t]);
 
-    const skillMatches = useMemo(() => {
-        if (skillQuery === null) {
-            return [];
-        }
-        const query = skillQuery.query.toLowerCase();
-        return skills.filter((skill) => skill.name.toLowerCase().includes(query)).slice(0, 8);
-    }, [skillQuery, skills]);
+        return [...own, ...goal, ...cli].filter((command) => command.name.startsWith(query)).slice(0, 8);
+    };
+
+    const commands = commandQuery === null ? [] : commandsOf(commandQuery);
+    const skillMatches = skillQuery === null ? [] : skills.filter((skill) => skill.name.toLowerCase().includes(skillQuery.query.toLowerCase())).slice(0, 8);
 
     const commandMenuOpen = commandQuery !== null && commands.length > 0;
     const skillMenuOpen = !commandMenuOpen && skillQuery !== null && skillMatches.length > 0;
@@ -175,11 +177,13 @@ export function usePromptMenus<D extends PromptDraft>({
     const referenceMenuOpen = !commandMenuOpen && !skillMenuOpen && !mentionMenuOpen && referenceQuery !== null && offersReferences;
     const excluded = ownId === undefined ? [...draft.chats, ...draft.references] : [ownId, ...draft.chats, ...draft.references];
     const referenceMatches = referenceMenuOpen ? referenceSuggestions(referables, referenceQuery.query, excluded, REFERENCE_RESULTS) : [];
+
     // What the editor draws as chips and the send checks are still in the text, under the name each was picked with.
     const referenceChips = referenceTokens([...draft.chats, ...draft.references], referables.items, draft.referenceNames).map((token) => ({
         ...token,
         kind: referables.items.find((item) => item.id === token.id)?.kind ?? null
     }));
+
     // One menu is open at a time, so they share an id.
     const listId = useId();
     const menuOpen = commandMenuOpen || skillMenuOpen || mentionMenuOpen || referenceMenuOpen;
@@ -218,6 +222,7 @@ export function usePromptMenus<D extends PromptDraft>({
         if (!mention) {
             return;
         }
+
         const result = insertMention(text, mention, path);
         setText(result.text, draft.mentions.includes(path) ? draft.mentions : [...draft.mentions, path]);
         setMention(null);
@@ -226,6 +231,7 @@ export function usePromptMenus<D extends PromptDraft>({
 
     const chooseMentionAt = (index: number): void => {
         const path = mention === null ? null : mentionPick(index, searched, mention.query);
+
         if (path !== null) {
             chooseMention(path);
         }
@@ -239,9 +245,12 @@ export function usePromptMenus<D extends PromptDraft>({
         if (!referenceQuery) {
             return;
         }
+
         const result = insertReference(text, referenceQuery, item.name);
         const chat = item.kind === 'chat';
+
         const add = (ids: string[]): string[] => (ids.includes(item.id) ? ids : [...ids, item.id]);
+
         setDraft((current) => ({
             ...current,
             text: result.text,
@@ -249,12 +258,14 @@ export function usePromptMenus<D extends PromptDraft>({
             references: chat ? current.references : add(current.references),
             referenceNames: { ...current.referenceNames, [item.id]: item.name }
         }));
+
         setReferenceQuery(null);
         moveCaret(result.caret);
     };
 
     const chooseReferenceAt = (index: number): void => {
         const item = referenceMatches[index] ?? referenceMatches[0];
+
         if (item !== undefined) {
             chooseReference(item);
         }
@@ -274,10 +285,13 @@ export function usePromptMenus<D extends PromptDraft>({
     /* A clicked command; Tab completes one with a space after it instead. */
     const pickCommand = (command: ComposerCommand, index: number): void => {
         setMenuIndex(index);
+
         if (command.skill) {
             chooseSkill(command.name);
+
             return;
         }
+
         setText(`/${command.name}`);
         inputRef.current?.focus();
     };
@@ -286,8 +300,10 @@ export function usePromptMenus<D extends PromptDraft>({
     const completeCommand = (command: ComposerCommand): void => {
         if (command.skill) {
             chooseSkill(command.name);
+
             return;
         }
+
         setText(`/${command.name} `);
     };
 
@@ -295,12 +311,16 @@ export function usePromptMenus<D extends PromptDraft>({
     const moveInMenu = (key: string, count: number): boolean => {
         if (key === 'ArrowDown') {
             setMenuIndex((i) => (i + 1) % count);
+
             return true;
         }
+
         if (key === 'ArrowUp') {
             setMenuIndex((i) => (i - 1 + count) % count);
+
             return true;
         }
+
         return false;
     };
 

package/src/chat/ui/composer/use-take-back.ts

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import type { ChatAttachmentUpload, ChatQueuedMessage } from '@adecore/agent-contracts';
 import { useChatHost } from '../../../host';
 import { useChatScope } from '../../../scope';
-import { errorCode } from '../../../transport';
+import { errorCode, errorMessage } from '../../../transport';
 import { useChatActions } from '../../actions';
 import { readStoredAttachments } from '../../attachments';
 import { takeBackIntoDraft, type ChatDraft } from '../../drafts';
@@ -33,26 +33,36 @@ export function useTakeBack({ chatId, draft: { latest, setDraft }, setNotice, on
         if (takingBack !== null) {
             return;
         }
+
         const failed = (e: unknown): void => {
-            host.notify({ kind: 'error', title: t('composer.queue.editFailed'), description: e instanceof Error ? e.message : String(e) });
+            host.notify({ kind: 'error', title: t('composer.queue.editFailed'), description: errorMessage(e) });
         };
+
         const readFiles = async (): Promise<ChatAttachmentUpload[]> => {
             const stored = message.attachments ?? [];
+
             if (stored.length === 0) {
                 return [];
             }
+
             const files = host.attachments;
+
             return readStoredAttachments((attachment) => files.read(scope.id, chatId, attachment.id), stored);
         };
+
         setTakingBack(message.id);
+
         try {
             let uploads: ChatAttachmentUpload[];
+
             try {
                 uploads = await readFiles();
             } catch (e) {
                 failed(e);
+
                 return;
             }
+
             const taken: Omit<ChatDraft, 'quote' | 'quoteSource'> = {
                 text: message.text,
                 mentions: message.mentions ?? [],
@@ -61,12 +71,16 @@ export function useTakeBack({ chatId, draft: { latest, setDraft }, setNotice, on
                 attachments: uploads,
                 references: message.references ?? []
             };
+
             // A file that would not fit is refused here, while the message still holds it on the machine.
             const wouldReject = takeBackIntoDraft(latest.current, taken).rejected[0];
+
             if (wouldReject) {
                 setNotice(t('composer.notice.queuedDoesNotFit', { name: wouldReject.name || t('composer.notice.thatFile'), reason: wouldReject.reason }));
+
                 return;
             }
+
             try {
                 await actions.unqueue(chatId, message.id);
             } catch (e) {
@@ -75,13 +89,17 @@ export function useTakeBack({ chatId, draft: { latest, setDraft }, setNotice, on
                 } else {
                     failed(e);
                 }
+
                 return;
             }
+
             const merged = takeBackIntoDraft(latest.current, taken);
             setDraft(merged.draft);
+
             if (merged.rejected[0]) {
                 setNotice(t('composer.notice.rejected', { name: merged.rejected[0].name, reason: merged.rejected[0].reason }));
             }
+
             onTaken();
         } finally {
             setTakingBack(null);

package/src/chat/ui/diff/ApprovalReview.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
@@ -9,23 +9,26 @@ export function ApprovalReview({ entries, maxHeight }: { entries: readonly Revie
     const { t } = useTranslation('agent-prompts');
     const [selected, setSelected] = useState<string | null>(null);
     const active = entries.find((entry) => entry.key === selected) ?? entries[0];
-    const labels = useMemo(() => {
-        const totals = new Map<string, number>();
-        const counts = new Map<string, number>();
-        for (const entry of entries) {
-            totals.set(entry.path, (totals.get(entry.path) ?? 0) + 1);
-        }
-        return entries.map((entry) => {
-            const count = (counts.get(entry.path) ?? 0) + 1;
-            counts.set(entry.path, count);
-            const total = totals.get(entry.path)!;
-            const suffix = total > 1 ? ` (${formatNumber(count)}/${formatNumber(total)})` : '';
-            return { short: `${entry.path.split(/[\\/]/).at(-1)}${suffix}`, full: `${entry.path}${suffix}` };
-        });
-    }, [entries]);
+    const totals = new Map<string, number>();
+    const counts = new Map<string, number>();
+
+    for (const entry of entries) {
+        totals.set(entry.path, (totals.get(entry.path) ?? 0) + 1);
+    }
+
+    const labels = entries.map((entry) => {
+        const count = (counts.get(entry.path) ?? 0) + 1;
+        counts.set(entry.path, count);
+        const total = totals.get(entry.path)!;
+        const suffix = total > 1 ? ` (${formatNumber(count)}/${formatNumber(total)})` : '';
+
+        return { short: `${entry.path.split(/[\\/]/).at(-1)}${suffix}`, full: `${entry.path}${suffix}` };
+    });
+
     if (active === undefined) {
         return null;
     }
+
     return (
         <div>
             {entries.length > 1 && (

package/src/chat/ui/diff/DiffFallbackBoundary.tsx

@@ -23,6 +23,7 @@ export class DiffFallbackBoundary extends Component<Props, State> {
         if (state.resetKeys.length !== props.resetKeys.length || state.resetKeys.some((value, index) => !Object.is(value, props.resetKeys[index]))) {
             return { failed: false, resetKeys: props.resetKeys };
         }
+
         return null;
     }
 

package/src/chat/ui/diff/DiffOmitted.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 export function DiffOmitted({ path }: { path: string }) {
     useReviewSettled();
     const { t } = useTranslation('agent-chat');
+
     return (
         <div role="status" data-diff-omitted className="px-3 py-2 text-xs text-text-muted">
             <p className="truncate font-mono">{path}</p>

package/src/chat/ui/diff/DiffStack.tsx

@@ -7,6 +7,7 @@ import { useReviewStack, type ReviewStack } from './use-review-stack';
 
 export function ReviewStackView({ entries, stack }: { entries: readonly ReviewEntry[]; stack: ReviewStack }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <div data-review-stack>
             {entries.map((entry) => (
@@ -41,5 +42,6 @@ export function ReviewStackView({ entries, stack }: { entries: readonly ReviewEn
 
 export function DiffStack({ entries }: { entries: readonly ReviewEntry[] }) {
     const stack = useReviewStack(entries);
+
     return <ReviewStackView entries={entries} stack={stack} />;
 }

package/src/chat/ui/diff/DiffUnavailable.tsx

@@ -4,6 +4,7 @@ import { useReviewSettled } from './review-settle';
 export function DiffUnavailable({ path }: { path: string }) {
     useReviewSettled();
     const { t } = useTranslation('agent-chat');
+
     return (
         <div role="status" data-diff-unavailable className="px-3 py-2 text-xs text-text-muted">
             <p className="truncate font-mono">{path}</p>