From 62068d8335af3b12206a4a867f38c6bf6a0f2325 Mon Sep 17 00:00:00 2001
From: Claudomator Agent <agent@claudomator>
Date: Sun, 15 Mar 2026 01:35:13 +0000
Subject: feat: add task count badges to interrupted, ready, and running tabs

- Add computeTabBadgeCounts(tasks) exported pure function
- Add updateTabBadges(tasks) that updates badge spans in tab buttons
- Call updateTabBadges on every poll regardless of active tab
- Add .tab-count-badge spans to interrupted/ready/running tab buttons in HTML
- Add CSS for .tab-count-badge pill styling (hidden when count is zero)
- Add 11 tests in web/test/tab-badges.test.mjs covering all states

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/app.js                   |  42 +++++++++++++++++
 web/index.html               |   6 +--
 web/style.css                |  19 ++++++++
 web/test/tab-badges.test.mjs | 110 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 174 insertions(+), 3 deletions(-)
 create mode 100644 web/test/tab-badges.test.mjs

(limited to 'web')

diff --git a/web/app.js b/web/app.js
index bca41fa..a7c18b6 100644
--- a/web/app.js
+++ b/web/app.js
@@ -339,6 +339,46 @@ export function setTaskFilterTab(tab) {
   localStorage.setItem('taskFilterTab', tab);
 }
 
+// ── Tab badge counts ───────────────────────────────────────────────────────────
+
+/**
+ * Computes badge counts for the 'interrupted', 'ready', and 'running' tabs.
+ * Returns { interrupted: N, ready: N, running: N }.
+ */
+export function computeTabBadgeCounts(tasks) {
+  let interrupted = 0;
+  let ready = 0;
+  let running = 0;
+  for (const t of tasks) {
+    if (INTERRUPTED_STATES.has(t.state)) interrupted++;
+    if (t.state === 'READY') ready++;
+    if (t.state === 'RUNNING') running++;
+  }
+  return { interrupted, ready, running };
+}
+
+/**
+ * Updates the badge count spans inside the tab buttons for
+ * 'interrupted', 'ready', and 'running'.
+ * Badge is hidden (display:none) when count is zero.
+ */
+export function updateTabBadges(tasks, doc = (typeof document !== 'undefined' ? document : null)) {
+  if (!doc) return;
+  const counts = computeTabBadgeCounts(tasks);
+  for (const [tab, count] of Object.entries(counts)) {
+    const btn = doc.querySelector(`.tab[data-tab="${tab}"]`);
+    if (!btn) continue;
+    let badge = btn.querySelector('.tab-count-badge');
+    if (!badge) {
+      badge = doc.createElement('span');
+      badge.className = 'tab-count-badge';
+      btn.appendChild(badge);
+    }
+    badge.textContent = String(count);
+    badge.hidden = count === 0;
+  }
+}
+
 // ── Stats computations ─────────────────────────────────────────────────────────
 
 /**
@@ -961,6 +1001,8 @@ async function poll() {
     const tasks = await fetchTasks();
     if (isUserEditing()) return;
 
+    updateTabBadges(tasks);
+
     const activeTab = getActiveTab();
     switch (activeTab) {
       case 'queue':
diff --git a/web/index.html b/web/index.html
index 19cba2c..59bc56e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -23,9 +23,9 @@
   </header>
   <nav class="tab-bar">
     <button class="tab active" data-tab="queue" title="Queue">⏳</button>
-    <button class="tab" data-tab="interrupted" title="Interrupted">⚠️</button>
-    <button class="tab" data-tab="ready" title="Ready">✅</button>
-    <button class="tab" data-tab="running" title="Running">▶️</button>
+    <button class="tab" data-tab="interrupted" title="Interrupted">⚠️<span class="tab-count-badge" hidden></span></button>
+    <button class="tab" data-tab="ready" title="Ready">✅<span class="tab-count-badge" hidden></span></button>
+    <button class="tab" data-tab="running" title="Running">▶️<span class="tab-count-badge" hidden></span></button>
     <button class="tab" data-tab="all" title="All">☰</button>
     <button class="tab" data-tab="stats" title="Stats">📊</button>
     <button class="tab" data-tab="settings" title="Settings">⚙️</button>
diff --git a/web/style.css b/web/style.css
index ee1b69c..31f929e 100644
--- a/web/style.css
+++ b/web/style.css
@@ -111,6 +111,25 @@ header h1 {
   border-bottom-color: var(--accent);
 }
 
+.tab-count-badge {
+  display: inline-block;
+  margin-left: 0.3em;
+  padding: 0 0.4em;
+  border-radius: 999px;
+  font-size: 0.7em;
+  font-weight: 700;
+  line-height: 1.5;
+  background: var(--accent);
+  color: #fff;
+  vertical-align: middle;
+  min-width: 1.4em;
+  text-align: center;
+}
+
+.tab-count-badge[hidden] {
+  display: none;
+}
+
 /* Main layout */
 main {
   max-width: 640px;
diff --git a/web/test/tab-badges.test.mjs b/web/test/tab-badges.test.mjs
new file mode 100644
index 0000000..c07338f
--- /dev/null
+++ b/web/test/tab-badges.test.mjs
@@ -0,0 +1,110 @@
+// tab-badges.test.mjs — TDD tests for computeTabBadgeCounts
+//
+// Tests the pure function that computes badge counts for the
+// 'interrupted', 'ready', and 'running' tabs.
+//
+// Run with: node --test web/test/tab-badges.test.mjs
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+// ── Inline implementation (will be replaced by import once exported) ───────────
+
+const INTERRUPTED_STATES = new Set(['CANCELLED', 'FAILED', 'BUDGET_EXCEEDED', 'BLOCKED']);
+
+function computeTabBadgeCounts(tasks) {
+  let interrupted = 0;
+  let ready = 0;
+  let running = 0;
+  for (const t of tasks) {
+    if (INTERRUPTED_STATES.has(t.state)) interrupted++;
+    if (t.state === 'READY') ready++;
+    if (t.state === 'RUNNING') running++;
+  }
+  return { interrupted, ready, running };
+}
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+function makeTask(state) {
+  return { id: state, name: `task-${state}`, state };
+}
+
+// ── Tests ──────────────────────────────────────────────────────────────────────
+
+describe('computeTabBadgeCounts', () => {
+  it('returns all zeros for empty task list', () => {
+    assert.deepEqual(computeTabBadgeCounts([]), { interrupted: 0, ready: 0, running: 0 });
+  });
+
+  it('counts RUNNING tasks', () => {
+    const tasks = [makeTask('RUNNING'), makeTask('RUNNING'), makeTask('QUEUED')];
+    const counts = computeTabBadgeCounts(tasks);
+    assert.equal(counts.running, 2);
+    assert.equal(counts.ready, 0);
+    assert.equal(counts.interrupted, 0);
+  });
+
+  it('counts READY tasks', () => {
+    const tasks = [makeTask('READY'), makeTask('READY'), makeTask('QUEUED')];
+    const counts = computeTabBadgeCounts(tasks);
+    assert.equal(counts.ready, 2);
+    assert.equal(counts.running, 0);
+    assert.equal(counts.interrupted, 0);
+  });
+
+  it('counts CANCELLED as interrupted', () => {
+    const counts = computeTabBadgeCounts([makeTask('CANCELLED')]);
+    assert.equal(counts.interrupted, 1);
+  });
+
+  it('counts FAILED as interrupted', () => {
+    const counts = computeTabBadgeCounts([makeTask('FAILED')]);
+    assert.equal(counts.interrupted, 1);
+  });
+
+  it('counts BUDGET_EXCEEDED as interrupted', () => {
+    const counts = computeTabBadgeCounts([makeTask('BUDGET_EXCEEDED')]);
+    assert.equal(counts.interrupted, 1);
+  });
+
+  it('counts BLOCKED as interrupted', () => {
+    const counts = computeTabBadgeCounts([makeTask('BLOCKED')]);
+    assert.equal(counts.interrupted, 1);
+  });
+
+  it('does not count COMPLETED as interrupted', () => {
+    const counts = computeTabBadgeCounts([makeTask('COMPLETED')]);
+    assert.equal(counts.interrupted, 0);
+  });
+
+  it('does not count TIMED_OUT as interrupted', () => {
+    const counts = computeTabBadgeCounts([makeTask('TIMED_OUT')]);
+    assert.equal(counts.interrupted, 0);
+  });
+
+  it('counts across multiple states simultaneously', () => {
+    const tasks = [
+      makeTask('RUNNING'),
+      makeTask('RUNNING'),
+      makeTask('READY'),
+      makeTask('CANCELLED'),
+      makeTask('FAILED'),
+      makeTask('BLOCKED'),
+      makeTask('QUEUED'),
+      makeTask('COMPLETED'),
+    ];
+    const counts = computeTabBadgeCounts(tasks);
+    assert.equal(counts.running, 2);
+    assert.equal(counts.ready, 1);
+    assert.equal(counts.interrupted, 3);
+  });
+
+  it('returns zero for a tab when no tasks match that state', () => {
+    const tasks = [makeTask('QUEUED'), makeTask('PENDING'), makeTask('COMPLETED')];
+    const counts = computeTabBadgeCounts(tasks);
+    assert.equal(counts.running, 0);
+    assert.equal(counts.ready, 0);
+    assert.equal(counts.interrupted, 0);
+  });
+});
-- 
cgit v1.2.3