@adecore/agents-react 0.0.1 → 0.17.0-beta.1

package/dist/chat/subagent-view.js

@@ -0,0 +1,96 @@
+import i18next from 'i18next';
+import { useMemo } from 'react';
+import { create } from 'zustand';
+import { useChatScope } from '../scope.js';
+import { useChatRow } from '../state/chats.js';
+import { useSubagentSupport } from './subagent-support.js';
+export const MAIN_AGENT = [];
+const NO_ITEMS = [];
+export function crumbOf(item) {
+    return { toolUseId: item.toolUseId, description: item.description };
+}
+function stepLabel(step) {
+    return step.description || i18next.t('agent-chat:rows.subagent.label');
+}
+/* A row in the main agent's thread or an entry of the flyout opens its conversation straight away. */
+export function openFromMain(step) {
+    return [step];
+}
+export function openBelow(trail, step) {
+    return [...trail, step];
+}
+export function trailTo(trail, depth) {
+    return depth <= 0 ? MAIN_AGENT : trail.slice(0, depth);
+}
+export function stepBack(trail) {
+    return trailTo(trail, trail.length - 1);
+}
+/*
+ * A sub-agent's conversation is read back, so there is nobody to write to. The composer stays, since
+ * the chat's own approvals and questions are answered there.
+ */
+export function composerWrites(trail) {
+    return trail.length === 0;
+}
+/* The crumbs after the chat's own title, which the bar draws as the first crumb and the way back. */
+export function breadcrumbOf(trail) {
+    return trail.map((step, index) => ({ label: stepLabel(step), depth: index + 1, current: index === trail.length - 1 }));
+}
+/* A row without a pointer of its own can only be opened by a machine that answers `chat.subagent` for it. */
+export function canOpenSubagent(item, machineRefused) {
+    return item.native !== undefined || !machineRefused;
+}
+/* The row of the call that opened a conversation, a nested one included, since its row is in the thread too. */
+export function subagentOf(structure, toolUseId) {
+    return Object.values(structure).find((item) => item.kind === 'subagent' && item.toolUseId === toolUseId) ?? null;
+}
+/* The subagents a chat can open, in the order the thread has them. */
+export function openableSubagents(order, structure, machineRefused) {
+    return order.flatMap((id) => {
+        const item = structure[id];
+        return item?.kind === 'subagent' && canOpenSubagent(item, machineRefused) ? [item] : [];
+    });
+}
+/*
+ * What a chat shows in its place, for this page's life only: a look into a subagent is a moment
+ * rather than a place, so it is never written to the project or to the host.
+ */
+export const useSubagentView = create((set, get) => ({
+    trails: {},
+    show(key, trail) {
+        const trails = { ...get().trails };
+        if (trail.length === 0) {
+            delete trails[key];
+        }
+        else {
+            trails[key] = trail;
+        }
+        set({ trails });
+    },
+    back(key) {
+        const trail = get().trails[key];
+        if (trail === undefined || trail.length === 0) {
+            return false;
+        }
+        get().show(key, stepBack(trail));
+        return true;
+    }
+}));
+/* The trail of a chat in the scope this is rendered in, and a way to set it. */
+export function useSubagentTrail(chatId) {
+    const key = useChatScope().keyOf(chatId);
+    const trail = useSubagentView((s) => s.trails[key] ?? MAIN_AGENT);
+    return { trail, show: (next) => useSubagentView.getState().show(key, next) };
+}
+export function useOpenableSubagents(chatId) {
+    const { id } = useChatScope();
+    const refused = useSubagentSupport((s) => s.unsupported[id] === true);
+    // The structure and not the items, so a delta growing a reply does not walk the thread again.
+    const order = useChatRow(chatId, (row) => row?.order);
+    const structure = useChatRow(chatId, (row) => row?.structure);
+    return useMemo(() => (structure === undefined ? [] : openableSubagents(order ?? NO_ITEMS, structure, refused)), [order, structure, refused]);
+}
+export function useSubagentItem(chatId, toolUseId) {
+    const structure = useChatRow(chatId, (row) => row?.structure);
+    return useMemo(() => (structure === undefined ? null : subagentOf(structure, toolUseId)), [structure, toolUseId]);
+}

package/dist/chat/thumbnails.d.ts

@@ -0,0 +1,10 @@
+import type { ChatAttachmentUpload } from '@adecore/agent-contracts';
+export declare const THUMBNAIL_PX = 256;
+export interface ThumbnailCrop {
+    sx: number;
+    sy: number;
+    size: number;
+    out: number;
+}
+export declare function thumbnailCrop(width: number, height: number, max?: number): ThumbnailCrop;
+export declare function useUploadThumbnail(upload: ChatAttachmentUpload): string | null;

package/dist/chat/thumbnails.js

@@ -0,0 +1,89 @@
+import i18next from 'i18next';
+import { useEffect, useState } from 'react';
+import { uploadPreviewUrl } from './attachments.js';
+/* The edge of a composer thumbnail: a few times the 56 px it is drawn at, so a sharp screen still gets a sharp one. */
+export const THUMBNAIL_PX = 256;
+/* The square in the middle of an image that a thumbnail shows, the same part `object-cover` would. */
+export function thumbnailCrop(width, height, max = THUMBNAIL_PX) {
+    const size = Math.max(1, Math.min(width, height));
+    return {
+        sx: Math.max(0, Math.floor((width - size) / 2)),
+        sy: Math.max(0, Math.floor((height - size) / 2)),
+        size,
+        out: Math.min(max, size)
+    };
+}
+function bytesOf(base64) {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(new ArrayBuffer(binary.length));
+    for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes;
+}
+function dataUrlOf(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onerror = () => reject(reader.error ?? new Error(i18next.t('agent-chat:attachments.unreadableThumbnail')));
+        reader.onload = () => resolve(String(reader.result));
+        reader.readAsDataURL(blob);
+    });
+}
+/*
+ * 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.
+ */
+async function makeThumbnail(upload) {
+    try {
+        const bitmap = await createImageBitmap(new Blob([bytesOf(upload.data)], { type: upload.mime }));
+        const crop = thumbnailCrop(bitmap.width, bitmap.height);
+        const canvas = new OffscreenCanvas(crop.out, crop.out);
+        const context = canvas.getContext('2d');
+        if (!context) {
+            bitmap.close();
+            return uploadPreviewUrl(upload);
+        }
+        context.drawImage(bitmap, crop.sx, crop.sy, crop.size, crop.size, 0, 0, crop.out, crop.out);
+        bitmap.close();
+        return await dataUrlOf(await canvas.convertToBlob({ type: 'image/png' }));
+    }
+    catch {
+        return uploadPreviewUrl(upload);
+    }
+}
+// Keyed by the upload itself, so a composer that mounts again finds it and a removed file lets it go.
+const made = new WeakMap();
+const making = new WeakMap();
+function thumbnailOf(upload) {
+    let promise = making.get(upload);
+    if (!promise) {
+        promise = makeThumbnail(upload).then((url) => {
+            made.set(upload, url);
+            return url;
+        });
+        making.set(upload, promise);
+    }
+    return promise;
+}
+/* The thumbnail of an image the composer holds, or null while it is being made. */
+export function useUploadThumbnail(upload) {
+    const [ready, setReady] = useState(null);
+    const cached = made.get(upload);
+    useEffect(() => {
+        if (made.has(upload)) {
+            return;
+        }
+        let cancelled = false;
+        void thumbnailOf(upload).then((url) => {
+            if (!cancelled) {
+                setReady({ upload, url });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [upload]);
+    return cached ?? (ready?.upload === upload ? ready.url : null);
+}

package/dist/chat/timeline-flash.d.ts

@@ -0,0 +1,12 @@
+export interface TimelineFlash {
+    key: string;
+    rowId: string;
+    opens: boolean;
+    nonce: number;
+}
+interface TimelineFlashStore {
+    target: TimelineFlash | null;
+    flash(key: string, rowId: string, opens: boolean): void;
+}
+export declare const useTimelineFlash: import("zustand").UseBoundStore<import("zustand").StoreApi<TimelineFlashStore>>;
+export {};

package/dist/chat/timeline-flash.js

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+/* A little longer than the animation of `.chat-flash`, so a row that scrolls into view again later is neither lit nor opened a second time. */
+const FLASH_MS = 2000;
+export const useTimelineFlash = create((set, get) => ({
+    target: null,
+    flash(key, rowId, opens) {
+        const nonce = (get().target?.nonce ?? 0) + 1;
+        set({ target: { key, rowId, opens, nonce } });
+        const timer = setTimeout(() => {
+            if (get().target?.nonce === nonce) {
+                set({ target: null });
+            }
+        }, FLASH_MS);
+        timer.unref?.();
+    }
+}));

package/dist/chat/timeline-scroll.d.ts

@@ -0,0 +1,27 @@
+type Scroller = {
+    element: HTMLElement;
+    follow: (enabled: boolean) => void;
+    coveredHeight: () => number;
+};
+export declare function registerTimeline(chatId: string, element: HTMLElement | null, follow: Scroller['follow'], coveredHeight: Scroller['coveredHeight']): () => void;
+export declare function setTimelineAtEnd(chatId: string, atEnd: boolean): void;
+export declare function subscribeTimelineEnd(listener: () => void): () => void;
+export declare function timelineAtEnd(chatId: string): boolean;
+export declare function scrollTimelineToEnd(chatId: string, behavior?: ScrollBehavior): void;
+export declare function pageTimeline(chatId: string, direction: -1 | 1): boolean;
+export declare function registerMessageStepper(key: string, step: (direction: -1 | 1) => boolean): () => void;
+export declare function stepTimelineMessage(key: string, direction: -1 | 1): boolean;
+export declare function registerItemJumper(key: string, jump: (itemId: string) => void): () => void;
+export declare function jumpToTimelineItem(key: string, itemId: string): boolean;
+export type TurnTarget = 'prompt' | 'changes';
+type TurnJump = (turnId: string, target: TurnTarget) => void;
+export declare function registerTurnJumper(key: string, jump: TurnJump): () => void;
+export declare function jumpToTimelineTurn(key: string, turnId: string, target: TurnTarget): boolean;
+export declare function wantsEarlier(scroller: HTMLElement): boolean;
+export interface ReadingAnchor {
+    id: string;
+    offset: number;
+}
+export declare function firstRowInView(scroller: HTMLElement): ReadingAnchor | null;
+export declare function restoreAnchor(scroller: HTMLElement, anchor: ReadingAnchor): void;
+export {};

package/dist/chat/timeline-scroll.js

@@ -0,0 +1,152 @@
+// 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;
+const scrollers = new Map();
+/* The timeline hands its scroller over so the composer, which never sees it, can page through it. */
+export function registerTimeline(chatId, element, follow, coveredHeight) {
+    if (element === null) {
+        return () => undefined;
+    }
+    scrollers.set(chatId, { element, follow, coveredHeight });
+    return () => {
+        if (scrollers.get(chatId)?.element === element) {
+            scrollers.delete(chatId);
+            ends.delete(chatId);
+        }
+    };
+}
+/* The timeline owns following; the composer subscribes here to show its jump-to-end button. */
+const ends = new Map();
+const listeners = new Set();
+export function setTimelineAtEnd(chatId, atEnd) {
+    if (ends.get(chatId) === atEnd) {
+        return;
+    }
+    ends.set(chatId, atEnd);
+    for (const listener of listeners) {
+        listener();
+    }
+}
+export function subscribeTimelineEnd(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/* A thread nobody has scrolled is at its end, so the button stays away until there is a way back. */
+export function timelineAtEnd(chatId) {
+    return ends.get(chatId) ?? true;
+}
+export function scrollTimelineToEnd(chatId, behavior = 'smooth') {
+    const scroller = scrollers.get(chatId);
+    if (scroller) {
+        scroller.follow(true);
+        scroller.element.scrollTo({ top: scroller.element.scrollHeight, behavior });
+    }
+}
+/* Pages the thread of this chat up or down; false when it has no timeline on screen. */
+export function pageTimeline(chatId, direction) {
+    const scroller = scrollers.get(chatId);
+    if (!scroller) {
+        return false;
+    }
+    scroller.follow(false);
+    const { element } = scroller;
+    element.scrollBy({ top: direction * Math.max(0, element.clientHeight - scroller.coveredHeight()) * PAGE_OVERLAP, behavior: 'smooth' });
+    return true;
+}
+/*
+ * The keyboard steps from one message of the person to the next through the timeline on screen,
+ * which is the only side that knows where its rows start. Keyed with the scope's `keyOf`, the way
+ * the app's shortcuts name the chat that has the focus.
+ */
+const steppers = new Map();
+export function registerMessageStepper(key, step) {
+    steppers.set(key, step);
+    return () => {
+        if (steppers.get(key) === step) {
+            steppers.delete(key);
+        }
+    };
+}
+/* False when that chat has no timeline on screen or no message in that direction. */
+export function stepTimelineMessage(key, direction) {
+    return steppers.get(key)?.(direction) ?? false;
+}
+/*
+ * 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.
+ */
+const jumpers = new Map();
+const waitingJumps = new Map();
+export function registerItemJumper(key, jump) {
+    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);
+        }
+    };
+}
+/* False when that chat has no thread on screen; the jump then waits for the next one that registers. */
+export function jumpToTimelineItem(key, itemId) {
+    const jump = jumpers.get(key);
+    if (jump === undefined) {
+        waitingJumps.set(key, itemId);
+        return false;
+    }
+    jump(itemId);
+    return true;
+}
+const turnJumpers = new Map();
+const waitingTurnJumps = new Map();
+export function registerTurnJumper(key, jump) {
+    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);
+        }
+    };
+}
+/* False when that chat has no thread on screen; the jump then waits for the next one that registers. */
+export function jumpToTimelineTurn(key, turnId, target) {
+    const jump = turnJumpers.get(key);
+    if (jump === undefined) {
+        waitingTurnJumps.set(key, { turnId, target });
+        return false;
+    }
+    jump(turnId, target);
+    return true;
+}
+/* How near the top, in screens, the page before is asked for, so it is there before a reader reaches the edge. */
+const EARLIER_SCREENS = 1.5;
+export function wantsEarlier(scroller) {
+    return scroller.clientHeight > 0 && scroller.scrollTop < scroller.clientHeight * EARLIER_SCREENS;
+}
+/* The first row in view, found by the rows' `data-item-id`, for a thread that keeps every row in the document. */
+export function firstRowInView(scroller) {
+    const top = scroller.getBoundingClientRect().top;
+    for (const row of scroller.querySelectorAll('[data-item-id]')) {
+        const rect = row.getBoundingClientRect();
+        if (rect.bottom > top) {
+            return { id: row.dataset.itemId, offset: rect.top - top };
+        }
+    }
+    return null;
+}
+/* Puts the anchored row back where it was; nothing moves when that row is gone. */
+export function restoreAnchor(scroller, anchor) {
+    const row = scroller.querySelector(`[data-item-id="${CSS.escape(anchor.id)}"]`);
+    if (row !== null) {
+        scroller.scrollTop += row.getBoundingClientRect().top - scroller.getBoundingClientRect().top - anchor.offset;
+    }
+}

package/dist/chat/ui/AccountPill.d.ts

@@ -0,0 +1,3 @@
+export declare function AccountPill({ chatId }: {
+    chatId: string;
+}): import("react").JSX.Element | null;

package/dist/chat/ui/AccountPill.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { AccountDot } from '../../agents/AccountDot.js';
+import { useAccountChoice } from '../account-choice.js';
+import { useChats } from '../../state/chats.js';
+import { useChatScope } from '../../scope.js';
+import { Pill, Tooltip } from '@adecore/ui';
+function AccountPillOf({ provider, account }) {
+    const { t } = useTranslation('agent-chat');
+    const choice = useAccountChoice(provider, account);
+    if (choice === null) {
+        return null;
+    }
+    const name = choice.current === null ? choice.currentId : choice.nameOf(choice.current);
+    return (_jsx(Tooltip, { label: t('account.pill', { provider: choice.providerName, account: name }), children: _jsx(Pill, { icon: _jsx(AccountDot, { color: choice.current?.account.color, className: "size-1.75" }), children: _jsx("span", { className: "max-w-32 truncate", children: name }) }) }));
+}
+/* Which account a chat node runs under, from the status every client gets; only while its CLI has a choice of accounts. */
+export function AccountPill({ chatId }) {
+    const { keyOf } = useChatScope();
+    const provider = useChats((s) => s.statusByKey[keyOf(chatId)]?.info.provider);
+    const account = useChats((s) => s.statusByKey[keyOf(chatId)]?.info.account);
+    return provider === undefined ? null : _jsx(AccountPillOf, { provider: provider, account: account });
+}

package/dist/chat/ui/AnsiOutput.d.ts

@@ -0,0 +1,5 @@
+export declare function AnsiOutput({ text, limit, tailLines }: {
+    text: string;
+    limit?: number;
+    tailLines?: number;
+}): import("react").JSX.Element;

package/dist/chat/ui/AnsiOutput.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { parseAnsi } from '../logic/ansi.js';
+export function AnsiOutput({ text, limit, tailLines }) {
+    const { t } = useTranslation('agent-chat');
+    const { tokens, omitted } = useMemo(() => parseAnsi(text, { limit, tailLines }), [text, limit, tailLines]);
+    return (_jsxs(_Fragment, { children: [tokens.map((token, index) => (_jsx("span", { style: token.style, children: token.content }, index))), omitted > 0 && `\n${t('work.moreCharacters', { count: omitted })}`] }));
+}

package/dist/chat/ui/BookmarkMarker.d.ts

@@ -0,0 +1,8 @@
+import { type ChatBookmark } from '@adecore/agent-contracts';
+interface BookmarkMarkerProps {
+    chatId: string;
+    itemId: string;
+    bookmark: ChatBookmark | null;
+}
+export declare function BookmarkMarker({ chatId, itemId, bookmark }: BookmarkMarkerProps): import("react").JSX.Element | null;
+export {};

package/dist/chat/ui/BookmarkMarker.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bookmark, Pencil, X } from 'lucide-react';
+import { CHAT_BOOKMARK_LIMITS } from '@adecore/agent-contracts';
+import { nameBookmark, removeBookmark, useBookmarkNaming } from '../bookmarks.js';
+import { bookmarkLabel } from '../logic/bookmarks.js';
+import { useChatScope } from '../../scope.js';
+import { ButtonGroup, Icon, IconButton, Input } from '@adecore/ui';
+/*
+ * A bookmark as a chapter line across the thread, drawn before the message it marks. Without a
+ * bookmark it only stands while the name field of a mark still on its way to the host is open.
+ */
+export function BookmarkMarker({ chatId, itemId, bookmark }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const chatKey = scope.keyOf(chatId);
+    const naming = useBookmarkNaming((s) => s.chatKey === chatKey && s.itemId === itemId);
+    if (bookmark === null && !naming) {
+        return null;
+    }
+    return (_jsxs("div", { className: "group/bookmark mb-2 flex h-7 min-w-0 items-center gap-2 text-xs select-none", children: [_jsx(Icon, { icon: Bookmark, size: 14, className: "shrink-0 text-accent" }), naming ? (_jsx(NameField, { initial: bookmark?.name ?? '', onDone: (name) => {
+                    useBookmarkNaming.getState().close();
+                    if (name !== null) {
+                        void nameBookmark(scope, chatId, itemId, name, bookmark?.name);
+                    }
+                } })) : (bookmark !== null && (_jsx("span", { className: clsx('min-w-0 truncate', bookmark.name === undefined ? 'text-text-muted' : 'text-text'), children: bookmarkLabel(bookmark) }))), _jsx("span", { className: "min-w-6 grow border-t border-border" }), bookmark !== null && !naming && (_jsxs(ButtonGroup, { render: _jsx("span", {}), className: "-ml-2 max-w-0 shrink-0 overflow-hidden opacity-0 group-hover/bookmark:ml-0 group-hover/bookmark:max-w-none group-hover/bookmark:opacity-100 group-has-focus-visible/bookmark:ml-0 group-has-focus-visible/bookmark:max-w-none group-has-focus-visible/bookmark:opacity-100", children: [_jsx(IconButton, { icon: Pencil, size: "xs", label: t('bookmarks.rename'), onClick: () => useBookmarkNaming.getState().open(chatKey, itemId) }), _jsx(IconButton, { icon: X, size: "xs", label: t('bookmarks.remove'), onClick: () => void removeBookmark(scope, chatId, bookmark) })] }))] }));
+}
+/* Settles with the name on Enter or when the focus leaves, and with null on Escape, which keeps the name as it was. */
+function NameField({ initial, onDone }) {
+    const { t } = useTranslation('agent-chat');
+    const ref = useRef(null);
+    const settled = useRef(false);
+    // Again a frame later: the menu the field was opened from hands the focus back as it closes.
+    useEffect(() => {
+        ref.current?.focus();
+        const frame = requestAnimationFrame(() => ref.current?.focus());
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    const settle = (name) => {
+        if (settled.current) {
+            return;
+        }
+        settled.current = true;
+        onDone(name);
+    };
+    return (_jsx(Input, { ref: ref, size: "sm", defaultValue: initial, maxLength: CHAT_BOOKMARK_LIMITS.name, placeholder: t('bookmarks.namePlaceholder'), "aria-label": t('bookmarks.nameLabel'), className: "w-64 max-w-full min-w-0 select-text", onPointerDown: (e) => e.stopPropagation(), onFocus: (e) => e.currentTarget.select(), onBlur: (e) => settle(e.currentTarget.value), onKeyDown: (e) => {
+            e.stopPropagation();
+            if (e.key === 'Enter') {
+                settle(e.currentTarget.value);
+            }
+            if (e.key === 'Escape') {
+                settle(null);
+            }
+        } }));
+}

package/dist/chat/ui/BookmarkSubmenu.d.ts

@@ -0,0 +1,3 @@
+export declare function BookmarkSubmenu({ chatId }: {
+    chatId: string;
+}): import("react").JSX.Element | null;

package/dist/chat/ui/BookmarkSubmenu.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bookmark, Pencil, X } from 'lucide-react';
+import { goToBookmark, removeBookmark } from '../bookmarks.js';
+import { bookmarkLabel, bookmarksInThreadOrder } from '../logic/bookmarks.js';
+import { chatHost } from '../../host.js';
+import { useChatScope } from '../../scope.js';
+import { useChatRow } from '../../state/chats.js';
+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.
+ */
+export function BookmarkSubmenu({ chatId }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const bookmarks = useChatRow(chatId, (row) => row?.bookmarks);
+    const order = useChatRow(chatId, (row) => row?.order);
+    const place = chatHost().useChatPlace(chatId);
+    const sorted = useMemo(() => bookmarksInThreadOrder(bookmarks ?? [], order ?? []), [bookmarks, order]);
+    if (sorted.length === 0) {
+        return null;
+    }
+    const go = (itemId, rename) => {
+        if (!goToBookmark(scope, chatId, itemId, rename)) {
+            place.go();
+        }
+    };
+    return (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { children: [_jsx(Icon, { icon: Bookmark, size: 14 }), " ", t('bookmarks.menu')] }), _jsx(Menu.Popup, { className: "max-w-80 min-w-56", children: sorted.map((bookmark) => (_jsxs(Menu.Row, { "aria-label": bookmarkLabel(bookmark), children: [_jsxs(Menu.Item, { onClick: () => go(bookmark.itemId, false), children: [_jsx(Icon, { icon: Bookmark, size: 14, className: "shrink-0 text-accent" }), _jsx("span", { className: clsx('min-w-0 grow truncate', bookmark.name === undefined && 'text-text-muted'), children: bookmarkLabel(bookmark) })] }), _jsx(Menu.RowAction, { icon: Pencil, label: t('bookmarks.rename'), onClick: () => go(bookmark.itemId, true) }), _jsx(Menu.RowAction, { icon: X, label: t('bookmarks.remove'), onClick: () => void removeBookmark(scope, chatId, bookmark) })] }, bookmark.itemId))) })] }));
+}

package/dist/chat/ui/ChatActivity.d.ts

@@ -0,0 +1,7 @@
+import { type StatusWord } from '../../agents/status-look.js';
+export declare function ChatActivity({ chatId }: {
+    chatId: string;
+}): import("react").JSX.Element | null;
+export declare function StatusIcon({ word }: {
+    word: StatusWord;
+}): import("react").JSX.Element;

package/dist/chat/ui/ChatActivity.js

@@ -0,0 +1,84 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Activity, Square, SquareTerminal } from 'lucide-react';
+import { backgroundCounts } from '../activity.js';
+import { badgeCountOf, entryTimeOf, flyoutSubagents, statusWordOf, subagentTitle, summaryWordOf, taskIdOf } from '../subagent-list.js';
+import { useSubagentSupport } from '../subagent-support.js';
+import { canOpenSubagent, crumbOf, openFromMain, useSubagentTrail } from '../subagent-view.js';
+import { SubagentStopButton } from './SubagentStopButton.js';
+import { formatElapsedShort } from '@adecore/ui/format';
+import { Icon, IconButton, Popover, Surface, useNow } from '@adecore/ui';
+import { useChatRow } from '../../state/chats.js';
+import { chatHost } from '../../host.js';
+import { useChatScope } from '../../scope.js';
+import { useChatActions } from '../actions.js';
+import { statusLookOf } from '../../agents/status-look.js';
+const NO_TASKS = [];
+const NO_ITEMS = [];
+const ROW_BODY = 'flex min-h-9 min-w-0 grow items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left';
+/* What the chat keeps working on beside the thread, in one small line over the composer: its sub-agents and what runs in the background. */
+export function ChatActivity({ chatId }) {
+    const { t } = useTranslation('agent-chat');
+    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 tasks = chatHost().tasks.useTasks(id);
+    const words = useMemo(() => subagents.map((item) => {
+        const taskId = taskIdOf(item);
+        return statusWordOf(item, taskId === null ? null : (tasks?.[taskId] ?? null));
+    }), [subagents, tasks]);
+    const background = useChatRow(chatId, (row) => row?.info.background) ?? NO_TASKS;
+    if (subagents.length === 0 && background.length === 0) {
+        return null;
+    }
+    const { shells, monitors } = backgroundCounts(background);
+    const Slot = chatHost().SubagentSlot;
+    return (_jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-2", children: [subagents.length > 0 &&
+                (Slot === null ? (_jsx(Flyout, { icon: _jsx(StatusIcon, { word: summaryWordOf(words) }), label: t('activity.subagents', { count: badgeCountOf(words) }), heading: t('activity.subagents', { count: subagents.length }), children: _jsx(SubagentRows, { chatId: chatId, items: subagents }) })) : (_jsx(Slot, { chatId: chatId, items: subagents }))), background.length > 0 && (_jsx(Flyout, { icon: _jsx(Icon, { icon: shells > 0 ? SquareTerminal : Activity, size: 14 }), label: [shells > 0 && t('activity.shells', { count: shells }), monitors > 0 && t('activity.monitors', { count: monitors })]
+                    .filter(Boolean)
+                    .join(' · '), children: _jsx(BackgroundTaskRows, { chatId: chatId, tasks: background }) }))] }));
+}
+export function StatusIcon({ word }) {
+    const look = statusLookOf(word);
+    return _jsx(Icon, { icon: look.icon, size: 14, className: clsx('shrink-0', look.tone, look.spins && 'animate-spin') });
+}
+/* A chip that opens a list over it, headed by what the chip says unless the list counts more than the chip does. */
+function Flyout({ icon, label, heading = label, children }) {
+    return (_jsxs(Popover.Root, { children: [_jsxs(Surface, { render: _jsx(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", children: [icon, label] }), _jsxs(Popover.Popup, { side: "top", className: "w-80", children: [_jsx("div", { className: "px-2.5 pt-1.5 pb-1 text-xs text-text-faint", children: heading }), children] })] }));
+}
+/* One line of a flyout; with `onOpen` the line leads somewhere and closes the flyout on the way. */
+function ActivityRow({ icon, title, detail, time, onOpen, children }) {
+    const body = (_jsxs(_Fragment, { children: [icon, _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "truncate text-sm text-text", children: title }), detail && _jsx("span", { className: "truncate font-mono text-xs text-text-faint", children: detail })] }), time !== '' && _jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: time })] }));
+    // The stop is a button of its own beside the line, since a button cannot hold another.
+    return (_jsxs("div", { className: clsx('flex items-center gap-1 rounded-md', onOpen && 'hover:bg-surface-hover'), children: [onOpen ? (_jsx(Popover.Close, { className: ROW_BODY, onClick: onOpen, children: body })) : (_jsx("div", { className: ROW_BODY, children: body })), children] }));
+}
+/* Only drawn while the flyout is open, so the clock ticks for nobody otherwise. */
+function SubagentRows({ chatId, items }) {
+    const now = useNow(1000, items.some((item) => item.status === 'running'));
+    return items.map((item) => _jsx(SubagentEntry, { chatId: chatId, item: item, now: now }, item.id));
+}
+function SubagentEntry({ chatId, item, now }) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    const refused = useSubagentSupport((s) => s.unsupported[id] === true);
+    const task = chatHost().tasks.useTask(id, taskIdOf(item));
+    const { show } = useSubagentTrail(chatId);
+    const word = statusWordOf(item, task);
+    return (_jsx(ActivityRow, { icon: _jsx(StatusIcon, { word: word }), title: _jsxs(_Fragment, { children: [subagentTitle(item), _jsxs("span", { className: "sr-only", children: [", ", t(`common.status.${word}`)] })] }), time: entryTimeOf(item, task, now), onOpen: canOpenSubagent(item, refused) ? () => show(openFromMain(crumbOf(item))) : undefined, children: _jsx(SubagentStopButton, { chatId: chatId, item: item, className: "mr-1.5" }) }));
+}
+/* Only drawn while the flyout is open, so the clock ticks for nobody otherwise. */
+function BackgroundTaskRows({ chatId, tasks }) {
+    const { t } = useTranslation('agent-chat');
+    const now = useNow(1000);
+    const actions = useChatActions();
+    function stop(taskId) {
+        void actions.stopTask(chatId, taskId).catch((e) => {
+            const description = e instanceof Error ? e.message : t('subagents.noAnswer');
+            chatHost().notify({ kind: 'error', title: t('activity.stopFailed'), description });
+        });
+    }
+    return tasks.map((task) => (_jsx(ActivityRow, { icon: _jsx(Icon, { icon: task.kind === 'shell' ? SquareTerminal : Activity, size: 14, className: "shrink-0 text-text-faint" }), title: task.description || task.command || t(`activity.${task.kind}`), detail: task.description ? task.command : null, time: formatElapsedShort(now - task.startedAt), children: _jsx(IconButton, { icon: Square, size: "xs", label: t('activity.stop'), className: "mr-1.5", onClick: () => stop(task.id) }) }, task.id)));
+}