@ronkovic/aad 0.4.0 → 0.5.1

package/src/modules/dashboard/ui/dashboard.html

@@ -4,103 +4,483 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AAD Dashboard</title>
-  <style>
-    *{margin:0;padding:0;box-sizing:border-box}
-    body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#1a1a1a;color:#e0e0e0;padding:20px;line-height:1.4}
-    header{background:#2d2d2d;padding:20px 24px;border-radius:10px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
-    header h1{font-size:22px;font-weight:700;color:#4fc3f7}
-    header p{color:#9e9e9e;font-size:13px}
-    .activity-cell{font-size:11px;font-weight:600}
-    .activity-connected{color:#66bb6a}
-    .activity-reconnecting{color:#ffa726}
-    .activity-disconnected{color:#ef5350}
-    .activity-phase-red{color:#ef5350}
-    .activity-phase-green{color:#66bb6a}
-    .activity-phase-verify{color:#42a5f5}
-    .activity-phase-review{color:#ab47bc}
-    .activity-phase-merge{color:#ffa726}
-
-    /* Progress bar */
-    .progress-section{background:#2d2d2d;border-radius:10px;padding:20px 24px;margin-bottom:20px}
-    .progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
-    .progress-header h2{font-size:16px;color:#4fc3f7}
-    .progress-header .pct{font-size:28px;font-weight:700;color:#4fc3f7}
-    .progress-bar-track{height:12px;background:#3a3a3a;border-radius:6px;overflow:hidden}
-    .progress-bar-fill{height:100%;background:linear-gradient(90deg,#4fc3f7,#66bb6a);border-radius:6px;transition:width .6s ease;min-width:0}
-    .progress-stats{display:flex;gap:24px;margin-top:14px;flex-wrap:wrap}
-    .progress-stat{text-align:center}
-    .progress-stat .val{font-size:20px;font-weight:700}
-    .progress-stat .lbl{font-size:11px;color:#9e9e9e;text-transform:uppercase;letter-spacing:.5px}
-    .stat-pending .val{color:#42a5f5}
-    .stat-running .val{color:#ffa726}
-    .stat-completed .val{color:#66bb6a}
-    .stat-failed .val{color:#ef5350}
-
-    /* Grid layouts */
-    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
-    .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:20px}
-    @media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
-    @media(max-width:600px){body{padding:10px}header{padding:14px}}
-
-    .card{background:#2d2d2d;padding:20px;border-radius:10px}
-    .card h2{font-size:15px;margin-bottom:14px;color:#4fc3f7;display:flex;align-items:center;justify-content:space-between}
-    .card h2 .count{font-size:12px;color:#9e9e9e;font-weight:400}
-
-    /* Workers */
-    .worker-list{display:flex;flex-direction:column;gap:8px}
-    .worker-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#3a3a3a;border-radius:6px}
-    .worker-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
-    .worker-dot.idle{background:#9e9e9e}
-    .worker-dot.busy{background:#66bb6a;box-shadow:0 0 6px #66bb6a88}
-    .worker-dot.stopped{background:#ef5350}
-    .worker-name{font-size:13px;font-weight:600;flex:1}
-    .worker-task{font-size:11px;color:#9e9e9e}
-
-    /* Task table */
-    .task-table-wrap{overflow-x:auto}
-    table{width:100%;border-collapse:collapse;font-size:13px}
-    th{text-align:left;padding:8px 10px;border-bottom:2px solid #3a3a3a;color:#9e9e9e;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
-    td{padding:7px 10px;border-bottom:1px solid #333;vertical-align:middle}
-    tr:hover td{background:#333}
-    .badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;text-transform:uppercase}
-    .badge-pending{background:#42a5f533;color:#42a5f5}
-    .badge-running{background:#ffa72633;color:#ffa726}
-    .badge-completed{background:#66bb6a33;color:#66bb6a}
-    .badge-failed{background:#ef535033;color:#ef5350}
-    .deps{font-size:11px;color:#9e9e9e}
-    .priority{font-size:12px;color:#bbb}
-
-    /* Graph */
-    .graph-container{position:relative;overflow:auto;min-height:200px}
-    .graph-container svg{display:block}
-
-    /* Timeline */
-    .timeline-container{overflow-x:auto;min-height:100px}
-    .timeline-row{display:flex;align-items:center;margin-bottom:4px;height:26px}
-    .timeline-label{width:100px;flex-shrink:0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;text-align:right;color:#bbb}
-    .timeline-track{flex:1;position:relative;height:18px;background:#3a3a3a;border-radius:3px}
-    .timeline-bar{position:absolute;height:100%;border-radius:3px;min-width:4px;transition:width .4s ease,left .4s ease}
-
-    /* Logs */
-    .log-section{background:#2d2d2d;border-radius:10px;padding:20px;margin-bottom:20px}
-    .log-filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
-    .log-filters label{font-size:12px;display:flex;align-items:center;gap:4px;cursor:pointer;padding:4px 8px;background:#3a3a3a;border-radius:4px}
-    .log-filters label input{accent-color:#4fc3f7}
-    .log-filters select{background:#3a3a3a;color:#e0e0e0;border:1px solid #555;border-radius:4px;padding:4px 8px;font-size:12px}
-    .log-entries{max-height:350px;overflow-y:auto;font-family:"Courier New",monospace;font-size:12px}
-    .log-entry{padding:4px 8px;margin-bottom:2px;border-radius:3px;display:flex;gap:8px}
-    .log-entry .log-time{color:#777;flex-shrink:0}
-    .log-entry .log-svc{color:#4fc3f7;flex-shrink:0;min-width:60px}
-    .log-info{background:#1e3a5f44}
-    .log-warn{background:#5f4b1e44}
-    .log-error{background:#5f1e1e66}
-    .log-hidden{display:none}
-    .empty-msg{color:#666;font-size:13px;padding:20px;text-align:center}
-  </style>
+  <style>/* Reset & Base */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #1a1a1a;
+  color: #e0e0e0;
+  padding: 20px;
+  line-height: 1.4;
+}
+
+/* Header */
+header {
+  background: #2d2d2d;
+  padding: 20px 24px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+header h1 {
+  font-size: 22px;
+  font-weight: 700;
+  color: #4fc3f7;
+}
+
+header p {
+  color: #9e9e9e;
+  font-size: 13px;
+}
+
+/* Activity Indicators */
+.activity-cell {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.activity-connected {
+  color: #66bb6a;
+}
+
+.activity-reconnecting {
+  color: #ffa726;
+}
+
+.activity-disconnected {
+  color: #ef5350;
+}
+
+.activity-phase-red {
+  color: #ef5350;
+}
+
+.activity-phase-green {
+  color: #66bb6a;
+}
+
+.activity-phase-verify {
+  color: #42a5f5;
+}
+
+.activity-phase-review {
+  color: #ab47bc;
+}
+
+.activity-phase-merge {
+  color: #ffa726;
+}
+
+/* Progress Section */
+.progress-section {
+  background: #2d2d2d;
+  border-radius: 10px;
+  padding: 20px 24px;
+  margin-bottom: 20px;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.progress-header h2 {
+  font-size: 16px;
+  color: #4fc3f7;
+}
+
+.progress-header .pct {
+  font-size: 28px;
+  font-weight: 700;
+  color: #4fc3f7;
+}
+
+.progress-bar-track {
+  height: 12px;
+  background: #3a3a3a;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #4fc3f7, #66bb6a);
+  border-radius: 6px;
+  transition: width 0.6s ease;
+  min-width: 0;
+}
+
+.progress-stats {
+  display: flex;
+  gap: 24px;
+  margin-top: 14px;
+  flex-wrap: wrap;
+}
+
+.progress-stat {
+  text-align: center;
+}
+
+.progress-stat .val {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.progress-stat .lbl {
+  font-size: 11px;
+  color: #9e9e9e;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.stat-pending .val {
+  color: #42a5f5;
+}
+
+.stat-running .val {
+  color: #ffa726;
+}
+
+.stat-completed .val {
+  color: #66bb6a;
+}
+
+.stat-failed .val {
+  color: #ef5350;
+}
+
+/* Grid Layouts */
+.grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.grid-3 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 900px) {
+  .grid-2,
+  .grid-3 {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 600px) {
+  body {
+    padding: 10px;
+  }
+  header {
+    padding: 14px;
+  }
+}
+
+/* Card */
+.card {
+  background: #2d2d2d;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.card h2 {
+  font-size: 15px;
+  margin-bottom: 14px;
+  color: #4fc3f7;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card h2 .count {
+  font-size: 12px;
+  color: #9e9e9e;
+  font-weight: 400;
+}
+
+/* Workers */
+.worker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.worker-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: #3a3a3a;
+  border-radius: 6px;
+}
+
+.worker-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.worker-dot.idle {
+  background: #9e9e9e;
+}
+
+.worker-dot.busy {
+  background: #66bb6a;
+  box-shadow: 0 0 6px #66bb6a88;
+}
+
+.worker-dot.stopped {
+  background: #ef5350;
+}
+
+.worker-name {
+  font-size: 13px;
+  font-weight: 600;
+  flex: 1;
+}
+
+.worker-task {
+  font-size: 11px;
+  color: #9e9e9e;
+}
+
+/* Task Table */
+.task-table-wrap {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th {
+  text-align: left;
+  padding: 8px 10px;
+  border-bottom: 2px solid #3a3a3a;
+  color: #9e9e9e;
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+td {
+  padding: 7px 10px;
+  border-bottom: 1px solid #333;
+  vertical-align: middle;
+}
+
+tr:hover td {
+  background: #333;
+}
+
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.badge-pending {
+  background: #42a5f533;
+  color: #42a5f5;
+}
+
+.badge-running {
+  background: #ffa72633;
+  color: #ffa726;
+}
+
+.badge-completed {
+  background: #66bb6a33;
+  color: #66bb6a;
+}
+
+.badge-failed {
+  background: #ef535033;
+  color: #ef5350;
+}
+
+.deps {
+  font-size: 11px;
+  color: #9e9e9e;
+}
+
+.priority {
+  font-size: 12px;
+  color: #bbb;
+}
+
+/* Graph */
+.graph-container {
+  position: relative;
+  overflow: auto;
+  min-height: 200px;
+}
+
+.graph-container svg {
+  display: block;
+}
+
+/* Timeline */
+.timeline-container {
+  overflow-x: auto;
+  min-height: 100px;
+}
+
+.timeline-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  height: 26px;
+}
+
+.timeline-label {
+  width: 100px;
+  flex-shrink: 0;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 8px;
+  text-align: right;
+  color: #bbb;
+}
+
+.timeline-track {
+  flex: 1;
+  position: relative;
+  height: 18px;
+  background: #3a3a3a;
+  border-radius: 3px;
+}
+
+.timeline-bar {
+  position: absolute;
+  height: 100%;
+  border-radius: 3px;
+  min-width: 4px;
+  transition: width 0.4s ease, left 0.4s ease;
+}
+
+/* Logs */
+.log-section {
+  background: #2d2d2d;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.log-filters {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.log-filters label {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  padding: 4px 8px;
+  background: #3a3a3a;
+  border-radius: 4px;
+}
+
+.log-filters label input {
+  accent-color: #4fc3f7;
+}
+
+.log-filters select {
+  background: #3a3a3a;
+  color: #e0e0e0;
+  border: 1px solid #555;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.log-entries {
+  max-height: 350px;
+  overflow-y: auto;
+  font-family: "Courier New", monospace;
+  font-size: 12px;
+}
+
+.log-entry {
+  padding: 4px 8px;
+  margin-bottom: 2px;
+  border-radius: 3px;
+  display: flex;
+  gap: 8px;
+}
+
+.log-entry .log-time {
+  color: #777;
+  flex-shrink: 0;
+}
+
+.log-entry .log-svc {
+  color: #4fc3f7;
+  flex-shrink: 0;
+  min-width: 60px;
+}
+
+.log-info {
+  background: #1e3a5f44;
+}
+
+.log-warn {
+  background: #5f4b1e44;
+}
+
+.log-error {
+  background: #5f1e1e66;
+}
+
+.log-hidden {
+  display: none;
+}
+
+.empty-msg {
+  color: #666;
+  font-size: 13px;
+  padding: 20px;
+  text-align: center;
+}
+</style>
 </head>
 <body>
   <header>
-    <div><h1>AAD Dashboard</h1><p>Real-time Task Orchestrator Monitor</p></div>
+    <div>
+      <h1>AAD Dashboard</h1>
+      <p>Real-time Task Orchestrator Monitor</p>
+    </div>
   </header>
 
   <!-- Progress Bar -->
@@ -109,24 +489,42 @@
       <h2>Overall Progress</h2>
       <span class="pct" id="pct-display">0%</span>
     </div>
-    <div class="progress-bar-track"><div class="progress-bar-fill" id="progress-fill" style="width:0%"></div></div>
+    <div class="progress-bar-track">
+      <div class="progress-bar-fill" id="progress-fill" style="width:0%"></div>
+    </div>
     <div class="progress-stats">
-      <div class="progress-stat stat-pending"><div class="val" id="s-pending">0</div><div class="lbl">Pending</div></div>
-      <div class="progress-stat stat-running"><div class="val" id="s-running">0</div><div class="lbl">Running</div></div>
-      <div class="progress-stat stat-completed"><div class="val" id="s-completed">0</div><div class="lbl">Completed</div></div>
-      <div class="progress-stat stat-failed"><div class="val" id="s-failed">0</div><div class="lbl">Failed</div></div>
+      <div class="progress-stat stat-pending">
+        <div class="val" id="s-pending">0</div>
+        <div class="lbl">Pending</div>
+      </div>
+      <div class="progress-stat stat-running">
+        <div class="val" id="s-running">0</div>
+        <div class="lbl">Running</div>
+      </div>
+      <div class="progress-stat stat-completed">
+        <div class="val" id="s-completed">0</div>
+        <div class="lbl">Completed</div>
+      </div>
+      <div class="progress-stat stat-failed">
+        <div class="val" id="s-failed">0</div>
+        <div class="lbl">Failed</div>
+      </div>
     </div>
   </div>
 
-  <!-- Workers + Tasks -->
+  <!-- Workers + Graph -->
   <div class="grid-2">
     <div class="card">
       <h2>Workers <span class="count" id="workers-count"></span></h2>
-      <div class="worker-list" id="worker-list"><div class="empty-msg">No workers</div></div>
+      <div class="worker-list" id="worker-list">
+        <div class="empty-msg">No workers</div>
+      </div>
     </div>
     <div class="card">
       <h2>Dependency Graph</h2>
-      <div class="graph-container" id="graph-container"><div class="empty-msg">No graph data</div></div>
+      <div class="graph-container" id="graph-container">
+        <div class="empty-msg">No graph data</div>
+      </div>
     </div>
   </div>
 
@@ -135,8 +533,19 @@
     <h2>Tasks <span class="count" id="tasks-count"></span></h2>
     <div class="task-table-wrap">
       <table>
-        <thead><tr><th>ID</th><th>Title</th><th>Status</th><th>Activity</th><th>Priority</th><th>Dependencies</th></tr></thead>
-        <tbody id="task-tbody"><tr><td colspan="6" class="empty-msg">No tasks</td></tr></tbody>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Title</th>
+            <th>Status</th>
+            <th>Activity</th>
+            <th>Priority</th>
+            <th>Dependencies</th>
+          </tr>
+        </thead>
+        <tbody id="task-tbody">
+          <tr><td colspan="6" class="empty-msg">No tasks</td></tr>
+        </tbody>
       </table>
     </div>
   </div>
@@ -144,387 +553,144 @@
   <!-- Timeline -->
   <div class="card" style="margin-bottom:20px">
     <h2>Timeline</h2>
-    <div class="timeline-container" id="timeline-container"><div class="empty-msg">No timeline data</div></div>
+    <div class="timeline-container" id="timeline-container">
+      <div class="empty-msg">No timeline data</div>
+    </div>
   </div>
 
   <!-- Logs -->
   <div class="log-section">
-    <h2 style="font-size:15px;color:#4fc3f7;margin-bottom:10px">Logs <span class="count" id="log-count" style="font-size:12px;color:#9e9e9e;font-weight:400"></span></h2>
+    <h2 style="font-size:15px;color:#4fc3f7;margin-bottom:10px">
+      Logs <span class="count" id="log-count" style="font-size:12px;color:#9e9e9e;font-weight:400"></span>
+    </h2>
     <div class="log-filters">
       <label><input type="checkbox" checked data-level="info"> Info</label>
       <label><input type="checkbox" checked data-level="warn"> Warn</label>
       <label><input type="checkbox" checked data-level="error"> Error</label>
-      <select id="svc-filter"><option value="">All Services</option></select>
-      <input type="text" id="log-search" placeholder="Search logs..." style="background:#3a3a3a;color:#e0e0e0;border:1px solid #555;border-radius:4px;padding:4px 10px;font-size:12px;width:160px">
-      <button id="filter-reset" style="background:#4fc3f7;color:#1a1a1a;border:none;border-radius:4px;padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s">Reset</button>
+      <select id="svc-filter">
+        <option value="">All Services</option>
+      </select>
+      <input
+        type="text"
+        id="log-search"
+        placeholder="Search logs..."
+        style="background:#3a3a3a;color:#e0e0e0;border:1px solid #555;border-radius:4px;padding:4px 10px;font-size:12px;width:160px"
+      >
+      <button
+        id="filter-reset"
+        style="background:#4fc3f7;color:#1a1a1a;border:none;border-radius:4px;padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s"
+      >
+        Reset
+      </button>
     </div>
     <div class="log-entries" id="log-entries"></div>
   </div>
 
-  <script>
-    // State
-    let allTasks = [];
-    let logEntries = [];
-    let knownServices = new Set();
-    let logFilters = { info: true, warn: true, error: true, service: '', search: '' };
-    let taskPhases = {}; // { [taskId]: { phase, status } }
-    let sseStatus = 'disconnected'; // Global SSE connection state
-    let reconnectAttempts = 0;
-
-    // --- Data fetching ---
-    async function loadAll() {
-      try {
-        const [pRes, wRes, tRes, gRes, tlRes, lRes] = await Promise.all([
-          fetch('/api/progress'), fetch('/api/workers'), fetch('/api/tasks'),
-          fetch('/api/graph'), fetch('/api/timeline'), fetch('/api/logs')
-        ]);
-        const [progress, workers, tasks, graph, timeline, logs] = await Promise.all([
-          pRes.json(), wRes.json(), tRes.json(), gRes.json(), tlRes.json(), lRes.json()
-        ]);
-        updateProgress(progress);
-        renderWorkers(workers);
-        allTasks = tasks.tasks || [];
-        renderTasks();
-        renderGraph(graph);
-        renderTimeline(timeline);
-        if (Array.isArray(logs)) logs.forEach(e => addLogEntry(e, true));
-        else if (logs && logs.entries) logs.entries.forEach(e => addLogEntry(e, true));
-        applyLogFilters();
-      } catch (e) { console.error('Load failed:', e); }
-    }
-
-    // --- Progress ---
-    function updateProgress(data) {
-      const p = data.progress || data;
-      const pct = data.percentComplete != null ? data.percentComplete : (p.total > 0 ? Math.round((p.completed / p.total) * 100) : 0);
-      document.getElementById('pct-display').textContent = pct + '%';
-      document.getElementById('progress-fill').style.width = pct + '%';
-      document.getElementById('s-pending').textContent = p.pending || 0;
-      document.getElementById('s-running').textContent = p.running || 0;
-      document.getElementById('s-completed').textContent = p.completed || 0;
-      document.getElementById('s-failed').textContent = p.failed || 0;
-    }
-
-    // --- Workers ---
-    function renderWorkers(data) {
-      const list = document.getElementById('worker-list');
-      const workers = data.workers || [];
-      const stats = data.stats || {};
-      document.getElementById('workers-count').textContent = '(' + (stats.total || workers.length) + ')';
-      if (!workers.length) { list.innerHTML = '<div class="empty-msg">No workers</div>'; return; }
-      list.innerHTML = workers.map(w => {
-        const taskInfo = w.currentTask ? '<span class="worker-task">Task: ' + esc(String(w.currentTask)) + '</span>' : '';
-        return '<div class="worker-item"><span class="worker-dot ' + w.status + '"></span><span class="worker-name">' + esc(String(w.id)) + '</span>' + taskInfo + '<span class="badge badge-' + w.status + '" style="margin-left:auto">' + w.status + '</span></div>';
-      }).join('');
-    }
-
-    // --- Tasks ---
-    function renderTasks() {
-      const tbody = document.getElementById('task-tbody');
-      document.getElementById('tasks-count').textContent = '(' + allTasks.length + ')';
-      if (!allTasks.length) { tbody.innerHTML = '<tr><td colspan="6" class="empty-msg">No tasks</td></tr>'; return; }
-      tbody.innerHTML = allTasks.map(t => {
-        const deps = (t.dependsOn || []).map(d => esc(String(d))).join(', ') || '—';
-        const activity = getActivityDisplay(t.taskId, t.status);
-        return '<tr><td style="font-family:monospace;font-size:11px">' + esc(String(t.taskId)) + '</td><td>' + esc(t.title || '—') + '</td><td><span class="badge badge-' + t.status + '">' + t.status + '</span></td><td class="activity-cell">' + activity + '</td><td class="priority">' + (t.priority || 0) + '</td><td class="deps">' + deps + '</td></tr>';
-      }).join('');
-    }
-
-    function getActivityDisplay(taskId, status) {
-      if (status === 'running') {
-        const phaseInfo = taskPhases[taskId];
-        if (phaseInfo) {
-          const phaseLabels = { red: 'Red (Tests)', green: 'Green (Impl)', verify: 'Verify', review: 'Review', merge: 'Merge' };
-          const phaseLabel = phaseLabels[phaseInfo.phase] || phaseInfo.phase;
-          if (phaseInfo.status === 'running') {
-            return '<span class="activity-phase-' + phaseInfo.phase + '">' + esc(phaseLabel) + '</span>';
-          } else if (phaseInfo.status === 'completed') {
-            return '<span class="activity-phase-' + phaseInfo.phase + '">✓ ' + esc(phaseLabel) + '</span>';
-          } else if (phaseInfo.status === 'failed') {
-            return '<span class="activity-phase-' + phaseInfo.phase + '">✗ ' + esc(phaseLabel) + '</span>';
-          }
-        }
-        return '<span class="activity-phase-green">Running</span>';
-      } else {
-        // Non-RUNNING: show SSE connection status
-        if (sseStatus === 'connected') {
-          return '<span class="activity-connected">Connected</span>';
-        } else if (sseStatus === 'reconnecting') {
-          return '<span class="activity-reconnecting">Reconnecting...</span>';
-        } else {
-          return '<span class="activity-disconnected">Disconnected</span>';
-        }
-      }
-    }
-
-    function updateActivityColumn(taskId) {
-      renderTasks();
-    }
-
-    function updateAllActivityColumns() {
-      renderTasks();
-    }
-
-    function updateTaskInList(taskId, updates) {
-      const idx = allTasks.findIndex(t => t.taskId === taskId);
-      if (idx >= 0) Object.assign(allTasks[idx], updates);
-      renderTasks();
-    }
-
-    // --- Graph ---
-    function renderGraph(data) {
-      const container = document.getElementById('graph-container');
-      const nodes = data.nodes || [];
-      const edges = data.edges || [];
-      if (!nodes.length) { container.innerHTML = '<div class="empty-msg">No graph data</div>'; return; }
-
-      // Simple layered layout using topological sort
-      const adj = {}, inDeg = {};
-      nodes.forEach(n => { adj[n.id] = []; inDeg[n.id] = 0; });
-      edges.forEach(e => { if (adj[e.from]) adj[e.from].push(e.to); inDeg[e.to] = (inDeg[e.to] || 0) + 1; });
-
-      // BFS layers
-      const layers = []; const visited = new Set();
-      let queue = nodes.filter(n => (inDeg[n.id] || 0) === 0).map(n => n.id);
-      while (queue.length) {
-        layers.push([...queue]); const next = [];
-        queue.forEach(id => { visited.add(id); (adj[id] || []).forEach(to => { inDeg[to]--; if (inDeg[to] <= 0 && !visited.has(to)) next.push(to); }); });
-        queue = [...new Set(next)];
-      }
-      // Add unvisited nodes
-      nodes.forEach(n => { if (!visited.has(n.id)) { if (!layers.length) layers.push([]); layers[layers.length - 1].push(n.id); } });
-
-      const nodeMap = {}; nodes.forEach(n => nodeMap[n.id] = n);
-      const colW = 140, rowH = 50, padX = 80, padY = 30;
-      const maxPerLayer = Math.max(...layers.map(l => l.length), 1);
-      const svgW = layers.length * colW + padX * 2;
-      const svgH = maxPerLayer * rowH + padY * 2;
-      const pos = {};
-      layers.forEach((layer, li) => {
-        const offset = (maxPerLayer - layer.length) * rowH / 2;
-        layer.forEach((id, ni) => { pos[id] = { x: padX + li * colW, y: padY + offset + ni * rowH }; });
-      });
-
-      const statusColor = { pending: '#42a5f5', running: '#ffa726', completed: '#66bb6a', failed: '#ef5350' };
-      let svg = '<svg width="' + svgW + '" height="' + svgH + '" xmlns="http://www.w3.org/2000/svg">';
-      // Edges
-      edges.forEach(e => {
-        const from = pos[e.from], to = pos[e.to];
-        if (from && to) svg += '<line x1="' + (from.x + 90) + '" y1="' + (from.y + 15) + '" x2="' + to.x + '" y2="' + (to.y + 15) + '" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>';
-      });
-      svg += '<defs><marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#555"/></marker></defs>';
-      // Nodes
-      nodes.forEach(n => {
-        const p = pos[n.id]; if (!p) return;
-        const c = statusColor[n.status] || '#777';
-        svg += '<rect x="' + p.x + '" y="' + p.y + '" width="90" height="30" rx="5" fill="' + c + '22" stroke="' + c + '" stroke-width="2"/>';
-        const label = String(n.id).length > 12 ? String(n.id).slice(0, 11) + '…' : String(n.id);
-        svg += '<text x="' + (p.x + 45) + '" y="' + (p.y + 19) + '" text-anchor="middle" fill="' + c + '" font-size="10" font-weight="600">' + esc(label) + '</text>';
-      });
-      svg += '</svg>';
-      container.innerHTML = svg;
-    }
-
-    // --- Timeline ---
-    function renderTimeline(data) {
-      const container = document.getElementById('timeline-container');
-      const tasks = (data.tasks || []).filter(t => t.startTime);
-      if (!tasks.length) { container.innerHTML = '<div class="empty-msg">No timeline data</div>'; return; }
-
-      const times = tasks.map(t => [new Date(t.startTime).getTime(), t.endTime ? new Date(t.endTime).getTime() : Date.now()]);
-      const minT = Math.min(...times.map(t => t[0]));
-      const maxT = Math.max(...times.map(t => t[1]));
-      const range = maxT - minT || 1;
-      const statusColor = { pending: '#42a5f5', running: '#ffa726', completed: '#66bb6a', failed: '#ef5350' };
-
-      container.innerHTML = tasks.map((t, i) => {
-        const s = new Date(t.startTime).getTime();
-        const e = t.endTime ? new Date(t.endTime).getTime() : Date.now();
-        const left = ((s - minT) / range * 100).toFixed(2);
-        const width = (((e - s) / range) * 100).toFixed(2);
-        const c = statusColor[t.status] || '#777';
-        const dur = ((e - s) / 1000).toFixed(1) + 's';
-        return '<div class="timeline-row"><span class="timeline-label" title="' + esc(String(t.id)) + '">' + esc(String(t.id)) + '</span><div class="timeline-track"><div class="timeline-bar" style="left:' + left + '%;width:' + width + '%;background:' + c + '" title="' + dur + '"></div></div></div>';
-      }).join('');
-    }
-
-    // --- Logs ---
-    function addLogEntry(entry, bulk) {
-      if (!entry) return;
-      const svc = entry.service || 'unknown';
-      if (!knownServices.has(svc)) {
-        knownServices.add(svc);
-        const sel = document.getElementById('svc-filter');
-        const opt = document.createElement('option'); opt.value = svc; opt.textContent = svc; sel.appendChild(opt);
-      }
-      logEntries.unshift(entry);
-      if (logEntries.length > 200) logEntries.pop();
-      if (!bulk) renderLogEntry(entry, true);
-    }
-
-    function renderLogEntry(entry, prepend) {
-      const container = document.getElementById('log-entries');
-      const div = document.createElement('div');
-      const level = entry.level || 'info';
-      div.className = 'log-entry log-' + level;
-      div.dataset.level = level;
-      div.dataset.service = entry.service || '';
-      const time = entry.timestamp ? new Date(entry.timestamp).toLocaleTimeString() : '';
-      div.innerHTML = '<span class="log-time">' + time + '</span><span class="log-svc">' + esc(entry.service || '') + '</span><span>' + esc(entry.message || '') + '</span>';
-      if (prepend) container.insertBefore(div, container.firstChild); else container.appendChild(div);
-      applyLogFilterToEntry(div);
-    }
-
-    function renderAllLogs() {
-      document.getElementById('log-entries').innerHTML = '';
-      logEntries.forEach(e => renderLogEntry(e, false));
-      updateLogCount();
-    }
-
-    function applyLogFilters() {
-      renderAllLogs();
-    }
-
-    function applyLogFilterToEntry(div) {
-      let show = logFilters[div.dataset.level] && (!logFilters.service || div.dataset.service === logFilters.service);
-      if (show && logFilters.search) {
-        const searchLower = logFilters.search.toLowerCase();
-        const text = div.textContent.toLowerCase();
-        show = text.includes(searchLower);
-      }
-      div.classList.toggle('log-hidden', !show);
-    }
-
-    function updateLogCount() {
-      const total = logEntries.length;
-      const visible = document.querySelectorAll('#log-entries .log-entry:not(.log-hidden)').length;
-      document.getElementById('log-count').textContent = '(Showing ' + visible + '/' + total + ')';
-    }
-
-    // Load filters from localStorage
-    function loadFiltersFromStorage() {
-      try {
-        const saved = localStorage.getItem('aad-log-filters');
-        if (saved) {
-          const parsed = JSON.parse(saved);
-          logFilters = { ...logFilters, ...parsed };
-          document.querySelectorAll('.log-filters input[data-level]').forEach(cb => {
-            cb.checked = logFilters[cb.dataset.level] !== false;
-          });
-          const svcSelect = document.getElementById('svc-filter');
-          if (svcSelect && logFilters.service) svcSelect.value = logFilters.service;
-          const searchInput = document.getElementById('log-search');
-          if (searchInput && logFilters.search) searchInput.value = logFilters.search;
-        }
-      } catch (e) { console.error('Failed to load filters:', e); }
-    }
-
-    // Save filters to localStorage
-    function saveFiltersToStorage() {
-      try {
-        localStorage.setItem('aad-log-filters', JSON.stringify(logFilters));
-      } catch (e) { console.error('Failed to save filters:', e); }
-    }
-
-    // Reset filters
-    function resetFilters() {
-      logFilters = { info: true, warn: true, error: true, service: '', search: '' };
-      document.querySelectorAll('.log-filters input[data-level]').forEach(cb => {
-        cb.checked = true;
-      });
-      document.getElementById('svc-filter').value = '';
-      document.getElementById('log-search').value = '';
-      saveFiltersToStorage();
-      applyLogFilters();
-    }
-
-    // Filter event listeners
-    document.querySelectorAll('.log-filters input[data-level]').forEach(cb => {
-      cb.addEventListener('change', () => {
-        logFilters[cb.dataset.level] = cb.checked;
-        saveFiltersToStorage();
-        applyLogFilters();
-      });
-    });
-    document.getElementById('svc-filter').addEventListener('change', function() {
-      logFilters.service = this.value;
-      saveFiltersToStorage();
-      applyLogFilters();
-    });
-    document.getElementById('log-search').addEventListener('input', function() {
-      logFilters.search = this.value;
-      saveFiltersToStorage();
-      applyLogFilters();
-    });
-    document.getElementById('filter-reset').addEventListener('click', resetFilters);
-
-    // --- SSE ---
-    let evtSource;
-    function connectSSE() {
-      if (evtSource) { try { evtSource.close(); } catch(e){} }
-      evtSource = new EventSource('/events/all');
-
-      evtSource.addEventListener('open', () => {
-        reconnectAttempts = 0;
-        sseStatus = 'connected';
-        updateAllActivityColumns();
-      });
-
-      evtSource.addEventListener('heartbeat', () => {
-        sseStatus = 'connected';
-        updateAllActivityColumns();
-      });
-
-      evtSource.addEventListener('message', (e) => {
-        try {
-          const ev = JSON.parse(e.data);
-          switch (ev.type) {
-            case 'log:entry': addLogEntry(ev.entry || ev); break;
-            case 'progress:updated': updateProgress(ev.state ? { progress: ev.state, percentComplete: ev.percentComplete } : ev); break;
-            case 'execution:phase:started':
-              taskPhases[ev.taskId] = { phase: ev.phase, status: 'running' };
-              updateActivityColumn(ev.taskId);
-              break;
-            case 'execution:phase:completed':
-              taskPhases[ev.taskId] = { phase: ev.phase, status: 'completed' };
-              updateActivityColumn(ev.taskId);
-              break;
-            case 'execution:phase:failed':
-              taskPhases[ev.taskId] = { phase: ev.phase, status: 'failed' };
-              updateActivityColumn(ev.taskId);
-              break;
-            case 'task:dispatched':
-            case 'task:completed':
-            case 'task:failed':
-              if (ev.task) { updateTaskInList(ev.task.taskId, ev.task); }
-              // Refresh progress
-              fetch('/api/progress').then(r=>r.json()).then(updateProgress).catch(()=>{});
-              fetch('/api/timeline').then(r=>r.json()).then(renderTimeline).catch(()=>{});
-              break;
-            case 'worker:idle':
-            case 'worker:busy':
-              fetch('/api/workers').then(r=>r.json()).then(renderWorkers).catch(()=>{});
-              break;
-          }
-        } catch (err) { console.error('SSE parse error:', err); }
-      });
-
-      evtSource.addEventListener('error', () => {
-        reconnectAttempts++;
-        sseStatus = reconnectAttempts > 3 ? 'disconnected' : 'reconnecting';
-        updateAllActivityColumns();
-        evtSource.close();
-        setTimeout(connectSSE, Math.min(reconnectAttempts * 3000, 9000));
-      });
-    }
-
-    // --- Util ---
-    function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
-
-    // Init
-    loadFiltersFromStorage();
-    loadAll();
-    connectSSE();
-  </script>
+  <script type="module">class f{baseUrl;constructor(t){this.baseUrl=t}async getProgress(){let t=await fetch(`${this.baseUrl}/api/progress`);if(!t.ok)throw Error(`Failed to fetch progress: ${t.statusText}`);return t.json()}async getWorkers(){let t=await fetch(`${this.baseUrl}/api/workers`);if(!t.ok)throw Error(`Failed to fetch workers: ${t.statusText}`);return t.json()}async getTasks(){let t=await fetch(`${this.baseUrl}/api/tasks`);if(!t.ok)throw Error(`Failed to fetch tasks: ${t.statusText}`);return t.json()}async getGraph(){let t=await fetch(`${this.baseUrl}/api/graph`);if(!t.ok)throw Error(`Failed to fetch graph: ${t.statusText}`);return t.json()}async getTimeline(){let t=await fetch(`${this.baseUrl}/api/timeline`);if(!t.ok)throw Error(`Failed to fetch timeline: ${t.statusText}`);return t.json()}async getLogs(){let t=await fetch(`${this.baseUrl}/api/logs`);if(!t.ok)throw Error(`Failed to fetch logs: ${t.statusText}`);let i=await t.json();return Array.isArray(i)?i:i.entries||[]}async getTaskLogs(t){let i=await fetch(`${this.baseUrl}/api/tasks/${t}/logs`);if(!i.ok)throw Error(`Failed to fetch task logs: ${i.statusText}`);return i.json()}}class c{url;onEvent;eventSource=null;status="disconnected";reconnectAttempts=0;reconnectTimer=null;connectionChangeListeners=[];constructor(t,i){this.url=t;this.onEvent=i}connect(){if(this.eventSource)try{this.eventSource.close()}catch(t){}this.eventSource=new EventSource(this.url),this.eventSource.addEventListener("open",()=>{this.reconnectAttempts=0,this.setStatus("connected")}),this.eventSource.addEventListener("heartbeat",()=>{this.setStatus("connected")}),this.eventSource.addEventListener("message",(t)=>{try{let i=JSON.parse(t.data);this.onEvent(i)}catch(i){console.error("SSE parse error:",i)}}),this.eventSource.addEventListener("error",()=>{this.reconnectAttempts++;let t=this.reconnectAttempts>3?"disconnected":"reconnecting";if(this.setStatus(t),this.eventSource)this.eventSource.close();let i=Math.min(this.reconnectAttempts*3000,9000);this.reconnectTimer=setTimeout(()=>{this.connect()},i)})}disconnect(){if(this.reconnectTimer)clearTimeout(this.reconnectTimer),this.reconnectTimer=null;if(this.eventSource){try{this.eventSource.close()}catch(t){}this.eventSource=null}this.setStatus("disconnected")}isConnected(){return this.status==="connected"}getStatus(){return this.status}getReconnectAttempts(){return this.reconnectAttempts}onConnectionChange(t){this.connectionChangeListeners.push(t)}setStatus(t){if(this.status!==t)this.status=t,this.connectionChangeListeners.forEach((i)=>{try{i(t)}catch(n){console.error("Connection change listener error:",n)}})}}class x{state={progress:{pending:0,running:0,completed:0,failed:0,total:0},tasks:[],workers:[],graph:{nodes:[],edges:[]},timeline:{tasks:[]},logs:[],taskPhases:{}};listeners=[];getState(){return{...this.state}}updateProgress(t){this.state.progress=t,this.notify()}updateTasks(t){this.state.tasks=t,this.notify()}updateTask(t,i){let n=this.state.tasks.findIndex((e)=>e.taskId===t);if(n>=0)this.state.tasks[n]={...this.state.tasks[n],...i},this.notify()}updateWorkers(t){this.state.workers=t,this.notify()}updateGraph(t){this.state.graph=t,this.notify()}updateTimeline(t){this.state.timeline=t,this.notify()}addLog(t){if(this.state.logs.unshift(t),this.state.logs.length>200)this.state.logs=this.state.logs.slice(0,200);this.notify()}updateTaskPhase(t,i,n){this.state.taskPhases[t]={phase:i,status:n},this.notify()}subscribe(t){return this.listeners.push(t),()=>{let i=this.listeners.indexOf(t);if(i>=0)this.listeners.splice(i,1)}}notify(){let t=this.getState();this.listeners.forEach((i)=>{try{i(t)}catch(n){console.error("State listener error:",n)}})}}function v(t){let i=t.total||1,n=i>0?Math.round(t.completed/i*100):0,e=document.getElementById("pct-display"),o=document.getElementById("progress-fill"),d=document.getElementById("s-pending"),s=document.getElementById("s-running"),l=document.getElementById("s-completed"),p=document.getElementById("s-failed");if(e)e.textContent=`${n}%`;if(o)o.style.width=`${n}%`;if(d)d.textContent=String(t.pending||0);if(s)s.textContent=String(t.running||0);if(l)l.textContent=String(t.completed||0);if(p)p.textContent=String(t.failed||0)}function E(t){let i=document.createElement("div");return i.textContent=t,i.innerHTML}function $(t){let i=document.getElementById("worker-list"),n=document.getElementById("workers-count");if(!i)return;if(n)n.textContent=`(${t.length})`;if(!t.length){i.innerHTML='<div class="empty-msg">No workers</div>';return}i.innerHTML=t.map((e)=>{let o=e.currentTask?`<span class="worker-task">Task: ${E(String(e.currentTask))}</span>`:"";return`
+        <div class="worker-item">
+          <span class="worker-dot ${e.status}"></span>
+          <span class="worker-name">${E(String(e.id))}</span>
+          ${o}
+          <span class="badge badge-${e.status}" style="margin-left:auto">${e.status}</span>
+        </div>
+      `}).join("")}function y(t){let i=document.createElement("div");return i.textContent=t,i.innerHTML}class u{panelEl=null;overlayEl=null;constructor(){this.createPanel(),this.setupEventListeners()}createPanel(){this.overlayEl=document.createElement("div"),this.overlayEl.className="task-detail-overlay",this.overlayEl.style.cssText=`
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.7);
+      z-index: 1000;
+      cursor: pointer;
+    `,this.panelEl=document.createElement("div"),this.panelEl.className="task-detail-panel",this.panelEl.style.cssText=`
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: #2d2d2d;
+      border-radius: 10px;
+      padding: 24px;
+      max-width: 600px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
+      z-index: 1001;
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+    `,document.body.appendChild(this.overlayEl),document.body.appendChild(this.panelEl)}setupEventListeners(){this.overlayEl?.addEventListener("click",()=>this.close()),document.addEventListener("keydown",(t)=>{if(t.key==="Escape"&&this.isOpen())this.close()})}show(t,i){if(!this.panelEl||!this.overlayEl)return;let n={red:"Red (Tests)",green:"Green (Implementation)",verify:"Verify",review:"Review",merge:"Merge"},e=i?`<div class="phase-info">
+           <strong>Current Phase:</strong>
+           <span class="activity-phase-${i.phase}">
+             ${y(n[i.phase]||i.phase)}
+             (${i.status})
+           </span>
+         </div>`:"",o=t.startTime?new Date(t.startTime).toLocaleString():"—",d=t.endTime?new Date(t.endTime).toLocaleString():"—",s=this.calculateDuration(t);this.panelEl.innerHTML=`
+      <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px;">
+        <h2 style="color: #4fc3f7; margin: 0; font-size: 18px;">Task Details</h2>
+        <button class="close-btn" style="background: #ef5350; color: white; border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 14px; font-weight: 600;">Close</button>
+      </div>
+
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <div>
+          <div style="color: #9e9e9e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Task ID</div>
+          <div style="font-family: monospace; font-size: 13px; color: #e0e0e0;">${y(String(t.taskId))}</div>
+        </div>
+
+        <div>
+          <div style="color: #9e9e9e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Title</div>
+          <div style="font-size: 15px; color: #e0e0e0; font-weight: 500;">${y(t.title||"—")}</div>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+          <div>
+            <div style="color: #9e9e9e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Status</div>
+            <div><span class="badge badge-${t.status}">${t.status}</span></div>
+          </div>
+          <div>
+            <div style="color: #9e9e9e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Priority</div>
+            <div style="font-size: 14px; color: #e0e0e0;">${t.priority||0}</div>
+          </div>
+        </div>
+
+        ${e}
+
+        <div>
+          <div style="color: #9e9e9e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Dependencies</div>
+          <div style="font-size: 13px; color: #e0e0e0;">
+            ${t.dependsOn&&t.dependsOn.length>0?t.dependsOn.map((p)=>`<code style="background: #3a3a3a; padding: 2px 6px; border-radius: 3px; font-family: monospace; font-size: 11px;">${y(String(p))}</code>`).join(" "):"—"}
+          </div>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+          <div>
+            <div style="color: #9e9e9e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Start Time</div>
+            <div style="font-size: 12px; color: #e0e0e0;">${o}</div>
+          </div>
+          <div>
+            <div style="color: #9e9e9e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">End Time</div>
+            <div style="font-size: 12px; color: #e0e0e0;">${d}</div>
+          </div>
+        </div>
+
+        ${s?`<div>
+          <div style="color: #9e9e9e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Duration</div>
+          <div style="font-size: 13px; color: #66bb6a; font-weight: 600;">${s}</div>
+        </div>`:""}
+      </div>
+    `;let l=this.panelEl.querySelector(".close-btn");if(l)l.addEventListener("click",()=>this.close());this.overlayEl.style.display="block",this.panelEl.style.display="block"}close(){if(this.overlayEl)this.overlayEl.style.display="none";if(this.panelEl)this.panelEl.style.display="none"}isOpen(){return this.panelEl?.style.display==="block"}calculateDuration(t){if(!t.startTime)return null;let i=new Date(t.startTime).getTime(),e=(t.endTime?new Date(t.endTime).getTime():Date.now())-i,o=Math.floor(e/1000),d=Math.floor(o/60),s=Math.floor(d/60);if(s>0)return`${s}h ${d%60}m`;else if(d>0)return`${d}m ${o%60}s`;else return`${o}s`}}function m(t){let i=document.createElement("div");return i.textContent=t,i.innerHTML}function L(t,i,n){if(t.status==="running"){let e=i[t.taskId];if(e){let d={red:"Red (Tests)",green:"Green (Impl)",verify:"Verify",review:"Review",merge:"Merge"}[e.phase]||e.phase,s=e.status==="completed"?"✓ ":e.status==="failed"?"✗ ":"";return`<span class="activity-phase-${e.phase}">${s}${m(d)}</span>`}return'<span class="activity-phase-green">Running</span>'}else if(n==="connected")return'<span class="activity-connected">Connected</span>';else if(n==="reconnecting")return'<span class="activity-reconnecting">Reconnecting...</span>';else return'<span class="activity-disconnected">Disconnected</span>'}var M=new u;function g(t,i,n){let e=document.getElementById("task-tbody"),o=document.getElementById("tasks-count");if(!e)return;if(o)o.textContent=`(${t.length})`;if(!t.length){e.innerHTML='<tr><td colspan="6" class="empty-msg">No tasks</td></tr>';return}e.innerHTML=t.map((d)=>{let s=(d.dependsOn||[]).map((p)=>m(String(p))).join(", ")||"—",l=L(d,i,n);return`
+        <tr data-task-id="${m(String(d.taskId))}" style="cursor: pointer;">
+          <td style="font-family:monospace;font-size:11px">${m(String(d.taskId))}</td>
+          <td>${m(d.title||"—")}</td>
+          <td><span class="badge badge-${d.status}">${d.status}</span></td>
+          <td class="activity-cell">${l}</td>
+          <td class="priority">${d.priority||0}</td>
+          <td class="deps">${s}</td>
+        </tr>
+      `}).join(""),e.querySelectorAll("tr[data-task-id]").forEach((d)=>{d.addEventListener("click",()=>{let s=d.dataset.taskId,l=t.find((p)=>String(p.taskId)===s);if(l){let p=i[l.taskId];M.show(l,p)}})})}function b(t){let i=document.createElement("div");return i.textContent=t,i.innerHTML}class h{filters={info:!0,warn:!0,error:!0,service:"",search:""};autoScroll=!0;constructor(){this.setupEventListeners(),this.loadFiltersFromStorage()}setupEventListeners(){document.querySelectorAll(".log-filters input[data-level]").forEach((o)=>{o.addEventListener("change",()=>{let d=o,s=d.dataset.level;this.filters[s]=d.checked,this.saveFiltersToStorage()})});let t=document.getElementById("svc-filter");if(t)t.addEventListener("change",()=>{this.filters.service=t.value,this.saveFiltersToStorage()});let i=document.getElementById("log-search");if(i)i.addEventListener("input",()=>{this.filters.search=i.value,this.saveFiltersToStorage()});let n=document.getElementById("filter-reset");if(n)n.addEventListener("click",()=>{this.resetFilters()});let e=document.getElementById("log-entries");if(e)e.addEventListener("scroll",()=>{let o=e.scrollHeight-e.scrollTop<=e.clientHeight+10;this.autoScroll=o})}renderLog(t,i=!0){let n=document.getElementById("log-entries");if(!n)return;let e=document.createElement("div"),o=t.level||"info";e.className=`log-entry log-${o}`,e.dataset.level=o,e.dataset.service=t.service||"";let d=t.timestamp?new Date(t.timestamp).toLocaleTimeString():"";if(e.innerHTML=`
+      <span class="log-time">${d}</span>
+      <span class="log-svc">${b(t.service||"")}</span>
+      <span>${b(t.message||"")}</span>
+    `,i)n.insertBefore(e,n.firstChild);else n.appendChild(e);if(this.applyFilterToEntry(e),this.autoScroll&&i)n.scrollTop=0;this.updateLogCount()}renderAllLogs(t){let i=document.getElementById("log-entries");if(!i)return;i.innerHTML="",t.forEach((n)=>this.renderLog(n,!1)),this.updateLogCount(),this.updateServiceFilter(t)}applyFilterToEntry(t){let i=t.dataset.level,n=i?this.filters[i]:!1;if(n&&this.filters.service)n=t.dataset.service===this.filters.service;if(n&&this.filters.search){let e=this.filters.search.toLowerCase();n=(t.textContent?.toLowerCase()||"").includes(e)}t.classList.toggle("log-hidden",!n)}updateLogCount(){let t=document.getElementById("log-entries"),i=document.getElementById("log-count");if(!t||!i)return;let n=t.querySelectorAll(".log-entry").length,e=t.querySelectorAll(".log-entry:not(.log-hidden)").length;i.textContent=`(Showing ${e}/${n})`}updateServiceFilter(t){let i=document.getElementById("svc-filter");if(!i)return;let n=new Set(t.map((o)=>o.service).filter(Boolean)),e=i.value;if(i.innerHTML='<option value="">All Services</option>',n.forEach((o)=>{let d=document.createElement("option");d.value=o,d.textContent=o,i.appendChild(d)}),e)i.value=e}resetFilters(){this.filters={info:!0,warn:!0,error:!0,service:"",search:""},document.querySelectorAll(".log-filters input[data-level]").forEach((n)=>{n.checked=!0});let t=document.getElementById("svc-filter");if(t)t.value="";let i=document.getElementById("log-search");if(i)i.value="";this.saveFiltersToStorage(),this.reapplyFilters()}reapplyFilters(){let t=document.getElementById("log-entries");if(!t)return;t.querySelectorAll(".log-entry").forEach((i)=>{this.applyFilterToEntry(i)}),this.updateLogCount()}loadFiltersFromStorage(){try{let t=localStorage.getItem("aad-log-filters");if(t){let i=JSON.parse(t);this.filters={...this.filters,...i},document.querySelectorAll(".log-filters input[data-level]").forEach((o)=>{let d=o,s=d.dataset.level;d.checked=this.filters[s]!==!1});let n=document.getElementById("svc-filter");if(n&&this.filters.service)n.value=this.filters.service;let e=document.getElementById("log-search");if(e&&this.filters.search)e.value=this.filters.search}}catch(t){console.error("Failed to load filters:",t)}}saveFiltersToStorage(){try{localStorage.setItem("aad-log-filters",JSON.stringify(this.filters))}catch(t){console.error("Failed to save filters:",t)}this.reapplyFilters()}}var z="http://localhost:7333",r=new f(z),a=new x,T=new c(`${z}/events/all`,P),D=new h;a.subscribe((t)=>{v(t.progress),$(t.workers),g(t.tasks,t.taskPhases,T.getStatus())});function P(t){switch(t.type){case"log:entry":a.addLog(t.entry),D.renderLog(t.entry,!0);break;case"progress:updated":a.updateProgress(t.state);break;case"execution:phase:started":a.updateTaskPhase(t.taskId,t.phase,"running");break;case"execution:phase:completed":a.updateTaskPhase(t.taskId,t.phase,"completed");break;case"execution:phase:failed":a.updateTaskPhase(t.taskId,t.phase,"failed");break;case"task:dispatched":case"task:completed":case"task:failed":if(t.task)a.updateTask(t.task.taskId,t.task);O(),G();break;case"worker:idle":case"worker:busy":B();break;case"heartbeat":break}}async function S(){try{let[t,i,n,e,o,d]=await Promise.all([r.getProgress(),r.getWorkers(),r.getTasks(),r.getGraph(),r.getTimeline(),r.getLogs()]);a.updateProgress(t.progress),a.updateWorkers(i.workers),a.updateTasks(n.tasks),a.updateGraph(e),a.updateTimeline(o),d.forEach((s)=>a.addLog(s)),D.renderAllLogs(d)}catch(t){console.error("Failed to load initial data:",t)}}async function O(){try{let t=await r.getProgress();a.updateProgress(t.progress)}catch(t){console.error("Failed to refresh progress:",t)}}async function B(){try{let t=await r.getWorkers();a.updateWorkers(t.workers)}catch(t){console.error("Failed to refresh workers:",t)}}async function G(){try{let t=await r.getTimeline();a.updateTimeline(t)}catch(t){console.error("Failed to refresh timeline:",t)}}S();T.connect();T.onConnectionChange((t)=>{console.log("SSE connection status:",t),g(a.getState().tasks,a.getState().taskPhases,t)});export{a as store,T as sseClient,r as apiClient};
+</script>
 </body>
 </html>