DAG Visualization Styling Reference

This document captures the exact styling specifications for the DAG (Directed Acyclic Graph) visualization, derived from the prototype HTML at docs/penpot-exports/html/audittrail-prototype.html. It serves as the single source of truth for any future DAG-related styling work.

Prototype Reference

The prototype renders the DAG using D3.js + dagre layout directly in SVG. The production implementation uses React Flow (@xyflow/react) + dagre (@dagrejs/dagre) with custom React node components. Both must produce visually identical output.

Edge Styling

Curve Type

Important: The prototype uses cubic bezier curves, NOT stepped/angular paths. React Flow's type: "smoothstep" produces right-angle paths with rounded corners — this is visually wrong. Always use type: "default" which renders true bezier curves matching the prototype.

Arrow Markers

Important: Use MarkerType.Arrow (open/unfilled), NOT MarkerType.ArrowClosed (filled triangle). The prototype draws an open V-shape chevron, not a solid triangle.

Edge Color by Target Node Status

ok / success / complete  ->  #22c55e  (green)
error                    ->  #f87171  (red)
warning / running        ->  #eab308  (amber)
default                  ->  #444444  (dark gray)

Highlighting Behavior

• Node click: Walk ancestors + descendants, set connected edges to strokeOpacity: 0.7, non-connected to 0.05
• Focus errors: Walk error node ancestors, set connected edges to strokeOpacity: 0.8 with stroke: #f87171, non-connected to 0.03
• Reset: All edges return to strokeOpacity: 0.4 with original status color

Node Styling

Shared Structure (all 4 node types)

+---+--------------------------------------+
|   | [BADGE]  Node Name              [*]  |   <- * = status dot
| A |  12ms $0.002                         |   <- A = left accent bar
| C |  gpt-4o                              |   <- model (LLM only)
+---+--------------------------------------+

Node Border Opacity

The prototype sets stroke-opacity: 0.8 on node borders. Production must use rgba equivalents:

ok / success / complete  ->  rgba(34, 197, 94, 0.8)
error                    ->  rgba(248, 113, 113, 0.8)
warning / running        ->  rgba(234, 179, 8, 0.8)
default                  ->  rgba(99, 99, 102, 0.8)

When selected, the border switches to the type color at full opacity with a glow shadow.

Type Badge

Type Colors

LLM       ->  #60a5fa  (blue)
Tool      ->  #c084fc  (purple)
Agent     ->  #2dd4bf  (teal)
Internal  ->  #636366  (gray)

Status Dot

Node Name

Subtitle (Duration / Cost / Model)

React Flow Handles (connection points)

Canvas

MiniMap

Tooltip (on hover)

Matches prototype .d3-tooltip class exactly.

Tooltip Content

• Title: font-weight: 600, font-size: 13px, margin-bottom: 6px
• Row labels: color: #a1a1a1
• Row values: font-family: monospace, font-size: 11px, color: #a855f7 (purple)
• Type value color: Matches type color (LLM=#60a5fa, Tool=#c084fc, Agent=#2dd4bf, Internal=#636366)
• Status value color: Matches status color

Dagre Layout Configuration

Controls Panel

Bug History

Edge curves rendering as angular steps (fixed 2026-03-30)

Symptom: DAG edges appeared as right-angle stepped paths instead of smooth curves.

Root cause: React Flow edge type was set to "smoothstep" which renders orthogonal paths with rounded corners. The prototype uses cubic bezier curves (C command in SVG path data).

Fix: Changed type: "smoothstep" to type: "default" in apiEdgeToFlowEdge() in dag-viewer.tsx. React Flow's "default" edge type renders true bezier curves matching the prototype.

Edge arrows rendering as filled triangles (fixed 2026-03-30)

Symptom: Arrow markers at edge endpoints were solid filled triangles instead of open V-shapes.

Root cause: MarkerType.ArrowClosed renders a filled triangle. The prototype draws an open chevron using two lines.

Fix: Changed MarkerType.ArrowClosed to MarkerType.Arrow with strokeWidth: 1.5.

Node borders at full opacity (fixed 2026-03-30)

Symptom: Node borders appeared slightly heavier/brighter than prototype.

Root cause: Border used raw hex colors at full opacity. The prototype applies stroke-opacity: 0.8 to all node borders.

Fix: Added statusBorder lookup map with rgba values at 0.8 alpha to all 4 node components (llm-node, tool-node, agent-node, internal-node).

Files