@adecore/agents-react 0.21.1 → 0.22.0

package/src/chat/stash.ts

@@ -27,9 +27,17 @@ export interface StashedPrompt {
     mentions: string[];
     skills: string[];
     attachments: StashedAttachment[];
+    /* A quote that knew its reply, kept apart from the text so it can lead back to it in the chat it came from. */
+    quote?: StashedQuote;
     createdAt: number;
 }
 
+export interface StashedQuote {
+    text: string;
+    chatId: string;
+    itemId: string;
+}
+
 function strings(value: unknown): string[] {
     return Array.isArray(value) ? value.filter((entry): entry is string => typeof entry === 'string') : [];
 }
@@ -45,6 +53,18 @@ function attachments(value: unknown): StashedAttachment[] {
     }));
 }
 
+function stashedQuote(value: unknown): StashedQuote | undefined {
+    if (!isRecord(value) || typeof value.text !== 'string' || typeof value.chatId !== 'string' || typeof value.itemId !== 'string') {
+        return undefined;
+    }
+    return { text: value.text, chatId: value.chatId, itemId: value.itemId };
+}
+
+function stashedQuoteField(value: unknown): { quote?: StashedQuote } {
+    const quote = stashedQuote(value);
+    return quote === undefined ? {} : { quote };
+}
+
 /* Only the fields we know today, so anything an older or a broken write left behind falls away here. */
 export function parseStash(raw: string | null): StashedPrompt[] {
     if (raw === null) {
@@ -64,6 +84,7 @@ export function parseStash(raw: string | null): StashedPrompt[] {
                 mentions: strings(entry.mentions),
                 skills: strings(entry.skills),
                 attachments: attachments(entry.attachments),
+                ...stashedQuoteField(entry.quote),
                 createdAt: typeof entry.createdAt === 'number' ? entry.createdAt : 0
             }))
             .slice(0, STASH_LIMIT);
@@ -77,14 +98,19 @@ export function withStashed(prompts: StashedPrompt[], entry: StashedPrompt): Sta
     return [entry, ...prompts].slice(0, STASH_LIMIT);
 }
 
-/* What a draft looks like on the shelf, its quote folded into the text; null when there is nothing worth putting there. */
-export function stashedFrom(draft: ChatDraft, id: string, now: number): StashedPrompt | null {
+/*
+ * What a draft looks like on the shelf; null when there is nothing worth putting there. A quote that
+ * knows its reply stays apart, since it leads back to that reply in `chatId`; any other is folded into the text.
+ */
+export function stashedFrom(draft: ChatDraft, id: string, now: number, chatId: string): StashedPrompt | null {
     if (isEmptyDraft(draft)) {
         return null;
     }
+    const kept = draft.quote !== '' && draft.quoteSource !== null;
     return {
         id,
-        text: withQuote(draft.quote, draft.text),
+        text: kept ? draft.text : withQuote(draft.quote, draft.text),
+        ...(kept ? { quote: { text: draft.quote, chatId, itemId: draft.quoteSource! } } : {}),
         mentions: [...draft.mentions],
         skills: [...draft.skills],
         attachments: draft.attachments.map((attachment) => ({ name: attachment.name, mime: attachment.mime, size: uploadBytes(attachment) })),
@@ -94,9 +120,7 @@ export function stashedFrom(draft: ChatDraft, id: string, now: number): StashedP
 
 const storage = persistedJson<StashedPrompt[]>(storageKey, parseStash, [], () => chatStorageLegacyKeys('stash'));
 
-/*
- * Prompts put aside for later can move to another chat, so the shelf is shared across chats.
- */
+/* Prompts put aside for later can move to another chat, so the shelf is shared across chats. */
 export const useStash = createChatStore<{ prompts: StashedPrompt[] }>(
     () => ({ prompts: [] }),
     (store) => store.setState({ prompts: storage.read() })
@@ -108,8 +132,8 @@ function write(prompts: StashedPrompt[]): void {
 }
 
 /* Puts a draft on the shelf; false when the composer held nothing to put there. */
-export function stashDraft(draft: ChatDraft): boolean {
-    const entry = stashedFrom(draft, `stash-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, Date.now());
+export function stashDraft(draft: ChatDraft, chatId: string): boolean {
+    const entry = stashedFrom(draft, `stash-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, Date.now(), chatId);
     if (!entry) {
         return false;
     }

package/src/chat/subagent-list.ts

@@ -48,6 +48,16 @@ export function taskRowStateOf(item: ChatSubagentItem, task: SubagentTask | null
     return word;
 }
 
+/* How far delegated work is: what settled as done, what still runs or waits, and how many of those wait on a person. */
+export function progressOf(states: readonly TaskRowState[]): { done: number; total: number; waiting: number; active: number } {
+    return {
+        done: states.filter((state) => state === 'done').length,
+        total: states.length,
+        waiting: states.filter((state) => state === 'waiting').length,
+        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
@@ -106,11 +116,12 @@ export function entryTimeOf(item: ChatSubagentItem, task: SubagentTask | null, n
 }
 
 /*
- * What the Stop of an active entry does: a task stops the node working on it, and a subagent of the
- * CLI's own is only marked stopped, since no CLI stops one on its own. While the chat's turn runs that
- * turn may still wait on it, so stopping the turn (the composer's Stop) is the only offer then.
+ * What the Stop of an active entry does: a task stops the node working on it, and a subagent whose CLI
+ * named its task id (`native`) is ended on its own, turn or not. Any other subagent of the CLI's own is
+ * only marked stopped; while the chat's turn runs that turn may still wait on it, so stopping the turn
+ * (the composer's Stop) is the only offer then.
  */
-export type SubagentStop = 'task' | 'mark';
+export type SubagentStop = 'task' | 'native' | 'mark';
 
 export function stopOf(item: ChatSubagentItem, turnRunning: boolean): SubagentStop | null {
     if (item.status !== 'running') {
@@ -119,11 +130,14 @@ export function stopOf(item: ChatSubagentItem, turnRunning: boolean): SubagentSt
     if (item.origin === 'ruimte') {
         return item.childId === undefined ? null : 'task';
     }
+    if (item.native?.agentId) {
+        return 'native';
+    }
     return turnRunning ? null : 'mark';
 }
 
 export function stopLabel(stop: SubagentStop): string {
-    return stop === 'task' ? i18next.t('agent-chat:subagents.stop.task') : i18next.t('agent-chat:subagents.stop.mark');
+    return i18next.t(`agent-chat:subagents.stop.${stop}`);
 }
 
 /*

package/src/chat/thumbnails.ts

@@ -45,10 +45,9 @@ function dataUrlOf(blob: Blob): Promise<string> {
 }
 
 /*
- * A still of the middle of an image, decoded once. The composer used to draw the full data URL in a
- * 56 px box, which a browser decodes again for every paint, so a tall screenshot made typing stutter.
- * An animated image gives its first frame. Whatever cannot be decoded this way (an SVG, a browser
- * without `OffscreenCanvas`) falls back to the image itself, which is what it was before.
+ * A still of the middle of an image, decoded once: a browser decodes a full data URL again on every
+ * paint, so a tall screenshot made typing stutter. An animated image gives its first frame; what
+ * cannot be decoded this way (an SVG, a browser without `OffscreenCanvas`) falls back to the image.
  */
 async function makeThumbnail(upload: ChatAttachmentUpload): Promise<string> {
     try {

package/src/chat/timeline-scroll.ts

@@ -1,6 +1,9 @@
 // A page is a screen minus a little, so the line you were reading is still on it after the jump.
 const PAGE_OVERLAP = 0.9;
 
+// How long a jump asked before its thread registered stays up for that thread.
+const PENDING_JUMP_TTL_MS = 10_000;
+
 type Scroller = {
     element: HTMLElement;
     follow: (enabled: boolean) => void;
@@ -10,6 +13,10 @@ type Scroller = {
 
 const scrollers = new Map<string, Scroller>();
 
+/* The timeline owns following; the composer subscribes here to show its jump-to-end button. */
+const ends = new Map<string, boolean>();
+const listeners = new Set<() => void>();
+
 /* The timeline hands its scroller over so the composer, which never sees it, can page through it. */
 export function registerTimeline(
     chatId: string,
@@ -29,10 +36,6 @@ export function registerTimeline(
     };
 }
 
-/* The timeline owns following; the composer subscribes here to show its jump-to-end button. */
-const ends = new Map<string, boolean>();
-const listeners = new Set<() => void>();
-
 export function setTimelineAtEnd(chatId: string, atEnd: boolean): void {
     if (ends.get(chatId) === atEnd) {
         return;
@@ -97,72 +100,74 @@ export function stepTimelineMessage(key: string, direction: -1 | 1): boolean {
 }
 
 /*
- * A jump to one message of a chat, asked from outside its thread (the chat's menu). A thread that is
- * not on screen yet gets it when it registers, since the menu may have to show the chat first.
- * Keyed with the scope's `keyOf`, like the steppers.
+ * Jumps asked from outside a thread (the chat's menu, a card that names a turn), keyed with the
+ * scope's `keyOf` like the steppers. A thread that is not on screen yet gets its jump when it
+ * registers, since the asker may have to show the chat first.
  */
-const jumpers = new Map<string, (itemId: string) => void>();
-const waitingJumps = new Map<string, string>();
-
-export function registerItemJumper(key: string, jump: (itemId: string) => void): () => void {
-    jumpers.set(key, jump);
-    const waiting = waitingJumps.get(key);
-    if (waiting !== undefined) {
-        waitingJumps.delete(key);
-        jump(waiting);
-    }
-    return () => {
-        if (jumpers.get(key) === jump) {
-            jumpers.delete(key);
+function waitingJumps<T>(): { register(key: string, jump: (target: T) => void): () => void; jump(key: string, target: T): boolean } {
+    const jumpers = new Map<string, (target: T) => void>();
+    const waiting = new Map<string, { target: T; at: number }>();
+    return {
+        register(key, jump) {
+            jumpers.set(key, jump);
+            const pending = waiting.get(key);
+            if (pending !== undefined) {
+                waiting.delete(key);
+                // A jump nobody picked up for long is not what the person wants any more.
+                if (Date.now() - pending.at <= PENDING_JUMP_TTL_MS) {
+                    jump(pending.target);
+                }
+            }
+            return () => {
+                if (jumpers.get(key) === jump) {
+                    jumpers.delete(key);
+                }
+            };
+        },
+        jump(key, target) {
+            const jump = jumpers.get(key);
+            if (jump === undefined) {
+                waiting.set(key, { target, at: Date.now() });
+                return false;
+            }
+            jump(target);
+            return true;
         }
     };
 }
 
+/* What a jump to an item may ask beyond scrolling to it. */
+export interface ItemJumpOptions {
+    /* Lights the row up once it is in view. */
+    flash?: boolean;
+    /* Runs when the item is nowhere in the thread, after every earlier page has been tried. */
+    onMissing?(): void;
+}
+
+const itemJumps = waitingJumps<{ itemId: string; options: ItemJumpOptions }>();
+
+export function registerItemJumper(key: string, jump: (itemId: string, options: ItemJumpOptions) => void): () => void {
+    return itemJumps.register(key, ({ itemId, options }) => jump(itemId, options));
+}
+
 /* False when that chat has no thread on screen; the jump then waits for the next one that registers. */
-export function jumpToTimelineItem(key: string, itemId: string): boolean {
-    const jump = jumpers.get(key);
-    if (jump === undefined) {
-        waitingJumps.set(key, itemId);
-        return false;
-    }
-    jump(itemId);
-    return true;
+export function jumpToTimelineItem(key: string, itemId: string, options: ItemJumpOptions = {}): boolean {
+    return itemJumps.jump(key, { itemId, options });
 }
 
-/*
- * A jump to the turn of a chat, for a card that says which turn wrote something: the message that opened
- * it, or the files it changed. Kept like the jump to an item, so a chat that is not on screen yet gets it
- * when its thread registers.
- */
+/* Which part of a turn a jump lands on: the message that opened it, or the files it changed. */
 export type TurnTarget = 'prompt' | 'changes';
 
 type TurnJump = (turnId: string, target: TurnTarget) => void;
-const turnJumpers = new Map<string, TurnJump>();
-const waitingTurnJumps = new Map<string, { turnId: string; target: TurnTarget }>();
+const turnJumps = waitingJumps<{ turnId: string; target: TurnTarget }>();
 
 export function registerTurnJumper(key: string, jump: TurnJump): () => void {
-    turnJumpers.set(key, jump);
-    const waiting = waitingTurnJumps.get(key);
-    if (waiting !== undefined) {
-        waitingTurnJumps.delete(key);
-        jump(waiting.turnId, waiting.target);
-    }
-    return () => {
-        if (turnJumpers.get(key) === jump) {
-            turnJumpers.delete(key);
-        }
-    };
+    return turnJumps.register(key, ({ turnId, target }) => jump(turnId, target));
 }
 
 /* False when that chat has no thread on screen; the jump then waits for the next one that registers. */
 export function jumpToTimelineTurn(key: string, turnId: string, target: TurnTarget): boolean {
-    const jump = turnJumpers.get(key);
-    if (jump === undefined) {
-        waitingTurnJumps.set(key, { turnId, target });
-        return false;
-    }
-    jump(turnId, target);
-    return true;
+    return turnJumps.jump(key, { turnId, target });
 }
 
 /* How near the top, in screens, the page before is asked for, so it is there before a reader reaches the edge. */

package/src/chat/ui/BookmarkSubmenu.tsx

@@ -9,11 +9,7 @@ import { useChatScope } from '../../scope';
 import { useChatRow } from '../../state/chats';
 import { Icon, Menu } from '@adecore/ui';
 
-/*
- * "Bookmarks" in the menu of a chat node or a chat view: the chat's bookmarks in the order of the
- * thread, each a jump to its message, with rename and remove on the row. A chat without bookmarks
- * draws nothing.
- */
+/* A chat's bookmarks in thread order, each a jump to its message with rename and remove; nothing without bookmarks. */
 export function BookmarkSubmenu({ chatId }: { chatId: string }) {
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();

package/src/chat/ui/ChatActivity.tsx

@@ -1,16 +1,16 @@
 import { useMemo, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Activity, Square, SquareTerminal } from 'lucide-react';
+import { Activity, MessageCircleQuestionMark, Square, SquareTerminal } from 'lucide-react';
 import type { ChatBackgroundTask, ChatSubagentItem } from '@adecore/agent-contracts';
 import { backgroundCounts } from '../activity';
-import { badgeCountOf, entryTimeOf, flyoutSubagents, statusWordOf, subagentTitle, summaryWordOf, taskIdOf } from '../subagent-list';
+import { badgeCountOf, entryTimeOf, flyoutSubagents, progressOf, statusWordOf, subagentTitle, summaryWordOf, taskIdOf, taskRowStateOf } from '../subagent-list';
 import { useSubagentSupport } from '../subagent-support';
 import { canOpenSubagent, crumbOf, openFromMain, useSubagentTrail } from '../subagent-view';
 import { SubagentStopButton } from './SubagentStopButton';
 import { formatElapsedShort } from '@adecore/ui/format';
 import { Icon, IconButton, Popover, Surface, useNow } from '@adecore/ui';
-import { useChatRow } from '../../state/chats';
+import { useChatRow, useChats } from '../../state/chats';
 import { chatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatActions } from '../actions';
@@ -28,8 +28,20 @@ export function ChatActivity({ chatId }: { chatId: string }) {
     const order = useChatRow(chatId, (row) => row?.order) ?? NO_ITEMS;
     const structure = useChatRow(chatId, (row) => row?.structure);
     const subagents = useMemo(() => (structure === undefined ? [] : flyoutSubagents(order, structure)), [order, structure]);
-    const { id } = useChatScope();
+    const { id, keyOf } = useChatScope();
     const tasks = chatHost().tasks.useTasks(id);
+    const statuses = useChats((s) => s.statusByKey);
+    const progress = useMemo(
+        () =>
+            progressOf(
+                subagents.map((item) => {
+                    const taskId = taskIdOf(item);
+                    const child = item.childId === undefined ? undefined : statuses[keyOf(item.childId)]?.info;
+                    return taskRowStateOf(item, taskId === null ? null : (tasks?.[taskId] ?? null), child);
+                })
+            ),
+        [subagents, tasks, statuses, keyOf]
+    );
     const words = useMemo(
         () =>
             subagents.map((item) => {
@@ -44,13 +56,25 @@ export function ChatActivity({ chatId }: { chatId: string }) {
     }
     const { shells, monitors } = backgroundCounts(background);
     const Slot = chatHost().SubagentSlot;
+    const counting = progress.active > 0 && progress.total > 1;
+    const label = counting
+        ? [t('activity.progress', { done: progress.done, total: progress.total }), progress.waiting > 0 && t('activity.needsYou', { count: progress.waiting })]
+              .filter(Boolean)
+              .join(', ')
+        : t('activity.subagents', { count: badgeCountOf(words) });
     return (
         <div className="mb-3 flex flex-wrap items-center gap-2">
             {subagents.length > 0 &&
                 (Slot === null ? (
                     <Flyout
-                        icon={<StatusIcon word={summaryWordOf(words)} />}
-                        label={t('activity.subagents', { count: badgeCountOf(words) })}
+                        icon={
+                            progress.waiting > 0 ? (
+                                <Icon icon={MessageCircleQuestionMark} size={14} className="shrink-0 text-status-needs-you" />
+                            ) : (
+                                <StatusIcon word={summaryWordOf(words)} />
+                            )
+                        }
+                        label={label}
                         heading={t('activity.subagents', { count: subagents.length })}
                     >
                         <SubagentRows chatId={chatId} items={subagents} />
@@ -83,7 +107,7 @@ function Flyout({ icon, label, heading = label, children }: { icon: ReactNode; l
         <Popover.Root>
             <Surface
                 render={<Popover.Trigger />}
-                className="pointer-events-auto inline-flex h-7.5 items-center gap-1.5 rounded-full px-3 text-xs text-text-muted hover:text-text"
+                className="pointer-events-auto inline-flex h-7.5 items-center gap-1.5 rounded-full px-3 text-xs text-text-muted tabular-nums hover:text-text"
             >
                 {icon}
                 {label}
@@ -148,11 +172,13 @@ function SubagentRows({ chatId, items }: { chatId: string; items: readonly ChatS
 
 function SubagentEntry({ chatId, item, now }: { chatId: string; item: ChatSubagentItem; now: number }) {
     const { t } = useTranslation('agent-chat');
-    const { id } = useChatScope();
+    const { id, keyOf } = useChatScope();
     const refused = useSubagentSupport((s) => s.unsupported[id] === true);
     const task = chatHost().tasks.useTask(id, taskIdOf(item));
     const { show } = useSubagentTrail(chatId);
+    const child = useChats((s) => (item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info));
     const word = statusWordOf(item, task);
+    const state = taskRowStateOf(item, task, child);
     return (
         <ActivityRow
             icon={<StatusIcon word={word} />}
@@ -160,7 +186,7 @@ function SubagentEntry({ chatId, item, now }: { chatId: string; item: ChatSubage
                 <>
                     {subagentTitle(item)}
                     {/* The icon says the state to the eye; a screen reader hears it with the title. */}
-                    <span className="sr-only">, {t(`common.status.${word}`)}</span>
+                    <span className="sr-only">, {state === 'waiting' ? t('rows.task.waiting') : t(`common.status.${word}`)}</span>
                 </>
             }
             time={entryTimeOf(item, task, now)}

package/src/chat/ui/CodeBlock.tsx

@@ -123,9 +123,8 @@ const CodeLine = memo(function CodeLine({ tokens }: { tokens: CodeToken[] }) {
 
 /*
  * A fenced block, highlighted a line at a time. Until shiki and the grammar are there it holds its
- * place invisibly in the same shape, so there is never a frame of bare code that turns colored. A
- * fence that is still open is tokenized as it grows, and the same component carries on once it
- * closes, so closing it does not draw it again.
+ * place invisibly, so bare code never turns colored. An open fence is tokenized as it grows, and
+ * closing it does not draw it again.
  */
 export function CodeBlock({ code, lang, actions }: { code: string; lang: string; actions?: ReactNode }) {
     const { t } = useTranslation('agent-chat');