[Feature]: Visual workflow graph / call tree DAG view for subagent task hierarchy

[wuyikk]

Summary

Add a visual DAG (directed acyclic graph) panel that displays subagent task hierarchies as an interactive workflow graph, replacing the current linear nested session list with a clear visual overview of task relationships, dependencies, and real-time progress.

Problem / goal

When running complex tasks that spawn multiple subagents (e.g. using skills like superpowers/subagent-driven-development), the current sidebar shows nested session lists (PR #938). While functional, this linear list makes it hard to grasp the overall task structure at a glance:

• Subagent relationships and parallelism are hidden behind expandable list items
• There is no way to see dependency chains between sub-tasks
• Progress status across all subagents requires clicking into each one individually
• Blocking relationships (e.g. Agent C waits for Agent B) are not visualized
• Timing/performance comparison across subagents is cumbersome

The goal is to provide a visual DAG/graph panel that shows the entire task hierarchy in one view, making it easy to monitor complex multi-agent workflows.

Primary user(s)

• Bob (IT / power user)
• Susan (non-technical)
• Other team roles

OpenCode primitive alignment

PR #938 already added the foundational data layer in OpenWork:

• sessionInfoById / getSessionById — child session lookup
• getMessagesBySessionId — lazy-load child session messages
• ensureSessionLoaded — triggers child session loading
• sessionLoadingById — per-session loading state

Session parent-child relationships are tracked via sessionId on TaskStepInfo. The data for rendering a DAG already exists in the session store — this feature is a UI-level transformation of that data from a flat nested list into a visual graph layout. No new OpenCode primitive is needed; this is purely an OpenWork UI enhancement.

Alignment with VISION/PRINCIPLES/PRODUCT

This aligns with OpenWork's core principles:

• Auditable (show what happened, when, and why): A visual DAG is far more auditable than a nested list — users can immediately see the full execution flow
• Extensible: Skills like superpowers/subagent-driven-development would benefit directly from better subagent visualization
• Permissioned: The graph panel respects existing session access controls
• Local/Remote: Works equally well for local and remote sessions since it uses the existing session store data

Testability

Manual testing:

1. Open a new session and send a prompt that triggers multi-agent spawns (e.g. use a skill with subagent-driven-development)
2. Verify the workflow graph panel appears alongside/as part of the sidebar
3. Confirm each subagent appears as a card with correct status color (green=done, orange=running, gray=pending)
4. Verify dependency arrows render correctly between dependent agents
5. Click a card and confirm it opens the sub-session conversation
6. Verify recursive nesting (sub-subagents) renders as nested sub-graphs
7. Test with different workspace sizes and subagent counts

Automated:

• Visual regression tests (Playwright screenshots) for the graph panel
• Unit tests for DAG layout calculation from session data

Ready to build it yourself?

No

Additional context

Related PR: #938 (nest subagent sessions under task steps)

The existing Excalidraw concept design is available for reference.

This is purely a UI enhancement — no new backend/API changes needed since the session store already tracks parent-child session relationships.