fix(web): preserve expanded structured cards

web/src/structured.test.ts

@@ -44,6 +44,22 @@ function row(id: string, kind: TranscriptRow["kind"], data: unknown): Transcript
   return { id, kind, data };
 }
 
+function toolRow(id: string, text: string): TranscriptRow {
+  return row(id, "tool_call", {
+    title: `Read(${id})`,
+    status: "completed",
+    content: [{ type: "content", content: { type: "text", text } }],
+  });
+}
+
+function diffRow(id: string, newText: string): TranscriptRow {
+  return row(id, "tool_diff", {
+    title: `Edit(${id})`,
+    status: "completed",
+    content: [{ type: "diff", path: "file.ts", oldText: "before", newText }],
+  });
+}
+
 const idleState: ReducedState = { turn: { responding: false, thinking: false, active_tool_calls: [] } };
 
 const allApprovalOptions = [
@@ -535,6 +551,69 @@ describe("structured connection: reconnection/error/loading", () => {
     conn.dispose();
   });
 
+  it("keeps surviving expanded rows open across a reconnect snapshot and leaves fresh rows collapsed", () => {
+    const first = new FakeSocket();
+    const second = new FakeSocket();
+    const conn = mount({ sockets: [first, second], shouldReconnect: () => true });
+    first.open();
+    first.emit({
+      type: "transcript_snapshot",
+      snapshot: { cursor: 2, rows: [toolRow("tool:1", "before"), diffRow("diff:1", "first")] },
+    });
+    for (const head of conn.el.querySelectorAll<HTMLButtonElement>(".st-tool-head")) head.click();
+
+    first.drop();
+    vi.advanceTimersByTime(1000);
+    second.open();
+    second.emit({
+      type: "transcript_snapshot",
+      snapshot: {
+        cursor: 3,
+        rows: [toolRow("tool:1", "after"), diffRow("diff:1", "second"), toolRow("tool:2", "new")],
+      },
+    });
+
+    expect(
+      conn.el.querySelector('[data-row-id="tool:1"] .st-tool-head')?.getAttribute("aria-expanded"),
+    ).toBe("true");
+    expect(
+      conn.el.querySelector('[data-row-id="diff:1"] .st-tool-head')?.getAttribute("aria-expanded"),
+    ).toBe("true");
+    expect(
+      conn.el.querySelector('[data-row-id="tool:2"] .st-tool-head')?.getAttribute("aria-expanded"),
+    ).toBe("false");
+    expect(conn.el.querySelector('[data-row-id="tool:1"] .st-tool-out')?.textContent).toContain("after");
+    conn.dispose();
+  });
+
+  it("prunes expanded IDs removed or made non-expandable by a snapshot", () => {
+    const ws = new FakeSocket();
+    const conn = mount({ sockets: [ws] });
+    ws.open();
+    ws.emit({
+      type: "transcript_snapshot",
+      snapshot: { cursor: 2, rows: [toolRow("tool:gone", "gone"), toolRow("tool:plain", "plain")] },
+    });
+    for (const head of conn.el.querySelectorAll<HTMLButtonElement>(".st-tool-head")) head.click();
+
+    ws.emit({
+      type: "transcript_snapshot",
+      snapshot: {
+        cursor: 3,
+        rows: [row("tool:plain", "agent_text", { content: { type: "text", text: "not a tool" } })],
+      },
+    });
+    ws.emit({
+      type: "transcript_snapshot",
+      snapshot: { cursor: 5, rows: [toolRow("tool:gone", "returned"), toolRow("tool:plain", "returned")] },
+    });
+
+    for (const head of conn.el.querySelectorAll<HTMLButtonElement>(".st-tool-head")) {
+      expect(head.getAttribute("aria-expanded")).toBe("false");
+    }
+    conn.dispose();
+  });
+
   it("keeps a local submission gated across a reconnect until begin-turn arrives", () => {
     vi.mocked(sendStructuredPrompt).mockImplementationOnce(() => new Promise(() => {}));
     const first = new FakeSocket();