From 03f8b0e8b1aef2429f825b300c427147c30d4b0b Mon Sep 17 00:00:00 2001
From: Claudomator Agent <agent@claudomator>
Date: Fri, 13 Mar 2026 09:31:31 +0000
Subject: feat: reorganize web UI to 7-tab layout (Queue, Interrupted, Ready,
 Running, All, Stats, Settings)

- Replace Tasks/Active tabs with Queue (QUEUED+PENDING), Interrupted, Ready top-level tabs
- Add All tab (COMPLETED, TIMED_OUT, BUDGET_EXCEEDED within last 24h) and Settings placeholder
- Export filterQueueTasks, filterReadyTasks, filterAllDoneTasks from app.js
- Refactor poll() to dispatch to active tab's render function instead of always rendering all panels
- Add renderQueuePanel, renderInterruptedPanel, renderReadyPanel, renderAllPanel helpers
- Add tests in web/test/tab-filters.test.mjs covering all new filter functions (16 tests)
- All 165 JS tests and all Go tests pass

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/index.html | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

(limited to 'web/index.html')

diff --git a/web/index.html b/web/index.html
index 438216f..fd7228a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -15,31 +15,37 @@
     <button id="btn-new-task" class="btn-primary">New Task</button>
   </header>
   <nav class="tab-bar">
-    <button class="tab active" data-tab="tasks">Tasks</button>
-    <button class="tab" data-tab="active">Active</button>
+    <button class="tab active" data-tab="queue">Queue</button>
+    <button class="tab" data-tab="interrupted">Interrupted</button>
+    <button class="tab" data-tab="ready">Ready</button>
     <button class="tab" data-tab="running">Running</button>
+    <button class="tab" data-tab="all">All</button>
     <button class="tab" data-tab="stats">Stats</button>
+    <button class="tab" data-tab="settings">Settings</button>
   </nav>
   <main id="app">
-    <div data-panel="tasks">
-      <div class="task-list-toolbar">
-        <button class="filter-tab active" data-filter="active">Active</button>
-        <button class="filter-tab" data-filter="interrupted">Interrupted</button>
-        <button class="filter-tab" data-filter="done">Done</button>
-        <button class="filter-tab" data-filter="all">All</button>
-      </div>
-      <div class="task-list">
-        <div id="loading">Loading tasks…</div>
+    <div data-panel="queue">
+      <div class="panel-task-list">
+        <div class="task-empty">Loading…</div>
       </div>
     </div>
-    <div data-panel="active" hidden>
-      <div class="active-task-list"></div>
+    <div data-panel="interrupted" hidden>
+      <div class="panel-task-list"></div>
+    </div>
+    <div data-panel="ready" hidden>
+      <div class="panel-task-list"></div>
     </div>
     <div data-panel="running" hidden>
       <div class="running-current"></div>
       <div class="running-history"></div>
     </div>
+    <div data-panel="all" hidden>
+      <div class="all-history"></div>
+    </div>
     <div data-panel="stats" hidden></div>
+    <div data-panel="settings" hidden>
+      <p class="task-meta" style="padding:1rem">Settings coming soon.</p>
+    </div>
   </main>
 
   <dialog id="task-modal">
-- 
cgit v1.2.3