feat: show structured turn activity

web/src/structured.test.ts

@@ -182,7 +182,9 @@ describe("structured connection: data flow", () => {
       },
     });
 
-    expect(conn.el.querySelector(".structured-config-summary")?.textContent).toBe("Opus · High");
+    expect(conn.el.querySelector(".structured-config-trigger")?.getAttribute("aria-label")).toBe(
+      "Session settings. Model: Opus. Effort: High",
+    );
     (conn.el.querySelector(".structured-config-trigger") as HTMLButtonElement).click();
     const selects = conn.el.querySelectorAll<HTMLSelectElement>(".structured-config-select");
     expect(selects).toHaveLength(2);
@@ -587,6 +589,41 @@ describe("structured connection: turn/composer gating", () => {
     conn.dispose();
   });
 
+  it("shows live thinking time, tool activity, and context usage", () => {
+    const ws = new FakeSocket();
+    const conn = mount({ sockets: [ws] });
+    ws.open();
+    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
+    const activity = conn.el.querySelector<HTMLElement>(".structured-activity")!;
+    ws.emit({
+      type: "reduced_state",
+      state: {
+        turn: {
+          responding: true,
+          thinking: true,
+          active_tool_calls: [],
+          started_at: new Date().toISOString(),
+          started_context_tokens: 10_000,
+        },
+        usage: { used: 12_400, size: 200_000 },
+      },
+    });
+    expect(activity.hidden).toBe(false);
+    expect(activity.textContent).toContain("Thinking · 0s · 12.4k context / 200k context");
+
+    ws.emit({
+      type: "reduced_state",
+      state: {
+        turn: { responding: true, thinking: false, active_tool_calls: ["bash-1", "read-1"] },
+        usage: { used: 12_800, size: 200_000 },
+      },
+    });
+    expect(activity.textContent).toContain("Running 2 tools");
+    ws.emit({ type: "reduced_state", state: idleState });
+    expect(activity.hidden).toBe(true);
+    conn.dispose();
+  });
+
   it("sends a prompt on Enter, clears the draft, and restores it on failure", async () => {
     const ws = new FakeSocket();
     const conn = mount({ sockets: [ws] });