@adecore/agents-react 0.26.1 → 0.26.3

package/dist/chat/chat-client.js

@@ -1,7 +1,7 @@
 import { MountedRegistry } from '../mounted-registry.js';
 import { errorCode, isConnectionError } from '../transport.js';
 /* How many items a chat reads at once, on attach and for every page before it. */
-const HISTORY_PAGE = 60;
+const HISTORY_PAGE = 90;
 /*
  * One chat per chat id on one host. A chat opens on mount and detaches on unmount, and every mounted
  * chat is attached again when the transport comes back. The provider list is fetched once per
@@ -268,7 +268,7 @@ export class ChatClient {
             }
         }
         else {
-            const page = result.history === undefined ? undefined : { history: result.history, pending: result.pending ?? [] };
+            const page = result.history === undefined ? undefined : { history: result.history, pending: result.pending ?? [], subagents: result.subagents ?? [] };
             this.sink.reset(chatId, result.info, result.items, page);
         }
         // A host without bookmarks or visuals sends none, and then this chat has none.

package/dist/chat/subagent-list.d.ts

@@ -1,4 +1,4 @@
-import type { ChatInfo, ChatItem, ChatSubagentItem } from '@adecore/agent-contracts';
+import { type ChatInfo, type ChatItem, type ChatSubagentItem } from '@adecore/agent-contracts';
 import type { StatusWord } from '../agents/status-look.js';
 import type { SubagentTask } from '../host.js';
 export declare function subagentTitle(item: ChatSubagentItem): string;

package/dist/chat/subagent-list.js

@@ -1,4 +1,5 @@
 import i18next from 'i18next';
+import { activeSubagents } from '@adecore/agent-contracts';
 import { formatMoment, formatElapsedShort, formatTokens } from '@adecore/ui/format';
 export function subagentTitle(item) {
     return item.description || item.summary || item.subagentType || i18next.t('agent-chat:rows.subagent.label');
@@ -45,26 +46,12 @@ export function progressOf(states) {
         active: states.filter((state) => state === 'running' || state === 'paused' || state === 'waiting').length
     };
 }
-/*
- * What the flyout over the composer lists: every sub-agent still at work, and the ones that settled
- * since the last message, so a finished batch stays until the next message is sent. That includes an
- * older row a message woke again. A settled one from before that message stays too while a sibling of
- * its turn still runs. Older ones are only in the thread.
- */
+/* What the flyout over the composer lists (`activeSubagents`); `order` puts the rows from before the page first. */
 export function flyoutSubagents(order, structure) {
-    const lastMessage = order.findLastIndex((id) => structure[id]?.kind === 'user');
-    const lastMessageAt = lastMessage < 0 ? null : (structure[order[lastMessage]]?.createdAt ?? null);
-    const items = order.flatMap((id, index) => {
+    return activeSubagents(order.flatMap((id) => {
         const item = structure[id];
-        return item?.kind === 'subagent' ? [{ item, index }] : [];
-    });
-    const turns = new Set(items.flatMap(({ item }) => (item.status === 'running' && item.turnId !== null ? [item.turnId] : [])));
-    return items
-        .filter(({ item, index }) => item.status === 'running' ||
-        index > lastMessage ||
-        (lastMessageAt !== null && item.finishedAt !== null && item.finishedAt > lastMessageAt) ||
-        (item.turnId !== null && turns.has(item.turnId)))
-        .map(({ item }) => item);
+        return item === undefined ? [] : [item];
+    }));
 }
 /* The one state the badge shows for all of them: work in progress first, then work held up, then whatever went wrong. */
 export function summaryWordOf(words) {

package/dist/chat/ui/ChatActivity.js

@@ -24,8 +24,9 @@ export function ChatActivity({ chatId }) {
     const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const order = useChatRow(chatId, (row) => row?.order) ?? NO_ITEMS;
+    const before = useChatRow(chatId, (row) => row?.subagentsBefore) ?? NO_ITEMS;
     const structure = useChatRow(chatId, (row) => row?.structure);
-    const subagents = useMemo(() => (structure === undefined ? [] : flyoutSubagents(order, structure)), [order, structure]);
+    const subagents = useMemo(() => (structure === undefined ? [] : flyoutSubagents([...before, ...order], structure)), [before, order, structure]);
     const { id, keyOf } = useChatScope();
     const tasks = host.tasks.useTasks(id);
     // The infos of these sub-agents' own chats, so the info of any other chat changing does not draw this again.

package/dist/chat/ui/Markdown.js

@@ -112,6 +112,36 @@ function MarkdownLink({ href, children }) {
 function ExternalLink({ href, children }) {
     return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
 }
+/*
+ * The path on the host's machine an image target names, or null for a URL and for a relative path
+ * nobody gave a folder for. react-markdown has already emptied a target of a scheme it distrusts.
+ */
+function localImagePath(src, cwd) {
+    if (src === '' || /^[a-z][a-z0-9+.-]*:/i.test(src)) {
+        return null;
+    }
+    const target = hrefPath(src);
+    if (target.startsWith('/')) {
+        return target;
+    }
+    if (cwd === null) {
+        return null;
+    }
+    return `${cwd.replace(/\/+$/, '')}/${target.replace(/^\.\//, '')}`;
+}
+/* A markdown image, which only the host can read when it names a file on its machine. */
+function MarkdownImage({ src, alt }) {
+    const { MarkdownImage: HostImage } = useChatHost();
+    const cwd = useFileLinkCwd();
+    const path = typeof src === 'string' ? localImagePath(src, cwd) : null;
+    if (HostImage === undefined || path === null) {
+        return _jsx("img", { src: src, alt: alt });
+    }
+    return _jsx(HostImage, { path: path, alt: alt ?? '' });
+}
+function PlainImage({ src, alt }) {
+    return _jsx("img", { src: src, alt: alt });
+}
 /* A ```mermaid fence, which draws what it says. */
 function Diagram({ code }) {
     const { t } = useTranslation('agent-chat');
@@ -135,6 +165,7 @@ const components = {
     a({ href, children }) {
         return _jsx(MarkdownLink, { href: href, children: children });
     },
+    img: MarkdownImage,
     table({ children }) {
         // A table wider than the column scrolls on its own instead of pushing the thread sideways.
         return (_jsx("div", { className: "chat-table", children: _jsx("table", { children: children }) }));
@@ -146,7 +177,8 @@ const plainComponents = {
     code({ className, children }) {
         return (_jsx(MarkdownCode, { className: className, plain: true, children: children }));
     },
-    a: ExternalLink
+    a: ExternalLink,
+    img: PlainImage
 };
 // A reply sits under the heading of its message, an `h3`, so its own headings start one level below
 // that. Only `aria-level` moves. The tag stays, since the styles and a copy of the thread read it.

package/dist/host.d.ts

@@ -195,6 +195,10 @@ export interface ChatHost {
     ReadImage: ComponentType<{
         path: string;
     }> | null;
+    MarkdownImage?: ComponentType<{
+        path: string;
+        alt: string;
+    }>;
     code: {
         useMode(): 'light' | 'dark';
         useThemes(): {

package/dist/state/chats.d.ts

@@ -1,4 +1,4 @@
-import type { AgentKind, ChatApprovalItem, ChatBookmark, ChatEvent, ChatHistoryResult, ChatInfo, ChatItem, ChatQuestionItem, ChatVisual } from '@adecore/agent-contracts';
+import type { AgentKind, ChatApprovalItem, ChatBookmark, ChatEvent, ChatHistoryResult, ChatInfo, ChatItem, ChatQuestionItem, ChatSubagentItem, ChatVisual } from '@adecore/agent-contracts';
 export interface ChatState {
     info: ChatInfo;
     items: Record<string, ChatItem>;
@@ -6,6 +6,7 @@ export interface ChatState {
     order: string[];
     history?: ChatHistoryPage;
     waitingBefore?: string[];
+    subagentsBefore?: string[];
     bookmarks?: ChatBookmark[];
     visuals?: ChatVisual[];
 }
@@ -13,6 +14,7 @@ export type ChatHistoryPage = ChatHistoryResult['history'];
 export interface ChatPage {
     history: ChatHistoryPage;
     pending: ChatItem[];
+    subagents?: ChatSubagentItem[];
 }
 export type ChatsById = Record<string, ChatState>;
 export type ChatStatuses = Record<string, Pick<ChatState, 'info'>>;

package/dist/state/chats.js

@@ -12,17 +12,30 @@ function stateOf(info, items, page) {
         return { info, items: byId, structure: byId, order };
     }
     const before = page.pending.filter((item) => !(item.id in byId));
-    for (const item of before) {
+    const subagents = (page.subagents ?? []).filter((item) => !(item.id in byId));
+    for (const item of [...before, ...subagents]) {
         byId[item.id] = item;
     }
-    return { info, items: byId, structure: byId, order, history: page.history, waitingBefore: before.map((item) => item.id) };
+    return {
+        info,
+        items: byId,
+        structure: byId,
+        order,
+        history: page.history,
+        waitingBefore: before.map((item) => item.id),
+        subagentsBefore: subagents.map((item) => item.id)
+    };
 }
 /* An older host names no place in the thread, and it always hands over the whole of it. */
 function isBeforePage(state, historyIndex) {
     return state.history !== undefined && historyIndex !== undefined && historyIndex < state.history.start;
 }
-/* An item from before the page this client holds matters only as a request that waits, or one that stopped waiting. */
+/* An item from before the page this client holds matters only as a sub-agent, a request that waits, or one that stopped waiting. */
 function withEarlierItem(state, item) {
+    if (item.kind === 'subagent') {
+        const subagents = state.subagentsBefore ?? [];
+        return { ...withItem(state, item), subagentsBefore: subagents.includes(item.id) ? subagents : [...subagents, item.id] };
+    }
     const waiting = state.waitingBefore ?? [];
     const held = waiting.includes(item.id);
     if (isWaiting(item)) {
@@ -45,11 +58,12 @@ export function prependPage(state, cursor, page) {
     }
     const order = [...olderIds, ...state.order];
     if (page.history.cursor === null) {
-        const { history: _history, waitingBefore: _waitingBefore, ...rest } = state;
+        const { history: _history, waitingBefore: _waitingBefore, subagentsBefore: _subagentsBefore, ...rest } = state;
         return { ...rest, items, structure: items, order };
     }
     const waitingBefore = (state.waitingBefore ?? []).filter((id) => !olderIds.has(id));
-    return { ...state, items, structure: items, order, history: page.history, waitingBefore };
+    const subagentsBefore = (state.subagentsBefore ?? []).filter((id) => !olderIds.has(id));
+    return { ...state, items, structure: items, order, history: page.history, waitingBefore, subagentsBefore };
 }
 /* The requests that still wait, oldest first: those from before the page this client holds, then the thread's own. */
 export function waitingRequestsOf(chat) {

package/package.json

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

package/src/chat/chat-client.ts

@@ -47,7 +47,7 @@ interface Mounted extends ChatOpenOptions, MountedEntry {
 }
 
 /* How many items a chat reads at once, on attach and for every page before it. */
-const HISTORY_PAGE = 60;
+const HISTORY_PAGE = 90;
 
 interface ProviderSink {
     setProviders(providers: ProviderInfo[]): void;
@@ -339,7 +339,8 @@ export class ChatClient {
                 this.sink.apply(chatId, event);
             }
         } else {
-            const page = result.history === undefined ? undefined : { history: result.history, pending: result.pending ?? [] };
+            const page =
+                result.history === undefined ? undefined : { history: result.history, pending: result.pending ?? [], subagents: result.subagents ?? [] };
             this.sink.reset(chatId, result.info, result.items, page);
         }
         // A host without bookmarks or visuals sends none, and then this chat has none.

package/src/chat/subagent-list.ts

@@ -1,5 +1,5 @@
 import i18next from 'i18next';
-import type { ChatInfo, ChatItem, ChatSubagentItem } from '@adecore/agent-contracts';
+import { activeSubagents, type ChatInfo, type ChatItem, type ChatSubagentItem } from '@adecore/agent-contracts';
 import { formatMoment, formatElapsedShort, formatTokens } from '@adecore/ui/format';
 import type { StatusWord } from '../agents/status-look';
 import type { SubagentTask } from '../host';
@@ -58,29 +58,14 @@ export function progressOf(states: readonly TaskRowState[]): { done: number; tot
     };
 }
 
-/*
- * What the flyout over the composer lists: every sub-agent still at work, and the ones that settled
- * since the last message, so a finished batch stays until the next message is sent. That includes an
- * older row a message woke again. A settled one from before that message stays too while a sibling of
- * its turn still runs. Older ones are only in the thread.
- */
+/* What the flyout over the composer lists (`activeSubagents`); `order` puts the rows from before the page first. */
 export function flyoutSubagents(order: readonly string[], structure: Readonly<Record<string, ChatItem>>): ChatSubagentItem[] {
-    const lastMessage = order.findLastIndex((id) => structure[id]?.kind === 'user');
-    const lastMessageAt = lastMessage < 0 ? null : (structure[order[lastMessage]!]?.createdAt ?? null);
-    const items = order.flatMap((id, index) => {
-        const item = structure[id];
-        return item?.kind === 'subagent' ? [{ item, index }] : [];
-    });
-    const turns = new Set(items.flatMap(({ item }) => (item.status === 'running' && item.turnId !== null ? [item.turnId] : [])));
-    return items
-        .filter(
-            ({ item, index }) =>
-                item.status === 'running' ||
-                index > lastMessage ||
-                (lastMessageAt !== null && item.finishedAt !== null && item.finishedAt > lastMessageAt) ||
-                (item.turnId !== null && turns.has(item.turnId))
-        )
-        .map(({ item }) => item);
+    return activeSubagents(
+        order.flatMap((id) => {
+            const item = structure[id];
+            return item === undefined ? [] : [item];
+        })
+    );
 }
 
 /* The one state the badge shows for all of them: work in progress first, then work held up, then whatever went wrong. */

package/src/chat/ui/ChatActivity.tsx

@@ -28,8 +28,9 @@ export function ChatActivity({ chatId }: { chatId: string }) {
     const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const order = useChatRow(chatId, (row) => row?.order) ?? NO_ITEMS;
+    const before = useChatRow(chatId, (row) => row?.subagentsBefore) ?? NO_ITEMS;
     const structure = useChatRow(chatId, (row) => row?.structure);
-    const subagents = useMemo(() => (structure === undefined ? [] : flyoutSubagents(order, structure)), [order, structure]);
+    const subagents = useMemo(() => (structure === undefined ? [] : flyoutSubagents([...before, ...order], structure)), [before, order, structure]);
     const { id, keyOf } = useChatScope();
     const tasks = host.tasks.useTasks(id);
     // The infos of these sub-agents' own chats, so the info of any other chat changing does not draw this again.

package/src/chat/ui/Markdown.tsx

@@ -161,6 +161,39 @@ function ExternalLink({ href, children }: { href?: string; children?: ReactNode
     );
 }
 
+/*
+ * The path on the host's machine an image target names, or null for a URL and for a relative path
+ * nobody gave a folder for. react-markdown has already emptied a target of a scheme it distrusts.
+ */
+function localImagePath(src: string, cwd: string | null): string | null {
+    if (src === '' || /^[a-z][a-z0-9+.-]*:/i.test(src)) {
+        return null;
+    }
+    const target = hrefPath(src);
+    if (target.startsWith('/')) {
+        return target;
+    }
+    if (cwd === null) {
+        return null;
+    }
+    return `${cwd.replace(/\/+$/, '')}/${target.replace(/^\.\//, '')}`;
+}
+
+/* A markdown image, which only the host can read when it names a file on its machine. */
+function MarkdownImage({ src, alt }: { src?: string; alt?: string }) {
+    const { MarkdownImage: HostImage } = useChatHost();
+    const cwd = useFileLinkCwd();
+    const path = typeof src === 'string' ? localImagePath(src, cwd) : null;
+    if (HostImage === undefined || path === null) {
+        return <img src={src} alt={alt} />;
+    }
+    return <HostImage path={path} alt={alt ?? ''} />;
+}
+
+function PlainImage({ src, alt }: { src?: string; alt?: string }) {
+    return <img src={src} alt={alt} />;
+}
+
 /* A ```mermaid fence, which draws what it says. */
 function Diagram({ code }: { code: string }) {
     const { t } = useTranslation('agent-chat');
@@ -190,6 +223,7 @@ const components = {
     a({ href, children }: { href?: string; children?: ReactNode }) {
         return <MarkdownLink href={href}>{children}</MarkdownLink>;
     },
+    img: MarkdownImage,
     table({ children }: { children?: ReactNode }) {
         // A table wider than the column scrolls on its own instead of pushing the thread sideways.
         return (
@@ -210,7 +244,8 @@ const plainComponents = {
             </MarkdownCode>
         );
     },
-    a: ExternalLink
+    a: ExternalLink,
+    img: PlainImage
 };
 
 // A reply sits under the heading of its message, an `h3`, so its own headings start one level below

package/src/host.ts

@@ -313,6 +313,8 @@ export interface ChatHost {
     };
     /* The image a tool read, drawn under its row; null draws none. */
     ReadImage: ComponentType<{ path: string }> | null;
+    /* An image a reply's markdown names by a path on the host's machine, absolute or under the chat's cwd; left out, the `<img>` stays as written. */
+    MarkdownImage?: ComponentType<{ path: string; alt: string }>;
     code: {
         useMode(): 'light' | 'dark';
         /* The Shiki theme ids code is drawn in, one per mode. */

package/src/state/chats.ts

@@ -9,6 +9,7 @@ import type {
     ChatInfo,
     ChatItem,
     ChatQuestionItem,
+    ChatSubagentItem,
     ChatVisual
 } from '@adecore/agent-contracts';
 import { appendToolOutput } from '@adecore/agent-contracts/text';
@@ -32,6 +33,11 @@ export interface ChatState {
      * `structure` but not in `order`, since the thread on screen does not reach back to them yet.
      */
     waitingBefore?: string[];
+    /*
+     * Sub-agents from before that part, held the same way, so the pill over the composer knows of one
+     * that a message woke again without a scroll reaching back to its row.
+     */
+    subagentsBefore?: string[];
     /* The messages marked to come back to, as the host last said; absent until it said anything. */
     bookmarks?: ChatBookmark[];
     /* The pages agents published in the chat, as the host last said; absent until it said anything. */
@@ -45,6 +51,8 @@ export interface ChatPage {
     history: ChatHistoryPage;
     /* Every request of the chat that still waits, wherever in the thread it is. */
     pending: ChatItem[];
+    /* The active sub-agents from before the page; absent from a host that sends none. */
+    subagents?: ChatSubagentItem[];
 }
 
 /* Rows keyed with the scope's `keyOf`, so a thread says which host it runs on. */
@@ -93,10 +101,19 @@ function stateOf(info: ChatInfo, items: ChatItem[], page?: ChatPage): ChatState
         return { info, items: byId, structure: byId, order };
     }
     const before = page.pending.filter((item) => !(item.id in byId));
-    for (const item of before) {
+    const subagents = (page.subagents ?? []).filter((item) => !(item.id in byId));
+    for (const item of [...before, ...subagents]) {
         byId[item.id] = item;
     }
-    return { info, items: byId, structure: byId, order, history: page.history, waitingBefore: before.map((item) => item.id) };
+    return {
+        info,
+        items: byId,
+        structure: byId,
+        order,
+        history: page.history,
+        waitingBefore: before.map((item) => item.id),
+        subagentsBefore: subagents.map((item) => item.id)
+    };
 }
 
 /* An older host names no place in the thread, and it always hands over the whole of it. */
@@ -104,8 +121,12 @@ function isBeforePage(state: ChatState, historyIndex: number | undefined): boole
     return state.history !== undefined && historyIndex !== undefined && historyIndex < state.history.start;
 }
 
-/* An item from before the page this client holds matters only as a request that waits, or one that stopped waiting. */
+/* An item from before the page this client holds matters only as a sub-agent, a request that waits, or one that stopped waiting. */
 function withEarlierItem(state: ChatState, item: ChatItem): ChatState {
+    if (item.kind === 'subagent') {
+        const subagents = state.subagentsBefore ?? [];
+        return { ...withItem(state, item), subagentsBefore: subagents.includes(item.id) ? subagents : [...subagents, item.id] };
+    }
     const waiting = state.waitingBefore ?? [];
     const held = waiting.includes(item.id);
     if (isWaiting(item)) {
@@ -129,11 +150,12 @@ export function prependPage(state: ChatState, cursor: string, page: ChatHistoryR
     }
     const order = [...olderIds, ...state.order];
     if (page.history.cursor === null) {
-        const { history: _history, waitingBefore: _waitingBefore, ...rest } = state;
+        const { history: _history, waitingBefore: _waitingBefore, subagentsBefore: _subagentsBefore, ...rest } = state;
         return { ...rest, items, structure: items, order };
     }
     const waitingBefore = (state.waitingBefore ?? []).filter((id) => !olderIds.has(id));
-    return { ...state, items, structure: items, order, history: page.history, waitingBefore };
+    const subagentsBefore = (state.subagentsBefore ?? []).filter((id) => !olderIds.has(id));
+    return { ...state, items, structure: items, order, history: page.history, waitingBefore, subagentsBefore };
 }
 
 /* The requests that still wait, oldest first: those from before the page this client holds, then the thread's own. */