@yemi33/minions 0.1.2056 → 0.1.2057

package/dashboard/js/render-prs.js

@@ -86,13 +86,25 @@ function prRow(pr) {
   var observeBtn = '';
   var idMatch = typeof pr.id === 'string' ? pr.id.match(/^([^:]+):(.+)#(\d+)$/) : null;
   if (idMatch) {
-    observeBtn = '<button class="pr-observe-toggle ' + observeClass + '" '
+    // Real toggle-switch (W-mpof8qam000h62fb). Semantic <input type=checkbox>
+    // inside a <label> gives free keyboard + screen-reader support; clicks on
+    // the track or knob flip the state via the wrapping label. Data-attrs stay
+    // on the input so togglePrObserve(this) keeps working unchanged.
+    observeBtn = '<label class="pr-observe-switch ' + observeClass + '" '
+      + 'title="' + escapeHtml(observeTitle) + '" '
+      + 'onclick="event.stopPropagation()">'
+      + '<input type="checkbox" class="pr-observe-switch__input"'
+      + (observe ? ' checked' : '') + ' '
+      + 'aria-label="' + escapeHtml('Auto-observe: ' + observeLabel) + '" '
       + 'data-pr-host="' + escapeHtml(idMatch[1]) + '" '
       + 'data-pr-slug="' + escapeHtml(idMatch[2]) + '" '
       + 'data-pr-number="' + escapeHtml(idMatch[3]) + '" '
       + 'data-pr-observe="' + (observe ? '1' : '0') + '" '
-      + 'title="' + escapeHtml(observeTitle) + '" '
-      + 'onclick="event.stopPropagation();togglePrObserve(this)">' + observeLabel + '</button> ';
+      + 'onchange="togglePrObserve(this)">'
+      + '<span class="pr-observe-switch__track" aria-hidden="true">'
+      + '<span class="pr-observe-switch__knob"></span>'
+      + '</span>'
+      + '</label> ';
   }
   // Title attrs live on the inner element (link/span/badge) so hovering the
   // ellipsis-truncated content reveals the full text. Cell tags stay bare so
@@ -288,10 +300,15 @@ async function unlinkPr(id) {
   } catch (e) { clearDeleted('pr:' + id); showToast('pr-toast', 'Error: ' + e.message, false); refresh(); }
 }
 
-// Per-row auto-observe toggle (W-mpmwxkzm0009ba0b). Optimistic UI: flip
-// the button immediately, only revert on API error. The engine consumes
-// `_contextOnly` to gate review/fix dispatch (engine/shared.js
-// isAutoManagedPrRecord + discoverFromPrs).
+// Per-row auto-observe toggle (W-mpmwxkzm0009ba0b; toggle-switch UX in
+// W-mpof8qam000h62fb). Optimistic UI: flip the switch immediately, only
+// revert on API error. The engine consumes `_contextOnly` to gate review/fix
+// dispatch (engine/shared.js isAutoManagedPrRecord + discoverFromPrs).
+//
+// `btn` is the <input type=checkbox> inside .pr-observe-switch. Data-attrs
+// live on the input so this handler keeps reading them directly; visual
+// state is mirrored onto the wrapping <label> via the pr-observe-on/off
+// class so CSS can paint the track and slide the knob.
 async function togglePrObserve(btn) {
   if (!btn || btn.disabled) return;
   const host = btn.dataset.prHost;
@@ -300,11 +317,15 @@ async function togglePrObserve(btn) {
   if (!host || !slug || !Number.isFinite(number)) return;
   const wasObserve = btn.dataset.prObserve === '1';
   const next = !wasObserve;
+  const wrapper = btn.closest('.pr-observe-switch');
   // Optimistic flip
   btn.dataset.prObserve = next ? '1' : '0';
-  btn.classList.toggle('pr-observe-on', next);
-  btn.classList.toggle('pr-observe-off', !next);
-  btn.textContent = next ? 'observed' : 'context';
+  btn.checked = next;
+  btn.setAttribute('aria-label', 'Auto-observe: ' + (next ? 'observed' : 'context'));
+  if (wrapper) {
+    wrapper.classList.toggle('pr-observe-on', next);
+    wrapper.classList.toggle('pr-observe-off', !next);
+  }
   btn.disabled = true;
   try {
     const res = await fetch('/api/pull-requests/observe', {
@@ -315,18 +336,24 @@ async function togglePrObserve(btn) {
       const d = await res.json().catch(() => ({}));
       // Revert
       btn.dataset.prObserve = wasObserve ? '1' : '0';
-      btn.classList.toggle('pr-observe-on', wasObserve);
-      btn.classList.toggle('pr-observe-off', !wasObserve);
-      btn.textContent = wasObserve ? 'observed' : 'context';
+      btn.checked = wasObserve;
+      btn.setAttribute('aria-label', 'Auto-observe: ' + (wasObserve ? 'observed' : 'context'));
+      if (wrapper) {
+        wrapper.classList.toggle('pr-observe-on', wasObserve);
+        wrapper.classList.toggle('pr-observe-off', !wasObserve);
+      }
       showToast('pr-toast', 'Failed: ' + (d.error || 'unknown'), false);
       return;
     }
     showToast('pr-toast', next ? 'Auto-observe enabled' : 'Switched to context only', true);
   } catch (e) {
     btn.dataset.prObserve = wasObserve ? '1' : '0';
-    btn.classList.toggle('pr-observe-on', wasObserve);
-    btn.classList.toggle('pr-observe-off', !wasObserve);
-    btn.textContent = wasObserve ? 'observed' : 'context';
+    btn.checked = wasObserve;
+    btn.setAttribute('aria-label', 'Auto-observe: ' + (wasObserve ? 'observed' : 'context'));
+    if (wrapper) {
+      wrapper.classList.toggle('pr-observe-on', wasObserve);
+      wrapper.classList.toggle('pr-observe-off', !wasObserve);
+    }
     showToast('pr-toast', 'Error: ' + e.message, false);
   } finally {
     btn.disabled = false;

package/dashboard/styles.css

@@ -338,16 +338,42 @@
   .pr-page-info { font-size: var(--text-base); color: var(--muted); }
   .pr-date { font-size: var(--text-base); color: var(--muted); }
 
-  .pr-observe-toggle {
-    font-size: 9px; padding: 1px 6px; border-radius: var(--radius-sm); cursor: pointer;
-    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
-    background: var(--surface2); transition: all var(--transition-base);
-  }
-  .pr-observe-toggle:disabled { opacity: 0.6; cursor: wait; }
-  .pr-observe-toggle.pr-observe-on { color: var(--green); border: 1px solid var(--green); background: rgba(63,185,80,0.12); }
-  .pr-observe-toggle.pr-observe-on:hover:not(:disabled) { background: rgba(63,185,80,0.22); }
-  .pr-observe-toggle.pr-observe-off { color: var(--muted); border: 1px dashed var(--border); }
-  .pr-observe-toggle.pr-observe-off:hover:not(:disabled) { color: var(--text); border-color: var(--text); }
+  /* PR row auto-observe toggle switch (W-mpof8qam000h62fb).
+     Semantic <input type=checkbox> hidden but focusable; the visible track
+     is a sibling span styled via the .pr-observe-on/off class on the
+     wrapping <label>. Knob slides via left position + transition. */
+  .pr-observe-switch {
+    display: inline-flex; align-items: center; cursor: pointer;
+    position: relative; user-select: none; vertical-align: middle;
+  }
+  .pr-observe-switch:has(.pr-observe-switch__input:disabled) { cursor: wait; opacity: 0.6; }
+  .pr-observe-switch__input {
+    position: absolute; opacity: 0; pointer-events: none;
+    width: 1px; height: 1px; margin: 0; padding: 0;
+  }
+  .pr-observe-switch__track {
+    display: inline-block; position: relative;
+    width: 26px; height: 14px; border-radius: 999px;
+    background: var(--surface2); border: 1px dashed var(--border);
+    box-sizing: border-box; transition: all var(--transition-base);
+  }
+  .pr-observe-switch__knob {
+    position: absolute; top: 1px; left: 1px;
+    width: 10px; height: 10px; border-radius: 50%;
+    background: var(--muted); transition: all var(--transition-base);
+  }
+  .pr-observe-switch.pr-observe-on .pr-observe-switch__track {
+    background: rgba(63,185,80,0.18); border: 1px solid var(--green);
+  }
+  .pr-observe-switch.pr-observe-on .pr-observe-switch__knob {
+    left: 14px; background: var(--green);
+  }
+  .pr-observe-switch.pr-observe-on:hover .pr-observe-switch__track { background: rgba(63,185,80,0.32); }
+  .pr-observe-switch.pr-observe-off:hover .pr-observe-switch__track { border-color: var(--text); }
+  .pr-observe-switch.pr-observe-off:hover .pr-observe-switch__knob { background: var(--text); }
+  .pr-observe-switch__input:focus-visible ~ .pr-observe-switch__track {
+    outline: 2px solid var(--blue); outline-offset: 2px;
+  }
 
   .archive-btn {
     background: var(--surface2); border: 1px solid var(--border); color: var(--muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yemi33/minions",
-  "version": "0.1.2056",
+  "version": "0.1.2057",
   "description": "Multi-agent AI dev team that runs from ~/.minions/ — five autonomous agents share a single engine, dashboard, and knowledge base",
   "bin": {
     "minions": "bin/minions.js"