dsh-client-ui-trace-graph

The official DSH "Trajectory" tab is a powerful inspection table, but a flat list makes it hard to see execution order, causal nesting, and the full shape of an agent loop at a glance. This plugin reads that exact same trajectory ledger and renders it as an interactive ReactFlow DAG, adding a spatial dimension to how you read a run.

Two edge types carry the meaning: gray dashed sequence edges always encode chronological order (A happened, then B), while colored solid structure edges appear only when row fields prove a causal or nesting link, with no invented arrows. Nodes are typed by role (SYSTEM, USER, CONTEXT, ASSISTANT, TOOL, SUBTOOL, COMPACTION) and display summary, sequence number, latency, status, and token usage; click any node to inspect its recorded Input/Output JSON. The toolbar lets you toggle between a dagre hierarchical layout for causal depth and a d3-force organic overview, and hovering highlights upstream and downstream neighbors.

It mounts as a first-party conversation tab alongside the official views, no modal and no center-column takeover, with chrome colors that follow --dsw-* themes out of the box. If you routinely debug agent loops, trace tool-call chains, or need to explain a session execution structure to teammates, the Trace Graph tab turns what was a table into a picture you can read in a second.