From 36b35e3cbe63cf8510219a125b27ce26daff4f5e Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Thu, 8 Jan 2026 13:17:20 +0100 Subject: [PATCH] Add Dependencies tab to aggregator static HTML MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add Kanban/Dependencies tab switcher in header - Add D3.js force-directed graph visualization - Show completed toggle filter - Color-coded nodes by status (green=done, blue=in-progress, gray=todo) - Project-specific border colors - Drag nodes, pan/zoom, hover to highlight connections - Click node for task details 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/aggregator/web/index.html | 382 ++++++++++++++++++++++++++++++++++ 1 file changed, 382 insertions(+) diff --git a/src/aggregator/web/index.html b/src/aggregator/web/index.html index a6f14eb..7b03150 100644 --- a/src/aggregator/web/index.html +++ b/src/aggregator/web/index.html @@ -391,6 +391,103 @@ color: #e2e8f0; min-width: 60px; } + /* View Tabs */ + .view-tabs { + display: flex; + gap: 0.25rem; + margin-left: 1rem; + } + .view-tab { + padding: 0.5rem 1rem; + border-radius: 0.375rem; + border: none; + background: #334155; + color: #e2e8f0; + cursor: pointer; + font-size: 0.875rem; + font-weight: 500; + display: flex; + align-items: center; + gap: 0.5rem; + transition: background 0.2s; + } + .view-tab:hover { background: #475569; } + .view-tab.active { background: #3b82f6; } + /* Dependency Graph */ + .dependency-container { + padding: 1rem 2rem; + display: none; + } + .dependency-container.visible { display: block; } + .dependency-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + } + .dependency-header h2 { font-size: 1.5rem; font-weight: 600; } + .dependency-controls { + display: flex; + align-items: center; + gap: 1rem; + } + .toggle-container { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + color: #94a3b8; + } + .toggle-switch { + position: relative; + width: 40px; + height: 20px; + background: #334155; + border-radius: 10px; + cursor: pointer; + transition: background 0.2s; + } + .toggle-switch.active { background: #3b82f6; } + .toggle-switch::after { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 16px; + height: 16px; + background: white; + border-radius: 50%; + transition: transform 0.2s; + } + .toggle-switch.active::after { transform: translateX(20px); } + #dependency-graph { + background: #1e293b; + border-radius: 0.5rem; + overflow: hidden; + min-height: 500px; + } + .graph-legend { + display: flex; + gap: 1.5rem; + margin-top: 1rem; + font-size: 0.75rem; + color: #94a3b8; + } + .legend-item { + display: flex; + align-items: center; + gap: 0.5rem; + } + .legend-dot { + width: 12px; + height: 12px; + border-radius: 50%; + } + .graph-hint { + margin-top: 0.5rem; + color: #64748b; + font-size: 0.8rem; + } @@ -398,6 +495,21 @@

Backlog Aggregator

Connecting... + +
+ + +
Loading...
@@ -469,6 +581,27 @@ + +
+
+

Dependency Graph

+
+
+ Show Completed +
+
+
+
+
+
+
Done
+
In Progress
+
To Do
+
Border = Project
+
+
Drag nodes to reposition • Double-click to unpin • Scroll to zoom • Click node for details
+
+