DSH Web GUI has a powerful “Trajectory” tab for recording execution history. However, tracking execution order and structural relationships in the table can sometimes be difficult. This plugin adds an interactive ReactFlow DAG beside the official view, providing a visualization of causality and execution order using the same source data.

Feature Overview

The plugin projects the official trajectory snapshot into a ReactFlow graph. It does not maintain a separate log; instead, it reads snapshot.views.get('trajectory') and renders it as nodes.

  • New tab: Adds a “Trace Graph” tab beside the official conversation view.
  • Nodes and edges: Nodes represent trajectory records (SYSTEM, USER, CONTEXT, ASSISTANT, TOOL, etc.). Edges show execution order (gray dashed lines) and structural relationships (colored solid lines that appear only when proven by the data).
  • Interaction: Hovering highlights upstream/downstream neighbors. Clicking a node lets you inspect the record’s Input / Output JSON.
  • Layout: The toolbar allows switching between dagre (hierarchical, default) and d3-force (organic). A ResizeObserver automatically adapts the layout when the view or sidebar is resized.
  • Configuration: In “Settings → Plugins,” you can enable or disable the plugin, control whether installation information is broadcast to agents, and set the default layout.

Installation

Before installing, make sure the environment meets the requirements: Node.js ^22.19 || >=24 and pnpm 11.

dsh plugin --profile web add github:tieveto666-code/dsh-client-ui-trace-graph

If you encounter the prepare script being blocked by pnpm ≥10 during the first installation, follow the dsh prompt, add the printed package key under allowBuilds in the configuration file pnpm-workspace.yaml, and then run add again.

Usage

After installation, restart dsh web and refresh the page. The new “Trace Graph” tab will appear next to the conversation tab.

  1. View the graph: Open the “Trace Graph” tab. Gray dashed lines show chronological order. Colored solid lines show proven causal or nested relationships.
  2. Inspect details: Click any node to view detailed Input / Output JSON in the sidebar.
  3. Switch layouts: In the toolbar above the graph, click the icons to toggle between the dagre and d3-force layouts.

Notes

  • Edge logic: Structural edges are conservative. If the trajectory data does not prove a relationship, only sequence edges are drawn.
  • ReactFlow attribution: ReactFlow retains its attribution badge in the corner unless a Pro license is used. This is intentional.
  • Performance: For large graphs containing hundreds of nodes, the particle count is automatically reduced. If you encounter rendering issues, consider disabling backdrop-filter on nodes.
  • Version compatibility: pnpm ≥10 may block prepare scripts. See the installation instructions above for how to handle this issue.