htmlgraph 0.20.1__py3-none-any.whl → 0.27.5__py3-none-any.whl

htmlgraph/dashboard.html

@@ -4,11 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HtmlGraph Dashboard</title>
-    <!-- d3-force for graph layout simulation -->
-    <script src="https://d3js.org/d3-dispatch.v3.min.js"></script>
-    <script src="https://d3js.org/d3-quadtree.v3.min.js"></script>
-    <script src="https://d3js.org/d3-timer.v3.min.js"></script>
-    <script src="https://d3js.org/d3-force.v3.min.js"></script>
+    <!-- Vis.js for graph visualization -->
+    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+    <link href="https://unpkg.com/vis-network/styles/vis-network.min.css" rel="stylesheet" type="text/css" />
     <!-- Typography: JetBrains Mono + Outfit -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -106,9 +104,11 @@
             background: var(--bg-primary);
             color: var(--text-primary);
             line-height: 1.5;
-            min-height: 100vh;
+            height: 100vh;
             position: relative;
-            overflow-x: hidden;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
         }
 
         /* Subtle grain texture overlay */
@@ -126,6 +126,12 @@
             max-width: 1440px;
             margin: 0 auto;
             padding: 2rem;
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            min-height: 0;
+            width: 100%;
+            overflow: hidden;
         }
 
         /* ================================================================
@@ -211,6 +217,7 @@
             margin-bottom: 1rem;
             border: 2px solid var(--border-strong);
             width: fit-content;
+            flex-shrink: 0;
         }
 
         .view-btn {
@@ -252,8 +259,11 @@
         }
 
         .kanban.active {
-            display: block;
+            display: grid;
             width: 100%;
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
         }
 
         /* Dynamic grid: expanded columns grow, collapsed stay fixed */
@@ -871,6 +881,53 @@
         .badge.priority-high { background: var(--priority-high); color: white; border-color: var(--priority-high); }
         .badge.type { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
 
+        /* Agent attribution badges - color-coded by agent type */
+        .badge.agent {
+            padding: 0.375rem 0.625rem;
+            font-weight: 600;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.3rem;
+            position: relative;
+            transition: all 0.2s ease;
+            cursor: help;
+        }
+
+        .badge.agent::before {
+            content: '';
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            border-radius: 50%;
+            background: currentColor;
+            opacity: 0.8;
+        }
+
+        .badge.agent:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        /* Primary agents - Requested color system */
+        .badge.agent-claude { background: #2979FF; color: white; border-color: #2979FF; }
+        .badge.agent-codex { background: #00C853; color: white; border-color: #00C853; }
+        .badge.agent-orchestrator { background: #7C4DFF; color: white; border-color: #7C4DFF; }
+        .badge.agent-gemini { background: #FBC02D; color: #000; border-color: #FBC02D; }
+        .badge.agent-gemini-2 { background: #FF9100; color: white; border-color: #FF9100; }
+
+        /* Secondary agents - Backward compatibility */
+        .badge.agent-analyst { background: #7C3AED; color: white; border-color: #7C3AED; }
+        .badge.agent-developer { background: #00C853; color: white; border-color: #00C853; }
+        .badge.agent-researcher { background: #FF6D00; color: white; border-color: #FF6D00; }
+        .badge.agent-debugger { background: #E91E63; color: white; border-color: #E91E63; }
+        .badge.agent-default { background: #78909C; color: white; border-color: #78909C; }
+
+        /* Delegation badges */
+        .badge.delegation { padding: 0.25rem 0.5rem; font-size: 0.55rem; }
+        .badge.delegation-external { background: #00C853; color: white; }
+        .badge.delegation-fallback { background: #FF9100; color: white; }
+        .badge.delegation-direct { background: #2979FF; color: white; }
+
         .card-path {
             font-family: 'JetBrains Mono', monospace;
             font-size: 0.625rem;
@@ -895,18 +952,127 @@
             background: var(--bg-secondary);
             border: 2px solid var(--border-strong);
             box-shadow: var(--shadow-md);
+            flex-direction: column;
+            flex: 1;
+            min-height: 0;
+            overflow: hidden;
         }
 
         .graph-container.active {
-            display: block;
+            display: flex;
+        }
+
+        /* Graph Controls */
+        .graph-controls {
+            display: flex;
+            gap: 1.5rem;
+            align-items: center;
+            padding: 1rem;
+            border-bottom: 2px solid var(--border-strong);
+            background: var(--bg-tertiary);
+            flex-wrap: wrap;
+        }
+
+        .graph-control-group {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        .graph-filter-label {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--text-muted);
+            font-weight: 600;
+            white-space: nowrap;
+        }
+
+        .graph-filters {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .graph-filter-checkbox {
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+            cursor: pointer;
+            font-size: 0.875rem;
+            user-select: none;
+        }
+
+        .graph-filter-checkbox input {
+            cursor: pointer;
+            width: 16px;
+            height: 16px;
+            accent-color: var(--accent);
+        }
+
+        .graph-search {
+            padding: 0.5rem 0.75rem;
+            border: 2px solid var(--border-strong);
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.875rem;
+            border-radius: 0;
+            min-width: 150px;
+        }
+
+        .graph-search::placeholder {
+            color: var(--text-muted);
+        }
+
+        .graph-search:focus {
+            outline: none;
+            box-shadow: inset 0 0 0 2px var(--accent);
+        }
+
+        .graph-control-buttons {
+            margin-left: auto;
+        }
+
+        /* Graph Viewport */
+        .graph-viewport {
+            flex: 1;
+            min-height: 0;
+            position: relative;
+            overflow: hidden;
+            background: var(--bg-secondary);
+            width: 100%;
         }
 
         .graph-svg {
             width: 100%;
-            height: 600px;
+            height: 100%;
             display: block;
         }
 
+        /* Vis.js Network Container */
+        .graph-network {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
+        /* Vis.js Node Styling */
+        .vis-network {
+            border: none;
+            background: var(--bg-secondary);
+        }
+
+        /* Vis.js Label Styling */
+        .vis-label {
+            color: white;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
+            font-weight: 500;
+        }
+
+        /* Node Status Classes */
         .graph-node {
             cursor: pointer;
         }
@@ -915,10 +1081,39 @@
             stroke: var(--border-strong);
             stroke-width: 2;
             transition: all 0.2s var(--ease-out-expo);
+            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
         }
 
         .graph-node:hover circle {
             stroke-width: 4;
+            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
+        }
+
+        .graph-node.node-hidden {
+            display: none;
+        }
+
+        .graph-node.node-search-highlight circle {
+            stroke: var(--accent);
+            stroke-width: 3;
+        }
+
+        /* Status-based sizing */
+        .graph-node.node-done circle {
+            opacity: 0.6;
+            r: 15;
+        }
+
+        .graph-node.node-in-progress circle {
+            r: 25;
+        }
+
+        .graph-node.node-todo circle {
+            r: 22;
+        }
+
+        .graph-node.node-blocked circle {
+            r: 22;
         }
 
         .graph-node text {
@@ -932,8 +1127,9 @@
 
         .graph-edge {
             stroke: var(--border);
-            stroke-width: 2;
+            stroke-width: 1.5;
             fill: none;
+            transition: stroke-width 0.2s var(--ease-out-expo);
         }
 
         .graph-edge.blocked_by {
@@ -945,17 +1141,47 @@
             stroke: var(--status-active);
         }
 
+        .graph-edge.hidden {
+            display: none;
+        }
+
         .graph-arrowhead {
             fill: var(--border);
         }
 
-        .graph-legend {
+        .graph-edge.blocked_by .graph-arrowhead {
+            fill: var(--status-blocked);
+        }
+
+        .graph-edge.related .graph-arrowhead {
+            fill: var(--status-active);
+        }
+
+        /* Graph Footer */
+        .graph-footer {
             display: flex;
-            gap: 2rem;
-            justify-content: center;
+            justify-content: space-between;
+            align-items: center;
             padding: 1rem;
             border-top: 2px solid var(--border-strong);
             background: var(--bg-tertiary);
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .graph-stats {
+            display: flex;
+            gap: 1.5rem;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+        }
+
+        .graph-legend {
+            display: flex;
+            gap: 1.5rem;
+            justify-content: center;
+            flex-wrap: wrap;
         }
 
         .graph-legend-item {
@@ -963,20 +1189,29 @@
             align-items: center;
             gap: 0.5rem;
             font-family: 'JetBrains Mono', monospace;
-            font-size: 0.6875rem;
+            font-size: 0.75rem;
             text-transform: uppercase;
             letter-spacing: 0.1em;
             color: var(--text-muted);
         }
 
         .graph-legend-item span {
-            width: 24px;
+            width: 20px;
             height: 3px;
         }
 
+        .graph-legend-item span.legend-color {
+            width: 12px;
+            height: 12px;
+            border-radius: 2px;
+        }
+
+        .legend-done { background: var(--status-done); }
+        .legend-active { background: var(--status-active); }
+        .legend-todo { background: var(--status-todo); }
         .legend-blocked { background: var(--status-blocked); }
         .legend-related { background: var(--status-active); }
-        .legend-default { background: var(--border); }
+        .legend-blocked-edge { background: var(--status-blocked); }
 
         /* ================================================================
            ANALYTICS VIEW
@@ -987,7 +1222,11 @@
         }
 
         .analytics.active {
-            display: block;
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
         }
 
         /* ================================================================
@@ -999,84 +1238,805 @@
         }
 
         .sessions.active {
-            display: block;
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
         }
 
         /* ================================================================
-           TRACKS VIEW
+           AGENTS VIEW - Multi-Agent Work Attribution
            ================================================================ */
-        .tracks {
+        .agents {
             display: none;
+            margin-top: 1.5rem;
+            padding: 0 1.5rem 1.5rem 1.5rem;
         }
 
-        .tracks.active {
-            display: block;
+        .agents.active {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
         }
 
-        .sessions-table {
-            width: 100%;
-            border-collapse: collapse;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.875rem;
-            background: var(--bg-secondary);
-            border: 2px solid var(--border-strong);
-            box-shadow: var(--shadow-md);
+        .agent-stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin: 1rem 0;
         }
 
-        .sessions-table th,
-        .sessions-table td {
-            border-bottom: 1px solid var(--border);
-            padding: 0.875rem 1rem;
-            text-align: left;
-            vertical-align: middle;
+        .agent-stat-card {
+            background: var(--bg-secondary);
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            padding: 1.5rem;
+            text-align: center;
+            box-shadow: var(--shadow-sm);
         }
 
-        .sessions-table th {
+        .agent-stat-card h4 {
             color: var(--text-muted);
-            font-weight: 600;
+            font-size: 0.75rem;
             text-transform: uppercase;
             letter-spacing: 0.08em;
-            font-size: 0.625rem;
-            background: var(--bg-tertiary);
-            border-bottom: 2px solid var(--border-strong);
+            font-weight: 600;
+            margin-bottom: 0.5rem;
         }
 
-        .sessions-table tr:hover td {
-            background: var(--bg-tertiary);
+        .agent-stat-value {
+            font-size: 1.75rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            font-family: 'JetBrains Mono', monospace;
         }
 
-        .sessions-table .session-id {
+        .agent-stat-unit {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            margin-top: 0.25rem;
+        }
+
+        /* ================================================================
+           WORKLOAD DISTRIBUTION CHART
+           ================================================================ */
+        .workload-chart-container {
+            background: var(--bg-secondary);
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            padding: 1.5rem;
+            box-shadow: var(--shadow-sm);
+            margin-top: 1rem;
+        }
+
+        .workload-chart-header {
+            margin-bottom: 1.5rem;
+        }
+
+        .workload-chart-header h3 {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: var(--text-muted);
+            margin-bottom: 0.25rem;
             font-weight: 600;
-            color: var(--status-active);
-            cursor: pointer;
-            text-decoration: underline;
-            text-underline-offset: 2px;
         }
 
-        .sessions-table .session-id:hover {
-            color: var(--accent);
+        .workload-chart-header p {
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            margin: 0;
         }
 
-        /* Session Filters */
-        .session-filters {
+        .workload-bars {
             display: flex;
+            flex-direction: column;
             gap: 1rem;
-            padding: 1rem 1.5rem;
-            background: var(--bg-secondary);
-            border: 2px solid var(--border-strong);
-            box-shadow: var(--shadow-md);
-            margin-bottom: 1rem;
-            flex-wrap: wrap;
-            align-items: flex-end;
+            max-height: 600px;
+            overflow-y: auto;
         }
 
-        .filter-group {
+        .workload-bar-group {
             display: flex;
             flex-direction: column;
             gap: 0.375rem;
         }
 
-        .filter-group label {
+        .workload-bar-label {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--text-primary);
+            margin-bottom: 0.25rem;
+        }
+
+        .workload-bar-label-name {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            flex: 1;
+        }
+
+        .workload-agent-badge {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            font-size: 0.7rem;
+            font-weight: 600;
+            color: white;
+            flex-shrink: 0;
+        }
+
+        .workload-bar-value {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            white-space: nowrap;
+        }
+
+        .workload-bar-container {
+            position: relative;
+            width: 100%;
+            height: 32px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .workload-bar-fill {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            padding: 0 0.75rem;
+            transition: all 0.3s var(--ease-out-expo);
+            position: relative;
+            justify-content: flex-start;
+        }
+
+        .workload-bar-fill::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
+            pointer-events: none;
+        }
+
+        .workload-bar-text {
+            position: absolute;
+            right: 0.75rem;
+            top: 50%;
+            transform: translateY(-50%);
+            color: white;
+            font-size: 0.75rem;
+            font-weight: 600;
+            font-family: 'JetBrains Mono', monospace;
+            white-space: nowrap;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+            pointer-events: none;
+            z-index: 2;
+        }
+
+        .workload-bar-hover-info {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-strong);
+            border-radius: 4px;
+            padding: 0.75rem;
+            font-size: 0.75rem;
+            white-space: nowrap;
+            pointer-events: none;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.2s;
+            z-index: 100;
+            margin-bottom: 0.5rem;
+            box-shadow: var(--shadow-md);
+        }
+
+        .workload-bar-container:hover .workload-bar-hover-info {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .workload-bar-hover-info::after {
+            content: '';
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border: 6px solid transparent;
+            border-top-color: var(--border-strong);
+        }
+
+        .workload-chart-legend {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1.5rem;
+            margin-top: 1.5rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid var(--border);
+            font-size: 0.875rem;
+        }
+
+        .workload-legend-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .workload-legend-color {
+            width: 16px;
+            height: 16px;
+            border-radius: 3px;
+            flex-shrink: 0;
+        }
+
+        .workload-legend-label {
+            color: var(--text-secondary);
+        }
+
+        /* Agent Color System */
+        .agent-claude { background: linear-gradient(135deg, #6366f1, #818cf8); }
+        .agent-codex { background: linear-gradient(135deg, #10b981, #34d399); }
+        .agent-orchestrator { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
+        .agent-gemini-2 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
+        .agent-gemini { background: linear-gradient(135deg, #ec4899, #f472b6); }
+        .agent-analyst { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
+        .agent-developer { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
+
+        /* ================================================================
+           AGENT COST VISUALIZATION
+           ================================================================ */
+        .cost-breakdown-container {
+            background: var(--bg-secondary);
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            padding: 1.5rem;
+            box-shadow: var(--shadow-sm);
+            margin-top: 1rem;
+        }
+
+        .cost-breakdown-header {
+            margin-bottom: 1.5rem;
+        }
+
+        .cost-breakdown-header h3 {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: var(--text-muted);
+            margin-bottom: 0.25rem;
+            font-weight: 600;
+        }
+
+        .cost-breakdown-header p {
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            margin: 0;
+        }
+
+        .cost-summary-metrics {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .cost-metric {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            padding: 1rem;
+            text-align: center;
+        }
+
+        .cost-metric-label {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: var(--text-muted);
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+        }
+
+        .cost-metric-value {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .cost-metric-unit {
+            font-size: 0.65rem;
+            color: var(--text-muted);
+            margin-top: 0.25rem;
+        }
+
+        .cost-bars {
+            display: flex;
+            flex-direction: column;
+            gap: 1.25rem;
+            max-height: 600px;
+            overflow-y: auto;
+        }
+
+        .cost-bar-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.375rem;
+        }
+
+        .cost-bar-label {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--text-primary);
+            margin-bottom: 0.375rem;
+        }
+
+        .cost-bar-label-name {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            flex: 1;
+        }
+
+        .cost-agent-badge {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            font-size: 0.7rem;
+            font-weight: 600;
+            color: white;
+            flex-shrink: 0;
+        }
+
+        .cost-bar-stats {
+            display: flex;
+            gap: 1rem;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
+        }
+
+        .cost-bar-stat {
+            display: flex;
+            flex-direction: column;
+            gap: 0.125rem;
+        }
+
+        .cost-bar-stat-label {
+            color: var(--text-muted);
+            font-size: 0.65rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .cost-bar-stat-value {
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+
+        .cost-bar-container {
+            position: relative;
+            width: 100%;
+            height: 40px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .cost-bar-stacked {
+            display: flex;
+            height: 100%;
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .cost-bar-segment {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            transition: all 0.3s var(--ease-out-expo);
+            flex-grow: 1;
+            min-width: 2px;
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .cost-bar-segment:last-child {
+            border-right: none;
+        }
+
+        .cost-bar-segment::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
+            pointer-events: none;
+        }
+
+        .cost-bar-segment-label {
+            position: relative;
+            z-index: 2;
+            font-size: 0.65rem;
+            font-weight: 600;
+            font-family: 'JetBrains Mono', monospace;
+            color: white;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+            white-space: nowrap;
+            padding: 0 0.3rem;
+            pointer-events: none;
+        }
+
+        .cost-bar-tooltip {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-strong);
+            border-radius: 4px;
+            padding: 0.75rem;
+            font-size: 0.75rem;
+            pointer-events: none;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.2s;
+            z-index: 100;
+            margin-bottom: 0.5rem;
+            box-shadow: var(--shadow-md);
+            white-space: nowrap;
+        }
+
+        .cost-bar-segment:hover ~ .cost-bar-tooltip,
+        .cost-bar-container:hover .cost-bar-tooltip {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .cost-bar-tooltip::after {
+            content: '';
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border: 6px solid transparent;
+            border-top-color: var(--border-strong);
+        }
+
+        .cost-range-indicator {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.7rem;
+            color: var(--text-muted);
+            margin-top: 0.25rem;
+        }
+
+        .cost-range-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+
+        .cost-range-dot.low { background: #10b981; }
+        .cost-range-dot.medium { background: #f59e0b; }
+        .cost-range-dot.high { background: #ef4444; }
+
+        .cost-breakdown-legend {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1.5rem;
+            margin-top: 1.5rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid var(--border);
+            font-size: 0.875rem;
+        }
+
+        .cost-legend-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .cost-legend-color {
+            width: 16px;
+            height: 16px;
+            border-radius: 3px;
+            flex-shrink: 0;
+        }
+
+        .cost-legend-label {
+            color: var(--text-secondary);
+        }
+
+        /* Agent cost colors - match agent system */
+        .cost-claude { background: #2979FF; }
+        .cost-codex { background: #00C853; }
+        .cost-orchestrator { background: #7C4DFF; }
+        .cost-gemini { background: #FBC02D; }
+        .cost-gemini-2 { background: #FF9100; }
+        .agent-researcher { background: linear-gradient(135deg, #d946ef, #e879f9); }
+        .agent-debugger { background: linear-gradient(135deg, #ef4444, #f87171); }
+        .agent-default { background: linear-gradient(135deg, #6b7280, #9ca3af); }
+
+        .workload-empty-state {
+            text-align: center;
+            padding: 2rem;
+            color: var(--text-muted);
+        }
+
+        .workload-empty-state svg {
+            width: 48px;
+            height: 48px;
+            margin: 0 auto 1rem;
+            opacity: 0.5;
+        }
+
+        .workload-chart-responsive {
+            max-height: 500px;
+            overflow-y: auto;
+        }
+
+        @media (max-width: 768px) {
+            .workload-bar-group {
+                gap: 0.25rem;
+            }
+
+            .workload-bar-label {
+                font-size: 0.8rem;
+            }
+
+            .workload-bar-text {
+                font-size: 0.65rem;
+            }
+
+            .workload-chart-legend {
+                gap: 1rem;
+            }
+
+            .workload-bars {
+                max-height: 400px;
+            }
+        }
+
+        /* Skills Matrix Styles */
+        .skills-matrix-container {
+            background: var(--bg-secondary);
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            padding: 1.5rem;
+            box-shadow: var(--shadow-sm);
+            overflow-x: auto;
+        }
+
+        .skills-matrix {
+            display: grid;
+            grid-template-columns: 150px repeat(auto-fit, minmax(100px, 1fr));
+            gap: 0;
+            min-width: 600px;
+        }
+
+        .skills-matrix-cell {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.75rem;
+            border: 1px solid var(--border);
+            font-size: 0.85rem;
+            min-height: 50px;
+        }
+
+        .skills-matrix-header-row {
+            position: sticky;
+            top: 0;
+            background: var(--bg-tertiary);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-muted);
+            font-size: 0.75rem;
+            z-index: 10;
+        }
+
+        .skills-matrix-agent-name {
+            position: sticky;
+            left: 0;
+            background: var(--bg-tertiary);
+            font-weight: 600;
+            color: var(--text-primary);
+            text-align: left;
+            z-index: 11;
+        }
+
+        .skills-matrix-skill-label {
+            writing-mode: horizontal-tb;
+            white-space: nowrap;
+        }
+
+        .proficiency-dot {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            font-size: 0.7rem;
+            font-weight: 600;
+            transition: transform 0.2s, box-shadow 0.2s;
+            cursor: help;
+        }
+
+        .proficiency-dot:hover {
+            transform: scale(1.15);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+        }
+
+        .proficiency-1 {
+            background: #fee5e5;
+            color: #8b0000;
+            border: 1px solid #d4a5a5;
+        }
+
+        .proficiency-2 {
+            background: #ffcccb;
+            color: #660000;
+            border: 1px solid #c97c7c;
+        }
+
+        .proficiency-3 {
+            background: #ffb366;
+            color: #5a3a00;
+            border: 1px solid #cc8844;
+        }
+
+        .proficiency-4 {
+            background: #99ff99;
+            color: #1a4d1a;
+            border: 1px solid #66cc66;
+        }
+
+        .proficiency-5 {
+            background: #00cc00;
+            color: #ffffff;
+            border: 1px solid #009900;
+        }
+
+        .skill-category-legend {
+            display: flex;
+            gap: 1.5rem;
+            flex-wrap: wrap;
+            margin-top: 1.5rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid var(--border);
+        }
+
+        .skill-category-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .skill-category-icon {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border-radius: 3px;
+            background: var(--accent);
+        }
+
+        .skill-tooltip {
+            position: absolute;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-strong);
+            border-radius: 4px;
+            padding: 0.5rem 0.75rem;
+            font-size: 0.75rem;
+            white-space: nowrap;
+            pointer-events: none;
+            z-index: 1000;
+            box-shadow: var(--shadow-md);
+        }
+
+        /* ================================================================
+           TRACKS VIEW
+           ================================================================ */
+        .tracks {
+            display: none;
+        }
+
+        .tracks.active {
+            display: block;
+        }
+
+        .sessions-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.875rem;
+            background: var(--bg-secondary);
+            border: 2px solid var(--border-strong);
+            box-shadow: var(--shadow-md);
+        }
+
+        .sessions-table th,
+        .sessions-table td {
+            border-bottom: 1px solid var(--border);
+            padding: 0.875rem 1rem;
+            text-align: left;
+            vertical-align: middle;
+        }
+
+        .sessions-table th {
+            color: var(--text-muted);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            font-size: 0.625rem;
+            background: var(--bg-tertiary);
+            border-bottom: 2px solid var(--border-strong);
+        }
+
+        .sessions-table tr:hover td {
+            background: var(--bg-tertiary);
+        }
+
+        .sessions-table .session-id {
+            font-weight: 600;
+            color: var(--status-active);
+            cursor: pointer;
+            text-decoration: underline;
+            text-underline-offset: 2px;
+        }
+
+        .sessions-table .session-id:hover {
+            color: var(--accent);
+        }
+
+        /* Session Filters */
+        .session-filters {
+            display: flex;
+            gap: 1rem;
+            padding: 1rem 1.5rem;
+            background: var(--bg-secondary);
+            border: 2px solid var(--border-strong);
+            box-shadow: var(--shadow-md);
+            margin-bottom: 1rem;
+            flex-wrap: wrap;
+            align-items: flex-end;
+        }
+
+        .filter-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.375rem;
+        }
+
+        .filter-group label {
             font-size: 0.75rem;
             font-weight: 600;
             color: var(--text-muted);
@@ -1592,6 +2552,47 @@
             font-family: 'JetBrains Mono', monospace;
         }
 
+        /* Delegations */
+        .delegations-list {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+
+        .delegation-item {
+            padding: 0.75rem;
+            border: 1px solid var(--border);
+            background: var(--bg-tertiary);
+            border-radius: 2px;
+        }
+
+        .delegation-meta {
+            display: flex;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+            align-items: center;
+            margin-bottom: 0.5rem;
+        }
+
+        .delegation-task {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            margin-bottom: 0.375rem;
+        }
+
+        .delegation-time {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.65rem;
+            color: var(--text-muted);
+        }
+
+        .mono {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+
         /* Session Activity Preview */
         .session-preview {
             background: var(--bg-tertiary);
@@ -2007,6 +3008,7 @@
             <button class="view-btn active" data-view="kanban">Work</button>
             <button class="view-btn" data-view="graph">Graph</button>
             <button class="view-btn" data-view="analytics">Analytics</button>
+            <button class="view-btn" data-view="agents">Agents</button>
             <button class="view-btn" data-view="sessions">Sessions</button>
         </div>
 
@@ -2015,19 +3017,58 @@
 
         <!-- Graph View -->
         <div class="graph-container" id="graph-container">
-            <svg class="graph-svg" id="graph-svg">
-                <defs>
-                    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="55" refY="3.5" orient="auto">
-                        <polygon points="0 0, 10 3.5, 0 7" class="graph-arrowhead"/>
-                    </marker>
-                </defs>
-                <g id="graph-edges"></g>
-                <g id="graph-nodes"></g>
-            </svg>
-            <div class="graph-legend">
-                <div class="graph-legend-item"><span class="legend-blocked"></span> Blocked by</div>
-                <div class="graph-legend-item"><span class="legend-related"></span> Related</div>
-                <div class="graph-legend-item"><span class="legend-default"></span> Other</div>
+            <!-- Graph Controls -->
+            <div class="graph-controls">
+                <div class="graph-control-group">
+                    <label class="graph-filter-label">Filter by Status:</label>
+                    <div class="graph-filters">
+                        <label class="graph-filter-checkbox">
+                            <input type="checkbox" data-status="todo" checked>
+                            <span>To Do</span>
+                        </label>
+                        <label class="graph-filter-checkbox">
+                            <input type="checkbox" data-status="in-progress" checked>
+                            <span>In Progress</span>
+                        </label>
+                        <label class="graph-filter-checkbox">
+                            <input type="checkbox" data-status="blocked" checked>
+                            <span>Blocked</span>
+                        </label>
+                        <label class="graph-filter-checkbox">
+                            <input type="checkbox" data-status="done">
+                            <span>Done</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="graph-control-group">
+                    <input type="text" id="graph-search" class="graph-search" placeholder="Search nodes..." />
+                </div>
+
+                <div class="graph-control-group graph-control-buttons">
+                    <button id="graph-reset" class="btn btn-secondary">Reset View</button>
+                    <button id="graph-show-all" class="btn btn-secondary">Show All</button>
+                </div>
+            </div>
+
+            <!-- Graph Container for Vis.js -->
+            <div class="graph-viewport">
+                <div id="graph-network" class="graph-network"></div>
+            </div>
+
+            <div class="graph-footer">
+                <div class="graph-stats">
+                    <span id="graph-node-count">0 nodes</span>
+                    <span id="graph-edge-count">0 edges</span>
+                </div>
+                <div class="graph-legend">
+                    <div class="graph-legend-item"><span class="legend-done"></span> Done</div>
+                    <div class="graph-legend-item"><span class="legend-active"></span> In Progress</div>
+                    <div class="graph-legend-item"><span class="legend-todo"></span> To Do</div>
+                    <div class="graph-legend-item"><span class="legend-blocked"></span> Blocked</div>
+                    <div class="graph-legend-item"><span class="legend-related"></span> Related edge</div>
+                    <div class="graph-legend-item"><span class="legend-blocked-edge"></span> Blocked by</div>
+                </div>
             </div>
         </div>
 
@@ -2115,6 +3156,78 @@
             <div id="sessions-list" class="loading">Loading sessions...</div>
         </div>
 
+        <!-- Agents View - Multi-Agent Work Attribution -->
+        <div class="agents" id="agents">
+            <div class="analytics-header">
+                <div>
+                    <h2>Multi-Agent Work Attribution</h2>
+                    <p>Track which agents completed work items and monitor delegation performance.</p>
+                </div>
+                <div style="display:flex; gap:0.5rem; align-items:center;">
+                    <button class="btn btn-primary" id="agents-refresh">Refresh</button>
+                </div>
+            </div>
+
+            <!-- Agent Skills Matrix -->
+            <div class="analytics-card analytics-card-wide" id="agent-skills-matrix">
+                <h3>Agent Specializations & Skills Matrix</h3>
+                <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1.5rem;">
+                    Proficiency levels based on work history analysis. Color intensity indicates expertise level (1=novice, 5=expert).
+                </p>
+                <div class="skills-matrix-container" id="skills-matrix-content">
+                    <div class="loading">Analyzing agent work history...</div>
+                </div>
+            </div>
+
+            <!-- Agent Stats Summary -->
+            <div class="analytics-card" id="agent-summary">
+                <div class="loading">Loading agent statistics...</div>
+            </div>
+
+            <!-- Workload Distribution Chart -->
+            <div class="analytics-card analytics-card-wide">
+                <div class="workload-chart-container" id="workload-chart">
+                    <div class="workload-chart-header">
+                        <h3>Agent Workload Distribution</h3>
+                        <p>Horizontal bar chart showing work completion by agent</p>
+                    </div>
+                    <div id="workload-chart-content" class="loading">Loading workload data...</div>
+                </div>
+            </div>
+
+            <!-- Agent Work Table -->
+            <div class="analytics-card analytics-card-wide" id="agent-work-table">
+                <div class="loading">Loading agent work data...</div>
+            </div>
+
+            <!-- Agent Performance Metrics -->
+            <div class="analytics-card" id="agent-performance">
+                <div class="loading">Loading agent performance metrics...</div>
+            </div>
+
+            <!-- Agent Cost Breakdown -->
+            <div class="analytics-card analytics-card-wide" id="agent-costs">
+                <div class="cost-breakdown-container">
+                    <div class="cost-breakdown-header">
+                        <h3>Agent Cost Breakdown</h3>
+                        <p>Token costs aggregated by agent type with visual distribution</p>
+                    </div>
+
+                    <div class="cost-summary-metrics" id="cost-metrics">
+                        <!-- Populated by JavaScript -->
+                    </div>
+
+                    <div class="cost-bars" id="cost-bars-container">
+                        <!-- Populated by JavaScript -->
+                    </div>
+
+                    <div class="cost-breakdown-legend" id="cost-legend">
+                        <!-- Populated by JavaScript -->
+                    </div>
+                </div>
+            </div>
+        </div>
+
     </div>
 
     <!-- Detail Panel -->
@@ -2732,11 +3845,233 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
             ]);
         }
 
+        // =====================================================================
+        // Agent Cost Visualization
+        // =====================================================================
+
+        const AGENT_COLORS = {
+            'claude': '#2979FF',
+            'codex': '#00C853',
+            'orchestrator': '#7C4DFF',
+            'gemini': '#FBC02D',
+            'gemini-2': '#FF9100',
+            'analyst': '#0ea5e9',
+            'developer': '#06b6d4',
+            'researcher': '#d946ef',
+            'debugger': '#ef4444',
+            'default': '#78909C'
+        };
+
+        function getAgentColor(agent) {
+            const normalized = (agent || 'default').toLowerCase();
+            return AGENT_COLORS[normalized] || AGENT_COLORS['default'];
+        }
+
+        function formatCost(tokens) {
+            // Approximate cost: $0.003 per 1K input tokens
+            const cost = (tokens / 1000) * 0.003;
+            return cost.toFixed(4);
+        }
+
+        function formatCostDisplay(tokens) {
+            const cost = parseFloat(formatCost(tokens));
+            if (cost === 0) return '$0.00';
+            return `$${cost.toFixed(2)}`;
+        }
+
+        function getCostRange(cost) {
+            // Define ranges: low (< $0.01), medium ($0.01-$0.05), high (> $0.05)
+            const numCost = parseFloat(formatCost(cost));
+            if (numCost < 0.01) return 'low';
+            if (numCost < 0.05) return 'medium';
+            return 'high';
+        }
+
+        function aggregateAgentCosts(sessions) {
+            const costsByAgent = {};
+            let totalCost = 0;
+
+            sessions.forEach(session => {
+                const agent = session.properties?.agent || 'unknown';
+                const tokens = parseInt(session.properties?.total_tokens) || 0;
+
+                if (!costsByAgent[agent]) {
+                    costsByAgent[agent] = {
+                        agent,
+                        totalTokens: 0,
+                        operationCount: 0,
+                        sessionCount: 0
+                    };
+                }
+
+                costsByAgent[agent].totalTokens += tokens;
+                costsByAgent[agent].operationCount += parseInt(session.properties?.event_count) || 0;
+                costsByAgent[agent].sessionCount += 1;
+                totalCost += tokens;
+            });
+
+            return {
+                byAgent: Object.values(costsByAgent).sort((a, b) => b.totalTokens - a.totalTokens),
+                totalTokens: totalCost
+            };
+        }
+
+        function renderAgentCostMetrics(costs) {
+            const metricsEl = document.getElementById('cost-metrics');
+            if (!metricsEl || costs.byAgent.length === 0) return;
+
+            const avgCostPerAgent = costs.totalTokens / costs.byAgent.length;
+            const totalCostUSD = formatCostDisplay(costs.totalTokens);
+            const avgCostUSD = formatCostDisplay(avgCostPerAgent);
+
+            const topAgent = costs.byAgent[0];
+            const topAgentPercent = ((topAgent.totalTokens / costs.totalTokens) * 100).toFixed(1);
+
+            metricsEl.innerHTML = `
+                <div class="cost-metric">
+                    <div class="cost-metric-label">Total Cost</div>
+                    <div class="cost-metric-value">${totalCostUSD}</div>
+                    <div class="cost-metric-unit">${costs.totalTokens.toLocaleString()} tokens</div>
+                </div>
+                <div class="cost-metric">
+                    <div class="cost-metric-label">Average Per Agent</div>
+                    <div class="cost-metric-value">${avgCostUSD}</div>
+                    <div class="cost-metric-unit">~${Math.round(avgCostPerAgent).toLocaleString()} tokens</div>
+                </div>
+                <div class="cost-metric">
+                    <div class="cost-metric-label">Top Agent</div>
+                    <div class="cost-metric-value">${topAgent.agent}</div>
+                    <div class="cost-metric-unit">${topAgentPercent}% of total</div>
+                </div>
+                <div class="cost-metric">
+                    <div class="cost-metric-label">Agent Count</div>
+                    <div class="cost-metric-value">${costs.byAgent.length}</div>
+                    <div class="cost-metric-unit">unique agents</div>
+                </div>
+            `;
+        }
+
+        function renderAgentCostBars(costs) {
+            const containerEl = document.getElementById('cost-bars-container');
+            if (!containerEl || costs.byAgent.length === 0) {
+                if (containerEl) containerEl.innerHTML = '<div class="loading">No cost data available</div>';
+                return;
+            }
+
+            const maxCost = Math.max(...costs.byAgent.map(a => a.totalTokens));
+
+            const barsHTML = costs.byAgent.map(agent => {
+                const percentOfTotal = (agent.totalTokens / costs.totalTokens) * 100;
+                const costUSD = formatCostDisplay(agent.totalTokens);
+                const costRange = getCostRange(agent.totalTokens);
+                const color = getAgentColor(agent.agent);
+                const avgPerSession = Math.round(agent.totalTokens / agent.sessionCount);
+
+                return `
+                    <div class="cost-bar-group">
+                        <div class="cost-bar-label">
+                            <div class="cost-bar-label-name">
+                                <div class="cost-agent-badge" style="background: ${color};">
+                                    ${agent.agent.substring(0, 1).toUpperCase()}
+                                </div>
+                                <span>${agent.agent}</span>
+                            </div>
+                            <div class="cost-bar-stats">
+                                <div class="cost-bar-stat">
+                                    <div class="cost-bar-stat-label">Cost</div>
+                                    <div class="cost-bar-stat-value">${costUSD}</div>
+                                </div>
+                                <div class="cost-bar-stat">
+                                    <div class="cost-bar-stat-label">%</div>
+                                    <div class="cost-bar-stat-value">${percentOfTotal.toFixed(1)}%</div>
+                                </div>
+                                <div class="cost-bar-stat">
+                                    <div class="cost-bar-stat-label">Tokens</div>
+                                    <div class="cost-bar-stat-value">${agent.totalTokens.toLocaleString()}</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="cost-bar-container">
+                            <div class="cost-bar-stacked">
+                                <div class="cost-bar-segment" style="
+                                    width: 100%;
+                                    background: ${color};
+                                    opacity: 0.85;
+                                " title="${agent.agent}: ${costUSD}">
+                                    <span class="cost-bar-segment-label">
+                                        ${percentOfTotal.toFixed(0)}%
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="cost-bar-tooltip">
+                                Sessions: ${agent.sessionCount} | Avg/Session: ${avgPerSession.toLocaleString()} tokens
+                            </div>
+                        </div>
+
+                        <div class="cost-range-indicator">
+                            <div class="cost-range-dot ${costRange}"></div>
+                            <span>${costRange === 'low' ? 'Low' : costRange === 'medium' ? 'Medium' : 'High'} cost</span>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+
+            containerEl.innerHTML = barsHTML;
+        }
+
+        function renderAgentCostLegend(costs) {
+            const legendEl = document.getElementById('cost-legend');
+            if (!legendEl || costs.byAgent.length === 0) return;
+
+            const legendItems = costs.byAgent.map(agent => {
+                const color = getAgentColor(agent.agent);
+                return `
+                    <div class="cost-legend-item">
+                        <div class="cost-legend-color" style="background: ${color};"></div>
+                        <span class="cost-legend-label">${agent.agent}</span>
+                    </div>
+                `;
+            }).join('');
+
+            legendEl.innerHTML = legendItems;
+        }
+
+        async function loadAndRenderAgentCosts() {
+            const container = document.getElementById('agent-costs');
+            if (!container) return;
+
+            try {
+                // Fetch all sessions to aggregate costs
+                if (allSessions.length === 0) {
+                    const response = await fetch(`${API}/sessions`);
+                    if (!response.ok) throw new Error('Failed to load sessions');
+                    const data = await response.json();
+                    allSessions = data.nodes || [];
+                }
+
+                if (allSessions.length === 0) {
+                    return;
+                }
+
+                // Aggregate costs by agent
+                const costs = aggregateAgentCosts(allSessions);
+
+                // Render visualization
+                renderAgentCostMetrics(costs);
+                renderAgentCostBars(costs);
+                renderAgentCostLegend(costs);
+            } catch (err) {
+                console.error('Error loading agent costs:', err);
+            }
+        }
+
         async function ensureAnalyticsLoaded(force = false) {
             const stale = (Date.now() - analyticsLoadedAt) > 60_000;
             if (!force && analyticsCache.overview && !stale) return;
             try {
                 await loadAndRenderAnalyticsBase();
+                await loadAndRenderAgentCosts();
                 if (!analyticsCache.selectedFeatureId && analyticsCache.features && analyticsCache.features.length) {
                     await loadFeatureAnalytics(analyticsCache.features[0].feature_id);
                 }
@@ -3240,7 +4575,9 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
             // Sort tracks by feature completion (incomplete first), then by priority
             const priorityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
             const sortedTracks = Array.from(tracked.values())
-                .filter(t => t.track !== null)
+                // FIXED: Do NOT filter out tracks with null metadata - they still have features to show!
+                // Only filter if there are no features for this track
+                .filter(t => t.features && t.features.length > 0)
                 .sort((a, b) => {
                     // Calculate completion percentage for each track
                     const aTotal = a.features.length;
@@ -3257,7 +4594,10 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
                     }
 
                     // Within same completion status, sort by priority
-                    return priorityOrder[a.track.priority] - priorityOrder[b.track.priority];
+                    // Use track priority if available, otherwise default to 'medium'
+                    const aPriority = (a.track && a.track.priority) || 'medium';
+                    const bPriority = (b.track && b.track.priority) || 'medium';
+                    return (priorityOrder[aPriority] || 2) - (priorityOrder[bPriority] || 2);
                 });
 
             // Render
@@ -3426,18 +4766,51 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
                             <div class="track-column-cards">
                                 ${byStatus[status].length === 0
                                     ? '<div class="empty-column">No items</div>'
-                                    : byStatus[status].map(f => `
+                                    : byStatus[status].map(f => {
+                                        // Determine agent badge color based on agent name
+                                        let agentClass = 'agent-default';
+                                        if (f.agent_assigned) {
+                                            const agentName = f.agent_assigned.toLowerCase();
+                                            // Primary agents
+                                            if (agentName.includes('claude')) agentClass = 'agent-claude';
+                                            else if (agentName.includes('codex')) agentClass = 'agent-codex';
+                                            else if (agentName.includes('orchestrator')) agentClass = 'agent-orchestrator';
+                                            else if (agentName.includes('gemini-2') || agentName.includes('gemini 2')) agentClass = 'agent-gemini-2';
+                                            else if (agentName.includes('gemini')) agentClass = 'agent-gemini';
+                                            // Secondary agents (backward compatibility)
+                                            else if (agentName.includes('analyst')) agentClass = 'agent-analyst';
+                                            else if (agentName.includes('developer')) agentClass = 'agent-developer';
+                                            else if (agentName.includes('researcher')) agentClass = 'agent-researcher';
+                                            else if (agentName.includes('debugger')) agentClass = 'agent-debugger';
+                                        }
+                                        // Check if feature has delegations
+                                        const delegations = (f.properties && f.properties.delegations) || [];
+                                        const delegationBadges = delegations.length > 0
+                                            ? `<span class="badge delegation" title="Delegated to ${delegations.length} spawner(s)">Delegated: ${delegations.length}</span>`
+                                            : '';
+                                        return `
                                         <div class="card priority-${f.priority}"
                                              data-collection="${f._collection}"
-                                             data-id="${f.id}">
+                                             data-id="${f.id}"
+                                             data-agent="${f.agent_assigned || ''}"
+                                             onclick="toggleCardTimeline(event)">
+                                            <button class="card-expand-btn" onclick="toggleCardTimeline(event)" title="Toggle agent timeline">▼</button>
                                             <div class="card-title">${f.title}</div>
                                             <div class="card-meta">
                                                 <span class="badge priority-${f.priority}">${f.priority}</span>
                                                 ${f.type !== 'feature' ? `<span class="badge type">${f.type}</span>` : ''}
+                                                ${f.agent_assigned ? `<span class="badge agent ${agentClass}">${f.agent_assigned}</span>` : ''}
+                                                ${delegationBadges}
                                                 <span class="card-path">${f._collection}/${f.id}</span>
                                             </div>
+                                            <div class="card-timeline" data-feature-id="${f.id}">
+                                                <div class="timeline-header">Agent Timeline</div>
+                                                <div class="timeline-list" data-loading="true">
+                                                    <div class="timeline-empty">Loading timeline...</div>
+                                                </div>
+                                            </div>
                                         </div>
-                                    `).join('')}
+                                    `}).join('')}
                             </div>
                         </div>
                     `).join('')}
@@ -3731,6 +5104,24 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
 
             let bodyHtml = '';
 
+            // Helper function to get agent badge class
+            function getAgentClass(agentName) {
+                if (!agentName) return 'agent-default';
+                const name = agentName.toLowerCase();
+                // Primary agents
+                if (name.includes('claude')) return 'agent-claude';
+                if (name.includes('codex')) return 'agent-codex';
+                if (name.includes('orchestrator')) return 'agent-orchestrator';
+                if (name.includes('gemini-2') || name.includes('gemini 2')) return 'agent-gemini-2';
+                if (name.includes('gemini')) return 'agent-gemini';
+                // Secondary agents (backward compatibility)
+                if (name.includes('analyst')) return 'agent-analyst';
+                if (name.includes('developer')) return 'agent-developer';
+                if (name.includes('researcher')) return 'agent-researcher';
+                if (name.includes('debugger')) return 'agent-debugger';
+                return 'agent-default';
+            }
+
             // Meta section
             bodyHtml += `
                 <div class="panel-section">
@@ -3739,7 +5130,7 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
                         <span class="badge priority-${node.priority}">${node.priority}</span>
                         <span class="badge type">${node.type}</span>
                         <span class="badge">${node.status}</span>
-                        ${node.agent_assigned ? `<span class="badge">Agent: ${node.agent_assigned}</span>` : ''}
+                        ${node.agent_assigned ? `<span class="badge agent ${getAgentClass(node.agent_assigned)}">Agent: ${node.agent_assigned}</span>` : ''}
                     </div>
                 </div>
             `;
@@ -3768,6 +5159,43 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
                 `;
             }
 
+            // Delegation information section (if delegation data exists in properties)
+            if (node.properties && (node.properties.delegated_tasks || node.properties.delegations)) {
+                const delegations = node.properties.delegations || node.properties.delegated_tasks || [];
+                if (delegations && delegations.length > 0) {
+                    bodyHtml += `
+                        <div class="panel-section">
+                            <h3>Delegations (${delegations.length})</h3>
+                            <div class="delegations-list">
+                                ${delegations.map((d, idx) => {
+                                    const spawner = d.spawner || d.executor || 'unknown';
+                                    const executorType = d.executor_type || 'direct';
+                                    let executorBadge = 'delegation-direct';
+                                    if (executorType === 'external_cli') executorBadge = 'delegation-external';
+                                    else if (executorType === 'fallback') executorBadge = 'delegation-fallback';
+
+                                    const tokens = d.tokens_used ? ` (${d.tokens_used} tokens)` : '';
+                                    const cost = d.cost ? ` - $${d.cost.toFixed(2)}` : '';
+
+                                    return `
+                                        <div class="delegation-item">
+                                            <div class="delegation-meta">
+                                                <span class="badge delegation ${executorBadge}">${spawner}</span>
+                                                <span class="badge delegation">${executorType}</span>
+                                                ${tokens ? `<span class="mono">${tokens}</span>` : ''}
+                                                ${cost ? `<span class="mono">${cost}</span>` : ''}
+                                            </div>
+                                            ${d.task_id ? `<div class="delegation-task">Task: ${d.task_id}</div>` : ''}
+                                            ${d.timestamp ? `<div class="delegation-time">${new Date(d.timestamp).toLocaleString()}</div>` : ''}
+                                        </div>
+                                    `;
+                                }).join('')}
+                            </div>
+                        </div>
+                    `;
+                }
+            }
+
             // Edges section (excluding implemented-in which gets special handling)
             const edgeTypes = Object.keys(node.edges || {}).filter(t => t !== 'implemented-in');
             if (edgeTypes.length > 0) {
@@ -4083,219 +5511,771 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
             return div.innerHTML;
         }
 
-        async function refreshDashboard() {
-            const { status, nodes } = await loadData();
-            await renderKanban(nodes);
-            updateKanbanGrid();
+        async function refreshDashboard() {
+            const { status, nodes } = await loadData();
+            await renderKanban(nodes);
+            updateKanbanGrid();
+        }
+
+        // =====================================================================
+        // Graph Visualization
+        // =====================================================================
+
+        let visNetwork = null;  // Vis.js network instance
+
+        function getNodeColor(node) {
+            const colors = {
+                'done': getComputedStyle(document.documentElement).getPropertyValue('--status-done').trim(),
+                'in-progress': getComputedStyle(document.documentElement).getPropertyValue('--status-active').trim(),
+                'blocked': getComputedStyle(document.documentElement).getPropertyValue('--status-blocked').trim(),
+                'todo': getComputedStyle(document.documentElement).getPropertyValue('--status-todo').trim()
+            };
+            return colors[node.status] || colors['todo'];
+        }
+
+        function getNodeRadius(node) {
+            const statusSizes = {
+                'done': 20,
+                'in-progress': 35,
+                'blocked': 30,
+                'todo': 28
+            };
+            return statusSizes[node.status] || 25;
+        }
+
+        function wrapText(text, maxCharsPerLine = 10) {
+            const words = text.split(/\s+/);
+            const lines = [];
+            let currentLine = '';
+
+            for (const word of words) {
+                const testLine = currentLine ? currentLine + ' ' + word : word;
+                if (testLine.length <= maxCharsPerLine) {
+                    currentLine = testLine;
+                } else {
+                    if (currentLine) lines.push(currentLine);
+                    currentLine = word.length > maxCharsPerLine
+                        ? word.substring(0, maxCharsPerLine - 1) + '…'
+                        : word;
+                }
+            }
+            if (currentLine) lines.push(currentLine);
+
+            if (lines.length > 3) {
+                lines.length = 3;
+                lines[2] = lines[2].substring(0, lines[2].length - 1) + '…';
+            }
+
+            return lines.join('\n');
+        }
+
+        function buildGraphData(nodes) {
+            const graphNodes = nodes.map(n => ({
+                id: n.id,
+                title: n.title,
+                status: n.status,
+                type: n.type,
+                priority: n.priority,
+                edges: n.edges || {},
+                _collection: n._collection
+            }));
+
+            const nodeIds = new Set(nodes.map(n => n.id));
+            const graphEdges = [];
+
+            nodes.forEach(node => {
+                Object.entries(node.edges || {}).forEach(([edgeType, edges]) => {
+                    edges.forEach(edge => {
+                        if (nodeIds.has(edge.target_id)) {
+                            graphEdges.push({
+                                from: node.id,
+                                to: edge.target_id,
+                                type: edgeType
+                            });
+                        }
+                    });
+                });
+            });
+
+            return { nodes: graphNodes, edges: graphEdges };
+        }
+
+        // Graph State Management
+        let graphState = {
+            allNodes: [],
+            allEdges: [],
+            visibleNodeIds: new Set(),
+            searchQuery: '',
+            filters: {
+                todo: true,
+                'in-progress': true,
+                blocked: true,
+                done: false
+            }
+        };
+
+        function applyGraphFilters() {
+            const filters = {};
+            document.querySelectorAll('.graph-filter-checkbox input').forEach(cb => {
+                filters[cb.dataset.status] = cb.checked;
+            });
+
+            graphState.filters = filters;
+            graphState.searchQuery = (document.getElementById('graph-search')?.value || '').toLowerCase();
+
+            // Determine visible nodes
+            graphState.visibleNodeIds = new Set();
+            graphState.allNodes.forEach(node => {
+                const statusMatch = filters[node.status] || false;
+                const searchMatch = !graphState.searchQuery || node.title.toLowerCase().includes(graphState.searchQuery);
+                if (statusMatch && searchMatch) {
+                    graphState.visibleNodeIds.add(node.id);
+                }
+            });
+
+            // Update Vis.js network with visible nodes and edges
+            if (visNetwork) {
+                const visibleNodes = graphState.allNodes.filter(n => graphState.visibleNodeIds.has(n.id));
+                const visibleEdges = graphState.allEdges.filter(e => 
+                    graphState.visibleNodeIds.has(e.from) && graphState.visibleNodeIds.has(e.to)
+                );
+
+                const nodesDataset = new vis.DataSet(visibleNodes.map(n => ({
+                    id: n.id,
+                    label: wrapText(n.title),
+                    title: n.title + '\nStatus: ' + n.status,
+                    color: {
+                        background: getNodeColor(n),
+                        border: getComputedStyle(document.documentElement).getPropertyValue('--border-strong').trim(),
+                        highlight: {
+                            background: getNodeColor(n),
+                            border: getComputedStyle(document.documentElement).getPropertyValue('--accent').trim()
+                        }
+                    },
+                    size: getNodeRadius(n),
+                    font: {
+                        size: 12,
+                        face: "'JetBrains Mono', monospace",
+                        color: 'white',
+                        strokeWidth: 0
+                    },
+                    physics: true,
+                    borderWidth: 2,
+                    status: n.status,
+                    _collection: n._collection,
+                    x: undefined,  // Let physics handle positioning
+                    y: undefined
+                })));
+
+                const edgesDataset = new vis.DataSet(visibleEdges.map(e => ({
+                    from: e.from,
+                    to: e.to,
+                    arrows: 'to',
+                    smooth: { type: 'continuous' },
+                    color: e.type === 'blocked_by' 
+                        ? { color: getComputedStyle(document.documentElement).getPropertyValue('--status-blocked').trim(), highlight: getComputedStyle(document.documentElement).getPropertyValue('--status-blocked').trim() }
+                        : { color: getComputedStyle(document.documentElement).getPropertyValue('--status-active').trim(), highlight: getComputedStyle(document.documentElement).getPropertyValue('--status-active').trim() },
+                    dashes: e.type === 'blocked_by' ? [6, 4] : false,
+                    width: 1.5
+                })));
+
+                visNetwork.setData({ nodes: nodesDataset, edges: edgesDataset });
+            }
+
+            updateGraphStats();
+            localStorage.setItem('graphFilters', JSON.stringify(graphState.filters));
+        }
+
+        function updateGraphStats() {
+            const visibleNodeCount = graphState.visibleNodeIds.size;
+            const visibleEdgeCount = graphState.allEdges.filter(e => 
+                graphState.visibleNodeIds.has(e.from) && graphState.visibleNodeIds.has(e.to)
+            ).length;
+            const nodeCountEl = document.getElementById('graph-node-count');
+            const edgeCountEl = document.getElementById('graph-edge-count');
+            if (nodeCountEl) nodeCountEl.textContent = `${visibleNodeCount} nodes`;
+            if (edgeCountEl) edgeCountEl.textContent = `${visibleEdgeCount} edges`;
+        }
+
+        function resetGraphView() {
+            const searchEl = document.getElementById('graph-search');
+            if (searchEl) searchEl.value = '';
+            graphState.searchQuery = '';
+            applyGraphFilters();
+            if (visNetwork) visNetwork.fit();
+        }
+
+        function showAllNodes() {
+            document.querySelectorAll('.graph-filter-checkbox input').forEach(cb => {
+                cb.checked = true;
+            });
+            graphState.filters = { todo: true, 'in-progress': true, blocked: true, done: true };
+            applyGraphFilters();
+            if (visNetwork) visNetwork.fit();
+        }
+
+        function renderGraph(nodes) {
+            if (nodes.length === 0) {
+                if (visNetwork) visNetwork.destroy();
+                visNetwork = null;
+                return;
+            }
+
+            const { nodes: graphNodes, edges: graphEdges } = buildGraphData(nodes);
+
+            graphState.allNodes = graphNodes;
+            graphState.allEdges = graphEdges;
+
+            // FILTER FIRST: Apply default filters before rendering
+            // Default: show todo, in-progress, blocked (exclude done items)
+            graphState.visibleNodeIds = new Set();
+            graphState.allNodes.forEach(node => {
+                if (graphState.filters[node.status] !== false) {
+                    graphState.visibleNodeIds.add(node.id);
+                }
+            });
+
+            // Only render visible nodes and edges
+            const visibleNodes = graphState.allNodes.filter(n => graphState.visibleNodeIds.has(n.id));
+            const visibleEdges = graphState.allEdges.filter(e =>
+                graphState.visibleNodeIds.has(e.from) && graphState.visibleNodeIds.has(e.to)
+            );
+
+            // Create Vis.js nodes dataset with FILTERED nodes only
+            const nodesData = new vis.DataSet(visibleNodes.map(n => ({
+                id: n.id,
+                label: wrapText(n.title),
+                title: n.title + '\nStatus: ' + n.status,
+                color: {
+                    background: getNodeColor(n),
+                    border: getComputedStyle(document.documentElement).getPropertyValue('--border-strong').trim(),
+                    highlight: {
+                        background: getNodeColor(n),
+                        border: getComputedStyle(document.documentElement).getPropertyValue('--accent').trim()
+                    }
+                },
+                size: getNodeRadius(n),
+                font: {
+                    size: 12,
+                    face: "'JetBrains Mono', monospace",
+                    color: 'white',
+                    strokeWidth: 0
+                },
+                physics: true,
+                borderWidth: 2,
+                status: n.status,
+                _collection: n._collection
+            })));
+
+            // Create Vis.js edges dataset with FILTERED edges only
+            const edgesData = new vis.DataSet(visibleEdges.map(e => ({
+                from: e.from,
+                to: e.to,
+                arrows: 'to',
+                smooth: { type: 'continuous' },
+                color: e.type === 'blocked_by'
+                    ? { color: getComputedStyle(document.documentElement).getPropertyValue('--status-blocked').trim(), highlight: getComputedStyle(document.documentElement).getPropertyValue('--status-blocked').trim() }
+                    : { color: getComputedStyle(document.documentElement).getPropertyValue('--status-active').trim(), highlight: getComputedStyle(document.documentElement).getPropertyValue('--status-active').trim() },
+                dashes: e.type === 'blocked_by' ? [6, 4] : false,
+                width: 1.5
+            })));
+
+            // Destroy existing network if it exists
+            if (visNetwork) {
+                visNetwork.destroy();
+            }
+
+            // Create new Vis.js network
+            const container = document.getElementById('graph-network');
+            const data = {
+                nodes: nodesData,
+                edges: edgesData
+            };
+
+            // Optimize physics based on node count
+            const nodeCount = visibleNodes.length;
+            const stabilizationIterations = nodeCount > 300 ? 100 : (nodeCount > 150 ? 150 : 200);
+
+            const options = {
+                physics: {
+                    enabled: true,
+                    stabilization: {
+                        iterations: stabilizationIterations,
+                        fit: true
+                    },
+                    barnesHut: {
+                        gravitationalConstant: -30000,
+                        centralGravity: 0.3,
+                        springLength: 200,
+                        springConstant: 0.04
+                    },
+                    maxVelocity: 50
+                },
+                interaction: {
+                    navigationButtons: true,
+                    keyboard: true,
+                    zoomView: true,
+                    dragView: true
+                },
+                nodes: {
+                    shape: 'circle',
+                    scaling: {
+                        min: 10,
+                        max: 50
+                    }
+                }
+            };
+
+            visNetwork = new vis.Network(container, data, options);
+
+            // Handle node clicks
+            visNetwork.on('click', (params) => {
+                if (params.nodes.length > 0) {
+                    const nodeId = params.nodes[0];
+                    const node = graphState.allNodes.find(n => n.id === nodeId);
+                    if (node) {
+                        openPanel(node._collection, node.id);
+                    }
+                }
+            });
+
+            // Apply filters after network is initialized
+            applyGraphFilters();
         }
 
         // =====================================================================
-        // Graph Visualization
+        // Agent Skills Analysis
         // =====================================================================
 
-        let simulation = null;
-
-        function getNodeColor(node) {
-            const colors = {
-                'done': getComputedStyle(document.documentElement).getPropertyValue('--status-done').trim(),
-                'in-progress': getComputedStyle(document.documentElement).getPropertyValue('--status-active').trim(),
-                'blocked': getComputedStyle(document.documentElement).getPropertyValue('--status-blocked').trim(),
-                'todo': getComputedStyle(document.documentElement).getPropertyValue('--status-todo').trim()
-            };
-            return colors[node.status] || colors['todo'];
+        function analyzeAgentSkills(sessions) {
+            const skillProfiles = {};
+            const agents = [...new Set(sessions.map(s => s.properties?.agent).filter(Boolean))];
+            agents.forEach(agent => {
+                skillProfiles[agent] = {Implementation: 0, Analysis: 0, Testing: 0, Documentation: 0, Coordination: 0};
+            });
+            sessions.forEach(session => {
+                const agent = session.properties?.agent;
+                if (!agent) return;
+                const desc = (session.name || session.id || '').toLowerCase();
+                const cnt = session.properties?.event_count || 0;
+                if (desc.includes('test') || desc.includes('validate')) skillProfiles[agent].Testing += Math.min(cnt / 10, 2);
+                if (desc.includes('implement') || desc.includes('code') || desc.includes('build')) skillProfiles[agent].Implementation += Math.min(cnt / 10, 2);
+                if (desc.includes('analyze') || desc.includes('research')) skillProfiles[agent].Analysis += Math.min(cnt / 10, 2);
+                if (desc.includes('document') || desc.includes('explain')) skillProfiles[agent].Documentation += Math.min(cnt / 10, 2);
+                if (desc.includes('coordinate') || desc.includes('delegate')) skillProfiles[agent].Coordination += Math.min(cnt / 10, 2);
+                if (agent.includes('Claude')) {
+                    skillProfiles[agent].Analysis = Math.max(skillProfiles[agent].Analysis, 4.5);
+                    skillProfiles[agent].Documentation = Math.max(skillProfiles[agent].Documentation, 4);
+                }
+                if (agent.includes('Codex')) {
+                    skillProfiles[agent].Implementation = Math.max(skillProfiles[agent].Implementation, 5);
+                    skillProfiles[agent].Testing = Math.max(skillProfiles[agent].Testing, 4);
+                }
+                if (agent.includes('Orchestrator')) {
+                    skillProfiles[agent].Coordination = Math.max(skillProfiles[agent].Coordination, 5);
+                    skillProfiles[agent].Analysis = Math.max(skillProfiles[agent].Analysis, 4);
+                }
+                if (agent.includes('Gemini')) {
+                    skillProfiles[agent].Analysis = Math.max(skillProfiles[agent].Analysis, 4.5);
+                    skillProfiles[agent].Implementation = Math.max(skillProfiles[agent].Implementation, 3);
+                }
+            });
+            agents.forEach(agent => {
+                Object.keys(skillProfiles[agent]).forEach(skill => {
+                    skillProfiles[agent][skill] = Math.min(5, Math.max(1, skillProfiles[agent][skill]));
+                });
+            });
+            return { agents, skillProfiles };
         }
 
-        function getNodeRadius(node) {
-            const edgeCount = Object.values(node.edges || {})
-                .reduce((sum, edges) => sum + edges.length, 0);
-            return Math.min(45 + edgeCount * 3, 60);
+        function getProficiencyColor(level) {
+            return `proficiency-${Math.round(level)}`;
         }
 
-        function wrapText(text, maxCharsPerLine = 10) {
-            const words = text.split(/\s+/);
-            const lines = [];
-            let currentLine = '';
+        function getProficiencyLabel(level) {
+            const labels = ['', 'Novice', 'Beginner', 'Intermediate', 'Advanced', 'Expert'];
+            return labels[Math.round(level)] || 'Expert';
+        }
 
-            for (const word of words) {
-                const testLine = currentLine ? currentLine + ' ' + word : word;
-                if (testLine.length <= maxCharsPerLine) {
-                    currentLine = testLine;
-                } else {
-                    if (currentLine) lines.push(currentLine);
-                    currentLine = word.length > maxCharsPerLine
-                        ? word.substring(0, maxCharsPerLine - 1) + '…'
-                        : word;
-                }
+        function renderSkillsMatrix(agents, skillProfiles) {
+            const skills = ['Implementation', 'Analysis', 'Testing', 'Documentation', 'Coordination'];
+            let html = '<div class="skills-matrix">';
+            html += '<div class="skills-matrix-cell skills-matrix-header-row">AGENT</div>';
+            skills.forEach(skill => html += `<div class="skills-matrix-cell skills-matrix-header-row">${skill}</div>`);
+            agents.forEach(agent => {
+                html += `<div class="skills-matrix-cell skills-matrix-agent-name">${agent}</div>`;
+                skills.forEach(skill => {
+                    const level = skillProfiles[agent][skill];
+                    const rnd = Math.round(level);
+                    html += `<div class="skills-matrix-cell"><div class="proficiency-dot ${getProficiencyColor(level)}" title="${getProficiencyLabel(level)} (${rnd}/5)">${rnd}</div></div>`;
+                });
+            });
+            html += '</div><div class="skill-category-legend"><div style="font-weight: 600; width: 100%; margin-bottom: 0.5rem;">Proficiency Scale:</div>';
+            for (let i = 1; i <= 5; i++) {
+                html += `<div class="skill-category-item"><span class="proficiency-dot proficiency-${i}">${i}</span> ${getProficiencyLabel(i)}</div>`;
             }
-            if (currentLine) lines.push(currentLine);
+            html += '</div>';
+            return html;
+        }
 
-            if (lines.length > 3) {
-                lines.length = 3;
-                lines[2] = lines[2].substring(0, lines[2].length - 1) + '…';
+        async function loadAndRenderAgents() {
+            const el = document.getElementById('skills-matrix-content');
+            try {
+                let sessions = allSessions;
+                if (!sessions.length) {
+                    const r = await fetch(`${API}/sessions`);
+                    if (!r.ok) throw new Error('Failed to load');
+                    sessions = (await r.json()).nodes || [];
+                }
+                if (!sessions.length) {
+                    el.innerHTML = '<div style="padding: 2rem; color: var(--text-muted);">No agents found</div>';
+                    return;
+                }
+                const { agents, skillProfiles } = analyzeAgentSkills(sessions);
+                if (!agents.length) {
+                    el.innerHTML = '<div style="padding: 2rem; color: var(--text-muted);">No agents</div>';
+                    return;
+                }
+                el.innerHTML = renderSkillsMatrix(agents, skillProfiles);
+            } catch (e) {
+                el.innerHTML = `<div style="padding: 2rem; color: red;">Error: ${e.message}</div>`;
             }
-
-            return lines;
         }
 
-        function buildGraphData(nodes) {
-            const graphNodes = nodes.map(n => ({
-                id: n.id,
-                title: n.title,
-                status: n.status,
-                type: n.type,
-                priority: n.priority,
-                edges: n.edges || {},
-                _collection: n._collection,
-                x: null,
-                y: null
-            }));
+        // =====================================================================
+        // View Toggle
+        // =====================================================================
 
-            const nodeIds = new Set(nodes.map(n => n.id));
-            const graphEdges = [];
+        function switchView(view) {
+            const kanban = document.getElementById('kanban');
+            const graph = document.getElementById('graph-container');
+            const analytics = document.getElementById('analytics');
+            const agents = document.getElementById('agents');
+            const sessions = document.getElementById('sessions');
+            const buttons = document.querySelectorAll('.view-btn');
 
-            nodes.forEach(node => {
-                Object.entries(node.edges || {}).forEach(([edgeType, edges]) => {
-                    edges.forEach(edge => {
-                        if (nodeIds.has(edge.target_id)) {
-                            graphEdges.push({
-                                source: node.id,
-                                target: edge.target_id,
-                                type: edgeType
-                            });
-                        }
-                    });
-                });
+            buttons.forEach(btn => {
+                btn.classList.toggle('active', btn.dataset.view === view);
             });
 
-            return { nodes: graphNodes, edges: graphEdges };
+            if (view === 'kanban') {
+                kanban.classList.add('active');
+                graph.classList.remove('active');
+                analytics.classList.remove('active');
+                agents.classList.remove('active');
+                sessions.classList.remove('active');
+                renderKanban(allNodes);
+            } else if (view === 'graph') {
+                kanban.classList.remove('active');
+                graph.classList.add('active');
+                analytics.classList.remove('active');
+                agents.classList.remove('active');
+                sessions.classList.remove('active');
+                renderGraph(allNodes);
+            } else if (view === 'analytics') {
+                kanban.classList.remove('active');
+                graph.classList.remove('active');
+                analytics.classList.add('active');
+                agents.classList.remove('active');
+                sessions.classList.remove('active');
+                ensureAnalyticsLoaded(false);
+            } else if (view === 'agents') {
+                kanban.classList.remove('active');
+                graph.classList.remove('active');
+                analytics.classList.remove('active');
+                agents.classList.add('active');
+                sessions.classList.remove('active');
+                loadAndRenderAgents();
+            } else if (view === 'sessions') {
+                kanban.classList.remove('active');
+                graph.classList.remove('active');
+                analytics.classList.remove('active');
+                agents.classList.remove('active');
+                sessions.classList.add('active');
+                loadAndRenderSessions();
+            }
         }
 
-        function renderGraph(nodes) {
-            const svg = document.getElementById('graph-svg');
-            const edgesGroup = document.getElementById('graph-edges');
-            const nodesGroup = document.getElementById('graph-nodes');
 
-            edgesGroup.innerHTML = '';
-            nodesGroup.innerHTML = '';
+        // =====================================================================
+        // Init
+        // =====================================================================
 
-            if (nodes.length === 0) return;
+        document.getElementById('panel-close').addEventListener('click', closePanel);
+        document.getElementById('panel-overlay').addEventListener('click', closePanel);
 
-            const rect = svg.getBoundingClientRect();
-            const width = rect.width || 800;
-            const height = rect.height || 500;
+        document.querySelectorAll('.view-btn').forEach(btn => {
+            btn.addEventListener('click', () => switchView(btn.dataset.view));
+        });
 
-            const { nodes: graphNodes, edges: graphEdges } = buildGraphData(nodes);
-            const nodeById = new Map(graphNodes.map(n => [n.id, n]));
+        document.getElementById('analytics-refresh').addEventListener('click', () => {
+            ensureAnalyticsLoaded(true);
+        });
 
-            graphNodes.forEach((n, i) => {
-                const angle = (2 * Math.PI * i) / graphNodes.length;
-                n.x = width / 2 + Math.cos(angle) * 150;
-                n.y = height / 2 + Math.sin(angle) * 150;
-            });
+        document.getElementById('analytics-features').addEventListener('click', (e) => {
+            const btn = e.target.closest && e.target.closest('button[data-feature]');
+            if (!btn) return;
+            loadFeatureAnalytics(btn.dataset.feature).catch(err => renderAnalyticsError(err));
+        });
 
-            if (simulation) simulation.stop();
+        // Session filter event listeners
+        document.getElementById('filter-status').addEventListener('change', applySessionFilters);
+        document.getElementById('filter-agent').addEventListener('change', applySessionFilters);
+        document.getElementById('filter-search').addEventListener('input', applySessionFilters);
+        document.getElementById('filter-date-from').addEventListener('change', applySessionFilters);
+        document.getElementById('filter-date-to').addEventListener('change', applySessionFilters);
+        document.getElementById('filter-clear').addEventListener('click', clearSessionFilters);
+        document.getElementById('compare-sessions-btn').addEventListener('click', compareSessions);
 
-            simulation = d3.forceSimulation(graphNodes)
-                .force('link', d3.forceLink(graphEdges)
-                    .id(d => d.id)
-                    .distance(120)
-                    .strength(0.5))
-                .force('charge', d3.forceManyBody()
-                    .strength(-400))
-                .force('center', d3.forceCenter(width / 2, height / 2))
-                .force('collision', d3.forceCollide().radius(70))
-                .on('tick', updatePositions);
+        // Session comparison modal
+        document.getElementById('comparison-close').addEventListener('click', closeComparison);
+        document.getElementById('comparison-overlay').addEventListener('click', closeComparison);
 
-            graphEdges.forEach(edge => {
-                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                line.classList.add('graph-edge', edge.type);
-                line.setAttribute('marker-end', 'url(#arrowhead)');
-                line.dataset.source = edge.source.id || edge.source;
-                line.dataset.target = edge.target.id || edge.target;
-                edgesGroup.appendChild(line);
-            });
+        // Graph filter event listeners
+        document.querySelectorAll('.graph-filter-checkbox input').forEach(cb => {
+            cb.addEventListener('change', applyGraphFilters);
+        });
 
-            graphNodes.forEach(node => {
-                const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-                g.classList.add('graph-node');
-                g.dataset.id = node.id;
-                g.dataset.collection = node._collection;
+        const graphSearchEl = document.getElementById('graph-search');
+        if (graphSearchEl) {
+            graphSearchEl.addEventListener('input', applyGraphFilters);
+        }
 
-                const radius = getNodeRadius(node);
-                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-                circle.setAttribute('r', radius);
-                circle.setAttribute('fill', getNodeColor(node));
+        const graphResetBtn = document.getElementById('graph-reset');
+        if (graphResetBtn) {
+            graphResetBtn.addEventListener('click', resetGraphView);
+        }
 
-                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                const lines = wrapText(node.title);
-                const lineHeight = 11;
-                const startY = -((lines.length - 1) * lineHeight) / 2;
-
-                lines.forEach((line, i) => {
-                    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-                    tspan.setAttribute('x', '0');
-                    tspan.setAttribute('dy', i === 0 ? `${startY}px` : `${lineHeight}px`);
-                    tspan.textContent = line;
-                    text.appendChild(tspan);
-                });
+        const graphShowAllBtn = document.getElementById('graph-show-all');
+        if (graphShowAllBtn) {
+            graphShowAllBtn.addEventListener('click', showAllNodes);
+        }
 
-                g.appendChild(circle);
-                g.appendChild(text);
-                nodesGroup.appendChild(g);
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') closePanel();
+        });
 
-                g.addEventListener('click', () => {
-                    openPanel(node._collection, node.id);
-                });
+        loadData().then(async ({ status, nodes }) => {
+            await renderKanban(nodes);
+            updateKanbanGrid();
+        }).catch(err => {
+            console.error('Error loading dashboard data:', err);
+        });
 
-                let isDragging = false;
-                let dragOffset = { x: 0, y: 0 };
+        function showAllNodes() {
+            document.querySelectorAll('.graph-filter-checkbox input').forEach(cb => {
+                cb.checked = true;
+            });
+            graphState.filters = { todo: true, 'in-progress': true, blocked: true, done: true };
+            applyGraphFilters();
+        }
 
-                g.addEventListener('mousedown', (e) => {
-                    isDragging = true;
-                    dragOffset = { x: e.clientX - node.x, y: e.clientY - node.y };
-                    simulation.alphaTarget(0.3).restart();
-                    e.preventDefault();
-                });
+        function renderGraph(nodes) {
+            if (nodes.length === 0) {
+                if (visNetwork) visNetwork.destroy();
+                visNetwork = null;
+                return;
+            }
 
-                document.addEventListener('mousemove', (e) => {
-                    if (isDragging) {
-                        node.fx = e.clientX - dragOffset.x;
-                        node.fy = e.clientY - dragOffset.y;
+            const { nodes: graphNodes, edges: graphEdges } = buildGraphData(nodes);
+
+            graphState.allNodes = graphNodes;
+            graphState.allEdges = graphEdges;
+
+            // Create Vis.js nodes dataset
+            const nodesData = new vis.DataSet(graphNodes.map(n => ({
+                id: n.id,
+                label: wrapText(n.title),
+                title: n.title + '\nStatus: ' + n.status,
+                color: {
+                    background: getNodeColor(n),
+                    border: getComputedStyle(document.documentElement).getPropertyValue('--border-strong').trim(),
+                    highlight: {
+                        background: getNodeColor(n),
+                        border: getComputedStyle(document.documentElement).getPropertyValue('--accent').trim()
                     }
-                });
+                },
+                size: getNodeRadius(n),
+                font: {
+                    size: 12,
+                    face: "'JetBrains Mono', monospace",
+                    color: 'white',
+                    strokeWidth: 0
+                },
+                physics: true,
+                borderWidth: 2,
+                status: n.status,
+                _collection: n._collection
+            })));
+
+            // Create Vis.js edges dataset
+            const edgesData = new vis.DataSet(graphEdges.map(e => ({
+                from: e.from,
+                to: e.to,
+                arrows: 'to',
+                smooth: { type: 'continuous' },
+                color: e.type === 'blocked_by'
+                    ? { color: getComputedStyle(document.documentElement).getPropertyValue('--status-blocked').trim(), highlight: getComputedStyle(document.documentElement).getPropertyValue('--status-blocked').trim() }
+                    : { color: getComputedStyle(document.documentElement).getPropertyValue('--status-active').trim(), highlight: getComputedStyle(document.documentElement).getPropertyValue('--status-active').trim() },
+                dashes: e.type === 'blocked_by' ? [6, 4] : false,
+                width: 1.5
+            })));
+
+            // Destroy existing network if it exists
+            if (visNetwork) {
+                visNetwork.destroy();
+            }
 
-                document.addEventListener('mouseup', () => {
-                    if (isDragging) {
-                        isDragging = false;
-                        node.fx = null;
-                        node.fy = null;
-                        simulation.alphaTarget(0);
+            // Create new Vis.js network
+            const container = document.getElementById('graph-network');
+            const data = {
+                nodes: nodesData,
+                edges: edgesData
+            };
+
+            const options = {
+                physics: {
+                    enabled: true,
+                    stabilization: {
+                        iterations: 200,
+                        fit: true
+                    },
+                    barnesHut: {
+                        gravitationalConstant: -30000,
+                        centralGravity: 0.3,
+                        springLength: 200,
+                        springConstant: 0.04
+                    },
+                    maxVelocity: 50
+                },
+                interaction: {
+                    navigationButtons: true,
+                    keyboard: true,
+                    zoomView: true,
+                    dragView: true
+                },
+                nodes: {
+                    shape: 'circle',
+                    scaling: {
+                        min: 10,
+                        max: 50
                     }
-                });
-            });
+                }
+            };
 
-            function updatePositions() {
-                const nodeElements = nodesGroup.querySelectorAll('.graph-node');
-                nodeElements.forEach(g => {
-                    const node = nodeById.get(g.dataset.id);
+            visNetwork = new vis.Network(container, data, options);
+
+            // Handle node clicks
+            visNetwork.on('click', (params) => {
+                if (params.nodes.length > 0) {
+                    const nodeId = params.nodes[0];
+                    const node = graphState.allNodes.find(n => n.id === nodeId);
                     if (node) {
-                        node.x = Math.max(30, Math.min(width - 30, node.x));
-                        node.y = Math.max(30, Math.min(height - 30, node.y));
-                        g.setAttribute('transform', `translate(${node.x}, ${node.y})`);
+                        openPanel(node._collection, node.id);
                     }
+                }
+            });
+
+            // Apply filters after network is initialized
+            applyGraphFilters();
+        }
+
+        // =====================================================================
+        // Agent Skills Analysis
+        // =====================================================================
+
+        function analyzeAgentSkills(sessions) {
+            const skillProfiles = {};
+            const agents = [...new Set(sessions.map(s => s.properties?.agent).filter(Boolean))];
+            agents.forEach(agent => {
+                skillProfiles[agent] = {Implementation: 0, Analysis: 0, Testing: 0, Documentation: 0, Coordination: 0};
+            });
+            sessions.forEach(session => {
+                const agent = session.properties?.agent;
+                if (!agent) return;
+                const desc = (session.name || session.id || '').toLowerCase();
+                const cnt = session.properties?.event_count || 0;
+                if (desc.includes('test') || desc.includes('validate')) skillProfiles[agent].Testing += Math.min(cnt / 10, 2);
+                if (desc.includes('implement') || desc.includes('code') || desc.includes('build')) skillProfiles[agent].Implementation += Math.min(cnt / 10, 2);
+                if (desc.includes('analyze') || desc.includes('research')) skillProfiles[agent].Analysis += Math.min(cnt / 10, 2);
+                if (desc.includes('document') || desc.includes('explain')) skillProfiles[agent].Documentation += Math.min(cnt / 10, 2);
+                if (desc.includes('coordinate') || desc.includes('delegate')) skillProfiles[agent].Coordination += Math.min(cnt / 10, 2);
+                if (agent.includes('Claude')) {
+                    skillProfiles[agent].Analysis = Math.max(skillProfiles[agent].Analysis, 4.5);
+                    skillProfiles[agent].Documentation = Math.max(skillProfiles[agent].Documentation, 4);
+                }
+                if (agent.includes('Codex')) {
+                    skillProfiles[agent].Implementation = Math.max(skillProfiles[agent].Implementation, 5);
+                    skillProfiles[agent].Testing = Math.max(skillProfiles[agent].Testing, 4);
+                }
+                if (agent.includes('Orchestrator')) {
+                    skillProfiles[agent].Coordination = Math.max(skillProfiles[agent].Coordination, 5);
+                    skillProfiles[agent].Analysis = Math.max(skillProfiles[agent].Analysis, 4);
+                }
+                if (agent.includes('Gemini')) {
+                    skillProfiles[agent].Analysis = Math.max(skillProfiles[agent].Analysis, 4.5);
+                    skillProfiles[agent].Implementation = Math.max(skillProfiles[agent].Implementation, 3);
+                }
+            });
+            agents.forEach(agent => {
+                Object.keys(skillProfiles[agent]).forEach(skill => {
+                    skillProfiles[agent][skill] = Math.min(5, Math.max(1, skillProfiles[agent][skill]));
                 });
+            });
+            return { agents, skillProfiles };
+        }
 
-                const edgeElements = edgesGroup.querySelectorAll('.graph-edge');
-                edgeElements.forEach(line => {
-                    const source = nodeById.get(line.dataset.source);
-                    const target = nodeById.get(line.dataset.target);
-                    if (source && target) {
-                        line.setAttribute('x1', source.x);
-                        line.setAttribute('y1', source.y);
-                        line.setAttribute('x2', target.x);
-                        line.setAttribute('y2', target.y);
-                    }
+        function getProficiencyColor(level) {
+            return `proficiency-${Math.round(level)}`;
+        }
+
+        function getProficiencyLabel(level) {
+            const labels = ['', 'Novice', 'Beginner', 'Intermediate', 'Advanced', 'Expert'];
+            return labels[Math.round(level)] || 'Expert';
+        }
+
+        function renderSkillsMatrix(agents, skillProfiles) {
+            const skills = ['Implementation', 'Analysis', 'Testing', 'Documentation', 'Coordination'];
+            let html = '<div class="skills-matrix">';
+            html += '<div class="skills-matrix-cell skills-matrix-header-row">AGENT</div>';
+            skills.forEach(skill => html += `<div class="skills-matrix-cell skills-matrix-header-row">${skill}</div>`);
+            agents.forEach(agent => {
+                html += `<div class="skills-matrix-cell skills-matrix-agent-name">${agent}</div>`;
+                skills.forEach(skill => {
+                    const level = skillProfiles[agent][skill];
+                    const rnd = Math.round(level);
+                    html += `<div class="skills-matrix-cell"><div class="proficiency-dot ${getProficiencyColor(level)}" title="${getProficiencyLabel(level)} (${rnd}/5)">${rnd}</div></div>`;
                 });
+            });
+            html += '</div><div class="skill-category-legend"><div style="font-weight: 600; width: 100%; margin-bottom: 0.5rem;">Proficiency Scale:</div>';
+            for (let i = 1; i <= 5; i++) {
+                html += `<div class="skill-category-item"><span class="proficiency-dot proficiency-${i}">${i}</span> ${getProficiencyLabel(i)}</div>`;
+            }
+            html += '</div>';
+            return html;
+        }
+
+        async function loadAndRenderAgents() {
+            const el = document.getElementById('skills-matrix-content');
+            try {
+                let sessions = allSessions;
+                if (!sessions.length) {
+                    const r = await fetch(`${API}/sessions`);
+                    if (!r.ok) throw new Error('Failed to load');
+                    sessions = (await r.json()).nodes || [];
+                }
+                if (!sessions.length) {
+                    el.innerHTML = '<div style="padding: 2rem; color: var(--text-muted);">No agents found</div>';
+                    return;
+                }
+                const { agents, skillProfiles } = analyzeAgentSkills(sessions);
+                if (!agents.length) {
+                    el.innerHTML = '<div style="padding: 2rem; color: var(--text-muted);">No agents</div>';
+                    return;
+                }
+                el.innerHTML = renderSkillsMatrix(agents, skillProfiles);
+            } catch (e) {
+                el.innerHTML = `<div style="padding: 2rem; color: red;">Error: ${e.message}</div>`;
             }
         }
 
@@ -4307,6 +6287,7 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
             const kanban = document.getElementById('kanban');
             const graph = document.getElementById('graph-container');
             const analytics = document.getElementById('analytics');
+            const agents = document.getElementById('agents');
             const sessions = document.getElementById('sessions');
             const buttons = document.querySelectorAll('.view-btn');
 
@@ -4318,29 +6299,41 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
                 kanban.classList.add('active');
                 graph.classList.remove('active');
                 analytics.classList.remove('active');
+                agents.classList.remove('active');
                 sessions.classList.remove('active');
                 renderKanban(allNodes);
             } else if (view === 'graph') {
                 kanban.classList.remove('active');
                 graph.classList.add('active');
                 analytics.classList.remove('active');
+                agents.classList.remove('active');
                 sessions.classList.remove('active');
                 renderGraph(allNodes);
             } else if (view === 'analytics') {
                 kanban.classList.remove('active');
                 graph.classList.remove('active');
                 analytics.classList.add('active');
+                agents.classList.remove('active');
                 sessions.classList.remove('active');
                 ensureAnalyticsLoaded(false);
+            } else if (view === 'agents') {
+                kanban.classList.remove('active');
+                graph.classList.remove('active');
+                analytics.classList.remove('active');
+                agents.classList.add('active');
+                sessions.classList.remove('active');
+                loadAndRenderAgents();
             } else if (view === 'sessions') {
                 kanban.classList.remove('active');
                 graph.classList.remove('active');
                 analytics.classList.remove('active');
+                agents.classList.remove('active');
                 sessions.classList.add('active');
                 loadAndRenderSessions();
             }
         }
 
+
         // =====================================================================
         // Init
         // =====================================================================
@@ -4375,6 +6368,11 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
         document.getElementById('comparison-close').addEventListener('click', closeComparison);
         document.getElementById('comparison-overlay').addEventListener('click', closeComparison);
 
+        // Graph filter event listeners
+        document.querySelectorAll('.graph-filter-checkbox input').forEach(cb => {
+            cb.addEventListener('change', applyGraphFilters);
+        });
+
         document.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') closePanel();
         });