@adecore/agents-react 0.38.0 → 0.40.0

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

@@ -1,48 +1,17 @@
-import { useEffect, useId, useMemo, useState, type RefObject } from 'react';
+import { useEffect, useState, type RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
-import type { EditorState } from '@codemirror/state';
 import type { ChatInfo, ChatSkill, ProviderCapabilities } from '@adecore/agent-contracts';
-import { useChatHost } from '../../../host';
 import { useChatScope } from '../../../scope';
-import { referenceSuggestions, referenceTokens, type Referable } from '../../chat-references';
-import { usableSlashCommands } from '../../guards';
-import {
-    chipRanges,
-    findMentionQuery,
-    findReferenceQuery,
-    findSkillQuery,
-    insertMention,
-    insertReference,
-    insertSkill,
-    mentionPick,
-    NO_MENTION_SEARCH,
-    queryOutsideChips,
-    type MentionQuery,
-    type MentionSearch,
-    type TextRange
-} from '../../mentions';
 import type { ComposerInputHandle } from '../ComposerInput';
 import type { ComposerDraft } from './use-composer-draft';
-import { inCode } from './keys';
-import { clampMenuIndex, composerMenuAria } from './menu-aria';
+import { usePromptMenus, type PromptMenus } from './use-prompt-menus';
 import { useHostReferables } from '../../../host-hooks';
 
-const SEARCH_DEBOUNCE_MS = 80;
-// What fits above the composer without turning the picker into a file tree.
-const MENTION_RESULTS = 8;
-const REFERENCE_RESULTS = 8;
+export type { ComposerCommand } from './use-prompt-menus';
 
 // Commands the composer handles itself; the CLI's own ones are sent through as text.
 export const LOCAL_COMMANDS = ['model', 'compact', 'clear'];
 
-export interface ComposerCommand {
-    name: string;
-    hint: string;
-    local: boolean;
-    skill: boolean;
-}
-
 interface MenusInput {
     chatId: string;
     info: ChatInfo;
@@ -52,62 +21,12 @@ interface MenusInput {
     inputRef: RefObject<ComposerInputHandle | null>;
 }
 
-function sameQuery(left: MentionQuery | null, right: MentionQuery | null): boolean {
-    return left?.start === right?.start && left?.query === right?.query;
-}
-
-/*
- * The pickers over the box: `/` for a command, `$` for a skill, `@` for a file and `#` for a view,
- * a node or another chat. One is open at a time, and the arrow keys and the editor's ARIA attributes
- * follow that one.
- */
-export function useComposerMenus({ chatId, info, capabilities, providerName, draft: { draft, setDraft, setText }, inputRef }: MenusInput) {
+/* The pickers over a chat's composer, fed by what the chat's CLI has: its skills, its commands and its folder. */
+export function useComposerMenus({ chatId, info, capabilities, providerName, draft, inputRef }: MenusInput): PromptMenus {
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
-    const host = useChatHost();
-    const { searchFiles } = host;
     const referables = useHostReferables(scope.id, chatId);
-    const [menuIndex, setMenuIndex] = useState(0);
-    const [mention, setMention] = useState<MentionQuery | null>(null);
-    const [referenceQuery, setReferenceQuery] = useState<MentionQuery | null>(null);
-    const [skillQuery, setSkillQuery] = useState<MentionQuery | null>(null);
     const [skills, setSkills] = useState<ChatSkill[]>([]);
-    const [searched, setSearched] = useState<MentionSearch>(NO_MENTION_SEARCH);
-    const text = draft.text;
-    const goals = capabilities?.goals;
-
-    // Every keystroke inside an `@word` searches again; a slow answer must not overwrite a newer one.
-    useEffect(() => {
-        if (mention === null) {
-            return;
-        }
-        let stale = false;
-        const search = (): void => {
-            if (searchFiles === null) {
-                return;
-            }
-            searchFiles(scope.id, info.cwd, mention.query, MENTION_RESULTS)
-                .then((files) => {
-                    if (!stale) {
-                        setSearched({ query: mention.query, files });
-                        setMenuIndex(0);
-                    }
-                })
-                .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);
-        };
-    }, [scope, info.cwd, mention, searchFiles]);
 
     /*
      * The host's skill list, once per chat, again once the CLI announced its own after the first message,
@@ -115,6 +34,7 @@ export function useComposerMenus({ chatId, info, capabilities, providerName, dra
      */
     useEffect(() => {
         let stale = false;
+
         scope.chats
             .listSkills(chatId)
             .then((found) => {
@@ -123,201 +43,26 @@ export function useComposerMenus({ chatId, info, capabilities, providerName, dra
                 }
             })
             .catch(() => undefined);
+
         return () => {
             stale = true;
         };
     }, [scope, chatId, info.skills, info.running]);
 
-    const commandQuery = text.startsWith('/') && !text.includes('\n') ? text.slice(1).trim().toLowerCase() : null;
-    const commands = useMemo((): ComposerCommand[] => {
-        if (commandQuery === null) {
-            return [];
-        }
-        const known = new Set(skills.map((skill) => skill.name));
-        const own = LOCAL_COMMANDS.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 === undefined ? [] : [{ name: 'goal', hint: t('composer.commands.goal'), local: false, skill: false }];
-        const cli = usableSlashCommands(info.slashCommands)
-            .filter((name) => !LOCAL_COMMANDS.includes(name) && (goals === undefined || name !== 'goal'))
-            .map((name) => ({
-                name,
-                hint: known.has(name) ? t('composer.commands.skill') : t('composer.commands.cli', { cli: providerName ?? t('composer.commands.anyCli') }),
-                local: false,
-                skill: known.has(name)
-            }));
-        return [...own, ...goal, ...cli].filter((command) => command.name.startsWith(commandQuery)).slice(0, 8);
-    }, [commandQuery, goals, info.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]);
-
-    const commandMenuOpen = commandQuery !== null && commands.length > 0;
-    const skillMenuOpen = !commandMenuOpen && skillQuery !== null && skillMatches.length > 0;
-    const mentionMenuOpen = !commandMenuOpen && !skillMenuOpen && mention !== null;
-    // Results belong to the query that asked for them; a closed picker shows none while the next answer is on its way.
-    const files = mention === null ? [] : searched.files;
-    const mentionCount = files.length;
-    // A host with nothing to point at keeps `#fff` out of the way rather than saying nothing matches.
-    const offersReferences = referables.items.some((item) => !referables.chatsOnly || item.kind === 'chat');
-    const referenceMenuOpen = !commandMenuOpen && !skillMenuOpen && !mentionMenuOpen && referenceQuery !== null && offersReferences;
-    const referenceMatches = referenceMenuOpen
-        ? referenceSuggestions(referables, referenceQuery.query, [chatId, ...draft.chats, ...draft.references], 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;
-    const menuCount = commandMenuOpen ? commands.length : skillMenuOpen ? skillMatches.length : mentionMenuOpen ? mentionCount : referenceMatches.length;
-    // The list can shrink under a stale index; every reader takes the one that still points at an option.
-    const activeIndex = clampMenuIndex(menuIndex, menuCount);
-    const inputAria = composerMenuAria({ label: t('composer.inputLabel'), listId, open: menuOpen, activeIndex, count: menuCount });
-
-    /* Which picker the caret opens: `@` for a file, `$` for a skill, `#` for a reference, or none. In code a sigil is just text. */
-    const trackTriggers = (value: string, selection: TextRange, state: EditorState): void => {
-        const empty = selection.from === selection.to;
-        const tree = empty ? (ensureSyntaxTree(state, selection.from, 50) ?? syntaxTree(state)) : null;
-        const caret = tree !== null && !inCode(tree, value, selection.from) ? selection.from : null;
-        const chips = caret === null ? [] : chipRanges(value, draft.mentions, draft.skills, [], referenceChips);
-        const skill = caret === null ? null : queryOutsideChips(findSkillQuery(value, caret), chips);
-        setSkillQuery((current) => (sameQuery(current, skill) ? current : skill));
+    return usePromptMenus({
+        draft,
+        inputRef,
         // A CLI that does not expand `@path` gets the text as it is, so the picker stays out of the way.
-        const next = caret === null || capabilities?.mentions === false ? null : queryOutsideChips(findMentionQuery(value, caret), chips);
-        setMention((current) => (sameQuery(current, next) ? current : next));
-        const reference = caret === null ? null : queryOutsideChips(findReferenceQuery(value, caret), chips);
-        setReferenceQuery((current) => (sameQuery(current, reference) ? current : reference));
-    };
-
-    // The inserted text reaches the editor with the render it causes, so the caret waits a frame for it.
-    const moveCaret = (caret: number): void => {
-        requestAnimationFrame(() => inputRef.current?.setCaret(caret));
-    };
-
-    const close = (): void => {
-        setMention(null);
-        setSkillQuery(null);
-        setReferenceQuery(null);
-    };
-
-    const chooseMention = (path: string): void => {
-        if (!mention) {
-            return;
-        }
-        const result = insertMention(text, mention, path);
-        setText(result.text, draft.mentions.includes(path) ? draft.mentions : [...draft.mentions, path]);
-        setMention(null);
-        moveCaret(result.caret);
-    };
-
-    const chooseMentionAt = (index: number): void => {
-        const path = mention === null ? null : mentionPick(index, searched, mention.query);
-        if (path !== null) {
-            chooseMention(path);
-        }
-    };
-
-    /*
-     * A picked view, node or chat becomes a `#name` chip in the text. The draft keeps the name it was
-     * spelled with, since a rename would otherwise unmake the chip. A chat goes apart, as `chats`.
-     */
-    const chooseReference = (item: Referable): void => {
-        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,
-            chats: chat ? add(current.chats) : current.chats,
-            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);
-        }
-    };
-
-    /*
-     * A picked skill becomes a `$name` chip in the text and a name on the send, which is what
-     * dispatches it. The `/` menu lands here too, so both spellings end up on the same path.
-     */
-    const chooseSkill = (name: string): void => {
-        const result = skillQuery ? insertSkill(text, skillQuery, name) : { text: `$${name} `, caret: name.length + 2 };
-        setText(result.text, draft.mentions, draft.skills.includes(name) ? draft.skills : [...draft.skills, name]);
-        setSkillQuery(null);
-        moveCaret(result.caret);
-    };
-
-    /* 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();
-    };
-
-    /* The arrows walk an open picker round; true when the key was one of them. */
-    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;
-    };
-
-    return {
-        listId,
-        activeIndex,
-        inputAria,
-        hasSkills: skills.length > 0,
-        skillNames: skills.map((skill) => skill.name),
-        commandQuery,
-        commands,
-        commandMenuOpen,
-        skillMatches,
-        skillMenuOpen,
-        mention,
-        mentionMenuOpen,
-        mentionCount,
-        files,
-        referenceMenuOpen,
-        referenceMatches,
+        cwd: capabilities?.mentions === false ? null : info.cwd,
+        skills,
+        slashCommands: info.slashCommands,
+        localCommands: LOCAL_COMMANDS,
+        goals: capabilities?.goals !== undefined,
+        providerName,
         referables,
-        referenceChips,
-        setMenuIndex,
-        trackTriggers,
-        close,
-        chooseMention,
-        chooseMentionAt,
-        chooseReference,
-        chooseReferenceAt,
-        chooseSkill,
-        pickCommand,
-        moveInMenu
-    };
+        ownId: chatId,
+        label: t('composer.inputLabel')
+    });
 }
 
-export type ComposerMenus = ReturnType<typeof useComposerMenus>;
+export type ComposerMenus = PromptMenus;

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

@@ -62,9 +62,11 @@ export function useComposerSubmit({
     /* Opens the host's new chat once the host took the message; a host that answers nothing took it. */
     const afterSend = (sent: void | Promise<boolean>, andNew: boolean): void => {
         const openNewChat = host.openNewChat;
+
         if (!andNew || openNewChat === null) {
             return;
         }
+
         void Promise.resolve(sent)
             .then((taken) => {
                 if (taken !== false) {
@@ -79,39 +81,53 @@ export function useComposerSubmit({
         const delivery = steerable && (alternate ? sendDelivery === 'queue' : sendDelivery === 'steer') ? 'steer' : 'queue';
         const { text, quote, quoteSource } = draft;
         const trimmed = text.trim();
+
         if (isEmptyDraft(draft) || !writable || guard.tooLong) {
             return;
         }
+
         // Recheck restored drafts and files that finished reading concurrently.
         const rejected = checkAttachmentLimits(
             0,
             draft.attachments.map((attachment) => ({ ...attachment, bytes: uploadBytes(attachment) }))
         ).rejected[0];
+
         if (rejected) {
             setNotice(`${rejected.name}: ${rejected.reason}`);
+
             return;
         }
+
         hold.release('send');
         const { commandQuery } = menus;
         const chosen = menus.commands[menus.activeIndex];
+
         if (commandQuery !== null && chosen?.local && controls.runCommand(chosen.name)) {
             box.clear();
+
             return;
         }
+
         if (commandQuery !== null && chosen?.skill) {
             menus.chooseSkill(chosen.name);
+
             return;
         }
+
         // Whoever sends wants to see what comes back, wherever they were reading.
         scrollTimelineToEnd(chatId, 'instant');
+
         if (commandQuery !== null && chosen && !chosen.local) {
             afterSend(onSend(`/${chosen.name}`, {}), how === 'and-new');
             box.clear();
+
             return;
         }
+
         const chats = presentReferences(trimmed, draft.chats, menus.referenceChips);
         // A machine without `viewReferences` drops the field, so only the chats it does know reach it.
         const references = menus.referables.chatsOnly ? [] : presentReferences(trimmed, draft.references, menus.referenceChips);
+
         const sent = onSend(withQuote(quote, trimmed), {
             delivery,
             mentions: presentMentions(trimmed, draft.mentions),
@@ -121,6 +137,7 @@ export function useComposerSubmit({
             attachments: draft.attachments,
             references: references.length > 0 ? references : undefined
         });
+
         afterSend(sent, how === 'and-new');
         box.clear();
         menus.close();
@@ -129,9 +146,11 @@ export function useComposerSubmit({
 
     // A menu row means the draft as it stands when it is picked, so the registration reads the latest submit.
     const submitRef = useRef(submit);
+
     useEffect(() => {
         submitRef.current = submit;
     });
+
     useEffect(() => registerComposerSender(scope.keyOf(chatId), (how) => submitRef.current(how)), [scope, chatId]);
 
     /*
@@ -142,11 +161,13 @@ export function useComposerSubmit({
     const restoreStashed = (prompt: StashedPrompt): void => {
         const stashedQuote = prompt.quote;
         const here = stashedQuote !== undefined && stashedQuote.chatId === chatId;
+
         const { chats, dropped } = restorableChats(
             prompt.chats,
             new Set(menus.referables.items.filter((item) => item.kind === 'chat').map((item) => item.id)),
             chatId
         );
+
         setDraft((current) => ({
             ...current,
             text: stashedQuote === undefined || here ? prompt.text : withQuote(stashedQuote.text, prompt.text),
@@ -156,9 +177,11 @@ export function useComposerSubmit({
             references: [...prompt.references],
             ...(here ? { quote: stashedQuote.text, quoteSource: stashedQuote.itemId } : {})
         }));
+
         if (dropped > 0) {
             setNotice(t('composer.notice.stashChatsDropped', { count: dropped }), 'info');
         }
+
         history.forget();
         inputRef.current?.focus();
     };
@@ -168,6 +191,7 @@ export function useComposerSubmit({
         if (!writable) {
             return;
         }
+
         scrollTimelineToEnd(chatId, 'instant');
         afterSend(onSend(CONTINUE_PROMPT, {}), false);
     };
@@ -176,11 +200,14 @@ export function useComposerSubmit({
     const toggleStash = (): void => {
         if (isEmptyDraft(draft)) {
             const newest = useStash.getState().prompts[0];
+
             if (newest) {
                 restoreStashed(newest);
             }
+
             return;
         }
+
         if (stashDraft(draft, chatId)) {
             box.clear();
             menus.close();

package/src/chat/ui/composer/use-continuable-turn.ts

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import type { ChatInfo, ChatItem } from '@adecore/agent-contracts';
 import { useChatRow } from '../../../state/chats';
 import { continuableTurn } from '../../logic/continue-after-stop';
@@ -7,8 +6,7 @@ import { continuableTurn } from '../../logic/continue-after-stop';
 export function useContinuableTurn(chatId: string, info: ChatInfo): string | null {
     const order = useChatRow(chatId, (row) => row?.order);
     const structure = useChatRow(chatId, (row) => row?.structure);
-    return useMemo(() => {
-        const items = (order ?? []).map((id) => structure?.[id]).filter((item): item is ChatItem => item !== undefined);
-        return continuableTurn(info, items);
-    }, [info, order, structure]);
+    const items = (order ?? []).map((id) => structure?.[id]).filter((item): item is ChatItem => item !== undefined);
+
+    return continuableTurn(info, items);
 }

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