viewer v1: typed Ticket + Customer widgets in the scene pane

The scene pane now renders typed scenegrad scenes through proper widgets
when the shape is recognized — Ticket on the left (8/12), Customer on
the right (4/12). Falls back to the JSON-tree-with-diff for arbitrary
shapes (any other env's scenes).

Widgets (lives in viewer/widgets/, will promote to scenecast when stable):
  - Ticket card
    * Header: ID + subject + color-coded status pill
      (slate=new, blue=investigating, emerald=auto-resolved,
       amber=escalated-t2, red=escalated-vip)
    * Customer chip + KB-match chip when matched
    * Quoted issue body
    * Reply callout with [CRITICAL]/[HIGH]/[URGENT] prefix tags styled
      as inline colored prefix blocks
  - Customer card
    * Tier badge: free=slate, pro=sky, enterprise=gold
    * LTV (formatted as $480k / $1.2M)
    * Prior-incidents counter, color-coded by severity
    * Empty-state placeholder when enrich hasn't run yet

Per-tool granularity fix:
  Previous trajectory: agent batched enrich + search_kb in one Anthropic
  step, so kb_match appeared at step 1 alongside enrich. Trajectory read
  as 4 cleanly-separated tool calls but the scene transitions were
  conflated.

  Fix: pass providerOptions.anthropic.disableParallelToolUse=true so the
  model picks one tool per turn. Plus wrap each tool's execute() in a
  `recorded` helper that calls watcher.recordStep right after the world
  mutation — gives one trajectory step per tool invocation regardless of
  how AI SDK's onStepFinish batches.

  Result: trajectory now shows
    step 0 read_ticket           → empty ticket
    step 1 enrich_with_account   → status:investigating + enriched data
    step 2 search_kb             → kb_match:KB-101 appears
    step 3 escalate_vip          → status:escalated-vip + reply
  Each step has a single visible transformation. Watching it scrub is
  the wow.

Demo gif regenerated. 1.4MB, 12s, 900px. The Ticket card's red
status pill at step 3 is the punchline.

Author: mirkokiefer

docs/demo.gif

@@ -103,63 +103,73 @@ const watcher = observe<Ticket>({
 // Tools — Vercel AI SDK native
 // ---------------------------------------------------------------------------
 
+// Helper: wrap a tool's execute so scenegrad records one trajectory step
+// per tool invocation (not per AI SDK "step" which can batch tool calls).
+function recorded<I, O>(name: string, exec: (input: I) => Promise<O> | O) {
+  return async (input: I) => {
+    const result = await exec(input);
+    await watcher.recordStep({ tool: { name, args: input as any } });
+    return result;
+  };
+}
+
 const tools = {
   read_ticket: tool({
     description: "Read the current ticket details.",
     inputSchema: z.object({}),
-    execute: async () => world.ticket,
+    execute: recorded("read_ticket", async () => world.ticket),
   }),
 
   enrich_with_account: tool({
     description: "Look up the customer's account tier, LTV, and incident history.",
     inputSchema: z.object({
       customer_id: z.string().describe("e.g. acme-corp"),
     }),
-    execute: async ({ customer_id }) => {
+    execute: recorded("enrich_with_account", async ({ customer_id }) => {
       const profile = world.customer_db[customer_id];
       if (!profile) return { error: "customer not found" };
       world.ticket.enriched = profile;
       world.ticket.status = "investigating";
       return profile;
-    },
+    }),
   }),
 
   search_kb: tool({
     description: "Search the knowledge base for articles matching keywords from the ticket.",
     inputSchema: z.object({
       keywords: z.array(z.string()).describe("e.g. ['webhook', '504']"),
     }),
-    execute: async ({ keywords }) => {
+    execute: recorded("search_kb", async ({ keywords }) => {
       const matches = world.kb.filter(article =>
         keywords.some(k => article.matches.some(m => m.toLowerCase().includes(k.toLowerCase()))));
       const best = matches[0];
       world.ticket.kb_match = best?.id ?? "no-match";
       return { matches, best_match: best };
-    },
+    }),
   }),
 
   auto_resolve: tool({
     description: "Auto-resolve the ticket with a KB-based reply. Only use for non-enterprise + clear KB match.",
     inputSchema: z.object({
       reply: z.string().describe("The auto-response to send"),
     }),
-    execute: async ({ reply }) => {
+    execute: recorded("auto_resolve", async ({ reply }) => {
       world.ticket.reply = reply;
       world.ticket.status = "auto-resolved";
       return { ok: true, status: "auto-resolved" };
-    },
+    }),
   }),
 
   escalate_t2: tool({
     description: "Escalate to Tier-2 engineering support. Use for non-VIP technical issues.",
     inputSchema: z.object({
       reason: z.string(),
     }),
-    execute: async ({ reason }) => {
+    execute: recorded("escalate_t2", async ({ reason }) => {
       world.ticket.reply = `Escalated to T2: ${reason}`;
       world.ticket.status = "escalated-t2";
       return { ok: true, status: "escalated-t2" };
-    },
+    }),
   }),
 
   escalate_vip: tool({
@@ -168,11 +178,11 @@ const tools = {
       reason:  z.string(),
       urgency: z.enum(["high", "critical"]),
     }),
-    execute: async ({ reason, urgency }) => {
+    execute: recorded("escalate_vip", async ({ reason, urgency }) => {
       world.ticket.reply = `[${urgency.toUpperCase()}] Escalated to VIP: ${reason}`;
       world.ticket.status = "escalated-vip";
       return { ok: true, status: "escalated-vip" };
-    },
+    }),
   }),
 };
 
@@ -198,6 +208,11 @@ const result = await generateText({
   model: anthropic("claude-haiku-4-5"),
   stopWhen: stepCountIs(8),
   tools,
+  // Disable parallel tool calls so the trajectory shows one tool per step
+  // instead of batching enrich + search_kb in a single model turn.
+  providerOptions: {
+    anthropic: { disableParallelToolUse: true },
+  },
 
   // The system prompt is regenerated on every step via `prepareStep` —
   // so the agent always sees fresh status from scenegrad.
@@ -221,15 +236,9 @@ const result = await generateText({
     };
   },
 
-  // scenegrad's only line of integration: re-snapshot the world after each tool result.
-  onStepFinish: async ({ toolCalls }) => {
-    for (const call of toolCalls ?? []) {
-      await watcher.recordStep({
-        tool: { name: call.toolName, args: (call as any).input ?? (call as any).args ?? {} },
-      });
-    }
-    if (!toolCalls || toolCalls.length === 0) await watcher.recordStep({});
-  },
+  // (scenegrad's recordStep happens inside each tool's execute — see the
+  //  `recorded` helper above. That gives one trajectory step per tool call,
+  //  even when AI SDK batches multiple tool calls in one model step.)
 
   prompt: `Triage ticket ${world.ticket.id}. Read it, enrich it, search the KB, then route.`,
 });

examples/support-triage-aisdk.ts

@@ -1 +1 @@
-{"trace_id":"36e8d3b0d8456ca65eab2a9d02c72d7b","span_id":"3bab7e75f1a9452d","parent_span_id":null,"name":"support-triage.TKT-9341.haiku-4-5","start_time_ns":1777809583601000000,"end_time_ns":1777809591127000000,"kind":0,"status":{"code":0},"attributes":{"bench.task_id":"support-triage-TKT-9341","bench.solver":"observer","bench.model":"claude-haiku-4-5","bench.success":true,"bench.steps":5,"bench.d_initial":4,"bench.d_final":0,"bench.duration_ms":7526},"events":[{"name":"scene.set","time_ns":1777809584685000000,"attributes":{"scene.key":"tool","scene.kind":"intent","scene.value":"{\"tool\":{\"name\":\"read_ticket\",\"args\":{}}}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"read_ticket"}},{"name":"scene.set","time_ns":1777809584685000000,"attributes":{"scene.key":"distance","scene.kind":"actual","scene.value":"{\"d_before\":4,\"d_after\":4,\"delta\":0}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"step 0"}},{"name":"scene.set","time_ns":1777809584685000000,"attributes":{"scene.key":"scene","scene.kind":"actual","scene.value":"{\"id\":\"TKT-9341\",\"subject\":\"Webhook deliveries failing with 504\",\"body\":\"We've had 12 webhook timeouts since 2pm UTC. Our integration is critical for our checkout flow. Please advise ASAP.\",\"customer\":\"acme-corp\",\"status\":\"new\"}","scene.value.type":"json","scene.value.size":228,"scene.commit_hash":"","scene.description":"world state after step 0"}},{"name":"scene.set","time_ns":1777809586009000000,"attributes":{"scene.key":"tool","scene.kind":"intent","scene.value":"{\"tool\":{\"name\":\"enrich_with_account\",\"args\":{\"customer_id\":\"acme-corp\"}}}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"enrich_with_account"}},{"name":"scene.set","time_ns":1777809586009000000,"attributes":{"scene.key":"distance","scene.kind":"actual","scene.value":"{\"d_before\":4,\"d_after\":2,\"delta\":2}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"step 1"}},{"name":"scene.set","time_ns":1777809586009000000,"attributes":{"scene.key":"scene","scene.kind":"actual","scene.value":"{\"id\":\"TKT-9341\",\"subject\":\"Webhook deliveries failing with 504\",\"body\":\"We've had 12 webhook timeouts since 2pm UTC. Our integration is critical for our checkout flow. Please advise ASAP.\",\"customer\":\"acme-corp\",\"status\":\"investigating\",\"enriched\":{\"tier\":\"enterprise\",\"ltv_usd\":480000,\"prior_incidents\":3},\"kb_match\":\"KB-101\"}","scene.value.type":"json","scene.value.size":328,"scene.commit_hash":"","scene.description":"world state after step 1"}},{"name":"scene.set","time_ns":1777809586009000000,"attributes":{"scene.key":"tool","scene.kind":"intent","scene.value":"{\"tool\":{\"name\":\"search_kb\",\"args\":{\"keywords\":[\"webhook\",\"504\",\"timeout\"]}}}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"search_kb"}},{"name":"scene.set","time_ns":1777809586009000000,"attributes":{"scene.key":"distance","scene.kind":"actual","scene.value":"{\"d_before\":2,\"d_after\":2,\"delta\":0}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"step 2"}},{"name":"scene.set","time_ns":1777809586009000000,"attributes":{"scene.key":"scene","scene.kind":"actual","scene.value":"{\"id\":\"TKT-9341\",\"subject\":\"Webhook deliveries failing with 504\",\"body\":\"We've had 12 webhook timeouts since 2pm UTC. Our integration is critical for our checkout flow. Please advise ASAP.\",\"customer\":\"acme-corp\",\"status\":\"investigating\",\"enriched\":{\"tier\":\"enterprise\",\"ltv_usd\":480000,\"prior_incidents\":3},\"kb_match\":\"KB-101\"}","scene.value.type":"json","scene.value.size":328,"scene.commit_hash":"","scene.description":"world state after step 2"}},{"name":"scene.set","time_ns":1777809589117000000,"attributes":{"scene.key":"tool","scene.kind":"intent","scene.value":"{\"tool\":{\"name\":\"escalate_vip\",\"args\":{\"reason\":\"Enterprise customer acme-corp reporting webhook 504 timeouts affecting critical checkout flow (12 failures since 2pm UTC). LTV $480k, 3 prior incidents. KB match available (KB-101) but escalation to VIP required per enterprise policy.\",\"urgency\":\"critical\"}}}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"escalate_vip"}},{"name":"scene.set","time_ns":1777809589117000000,"attributes":{"scene.key":"distance","scene.kind":"actual","scene.value":"{\"d_before\":2,\"d_after\":0,\"delta\":2}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"step 3"}},{"name":"scene.set","time_ns":1777809589117000000,"attributes":{"scene.key":"scene","scene.kind":"actual","scene.value":"{\"id\":\"TKT-9341\",\"subject\":\"Webhook deliveries failing with 504\",\"body\":\"We've had 12 webhook timeouts since 2pm UTC. Our integration is critical for our checkout flow. Please advise ASAP.\",\"customer\":\"acme-corp\",\"status\":\"escalated-vip\",\"enriched\":{\"tier\":\"enterprise\",\"ltv_usd\":480000,\"prior_incidents\":3},\"kb_match\":\"KB-101\",\"reply\":\"[CRITICAL] Escalated to VIP: Enterprise customer acme-corp reporting webhook 504 timeouts affecting critical checkout flow (12 failures since 2pm UTC). LTV $480k, 3 prior incidents. KB match available (KB-101) but escalation to VIP required per enterprise policy.\"}","scene.value.type":"json","scene.value.size":602,"scene.commit_hash":"","scene.description":"world state after step 3"}},{"name":"scene.set","time_ns":1777809591127000000,"attributes":{"scene.key":"distance","scene.kind":"actual","scene.value":"{\"d_before\":0,\"d_after\":0,\"delta\":0}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"step 4"}},{"name":"scene.set","time_ns":1777809591127000000,"attributes":{"scene.key":"scene","scene.kind":"actual","scene.value":"{\"id\":\"TKT-9341\",\"subject\":\"Webhook deliveries failing with 504\",\"body\":\"We've had 12 webhook timeouts since 2pm UTC. Our integration is critical for our checkout flow. Please advise ASAP.\",\"customer\":\"acme-corp\",\"status\":\"escalated-vip\",\"enriched\":{\"tier\":\"enterprise\",\"ltv_usd\":480000,\"prior_incidents\":3},\"kb_match\":\"KB-101\",\"reply\":\"[CRITICAL] Escalated to VIP: Enterprise customer acme-corp reporting webhook 504 timeouts affecting critical checkout flow (12 failures since 2pm UTC). LTV $480k, 3 prior incidents. KB match available (KB-101) but escalation to VIP required per enterprise policy.\"}","scene.value.type":"json","scene.value.size":602,"scene.commit_hash":"","scene.description":"world state after step 4"}}]}
+{"trace_id":"abe4449ed36af09d708ad7bade62e3f5","span_id":"89bc177d94c2501d","parent_span_id":null,"name":"support-triage.TKT-9341.haiku-4-5","start_time_ns":1777812420861000000,"end_time_ns":1777812426131000000,"kind":0,"status":{"code":0},"attributes":{"bench.task_id":"support-triage-TKT-9341","bench.solver":"observer","bench.model":"claude-haiku-4-5","bench.success":true,"bench.steps":4,"bench.d_initial":4,"bench.d_final":0,"bench.duration_ms":5270},"events":[{"name":"scene.set","time_ns":1777812421933000000,"attributes":{"scene.key":"tool","scene.kind":"intent","scene.value":"{\"tool\":{\"name\":\"read_ticket\",\"args\":{}}}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"read_ticket"}},{"name":"scene.set","time_ns":1777812421933000000,"attributes":{"scene.key":"distance","scene.kind":"actual","scene.value":"{\"d_before\":4,\"d_after\":4,\"delta\":0}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"step 0"}},{"name":"scene.set","time_ns":1777812421933000000,"attributes":{"scene.key":"scene","scene.kind":"actual","scene.value":"{\"id\":\"TKT-9341\",\"subject\":\"Webhook deliveries failing with 504\",\"body\":\"We've had 12 webhook timeouts since 2pm UTC. Our integration is critical for our checkout flow. Please advise ASAP.\",\"customer\":\"acme-corp\",\"status\":\"new\"}","scene.value.type":"json","scene.value.size":228,"scene.commit_hash":"","scene.description":"world state after step 0"}},{"name":"scene.set","time_ns":1777812422952000000,"attributes":{"scene.key":"tool","scene.kind":"intent","scene.value":"{\"tool\":{\"name\":\"enrich_with_account\",\"args\":{\"customer_id\":\"acme-corp\"}}}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"enrich_with_account"}},{"name":"scene.set","time_ns":1777812422952000000,"attributes":{"scene.key":"distance","scene.kind":"actual","scene.value":"{\"d_before\":4,\"d_after\":3,\"delta\":1}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"step 1"}},{"name":"scene.set","time_ns":1777812422952000000,"attributes":{"scene.key":"scene","scene.kind":"actual","scene.value":"{\"id\":\"TKT-9341\",\"subject\":\"Webhook deliveries failing with 504\",\"body\":\"We've had 12 webhook timeouts since 2pm UTC. Our integration is critical for our checkout flow. Please advise ASAP.\",\"customer\":\"acme-corp\",\"status\":\"investigating\",\"enriched\":{\"tier\":\"enterprise\",\"ltv_usd\":480000,\"prior_incidents\":3}}","scene.value.type":"json","scene.value.size":308,"scene.commit_hash":"","scene.description":"world state after step 1"}},{"name":"scene.set","time_ns":1777812423976000000,"attributes":{"scene.key":"tool","scene.kind":"intent","scene.value":"{\"tool\":{\"name\":\"search_kb\",\"args\":{\"keywords\":[\"webhook\",\"504\",\"timeout\",\"deliveries\"]}}}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"search_kb"}},{"name":"scene.set","time_ns":1777812423976000000,"attributes":{"scene.key":"distance","scene.kind":"actual","scene.value":"{\"d_before\":3,\"d_after\":2,\"delta\":1}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"step 2"}},{"name":"scene.set","time_ns":1777812423976000000,"attributes":{"scene.key":"scene","scene.kind":"actual","scene.value":"{\"id\":\"TKT-9341\",\"subject\":\"Webhook deliveries failing with 504\",\"body\":\"We've had 12 webhook timeouts since 2pm UTC. Our integration is critical for our checkout flow. Please advise ASAP.\",\"customer\":\"acme-corp\",\"status\":\"investigating\",\"enriched\":{\"tier\":\"enterprise\",\"ltv_usd\":480000,\"prior_incidents\":3},\"kb_match\":\"KB-101\"}","scene.value.type":"json","scene.value.size":328,"scene.commit_hash":"","scene.description":"world state after step 2"}},{"name":"scene.set","time_ns":1777812426130999800,"attributes":{"scene.key":"tool","scene.kind":"intent","scene.value":"{\"tool\":{\"name\":\"escalate_vip\",\"args\":{\"reason\":\"Enterprise customer (acme-corp, $480K LTV) experiencing critical webhook delivery failures (504 timeouts) impacting checkout flow. 12 incidents since 2pm UTC. Prior incident history: 3. Requires immediate VIP escalation.\",\"urgency\":\"critical\"}}}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"escalate_vip"}},{"name":"scene.set","time_ns":1777812426130999800,"attributes":{"scene.key":"distance","scene.kind":"actual","scene.value":"{\"d_before\":2,\"d_after\":0,\"delta\":2}","scene.value.type":"json","scene.value.size":0,"scene.commit_hash":"","scene.description":"step 3"}},{"name":"scene.set","time_ns":1777812426130999800,"attributes":{"scene.key":"scene","scene.kind":"actual","scene.value":"{\"id\":\"TKT-9341\",\"subject\":\"Webhook deliveries failing with 504\",\"body\":\"We've had 12 webhook timeouts since 2pm UTC. Our integration is critical for our checkout flow. Please advise ASAP.\",\"customer\":\"acme-corp\",\"status\":\"escalated-vip\",\"enriched\":{\"tier\":\"enterprise\",\"ltv_usd\":480000,\"prior_incidents\":3},\"kb_match\":\"KB-101\",\"reply\":\"[CRITICAL] Escalated to VIP: Enterprise customer (acme-corp, $480K LTV) experiencing critical webhook delivery failures (504 timeouts) impacting checkout flow. 12 incidents since 2pm UTC. Prior incident history: 3. Requires immediate VIP escalation.\"}","scene.value.type":"json","scene.value.size":588,"scene.commit_hash":"","scene.description":"world state after step 3"}}]}

viewer/example-traces/scenegrad-support-triage-haiku-4-5.jsonl

@@ -141,7 +141,7 @@ <h2 class="font-semibold mb-3">Load a trajectory</h2>
           <span class="inline-block w-2 h-2 bg-emerald-200 rounded-sm align-middle mr-1"></span> changed this step
         </div>
       </div>
-      <div id="scene-pane" class="text-sm font-mono">
+      <div id="scene-pane" class="text-sm">
         <div class="text-slate-400 italic">no scene captured</div>
       </div>
     </div>