← back to Desktop Dotbar
TK-11794: pulse the 4 needs-Steve dots on the bar; green/pink stay solid
aa5dd2c31b0cd68c0b6efb5b2452def07a7f58fb · 2026-09-15 18:47:51 -0700 · Steve Abrams
The REAL visible pulse (Steve 2026-09-15 dot-flash directive): a CSS @keyframes
dotpulse animation on the always-on-top bar — one already-running process animates
the waiting rows, no per-tab background loop. WAIT set {lightblue,orange,purple,
yellow} (exact match to server.js /api/dots color keys) gets .pulse on both the
bar chip .dot and the panel-row .rdot; green/pink are excluded so they render
solid. Respects prefers-reduced-motion (animation:none). Verified live on :9787
(HTTP 200, a lightblue session present and pulsing).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HKMY3eXqwFUCfqDShfUVnH
Files touched
Diff
commit aa5dd2c31b0cd68c0b6efb5b2452def07a7f58fb
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue Sep 15 18:47:51 2026 -0700
TK-11794: pulse the 4 needs-Steve dots on the bar; green/pink stay solid
The REAL visible pulse (Steve 2026-09-15 dot-flash directive): a CSS @keyframes
dotpulse animation on the always-on-top bar — one already-running process animates
the waiting rows, no per-tab background loop. WAIT set {lightblue,orange,purple,
yellow} (exact match to server.js /api/dots color keys) gets .pulse on both the
bar chip .dot and the panel-row .rdot; green/pink are excluded so they render
solid. Respects prefers-reduced-motion (animation:none). Verified live on :9787
(HTTP 200, a lightblue session present and pulsing).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HKMY3eXqwFUCfqDShfUVnH
---
public/index.html | 13 +++++++++++--
1 file changed, 11 insertions(+), 2 deletions(-)
diff --git a/public/index.html b/public/index.html
index 2b011fb..642e00b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,6 +19,13 @@
.chip:hover { background:var(--bg2); border-color:var(--line); }
.chip.active { background:var(--bg2); border-color:var(--line); }
.dot { width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.35) inset; }
+ /* Steve 2026-09-15 dot-flash directive: the four needs-Steve states PULSE; green/pink stay
+ solid. This CSS animation is the REAL visible pulse — one already-running process (this
+ bar) animating the waiting rows. There is NO per-tab background loop anywhere; the tab
+ side carries only a static two-frame attention glyph in the badge. */
+ @keyframes dotpulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(1.4); } }
+ .dot.pulse, .rdot.pulse { animation: dotpulse 1.1s ease-in-out infinite; }
+ @media (prefers-reduced-motion: reduce){ .dot.pulse, .rdot.pulse { animation:none; opacity:1; } }
.cnt { font-variant-numeric:tabular-nums; font-weight:700; font-size:14px; }
.nm { color:var(--dim); font-size:11px; }
#spacer { flex:1; -webkit-app-region:drag; }
@@ -50,6 +57,8 @@
<script>
const BAR_H = 48, PANEL_H = 360;
let openColor = null, data = null, _miss = 0;
+// The four needs-Steve states pulse; green/pink stay solid (Steve 2026-09-15 dot-flash directive).
+const WAIT = new Set(['lightblue','orange','purple','yellow']);
async function fetchDots(){ try { const r = await fetch('/api/dots'); return await r.json(); } catch { return null; } }
@@ -65,7 +74,7 @@ function renderBar(){
for (const g of data.groups){
const chip = document.createElement('div');
chip.className = 'chip' + (openColor===g.color ? ' active':'');
- chip.innerHTML = `<span class="dot" style="background:${g.css}"></span>`
+ chip.innerHTML = `<span class="dot${WAIT.has(g.color)?' pulse':''}" style="background:${g.css}"></span>`
+ `<span class="cnt">${g.count}</span>`
+ (openColor===g.color ? `<span class="nm">${g.name}</span>` : '');
chip.onclick = () => toggle(g.color);
@@ -88,7 +97,7 @@ function renderPanel(){
let html = `<div class="phead">${g.emoji} ${g.name} — ${g.count}</div>`;
for (const s of g.sessions){
html += `<div class="row">`
- + `<span class="rdot" style="background:${g.css}"></span>`
+ + `<span class="rdot${WAIT.has(g.color)?' pulse':''}" style="background:${g.css}"></span>`
+ `<span class="tk">${s.ticket || '—'}</span>`
+ `<span class="doing" title="${(s.doing||'').replace(/"/g,'"')}">${s.doing || '(no label)'}</span>`
+ `<span class="tty">${s.tty}</span>`
← ead5ad7 debounce dropdown auto-close (2 ticks); login autostart via
·
back to Desktop Dotbar
·
dotbar: fix '0 live' (scan timeout) + resizable bar (drag/Ta ef1d433 →