@adecore/agents-react 0.41.0 → 0.42.0

package/dist/chat/ui/rows/WorkflowRow.js

@@ -418,7 +418,7 @@ function _temp2(part) {
   return part.count > 0;
 }
 export function WorkflowRow(t0) {
-  const $ = _c(78);
+  const $ = _c(79);
   const {
     tool,
     workflow,
@@ -664,42 +664,44 @@ export function WorkflowRow(t0) {
     t26 = $[52];
   }
   let t27;
-  if ($[53] !== open || $[54] !== opens || $[55] !== tool) {
+  if ($[53] !== chatId || $[54] !== open || $[55] !== opens || $[56] !== tool) {
     t27 = open && opens && /*#__PURE__*/_jsx(ToolBody, {
-      tool: tool
+      tool: tool,
+      chatId: chatId
     });
-    $[53] = open;
-    $[54] = opens;
-    $[55] = tool;
-    $[56] = t27;
+    $[53] = chatId;
+    $[54] = open;
+    $[55] = opens;
+    $[56] = tool;
+    $[57] = t27;
   } else {
-    t27 = $[56];
+    t27 = $[57];
   }
   const t28 = "mt-1.5 ml-6";
   let t29;
-  if ($[57] !== workflow.name) {
+  if ($[58] !== workflow.name) {
     t29 = workflow.name !== null && /*#__PURE__*/_jsx("div", {
       className: "truncate text-sm font-medium text-text",
       children: workflow.name
     });
-    $[57] = workflow.name;
-    $[58] = t29;
+    $[58] = workflow.name;
+    $[59] = t29;
   } else {
-    t29 = $[58];
+    t29 = $[59];
   }
   let t30;
-  if ($[59] !== description) {
+  if ($[60] !== description) {
     t30 = description !== null && /*#__PURE__*/_jsx("p", {
       className: "mt-0.5 line-clamp-2 text-xs text-text-muted",
       children: description
     });
-    $[59] = description;
-    $[60] = t30;
+    $[60] = description;
+    $[61] = t30;
   } else {
-    t30 = $[60];
+    t30 = $[61];
   }
   let t31;
-  if ($[61] !== running || $[62] !== t || $[63] !== workflow.stalledAt) {
+  if ($[62] !== running || $[63] !== t || $[64] !== workflow.stalledAt) {
     t31 = running && workflow.stalledAt !== undefined && /*#__PURE__*/_jsxs("p", {
       role: "status",
       className: "mt-1 flex items-start gap-1.5 text-xs text-text-muted",
@@ -711,55 +713,55 @@ export function WorkflowRow(t0) {
         children: t("rows.workflow.stalled")
       })]
     });
-    $[61] = running;
-    $[62] = t;
-    $[63] = workflow.stalledAt;
-    $[64] = t31;
+    $[62] = running;
+    $[63] = t;
+    $[64] = workflow.stalledAt;
+    $[65] = t31;
   } else {
-    t31 = $[64];
+    t31 = $[65];
   }
   let t32;
-  if ($[65] !== onOpen || $[66] !== provider) {
+  if ($[66] !== onOpen || $[67] !== provider) {
     t32 = phase => /*#__PURE__*/_jsx(PhaseBlock, {
       phase: phase,
       provider: provider,
       onOpen: onOpen
     }, phase.key);
-    $[65] = onOpen;
-    $[66] = provider;
-    $[67] = t32;
+    $[66] = onOpen;
+    $[67] = provider;
+    $[68] = t32;
   } else {
-    t32 = $[67];
+    t32 = $[68];
   }
   const t33 = phases.map(t32);
   let t34;
-  if ($[68] !== t29 || $[69] !== t30 || $[70] !== t31 || $[71] !== t33) {
+  if ($[69] !== t29 || $[70] !== t30 || $[71] !== t31 || $[72] !== t33) {
     t34 = /*#__PURE__*/_jsxs("div", {
       className: t28,
       children: [t29, t30, t31, t33]
     });
-    $[68] = t29;
-    $[69] = t30;
-    $[70] = t31;
-    $[71] = t33;
-    $[72] = t34;
+    $[69] = t29;
+    $[70] = t30;
+    $[71] = t31;
+    $[72] = t33;
+    $[73] = t34;
   } else {
-    t34 = $[72];
+    t34 = $[73];
   }
   let t35;
-  if ($[73] !== t26 || $[74] !== t27 || $[75] !== t34 || $[76] !== tool.id) {
+  if ($[74] !== t26 || $[75] !== t27 || $[76] !== t34 || $[77] !== tool.id) {
     t35 = /*#__PURE__*/_jsxs("div", {
       "data-find-item": t22,
       className: t23,
       children: [t26, t27, t34]
     });
-    $[73] = t26;
-    $[74] = t27;
-    $[75] = t34;
-    $[76] = tool.id;
-    $[77] = t35;
+    $[74] = t26;
+    $[75] = t27;
+    $[76] = t34;
+    $[77] = tool.id;
+    $[78] = t35;
   } else {
-    t35 = $[77];
+    t35 = $[78];
   }
   return t35;
 }

package/dist/host.d.ts

@@ -33,6 +33,7 @@ export interface ChatActions {
     configure(chatId: string, patch: Omit<ChatConfigurePayload, 'chatId'>): Promise<void>;
     continueOn(chatId: string, account: string): Promise<void>;
     turnDiff(chatId: string, turnId: string): Promise<ChatCheckpointDiff | null>;
+    toolOutput?(chatId: string, itemId: string): Promise<string | null>;
     stopSubagent(chatId: string, toolUseId: string): Promise<void>;
     stopTask(chatId: string, taskId: string): Promise<void>;
     goal?(chatId: string, action: ChatGoalAction): Promise<void>;

package/dist/locales/en/agent-chat.d.ts

@@ -218,6 +218,12 @@ declare const _default: {
         heredoc: string;
         moreRuns_one: string;
         moreRuns_other: string;
+        showFullOutput: string;
+        showFullDiff: string;
+        wholeSize: string;
+        fullOutputFailed: string;
+        fullDiffFailed: string;
+        retry: string;
     };
     timeline: {
         welcome: {
@@ -537,6 +543,9 @@ declare const _default: {
         zoomIn: string;
         zoomOut: string;
         reset: string;
+        previous: string;
+        next: string;
+        position: string;
     };
     generatedImage: {
         label: string;

package/dist/locales/en/agent-chat.js

@@ -217,7 +217,13 @@ export default {
     alsoRan: '+ {{programs}}',
     heredoc: 'heredoc',
     moreRuns_one: '+{{count}}',
-    moreRuns_other: '+{{count}}'
+    moreRuns_other: '+{{count}}',
+    showFullOutput: 'Show full output',
+    showFullDiff: 'Show full diff',
+    wholeSize: '{{size}} in total',
+    fullOutputFailed: 'Could not load the full output',
+    fullDiffFailed: 'Could not load the full diff',
+    retry: 'Try again'
   },
   timeline: {
     welcome: {
@@ -536,7 +542,10 @@ export default {
   image: {
     zoomIn: 'Zoom in',
     zoomOut: 'Zoom out',
-    reset: 'Reset'
+    reset: 'Reset',
+    previous: 'Previous image',
+    next: 'Next image',
+    position: '{{index}} of {{count}}'
   },
   generatedImage: {
     label: 'Generated image',

package/dist/locales/nl/agent-chat.d.ts

@@ -218,6 +218,12 @@ declare const _default: {
         heredoc: string;
         moreRuns_one: string;
         moreRuns_other: string;
+        showFullOutput: string;
+        showFullDiff: string;
+        wholeSize: string;
+        fullOutputFailed: string;
+        fullDiffFailed: string;
+        retry: string;
     };
     timeline: {
         welcome: {
@@ -537,6 +543,9 @@ declare const _default: {
         zoomIn: string;
         zoomOut: string;
         reset: string;
+        previous: string;
+        next: string;
+        position: string;
     };
     generatedImage: {
         label: string;

package/dist/locales/nl/agent-chat.js

@@ -217,7 +217,13 @@ export default {
     alsoRan: '+ {{programs}}',
     heredoc: 'heredoc',
     moreRuns_one: '+{{count}}',
-    moreRuns_other: '+{{count}}'
+    moreRuns_other: '+{{count}}',
+    showFullOutput: 'Volledige uitvoer tonen',
+    showFullDiff: 'Volledige diff tonen',
+    wholeSize: '{{size}} in totaal',
+    fullOutputFailed: 'De volledige uitvoer kon niet worden geladen',
+    fullDiffFailed: 'De volledige diff kon niet worden geladen',
+    retry: 'Opnieuw proberen'
   },
   timeline: {
     welcome: {
@@ -536,7 +542,10 @@ export default {
   image: {
     zoomIn: 'Inzoomen',
     zoomOut: 'Uitzoomen',
-    reset: 'Herstellen'
+    reset: 'Herstellen',
+    previous: 'Vorige afbeelding',
+    next: 'Volgende afbeelding',
+    position: '{{index}} van {{count}}'
   },
   generatedImage: {
     label: 'Gegenereerde afbeelding',

package/package.json

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

package/src/chat/actions.ts

@@ -33,6 +33,7 @@ export function transportActions(transport: ChatTransport): ChatActions {
             await transport.request('chat.continueOn', { chatId, account });
         },
         turnDiff: async (chatId, turnId) => (await transport.request('chat.turnDiff', { chatId, turnId })).diff,
+        toolOutput: async (chatId, itemId) => (await transport.request('chat.toolOutput', { chatId, itemId })).output,
         stopSubagent: async (chatId, toolUseId) => {
             await transport.request('chat.stopSubagent', { chatId, toolUseId });
         },

package/src/chat/logic/lightbox.ts

@@ -0,0 +1,88 @@
+export const MIN_SCALE = 1;
+export const MAX_SCALE = 8;
+export const BUTTON_STEP = 1.5;
+
+// A trackpad pinch arrives as small ctrl-wheel deltas; a mouse notch with Ctrl is clamped so it does not jump past the detail.
+const PINCH_SPEED = 0.01;
+const PINCH_LIMIT = 50;
+
+export interface View {
+    readonly scale: number;
+    readonly x: number;
+    readonly y: number;
+}
+
+export const START: View = { scale: 1, x: 0, y: 0 };
+
+export interface Size {
+    readonly width: number;
+    readonly height: number;
+}
+
+/* The picture at a scale of 1 and the stage it is centered in, both in layout pixels. */
+export interface Bounds {
+    readonly image: Size;
+    readonly frame: Size;
+}
+
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+
+export interface Wheel {
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly ctrlKey: boolean;
+}
+
+/* Keeps an edge of the picture from leaving its side of the stage, so a flick of two fingers never loses it. */
+export function clamped(view: View, bounds: Bounds): View {
+    const maxX = Math.max(0, (bounds.image.width * view.scale - bounds.frame.width) / 2);
+    const maxY = Math.max(0, (bounds.image.height * view.scale - bounds.frame.height) / 2);
+
+    return { scale: view.scale, x: Math.min(maxX, Math.max(-maxX, view.x)), y: Math.min(maxY, Math.max(-maxY, view.y)) };
+}
+
+/*
+ * Zooms around a point, which is what makes a pinch over a detail feel like a magnifier instead of
+ * a slider. The pixel under the fingers stays where it is while everything else moves away from it.
+ * `x` and `y` are offsets from the middle of the stage, so a scale of 1 is always centered.
+ */
+export function zoomed(view: View, factor: number, point: Point, bounds: Bounds): View {
+    const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, view.scale * factor));
+
+    if (scale === MIN_SCALE) {
+        return START;
+    }
+
+    const ratio = scale / view.scale;
+
+    return clamped({ scale, x: point.x - (point.x - view.x) * ratio, y: point.y - (point.y - view.y) * ratio }, bounds);
+}
+
+export function panned(view: View, deltaX: number, deltaY: number, bounds: Bounds): View {
+    if (view.scale <= MIN_SCALE) {
+        return view;
+    }
+
+    return clamped({ scale: view.scale, x: view.x + deltaX, y: view.y + deltaY }, bounds);
+}
+
+/* A pinch zooms (Chromium reports it as a wheel with Ctrl held) and two fingers pan the zoomed picture. */
+export function wheeled(view: View, wheel: Wheel, point: Point, bounds: Bounds): View {
+    if (wheel.ctrlKey) {
+        const delta = Math.min(PINCH_LIMIT, Math.max(-PINCH_LIMIT, wheel.deltaY));
+
+        return zoomed(view, Math.exp(-delta * PINCH_SPEED), point, bounds);
+    }
+
+    return panned(view, -wheel.deltaX, -wheel.deltaY, bounds);
+}
+
+/* The image a step away, or null at either end: the row does not wrap around. */
+export function stepped(index: number, count: number, step: -1 | 1): number | null {
+    const next = index + step;
+
+    return next < 0 || next >= count ? null : next;
+}

package/src/chat/logic/timeline.ts

@@ -56,7 +56,17 @@ export type TimelineRow =
     | { kind: 'question'; id: string; item: ChatQuestionItem }
     | { kind: 'note'; id: string; level: 'info' | 'warning' | 'error'; text: string; from?: string }
     | { kind: 'compaction'; id: string; preTokens: number | null }
-    | { kind: 'changed-files'; id: string; turnId: string; tools: ChatToolItem[]; diff: ChatCheckpointDiff | null; checkpoint: boolean; baseMoved?: BaseMoved }
+    | {
+          kind: 'changed-files';
+          id: string;
+          turnId: string;
+          tools: ChatToolItem[];
+          diff: ChatCheckpointDiff | null;
+          checkpoint: boolean;
+          baseMoved?: BaseMoved;
+          // Set when `diff` holds back the diffs past its first few, which the host answers whole.
+          heldBack?: boolean;
+      }
     | { kind: 'turn-fold'; id: string; turn: ChatTurnItem; label: string; work: string[]; hiddenCount: number; expanded: boolean }
     | { kind: 'forks'; id: string; turnId: string }
     | { kind: 'working'; id: string; startedAt: number }
@@ -481,7 +491,8 @@ function changedFilesRow(turn: ChatTurnItem, items: ChatItem[]): TimelineRow | n
         tools: edits,
         diff,
         checkpoint: turn.checkpoint !== undefined,
-        ...(moved ? { baseMoved: { from: turn.checkpointHead!, to: turn.checkpointHeadAfter! } } : {})
+        ...(moved ? { baseMoved: { from: turn.checkpointHead!, to: turn.checkpointHeadAfter! } } : {}),
+        ...(turn.checkpointDiffRef ? { heldBack: true } : {})
     };
 }
 

package/src/chat/ui/AnsiOutput.tsx

@@ -1,7 +1,18 @@
 import { useTranslation } from 'react-i18next';
 import { parseAnsi } from '../logic/ansi';
 
-export function AnsiOutput({ text, limit, tailLines }: { text: string; limit?: number; tailLines?: number }) {
+/* `marksOmitted` off leaves out the count of what the limit cut, for a text that is itself only a beginning. */
+export function AnsiOutput({
+    text,
+    limit,
+    tailLines,
+    marksOmitted = true
+}: {
+    text: string;
+    limit?: number | undefined;
+    tailLines?: number;
+    marksOmitted?: boolean;
+}) {
     const { t } = useTranslation('agent-chat');
     const { tokens, omitted } = parseAnsi(text, { limit, tailLines });
 
@@ -12,7 +23,7 @@ export function AnsiOutput({ text, limit, tailLines }: { text: string; limit?: n
                     {token.content}
                 </span>
             ))}
-            {omitted > 0 && `\n${t('work.moreCharacters', { count: omitted })}`}
+            {marksOmitted && omitted > 0 && `\n${t('work.moreCharacters', { count: omitted })}`}
         </>
     );
 }