Story 2: UI — monaco editor + live span-tree viewer #12

New issue

Open

opened 2026-04-21 14:18:07 +00:00 by timur · 0 comments

timur commented

2026-04-21 14:18:07 +00:00

Owner

Goal

Replace the Cytoscape DAG editor with a Python-first editor: monaco code editor + live span-tree viewer. Toggle between views; both are first-class.

Parent epic: #10
Depends on: Story 1 (#11) — need the new Play.spans data model to render

Scope

Delete

Cytoscape editor (workflow_editor.html's canvas, graph.js, most of workflow_editor.js's node/edge plumbing, + palette, data-mapping UI)
Node properties drawer
Edge builder
Template-choice dialog (already gone; confirm)

New editor layout

Sidebar (existing layout from recent reorg): Workflow meta, Inputs editor, Versions, Run panel with examples, Benchmarks, Plays
Main area: toggle between three modes (top-right button group)
- Code — monaco editor bound to WorkflowVersion.python_source, Python syntax + LSP if available
- Tree — live span tree for the selected Play (defaults to most recent)
- Split — code left, tree right

Span tree viewer

Tree of span cards (name, status badge, duration, tags)
Clicking a span scrolls the code editor to the line that opened it (extracted from span metadata written by the flow.step context manager — requires capturing __file__/lineno at span start — also covered by hero_rpc#30)
Expandable: show recorded tags as a fields panel, logs as a collapsible text block, RPC request/response for rpc:* spans
Live-updating: SSE subscription to /api/plays/:sid/spans; new spans animate in as they arrive
Play selector: dropdown of last N Plays; defaults to most recent
For a running Play, spans stream live; for a completed Play, the full tree renders immediately

Sidebar integration

Run panel still works as today — typed-inputs form from @flow(inputs=...) declarations
On Run, UI switches to Split view with the freshly-started Play selected so the user watches it execute
Examples/Benchmarks/Plays panels unchanged from recent reorg

Done when

Cytoscape + graph.js + Cytoscape-specific CSS fully removed
Monaco editor loads, highlights Python, saves via workflow_save_from_json-equivalent (renamed if needed)
Tree view renders a completed Play's tree correctly (nested, with durations, tags, logs)
SSE streaming: open a new-run Play and see spans animate in live
Click-span-jumps-to-line works for spans with file+line metadata
Split view is the default for developers; Tree-only for non-coders
Schema leaves room for future edit-by-tree (Span has enough metadata to round-trip)

Estimate: ~1.5 weeks

Can run in parallel with Story 3.

## Goal Replace the Cytoscape DAG editor with a Python-first editor: monaco code editor + live span-tree viewer. Toggle between views; both are first-class. **Parent epic:** #10 **Depends on:** Story 1 (#11) — need the new Play.spans data model to render ## Scope ### Delete - Cytoscape editor (`workflow_editor.html`'s canvas, `graph.js`, most of `workflow_editor.js`'s node/edge plumbing, `+` palette, data-mapping UI) - Node properties drawer - Edge builder - Template-choice dialog (already gone; confirm) ### New editor layout - Sidebar (existing layout from recent reorg): Workflow meta, Inputs editor, Versions, Run panel with examples, Benchmarks, Plays - Main area: toggle between three modes (top-right button group) - **Code** — monaco editor bound to `WorkflowVersion.python_source`, Python syntax + LSP if available - **Tree** — live span tree for the selected Play (defaults to most recent) - **Split** — code left, tree right ### Span tree viewer - Tree of span cards (name, status badge, duration, tags) - Clicking a span scrolls the code editor to the line that opened it (extracted from span metadata written by the `flow.step` context manager — requires capturing `__file__`/lineno at span start — also covered by hero_rpc#30) - Expandable: show recorded tags as a fields panel, logs as a collapsible text block, RPC request/response for `rpc:*` spans - Live-updating: SSE subscription to `/api/plays/:sid/spans`; new spans animate in as they arrive - Play selector: dropdown of last N Plays; defaults to most recent - For a running Play, spans stream live; for a completed Play, the full tree renders immediately ### Sidebar integration - Run panel still works as today — typed-inputs form from `@flow(inputs=...)` declarations - On Run, UI switches to Split view with the freshly-started Play selected so the user watches it execute - Examples/Benchmarks/Plays panels unchanged from recent reorg ## Done when - Cytoscape + graph.js + Cytoscape-specific CSS fully removed - Monaco editor loads, highlights Python, saves via `workflow_save_from_json`-equivalent (renamed if needed) - Tree view renders a completed Play's tree correctly (nested, with durations, tags, logs) - SSE streaming: open a new-run Play and see spans animate in live - Click-span-jumps-to-line works for spans with file+line metadata - Split view is the default for developers; Tree-only for non-coders - Schema leaves room for future edit-by-tree (Span has enough metadata to round-trip) ## Estimate: ~1.5 weeks Can run in parallel with Story 3.