feat(tool-call-cards): pair calls and results in summarized collapsible bubbles

3 files changed, 51 insertions, 69 deletions

diff --git a/src/core/metrics/place.test.ts b/src/core/metrics/place.test.ts
index 393d23c..7695e21 100644
--- a/src/core/metrics/place.test.ts
+++ b/src/core/metrics/place.test.ts
@@ -28,31 +28,36 @@ function assistantGroup(seq: number, text: string): RenderGroup {
   };
 }
 
-function toolCallGroup(seq: number, stepId: string, toolCallId: string): RenderGroup {
+function toolCallGroup(stepId: string, toolCallId: string): RenderGroup {
   return {
-    kind: "single",
-    chunk: {
-      seq,
-      role: "assistant",
-      chunk: {
+    kind: "tool",
+    stepId,
+    provisional: false,
+    entry: {
+      toolCallId,
+      toolName: "test",
+      result: null,
+      call: {
         type: "tool-call",
         toolCallId,
         toolName: "test",
         input: {},
         stepId: stepId as StepId,
       },
-      provisional: false,
     },
   };
 }
 
-function toolResultGroup(seq: number, stepId: string, toolCallId: string): RenderGroup {
+function toolResultGroup(stepId: string, toolCallId: string): RenderGroup {
   return {
-    kind: "single",
-    chunk: {
-      seq,
-      role: "tool",
-      chunk: {
+    kind: "tool",
+    stepId,
+    provisional: false,
+    entry: {
+      toolCallId,
+      toolName: "test",
+      call: null,
+      result: {
         type: "tool-result",
         toolCallId,
         toolName: "test",
@@ -60,29 +65,10 @@ function toolResultGroup(seq: number, stepId: string, toolCallId: string): Rende
         isError: false,
         stepId: stepId as StepId,
       },
-      provisional: false,
     },
   };
 }
 
-function toolBatchGroup(stepId: string, toolCallIds: string[]): RenderGroup {
-  return {
-    kind: "tool-batch",
-    stepId,
-    entries: toolCallIds.map((id) => ({
-      call: {
-        type: "tool-call" as const,
-        toolCallId: id,
-        toolName: "test",
-        input: {},
-        stepId: stepId as StepId,
-      },
-      result: null,
-    })),
-    provisional: false,
-  };
-}
-
 function makeStep(stepId: string, inputTokens: number, outputTokens: number): StepMetrics {
   return {
     stepId: stepId as StepId,
@@ -169,9 +155,9 @@ describe("interleaveTurnMetrics", () => {
 
   it("head-aligned: segment i gets entries[i]", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolCallGroup(2, "s1", "c1");
+    const g2 = toolCallGroup("s1", "c1");
     const g3 = userGroup(3, "q2");
-    const g4 = toolCallGroup(4, "s2", "c2");
+    const g4 = toolCallGroup("s2", "c2");
     const step1 = makeStep("s1", 100, 50);
     const step2 = makeStep("s2", 200, 80);
     const rows = interleaveTurnMetrics(
@@ -192,7 +178,7 @@ describe("interleaveTurnMetrics", () => {
 
   it("a trailing segment with no entry (in-flight turn) renders no metrics", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolCallGroup(2, "s1", "c1");
+    const g2 = toolCallGroup("s1", "c1");
     const g3 = userGroup(3, "q2");
     const g4 = assistantGroup(4, "a2");
     const step = makeStep("s1", 100, 50);
@@ -220,26 +206,28 @@ describe("interleaveTurnMetrics", () => {
     expectTurnMetricsAt(rows, 2, "t1");
   });
 
-  it("tool step anchors inline after its tool-batch group", () => {
+  it("tool step anchors inline after its LAST independent tool card", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolBatchGroup("t#0", ["c1", "c2"]);
+    const g2 = toolCallGroup("t#0", "c1");
+    const parallel = toolCallGroup("t#0", "c2");
     const g3 = assistantGroup(3, "a1");
     const step0 = makeStep("t#0", 100, 50);
     const step1 = makeStep("t#1", 200, 80);
     const turn = makeEntry("t1", 300, 130, [step0, step1]);
-    const rows = interleaveTurnMetrics([g1, g2, g3], [turn]);
+    const rows = interleaveTurnMetrics([g1, g2, parallel, g3], [turn]);
 
-    expect(rows).toHaveLength(5);
+    expect(rows).toHaveLength(6);
     expectGroupAt(rows, 0, g1);
     expectGroupAt(rows, 1, g2);
-    expectStepMetricsAt(rows, 2, "t#0", 0);
-    expectGroupAt(rows, 3, g3);
-    expectTurnMetricsAt(rows, 4, "t1");
+    expectGroupAt(rows, 2, parallel);
+    expectStepMetricsAt(rows, 3, "t#0", 0);
+    expectGroupAt(rows, 4, g3);
+    expectTurnMetricsAt(rows, 5, "t1");
   });
 
   it("single tool-call group anchors its step", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolCallGroup(2, "s1", "c1");
+    const g2 = toolCallGroup("s1", "c1");
     const g3 = assistantGroup(3, "a1");
     const step = makeStep("s1", 100, 50);
     const turn = makeEntry("t1", 100, 50, [step]);
@@ -255,7 +243,7 @@ describe("interleaveTurnMetrics", () => {
 
   it("single tool-result group anchors its step", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolResultGroup(2, "s1", "c1");
+    const g2 = toolResultGroup("s1", "c1");
     const g3 = assistantGroup(3, "a1");
     const step = makeStep("s1", 100, 50);
     const turn = makeEntry("t1", 100, 50, [step]);
@@ -271,9 +259,9 @@ describe("interleaveTurnMetrics", () => {
 
   it("multi-step: each tool step inline, unanchored text step skipped", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolBatchGroup("t#0", ["c1"]);
+    const g2 = toolCallGroup("t#0", "c1");
     const g3 = assistantGroup(2, "thinking");
-    const g4 = toolBatchGroup("t#1", ["c2", "c3"]);
+    const g4 = toolCallGroup("t#1", "c2");
     const g5 = assistantGroup(3, "a1");
     const step0 = makeStep("t#0", 100, 50);
     const step1 = makeStep("t#1", 200, 80);
@@ -294,10 +282,10 @@ describe("interleaveTurnMetrics", () => {
 
   it("multiple turns head-aligned with inline steps", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolBatchGroup("s1", ["c1"]);
+    const g2 = toolCallGroup("s1", "c1");
     const g3 = assistantGroup(2, "a1");
     const g4 = userGroup(3, "q2");
-    const g5 = toolCallGroup(4, "s2", "c2");
+    const g5 = toolCallGroup("s2", "c2");
     const step1 = makeStep("s1", 100, 50);
     const step2 = makeStep("s2", 200, 80);
     const rows = interleaveTurnMetrics(
@@ -332,7 +320,7 @@ describe("interleaveTurnMetrics", () => {
 
   it("fewer metrics than segments: trailing segments are bare", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolCallGroup(2, "s1", "c1");
+    const g2 = toolCallGroup("s1", "c1");
     const g3 = userGroup(3, "q2");
     const g4 = assistantGroup(4, "a2");
     const g5 = userGroup(5, "q3");
@@ -361,7 +349,7 @@ describe("interleaveTurnMetrics", () => {
     // stepId groups) — the failure case. The text-only turn MUST get its OWN
     // entry (t3), NOT the trimmed t1's stale metrics.
     const g3 = userGroup(3, "q2");
-    const g4 = toolBatchGroup("s2", ["c2"]);
+    const g4 = toolCallGroup("s2", "c2");
     const g5 = assistantGroup(4, "tool-reply");
     const g6 = userGroup(5, "q3");
     const g7 = assistantGroup(6, "text-reply");
@@ -436,7 +424,7 @@ describe("interleaveTurnMetrics", () => {
 
   it("in-flight turn (no durationMs) still produces turn row", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolCallGroup(2, "s1", "c1");
+    const g2 = toolCallGroup("s1", "c1");
     const step = makeStep("s1", 100, 50);
     const turn: TurnMetricsEntry = {
       turnId: "t1",
@@ -459,7 +447,7 @@ describe("interleaveTurnMetrics", () => {
   it("leading non-turn groups emit as plain group rows", () => {
     const g0 = assistantGroup(1, "system msg");
     const g1 = userGroup(2, "q1");
-    const g2 = toolCallGroup(3, "s1", "c1");
+    const g2 = toolCallGroup("s1", "c1");
     const step = makeStep("s1", 100, 50);
     const rows = interleaveTurnMetrics([g0, g1, g2], [makeEntry("t1", 100, 50, [step])]);
 
@@ -473,7 +461,7 @@ describe("interleaveTurnMetrics", () => {
 
   it("trimmed turn (more metrics than segments) does NOT emit a standalone row at the top", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolCallGroup(2, "s1", "c1");
+    const g2 = toolCallGroup("s1", "c1");
     const step1 = makeStep("s1", 100, 50);
     const step2 = makeStep("s2", 200, 80);
     const rows = interleaveTurnMetrics(
@@ -509,7 +497,7 @@ describe("interleaveTurnMetrics", () => {
 
   it("progressive: entry with steps but total=null emits step rows and NO turn-metrics row", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolBatchGroup("s1", ["c1"]);
+    const g2 = toolCallGroup("s1", "c1");
     const g3 = assistantGroup(2, "a1");
     const step1 = makeStep("s1", 100, 50);
     const entry = makeProgressiveEntry("t1", [step1]);
@@ -524,7 +512,7 @@ describe("interleaveTurnMetrics", () => {
 
   it("entry with total emits step rows + a turn-metrics row", () => {
     const g1 = userGroup(1, "q1");
-    const g2 = toolBatchGroup("s1", ["c1"]);
+    const g2 = toolCallGroup("s1", "c1");
     const g3 = assistantGroup(2, "a1");
     const step1 = makeStep("s1", 100, 50);
     const entry = makeEntry("t1", 100, 50, [step1]);
diff --git a/src/core/metrics/place.ts b/src/core/metrics/place.ts
index 9f8b109..d4c343a 100644
--- a/src/core/metrics/place.ts
+++ b/src/core/metrics/place.ts
@@ -3,13 +3,11 @@ import type { RenderGroup } from "../chunks";
 import type { MetricsRow, StepMetrics, TurnMetricsEntry } from "./types";
 
 function groupStepId(g: RenderGroup): string | undefined {
-  if (g.kind === "tool-batch") return g.stepId;
-  const c = g.chunk.chunk;
-  return c.type === "tool-call" || c.type === "tool-result" ? c.stepId : undefined;
+  return g.kind === "tool" ? g.stepId : undefined;
 }
 
 function groupTurnId(g: RenderGroup): string | undefined {
-  return g.kind === "tool-batch" ? g.turnId : g.chunk.turnId;
+  return g.kind === "tool" ? g.turnId : g.chunk.turnId;
 }
 
 function isUser(g: RenderGroup): boolean {
diff --git a/src/core/metrics/placement-scenarios.test.ts b/src/core/metrics/placement-scenarios.test.ts
index 16499f7..ce3ed5b 100644
--- a/src/core/metrics/placement-scenarios.test.ts
+++ b/src/core/metrics/placement-scenarios.test.ts
@@ -36,9 +36,9 @@ function layout(rows: readonly MetricsRow[]): string[] {
       const c = r.group.chunk.chunk;
       if (c.type === "text") out.push(`${r.group.chunk.role}:${c.text}`);
       else if (c.type === "image") out.push(`${r.group.chunk.role}:<img>`);
-      else if (c.type === "tool-call") out.push(`call:${c.toolCallId}`);
-      else if (c.type === "tool-result") out.push(`result:${c.toolCallId}`);
       else if (c.type === "error") out.push(`error:${c.message}`);
+    } else {
+      out.push(`tool:${r.group.entry.toolCallId}`);
     }
   }
   return out;
@@ -245,8 +245,7 @@ for (const legacy of [false, true]) {
       expect(sim.layout()).toEqual([
         ...before,
         "user:q5",
-        "call:k1",
-        "result:k1",
+        "tool:k1",
         "[step t5#0]",
         "assistant:a5",
         "[turn t5]",
@@ -291,8 +290,7 @@ for (const legacy of [false, true]) {
         "assistant:a1",
         "[turn t1]",
         "user:q2",
-        "call:k1",
-        "result:k1",
+        "tool:k1",
         "[step t2#0]",
         "user:steer!",
       ]);
@@ -304,12 +302,10 @@ for (const legacy of [false, true]) {
         "assistant:a1",
         "[turn t1]",
         "user:q2",
-        "call:k1",
-        "result:k1",
+        "tool:k1",
         "[step t2#0]",
         "user:steer!",
-        "call:k2",
-        "result:k2",
+        "tool:k2",
         "[step t2#1]",
         "assistant:a2",
         "[turn t2]",