feat(dashboard): /traces/[id] human-readable conversation walkthrough

[OmkarRayAI]

Summary

Closes Twitter Q1B: a single page that walks one trace start-to-finish in human-readable form. Previously the dashboard rendered one request at a time; understanding what an agent actually did across N llm_calls, M tool_calls, and nested subagents required clicking through each individually.

What

New route: app/app/(obs)/traces/[id]/page.tsx

• Header: trace_id + spans count + total latency + total cost + total tokens + session_id + user_id
• Body: collapsible tree using native HTML <details> (server-rendered, zero client JS). Auto-expands the root and any agent_call; leaves llm_call/tool_call collapsed by default
• Per-node: kind badge (Agent / LLM / Tool / Action / Retrieve / Judge), label, duration, tokens, cost, start time. agent_call nodes also show subtree rollup (cost + nested-subagent count + descendant llm count)
• Inline content: prompt and response pulled from attrs.request / attrs.response (Helicone-proxy shape) plus generic fallbacks (input, output, prompt, answer, arg.0, question). 1500-char truncation with scrollable container; full data in the raw JSON drawer
• Events drawer per span (collapsed by default, first 50)
• Per-segment grouping: when any span carries session_segment > 0 (PR feat(sdk): session_reset() for mid-conversation segment boundaries #13), roots group into "Initial conversation / After reset Phase 4b: Dashboard cloud mode + sign-in flow #1 / After reset Phase 4c: self-service SaaS — signup, usage metering, docker-compose #2"
• Error spans: red dot indicator
• Raw span dump at the bottom for power users

app/lib/traces.ts: exported treeCostFromSpans so the page can decorate agent_call nodes without re-loading spans.

Reuses existing infra

• loadTraceSpansAsync (cloud-mode-aware loader from PR Phase 4b: Dashboard cloud mode + sign-in flow #1) — cloud tenants see only their own
• treeCostFromSpans (subtree rollup from PR feat: subagent cost rollup at the agent_call level #14)
• (obs) layout, glass styling, PageTitle/CrumbBack widgets

Linked from /agents

Rows on /agents already link to /traces/{trace_id}. With this PR shipped, that link lands on the full conversation walkthrough instead of the wiki-themed engineering view.

Test plan

• CI green (Python + dashboard typecheck + lint)
• Run an agent that produces a multi-step trace (examples/decorators_quickstart.py works), open /traces/<id> and verify: tree renders, agent_call rolls up subtree cost, prompts/responses inline, raw JSON at the bottom
• With wikitrace.session_reset() between turns, verify segment grouping
• In cloud mode, verify two tenants writing to the same trace_id see only their own spans

Twitter feedback closure

Q	Status
1A. Mid-conversation reset (segment boundaries)	✅ PR #13
1B. Human-readable trace tree view	✅ this PR
2. Subagent cost rollup at agent_call level	✅ PR #14

🤖 Generated with Claude Code