Interactive Evidence Graph (DAG)

Level 2: Interactive Forensic Evidence Graph

Level 2 visualizes the structural trust architecture as an interactive Directed Acyclic Graph (DAG) rendered in pure SVG:

┌──────────────┐     VERIFIED (Solid + Green Pulse)    ┌──────────────┐
│   Subject    │──────────────────────────────────────►│ Document     │
│   (did:web)  │                                       │ (did.json)   │
└──────────────┘                                       └──────┬───────┘
       │                                                      │
       │ OBSERVED (Solid Neutral)                             │ VERIFIED (Solid + Green Pulse)
       ▼                                                      ▼
┌──────────────┐                                       ┌──────────────┐
│ Origin / TLS │                                       │ Public Keys  │
│ (443 Valid)  │                                       │ (Ed25519)    │
└──────────────┘                                       └──────────────┘

Graph Navigation & Controls

• Pan: Click and drag any empty canvas area, or use the keyboard arrow keys (Left, Right, Up, Down).
• Zoom: Click the + / - buttons, use keyboard shortcuts + / -, or hold Ctrl/⌘ while scrolling. Press 0 or click the Maximize icon to reset zoom and pan.
• Node Selection: Click any node or navigate via Tab and press Enter to open its Forensic Side Drawer.

Edge Classifications & Visual Hierarchy

Edges denote how DID.is confirmed the relationship between nodes:

• VERIFIED (stroke: var(--ink), width 1.5): Backed by an active cryptographic proof (signature match, SCID hash check). Features an animated green pulse dot (circle r="2.6" fill="var(--ok)") traversing the path.
• OBSERVED (stroke: var(--neutral), width 1.2): Fetched and validated at the network/transport layer (e.g., TLS certificate presented on port 443).
• DECLARED (stroke: var(--neutral), dash "4 4"): Asserted inside the DID document itself without independent external verification (e.g., an unverified service endpoint or controller claim).
• FAILED (stroke: var(--fail), dash "3 3", width 1.4): A check was attempted and mathematically failed.

---

The Forensic Side Drawer

Selecting any node in the graph opens the Forensic Drawer (ForensicDrawer.tsx) from the right margin:

1. Node Header: Displays node kind (subject, document, key, service, origin, tls, history, credential), primary label, sublabel, and current state badge.
2. Forensic Facts Ledger: Key-value table listing exact parameters (e.g., Multicodec varint, curve name, key length, TLS subject CN, serial number, DNS SANs).
3. Provenance Digest: The SHA-256 canonical hash of the underlying data structure, with a one-click copy button.
4. Relationship Traversal: Lists all Incoming and Outgoing edges with their verification status. Clicking any related node instantly navigates the graph view and updates the drawer.
5. Keyboard Accessibility: Closes immediately upon pressing Escape; traps focus while open.

---