@adecore/agents-react 0.36.0 → 0.37.0

package/dist/prompts/ui/PromptView.js

@@ -1,5 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
 import { useTranslation } from 'react-i18next';
+import { Pill } from '@adecore/ui';
 import { toolSummary } from '../../chat/logic/tools.js';
 import { useChatHost } from '../../host.js';
 import { answerValue, promptAnswers, questionAnswer } from '../logic/prompts.js';
@@ -11,7 +12,7 @@ import { QuestionBody } from './QuestionBody.js';
 /* A permission request or question, answered in place: a chat's, or one of the app's own that it draws itself. */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function PromptView(props) {
-  const $ = _c(98);
+  const $ = _c(99);
   const {
     subject,
     draft,
@@ -143,9 +144,16 @@ export function PromptView(props) {
   const commit = t4;
   const multiple = item.kind === "question" && item.questions.length > 1;
   let t5;
-  if ($[27] !== draft.index || $[28] !== hasDraft || $[29] !== item.questions || $[30] !== more || $[31] !== multiple || $[32] !== t) {
-    t5 = more > 0 || hasDraft || multiple ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [more > 0 && /*#__PURE__*/_jsx("span", {
+  if ($[27] !== draft.index || $[28] !== hasDraft || $[29] !== item.questions || $[30] !== more || $[31] !== multiple || $[32] !== subject.source || $[33] !== t) {
+    t5 = subject.source !== undefined || more > 0 || hasDraft || multiple ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [subject.source && /*#__PURE__*/_jsx(Pill, {
+        size: "sm",
+        className: "max-w-full",
+        children: /*#__PURE__*/_jsx("span", {
+          className: "truncate",
+          children: subject.source.label
+        })
+      }), more > 0 && /*#__PURE__*/_jsx("span", {
         className: "tabular-nums",
         children: t("meta.waiting", {
           count: more + 1
@@ -165,63 +173,64 @@ export function PromptView(props) {
     $[29] = item.questions;
     $[30] = more;
     $[31] = multiple;
-    $[32] = t;
-    $[33] = t5;
+    $[32] = subject.source;
+    $[33] = t;
+    $[34] = t5;
   } else {
-    t5 = $[33];
+    t5 = $[34];
   }
   const meta = t5;
   if (item.kind === "approval") {
     let t6;
-    if ($[34] !== item.toolName || $[35] !== t) {
+    if ($[35] !== item.toolName || $[36] !== t) {
       t6 = item.toolName === "Bash" ? t("approval.runCommand") : item.toolName;
-      $[34] = item.toolName;
-      $[35] = t;
-      $[36] = t6;
+      $[35] = item.toolName;
+      $[36] = t;
+      $[37] = t6;
     } else {
-      t6 = $[36];
+      t6 = $[37];
     }
     let t7;
-    if ($[37] !== item.input || $[38] !== item.toolName) {
+    if ($[38] !== item.input || $[39] !== item.toolName) {
       t7 = item.toolName === "Bash" ? "" : toolSummary(item.toolName, item.input);
-      $[37] = item.input;
-      $[38] = item.toolName;
-      $[39] = t7;
+      $[38] = item.input;
+      $[39] = item.toolName;
+      $[40] = t7;
     } else {
-      t7 = $[39];
+      t7 = $[40];
     }
     const t8 = `${t6} ${t7}`;
     let t9;
-    if ($[40] !== denyReason || $[41] !== draft || $[42] !== onDraft) {
+    if ($[41] !== denyReason || $[42] !== draft || $[43] !== onDraft) {
       t9 = denyReason && !draft.showReason ? () => onDraft({
         ...draft,
         showReason: true
       }) : undefined;
-      $[40] = denyReason;
-      $[41] = draft;
-      $[42] = onDraft;
-      $[43] = t9;
+      $[41] = denyReason;
+      $[42] = draft;
+      $[43] = onDraft;
+      $[44] = t9;
     } else {
-      t9 = $[43];
+      t9 = $[44];
     }
     let t10;
-    if ($[44] !== buttons || $[45] !== locked || $[46] !== sending || $[47] !== t9) {
+    if ($[45] !== buttons || $[46] !== locked || $[47] !== sending || $[48] !== t9) {
       t10 = /*#__PURE__*/_jsx(ApprovalActions, {
         buttons: buttons,
         onAddReason: t9,
         locked: locked,
         sending: sending
       });
-      $[44] = buttons;
-      $[45] = locked;
-      $[46] = sending;
-      $[47] = t9;
-      $[48] = t10;
+      $[45] = buttons;
+      $[46] = locked;
+      $[47] = sending;
+      $[48] = t9;
+      $[49] = t10;
     } else {
-      t10 = $[48];
+      t10 = $[49];
     }
     let t11;
-    if ($[49] !== denyReason || $[50] !== draft || $[51] !== item || $[52] !== locked || $[53] !== onDraft) {
+    if ($[50] !== denyReason || $[51] !== draft || $[52] !== item || $[53] !== locked || $[54] !== onDraft) {
       t11 = /*#__PURE__*/_jsx(ApprovalBody, {
         item: item,
         draft: draft,
@@ -229,17 +238,17 @@ export function PromptView(props) {
         denyReason: denyReason,
         locked: locked
       });
-      $[49] = denyReason;
-      $[50] = draft;
-      $[51] = item;
-      $[52] = locked;
-      $[53] = onDraft;
-      $[54] = t11;
+      $[50] = denyReason;
+      $[51] = draft;
+      $[52] = item;
+      $[53] = locked;
+      $[54] = onDraft;
+      $[55] = t11;
     } else {
-      t11 = $[54];
+      t11 = $[55];
     }
     let t12;
-    if ($[55] !== error || $[56] !== meta || $[57] !== notice || $[58] !== sending || $[59] !== t10 || $[60] !== t11 || $[61] !== t8 || $[62] !== top) {
+    if ($[56] !== error || $[57] !== meta || $[58] !== notice || $[59] !== sending || $[60] !== t10 || $[61] !== t11 || $[62] !== t8 || $[63] !== top) {
       t12 = /*#__PURE__*/_jsx(PromptCard, {
         kind: "approval",
         heading: t8,
@@ -251,17 +260,17 @@ export function PromptView(props) {
         actions: t10,
         children: t11
       });
-      $[55] = error;
-      $[56] = meta;
-      $[57] = notice;
-      $[58] = sending;
-      $[59] = t10;
-      $[60] = t11;
-      $[61] = t8;
-      $[62] = top;
-      $[63] = t12;
+      $[56] = error;
+      $[57] = meta;
+      $[58] = notice;
+      $[59] = sending;
+      $[60] = t10;
+      $[61] = t11;
+      $[62] = t8;
+      $[63] = top;
+      $[64] = t12;
     } else {
-      t12 = $[63];
+      t12 = $[64];
     }
     return t12;
   }
@@ -270,38 +279,38 @@ export function PromptView(props) {
   const t8 = item.async === true;
   const t9 = readyWith(draft);
   let t10;
-  if ($[64] !== draft || $[65] !== onDraft) {
+  if ($[65] !== draft || $[66] !== onDraft) {
     t10 = () => onDraft({
       ...draft,
       index: draft.index - 1
     });
-    $[64] = draft;
-    $[65] = onDraft;
-    $[66] = t10;
+    $[65] = draft;
+    $[66] = onDraft;
+    $[67] = t10;
   } else {
-    t10 = $[66];
+    t10 = $[67];
   }
   let t11;
-  if ($[67] !== onAction) {
+  if ($[68] !== onAction) {
     t11 = () => onAction({
       kind: "dismiss"
     });
-    $[67] = onAction;
-    $[68] = t11;
+    $[68] = onAction;
+    $[69] = t11;
   } else {
-    t11 = $[68];
+    t11 = $[69];
   }
   let t12;
-  if ($[69] !== commit || $[70] !== draft) {
+  if ($[70] !== commit || $[71] !== draft) {
     t12 = () => commit(draft);
-    $[69] = commit;
-    $[70] = draft;
-    $[71] = t12;
+    $[70] = commit;
+    $[71] = draft;
+    $[72] = t12;
   } else {
-    t12 = $[71];
+    t12 = $[72];
   }
   let t13;
-  if ($[72] !== draft.index || $[73] !== last || $[74] !== locked || $[75] !== sending || $[76] !== t10 || $[77] !== t11 || $[78] !== t12 || $[79] !== t8 || $[80] !== t9) {
+  if ($[73] !== draft.index || $[74] !== last || $[75] !== locked || $[76] !== sending || $[77] !== t10 || $[78] !== t11 || $[79] !== t12 || $[80] !== t8 || $[81] !== t9) {
     t13 = /*#__PURE__*/_jsx(QuestionActions, {
       index: t7,
       dismissable: t8,
@@ -313,21 +322,21 @@ export function PromptView(props) {
       onDismiss: t11,
       onCommit: t12
     });
-    $[72] = draft.index;
-    $[73] = last;
-    $[74] = locked;
-    $[75] = sending;
-    $[76] = t10;
-    $[77] = t11;
-    $[78] = t12;
-    $[79] = t8;
-    $[80] = t9;
-    $[81] = t13;
+    $[73] = draft.index;
+    $[74] = last;
+    $[75] = locked;
+    $[76] = sending;
+    $[77] = t10;
+    $[78] = t11;
+    $[79] = t12;
+    $[80] = t8;
+    $[81] = t9;
+    $[82] = t13;
   } else {
-    t13 = $[81];
+    t13 = $[82];
   }
   let t14;
-  if ($[82] !== answer || $[83] !== commit || $[84] !== draft || $[85] !== locked || $[86] !== onDraft || $[87] !== question) {
+  if ($[83] !== answer || $[84] !== commit || $[85] !== draft || $[86] !== locked || $[87] !== onDraft || $[88] !== question) {
     t14 = question && answer && /*#__PURE__*/_jsx(QuestionBody, {
       question: question,
       answer: answer,
@@ -347,18 +356,18 @@ export function PromptView(props) {
       }),
       locked: locked
     });
-    $[82] = answer;
-    $[83] = commit;
-    $[84] = draft;
-    $[85] = locked;
-    $[86] = onDraft;
-    $[87] = question;
-    $[88] = t14;
+    $[83] = answer;
+    $[84] = commit;
+    $[85] = draft;
+    $[86] = locked;
+    $[87] = onDraft;
+    $[88] = question;
+    $[89] = t14;
   } else {
-    t14 = $[88];
+    t14 = $[89];
   }
   let t15;
-  if ($[89] !== error || $[90] !== meta || $[91] !== notice || $[92] !== sending || $[93] !== t13 || $[94] !== t14 || $[95] !== t6 || $[96] !== top) {
+  if ($[90] !== error || $[91] !== meta || $[92] !== notice || $[93] !== sending || $[94] !== t13 || $[95] !== t14 || $[96] !== t6 || $[97] !== top) {
     t15 = /*#__PURE__*/_jsx(PromptCard, {
       kind: "question",
       heading: t6,
@@ -370,17 +379,17 @@ export function PromptView(props) {
       actions: t13,
       children: t14
     });
-    $[89] = error;
-    $[90] = meta;
-    $[91] = notice;
-    $[92] = sending;
-    $[93] = t13;
-    $[94] = t14;
-    $[95] = t6;
-    $[96] = top;
-    $[97] = t15;
+    $[90] = error;
+    $[91] = meta;
+    $[92] = notice;
+    $[93] = sending;
+    $[94] = t13;
+    $[95] = t14;
+    $[96] = t6;
+    $[97] = top;
+    $[98] = t15;
   } else {
-    t15 = $[97];
+    t15 = $[98];
   }
   return t15;
 }

package/dist/state/chats.d.ts

@@ -1,6 +1,7 @@
 import type { AgentKind, ChatApprovalItem, ChatBookmark, ChatEvent, ChatHistoryResult, ChatInfo, ChatItem, ChatQuestionItem, ChatSubagentItem, ChatVisual } from '@adecore/agent-contracts';
 export interface ChatState {
     info: ChatInfo;
+    historyPending?: boolean;
     items: Record<string, ChatItem>;
     structure: Record<string, ChatItem>;
     order: string[];
@@ -19,9 +20,11 @@ export interface ChatPage {
 export type ChatsById = Record<string, ChatState>;
 export type ChatStatuses = Record<string, Pick<ChatState, 'info'>>;
 export interface ChatSink {
+    historyIdentity?(chatId: string): object | undefined;
     reset(chatId: string, info: ChatInfo, items: ChatItem[], page?: ChatPage): void;
     prepend(chatId: string, cursor: string, page: ChatHistoryResult): void;
     apply(chatId: string, event: ChatEvent): void;
+    replay?(chatId: string, events: readonly ChatEvent[]): void;
     status(chatId: string, info: ChatInfo): void;
     bookmarks(chatId: string, bookmarks: ChatBookmark[]): void;
     visuals(chatId: string, visuals: ChatVisual[]): void;
@@ -33,6 +36,7 @@ interface ChatsStore {
     reset(key: string, info: ChatInfo, items: ChatItem[], page?: ChatPage): void;
     prepend(key: string, cursor: string, page: ChatHistoryResult): void;
     apply(key: string, event: ChatEvent): void;
+    replay(key: string, events: readonly ChatEvent[]): void;
     status(key: string, info: ChatInfo): void;
     bookmarks(key: string, bookmarks: ChatBookmark[]): void;
     visuals(key: string, visuals: ChatVisual[]): void;

package/dist/state/chats.js

@@ -37,11 +37,11 @@ function isBeforePage(state, historyIndex) {
   return state.history !== undefined && historyIndex !== undefined && historyIndex < state.history.start;
 }
 /* An item from before the page this client holds matters only as a sub-agent, a request that waits, or one that stopped waiting. */
-function withEarlierItem(state, item) {
+function withEarlierItem(state, item, write) {
   if (item.kind === 'subagent') {
     const subagents = state.subagentsBefore ?? [];
     return {
-      ...withItem(state, item),
+      ...write(state, item),
       subagentsBefore: subagents.includes(item.id) ? subagents : [...subagents, item.id]
     };
   }
@@ -49,12 +49,12 @@ function withEarlierItem(state, item) {
   const held = waiting.includes(item.id);
   if (isWaiting(item)) {
     return {
-      ...withItem(state, item),
+      ...write(state, item),
       waitingBefore: held ? waiting : [...waiting, item.id]
     };
   }
   return held ? {
-    ...withItem(state, item),
+    ...write(state, item),
     waitingBefore: waiting.filter(id => id !== item.id)
   } : state;
 }
@@ -63,6 +63,10 @@ export function prependPage(state, cursor, page) {
   if (state.history?.cursor !== cursor) {
     return state;
   }
+  const {
+    historyPending: _historyPending,
+    ...loaded
+  } = state;
   const held = new Set(state.order);
   const older = page.items.filter(item => !held.has(item.id));
   const olderIds = new Set(older.map(item => item.id));
@@ -80,7 +84,7 @@ export function prependPage(state, cursor, page) {
       waitingBefore: _waitingBefore,
       subagentsBefore: _subagentsBefore,
       ...rest
-    } = state;
+    } = loaded;
     return {
       ...rest,
       items,
@@ -91,7 +95,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));
   return {
-    ...state,
+    ...loaded,
     items,
     structure: items,
     order,
@@ -104,16 +108,18 @@ export function prependPage(state, cursor, page) {
 export function waitingRequestsOf(chat) {
   return [...(chat?.waitingBefore ?? []), ...(chat?.order ?? [])].map(id => chat?.structure[id]).filter(isWaiting);
 }
-/* The state with one item replaced, in the thread and in the structure the rows come from. */
-function withItem(state, item) {
+function withItem(state, item, structural = true) {
   const items = {
     ...state.items,
     [item.id]: item
   };
-  return {
+  return structural ? {
     ...state,
     items,
     structure: items
+  } : {
+    ...state,
+    items
   };
 }
 /* Cheap enough, since a status only arrives when the host saw one change, never on a streamed word. */
@@ -133,15 +139,48 @@ function without(rows, matches) {
   return Object.fromEntries(Object.entries(rows).filter(([key]) => !matches(key)));
 }
 export function applyEvent(state, event) {
+  return applyUpdate(state, event, withItem);
+}
+function replayEvents(state, events) {
+  let draft;
+  const write = (current, item, structural = true) => {
+    // A text delta must leave the last structural snapshot intact, including within this replay.
+    if (draft !== current.items || !structural && draft === current.structure) {
+      draft = {
+        ...current.items
+      };
+    }
+    // Item ids may be __proto__, so this must define an own data property.
+    Object.defineProperty(draft, item.id, {
+      value: item,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+    return structural ? {
+      ...current,
+      items: draft,
+      structure: draft
+    } : {
+      ...current,
+      items: draft
+    };
+  };
+  for (const event of events) {
+    state = applyUpdate(state, event, write);
+  }
+  return state;
+}
+function applyUpdate(state, event, write) {
   switch (event.type) {
     case 'item':
       {
         if (isBeforePage(state, event.historyIndex)) {
-          return withEarlierItem(state, event.item);
+          return withEarlierItem(state, event.item, write);
         }
         const known = event.item.id in state.items;
         return {
-          ...withItem(state, event.item),
+          ...write(state, event.item),
           order: known ? state.order : [...state.order, event.item.id]
         };
       }
@@ -154,31 +193,19 @@ export function applyEvent(state, event) {
             uiQueries,
             ...text
           } = event;
-          const grown = event.text === '' ? state : applyEvent(state, text);
+          const grown = event.text === '' ? state : applyUpdate(state, text, write);
           const reply = grown.items[event.itemId] ?? item;
-          return {
-            ...grown,
-            items: {
-              ...grown.items,
-              [event.itemId]: {
-                ...reply,
-                uiQueries
-              }
-            }
-          };
+          return write(grown, {
+            ...reply,
+            uiQueries
+          }, false);
         }
         if (event.ui !== undefined && event.text === '') {
           if (item?.kind === 'assistant' && item.streaming && event.textLength === item.text.length) {
-            return {
-              ...state,
-              items: {
-                ...state.items,
-                [event.itemId]: {
-                  ...item,
-                  ui: event.ui
-                }
-              }
-            };
+            return write(state, {
+              ...item,
+              ui: event.ui
+            }, false);
           }
           return state;
         }
@@ -189,15 +216,9 @@ export function applyEvent(state, event) {
           };
           // The first text is structure after all, since an empty reply that is not streaming has no row.
           if (item.text === '') {
-            return withItem(state, grown);
+            return write(state, grown);
           }
-          return {
-            ...state,
-            items: {
-              ...state.items,
-              [event.itemId]: grown
-            }
-          };
+          return write(state, grown, false);
         }
         if (item?.kind === 'tool' && item.state === 'running') {
           const progress = item.progress ?? {
@@ -212,13 +233,7 @@ export function applyEvent(state, event) {
               output: appendToolOutput(progress.output, event.text)
             }
           };
-          return {
-            ...state,
-            items: {
-              ...state.items,
-              [event.itemId]: grown
-            }
-          };
+          return write(state, grown, false);
         }
         return state;
       }
@@ -306,6 +321,22 @@ export const useChats = create(set => ({
       };
     });
   },
+  replay(key, events) {
+    set(store => {
+      const current = store.byKey[key];
+      if (!current || events.length === 0) {
+        return store;
+      }
+      const next = replayEvents(current, events);
+      return next === current ? store : {
+        byKey: {
+          ...store.byKey,
+          [key]: next
+        },
+        statusByKey: withStatus(store.statusByKey, key, next.info)
+      };
+    });
+  },
   /*
    * The status of a chat this window is not reading, which the host sends for every chat it has
    * loaded. The thread stays empty until somebody attaches, since this is what a header, a list and
@@ -318,7 +349,10 @@ export const useChats = create(set => ({
         return {
           byKey: {
             ...s.byKey,
-            [key]: stateOf(info, [])
+            [key]: {
+              ...stateOf(info, []),
+              historyPending: true
+            }
           },
           statusByKey: withStatus(s.statusByKey, key, info)
         };
@@ -375,9 +409,11 @@ export const useChats = create(set => ({
 /* The sink of one host's chat client: it hands over chat ids, this puts them under the keys of its scope. */
 export function chatSink(keyOf) {
   return {
+    historyIdentity: chatId => useChats.getState().byKey[keyOf(chatId)]?.order,
     reset: (chatId, info, items, page) => useChats.getState().reset(keyOf(chatId), info, items, page),
     prepend: (chatId, cursor, page) => useChats.getState().prepend(keyOf(chatId), cursor, page),
     apply: (chatId, event) => useChats.getState().apply(keyOf(chatId), event),
+    replay: (chatId, events) => useChats.getState().replay(keyOf(chatId), events),
     status: (chatId, info) => useChats.getState().status(keyOf(chatId), info),
     bookmarks: (chatId, bookmarks) => useChats.getState().bookmarks(keyOf(chatId), bookmarks),
     visuals: (chatId, visuals) => useChats.getState().visuals(keyOf(chatId), visuals),

package/dist/theme.css

@@ -110,7 +110,7 @@
      */
     .chat-column .chat-column-content { margin-inline: auto; max-width: var(--chat-measure, 768px); }
     /* Wide pages clear the scrubber even when the reply column needs no extra padding. */
-    .chat-wide-content { max-width: calc(100% - 2 * var(--chat-wide-inset, 0px)); }
+    .chat-wide-content { max-width: min(calc(100% - 2 * var(--chat-wide-inset, 0px)), var(--chat-wide-measure, 100%)); }
     /* Wider by the input's inset (`.composer-input .cm-content` padding plus the card's border), so what is typed lines up with the thread. */
     .chat-column .chat-composer-content { margin-inline: auto; max-width: calc(var(--chat-measure, 768px) + 2 * 21px); }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "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.36.0",
-    "@adecore/editor": "0.36.0",
-    "@adecore/editor-react": "0.36.0",
-    "@adecore/intelligent-ui": "0.36.0",
-    "@adecore/merge": "0.36.0",
+    "@adecore/agent-contracts": "0.37.0",
+    "@adecore/editor": "0.37.0",
+    "@adecore/editor-react": "0.37.0",
+    "@adecore/intelligent-ui": "0.37.0",
+    "@adecore/merge": "0.37.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.36.0",
+    "@adecore/ui": "^0.37.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.36.0",
+    "@adecore/ui": "0.37.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",