[Gastown] Dashboard Deep Drill-Down — Visualization, Conversation History, Cost Tracking #225
Description
Parent: #204 | Phase 3
Revised (Feb 2026): Expanded scope to match the product vision. This is no longer "polish" — it's the second wave of UI features that make the dashboard genuinely great.
Goal
Elevate the dashboard from functional to excellent. Every Gastown concept should be visually represented and interactively explorable.
Features
Sidebar
When you launch a Town's UI, the main app's sidebar nav should smoothly animate its contents to reveal the new Gastown Town sidebar UI (with a "back to towns" link which will slide the normal Kilo nav back in).
The sidebar should contain all important top-level items for the town:
- Overview
- Beads
- Merge Queue
- Agents
- Observability (logs, metrics, analytics, etc.)
- ...and any other important top-level interactions
Fullscreen App
Unlike other sections of the Kilo dash, Gastown should behave like an information-dense, full-screen application. Information should flow autonomously and smoothly animate throughout. The user should see the objects of the system, know how to manipulate them, and intuitively be able to flow from one object to another through a graph/pane interface that allows for seamless navigation.
Every object is explorable
In any UI, every object (rigs, beads (and the sub-types of beads), agents, and so on) should be introspectable. Activity feeds should be displayed whenever possible that highlight and place the object in its larger flow/feed.
This means we need to employ a scalable UI primitive that allows for this sort of endless navigation and drill down. I'm inspired by filesystem viewers (in particular macos's columns viewer that just scales to any depth effectively). We should employ both this scalable potentially columns-based approach with a focused metadata view that should be a vaul-based drawer which gives you even more detail for a particular object (this would be similar to previewing a file in macos's columns finder view).
The overview page
The overview page should almost present itself like a social media app, where the activity feed is front and center. But we should also have beautiful graphs which outline various activity over time (tokens, cost, beads, and so on).
Agent Session Terminal UI
A persistent pane should exist on the bottom of the app that uses xterm to proxy into the pty endpoint of a particular agent session (already done). When a user clicks on a new agent, a new tab should open in that bottom pane. This way you can easily communicate with or keep tabs on certain important agents (especially the mayor!)
Convoy Visualization
- Convoy timeline view: horizontal timeline showing bead completion events over time, with agent avatars at each completion point. Shows velocity and parallelism.
- Convoy dependency graph: if beads have dependencies, render as a DAG (green=done, yellow=wip, red=blocked).
- Stranded convoy detection: surface convoys where beads are open but no agents assigned. Prompt user to sling.
Agent Conversation History
- Full conversation replay: store agent conversation events in Agent DO. Agent detail panel can load past sessions.
- Search across conversations: full-text search over agent conversations within a rig. "What did Toast do about the auth module?"
- Session timeline: show all sessions for a polecat identity (Toast session 1, 2, 3...) with handoff points marked.
System Topology View
- Town map: visual graph — Mayor at center, rigs radiating outward, agents within each rig, animated connections showing active mail/communication flows. This is the "see the machine working" view.
- Mail flow visualization: arrows between agents showing recent mail. Click arrow → see message. POLECAT_DONE → MERGE_READY → MERGED flow becomes visually obvious.
Cost and Performance
- Cost dashboard: LLM cost per town/rig/agent/bead, breakdown by model, comparison over time.
- Agent performance cards: beads closed, avg time, quality rate (refinery pass rate).
- Model comparison: same work type, different models → which performs better.
- Cost per bead: LLM usage from gateway, attributed to specific agents and beads.
- Container cost: Cloudflare container uptime cost attributed to the town.
- Note: We might need to query microdollar_usage from the main postgres database and figure out how to somehow correlate the costs. That or figure out a way to capture the costs and write to gastown's DO's
Molecule Visualization
- Molecule progress stepper: when a bead has an attached molecule, show a step-by-step progress indicator (like a checkout flow) in the bead detail panel. Completed steps show summary, current step pulses, future steps are dimmed.
- Formula library browser: browse available formulas with descriptions and step previews.
Dependencies
DISCLAIMER: We're starting this dashboard task early so not all dependencies are complete. Use your best judgement to implement as much of this UI as possible without going overboard. The PR you create from this issue can simply document the gaps in implementation due to some things not being complete yet
- [Gastown] Dashboard UI Overhaul — Town Home, Mayor Chat, Rig Workbench #346 (Dashboard UI Overhaul — core screens)
- [Gastown] PR 14: Convoy Lifecycle #220 (Convoy Lifecycle)
- [Gastown] PR 17: Agent CVs & Performance Analytics #224 (Agent CVs & Analytics)
- [Gastown] Rig DO Event Log — Append-Only Bead Events for Real-Time Dashboard Feed #344 (Event Log)
Acceptance Criteria
- Town sidebar with smooth slide animation and Gastown-specific navigation items
- Fullscreen, information-dense app layout with seamless object-to-object navigation
- Convoy timeline + dependency graph visualization
- Stranded convoy detection with prompt to sling
- Agent conversation history with replay and search
- Session timeline with handoff points for polecat identities
- System topology view with animated mail flows
- Cost dashboard (town/rig/agent/bead granularity)
- Agent performance cards and model comparison
- Cost per bead and container cost attribution
- Molecule progress stepper in bead detail panel
- Formula library browser
- All visualizations are interactive (clickable → drill-down)