From 040170e54adae3492badc8af7e32bed74547161c Mon Sep 17 00:00:00 2001
From: CyberSecurityUP <joasantonio108@gmail.com>
Date: Sun, 23 Aug 2026 14:27:27 -0300
Subject: [PATCH] fix(web): category master switch reads as partial, not off,
 when only some agents are deselected
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unchecking one agent in an 8-agent category (7/8 left on) rendered the
category header switch fully unchecked — visually indistinguishable from
'category disabled', even though 7 of 8 agents were still on. The
checkbox's checked state only had two positions; a partial selection had
nowhere to render but off.

Fix: set the master switch's .indeterminate property when 0 < selected <
total, with its own CSS state (grey track, thumb parked halfway) instead
of the on/off track+thumb. Clicking a checkbox out of indeterminate
selects everything, per browser default — unchanged behavior, just an
honest visual for the in-between state.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0129WdYHccPsH27k5GGuwijd
---
 web/public/app.js    | 8 +++++++-
 web/public/style.css | 3 +++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/public/app.js b/web/public/app.js
index b1a378f..5cb56ff 100644
--- a/web/public/app.js
+++ b/web/public/app.js
@@ -183,7 +183,13 @@ function renderBoard() {
       if (e.target.closest('.switch')) return;
       card.classList.toggle('collapsed');
     });
-    card.querySelector('.cat-toggle').addEventListener('change', (e) => {
+    const catToggle = card.querySelector('.cat-toggle');
+    // A partial selection (some but not all agents on) must look "partial",
+    // not "off" — an unchecked master switch reads as "category disabled"
+    // even when most of its agents are still on. Indeterminate = the middle
+    // state; clicking it from there selects everything (browser default).
+    catToggle.indeterminate = selCount > 0 && selCount < group.agents.length;
+    catToggle.addEventListener('change', (e) => {
       const on = e.target.checked;
       for (const a of group.agents) { if (on) state.selected.add(a.id); else state.selected.delete(a.id); }
       renderBoard();
diff --git a/web/public/style.css b/web/public/style.css
index 6fd1956..2fd4336 100644
--- a/web/public/style.css
+++ b/web/public/style.css
@@ -253,6 +253,9 @@ textarea { resize: vertical; min-height: 72px; }
 .switch .thumb { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
 .switch input:checked + .track { background: var(--accent); }
 .switch input:checked + .track + .thumb { transform: translateX(13px); }
+/* partial selection (some agents on, not all) — reads as "partial", not "off" */
+.switch input:indeterminate + .track { background: var(--border-strong); }
+.switch input:indeterminate + .track + .thumb { transform: translateX(7px); background: var(--accent); }
 
 .custom-leads { display: flex; flex-direction: column; gap: var(--sp-2); }
 .custom-lead-chip { display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px var(--sp-3); font-size: 12px; background: var(--surface-2); }