htmlgraph 0.24.2__py3-none-any.whl → 0.25.0__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,14 @@
         }
 
         .kanban.active {
-            display: block;
+            display: grid;
             width: 100%;
+            height: 100%;
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
+            grid-auto-rows: minmax(0, 1fr);
+            grid-auto-flow: dense;
         }
 
         /* Dynamic grid: expanded columns grow, collapsed stay fixed */
@@ -524,6 +537,7 @@
             gap: 1rem;
             width: 100%;
             max-width: 100%;
+            grid-column: 1 / -1;
         }
 
         .track-section {
@@ -732,6 +746,11 @@
             border-radius: 8px;
             overflow: hidden;
             box-shadow: var(--shadow-md);
+            display: flex;
+            flex-direction: column;
+            grid-column: 1 / -1;
+            align-self: stretch;
+            min-height: 0;
         }
 
         .untracked-header {
@@ -777,6 +796,7 @@
             max-height: 0;
             overflow: hidden;
             transition: max-height 0.4s var(--ease-out-expo);
+            flex-grow: 0;
         }
 
         .untracked-content.collapsed {
@@ -784,7 +804,9 @@
         }
 
         .untracked-section.expanded .untracked-content {
-            max-height: 2000px;
+            max-height: none;
+            flex-grow: 1;
+            overflow-y: auto;
             padding: 1rem;
         }
 
@@ -871,6 +893,80 @@
         .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; }
+
+        /* Event source badges - Color-coded by data source */
+        .badge.source { padding: 0.25rem 0.5rem; font-size: 0.55rem; font-weight: 600; }
+        .badge.source-hook { background: #2979FF; color: white; border-color: #2979FF; }
+        .badge.source-subagent { background: #7C4DFF; color: white; border-color: #7C4DFF; }
+        .badge.source-spike { background: #00C853; color: white; border-color: #00C853; }
+        .badge.source-delegation { background: #FF9100; color: white; border-color: #FF9100; }
+
+        /* Event type indicators */
+        .event-source-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            font-size: 0.65rem;
+            color: var(--text-muted);
+        }
+        .event-source-indicator::before {
+            content: '';
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+        }
+        .event-source-indicator.hook::before { background: #2979FF; }
+        .event-source-indicator.subagent::before { background: #7C4DFF; }
+        .event-source-indicator.spike::before { background: #00C853; }
+        .event-source-indicator.delegation::before { background: #FF9100; }
+
         .card-path {
             font-family: 'JetBrains Mono', monospace;
             font-size: 0.625rem;
@@ -887,97 +983,6 @@
             margin: 1rem;
         }
 
-        /* ================================================================
-           GRAPH VIEW
-           ================================================================ */
-        .graph-container {
-            display: none;
-            background: var(--bg-secondary);
-            border: 2px solid var(--border-strong);
-            box-shadow: var(--shadow-md);
-        }
-
-        .graph-container.active {
-            display: block;
-        }
-
-        .graph-svg {
-            width: 100%;
-            height: 600px;
-            display: block;
-        }
-
-        .graph-node {
-            cursor: pointer;
-        }
-
-        .graph-node circle {
-            stroke: var(--border-strong);
-            stroke-width: 2;
-            transition: all 0.2s var(--ease-out-expo);
-        }
-
-        .graph-node:hover circle {
-            stroke-width: 4;
-        }
-
-        .graph-node text {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 8px;
-            font-weight: 500;
-            fill: white;
-            text-anchor: middle;
-            pointer-events: none;
-        }
-
-        .graph-edge {
-            stroke: var(--border);
-            stroke-width: 2;
-            fill: none;
-        }
-
-        .graph-edge.blocked_by {
-            stroke: var(--status-blocked);
-            stroke-dasharray: 6, 4;
-        }
-
-        .graph-edge.related {
-            stroke: var(--status-active);
-        }
-
-        .graph-arrowhead {
-            fill: var(--border);
-        }
-
-        .graph-legend {
-            display: flex;
-            gap: 2rem;
-            justify-content: center;
-            padding: 1rem;
-            border-top: 2px solid var(--border-strong);
-            background: var(--bg-tertiary);
-        }
-
-        .graph-legend-item {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.6875rem;
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-            color: var(--text-muted);
-        }
-
-        .graph-legend-item span {
-            width: 24px;
-            height: 3px;
-        }
-
-        .legend-blocked { background: var(--status-blocked); }
-        .legend-related { background: var(--status-active); }
-        .legend-default { background: var(--border); }
-
         /* ================================================================
            ANALYTICS VIEW
            ================================================================ */
@@ -987,7 +992,11 @@
         }
 
         .analytics.active {
-            display: block;
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
         }
 
         /* ================================================================
@@ -999,171 +1008,1127 @@
         }
 
         .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);
-        }
-
-        .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);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
+            margin-bottom: 0.5rem;
         }
 
-        .filter-select,
-        .filter-input {
-            padding: 0.5rem 0.75rem;
-            border: 1px solid var(--border);
-            background: var(--bg-primary);
+        .agent-stat-value {
+            font-size: 1.75rem;
+            font-weight: 700;
             color: var(--text-primary);
-            border-radius: 4px;
-            font-size: 0.875rem;
             font-family: 'JetBrains Mono', monospace;
-            min-width: 150px;
-        }
-
-        .filter-select:focus,
-        .filter-input:focus {
-            outline: none;
-            border-color: var(--accent);
-            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
         }
 
-        .filter-input::placeholder {
+        .agent-stat-unit {
+            font-size: 0.75rem;
             color: var(--text-muted);
-            opacity: 0.6;
+            margin-top: 0.25rem;
         }
 
-        .analytics-header {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: 1rem;
-            padding: 1.25rem 1.5rem;
+        /* ================================================================
+           WORKLOAD DISTRIBUTION CHART
+           ================================================================ */
+        .workload-chart-container {
             background: var(--bg-secondary);
-            border: 2px solid var(--border-strong);
-            box-shadow: var(--shadow-md);
-            margin-bottom: 1rem;
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            padding: 1.5rem;
+            box-shadow: var(--shadow-sm);
+            margin-top: 1rem;
         }
 
-        .analytics-header h2 {
+        .workload-chart-header {
+            margin-bottom: 1.5rem;
+        }
+
+        .workload-chart-header h3 {
             font-family: 'JetBrains Mono', monospace;
-            font-size: 1rem;
+            font-size: 0.875rem;
             text-transform: uppercase;
             letter-spacing: 0.08em;
+            color: var(--text-muted);
             margin-bottom: 0.25rem;
+            font-weight: 600;
         }
 
-        .analytics-header p {
-            color: var(--text-muted);
+        .workload-chart-header p {
+            color: var(--text-secondary);
             font-size: 0.875rem;
             margin: 0;
         }
 
-        .analytics-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
+        .workload-bars {
+            display: flex;
+            flex-direction: column;
             gap: 1rem;
+            max-height: 600px;
+            overflow-y: auto;
         }
 
-        @media (max-width: 1100px) {
-            .analytics-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        .analytics-card {
-            background: var(--bg-secondary);
-            border: 2px solid var(--border-strong);
-            box-shadow: var(--shadow-md);
-            padding: 1rem 1.25rem;
+        .workload-bar-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.375rem;
         }
 
-        .analytics-card h3 {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.75rem;
-            text-transform: uppercase;
+        .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);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .filter-select,
+        .filter-input {
+            padding: 0.5rem 0.75rem;
+            border: 1px solid var(--border);
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            border-radius: 4px;
+            font-size: 0.875rem;
+            font-family: 'JetBrains Mono', monospace;
+            min-width: 150px;
+        }
+
+        .filter-select:focus,
+        .filter-input:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+        }
+
+        .filter-input::placeholder {
+            color: var(--text-muted);
+            opacity: 0.6;
+        }
+
+        .analytics-header {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 1rem;
+            padding: 1.25rem 1.5rem;
+            background: var(--bg-secondary);
+            border: 2px solid var(--border-strong);
+            box-shadow: var(--shadow-md);
+            margin-bottom: 1rem;
+        }
+
+        .analytics-header h2 {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            margin-bottom: 0.25rem;
+        }
+
+        .analytics-header p {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+            margin: 0;
+        }
+
+        .analytics-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 1.5rem;
+        }
+
+        /* Timeline is always full width and first */
+        .analytics-grid > #analytics-timeline {
+            grid-column: 1 / -1;
+            order: -10;
+        }
+
+        /* Summary metrics grid: 3 columns */
+        .analytics-grid > #analytics-summary {
+            grid-column: 1 / -1;
+            order: -9;
+        }
+
+        /* Collaboration metrics: 2 columns */
+        .analytics-grid > #analytics-collaboration {
+            grid-column: 1 / -1;
+            order: -8;
+        }
+
+        /* Feature and tool analysis: 2 columns each */
+        .analytics-grid > #analytics-features,
+        .analytics-grid > #analytics-tools {
+            order: -7;
+        }
+
+        /* Commit DAG: full width */
+        .analytics-grid > #analytics-commit-dag {
+            grid-column: 1 / -1;
+            order: -6;
+        }
+
+        @media (max-width: 1200px) {
+            .analytics-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .analytics-grid {
+                gap: 1rem;
+            }
+        }
+
+        .analytics-card {
+            background: var(--bg-secondary);
+            border: 2px solid var(--border-strong);
+            box-shadow: var(--shadow-md);
+            padding: 1rem 1.25rem;
+        }
+
+        .analytics-card h3 {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
+            text-transform: uppercase;
             letter-spacing: 0.1em;
             color: var(--text-muted);
             margin-bottom: 0.75rem;
         }
 
-        .analytics-card-wide {
-            grid-column: 1 / -1;
+        .analytics-card-wide {
+            grid-column: 1 / -1;
+        }
+
+        /* Timeline Section */
+        .analytics-timeline {
+            background: var(--bg-secondary);
+            border: 2px solid var(--border-strong);
+            box-shadow: var(--shadow-md);
+            padding: 1.5rem;
+            position: relative;
+        }
+
+        .timeline-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 1.5rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .timeline-header h3 {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--text-muted);
+        }
+
+        .timeline-header .timeline-legend {
+            display: flex;
+            gap: 1.5rem;
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+
+        .timeline-legend-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .timeline-legend-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+        }
+
+        .timeline-container {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        .timeline-entry {
+            display: flex;
+            gap: 1rem;
+            padding: 0.875rem;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            transition: all 0.2s var(--ease-out-expo);
+            cursor: pointer;
+        }
+
+        .timeline-entry:hover {
+            background: var(--bg-secondary);
+            border-color: var(--accent);
+            box-shadow: 0 0 0 2px rgba(205, 255, 0, 0.1);
+        }
+
+        .timeline-entry-marker {
+            flex-shrink: 0;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-top: 3px;
+            border: 2px solid var(--border-strong);
+        }
+
+        .timeline-entry-marker.session { background: var(--status-active); }
+        .timeline-entry-marker.feature { background: var(--accent); }
+        .timeline-entry-marker.commit { background: var(--status-done); }
+        .timeline-entry-marker.error { background: var(--status-blocked); }
+
+        .timeline-entry-content {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .timeline-entry-title {
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 0.25rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .timeline-entry-meta {
+            display: flex;
+            gap: 1rem;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        /* Summary/Health Indicators */
+        .analytics-summary {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+
+        .health-card {
+            background: var(--bg-secondary);
+            border: 2px solid var(--border-strong);
+            box-shadow: var(--shadow-md);
+            padding: 1.5rem;
+            position: relative;
+        }
+
+        .health-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+        }
+
+        .health-card.health-good::before { background: var(--status-done); }
+        .health-card.health-ok::before { background: var(--priority-high); }
+        .health-card.health-poor::before { background: var(--status-blocked); }
+
+        .health-label {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.625rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--text-muted);
+            margin-bottom: 0.5rem;
+        }
+
+        .health-value {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        .health-detail {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            margin-top: 0.75rem;
+            padding-top: 0.75rem;
+            border-top: 1px solid var(--border);
+        }
+
+        /* Collaboration Metrics */
+        .collaboration-metrics {
+            background: var(--bg-secondary);
+            border: 2px solid var(--border-strong);
+            box-shadow: var(--shadow-md);
+            padding: 1.5rem;
+        }
+
+        .collaboration-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .collab-stat {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            padding: 1rem;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+        }
+
+        .collab-stat-value {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .collab-stat-label {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.65rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: var(--text-muted);
         }
 
         /* Commit DAG Visualization */
@@ -1272,26 +2237,44 @@
 
         .analytics-kpis {
             display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 0.75rem;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 1rem;
         }
 
         @media (max-width: 700px) {
             .analytics-kpis {
-                grid-template-columns: 1fr;
+                grid-template-columns: repeat(2, 1fr);
             }
         }
 
         .kpi {
-            border: 1px solid var(--border);
-            background: var(--bg-tertiary);
-            padding: 0.75rem;
+            border: 2px solid var(--border-strong);
+            background: var(--bg-secondary);
+            padding: 1.25rem;
+            box-shadow: var(--shadow-sm);
+            position: relative;
+            overflow: hidden;
         }
 
+        .kpi::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: var(--accent);
+        }
+
+        .kpi.healthy::before { background: var(--status-done); }
+        .kpi.warning::before { background: var(--priority-high); }
+        .kpi.critical::before { background: var(--priority-critical); }
+
         .kpi .kpi-value {
             font-family: 'JetBrains Mono', monospace;
-            font-size: 1.25rem;
+            font-size: 2rem;
             font-weight: 700;
+            color: var(--text-primary);
         }
 
         .kpi .kpi-label {
@@ -1300,7 +2283,7 @@
             text-transform: uppercase;
             letter-spacing: 0.1em;
             color: var(--text-muted);
-            margin-top: 0.25rem;
+            margin-top: 0.5rem;
         }
 
         .table {
@@ -1532,6 +2515,38 @@
             border-bottom: none;
         }
 
+        /* Parent events with children */
+        .activity-item.parent-event {
+            cursor: pointer;
+            font-weight: 500;
+        }
+
+        .activity-item.parent-event .expand-icon {
+            display: inline-block;
+            margin-right: 0.5rem;
+            transition: transform 0.2s;
+            font-size: 0.75rem;
+        }
+
+        .activity-item.parent-event .expand-icon::before {
+            content: '▶';
+            color: var(--text-muted);
+        }
+
+        .activity-item.parent-event.expanded .expand-icon::before {
+            content: '▼';
+        }
+
+        /* Child events styling */
+        .activity-item.child-event {
+            background-color: rgba(205, 255, 0, 0.02);
+            margin-left: 0;
+        }
+
+        .activity-item.child-event:hover {
+            background-color: rgba(205, 255, 0, 0.05);
+        }
+
         .activity-meta {
             display: flex;
             align-items: center;
@@ -1592,6 +2607,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);
@@ -1642,42 +2698,350 @@
             gap: 0.5rem;
             padding: 0.375rem 0.75rem;
             font-size: 0.75rem;
-            border-bottom: 1px solid var(--border);
+            border-bottom: 1px solid var(--border);
+        }
+
+        .activity-entry:last-child {
+            border-bottom: none;
+        }
+
+        .activity-tool {
+            font-family: 'JetBrains Mono', monospace;
+            font-weight: 600;
+            color: var(--status-active);
+            min-width: 70px;
+        }
+
+        .activity-tool.Edit { color: var(--priority-high); }
+        .activity-tool.Bash { color: var(--status-done); }
+        .activity-tool.Read { color: var(--text-muted); }
+        .activity-tool.UserQuery { color: var(--priority-critical); }
+
+        .activity-summary {
+            color: var(--text-secondary);
+            flex: 1;
+        }
+
+        .activity-time {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.625rem;
+            color: var(--text-muted);
+        }
+
+        .drift-warning {
+            color: var(--priority-high);
+            font-size: 0.625rem;
+            font-size: 0.6875rem;
+            color: var(--text-muted);
+            margin-left: 0.5rem;
+        }
+
+        /* Activity Feed Table View */
+        .activity-list.table-view {
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border);
+        }
+
+        .activity-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 0.8125rem;
+            background: var(--bg-secondary);
+        }
+
+        .activity-table thead {
+            position: sticky;
+            top: 0;
+            background: var(--bg-tertiary);
+            border-bottom: 2px solid var(--border-strong);
+            z-index: 10;
+        }
+
+        .activity-table th {
+            padding: 0.875rem 1rem;
+            text-align: left;
+            font-family: 'JetBrains Mono', monospace;
+            font-weight: 600;
+            font-size: 0.6875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            border-right: 1px solid var(--border);
+            user-select: none;
+        }
+
+        .activity-table th:last-child {
+            border-right: none;
+        }
+
+        .activity-table th.col-timestamp {
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .activity-table th.col-timestamp:hover {
+            background: var(--bg-secondary);
+            color: var(--accent);
+        }
+
+        .activity-table tbody tr {
+            border-bottom: 1px solid var(--border);
+            transition: background-color 0.2s;
+        }
+
+        .activity-table tbody tr:hover {
+            background-color: var(--bg-tertiary);
+        }
+
+        /* Alternating row colors for readability */
+        .activity-table tbody tr:nth-child(even) {
+            background-color: var(--bg-primary);
+        }
+
+        .activity-table tbody tr:nth-child(even):hover {
+            background-color: var(--bg-tertiary);
+        }
+
+        /* Parent rows slightly emphasized */
+        .activity-table tbody tr.parent-row {
+            font-weight: 500;
+            border-left: 3px solid var(--accent);
+            cursor: pointer;
+        }
+
+        /* Expand icon for parent rows */
+        .activity-table tbody tr.parent-row .expand-icon {
+            display: inline-block;
+            margin-right: 0.5rem;
+            transition: transform 0.2s;
+        }
+
+        .activity-table tbody tr.parent-row .expand-icon::before {
+            content: '▶';
+            color: var(--text-muted);
+        }
+
+        .activity-table tbody tr.parent-row.expanded .expand-icon::before {
+            content: '▼';
+        }
+
+        /* Child rows with visual indent marker */
+        .activity-table tbody tr.child-row {
+            background-color: rgba(205, 255, 0, 0.02);
+            border-left: 3px solid var(--text-muted);
+            display: none;
+        }
+
+        .activity-table tbody tr.child-row.visible {
+            display: table-row;
+        }
+
+        .activity-table tbody tr.child-row:hover {
+            background-color: rgba(205, 255, 0, 0.05);
+        }
+
+        /* Indent child row content */
+        .activity-table tbody tr.child-row td:first-child {
+            padding-left: 2.5rem;
+        }
+
+        /* Status-based row coloring */
+        .activity-table tbody tr.event-recorded {
+            border-left-color: var(--status-done);
+        }
+
+        .activity-table tbody tr.event-pending {
+            border-left-color: var(--priority-medium);
+        }
+
+        .activity-table tbody tr.event-error {
+            border-left-color: var(--status-blocked);
+        }
+
+        .activity-table td {
+            padding: 0.75rem 1rem;
+            color: var(--text-secondary);
+            border-right: 1px solid var(--border);
+            vertical-align: top;
+        }
+
+        .activity-table td:last-child {
+            border-right: none;
+        }
+
+        /* Column widths */
+        .activity-table .col-timestamp {
+            width: 180px;
+            min-width: 180px;
+        }
+
+        .activity-table .col-agent {
+            width: 120px;
+            min-width: 120px;
+        }
+
+        .activity-table .col-tool {
+            width: 100px;
+            min-width: 100px;
+        }
+
+        .activity-table .col-input {
+            width: 180px;
+            min-width: 180px;
+        }
+
+        .activity-table .col-output {
+            width: 180px;
+            min-width: 180px;
+        }
+
+        .activity-table .col-status {
+            width: 90px;
+            min-width: 90px;
+        }
+
+        .activity-table .col-id {
+            width: 80px;
+            min-width: 80px;
+        }
+
+        /* Table cell content styling */
+        .activity-table .event-type-badge {
+            font-size: 1rem;
+            margin-right: 0.5rem;
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .activity-table .timestamp-text {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            white-space: nowrap;
+        }
+
+        .activity-table .agent-badge {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
+            background: var(--bg-tertiary);
+            padding: 0.25rem 0.5rem;
+            border-radius: 2px;
+            margin-right: 0.25rem;
+        }
+
+        .activity-table .parent-indicator {
+            font-size: 0.875rem;
+            margin-left: 0.25rem;
+            opacity: 0.7;
+        }
+
+        .activity-table .child-indicator {
+            font-size: 0.875rem;
+            margin-left: 0.25rem;
+            opacity: 0.6;
+            color: var(--text-muted);
+        }
+
+        .activity-table .tool-name {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
+            background: var(--bg-tertiary);
+            padding: 0.25rem 0.5rem;
+            border-radius: 2px;
+            color: var(--status-active);
+            word-break: break-all;
+        }
+
+        .activity-table .truncate {
+            display: inline-block;
+            max-width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
         }
 
-        .activity-entry:last-child {
-            border-bottom: none;
+        .activity-table .text-muted {
+            color: var(--text-muted);
+            font-style: italic;
         }
 
-        .activity-tool {
+        .activity-table .status-badge {
+            display: inline-block;
+            padding: 0.375rem 0.625rem;
+            border-radius: 2px;
             font-family: 'JetBrains Mono', monospace;
+            font-size: 0.65rem;
             font-weight: 600;
-            color: var(--status-active);
-            min-width: 70px;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
         }
 
-        .activity-tool.Edit { color: var(--priority-high); }
-        .activity-tool.Bash { color: var(--status-done); }
-        .activity-tool.Read { color: var(--text-muted); }
-        .activity-tool.UserQuery { color: var(--priority-critical); }
+        .activity-table .status-badge.status-recorded {
+            background: rgba(0, 200, 83, 0.15);
+            color: var(--status-done);
+            border: 1px solid var(--status-done);
+        }
 
-        .activity-summary {
-            color: var(--text-secondary);
-            flex: 1;
+        .activity-table .status-badge.status-pending {
+            background: rgba(41, 121, 255, 0.15);
+            color: var(--priority-medium);
+            border: 1px solid var(--priority-medium);
         }
 
-        .activity-time {
+        .activity-table .status-badge.status-error {
+            background: rgba(255, 23, 68, 0.15);
+            color: var(--status-blocked);
+            border: 1px solid var(--status-blocked);
+        }
+
+        .activity-table .event-id-code {
             font-family: 'JetBrains Mono', monospace;
-            font-size: 0.625rem;
+            font-size: 0.65rem;
             color: var(--text-muted);
+            cursor: pointer;
+            transition: color 0.2s;
+            word-break: break-all;
         }
 
-        .drift-warning {
-            color: var(--priority-high);
-            font-size: 0.625rem;
-            font-size: 0.6875rem;
-            color: var(--text-muted);
-            margin-left: 0.5rem;
+        .activity-table .event-id-code:hover {
+            color: var(--accent);
+        }
+
+        /* Responsive table scrolling */
+        @media (max-width: 1200px) {
+            .activity-table .col-input,
+            .activity-table .col-output {
+                width: 120px;
+                min-width: 120px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .activity-table {
+                font-size: 0.75rem;
+            }
+
+            .activity-table th,
+            .activity-table td {
+                padding: 0.5rem 0.75rem;
+            }
+
+            .activity-table .col-timestamp {
+                width: 140px;
+                min-width: 140px;
+            }
+
+            .activity-table .col-input,
+            .activity-table .col-output {
+                width: 100px;
+                min-width: 100px;
+            }
         }
 
         /* Content */
@@ -2005,32 +3369,14 @@
         <!-- View Toggle -->
         <div class="view-toggle">
             <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>
 
         <!-- Features View (Track-Grouped Kanban) -->
         <div class="kanban active" id="kanban"></div>
 
-        <!-- 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>
-            </div>
-        </div>
-
         <!-- Analytics View -->
         <div class="analytics" id="analytics">
             <div class="analytics-header">
@@ -2044,22 +3390,76 @@
             </div>
 
             <div class="analytics-grid">
+                <!-- Timeline: Primary Focus -->
+                <div class="analytics-timeline" id="analytics-timeline">
+                    <div class="timeline-header">
+                        <h3>Activity Timeline</h3>
+                        <div class="timeline-legend">
+                            <div class="timeline-legend-item">
+                                <div class="timeline-legend-dot" style="background: var(--status-active);"></div>
+                                <span>Sessions</span>
+                            </div>
+                            <div class="timeline-legend-item">
+                                <div class="timeline-legend-dot" style="background: var(--accent);"></div>
+                                <span>Features</span>
+                            </div>
+                            <div class="timeline-legend-item">
+                                <div class="timeline-legend-dot" style="background: var(--status-done);"></div>
+                                <span>Commits</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="timeline-container" id="timeline-content">
+                        <div class="loading">Loading timeline…</div>
+                    </div>
+                </div>
+
+                <!-- Summary Section: Key Metrics & Health -->
+                <div class="analytics-card analytics-card-wide" id="analytics-summary">
+                    <h3>Summary & Health</h3>
+                    <div class="analytics-summary" id="summary-content">
+                        <div class="loading">Loading summary…</div>
+                    </div>
+                </div>
+
+                <!-- Collaboration Metrics -->
+                <div class="analytics-card analytics-card-wide" id="analytics-collaboration">
+                    <div class="collaboration-metrics">
+                        <h3>Collaboration & Handoff Metrics</h3>
+                        <div class="collaboration-grid" id="collaboration-content">
+                            <div class="loading">Loading collaboration metrics…</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Overview KPIs -->
                 <div class="analytics-card" id="analytics-overview">
-                    <div class="loading">Loading overview…</div>
+                    <h3>Overview</h3>
+                    <div id="overview-kpis" class="loading">Loading overview…</div>
                 </div>
+
+                <!-- Tool Patterns -->
                 <div class="analytics-card" id="analytics-tools">
                     <div class="loading">Loading tool patterns…</div>
                 </div>
+
+                <!-- Feature Analysis -->
                 <div class="analytics-card" id="analytics-features">
                     <div class="loading">Loading top features…</div>
                 </div>
-                <div class="analytics-card" id="analytics-continuity">
+
+                <!-- Feature Continuity (hidden until feature selected) -->
+                <div class="analytics-card analytics-card-wide" id="analytics-continuity" style="display: none;">
                     <div class="loading">Select a feature to see continuity…</div>
                 </div>
-                <div class="analytics-card" id="analytics-commits">
+
+                <!-- Feature Commits (hidden until feature selected) -->
+                <div class="analytics-card analytics-card-wide" id="analytics-commits" style="display: none;">
                     <div class="loading">Select a feature to see commits…</div>
                 </div>
-                <div class="analytics-card analytics-card-wide" id="analytics-commit-dag">
+
+                <!-- Commit DAG (hidden until feature selected) -->
+                <div class="analytics-card analytics-card-wide" id="analytics-commit-dag" style="display: none;">
                     <div class="loading">Select a feature to see commit graph…</div>
                 </div>
             </div>
@@ -2115,6 +3515,89 @@
             <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>
+
+            <!-- Orchestration & Delegations -->
+            <div class="analytics-card analytics-card-wide" id="orchestration-view">
+                <h3>Orchestration & Delegations</h3>
+                <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1.5rem;">
+                    Track agent-to-agent task delegations and coordination patterns.
+                </p>
+                <div id="orchestration-content">
+                    <div class="loading">Loading delegation data...</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 -->
@@ -2228,11 +3711,13 @@
         // =====================================================================
 
         async function loadData() {
+            console.log('[Dashboard] Loading data from:', API);
             const [status, query] = await Promise.all([
                 fetch(`${API}/status`).then(r => r.json()),
                 fetch(`${API}/query`).then(r => r.json())
             ]);
             allNodes = query.nodes;
+            console.log('[Dashboard] Loaded nodes:', allNodes.length, 'Status:', status);
             return { status, nodes: query.nodes };
         }
 
@@ -2287,6 +3772,131 @@
             return Number(value).toFixed(2);
         }
 
+        function renderTimeline(overview, features, transitions) {
+            const el = document.getElementById('timeline-content');
+            if (!overview) {
+                el.innerHTML = '<p class="analytics-note">No timeline data available.</p>';
+                return;
+            }
+
+            // Build timeline entries from overview data
+            const entries = [];
+
+            // Add overview entry (summary event)
+            if (overview.events > 0) {
+                entries.push({
+                    type: 'session',
+                    title: `${overview.events} events recorded`,
+                    meta: `Failure rate: ${formatPercent(overview.failure_rate)}, Avg drift: ${formatFloat(overview.avg_drift)}`
+                });
+            }
+
+            // Add top features as timeline entries
+            if (features && features.length > 0) {
+                features.slice(0, 5).forEach(f => {
+                    entries.push({
+                        type: 'feature',
+                        title: f.feature_id,
+                        meta: `${f.count} events, ${f.failures} failures`
+                    });
+                });
+            }
+
+            // Add top transitions as timeline entries
+            if (transitions && transitions.length > 0) {
+                transitions.slice(0, 3).forEach(t => {
+                    entries.push({
+                        type: 'session',
+                        title: `${t.tool} → ${t.next_tool}`,
+                        meta: `${t.count} transitions`
+                    });
+                });
+            }
+
+            if (entries.length === 0) {
+                el.innerHTML = '<p class="analytics-note">No timeline events to display.</p>';
+                return;
+            }
+
+            el.innerHTML = entries.map(e => `
+                <div class="timeline-entry" title="${escapeHtml(e.meta)}">
+                    <div class="timeline-entry-marker ${e.type}"></div>
+                    <div class="timeline-entry-content">
+                        <div class="timeline-entry-title">${escapeHtml(e.title)}</div>
+                        <div class="timeline-entry-meta">${escapeHtml(e.meta)}</div>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        function renderAnalyticsSummary(overview) {
+            const el = document.getElementById('summary-content');
+            if (!overview) {
+                el.innerHTML = '<p class="analytics-note">No summary data available.</p>';
+                return;
+            }
+
+            const failureRate = overview.failure_rate || 0;
+            const avgDrift = overview.avg_drift || 0;
+            const eventCount = overview.events || 0;
+
+            // Determine health status
+            const failureHealth = failureRate < 0.05 ? 'health-good' : failureRate < 0.15 ? 'health-ok' : 'health-poor';
+            const driftHealth = avgDrift < 1.0 ? 'health-good' : avgDrift < 2.0 ? 'health-ok' : 'health-poor';
+            const activityHealth = eventCount > 100 ? 'health-good' : eventCount > 20 ? 'health-ok' : 'health-poor';
+
+            el.innerHTML = `
+                <div class="health-card ${failureHealth}">
+                    <div class="health-label">Failure Rate</div>
+                    <div class="health-value">${formatPercent(failureRate)}</div>
+                    <div class="health-detail">${failureRate < 0.05 ? '✓ Excellent' : failureRate < 0.15 ? '⚠ Acceptable' : '✗ Needs attention'}</div>
+                </div>
+                <div class="health-card ${driftHealth}">
+                    <div class="health-label">Avg Context Drift</div>
+                    <div class="health-value">${formatFloat(avgDrift)}</div>
+                    <div class="health-detail">${avgDrift < 1.0 ? '✓ Clean' : avgDrift < 2.0 ? '⚠ Acceptable' : '✗ High drift'}</div>
+                </div>
+                <div class="health-card ${activityHealth}">
+                    <div class="health-label">Total Events</div>
+                    <div class="health-value">${eventCount}</div>
+                    <div class="health-detail">${eventCount > 100 ? '✓ Active' : eventCount > 20 ? '⚠ Some data' : '✗ Minimal activity'}</div>
+                </div>
+            `;
+        }
+
+        function renderCollaborationMetrics(overview) {
+            const el = document.getElementById('collaboration-content');
+            if (!overview) {
+                el.innerHTML = '<p class="analytics-note">No collaboration data available.</p>';
+                return;
+            }
+
+            // Extract or calculate collaboration metrics
+            const handoffCount = overview.handoffs || 0;
+            const parallelWorkPct = overview.parallel_work_pct || 0;
+            const agentCount = overview.agent_count || 1;
+            const avgSessionDuration = overview.avg_session_duration || 0;
+
+            el.innerHTML = `
+                <div class="collab-stat">
+                    <div class="collab-stat-value">${handoffCount}</div>
+                    <div class="collab-stat-label">Handoffs</div>
+                </div>
+                <div class="collab-stat">
+                    <div class="collab-stat-value">${formatPercent(parallelWorkPct)}</div>
+                    <div class="collab-stat-label">Parallel Work</div>
+                </div>
+                <div class="collab-stat">
+                    <div class="collab-stat-value">${agentCount}</div>
+                    <div class="collab-stat-label">Active Agents</div>
+                </div>
+                <div class="collab-stat">
+                    <div class="collab-stat-value">${formatFloat(avgSessionDuration)}</div>
+                    <div class="collab-stat-label">Avg Session (min)</div>
+                </div>
+            `;
+        }
+
         function renderAnalyticsOverview(overview) {
             const el = document.getElementById('analytics-overview');
             el.innerHTML = `
@@ -2696,40 +4306,275 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
         }
 
         async function loadAndRenderAnalyticsBase() {
+            console.log('[Dashboard] Loading analytics from:', `${API}/analytics/`);
             const [overview, features, transitions] = await Promise.all([
-                fetchAnalytics('overview'),
-                fetchAnalytics('features', { limit: 50 }).then(r => r.features),
-                fetchAnalytics('transitions', { limit: 25 }).then(r => r.transitions),
+                fetchAnalytics('overview').catch(e => { console.error('[Analytics] overview failed:', e); return null; }),
+                fetchAnalytics('features', { limit: 50 }).then(r => r.features).catch(e => { console.error('[Analytics] features failed:', e); return null; }),
+                fetchAnalytics('transitions', { limit: 25 }).then(r => r.transitions).catch(e => { console.error('[Analytics] transitions failed:', e); return null; }),
             ]);
 
             analyticsCache.overview = overview;
             analyticsCache.features = features;
             analyticsCache.transitions = transitions;
             analyticsLoadedAt = Date.now();
+            console.log('[Analytics] Loaded - overview:', !!overview, 'features:', features?.length || 0, 'transitions:', transitions?.length || 0);
 
+            // Render primary analytics views (new card-based layout)
+            renderTimeline(overview, features, transitions);
+            renderAnalyticsSummary(overview);
+            renderCollaborationMetrics(overview);
+
+            // Render detail cards
             renderAnalyticsOverview(overview);
             renderAnalyticsTools(transitions);
             renderAnalyticsFeatures(features);
         }
 
-        async function loadAndRenderContinuity(featureId) {
-            analyticsCache.selectedFeatureId = featureId;
-            const data = await fetchAnalytics('continuity', { feature_id: featureId, limit: 200 });
-            renderAnalyticsContinuity(featureId, data.sessions || []);
-        }
+        async function loadAndRenderContinuity(featureId) {
+            analyticsCache.selectedFeatureId = featureId;
+            const data = await fetchAnalytics('continuity', { feature_id: featureId, limit: 200 });
+            renderAnalyticsContinuity(featureId, data.sessions || []);
+        }
+
+        async function loadAndRenderCommits(featureId) {
+            const data = await fetchAnalytics('commits', { feature_id: featureId, limit: 200 });
+            renderAnalyticsCommits(featureId, data.commits || []);
+        }
+
+        async function loadFeatureAnalytics(featureId) {
+            analyticsCache.selectedFeatureId = featureId;
+
+            // Show the detail sections for selected feature
+            document.getElementById('analytics-continuity').style.display = 'block';
+            document.getElementById('analytics-commits').style.display = 'block';
+            document.getElementById('analytics-commit-dag').style.display = 'block';
+
+            await Promise.all([
+                loadAndRenderContinuity(featureId),
+                loadAndRenderCommits(featureId),
+                loadAndRenderCommitDag(featureId)
+            ]);
+        }
+
+        // =====================================================================
+        // 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;
+                }
 
-        async function loadAndRenderCommits(featureId) {
-            const data = await fetchAnalytics('commits', { feature_id: featureId, limit: 200 });
-            renderAnalyticsCommits(featureId, data.commits || []);
-        }
+                // Aggregate costs by agent
+                const costs = aggregateAgentCosts(allSessions);
 
-        async function loadFeatureAnalytics(featureId) {
-            analyticsCache.selectedFeatureId = featureId;
-            await Promise.all([
-                loadAndRenderContinuity(featureId),
-                loadAndRenderCommits(featureId),
-                loadAndRenderCommitDag(featureId)
-            ]);
+                // Render visualization
+                renderAgentCostMetrics(costs);
+                renderAgentCostBars(costs);
+                renderAgentCostLegend(costs);
+            } catch (err) {
+                console.error('Error loading agent costs:', err);
+            }
         }
 
         async function ensureAnalyticsLoaded(force = false) {
@@ -2737,6 +4582,7 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
             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);
                 }
@@ -2753,11 +4599,13 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
             try {
                 // Fetch all sessions from the API (only on first load)
                 if (allSessions.length === 0) {
+                    console.log('[Sessions] Fetching from:', `${API}/sessions`);
                     const response = await fetch(`${API}/sessions`);
-                    if (!response.ok) throw new Error('Failed to load sessions');
+                    if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
 
                     const data = await response.json();
                     allSessions = data.nodes || [];
+                    console.log('[Sessions] Loaded', allSessions.length, 'sessions from API response keys:', Object.keys(data));
 
                     // Populate agent dropdown with unique agents
                     const agents = [...new Set(allSessions.map(s => s.properties?.agent).filter(Boolean))];
@@ -3240,7 +5088,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 +5107,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 +5279,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('')}
@@ -3573,64 +5459,54 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
             const container = document.getElementById('activity-log-container');
 
             try {
-                // Fetch the HTML file directly
-                const response = await fetch(`${API}/../.htmlgraph/${collection}/${sessionId}.html`);
-                if (!response.ok) throw new Error('Failed to load session file');
-
-                const html = await response.text();
-                const parser = new DOMParser();
-                const doc = parser.parseFromString(html, 'text/html');
-
-                // Find the activity log section
-                const activitySection = doc.querySelector('section[data-activity-log]');
-                if (!activitySection) {
-                    container.innerHTML = '<div class="loading">No activity log found</div>';
-                    return;
-                }
+                // Use Analytics API to get merged events (including child sessions)
+                const response = await fetch(`${API}/analytics/session?id=${sessionId}&limit=100`);
+                if (!response.ok) throw new Error('Failed to load session events');
 
-                // Get the activity items
-                const activityItems = activitySection.querySelectorAll('li[data-ts]');
-                const eventCount = activitySection.querySelector('h3')?.textContent || 'Activity Log';
+                const data = await response.json();
+                const events = data.events || [];
 
-                if (activityItems.length === 0) {
+                if (events.length === 0) {
                     container.innerHTML = '<div class="loading">No events recorded</div>';
                     return;
                 }
 
-                // Render activity log (show first 50 events)
-                const limit = 50;
-                const events = Array.from(activityItems).slice(0, limit);
-
                 let html_content = `
                     <div class="activity-header">
-                        <strong>${eventCount}</strong>
-                        ${activityItems.length > limit ? `<span>(showing first ${limit})</span>` : ''}
+                        <strong>${events.length}</strong>
+                        <span>(most recent first)</span>
                     </div>
                     <ol class="activity-list" reversed>
                 `;
 
                 events.forEach(item => {
-                    const ts = new Date(item.dataset.ts).toLocaleString();
-                    const tool = item.dataset.tool || 'Unknown';
-                    const success = item.dataset.success === 'true';
-                    const feature = item.dataset.feature || '';
-                    const drift = item.dataset.drift ? parseFloat(item.dataset.drift).toFixed(2) : '';
-                    const content = item.textContent.trim();
+                    const ts = new Date(item.ts).toLocaleString();
+                    const tool = item.tool || 'Unknown';
+                    const success = item.success === 1 || item.success === true;
+                    const feature = item.feature_id || '';
+                    const drift = item.drift_score ? parseFloat(item.drift_score).toFixed(2) : '';
+                    const content = item.summary || '';
+                    
+                    // Identify child events (from sub-sessions)
+                    const isChild = item.session_id !== sessionId;
+                    const childClass = isChild ? 'child-event' : '';
+                    const childBadge = isChild ? '<span class="badge" style="background: var(--bg-tertiary); color: var(--text-muted);">sub-task</span>' : '';
 
                     const statusIcon = success ? '✅' : '❌';
                     const featureBadge = feature ? `<span class="badge">${feature}</span>` : '';
                     const driftBadge = drift ? `<span class="badge drift-${drift >= 0.7 ? 'high' : 'low'}">drift: ${drift}</span>` : '';
 
                     html_content += `
-                        <li class="activity-item">
+                        <li class="activity-item ${childClass}" style="${isChild ? 'padding-left: 1.5rem; border-left: 2px solid var(--border);' : ''}">
                             <div class="activity-meta">
                                 <span class="activity-time">${ts}</span>
                                 ${statusIcon}
                                 <span class="activity-tool">${tool}</span>
+                                ${childBadge}
                                 ${featureBadge}
                                 ${driftBadge}
                             </div>
-                            <div class="activity-content">${content}</div>
+                            <div class="activity-content">${escapeHtml(content)}</div>
                         </li>
                     `;
                 });
@@ -3639,10 +5515,253 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
                 container.innerHTML = html_content;
 
             } catch (err) {
+                console.error("Activity log error:", err);
                 container.innerHTML = `<div class="loading">Error loading activity log: ${err.message}</div>`;
             }
         }
 
+        /**
+         * Fetch complete activity feed from all sources (hooks, subagents, spikes).
+         * This provides unified visibility into ALL activity including delegated work.
+         * See GitHub issue #14859 for Claude Code hook limitations.
+         */
+        async function fetchCompleteActivityFeed(sessionId = null, limit = 100) {
+            const container = document.getElementById('complete-activity-container');
+            if (!container) return;
+
+            try {
+                let url = `${API}/complete-activity-feed?limit=${limit}`;
+                if (sessionId) url += `&session_id=${sessionId}`;
+
+                const response = await fetch(url);
+                if (!response.ok) throw new Error('Failed to load complete activity feed');
+
+                const data = await response.json();
+                const events = data.events || [];
+                const sources = data.sources || {};
+
+                if (events.length === 0) {
+                    container.innerHTML = `
+                        <div class="loading">
+                            No events recorded yet.
+                            <div style="font-size: 0.75rem; margin-top: 0.5rem; color: var(--text-muted);">
+                                Events are captured via PreToolUse hooks and SubagentStop hooks.
+                            </div>
+                        </div>
+                    `;
+                    return;
+                }
+
+                // Build parent-child map
+                const parentMap = new Map();
+                const topLevelEvents = [];
+
+                events.forEach(event => {
+                    if (event.parent_event_id) {
+                        if (!parentMap.has(event.parent_event_id)) {
+                            parentMap.set(event.parent_event_id, []);
+                        }
+                        parentMap.get(event.parent_event_id).push(event);
+                    } else {
+                        topLevelEvents.push(event);
+                    }
+                });
+
+                // Build source summary
+                const sourceSummary = `
+                    <div style="display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;">
+                        <span class="badge source source-hook">Hook Events: ${sources.hook_events || 0}</span>
+                        <span class="badge source source-subagent">Subagent: ${sources.delegations || 0}</span>
+                        <span class="badge source source-spike">SDK Spikes: ${sources.spike_logs || 0}</span>
+                    </div>
+                `;
+
+                let html_content = `
+                    <div class="activity-header">
+                        <strong>${events.length}</strong>
+                        <span>events from all sources (${topLevelEvents.length} top-level)</span>
+                    </div>
+                    ${sourceSummary}
+                    <ol class="activity-list" reversed>
+                `;
+
+                // Render helper function
+                function renderEvent(item, isChild = false, depth = 0) {
+                    const ts = item.timestamp ? new Date(item.timestamp).toLocaleString() : 'Unknown';
+                    const tool = item.tool_name || item.event_type || 'Unknown';
+                    const agentId = item.agent_id || 'unknown';
+                    const status = item.status || 'recorded';
+                    const source = item.source || 'hook_event';
+                    const content = item.input_summary || item.output_summary || '';
+                    const eventId = item.event_id || '';
+                    const hasChildren = parentMap.has(eventId);
+
+                    // Source-specific styling
+                    let sourceClass = 'hook';
+                    let sourceBadge = '<span class="badge source source-hook">HOOK</span>';
+                    if (source === 'spike_log') {
+                        sourceClass = 'spike';
+                        sourceBadge = '<span class="badge source source-spike">SDK</span>';
+                    } else if (source === 'delegation' || item.event_type === 'delegation') {
+                        sourceClass = 'subagent';
+                        sourceBadge = '<span class="badge source source-subagent">SUBAGENT</span>';
+                    } else if (item.event_type === 'handoff') {
+                        sourceClass = 'delegation';
+                        sourceBadge = '<span class="badge source source-delegation">HANDOFF</span>';
+                    }
+
+                    // Status icon
+                    const statusIcon = status === 'completed' ? '✅' :
+                                      status === 'error' ? '❌' :
+                                      status === 'subagent_completed' ? '🤖' : '📊';
+
+                    // Agent badge
+                    const agentClass = agentId.includes('claude') ? 'agent-claude' :
+                                      agentId.includes('gemini') ? 'agent-gemini' :
+                                      agentId.includes('codex') ? 'agent-codex' :
+                                      agentId.includes('subagent') ? 'agent-default' : '';
+                    const agentBadge = agentClass ? `<span class="badge agent ${agentClass}">${agentId}</span>` :
+                                                   `<span class="badge">${agentId}</span>`;
+
+                    // Add expand icon for parents
+                    const expandIcon = hasChildren ? '<span class="expand-icon"></span>' : '';
+                    const indent = isChild ? 'padding-left: ' + (1.5 + depth * 1.5) + 'rem;' : '';
+
+                    return `
+                        <li class="activity-item ${hasChildren ? 'parent-event' : ''} ${isChild ? 'child-event' : ''}"
+                            data-event-id="${eventId}"
+                            style="border-left: 3px solid ${sourceClass === 'hook' ? '#2979FF' : sourceClass === 'spike' ? '#00C853' : sourceClass === 'subagent' ? '#7C4DFF' : '#FF9100'}; ${indent}">
+                            <div class="activity-meta">
+                                ${expandIcon}
+                                <span class="activity-time">${ts}</span>
+                                ${statusIcon}
+                                ${sourceBadge}
+                                <span class="activity-tool">${tool}</span>
+                                ${agentBadge}
+                            </div>
+                            <div class="activity-content">${escapeHtml(content.substring(0, 200))}${content.length > 200 ? '...' : ''}</div>
+                        </li>
+                    `;
+                }
+
+                // Render events recursively
+                function renderEventTree(eventList, depth = 0) {
+                    let html = '';
+                    eventList.forEach(item => {
+                        html += renderEvent(item, depth > 0, depth);
+                        const eventId = item.event_id || '';
+                        if (parentMap.has(eventId)) {
+                            const children = parentMap.get(eventId);
+                            html += renderEventTree(children, depth + 1);
+                        }
+                    });
+                    return html;
+                }
+
+                html_content += renderEventTree(topLevelEvents);
+                html_content += `</ol>`;
+
+                // Add limitation notice
+                html_content += `
+                    <div style="margin-top: 1rem; padding: 0.75rem; background: var(--bg-tertiary); border-radius: 4px; font-size: 0.75rem; color: var(--text-muted);">
+                        <strong>Note:</strong> Subagent tool activity is not captured (Claude Code limitation).
+                        <a href="https://github.com/anthropics/claude-code/issues/14859" target="_blank" style="color: var(--status-active);">See GitHub #14859</a>
+                    </div>
+                `;
+
+                container.innerHTML = html_content;
+
+                // Add click handlers for expandable parent events
+                const parentEvents = container.querySelectorAll('.activity-item.parent-event');
+                parentEvents.forEach(parentEl => {
+                    parentEl.addEventListener('click', (e) => {
+                        // Don't toggle if clicking on a link
+                        if (e.target.tagName === 'A') return;
+
+                        const eventId = parentEl.dataset.eventId;
+                        const isExpanded = parentEl.classList.contains('expanded');
+
+                        if (isExpanded) {
+                            // Collapse - hide children
+                            parentEl.classList.remove('expanded');
+                            hideChildren(eventId);
+                        } else {
+                            // Expand - show direct children only
+                            parentEl.classList.add('expanded');
+                            showDirectChildren(eventId);
+                        }
+                    });
+                });
+
+                // Helper to show direct children
+                function showDirectChildren(parentId) {
+                    const allItems = container.querySelectorAll('.activity-item');
+                    let foundParent = false;
+                    let parentDepth = -1;
+
+                    allItems.forEach(item => {
+                        if (item.dataset.eventId === parentId) {
+                            foundParent = true;
+                            // Calculate depth from indent
+                            const style = item.getAttribute('style') || '';
+                            const match = style.match(/padding-left:\s*([\d.]+)rem/);
+                            parentDepth = match ? parseFloat(match[1]) : 0;
+                        } else if (foundParent) {
+                            const style = item.getAttribute('style') || '';
+                            const match = style.match(/padding-left:\s*([\d.]+)rem/);
+                            const itemDepth = match ? parseFloat(match[1]) : 0;
+
+                            // Stop when we reach same or lower depth (sibling or parent)
+                            if (itemDepth <= parentDepth) {
+                                foundParent = false;
+                                return;
+                            }
+
+                            // Show only direct children (next depth level)
+                            if (itemDepth === parentDepth + 1.5) {
+                                item.style.display = 'block';
+                            }
+                        }
+                    });
+                }
+
+                // Helper to hide all descendants
+                function hideChildren(parentId) {
+                    const allItems = container.querySelectorAll('.activity-item');
+                    let foundParent = false;
+                    let parentDepth = -1;
+
+                    allItems.forEach(item => {
+                        if (item.dataset.eventId === parentId) {
+                            foundParent = true;
+                            // Calculate depth from indent
+                            const style = item.getAttribute('style') || '';
+                            const match = style.match(/padding-left:\s*([\d.]+)rem/);
+                            parentDepth = match ? parseFloat(match[1]) : 0;
+                        } else if (foundParent) {
+                            const style = item.getAttribute('style') || '';
+                            const match = style.match(/padding-left:\s*([\d.]+)rem/);
+                            const itemDepth = match ? parseFloat(match[1]) : 0;
+
+                            // Stop when we reach same or lower depth
+                            if (itemDepth <= parentDepth) {
+                                foundParent = false;
+                                return;
+                            }
+
+                            // Hide all descendants and collapse them
+                            item.style.display = 'none';
+                            item.classList.remove('expanded');
+                        }
+                    });
+                }
+
+            } catch (err) {
+                console.error("Complete activity feed error:", err);
+                container.innerHTML = `<div class="loading">Error loading activity feed: ${err.message}</div>`;
+            }
+        }
+
         async function fetchTranscriptStats(sessionId) {
             const container = document.getElementById('transcript-stats-container');
             if (!container) return;
@@ -3731,6 +5850,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 +5876,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 +5905,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) {
@@ -4089,213 +6263,796 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
             updateKanbanGrid();
         }
 
-        // =====================================================================
-        // Graph Visualization
-        // =====================================================================
+        // =====================================================================
+        // 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();
+        }
+
+        // =====================================================================
+        // 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 };
+        }
+
+        function getProficiencyColor(level) {
+            return `proficiency-${Math.round(level)}`;
+        }
 
-        let simulation = null;
+        function getProficiencyLabel(level) {
+            const labels = ['', 'Novice', 'Beginner', 'Intermediate', 'Advanced', 'Expert'];
+            return labels[Math.round(level)] || 'Expert';
+        }
 
-        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 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;
         }
 
-        function getNodeRadius(node) {
-            const edgeCount = Object.values(node.edges || {})
-                .reduce((sum, edges) => sum + edges.length, 0);
-            return Math.min(45 + edgeCount * 3, 60);
+        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>`;
+            }
         }
 
-        function wrapText(text, maxCharsPerLine = 10) {
-            const words = text.split(/\s+/);
-            const lines = [];
-            let currentLine = '';
+        async function loadOrchestrationView() {
+            const el = document.getElementById('orchestration-content');
+            try {
+                const r = await fetch(`${API}/orchestration`);
+                if (!r.ok) throw new Error('Failed to load orchestration data');
+                const data = await r.json();
 
-            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 (data.delegation_count === 0) {
+                    el.innerHTML = '<div style="padding: 2rem; color: var(--text-muted);">No delegations found</div>';
+                    return;
                 }
-            }
-            if (currentLine) lines.push(currentLine);
 
-            if (lines.length > 3) {
-                lines.length = 3;
-                lines[2] = lines[2].substring(0, lines[2].length - 1) + '…';
-            }
+                // Render delegation summary
+                let html = '<div style="display: flex; gap: 1rem; margin-bottom: 1.5rem;">';
+                html += `<div class="metric-card"><div class="metric-value">${data.delegation_count}</div><div class="metric-label">Total Delegations</div></div>`;
+                html += `<div class="metric-card"><div class="metric-value">${data.unique_agents}</div><div class="metric-label">Agents Involved</div></div>`;
+                html += '</div>';
+
+                // Render delegation chains
+                html += '<div class="delegations-list">';
+                for (const [fromAgent, delegations] of Object.entries(data.delegation_chains)) {
+                    html += `<div style="margin-bottom: 1.5rem;">`;
+                    html += `<h4 style="margin-bottom: 0.75rem; color: var(--text-primary);">${fromAgent}</h4>`;
+                    delegations.forEach(d => {
+                        const statusColor = d.status === 'completed' ? 'var(--status-done)' :
+                                           d.status === 'failed' ? 'var(--status-blocked)' :
+                                           'var(--status-active)';
+                        html += `<div class="delegation-item" style="margin-left: 1.5rem; margin-bottom: 0.5rem; padding: 0.75rem; background: var(--bg-tertiary); border-radius: 6px;">`;
+                        html += `<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">`;
+                        html += `<span style="color: var(--text-secondary);">→</span>`;
+                        html += `<strong style="color: var(--text-primary);">${d.to_agent}</strong>`;
+                        html += `<span class="badge" style="background: ${statusColor}; color: white; font-size: 0.65rem;">${d.status}</span>`;
+                        html += `</div>`;
+                        html += `<div style="color: var(--text-secondary); font-size: 0.875rem; margin-left: 1.5rem;">${d.task}</div>`;
+                        if (d.timestamp) {
+                            html += `<div style="color: var(--text-muted); font-size: 0.75rem; margin-left: 1.5rem; margin-top: 0.25rem;">${d.timestamp.replace('T', ' ').substring(0, 19)}</div>`;
+                        }
+                        html += `</div>`;
+                    });
+                    html += `</div>`;
+                }
+                html += '</div>';
 
-            return lines;
+                el.innerHTML = html;
+            } catch (e) {
+                el.innerHTML = `<div style="padding: 2rem; color: red;">Error: ${e.message}</div>`;
+            }
         }
 
-        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
-            }));
 
-            const nodeIds = new Set(nodes.map(n => n.id));
-            const graphEdges = [];
+        // =====================================================================
+        // View Toggle
+        // =====================================================================
 
-            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
-                            });
-                        }
-                    });
-                });
+        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');
+
+            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();
+                loadOrchestrationView();
+            } 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);
-            });
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') closePanel();
+        });
 
-            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;
+        loadData().then(async ({ status, nodes }) => {
+            await renderKanban(nodes);
+            updateKanbanGrid();
+        }).catch(err => {
+            console.error('Error loading dashboard data:', err);
+        });
 
-                const radius = getNodeRadius(node);
-                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-                circle.setAttribute('r', radius);
-                circle.setAttribute('fill', getNodeColor(node));
+        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();
+        }
 
-                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);
-                });
+        function renderGraph(nodes) {
+            if (nodes.length === 0) {
+                if (visNetwork) visNetwork.destroy();
+                visNetwork = null;
+                return;
+            }
 
-                g.appendChild(circle);
-                g.appendChild(text);
-                nodesGroup.appendChild(g);
+            const { nodes: graphNodes, edges: graphEdges } = buildGraphData(nodes);
 
-                g.addEventListener('click', () => {
-                    openPanel(node._collection, node.id);
-                });
+            graphState.allNodes = graphNodes;
+            graphState.allEdges = graphEdges;
 
-                let isDragging = false;
-                let dragOffset = { x: 0, y: 0 };
+            // 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();
+            }
 
-                g.addEventListener('mousedown', (e) => {
-                    isDragging = true;
-                    dragOffset = { x: e.clientX - node.x, y: e.clientY - node.y };
-                    simulation.alphaTarget(0.3).restart();
-                    e.preventDefault();
-                });
+            // Create new Vis.js network
+            const container = document.getElementById('graph-network');
+            const data = {
+                nodes: nodesData,
+                edges: edgesData
+            };
 
-                document.addEventListener('mousemove', (e) => {
-                    if (isDragging) {
-                        node.fx = e.clientX - dragOffset.x;
-                        node.fy = e.clientY - dragOffset.y;
+            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
                     }
-                });
+                }
+            };
 
-                document.addEventListener('mouseup', () => {
-                    if (isDragging) {
-                        isDragging = false;
-                        node.fx = null;
-                        node.fy = null;
-                        simulation.alphaTarget(0);
-                    }
-                });
-            });
+            visNetwork = new vis.Network(container, data, options);
 
-            function updatePositions() {
-                const nodeElements = nodesGroup.querySelectorAll('.graph-node');
-                nodeElements.forEach(g => {
-                    const node = nodeById.get(g.dataset.id);
+            // 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 +7064,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 +7076,42 @@ ${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();
+                loadOrchestrationView();
             } 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 +7146,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();
         });
@@ -4560,6 +7336,53 @@ ${node.ts ? node.ts.slice(0, 19).replace('T', ' ') : ''}`;
                 closeSpecPlanModal();
             }
         });
+
+        // Convert UTC timestamps to local timezone
+        function convertTimestampsToLocal() {
+            const timestampElements = document.querySelectorAll('[data-utc-time]');
+            timestampElements.forEach(element => {
+                const utcTime = element.getAttribute('data-utc-time');
+                if (utcTime) {
+                    try {
+                        // Parse ISO 8601 UTC time - convert naive datetime to UTC format
+                        // Input: "2026-01-06 18:01:19" → "2026-01-06T18:01:19Z"
+                        const date = new Date(utcTime.replace(' ', 'T') + 'Z');
+                        // Convert to local timezone using Intl API for best compatibility
+                        const localTime = new Intl.DateTimeFormat('en-US', {
+                            year: 'numeric',
+                            month: '2-digit',
+                            day: '2-digit',
+                            hour: '2-digit',
+                            minute: '2-digit',
+                            second: '2-digit',
+                            hour12: false,
+                            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+                        }).format(date);
+                        // Replace the displayed timestamp with local time
+                        element.textContent = localTime;
+                        // Add title attribute to show full ISO format on hover
+                        element.setAttribute('title', `UTC: ${utcTime} | Local: ${localTime}`);
+                    } catch (err) {
+                        console.warn('Failed to convert timestamp:', utcTime, err);
+                    }
+                }
+            });
+        }
+
+        // Convert timestamps on page load
+        document.addEventListener('DOMContentLoaded', convertTimestampsToLocal);
+
+        // Also convert timestamps when new content is dynamically loaded (e.g., via HTMX)
+        if (typeof htmx !== 'undefined') {
+            document.addEventListener('htmx:afterSwap', convertTimestampsToLocal);
+        }
+
+        // Convert timestamps via WebSocket updates
+        const originalWebSocketOpen = WebSocket.prototype.open;
+        if (originalWebSocketOpen) {
+            // Re-convert after WebSocket message arrives
+            document.addEventListener('ws:update', convertTimestampsToLocal);
+        }
     </script>
 
     <!-- Spec/Plan Modal -->