@adecore/agents-react 0.38.0 → 0.40.0

package/src/chat/quote.ts

@@ -10,6 +10,7 @@ export function quoteOf(selected: string): string | null {
         .join('\n')
         .replace(/^\n+|\n+$/g, '')
         .replace(/\n{3,}/g, '\n\n');
+
     return text.trim() === '' ? null : text;
 }
 
@@ -18,10 +19,12 @@ export function withQuote(quote: string, message: string): string {
     if (quote === '') {
         return message;
     }
+
     const block = quote
         .split('\n')
         .map((line) => (line === '' ? '>' : `> ${line}`))
         .join('\n');
+
     return message === '' ? block : `${block}\n\n${message}`;
 }
 
@@ -32,15 +35,19 @@ export function withQuote(quote: string, message: string): string {
 export function splitQuote(text: string): { quote: string; rest: string } | null {
     const lines = text.split('\n');
     let end = 0;
+
     while (end < lines.length && (lines[end] === '>' || lines[end]!.startsWith('> '))) {
         end += 1;
     }
+
     if (end === 0 || (end < lines.length && lines[end] !== '')) {
         return null;
     }
+
     const quote = lines
         .slice(0, end)
         .map((line) => line.slice(2))
         .join('\n');
+
     return { quote, rest: lines.slice(end + 1).join('\n') };
 }

package/src/chat/reading-width.ts

@@ -31,6 +31,7 @@ const WIDE_MEASURE = 1200;
 export function readingWidthStyle(width: ChatReadingWidth): CSSProperties {
     const measure = MEASURES[width];
     const bounded = Number.isFinite(measure);
+
     return {
         '--chat-measure': bounded ? `${measure}px` : '100%',
         '--chat-wide-measure': bounded ? `${WIDE_MEASURE}px` : '100%'

package/src/chat/recent-messages.ts

@@ -30,18 +30,23 @@ export function recentMessages(eligible: readonly MessageItem[], limit: number):
     const messages: RecentChatMessage[] = [];
     let characters = 0;
     let truncated = candidates.length < eligible.length;
+
     for (const item of candidates.toReversed()) {
         const message = clipped(item.text.trim());
         const remaining = MAX_TOTAL_CHARACTERS - characters;
+
         if (remaining <= 0) {
             truncated = true;
+
             break;
         }
+
         const text = message.text.length <= remaining ? message.text : `${message.text.slice(0, Math.max(0, remaining - 1))}…`;
         messages.unshift({ role: item.kind, text, createdAt: item.createdAt });
         characters += text.length;
         truncated ||= message.truncated || text.length < message.text.length;
     }
+
     return { messages, truncated };
 }
 

package/src/chat/resume-compaction-dismissals.ts

@@ -9,6 +9,7 @@ const useDismissals = create<{ byKey: Record<string, string> }>(() => ({ byKey:
 
 export function useResumeCompactionDismissal(chatId: string): string | null {
     const { keyOf } = useChatScope();
+
     return useDismissals((s) => s.byKey[keyOf(chatId)] ?? null);
 }
 

package/src/chat/stash.ts

@@ -50,6 +50,7 @@ function attachments(value: unknown): StashedAttachment[] {
     if (!Array.isArray(value)) {
         return [];
     }
+
     return value.filter(isRecord).map((entry) => ({
         name: typeof entry.name === 'string' ? entry.name : '',
         mime: typeof entry.mime === 'string' ? entry.mime : '',
@@ -61,11 +62,13 @@ 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 };
 }
 
@@ -74,11 +77,14 @@ export function parseStash(raw: string | null): StashedPrompt[] {
     if (raw === null) {
         return [];
     }
+
     try {
         const stored: unknown = JSON.parse(raw);
+
         if (!Array.isArray(stored)) {
             return [];
         }
+
         return stored
             .filter(isRecord)
             .filter((entry) => typeof entry.id === 'string' && typeof entry.text === 'string')
@@ -112,7 +118,9 @@ export function stashedFrom(draft: ChatDraft, id: string, now: number, chatId: s
     if (isEmptyDraft(draft)) {
         return null;
     }
+
     const kept = draft.quote !== '' && draft.quoteSource !== null;
+
     return {
         id,
         text: kept ? draft.text : withQuote(draft.quote, draft.text),
@@ -136,6 +144,7 @@ export const STASH_CHATS_LIMIT = 16;
 export function restorableChats(stashed: readonly string[], referable: ReadonlySet<string>, chatId: string): { chats: string[]; dropped: number } {
     const others = stashed.filter((id) => id !== chatId);
     const chats = others.filter((id) => referable.has(id));
+
     return { chats: chats.slice(0, STASH_CHATS_LIMIT), dropped: others.length - chats.length };
 }
 
@@ -155,10 +164,13 @@ 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, chatId: string): boolean {
     const entry = stashedFrom(draft, `stash-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, Date.now(), chatId);
+
     if (!entry) {
         return false;
     }
+
     write(withStashed(useStash.getState().prompts, entry));
+
     return true;
 }
 

package/src/chat/subagent-conversation.ts

@@ -1,5 +1,6 @@
 import i18next from 'i18next';
 import type { ChatApprovalItem, ChatItem, ChatQuestionItem, ChatSubagentResult } from '@adecore/agent-contracts';
+import { isWaiting } from '../state/chats';
 import { errorCode, isConnectionError, type ChatTransport } from '../transport';
 
 // What the panel opens on: the newest end of the conversation, which is where an agent that works is.
@@ -46,26 +47,28 @@ export function mergeNewest(
     pageCursor: string | null
 ): { items: ChatItem[]; cursor: string | null } {
     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 };
 }
 
 function pendingOf(items: readonly ChatItem[]): Array<ChatApprovalItem | ChatQuestionItem> {
-    return items.filter(
-        (item): item is ChatApprovalItem | ChatQuestionItem =>
-            (item.kind === 'approval' && item.decision === 'pending') || (item.kind === 'question' && item.state === 'pending')
-    );
+    return items.filter(isWaiting);
 }
 
 function messageOf(error: unknown): string {
@@ -115,6 +118,7 @@ export class SubagentConversation {
                 }
             })
         );
+
         return this.enqueue(() => this.readNewest(true));
     }
 
@@ -123,9 +127,12 @@ export class SubagentConversation {
         if (this.refreshWaiting) {
             return this.queue;
         }
+
         this.refreshWaiting = true;
+
         return this.enqueue(() => {
             this.refreshWaiting = false;
+
             return this.readNewest(false);
         });
     }
@@ -134,10 +141,13 @@ export class SubagentConversation {
         // A page on its way answers every call made meanwhile; a scroll asks for one on every frame.
         this.earlier ??= 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 });
                 const items = [...page.items, ...this.state.items];
@@ -147,13 +157,16 @@ export class SubagentConversation {
                     // 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) });
             }
         }).finally(() => {
             this.earlier = null;
         });
+
         return this.earlier;
     }
 
@@ -161,10 +174,13 @@ export class SubagentConversation {
         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);
         }
@@ -174,6 +190,7 @@ export class SubagentConversation {
         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,
@@ -189,6 +206,7 @@ export class SubagentConversation {
                 // 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 });
         }
@@ -201,6 +219,7 @@ export class SubagentConversation {
     private enqueue(work: () => Promise<void>): Promise<void> {
         const next = this.queue.then(() => (this.disposed ? undefined : work()));
         this.queue = next.catch(() => undefined);
+
         return next;
     }
 
@@ -208,6 +227,7 @@ export class SubagentConversation {
         if (this.disposed) {
             return;
         }
+
         this.state = { ...this.state, ...patch };
         this.onChange(this.state);
     }

package/src/chat/subagent-list.ts

@@ -31,9 +31,11 @@ export function statusWordOf(item: ChatSubagentItem, task: SubagentTask | null):
     if (item.status === 'failed' && task?.status === 'cancelled') {
         return 'cancelled';
     }
+
     if (item.status === 'running' && task?.status === 'open' && task.paused !== undefined) {
         return 'paused';
     }
+
     return item.status;
 }
 
@@ -42,9 +44,11 @@ export type TaskRowState = StatusWord | 'waiting';
 
 export function taskRowStateOf(item: ChatSubagentItem, task: SubagentTask | null, child: ChatInfo | undefined): TaskRowState {
     const word = statusWordOf(item, task);
+
     if (word === 'running' && (child?.status === 'needs-you' || (child?.requests?.length ?? 0) > 0)) {
         return 'waiting';
     }
+
     return word;
 }
 
@@ -63,6 +67,7 @@ export function flyoutSubagents(order: readonly string[], structure: Readonly<Re
     return activeSubagents(
         order.flatMap((id) => {
             const item = structure[id];
+
             return item === undefined ? [] : [item];
         })
     );
@@ -76,6 +81,7 @@ export function summaryWordOf(words: readonly StatusWord[]): StatusWord {
 /* The number on the badge: the ones still at work, a paused one included, and all of them once none is. */
 export function badgeCountOf(words: readonly StatusWord[]): number {
     const active = words.filter((word) => word === 'running' || word === 'paused').length;
+
     return active > 0 ? active : words.length;
 }
 
@@ -85,18 +91,23 @@ export function entryTimeOf(item: ChatSubagentItem, task: SubagentTask | null, n
     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) });
 }
 
@@ -112,12 +123,15 @@ export function stopOf(item: ChatSubagentItem, turnRunning: boolean): SubagentSt
     if (item.status !== 'running') {
         return null;
     }
+
     if (item.origin === 'ruimte') {
         return item.childId === undefined ? null : 'task';
     }
+
     if (item.native?.agentId) {
         return 'native';
     }
+
     return turnRunning ? null : 'mark';
 }
 

package/src/chat/subagent-support.ts

@@ -16,6 +16,7 @@ export const useSubagentSupport = create<SubagentSupportStore>((set, get) => ({
         if (get().unsupported[scopeId]) {
             return;
         }
+
         set({ unsupported: { ...get().unsupported, [scopeId]: true } });
     }
 }));

package/src/chat/subagent-view.ts

@@ -77,6 +77,7 @@ export function subagentOf(structure: Readonly<Record<string, ChatItem>>, toolUs
 export function openableSubagents(order: readonly string[], structure: Record<string, ChatItem>, machineRefused: boolean): ChatSubagentItem[] {
     return order.flatMap((id) => {
         const item = structure[id];
+
         return item?.kind === 'subagent' && canOpenSubagent(item, machineRefused) ? [item] : [];
     });
 }
@@ -97,19 +98,24 @@ export const useSubagentView = create<SubagentViewStore>((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;
     }
 }));
@@ -118,6 +124,7 @@ export const useSubagentView = create<SubagentViewStore>((set, get) => ({
 export function useSubagentTrail(chatId: string): { trail: SubagentTrail; show(trail: SubagentTrail): void } {
     const key = useChatScope().keyOf(chatId);
     const trail = useSubagentView((s) => s.trails[key] ?? MAIN_AGENT);
+
     return { trail, show: (next) => useSubagentView.getState().show(key, next) };
 }
 
@@ -127,10 +134,12 @@ export function useOpenableSubagents(chatId: string): ChatSubagentItem[] {
     // 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 structure === undefined ? [] : openableSubagents(order ?? NO_ITEMS, structure, refused);
 }
 
 export function useSubagentItem(chatId: string, toolUseId: string): ChatSubagentItem | null {
     const structure = useChatRow(chatId, (row) => row?.structure);
+
     return structure === undefined ? null : subagentOf(structure, toolUseId);
 }

package/src/chat/thumbnails.ts

@@ -18,6 +18,7 @@ export interface ThumbnailCrop {
 /* The square in the middle of an image that a thumbnail shows, the same part `object-cover` would. */
 export function thumbnailCrop(width: number, height: number, max: number = THUMBNAIL_PX): ThumbnailCrop {
     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)),
@@ -29,9 +30,11 @@ export function thumbnailCrop(width: number, height: number, max: number = THUMB
 function bytesOf(base64: string): Uint8Array<ArrayBuffer> {
     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;
 }
 
@@ -55,12 +58,16 @@ async function makeThumbnail(upload: ChatAttachmentUpload): Promise<string> {
         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);
@@ -73,13 +80,17 @@ const making = new WeakMap<ChatAttachmentUpload, Promise<string>>();
 
 function thumbnailOf(upload: ChatAttachmentUpload): Promise<string> {
     let promise = making.get(upload);
+
     if (!promise) {
         promise = makeThumbnail(upload).then((url) => {
             made.set(upload, url);
+
             return url;
         });
+
         making.set(upload, promise);
     }
+
     return promise;
 }
 
@@ -92,12 +103,15 @@ export function useUploadThumbnail(upload: ChatAttachmentUpload): string | null
         if (made.has(upload)) {
             return;
         }
+
         let cancelled = false;
+
         void thumbnailOf(upload).then((url) => {
             if (!cancelled) {
                 setReady({ upload, url });
             }
         });
+
         return () => {
             cancelled = true;
         };

package/src/chat/timeline-flash.ts

@@ -25,11 +25,13 @@ export const useTimelineFlash = create<TimelineFlashStore>((set, get) => ({
     flash(key, rowId, opens, block) {
         const nonce = (get().target?.nonce ?? 0) + 1;
         set({ target: { key, rowId, opens, nonce, ...(block ? { block } : {}) } });
+
         const timer = setTimeout(() => {
             if (get().target?.nonce === nonce) {
                 set({ target: null });
             }
         }, FLASH_MS);
+
         (timer as { unref?: () => void }).unref?.();
     }
 }));

package/src/chat/timeline-scroll.ts

@@ -27,7 +27,9 @@ export function registerTimeline(
     if (element === null) {
         return () => undefined;
     }
+
     scrollers.set(chatId, { element, follow, coveredHeight });
+
     return () => {
         if (scrollers.get(chatId)?.element === element) {
             scrollers.delete(chatId);
@@ -40,7 +42,9 @@ export function setTimelineAtEnd(chatId: string, atEnd: boolean): void {
     if (ends.get(chatId) === atEnd) {
         return;
     }
+
     ends.set(chatId, atEnd);
+
     for (const listener of listeners) {
         listener();
     }
@@ -48,6 +52,7 @@ export function setTimelineAtEnd(chatId: string, atEnd: boolean): void {
 
 export function subscribeTimelineEnd(listener: () => void): () => void {
     listeners.add(listener);
+
     return () => {
         listeners.delete(listener);
     };
@@ -60,6 +65,7 @@ export function timelineAtEnd(chatId: string): boolean {
 
 export function scrollTimelineToEnd(chatId: string, behavior: ScrollBehavior = 'smooth'): void {
     const scroller = scrollers.get(chatId);
+
     if (scroller) {
         scroller.follow(true);
         scroller.element.scrollTo({ top: scroller.element.scrollHeight, behavior });
@@ -69,12 +75,15 @@ export function scrollTimelineToEnd(chatId: string, behavior: ScrollBehavior = '
 /* Pages the thread of this chat up or down; false when it has no timeline on screen. */
 export function pageTimeline(chatId: string, direction: -1 | 1): boolean {
     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;
 }
 
@@ -87,6 +96,7 @@ const steppers = new Map<string, (direction: -1 | 1) => boolean>();
 
 export function registerMessageStepper(key: string, step: (direction: -1 | 1) => boolean): () => void {
     steppers.set(key, step);
+
     return () => {
         if (steppers.get(key) === step) {
             steppers.delete(key);
@@ -107,17 +117,21 @@ export function stepTimelineMessage(key: string, direction: -1 | 1): boolean {
 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);
@@ -126,11 +140,15 @@ function waitingJumps<T>(): { register(key: string, jump: (target: T) => void):
         },
         jump(key, target) {
             const jump = jumpers.get(key);
+
             if (jump === undefined) {
                 waiting.set(key, { target, at: Date.now() });
+
                 return false;
             }
+
             jump(target);
+
             return true;
         }
     };
@@ -159,6 +177,7 @@ export function jumpToTimelineItem(key: string, itemId: string, options: ItemJum
 export type TurnTarget = 'prompt' | 'changes';
 
 type TurnJump = (turnId: string, target: TurnTarget) => void;
+
 const turnJumps = waitingJumps<{ turnId: string; target: TurnTarget }>();
 
 export function registerTurnJumper(key: string, jump: TurnJump): () => void {
@@ -186,18 +205,22 @@ export interface ReadingAnchor {
 /* 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: HTMLElement): ReadingAnchor | null {
     const top = scroller.getBoundingClientRect().top;
+
     for (const row of scroller.querySelectorAll<HTMLElement>('[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: HTMLElement, anchor: ReadingAnchor): void {
     const row = scroller.querySelector<HTMLElement>(`[data-item-id="${CSS.escape(anchor.id)}"]`);
+
     if (row !== null) {
         scroller.scrollTop += row.getBoundingClientRect().top - scroller.getBoundingClientRect().top - anchor.offset;
     }

package/src/chat/ui/AccountPill.tsx

@@ -9,10 +9,13 @@ import { Pill, Tooltip } from '@adecore/ui';
 function AccountPillOf({ provider, account }: { provider: AgentKind; account: string | undefined }) {
     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 (
         <Tooltip label={t('account.pill', { provider: choice.providerName, account: name })}>
             <Pill icon={<AccountDot color={choice.current?.account.color} className="size-1.75" />}>
@@ -27,5 +30,6 @@ export function AccountPill({ chatId }: { chatId: string }) {
     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 : <AccountPillOf provider={provider} account={account} />;
 }

package/src/chat/ui/AnsiOutput.tsx

@@ -4,6 +4,7 @@ import { parseAnsi } from '../logic/ansi';
 export function AnsiOutput({ text, limit, tailLines }: { text: string; limit?: number; tailLines?: number }) {
     const { t } = useTranslation('agent-chat');
     const { tokens, omitted } = parseAnsi(text, { limit, tailLines });
+
     return (
         <>
             {tokens.map((token, index) => (