Skip to main content

​
Overview

The TraceCtrl Dashboard is a React + Vite + TypeScript SPA that visualizes your agentic system in real time. Access it at http://localhost:3000 after starting the stack.

​
Pages

​
Topology

Interactive graph visualization built with Cytoscape.js and dagre layout.
  • Agent nodes (blue) — each discovered agent with name, framework, and maturity
  • Tool nodes (green) — each tool connected to its owning agent
  • Edges — solid lines for agent-to-agent delegation, dashed lines for agent-to-tool usage
  • Legend — color-coded with connection type labels
  • Click any node to see its full metadata in the sidebar panel

​
Sessions

Trace explorer with two visualization modes:
  • Span Tree — hierarchical view showing parent-child span relationships with collapsible nodes, type badges (AGENT, TOOL, LLM, CHAIN), and proportional duration bars
  • Swimlane Timeline — waterfall view with horizontal bars showing parallel execution and temporal ordering
  • Phase Overlay — automatically detects execution phases with >1 second gaps
  • Replay Scrubber — step through the trace timeline
Click any span to expand inline details showing timing, attributes, input/output values, and resource metadata.

​
Risk Dashboard

CISO-level risk view with TAGAAI scoring. (Coming in Sprint 2)

​
Attack Paths

Ranked exploitation chains showing how an attacker could traverse agent-to-tool connections. (Coming in Sprint 2)

​
Development

cd tracectrl/ui
npm install
npm run dev   # Vite dev server at :5173
The dashboard reads the engine URL from VITE_ENGINE_URL (default: http://localhost:8000). This is baked at build time — for Docker, it’s set as a build ARG.