@adecore/agents-react 0.40.2 → 0.40.4

package/dist/chat/chat-client.js

@@ -398,7 +398,8 @@ export class ChatClient {
       const page = result.history === undefined ? undefined : {
         history: result.history,
         pending: result.pending ?? [],
-        subagents: result.subagents ?? []
+        subagents: result.subagents ?? [],
+        outline: result.outline ?? []
       };
       this.sink.reset(chatId, result.info, result.items, page);
     }

package/dist/chat/logic/scrubber.d.ts

@@ -1,5 +1,5 @@
-import type { ChatBookmark } from '@adecore/agent-contracts';
-import type { TimelineRow } from './timeline.js';
+import type { ChatBookmark, ChatItem } from '@adecore/agent-contracts';
+import { type TimelineRow } from './timeline.js';
 export type TickKind = 'person' | 'wake' | 'bookmark';
 export interface ScrubberTick {
     id: string;
@@ -15,7 +15,8 @@ export declare const TICK_HEIGHT_PX = 2;
 export declare const STRIP_WIDTH_PX = 24;
 export declare const STRIP_INSET_PX = 8;
 export declare const STRIP_CLEARANCE_PX: number;
-export declare function ticksOf(rows: readonly TimelineRow[], marks?: ReadonlyMap<string, ChatBookmark>): ScrubberTick[];
+export declare const EARLIER_ROW = -1;
+export declare function ticksOf(rows: readonly TimelineRow[], marks?: ReadonlyMap<string, ChatBookmark>, earlier?: readonly ChatItem[], bookmarks?: readonly ChatBookmark[]): ScrubberTick[];
 export interface TickSlot {
     first: number;
     last: number;

package/dist/chat/logic/scrubber.js

@@ -1,3 +1,4 @@
+import { agentTurnLabel } from './timeline.js';
 import { DEFAULT_READING_WIDTH, readingMeasure } from '../reading-width.js';
 /* With fewer messages than this the thread is short enough to scroll through, and the strip is noise. */
 export const SCRUBBER_MIN_TICKS = 3;
@@ -15,9 +16,56 @@ const WIDTH_NEAR_PERSON_PX = 12;
 const WIDTH_NEAR_WAKE_PX = 8;
 const WIDTH_PERSON_PX = 8;
 const WIDTH_WAKE_PX = 5;
-/* `marks` is what `bookmarkRows` answers: the bookmark drawn at a row, by row id. */
-export function ticksOf(rows, marks = new Map()) {
-  return rows.flatMap((row, rowIndex) => {
+/* Below every row, so a tick before the rows this client holds sorts first and its stretch reaches the first row of the thread. */
+export const EARLIER_ROW = -1;
+/* A message before the rows this client holds, as the outline (`outlineItems`) has it; its row id is the one the thread will draw it with. */
+function earlierTick(item, bookmarks) {
+  const bookmark = bookmarks.get(item.id) ?? null;
+  const rowIndex = EARLIER_ROW;
+  if (item.kind === 'user') {
+    const text = item.text !== '' ? item.text : (item.attachments ?? []).map(attachment => attachment.name).join(', ');
+    return {
+      id: item.id,
+      rowIndex,
+      kind: 'person',
+      text,
+      createdAt: item.createdAt,
+      turnId: item.turnId,
+      bookmark
+    };
+  }
+  if (item.kind === 'turn' && ((item.taskIds?.length ?? 0) > 0 || (item.messageFrom?.length ?? 0) > 0)) {
+    return {
+      id: `start-${item.id}`,
+      rowIndex,
+      kind: 'wake',
+      text: agentTurnLabel(item),
+      createdAt: item.createdAt,
+      turnId: item.id,
+      bookmark: null
+    };
+  }
+  if (item.kind === 'assistant' && bookmark !== null) {
+    return {
+      id: item.id,
+      rowIndex,
+      kind: 'bookmark',
+      text: item.text,
+      createdAt: item.createdAt,
+      turnId: item.turnId,
+      bookmark
+    };
+  }
+  return null;
+}
+/*
+ * `marks` is what `bookmarkRows` answers: the bookmark drawn at a row, by row id. `earlier` is the
+ * outline of the thread before `rows`, and `bookmarks` the chat's, which mark the ticks of that part.
+ */
+export function ticksOf(rows, marks = new Map(), earlier = [], bookmarks = []) {
+  const byItem = new Map(bookmarks.map(bookmark => [bookmark.itemId, bookmark]));
+  const before = earlier.flatMap(item => earlierTick(item, byItem) ?? []);
+  const held = rows.flatMap((row, rowIndex) => {
     const bookmark = marks.get(row.id) ?? null;
     if (row.kind === 'user') {
       // A message of only attachments still has a place in the thread; its names stand in for the text.
@@ -70,6 +118,7 @@ export function ticksOf(rows, marks = new Map()) {
       bookmark
     }];
   });
+  return before.length === 0 ? held : [...before, ...held];
 }
 /* `marked` and `found` say per message whether it has a bookmark and whether a find hit falls under it; absent, none has. */
 export function layoutTicks(kinds, height, marked = [], found = []) {

package/dist/chat/ui/Timeline.js

@@ -13,7 +13,7 @@ import { registerItemJumper, registerMessageStepper, registerTimeline, registerT
 import { useTimelineFlash } from '../timeline-flash.js';
 import { useChatPreferences } from '../preferences.js';
 import { readingMeasure, readingWidthStyle } from '../reading-width.js';
-import { SCRUBBER_MIN_TICKS, STRIP_INSET_PX, STRIP_WIDTH_PX, messagesInView, stepMessage, threadPaddingLeft, STRIP_CLEARANCE_PX, tickOfRow, ticksOf, ticksWithHits } from '../logic/scrubber.js';
+import { SCRUBBER_MIN_TICKS, STRIP_INSET_PX, STRIP_WIDTH_PX, messagesInView, stepMessage, threadPaddingLeft, STRIP_CLEARANCE_PX, tickOfRow, ticksOf, ticksWithHits, EARLIER_ROW } from '../logic/scrubber.js';
 import { EMPTY_TARGET, readTimelineTarget, revealUiReplyBlock, uiReplyJump, withCurrentText } from '../logic/timeline-target.js';
 import { forkRefusal } from '../logic/fork.js';
 import { UiReplyNavigationContext } from './reply-context.js';
@@ -410,11 +410,12 @@ export function Timeline({
   const items = useChatRow(chatId, row_0 => row_0?.structure);
   const activeTurnId = useChatRow(chatId, row_1 => row_1?.info.activeTurnId ?? null);
   const bookmarks = useChatRow(chatId, row_2 => row_2?.bookmarks);
-  const visuals = useChatRow(chatId, row_3 => row_3?.visuals);
+  const outlineBefore = useChatRow(chatId, row_3 => row_3?.outlineBefore);
+  const visuals = useChatRow(chatId, row_4 => row_4?.visuals);
   const forkedTurns = useForkedTurns(chatId);
-  const info = useChatRow(chatId, row_4 => row_4?.info ?? null);
-  const historyPending = useChatRow(chatId, row_5 => row_5?.historyPending === true);
-  const cursor = useChatRow(chatId, row_6 => row_6?.history?.cursor ?? null);
+  const info = useChatRow(chatId, row_5 => row_5?.info ?? null);
+  const historyPending = useChatRow(chatId, row_6 => row_6?.historyPending === true);
+  const cursor = useChatRow(chatId, row_7 => row_7?.history?.cursor ?? null);
   const scope = useChatScope();
   const {
     id: scopeId,
@@ -499,7 +500,7 @@ export function Timeline({
   // A chat that took a turn before is one whose thread has not come in yet, not one to greet.
   const welcome = !loadingHistory && welcomes && empty && (info === null || info.usage.turns === 0 && info.activeTurnId === null);
   const marks = useMemo(() => bookmarkRows(rows, bookmarks ?? [], items ?? {}), [rows, bookmarks, items]);
-  const ticks = useMemo(() => ticksOf(rows, marks), [rows, marks]);
+  const ticks = useMemo(() => ticksOf(rows, marks, outlineBefore, bookmarks), [rows, marks, outlineBefore, bookmarks]);
   // A message a jump is on its way to; it may first have to open the turn its reply folded into.
   const [seeking, setSeeking] = useState(null);
   const [landing, setLanding] = useState(null);
@@ -601,7 +602,7 @@ export function Timeline({
     }
     // Ref measurements can change offsets after render. Commit those offsets before the first paint.
     const measured = virtualizer.getVirtualItems();
-    if (virtualRows.length !== measured.length || virtualRows.some((row_7, index_1) => row_7.key !== measured[index_1]?.key || row_7.start !== measured[index_1]?.start || row_7.size !== measured[index_1]?.size)) {
+    if (virtualRows.length !== measured.length || virtualRows.some((row_8, index_1) => row_8.key !== measured[index_1]?.key || row_8.start !== measured[index_1]?.start || row_8.size !== measured[index_1]?.size)) {
       settleLayout();
       return;
     }
@@ -640,16 +641,16 @@ export function Timeline({
       return;
     }
     const anchor = anchorRef.current;
-    const index_2 = moved && anchor !== null && !followRef.current ? rows.findIndex(row_8 => row_8.id === anchor.id) : -1;
+    const index_2 = moved && anchor !== null && !followRef.current ? rows.findIndex(row_9 => row_9.id === anchor.id) : -1;
     if (anchor !== null && index_2 !== -1) {
       virtualizer.getTotalSize();
       element_3.scrollTop = virtualizer.measurementsCache[index_2].start - anchor.offset;
       return;
     }
-    const row_9 = virtualizer.getVirtualItemForOffset(element_3.scrollTop);
-    anchorRef.current = row_9 === undefined ? null : {
-      id: String(row_9.key),
-      offset: row_9.start - element_3.scrollTop
+    const row_10 = virtualizer.getVirtualItemForOffset(element_3.scrollTop);
+    anchorRef.current = row_10 === undefined ? null : {
+      id: String(row_10.key),
+      offset: row_10.start - element_3.scrollTop
     };
   });
   // Close to the top, the page before goes in; again after each page that left too little above the reader.
@@ -759,10 +760,11 @@ export function Timeline({
     if (!tick_0) {
       return;
     }
-    if (tick_0.bookmark !== null) {
+    // A message before the rows this client holds comes in page by page until its row is there.
+    if (tick_0.bookmark !== null || tick_0.rowIndex === EARLIER_ROW) {
       setLanding(null);
       setSeeking({
-        itemId: tick_0.bookmark.itemId,
+        itemId: tick_0.bookmark?.itemId ?? tick_0.id,
         key: keyOf(chatId)
       });
       return;
@@ -798,7 +800,7 @@ export function Timeline({
       }
       return;
     }
-    const index_6 = rows.findIndex(row_10 => row_10.id === seeking.itemId);
+    const index_6 = rows.findIndex(row_11 => row_11.id === seeking.itemId);
     if (index_6 !== -1) {
       setSeeking(null);
       showRowAtTop(virtualizer, followRef, index_6);
@@ -872,9 +874,9 @@ export function Timeline({
       turnId: turnId_0,
       target: target_0
     } = revealing;
-    const changes = target_0 === 'changes' ? rows.findIndex(row_11 => row_11.kind === 'changed-files' && row_11.turnId === turnId_0) : -1;
+    const changes = target_0 === 'changes' ? rows.findIndex(row_12 => row_12.kind === 'changed-files' && row_12.turnId === turnId_0) : -1;
     const opening = order?.map(id_0 => items?.[id_0]).find(item_0 => item_0?.kind === 'user' && item_0.turnId === turnId_0);
-    const found_0 = changes !== -1 ? changes : rows.findIndex(row_12 => row_12.id === opening?.id || row_12.id === `start-${turnId_0}` || row_12.id === `fold-${turnId_0}`);
+    const found_0 = changes !== -1 ? changes : rows.findIndex(row_13 => row_13.id === opening?.id || row_13.id === `start-${turnId_0}` || row_13.id === `fold-${turnId_0}`);
     if (found_0 !== -1) {
       setRevealing(null);
       showRowAtTop(virtualizer, followRef, found_0);
@@ -903,8 +905,8 @@ export function Timeline({
       if (fork === null) {
         return false;
       }
-      const row_13 = useChats.getState().byKey[keyOf(chatId)];
-      return forkRefusal(row_13?.info ?? null, row_13?.structure[turnId_2]) === null;
+      const row_14 = useChats.getState().byKey[keyOf(chatId)];
+      return forkRefusal(row_14?.info ?? null, row_14?.structure[turnId_2]) === null;
     },
     fork: turnId_3 => fork?.(chatId, turnId_3)
   }), [keyOf, chatId, fork]);
@@ -1028,22 +1030,22 @@ export function Timeline({
                     children: /*#__PURE__*/_jsx(FindRevealContext.Provider, {
                       value: chatFind.reveal,
                       children: virtualRows.map(virtualRow_1 => {
-                        const row_14 = rows[virtualRow_1.index];
+                        const row_15 = rows[virtualRow_1.index];
                         return /*#__PURE__*/_jsx(ThreadRow, {
-                          row: row_14,
+                          row: row_15,
                           previous: virtualRow_1.index > 0 ? rows[virtualRow_1.index - 1] : null,
                           index: virtualRow_1.index,
                           top: virtualRow_1.start,
                           measure: virtualizer.measureElement,
                           chatId: chatId,
-                          flashNonce: flash !== null && flashedRow === row_14.id ? flash.nonce : null,
-                          bookmark: marks.get(row_14.id) ?? null,
+                          flashNonce: flash !== null && flashedRow === row_15.id ? flash.nonce : null,
+                          bookmark: marks.get(row_15.id) ?? null,
                           toggleGroup: groups.toggle,
                           toggleTurn: turns.toggle,
                           toggleSubagent: subagents.toggle,
                           openSubagent: openSubagent,
                           openConversation: openConversation
-                        }, row_14.id);
+                        }, row_15.id);
                       })
                     })
                   })

package/dist/chat/ui/composer/ComposerControls.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'react';
-import type { ChatInfo } from '@adecore/agent-contracts';
+import { type ChatInfo } from '@adecore/agent-contracts';
 import { type Shortcut } from '@adecore/ui';
 import { type ComposerSendAction, type ComposerSendDraft } from '../../../host.js';
 import type { StashedPrompt } from '../../stash.js';

package/dist/chat/ui/composer/ComposerControls.js

@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { ArrowUp, ChevronDown, Play, Plus, Square } from 'lucide-react';
+import { holdsConversation } from '@adecore/agent-contracts';
 import { Button, ErrorBoundary, Icon, Menu, Tooltip } from '@adecore/ui';
 import { useChatHost } from '../../../host.js';
 import { useChatScope } from '../../../scope.js';
@@ -219,7 +220,7 @@ function SendButton(t0) {
 }
 /* The row under the box: attach, the chat's settings, the stash, the app's own control, and stop and send. */
 export function ComposerControls(t0) {
-  const $ = _c(76);
+  const $ = _c(78);
   const {
     chatId,
     info,
@@ -253,22 +254,30 @@ export function ComposerControls(t0) {
     t1 = $[3];
   }
   const model = t1;
-  const started = info.agentSessionId !== null || info.usage.turns > 0;
   let t2;
-  if ($[4] !== info.provider || $[5] !== providerFixed || $[6] !== providers || $[7] !== started) {
-    t2 = started || providerFixed ? providers.filter(entry_1 => entry_1.kind === info.provider) : providers.filter(_temp2);
-    $[4] = info.provider;
-    $[5] = providerFixed;
-    $[6] = providers;
-    $[7] = started;
-    $[8] = t2;
+  if ($[4] !== info) {
+    t2 = holdsConversation(info);
+    $[4] = info;
+    $[5] = t2;
   } else {
-    t2 = $[8];
+    t2 = $[5];
   }
-  const pickable = t2;
+  const started = t2;
   let t3;
-  if ($[9] !== attachable || $[10] !== t || $[11] !== writable) {
-    t3 = attachable && /*#__PURE__*/_jsx(Tooltip, {
+  if ($[6] !== info.provider || $[7] !== providerFixed || $[8] !== providers || $[9] !== started) {
+    t3 = started || providerFixed ? providers.filter(entry_1 => entry_1.kind === info.provider) : providers.filter(_temp2);
+    $[6] = info.provider;
+    $[7] = providerFixed;
+    $[8] = providers;
+    $[9] = started;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const pickable = t3;
+  let t4;
+  if ($[11] !== attachable || $[12] !== t || $[13] !== writable) {
+    t4 = attachable && /*#__PURE__*/_jsx(Tooltip, {
       label: t("composer.attach"),
       name: true,
       children: /*#__PURE__*/_jsx("button", {
@@ -282,16 +291,16 @@ export function ComposerControls(t0) {
         })
       })
     });
-    $[9] = attachable;
-    $[10] = t;
-    $[11] = writable;
-    $[12] = t3;
+    $[11] = attachable;
+    $[12] = t;
+    $[13] = writable;
+    $[14] = t4;
   } else {
-    t3 = $[12];
+    t4 = $[14];
   }
-  let t4;
-  if ($[13] !== onFiles) {
-    t4 = /*#__PURE__*/_jsx("input", {
+  let t5;
+  if ($[15] !== onFiles) {
+    t5 = /*#__PURE__*/_jsx("input", {
       ref: fileInputRef,
       type: "file",
       multiple: true,
@@ -301,15 +310,15 @@ export function ComposerControls(t0) {
         e.target.value = "";
       }
     });
-    $[13] = onFiles;
-    $[14] = t4;
+    $[15] = onFiles;
+    $[16] = t5;
   } else {
-    t4 = $[14];
+    t5 = $[16];
   }
-  const t5 = controls.configurationPending || !writable;
-  let t6;
-  if ($[15] !== controls || $[16] !== info.selection) {
-    t6 = (id, value) => controls.configure({
+  const t6 = controls.configurationPending || !writable;
+  let t7;
+  if ($[17] !== controls || $[18] !== info.selection) {
+    t7 = (id, value) => controls.configure({
       selection: {
         ...info.selection,
         options: {
@@ -318,41 +327,41 @@ export function ComposerControls(t0) {
         }
       }
     });
-    $[15] = controls;
-    $[16] = info.selection;
-    $[17] = t6;
+    $[17] = controls;
+    $[18] = info.selection;
+    $[19] = t7;
   } else {
-    t6 = $[17];
+    t7 = $[19];
   }
-  let t7;
-  if ($[18] !== controls) {
-    t7 = runtimeMode => controls.configure({
+  let t8;
+  if ($[20] !== controls) {
+    t8 = runtimeMode => controls.configure({
       runtimeMode
     });
-    $[18] = controls;
-    $[19] = t7;
+    $[20] = controls;
+    $[21] = t8;
   } else {
-    t7 = $[19];
+    t8 = $[21];
   }
-  const t8 = busy || !writable;
-  let t9;
-  if ($[20] !== accountChoice || $[21] !== controls.chooseAccount || $[22] !== started) {
-    t9 = accountChoice === null ? null : {
+  const t9 = busy || !writable;
+  let t10;
+  if ($[22] !== accountChoice || $[23] !== controls.chooseAccount || $[24] !== started) {
+    t10 = accountChoice === null ? null : {
       choice: accountChoice,
       started,
       onPick: controls.chooseAccount
     };
-    $[20] = accountChoice;
-    $[21] = controls.chooseAccount;
-    $[22] = started;
-    $[23] = t9;
+    $[22] = accountChoice;
+    $[23] = controls.chooseAccount;
+    $[24] = started;
+    $[25] = t10;
   } else {
-    t9 = $[23];
+    t10 = $[25];
   }
-  let t10;
-  if ($[24] !== controls.chooseModel || $[25] !== controls.compact || $[26] !== controls.modelPickerOpen || $[27] !== controls.setModelPickerOpen || $[28] !== info.effectiveRuntimeMode || $[29] !== info.permissionMode || $[30] !== info.provider || $[31] !== info.runtimeMode || $[32] !== info.selection || $[33] !== info.usage || $[34] !== model || $[35] !== pickable || $[36] !== t5 || $[37] !== t6 || $[38] !== t7 || $[39] !== t8 || $[40] !== t9) {
-    t10 = /*#__PURE__*/_jsx(RunSettings, {
-      disabled: t5,
+  let t11;
+  if ($[26] !== controls.chooseModel || $[27] !== controls.compact || $[28] !== controls.modelPickerOpen || $[29] !== controls.setModelPickerOpen || $[30] !== info.effectiveRuntimeMode || $[31] !== info.permissionMode || $[32] !== info.provider || $[33] !== info.runtimeMode || $[34] !== info.selection || $[35] !== info.usage || $[36] !== model || $[37] !== pickable || $[38] !== t10 || $[39] !== t6 || $[40] !== t7 || $[41] !== t8 || $[42] !== t9) {
+    t11 = /*#__PURE__*/_jsx(RunSettings, {
+      disabled: t6,
       providers: pickable,
       provider: info.provider,
       selection: info.selection,
@@ -363,47 +372,47 @@ export function ComposerControls(t0) {
       open: controls.modelPickerOpen,
       onOpenChange: controls.setModelPickerOpen,
       onModel: controls.chooseModel,
-      onOption: t6,
-      onMode: t7,
+      onOption: t7,
+      onMode: t8,
       usage: info.usage,
-      compactDisabled: t8,
+      compactDisabled: t9,
       onCompact: controls.compact,
-      account: t9
-    });
-    $[24] = controls.chooseModel;
-    $[25] = controls.compact;
-    $[26] = controls.modelPickerOpen;
-    $[27] = controls.setModelPickerOpen;
-    $[28] = info.effectiveRuntimeMode;
-    $[29] = info.permissionMode;
-    $[30] = info.provider;
-    $[31] = info.runtimeMode;
-    $[32] = info.selection;
-    $[33] = info.usage;
-    $[34] = model;
-    $[35] = pickable;
-    $[36] = t5;
-    $[37] = t6;
-    $[38] = t7;
-    $[39] = t8;
-    $[40] = t9;
-    $[41] = t10;
-  } else {
-    t10 = $[41];
-  }
-  let t11;
-  if ($[42] !== onRestore) {
-    t11 = /*#__PURE__*/_jsx(StashPicker, {
-      onRestore: onRestore
+      account: t10
     });
-    $[42] = onRestore;
+    $[26] = controls.chooseModel;
+    $[27] = controls.compact;
+    $[28] = controls.modelPickerOpen;
+    $[29] = controls.setModelPickerOpen;
+    $[30] = info.effectiveRuntimeMode;
+    $[31] = info.permissionMode;
+    $[32] = info.provider;
+    $[33] = info.runtimeMode;
+    $[34] = info.selection;
+    $[35] = info.usage;
+    $[36] = model;
+    $[37] = pickable;
+    $[38] = t10;
+    $[39] = t6;
+    $[40] = t7;
+    $[41] = t8;
+    $[42] = t9;
     $[43] = t11;
   } else {
     t11 = $[43];
   }
   let t12;
-  if ($[44] !== Slot || $[45] !== chatId || $[46] !== insert || $[47] !== scope || $[48] !== t || $[49] !== writable) {
-    t12 = Slot !== null && /*#__PURE__*/_jsx(ErrorBoundary, {
+  if ($[44] !== onRestore) {
+    t12 = /*#__PURE__*/_jsx(StashPicker, {
+      onRestore: onRestore
+    });
+    $[44] = onRestore;
+    $[45] = t12;
+  } else {
+    t12 = $[45];
+  }
+  let t13;
+  if ($[46] !== Slot || $[47] !== chatId || $[48] !== insert || $[49] !== scope || $[50] !== t || $[51] !== writable) {
+    t13 = Slot !== null && /*#__PURE__*/_jsx(ErrorBoundary, {
       label: t("composer.slotFailed"),
       resetKeys: [chatId],
       compact: true,
@@ -415,39 +424,39 @@ export function ComposerControls(t0) {
         insert: insert
       })
     });
-    $[44] = Slot;
-    $[45] = chatId;
-    $[46] = insert;
-    $[47] = scope;
-    $[48] = t;
-    $[49] = writable;
-    $[50] = t12;
+    $[46] = Slot;
+    $[47] = chatId;
+    $[48] = insert;
+    $[49] = scope;
+    $[50] = t;
+    $[51] = writable;
+    $[52] = t13;
   } else {
-    t12 = $[50];
+    t13 = $[52];
   }
-  let t13;
-  if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = /*#__PURE__*/_jsx("span", {
+  let t14;
+  if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = /*#__PURE__*/_jsx("span", {
       className: "grow"
     });
-    $[51] = t13;
+    $[53] = t14;
   } else {
-    t13 = $[51];
+    t14 = $[53];
   }
-  let t14;
-  if ($[52] !== dictationToolbar) {
-    t14 = /*#__PURE__*/_jsx("div", {
+  let t15;
+  if ($[54] !== dictationToolbar) {
+    t15 = /*#__PURE__*/_jsx("div", {
       ref: dictationToolbar,
       className: "flex items-center pl-1 empty:hidden [&_.icon-btn]:rounded-full"
     });
-    $[52] = dictationToolbar;
-    $[53] = t14;
+    $[54] = dictationToolbar;
+    $[55] = t15;
   } else {
-    t14 = $[53];
+    t15 = $[55];
   }
-  let t15;
-  if ($[54] !== busy || $[55] !== controls) {
-    t15 = busy && /*#__PURE__*/_jsx(Tooltip, {
+  let t16;
+  if ($[56] !== busy || $[57] !== controls) {
+    t16 = busy && /*#__PURE__*/_jsx(Tooltip, {
       label: composerStopLabel(),
       name: true,
       children: /*#__PURE__*/_jsx("button", {
@@ -459,15 +468,15 @@ export function ComposerControls(t0) {
         })
       })
     });
-    $[54] = busy;
-    $[55] = controls;
-    $[56] = t15;
+    $[56] = busy;
+    $[57] = controls;
+    $[58] = t16;
   } else {
-    t15 = $[56];
+    t16 = $[58];
   }
-  let t16;
-  if ($[57] !== controls.configurationPending || $[58] !== send.onContinue || $[59] !== t) {
-    t16 = send.onContinue !== null && /*#__PURE__*/_jsx(Tooltip, {
+  let t17;
+  if ($[59] !== controls.configurationPending || $[60] !== send.onContinue || $[61] !== t) {
+    t17 = send.onContinue !== null && /*#__PURE__*/_jsx(Tooltip, {
       label: t("composer.continueHint"),
       children: /*#__PURE__*/_jsxs(Button, {
         variant: "primary",
@@ -480,56 +489,56 @@ export function ComposerControls(t0) {
         }), t("composer.continue")]
       })
     });
-    $[57] = controls.configurationPending;
-    $[58] = send.onContinue;
-    $[59] = t;
-    $[60] = t16;
+    $[59] = controls.configurationPending;
+    $[60] = send.onContinue;
+    $[61] = t;
+    $[62] = t17;
   } else {
-    t16 = $[60];
+    t17 = $[62];
   }
-  let t17;
-  if ($[61] !== send || $[62] !== writable) {
-    t17 = send.onContinue === null && send.visible && /*#__PURE__*/_jsx(SendButton, {
+  let t18;
+  if ($[63] !== send || $[64] !== writable) {
+    t18 = send.onContinue === null && send.visible && /*#__PURE__*/_jsx(SendButton, {
       send: send,
       writable: writable
     });
-    $[61] = send;
-    $[62] = writable;
-    $[63] = t17;
+    $[63] = send;
+    $[64] = writable;
+    $[65] = t18;
   } else {
-    t17 = $[63];
+    t18 = $[65];
   }
-  let t18;
-  if ($[64] !== t14 || $[65] !== t15 || $[66] !== t16 || $[67] !== t17) {
-    t18 = /*#__PURE__*/_jsxs("div", {
+  let t19;
+  if ($[66] !== t15 || $[67] !== t16 || $[68] !== t17 || $[69] !== t18) {
+    t19 = /*#__PURE__*/_jsxs("div", {
       className: "flex h-9 shrink-0 items-center gap-0.5 rounded-full bg-surface-hover",
-      children: [t14, t15, t16, t17]
+      children: [t15, t16, t17, t18]
     });
-    $[64] = t14;
-    $[65] = t15;
-    $[66] = t16;
-    $[67] = t17;
-    $[68] = t18;
+    $[66] = t15;
+    $[67] = t16;
+    $[68] = t17;
+    $[69] = t18;
+    $[70] = t19;
   } else {
-    t18 = $[68];
+    t19 = $[70];
   }
-  let t19;
-  if ($[69] !== t10 || $[70] !== t11 || $[71] !== t12 || $[72] !== t18 || $[73] !== t3 || $[74] !== t4) {
-    t19 = /*#__PURE__*/_jsxs("div", {
+  let t20;
+  if ($[71] !== t11 || $[72] !== t12 || $[73] !== t13 || $[74] !== t19 || $[75] !== t4 || $[76] !== t5) {
+    t20 = /*#__PURE__*/_jsxs("div", {
       className: "flex items-center gap-2 pt-3 pr-3.5 pb-3.5 pl-5 @max-md/composer:gap-1.5 @max-md/composer:p-3 @max-md/composer:pt-2.5",
-      children: [t3, t4, t10, t11, t12, t13, t18]
+      children: [t4, t5, t11, t12, t13, t14, t19]
     });
-    $[69] = t10;
-    $[70] = t11;
-    $[71] = t12;
-    $[72] = t18;
-    $[73] = t3;
-    $[74] = t4;
-    $[75] = t19;
+    $[71] = t11;
+    $[72] = t12;
+    $[73] = t13;
+    $[74] = t19;
+    $[75] = t4;
+    $[76] = t5;
+    $[77] = t20;
   } else {
-    t19 = $[75];
+    t20 = $[77];
   }
-  return t19;
+  return t20;
 }
 function _temp2(entry_2) {
   return entry_2.installed && entry_2.capabilities.chat;

package/dist/chat/ui/rows/row-rhythm.js

@@ -40,7 +40,7 @@ export function replyHeader(row, previous) {
 }
 // A transform also shifts a descendant's sticky position after it was resolved against the scrollport.
 export function rowPosition(kind, top) {
-  return kind === 'visual' ? {
+  return kind === 'visual' || kind === 'app-card' ? {
     top
   } : {
     transform: `translateY(${top}px)`

package/dist/state/chats.d.ts

@@ -8,6 +8,7 @@ export interface ChatState {
     history?: ChatHistoryPage;
     waitingBefore?: string[];
     subagentsBefore?: string[];
+    outlineBefore?: ChatItem[];
     bookmarks?: ChatBookmark[];
     visuals?: ChatVisual[];
 }
@@ -16,6 +17,7 @@ export interface ChatPage {
     history: ChatHistoryPage;
     pending: ChatItem[];
     subagents?: ChatSubagentItem[];
+    outline?: ChatItem[];
 }
 export type ChatsById = Record<string, ChatState>;
 export type ChatStatuses = Record<string, Pick<ChatState, 'info'>>;

package/dist/state/chats.js

@@ -29,7 +29,8 @@ function stateOf(info, items, page) {
     order,
     history: page.history,
     waitingBefore: before.map(item => item.id),
-    subagentsBefore: subagents.map(item => item.id)
+    subagentsBefore: subagents.map(item => item.id),
+    outlineBefore: (page.outline ?? []).filter(item => !(item.id in byId))
   };
 }
 /* An older host names no place in the thread, and it always hands over the whole of it. */
@@ -83,6 +84,7 @@ export function prependPage(state, cursor, page) {
       history: _history,
       waitingBefore: _waitingBefore,
       subagentsBefore: _subagentsBefore,
+      outlineBefore: _outlineBefore,
       ...rest
     } = loaded;
     return {
@@ -94,6 +96,7 @@ export function prependPage(state, cursor, page) {
   }
   const waitingBefore = (state.waitingBefore ?? []).filter(id => !olderIds.has(id));
   const subagentsBefore = (state.subagentsBefore ?? []).filter(id => !olderIds.has(id));
+  const outlineBefore = (state.outlineBefore ?? []).filter(item => !olderIds.has(item.id));
   return {
     ...loaded,
     items,
@@ -101,7 +104,8 @@ export function prependPage(state, cursor, page) {
     order,
     history: page.history,
     waitingBefore,
-    subagentsBefore
+    subagentsBefore,
+    outlineBefore
   };
 }
 /* The requests that still wait, oldest first: those from before the page this client holds, then the thread's own. */

package/package.json

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

package/src/chat/chat-client.ts

@@ -443,7 +443,9 @@ export class ChatClient {
             }
         } else {
             const page =
-                result.history === undefined ? undefined : { history: result.history, pending: result.pending ?? [], subagents: result.subagents ?? [] };
+                result.history === undefined
+                    ? undefined
+                    : { history: result.history, pending: result.pending ?? [], subagents: result.subagents ?? [], outline: result.outline ?? [] };
 
             this.sink.reset(chatId, result.info, result.items, page);
         }

package/src/chat/logic/scrubber.ts

@@ -1,5 +1,5 @@
-import type { ChatBookmark } from '@adecore/agent-contracts';
-import type { TimelineRow } from './timeline';
+import type { ChatBookmark, ChatItem } from '@adecore/agent-contracts';
+import { agentTurnLabel, type TimelineRow } from './timeline';
 import { DEFAULT_READING_WIDTH, readingMeasure } from '../reading-width';
 
 // The strip of ticks at the left edge of a chat view, as numbers; the component only draws what comes out of here.
@@ -9,7 +9,7 @@ export type TickKind = 'person' | 'wake' | 'bookmark';
 
 export interface ScrubberTick {
     id: string;
-    /* The row of the timeline the tick jumps to. */
+    /* The row of the timeline the tick jumps to; `EARLIER_ROW` for a message before the part of the thread this client holds. */
     rowIndex: number;
     kind: TickKind;
     text: string;
@@ -41,9 +41,45 @@ const WIDTH_NEAR_WAKE_PX = 8;
 const WIDTH_PERSON_PX = 8;
 const WIDTH_WAKE_PX = 5;
 
-/* `marks` is what `bookmarkRows` answers: the bookmark drawn at a row, by row id. */
-export function ticksOf(rows: readonly TimelineRow[], marks: ReadonlyMap<string, ChatBookmark> = new Map()): ScrubberTick[] {
-    return rows.flatMap((row, rowIndex): ScrubberTick[] => {
+/* Below every row, so a tick before the rows this client holds sorts first and its stretch reaches the first row of the thread. */
+export const EARLIER_ROW = -1;
+
+/* A message before the rows this client holds, as the outline (`outlineItems`) has it; its row id is the one the thread will draw it with. */
+function earlierTick(item: ChatItem, bookmarks: ReadonlyMap<string, ChatBookmark>): ScrubberTick | null {
+    const bookmark = bookmarks.get(item.id) ?? null;
+    const rowIndex = EARLIER_ROW;
+
+    if (item.kind === 'user') {
+        const text = item.text !== '' ? item.text : (item.attachments ?? []).map((attachment) => attachment.name).join(', ');
+
+        return { id: item.id, rowIndex, kind: 'person', text, createdAt: item.createdAt, turnId: item.turnId, bookmark };
+    }
+
+    if (item.kind === 'turn' && ((item.taskIds?.length ?? 0) > 0 || (item.messageFrom?.length ?? 0) > 0)) {
+        return { id: `start-${item.id}`, rowIndex, kind: 'wake', text: agentTurnLabel(item), createdAt: item.createdAt, turnId: item.id, bookmark: null };
+    }
+
+    if (item.kind === 'assistant' && bookmark !== null) {
+        return { id: item.id, rowIndex, kind: 'bookmark', text: item.text, createdAt: item.createdAt, turnId: item.turnId, bookmark };
+    }
+
+    return null;
+}
+
+/*
+ * `marks` is what `bookmarkRows` answers: the bookmark drawn at a row, by row id. `earlier` is the
+ * outline of the thread before `rows`, and `bookmarks` the chat's, which mark the ticks of that part.
+ */
+export function ticksOf(
+    rows: readonly TimelineRow[],
+    marks: ReadonlyMap<string, ChatBookmark> = new Map(),
+    earlier: readonly ChatItem[] = [],
+    bookmarks: readonly ChatBookmark[] = []
+): ScrubberTick[] {
+    const byItem = new Map(bookmarks.map((bookmark) => [bookmark.itemId, bookmark]));
+    const before = earlier.flatMap((item) => earlierTick(item, byItem) ?? []);
+
+    const held = rows.flatMap((row, rowIndex): ScrubberTick[] => {
         const bookmark = marks.get(row.id) ?? null;
 
         if (row.kind === 'user') {
@@ -71,6 +107,8 @@ export function ticksOf(rows: readonly TimelineRow[], marks: ReadonlyMap<string,
 
         return [{ id: row.id, rowIndex, kind: 'bookmark', text: bookmark.excerpt, createdAt: bookmark.createdAt, turnId, bookmark }];
     });
+
+    return before.length === 0 ? held : [...before, ...held];
 }
 
 /* One drawn tick: a message, or a run of messages merged once the height has fewer pixels than they need. */

package/src/chat/ui/Timeline.tsx

@@ -45,7 +45,8 @@ import {
     STRIP_CLEARANCE_PX,
     tickOfRow,
     ticksOf,
-    ticksWithHits
+    ticksWithHits,
+    EARLIER_ROW
 } from '../logic/scrubber';
 import {
     EMPTY_TARGET,
@@ -206,6 +207,7 @@ export function Timeline({
     const items = useChatRow(chatId, (row) => row?.structure);
     const activeTurnId = useChatRow(chatId, (row) => row?.info.activeTurnId ?? null);
     const bookmarks = useChatRow(chatId, (row) => row?.bookmarks);
+    const outlineBefore = useChatRow(chatId, (row) => row?.outlineBefore);
     const visuals = useChatRow(chatId, (row) => row?.visuals);
     const forkedTurns = useForkedTurns(chatId);
     const info = useChatRow(chatId, (row) => row?.info ?? null);
@@ -306,7 +308,7 @@ export function Timeline({
     // A chat that took a turn before is one whose thread has not come in yet, not one to greet.
     const welcome = !loadingHistory && welcomes && empty && (info === null || (info.usage.turns === 0 && info.activeTurnId === null));
     const marks = useMemo(() => bookmarkRows(rows, bookmarks ?? [], items ?? {}), [rows, bookmarks, items]);
-    const ticks = useMemo(() => ticksOf(rows, marks), [rows, marks]);
+    const ticks = useMemo(() => ticksOf(rows, marks, outlineBefore, bookmarks), [rows, marks, outlineBefore, bookmarks]);
     // A message a jump is on its way to; it may first have to open the turn its reply folded into.
     const [seeking, setSeeking] = useState<{ itemId: string; block?: UiReplyTarget; key: string; options?: ItemJumpOptions } | null>(null);
     const [landing, setLanding] = useState<{ target: UiReplyTarget; key: string } | null>(null);
@@ -613,9 +615,10 @@ export function Timeline({
             return;
         }
 
-        if (tick.bookmark !== null) {
+        // A message before the rows this client holds comes in page by page until its row is there.
+        if (tick.bookmark !== null || tick.rowIndex === EARLIER_ROW) {
             setLanding(null);
-            setSeeking({ itemId: tick.bookmark.itemId, key: keyOf(chatId) });
+            setSeeking({ itemId: tick.bookmark?.itemId ?? tick.id, key: keyOf(chatId) });
 
             return;
         }

package/src/chat/ui/composer/ComposerControls.tsx

@@ -2,7 +2,7 @@ import { useRef, useState, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { ArrowUp, ChevronDown, Play, Plus, Square } from 'lucide-react';
-import type { ChatInfo } from '@adecore/agent-contracts';
+import { holdsConversation, type ChatInfo } from '@adecore/agent-contracts';
 import { Button, ErrorBoundary, Icon, Menu, Tooltip, type Shortcut } from '@adecore/ui';
 import { useChatHost, type ComposerSendAction, type ComposerSendDraft } from '../../../host';
 import { useChatScope } from '../../../scope';
@@ -124,8 +124,7 @@ export function ComposerControls({
     const fileInputRef = useRef<HTMLInputElement>(null);
     const busy = info.activeTurnId !== null;
     const model = providers.find((entry) => entry.kind === info.provider)?.models.find((entry) => entry.slug === info.selection.model);
-    // The CLI announces its session on the first message, so anything before that is still a blank chat.
-    const started = info.agentSessionId !== null || info.usage.turns > 0;
+    const started = holdsConversation(info);
 
     // A chat that has started keeps its provider (the CLI holds the thread), and so does one opened for a
     // named CLI; its models stay switchable, since the CLI takes a new one on the restart the next send does.

package/src/chat/ui/rows/row-rhythm.ts

@@ -44,5 +44,5 @@ export function replyHeader(row: TimelineRow, previous: TimelineRow | null): { a
 
 // A transform also shifts a descendant's sticky position after it was resolved against the scrollport.
 export function rowPosition(kind: TimelineRow['kind'], top: number): CSSProperties {
-    return kind === 'visual' ? { top } : { transform: `translateY(${top}px)` };
+    return kind === 'visual' || kind === 'app-card' ? { top } : { transform: `translateY(${top}px)` };
 }

package/src/state/chats.ts

@@ -38,6 +38,11 @@ export interface ChatState {
      * that a message woke again without a scroll reaching back to its row.
      */
     subagentsBefore?: string[];
+    /*
+     * The outline of the thread before that part (`outlineItems`), cut down and kept apart from
+     * `items`, so the scrubber has a tick for every message before a scroll reaches it.
+     */
+    outlineBefore?: ChatItem[];
     /* The messages marked to come back to, as the host last said; absent until it said anything. */
     bookmarks?: ChatBookmark[];
     /* The pages agents published in the chat, as the host last said; absent until it said anything. */
@@ -53,6 +58,8 @@ export interface ChatPage {
     pending: ChatItem[];
     /* The active sub-agents from before the page; absent from a host that sends none. */
     subagents?: ChatSubagentItem[];
+    /* The outline of the thread before the page; absent from a host that sends none. */
+    outline?: ChatItem[];
 }
 
 /* Rows keyed with the scope's `keyOf`, so a thread says which host it runs on. */
@@ -124,7 +131,8 @@ function stateOf(info: ChatInfo, items: ChatItem[], page?: ChatPage): ChatState
         order,
         history: page.history,
         waitingBefore: before.map((item) => item.id),
-        subagentsBefore: subagents.map((item) => item.id)
+        subagentsBefore: subagents.map((item) => item.id),
+        outlineBefore: (page.outline ?? []).filter((item) => !(item.id in byId))
     };
 }
 
@@ -173,15 +181,16 @@ export function prependPage(state: ChatState, cursor: string, page: ChatHistoryR
     const order = [...olderIds, ...state.order];
 
     if (page.history.cursor === null) {
-        const { history: _history, waitingBefore: _waitingBefore, subagentsBefore: _subagentsBefore, ...rest } = loaded;
+        const { history: _history, waitingBefore: _waitingBefore, subagentsBefore: _subagentsBefore, outlineBefore: _outlineBefore, ...rest } = loaded;
 
         return { ...rest, items, structure: items, order };
     }
 
     const waitingBefore = (state.waitingBefore ?? []).filter((id) => !olderIds.has(id));
     const subagentsBefore = (state.subagentsBefore ?? []).filter((id) => !olderIds.has(id));
+    const outlineBefore = (state.outlineBefore ?? []).filter((item) => !olderIds.has(item.id));
 
-    return { ...loaded, items, structure: items, order, history: page.history, waitingBefore, subagentsBefore };
+    return { ...loaded, items, structure: items, order, history: page.history, waitingBefore, subagentsBefore, outlineBefore };
 }
 
 /* The requests that still wait, oldest first: those from before the page this client holds, then the thread's own. */