feat(agent-fold): render tool calls with the AI chat's component patterns

apps/web/check-diff.tmp.ts

@@ -0,0 +1,68 @@
+/** Expand an Edit tool card and screenshot the Pierre diff. Temp debug tooling. */
+import { readFileSync } from 'node:fs';
+import { chromium } from '@playwright/test';
+
+const RECORDING = `${process.env.HOME}/.agent_runtime_sessions/0c5f554e-2fb0-496e-98cf-6b9e37755f45.jsonl`;
+const SESSION_ID = 'aaaaaaaa-bbbb-cccc-dddd-eeeeffff0001';
+const CHANNEL_ID = 'aaaaaaaa-bbbb-cccc-dddd-eeeeffff0002';
+
+const entries = readFileSync(RECORDING, 'utf8')
+  .split('\n')
+  .filter(Boolean)
+  .map((line) => {
+    const { direction, content } = JSON.parse(line);
+    return { direction, content };
+  });
+
+const session = {
+  id: SESSION_ID,
+  channelId: CHANNEL_ID,
+  botId: '00000000-0000-0000-0000-00000000a9e7',
+  model: 'claude-opus-5',
+  harness: 'claude-code',
+  repoUrl: 'https://github.com/macro/cloud-storage',
+  status: { kind: 'event', event: 'acp_ready' },
+  createdAt: new Date().toISOString(),
+  modifiedAt: new Date().toISOString(),
+};
+
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1280, height: 1400 } });
+await page.route(`**/dss/agent-sessions/${SESSION_ID}`, (route) =>
+  route.fulfill({ json: session })
+);
+await page.route(`**/dss/agent-sessions/channel/${CHANNEL_ID}/log`, (route) =>
+  route.fulfill({ json: { agentSessionId: SESSION_ID, entries } })
+);
+page.on('pageerror', (err) => console.log('[pageerror]', String(err).slice(0, 500)));
+
+await page.goto(`http://localhost:3999/app/agent/${SESSION_ID}`, {
+  waitUntil: 'domcontentloaded',
+});
+await page.waitForTimeout(20_000);
+
+// Find an expandable Edit card (trigger row whose title is an edit label with a diff badge).
+const triggers = page.locator('button.group');
+const count = await triggers.count();
+console.log('expandable cards:', count);
+let clicked = false;
+for (let i = 0; i < count; i++) {
+  const text = (await triggers.nth(i).innerText()).replace(/\n/g, ' ');
+  if (/edit|write/i.test(text)) {
+    console.log('clicking:', text.slice(0, 120));
+    await triggers.nth(i).scrollIntoViewIfNeeded();
+    await triggers.nth(i).click();
+    clicked = true;
+    break;
+  }
+}
+if (!clicked) console.log('no edit card found — listing first 10 triggers:');
+if (!clicked)
+  for (let i = 0; i < Math.min(10, count); i++)
+    console.log(' -', (await triggers.nth(i).innerText()).replace(/\n/g, ' ').slice(0, 100));
+
+await page.waitForTimeout(6_000); // let pierre highlight
+await page.screenshot({
+  path: '/private/tmp/claude-501/-Users-eric-Code-macro/91f094aa-ce54-46ac-8cae-e6ec1f217a24/scratchpad/agent-diff.png',
+});
+await browser.close();

apps/web/justfile

@@ -188,6 +188,16 @@ ensure-agent-fold-wasm:
         just --justfile "{{justfile()}}" build-agent-fold-wasm
     fi
 
+# Regenerate src/lib/service-clients/service-agent-fold/generated/types.ts
+# from agent_fold's Rust wire types with specta. Run after changing anything
+# under crates/agent_fold/src/inbound/wire.rs. Specta's own output is tabs and
+# commas, not this project's style, so biome reformats it in place - without
+# that, every regeneration would be a diff-format mismatch even with no real
+# change.
+gen-agent-fold-types:
+    cargo run -p agent_fold --bin export_types
+    bunx biome format --write {{justfile_directory()}}/src/lib/service-clients/service-agent-fold/generated/types.ts
+
 # Dev fast path: build the wasm pkg only when missing or its version drifts
 # from client/cache-wasm/Cargo.toml (bump that version to push a rebuild to
 # dev machines). See tooling/xtask/crates/xtask_cache_wasm/src/main.rs.

apps/web/load-agent-block.tmp.ts

@@ -0,0 +1,89 @@
+/**
+ * Headless visual check for the agent block with a mocked backend: the two
+ * DSS endpoints the block needs are served from a local session recording,
+ * so no docker stack is required. Temporary debug tooling — not shipped.
+ */
+import { readFileSync } from 'node:fs';
+import { chromium } from '@playwright/test';
+
+const RECORDING =
+  process.argv[2] ??
+  `${process.env.HOME}/.agent_runtime_sessions/0c5f554e-2fb0-496e-98cf-6b9e37755f45.jsonl`;
+const SESSION_ID = 'aaaaaaaa-bbbb-cccc-dddd-eeeeffff0001';
+const CHANNEL_ID = 'aaaaaaaa-bbbb-cccc-dddd-eeeeffff0002';
+const URL = `http://localhost:3999/app/agent/${SESSION_ID}`;
+
+const entries = readFileSync(RECORDING, 'utf8')
+  .split('\n')
+  .filter(Boolean)
+  .map((line) => {
+    const { direction, content } = JSON.parse(line);
+    return { direction, content };
+  });
+
+const session = {
+  id: SESSION_ID,
+  channelId: CHANNEL_ID,
+  botId: '00000000-0000-0000-0000-00000000a9e7',
+  model: 'claude-opus-5',
+  harness: 'claude-code',
+  repoUrl: 'https://github.com/macro/cloud-storage',
+  status: { kind: 'event', event: 'acp_ready' },
+  createdAt: new Date().toISOString(),
+  modifiedAt: new Date().toISOString(),
+};
+
+const browser = await chromium.launch();
+const page = await browser.newPage({
+  viewport: { width: 1280, height: 2000 },
+});
+
+await page.route(`**/dss/agent-sessions/${SESSION_ID}`, (route) =>
+  route.fulfill({ json: session })
+);
+await page.route(`**/dss/agent-sessions/channel/${CHANNEL_ID}/log`, (route) =>
+  route.fulfill({
+    json: { agentSessionId: SESSION_ID, entries },
+  })
+);
+
+page.on('pageerror', (err) => {
+  console.log('[pageerror]', String(err).slice(0, 1000));
+});
+page.on('console', (msg) => {
+  if (msg.type() === 'error' && !msg.text().includes('CONNECTION_REFUSED')) {
+    console.log('[console.error]', msg.text().slice(0, 300));
+  }
+});
+
+console.log('navigating to', URL, `(${entries.length} entries)`);
+await page.goto(URL, { waitUntil: 'domcontentloaded' });
+await page.waitForTimeout(20_000);
+
+const scrollTo = Number(process.argv[3] ?? 0);
+if (scrollTo > 0) {
+  await page.evaluate((y) => {
+    const scroller = document.querySelector(
+      '[data-block-type="agent"] [class*="overflow"]'
+    );
+    for (const el of document.querySelectorAll('div')) {
+      if (el.scrollHeight > el.clientHeight + 100) {
+        el.scrollTop = y;
+        break;
+      }
+    }
+    void scroller;
+  }, scrollTo);
+  await page.waitForTimeout(2_000);
+}
+
+await page.screenshot({
+  path: '/private/tmp/claude-501/-Users-eric-Code-macro/91f094aa-ce54-46ac-8cae-e6ec1f217a24/scratchpad/agent-block.png',
+  fullPage: false,
+});
+
+const text = await page.evaluate(() => document.body.innerText.slice(0, 1500));
+console.log('=== body text ===');
+console.log(text);
+
+await browser.close();

apps/web/package.json

@@ -17,6 +17,7 @@
     "gen-graphql-cache-schema": "bun scripts/generate-graphql-cache-entity-resolver-schema.ts",
     "check-graphql-cache-schema": "bun scripts/generate-graphql-cache-entity-resolver-schema.ts --check",
     "gen-tools": "bun scripts/generate-dcs-tools.ts",
+    "gen-agent-fold-types": "just gen-agent-fold-types",
     "type-check": "tsc --noEmit --skipLibCheck --project tsconfig.json",
     "check": "bun check-graphql-cache-schema && bun type-check && bun biome check",
     "preview": "vite preview -c vite.config.ts --outDir dist --base /app",
@@ -49,11 +50,11 @@
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/playfair-display": "^5.2.8",
     "@fontsource-variable/roboto-mono": "^5.2.8",
-    "@inkibra/tauri-plugins": "git+https://github.com/macro-inc/tauri-plugins.git#6ddd6600e20436388f169e936b610fe93944b7b0",
     "@fullcalendar/core": "^6.1.21",
     "@fullcalendar/daygrid": "^6.1.21",
     "@fullcalendar/interaction": "^6.1.21",
     "@fullcalendar/timegrid": "^6.1.21",
+    "@inkibra/tauri-plugins": "git+https://github.com/macro-inc/tauri-plugins.git#6ddd6600e20436388f169e936b610fe93944b7b0",
     "@kobalte/core": "^0.13.11",
     "@leeoniya/ufuzzy": "^1.0.19",
     "@lexical/history": "0.45.0",
@@ -77,6 +78,7 @@
     "@normy/query-core": "^0.21.0",
     "@opentelemetry/api": "^1.9.1",
     "@phosphor-icons/core": "^2.1.1",
+    "@pierre/diffs": "^1.3.5",
     "@solid-primitives/broadcast-channel": "^0.1.1",
     "@solid-primitives/context": "^0.3.2",
     "@solid-primitives/event-bus": "^1.1.2",
@@ -111,6 +113,7 @@
     "d3-shape": "^3.2.0",
     "date-fns": "^4.1.0",
     "detect-browser": "^5.3.0",
+    "diff": "^9.0.0",
     "dinero.js": "2.0.0-alpha.8",
     "email-validator": "^2.0.4",
     "emojibase-data": "^17.0.0",
@@ -127,6 +130,7 @@
     "pdfjs-dist": "github:macro-inc/pdf.js#v2.16.52-web",
     "posthog-js": "^1.387.0",
     "quill": "^2.0.3",
+    "shiki": "^4.4.3",
     "short-uuid": "^5.2.0",
     "signature_pad": "^5.0.10",
     "solid-custom-scrollbars": "^0.1.7",