@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/chat/subagent-conversation.js

@@ -0,0 +1,150 @@
+import i18next from 'i18next';
+import { errorCode, isConnectionError } from '../transport';
+// What the panel opens on: the newest end of the conversation, which is where an agent that works is.
+export const SUBAGENT_PAGE = 60;
+export const INITIAL_CONVERSATION = {
+    status: 'loading',
+    items: [],
+    cursor: null,
+    live: false,
+    loadingEarlier: false,
+    error: null,
+    unsupported: false
+};
+/*
+ * The newest page laid over what is on screen. An item that is already there is replaced where it
+ * stands and a new one goes after them all. A page that shares nothing with what is held means more
+ * happened than one page holds, so what is held is dropped for it rather than shown with a hole.
+ */
+export const mergeNewest = (current, currentCursor, page, pageCursor) => {
+    const known = new Map(current.map((item, index) => [item.id, index]));
+    if (current.length > 0 && page.length > 0 && !page.some((item) => known.has(item.id))) {
+        return { items: page, cursor: pageCursor };
+    }
+    const items = [...current];
+    for (const item of page) {
+        const index = known.get(item.id);
+        if (index === undefined) {
+            items.push(item);
+        }
+        else {
+            items[index] = item;
+        }
+    }
+    return { items, cursor: current.length === 0 ? pageCursor : currentCursor };
+};
+const messageOf = (error) => (error instanceof Error ? error.message : i18next.t('agent-chat:subagents.noAnswer'));
+/*
+ * One subagent's conversation as a panel follows it. Opening asks for the newest page and holds the
+ * conversation on the machine, which then says whenever it grew; each time, the newest page is asked
+ * again and laid over what is there. A socket that comes back holds it again, and letting go is the
+ * last thing it says.
+ */
+export class SubagentConversation {
+    transport;
+    chatId;
+    toolUseId;
+    onChange;
+    unsubscribe = [];
+    state = INITIAL_CONVERSATION;
+    disposed = false;
+    // One request at a time, so a refresh never lands under an older page that arrived after it.
+    queue = Promise.resolve();
+    refreshWaiting = false;
+    constructor(transport, chatId, toolUseId, onChange) {
+        this.transport = transport;
+        this.chatId = chatId;
+        this.toolUseId = toolUseId;
+        this.onChange = onChange;
+    }
+    get current() {
+        return this.state;
+    }
+    start() {
+        this.unsubscribe.push(this.transport.on('chat.subagentChanged', (event) => {
+            if (event.chatId === this.chatId && event.toolUseId === this.toolUseId) {
+                void this.refresh();
+            }
+        }), this.transport.subscribeStatus((status) => {
+            if (status === 'open') {
+                void this.enqueue(() => this.readNewest(true));
+            }
+        }));
+        return this.enqueue(() => this.readNewest(true));
+    }
+    /* The newest page again; calls that arrive while one waits become that one. */
+    refresh() {
+        if (this.refreshWaiting) {
+            return this.queue;
+        }
+        this.refreshWaiting = true;
+        return this.enqueue(() => {
+            this.refreshWaiting = false;
+            return this.readNewest(false);
+        });
+    }
+    loadEarlier() {
+        return this.enqueue(async () => {
+            const cursor = this.state.cursor;
+            if (cursor === null) {
+                return;
+            }
+            this.set({ loadingEarlier: true });
+            try {
+                const page = await this.ask({ cursor, limit: SUBAGENT_PAGE });
+                this.set({ items: [...page.items, ...this.state.items], cursor: page.history.cursor, live: page.live, loadingEarlier: false });
+            }
+            catch (error) {
+                if (errorCode(error) === 'history-expired') {
+                    // The record was written again under this panel; what it holds now is the only truth.
+                    this.set({ items: [], cursor: null, loadingEarlier: false });
+                    await this.readNewest(false);
+                    return;
+                }
+                this.set({ loadingEarlier: false, error: messageOf(error) });
+            }
+        });
+    }
+    dispose() {
+        if (this.disposed) {
+            return;
+        }
+        this.disposed = true;
+        for (const off of this.unsubscribe.splice(0)) {
+            off();
+        }
+        if (this.transport.status === 'open') {
+            void this.transport.request('chat.subagent', { chatId: this.chatId, toolUseId: this.toolUseId, limit: 1, watch: false }).catch(() => undefined);
+        }
+    }
+    async readNewest(watch) {
+        try {
+            const page = await this.ask({ limit: SUBAGENT_PAGE, ...(watch ? { watch: true } : {}) });
+            const merged = mergeNewest(this.state.items, this.state.cursor, page.items, page.history.cursor);
+            this.set({ status: 'ready', items: merged.items, cursor: merged.cursor, live: page.live, error: null });
+        }
+        catch (error) {
+            if (this.state.status === 'ready' && isConnectionError(error)) {
+                // What is on screen stays; the socket that comes back asks again.
+                return;
+            }
+            const unsupported = errorCode(error) === 'unknown-request';
+            this.set({ status: 'failed', error: messageOf(error), unsupported });
+        }
+    }
+    ask(extra) {
+        return this.transport.request('chat.subagent', { chatId: this.chatId, toolUseId: this.toolUseId, ...extra });
+    }
+    enqueue(work) {
+        const next = this.queue.then(() => (this.disposed ? undefined : work()));
+        this.queue = next.catch(() => undefined);
+        return next;
+    }
+    set(patch) {
+        if (this.disposed) {
+            return;
+        }
+        this.state = { ...this.state, ...patch };
+        this.onChange(this.state);
+    }
+}

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

@@ -0,0 +1,16 @@
+import type { ChatItem, ChatSubagentItem } from '@ruimte/agent-contracts';
+import type { StatusWord } from '../agents/status-look';
+import type { SubagentTask } from '../host';
+export declare const subagentTitle: (item: ChatSubagentItem) => string;
+export declare const taskIdOf: (item: ChatSubagentItem) => string | null;
+export declare const statusWordOf: (item: ChatSubagentItem, task: SubagentTask | null) => StatusWord;
+export declare const flyoutSubagents: (order: readonly string[], structure: Readonly<Record<string, ChatItem>>) => ChatSubagentItem[];
+export declare const summaryWordOf: (words: readonly StatusWord[]) => StatusWord;
+export declare const badgeCountOf: (words: readonly StatusWord[]) => number;
+export declare const entryTimeOf: (item: ChatSubagentItem, task: SubagentTask | null, now: number) => string;
+export type SubagentStop = 'task' | 'mark';
+export declare const stopOf: (item: ChatSubagentItem, turnRunning: boolean) => SubagentStop | null;
+export declare const stopLabel: (stop: SubagentStop) => string;
+export type ComposerStop = 'turn' | 'turn-and-subagents';
+export declare const composerStopOf: (shiftKey: boolean) => ComposerStop;
+export declare const composerStopLabel: () => string;

package/dist/chat/subagent-list.js

@@ -0,0 +1,76 @@
+import i18next from 'i18next';
+import { formatMoment } from '@ruimte/ui/format/datetime';
+import { formatElapsedShort } from '@ruimte/ui/format/duration';
+export const subagentTitle = (item) => item.description || item.summary || item.subagentType || i18next.t('agent-chat:rows.subagent.label');
+/* The task a row stands for, whose id the host wrote into the row's own. */
+export const taskIdOf = (item) => (item.origin === 'ruimte' && item.id.startsWith('task-') ? item.id.slice(5) : null);
+/* A cancelled task is a failed row on the wire and a paused one a running row, and only the task itself still says which it is. */
+export const statusWordOf = (item, task) => {
+    if (item.status === 'failed' && task?.status === 'cancelled') {
+        return 'cancelled';
+    }
+    if (item.status === 'running' && task?.status === 'open' && task.paused !== undefined) {
+        return 'paused';
+    }
+    return item.status;
+};
+/*
+ * 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.
+ */
+export const 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) => {
+        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);
+};
+/* The one state the badge shows for all of them: work in progress first, then work held up, then whatever went wrong. */
+export const summaryWordOf = (words) => ['running', 'paused', 'failed', 'cancelled'].find((word) => words.includes(word)) ?? 'done';
+/* The number on the badge: the ones still at work, a paused one included, and all of them once none is. */
+export const badgeCountOf = (words) => {
+    const active = words.filter((word) => word === 'running' || word === 'paused').length;
+    return active > 0 ? active : words.length;
+};
+/* The time on the right of an entry: how long it has run so far, or how long it took once it settled. */
+export const entryTimeOf = (item, task, now) => {
+    // A task's own record says when it was given and settled; the row copies those, but may lag behind it.
+    const startedAt = task?.createdAt ?? item.startedAt;
+    const finishedAt = task === null ? item.finishedAt : (task.settledAt ?? item.finishedAt);
+    const word = statusWordOf(item, task);
+    if (word === 'paused') {
+        const until = task?.paused?.until;
+        return until === undefined
+            ? i18next.t('agent-chat:common.status.paused')
+            : i18next.t('agent-chat:activity.pausedUntil', { time: formatMoment(until, now) });
+    }
+    if (item.status === 'running') {
+        return startedAt > 0 ? formatElapsedShort(now - startedAt) : '';
+    }
+    if (startedAt <= 0 || finishedAt === null || finishedAt < startedAt) {
+        return i18next.t(`agent-chat:common.status.${word}`);
+    }
+    return i18next.t(`agent-chat:activity.took.${word}`, { duration: formatElapsedShort(finishedAt - startedAt) });
+};
+export const stopOf = (item, turnRunning) => {
+    if (item.status !== 'running') {
+        return null;
+    }
+    if (item.origin === 'ruimte') {
+        return item.childId === undefined ? null : 'task';
+    }
+    return turnRunning ? null : 'mark';
+};
+export const stopLabel = (stop) => stop === 'task' ? i18next.t('agent-chat:subagents.stop.task') : i18next.t('agent-chat:subagents.stop.mark');
+export const composerStopOf = (shiftKey) => (shiftKey ? 'turn-and-subagents' : 'turn');
+export const composerStopLabel = () => i18next.t('agent-chat:composer.stop');

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

@@ -0,0 +1,6 @@
+interface SubagentSupportStore {
+    unsupported: Record<string, true>;
+    markUnsupported(scopeId: string): void;
+}
+export declare const useSubagentSupport: import("zustand").UseBoundStore<import("zustand").StoreApi<SubagentSupportStore>>;
+export {};

package/dist/chat/subagent-support.js

@@ -0,0 +1,14 @@
+import { create } from 'zustand';
+/*
+ * Whether a host can open a subagent's conversation is learned by asking once rather than from a
+ * version: the first refusal hides the button on that host's rows that carry no pointer of their own.
+ */
+export const useSubagentSupport = create((set, get) => ({
+    unsupported: {},
+    markUnsupported(scopeId) {
+        if (get().unsupported[scopeId]) {
+            return;
+        }
+        set({ unsupported: { ...get().unsupported, [scopeId]: true } });
+    }
+}));

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

@@ -0,0 +1,33 @@
+import type { ChatItem, ChatSubagentItem } from '@ruimte/agent-contracts';
+export interface SubagentStep {
+    toolUseId: string;
+    description: string;
+}
+export type SubagentTrail = readonly SubagentStep[];
+export interface BreadcrumbStep {
+    label: string;
+    depth: number;
+    current: boolean;
+}
+export declare const MAIN_AGENT: SubagentTrail;
+export declare const crumbOf: (item: ChatSubagentItem) => SubagentStep;
+export declare const openFromMain: (step: SubagentStep) => SubagentTrail;
+export declare const openBelow: (trail: SubagentTrail, step: SubagentStep) => SubagentTrail;
+export declare const trailTo: (trail: SubagentTrail, depth: number) => SubagentTrail;
+export declare const stepBack: (trail: SubagentTrail) => SubagentTrail;
+export declare const showsComposer: (trail: SubagentTrail) => boolean;
+export declare const breadcrumbOf: (trail: SubagentTrail) => BreadcrumbStep[];
+export declare const canOpenSubagent: (item: ChatSubagentItem, machineRefused: boolean) => boolean;
+export declare const openableSubagents: (order: readonly string[], structure: Record<string, ChatItem>, machineRefused: boolean) => ChatSubagentItem[];
+interface SubagentViewStore {
+    trails: Record<string, SubagentTrail>;
+    show(key: string, trail: SubagentTrail): void;
+    back(key: string): boolean;
+}
+export declare const useSubagentView: import("zustand").UseBoundStore<import("zustand").StoreApi<SubagentViewStore>>;
+export declare const useSubagentTrail: (chatId: string) => {
+    trail: SubagentTrail;
+    show(trail: SubagentTrail): void;
+};
+export declare const useOpenableSubagents: (chatId: string) => ChatSubagentItem[];
+export {};

package/dist/chat/subagent-view.js

@@ -0,0 +1,65 @@
+import i18next from 'i18next';
+import { useMemo } from 'react';
+import { create } from 'zustand';
+import { useChatScope } from '../scope';
+import { useChatRow } from '../state/chats';
+import { useSubagentSupport } from './subagent-support';
+export const MAIN_AGENT = [];
+const NO_ITEMS = [];
+export const crumbOf = (item) => ({ toolUseId: item.toolUseId, description: item.description });
+const stepLabel = (step) => 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 const openFromMain = (step) => [step];
+export const openBelow = (trail, step) => [...trail, step];
+export const trailTo = (trail, depth) => (depth <= 0 ? MAIN_AGENT : trail.slice(0, depth));
+export const stepBack = (trail) => trailTo(trail, trail.length - 1);
+/* A sub-agent's conversation is read back, so there is nobody to write to. */
+export const showsComposer = (trail) => trail.length === 0;
+/* The crumbs after the chat's own title, which the bar draws as the first crumb and the way back. */
+export const breadcrumbOf = (trail) => 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 const canOpenSubagent = (item, machineRefused) => item.native !== undefined || !machineRefused;
+/* The subagents a chat can open, in the order the thread has them. */
+export const openableSubagents = (order, structure, machineRefused) => 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 const 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 const 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]);
+};

package/dist/chat/thumbnails.d.ts

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

package/dist/chat/thumbnails.js

@@ -0,0 +1,87 @@
+import i18next from 'i18next';
+import { useEffect, useState } from 'react';
+import { uploadPreviewUrl } from './attachments';
+/* 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 const 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)
+    };
+};
+const 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;
+};
+const dataUrlOf = (blob) => 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.
+ */
+const makeThumbnail = async (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();
+const 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 const 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-scroll.d.ts

@@ -0,0 +1,16 @@
+type Scroller = {
+    element: HTMLElement;
+    follow: (enabled: boolean) => void;
+    coveredHeight: () => number;
+};
+export declare const registerTimeline: (chatId: string, element: HTMLElement | null, follow: Scroller['follow'], coveredHeight: Scroller['coveredHeight']) => (() => void);
+export declare const setTimelineAtEnd: (chatId: string, atEnd: boolean) => void;
+export declare const subscribeTimelineEnd: (listener: () => void) => (() => void);
+export declare const timelineAtEnd: (chatId: string) => boolean;
+export declare const scrollTimelineToEnd: (chatId: string) => void;
+export declare const pageTimeline: (chatId: string, direction: -1 | 1) => boolean;
+export declare const registerMessageStepper: (key: string, step: (direction: -1 | 1) => boolean) => (() => void);
+export declare const stepTimelineMessage: (key: string, direction: -1 | 1) => boolean;
+export declare const registerItemJumper: (key: string, jump: (itemId: string) => void) => (() => void);
+export declare const jumpToTimelineItem: (key: string, itemId: string) => boolean;
+export {};

package/dist/chat/timeline-scroll.js

@@ -0,0 +1,100 @@
+// 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 const 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 const setTimelineAtEnd = (chatId, atEnd) => {
+    if (ends.get(chatId) === atEnd) {
+        return;
+    }
+    ends.set(chatId, atEnd);
+    for (const listener of listeners) {
+        listener();
+    }
+};
+export const 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 const timelineAtEnd = (chatId) => ends.get(chatId) ?? true;
+export const scrollTimelineToEnd = (chatId) => {
+    const scroller = scrollers.get(chatId);
+    if (scroller) {
+        scroller.follow(true);
+        scroller.element.scrollTo({ top: scroller.element.scrollHeight, behavior: 'smooth' });
+    }
+};
+/* Pages the thread of this chat up or down; false when it has no timeline on screen. */
+export const 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 const 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 const stepTimelineMessage = (key, direction) => 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 const 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 const jumpToTimelineItem = (key, itemId) => {
+    const jump = jumpers.get(key);
+    if (jump === undefined) {
+        waitingJumps.set(key, itemId);
+        return false;
+    }
+    jump(itemId);
+    return true;
+};

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,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { AccountDot } from '../../agents/AccountDot';
+import { useAccountChoice } from '../account-choice';
+import { useChats } from '../../state/chats';
+import { useChatScope } from '../../scope';
+import { Pill } from '@ruimte/ui/Pill';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+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/BookmarkMarker.d.ts

@@ -0,0 +1,8 @@
+import { type ChatBookmark } from '@ruimte/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 {};