docs(timer): record the shipped redesign and flip spec to IMPLEMENTEDHEAD main

The timer-panel UI/UX redesign built and shipped to dotfiles across five phased commits. This captures the archsetup-side records. The three design prototypes (the three-directions study, the hero-rack iteration, and the final) land under docs/prototypes, which the spec's Prototype iterations section links. The spec flips DOING to IMPLEMENTED with a history line summarizing the build. The manual-testing checklist is rebuilt around the redesigned panel (repeat timers, recurring alarms with snooze and a ringing state, the configurable pomodoro cycle, the stopwatch sweep dial, locked presets, and bar-tooltip parity), and the two obsolete fuzzel-dialog tests are marked superseded. A dated entry under the closed feature task records the redesign.
author: Craig Jennings <c@cjennings.net> 2026-07-05 07:21:07 -0500
committer: Craig Jennings <c@cjennings.net> 2026-07-05 07:21:07 -0500
commit: 721185f10d1e389ae3816734b7b8174d33900314 (patch)
tree: 0e2a09a50e74e17200efc287e841d9e2bee8d8a3 /docs/prototypes/2026-07-02-timer-panel-prototype-1.html
parent: 0af88d35a6f22c11e346970bec356bae0b74d4a2 (diff)
download: archsetup-main.tar.gz
archsetup-main.zip
1 files changed, 693 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-02-timer-panel-prototype-1.html b/docs/prototypes/2026-07-02-timer-panel-prototype-1.html
new file mode 100644
index 0000000..6b199f9
--- /dev/null
+++ b/docs/prototypes/2026-07-02-timer-panel-prototype-1.html
@@ -0,0 +1,693 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Timer panel — three redesigns · dupre instrument console</title>
+<style>
+:root{
+  --ground:#151311; --panel:#100f0f; --well:#0a0c0d; --raise:#1a1917;
+  --gold:#dab53d; --gold-hi:#ffd75f; --silver:#bfc4d0; --cream:#f3e7c5;
+  --steel:#969385; --dim:#7c838a; --slate:#424f5e; --slate-hi:#54677d;
+  --wash:#2c2f32; --pass:#74932f; --fail:#cb6b4d;
+  --mono:"BerkeleyMono Nerd Font","Berkeley Mono","Symbols Nerd Font",monospace;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+html{background:var(--ground)}
+body{font-family:var(--mono);color:var(--silver);padding:2.4rem 2rem 6rem;line-height:1.45;
+  background:radial-gradient(1200px 600px at 70% -10%,#1c1915 0%,transparent 60%),var(--ground)}
+.wrap{max-width:1320px;margin:0 auto}
+.eyebrow{color:var(--steel);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase}
+h1{color:var(--gold);font-size:1.5rem;margin:.35rem 0 .4rem}
+.masthead p{color:var(--dim);font-size:.86rem;max-width:92ch}
+.masthead p b{color:var(--silver)}
+h2{color:var(--steel);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
+  margin:2.6rem 0 .2rem;display:flex;align-items:center;gap:12px}
+h2 .tag{color:var(--panel);background:var(--gold);border-radius:4px;font-size:.62rem;padding:1px 7px;letter-spacing:.12em}
+h2::after{content:"";height:1px;background:var(--wash);flex:1}
+.blurb{color:var(--dim);font-size:.82rem;max-width:90ch;margin:.5rem 0 1.1rem}
+.blurb b{color:var(--steel);font-weight:400}
+.desk{display:flex;justify-content:center;padding:1.2rem 0 .4rem}
+
+/* ---------- faceplate ---------- */
+.panel{width:396px;background:linear-gradient(180deg,var(--raise),var(--panel));border:1px solid #262320;
+  border-radius:14px;padding:15px 15px 16px;position:relative;
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.55)}
+.panel.wide{width:660px}
+.phead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
+.phead .brand{color:var(--gold);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
+.phead .pcount{margin-left:auto;color:var(--dim);font-size:.66rem;letter-spacing:.14em}
+.phead .pcount b{color:var(--cream)}
+
+/* ---------- shared primitives (from the widget gallery) ---------- */
+.lamp{width:9px;height:9px;border-radius:50%;background:var(--pass);box-shadow:0 0 6px 1px rgba(116,147,47,.55);flex:none}
+.lamp.gold{background:var(--gold);box-shadow:0 0 6px 1px rgba(218,181,61,.6)}
+.lamp.red{background:var(--fail);box-shadow:0 0 6px 1px rgba(203,107,77,.55)}
+.lamp.off{background:var(--wash);box-shadow:none}
+.lamp.busy{background:var(--gold);animation:pulse .7s ease-in-out infinite}
+@keyframes pulse{50%{opacity:.25}}
+
+.key{font:inherit;font-size:11.5px;letter-spacing:.05em;color:var(--silver);cursor:pointer;
+  background:linear-gradient(180deg,#23211e,#191715);border:1px solid #33302b;border-bottom-color:#0c0b0a;
+  border-radius:8px;padding:7px 11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 3px rgba(0,0,0,.4)}
+.key:hover{color:var(--gold);border-color:var(--gold)}
+.key:active{transform:translateY(1px)}
+.key.on{color:var(--panel);background:linear-gradient(180deg,#f0d879,var(--gold));border-color:var(--gold-hi);font-weight:700}
+.key.red{color:var(--cream);background:linear-gradient(180deg,#d98a6f,var(--fail));border-color:var(--fail)}
+.key.sm{padding:5px 8px;font-size:10.5px;border-radius:7px}
+.key.icon{padding:6px 9px;font-size:14px;line-height:1}
+.key.wide{width:100%;text-align:center;padding:9px}
+
+.chip{color:var(--dim);cursor:pointer;border:1px solid #2a2723;background:#141210;
+  border-radius:14px;font-size:11.5px;padding:4px 10px;letter-spacing:.02em}
+.chip:hover{color:var(--silver);border-color:var(--slate)}
+.chip.on{color:var(--panel);background:linear-gradient(180deg,#f0d879,var(--gold));border-color:var(--gold-hi);font-weight:700}
+.chip .x{color:inherit;opacity:.5;margin-left:5px}
+.chip .x:hover{opacity:1;color:var(--fail)}
+
+.badge{font-size:.6rem;letter-spacing:.16em;color:var(--panel);background:var(--gold);border-radius:4px;padding:1px 6px;text-transform:uppercase}
+.badge.red{background:var(--fail);color:var(--cream)}
+.badge.ghost{background:transparent;border:1px solid var(--slate);color:var(--silver)}
+.badge.dim{background:var(--wash);color:var(--steel)}
+
+.seg{display:flex;border:1px solid #33302b;border-radius:8px;overflow:hidden}
+.seg button{font:inherit;font-size:11px;color:var(--silver);background:#191715;border:0;border-right:1px solid #33302b;
+  padding:7px 0;cursor:pointer;flex:1;letter-spacing:.02em}
+.seg button:last-child{border-right:0}
+.seg button.on{background:linear-gradient(180deg,#f0d879,var(--gold));color:var(--panel);font-weight:700}
+.seg.vert{flex-direction:column}
+.seg.vert button{border-right:0;border-bottom:1px solid #33302b;padding:8px 10px}
+.seg.vert button:last-child{border-bottom:0}
+
+.engrave{color:var(--steel);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
+  display:flex;align-items:center;gap:9px;margin:2px 0}
+.engrave::before,.engrave::after{content:"";height:1px;background:var(--wash);flex:1}
+.engrave::before{max-width:10px}
+.engrave .cnt{color:var(--dim);letter-spacing:.1em;text-transform:none}
+
+.readout{color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.03em}
+.tin{font:inherit;font-size:12px;color:var(--cream);background:#0d0f10;border:1px solid #231f18;border-radius:7px;
+  padding:7px 9px;width:100%;outline:none}
+.tin:focus{border-color:var(--gold)}
+.tin::placeholder{color:var(--dim)}
+.tin.bad{border-color:var(--fail);color:var(--fail)}
+
+.arm{font:inherit;font-size:11px;color:var(--silver);cursor:pointer;background:#191715;border:1px solid #33302b;
+  border-radius:7px;padding:6px 9px}
+.arm.armed{background:rgba(203,107,77,.14);border-color:var(--fail);color:var(--fail)}
+
+/* radial ring */
+.ring{border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--wash) 0);
+  display:grid;place-items:center;position:relative}
+.ring.warn{background:conic-gradient(var(--fail) calc(var(--p)*1%),var(--wash) 0)}
+.ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--well)}
+.ring b{position:relative;z-index:1;text-align:center}
+
+/* linear bar */
+.bar{height:8px;background:#0d0f10;border:1px solid #231f18;border-radius:5px;overflow:hidden;position:relative}
+.bar>span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#8a7524,var(--gold));transition:width .25s linear}
+.bar.warn>span{background:linear-gradient(90deg,#a35a3f,var(--fail))}
+
+/* create strip common */
+.create{margin-top:13px;background:var(--well);border:1px solid #201d17;border-radius:10px;padding:11px}
+.create .row{display:flex;gap:7px;align-items:center;margin-top:8px;flex-wrap:wrap}
+.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
+
+/* toast */
+.toasts{position:absolute;left:12px;right:12px;bottom:10px;display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:5}
+.toast{font-size:11px;color:var(--cream);background:var(--slate);border-radius:7px;padding:6px 10px;
+  box-shadow:0 4px 12px rgba(0,0,0,.5);animation:tin .2s ease}
+.toast.red{background:linear-gradient(180deg,#b25c43,#8f3f2c)}
+.toast.gold{background:linear-gradient(180deg,#b79a34,#8a7524);color:var(--panel)}
+@keyframes tin{from{opacity:0;transform:translateY(6px)}}
+
+/* empty state */
+.empty{color:var(--dim);font-size:12px;text-align:center;padding:18px 6px 12px}
+
+/* =============== A · RACK UNIT =============== */
+.qlist{display:flex;flex-direction:column;gap:8px}
+.qrow{display:flex;align-items:center;gap:10px;background:#141210;border:1px solid #201d17;border-radius:9px;padding:8px 10px}
+.qrow.prim{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(218,181,61,.25)}
+.qrow.fire{animation:firef .6s ease-in-out 3}
+@keyframes firef{50%{background:rgba(203,107,77,.22)}}
+.qrow .g{color:var(--gold);font-size:16px;width:19px;text-align:center;flex:none}
+.qrow .meta{min-width:0;display:flex;flex-direction:column;gap:1px}
+.qrow .meta b{color:var(--cream);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
+.qrow .meta .ty{color:var(--dim);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase}
+.qrow .rd{margin-left:auto;font-size:19px;color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
+.qrow.paused .rd{color:var(--steel)}
+.qrow .pomo{font-size:.56rem;color:var(--steel);letter-spacing:.1em;text-transform:uppercase}
+.qrow .ctrls{display:flex;gap:5px;flex:none}
+
+/* =============== B · TRANSPORT DECK =============== */
+.hero{background:var(--well);border:1px solid #201d17;border-radius:11px;padding:15px;display:flex;gap:15px;align-items:center}
+.hero.fire{animation:firef .6s ease-in-out 3}
+.hero .lhs{flex:none}
+.hero .rhs{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
+.hero .htype{display:flex;align-items:center;gap:8px}
+.hero .htype .g{color:var(--gold);font-size:17px}
+.hero .hlabel{color:var(--cream);font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.hero .hbig{color:var(--cream);font-size:40px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
+.hero.paused .hbig{color:var(--steel)}
+.hero .hsub{color:var(--dim);font-size:11px;letter-spacing:.06em}
+.transport{display:flex;gap:7px;margin-top:2px}
+.tracks{margin-top:11px;display:flex;flex-direction:column;gap:5px}
+.track{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;background:#141210;border:1px solid #1c1a16;cursor:pointer;font-size:12px}
+.track:hover{background:var(--wash)}
+.track.prim{outline:1px solid var(--gold);outline-offset:-1px}
+.track .g{color:var(--gold);font-size:14px;width:16px;text-align:center}
+.track b{color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.track .trd{margin-left:auto;color:var(--silver);font-variant-numeric:tabular-nums;font-weight:700}
+.track.paused .trd{color:var(--dim)}
+.track .tx{color:var(--dim);font-size:14px;padding:0 2px}
+.track .tx:hover{color:var(--fail)}
+
+/* =============== C · CHANNEL STRIP BOARD =============== */
+.board{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 10px}
+.strip{flex:none;width:96px;background:#141210;border:1px solid #201d17;border-radius:10px;padding:9px 8px;
+  display:flex;flex-direction:column;align-items:center;gap:8px}
+.strip.prim{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(218,181,61,.25)}
+.strip.fire{animation:firef .6s ease-in-out 3}
+.strip .stitle{width:100%;display:flex;align-items:center;gap:5px;cursor:pointer}
+.strip .stitle .g{color:var(--gold);font-size:13px}
+.strip .stitle b{color:var(--cream);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.strip .styp{color:var(--dim);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;width:100%;text-align:left}
+.column{width:26px;height:120px;position:relative;background:#0d0f10;border:1px solid #231f18;border-radius:6px;overflow:hidden}
+.column .fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#8a7524,var(--gold));transition:height .25s linear}
+.column.warn .fill{background:linear-gradient(0deg,#a35a3f,var(--fail))}
+.column .cap{position:absolute;left:-2px;right:-2px;height:3px;background:var(--gold-hi);box-shadow:0 0 5px rgba(255,215,95,.6);transition:bottom .25s linear}
+.column.sw .fill{background:linear-gradient(0deg,#3a4a5e,var(--slate-hi));animation:swpulse 1.6s ease-in-out infinite}
+@keyframes swpulse{50%{opacity:.6}}
+.strip .srd{color:var(--cream);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
+.strip.paused .srd{color:var(--steel)}
+.strip .skeys{display:flex;gap:4px}
+.strip.addstrip{justify-content:flex-start;width:150px;background:var(--well)}
+
+@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+</style>
+</head>
+<body>
+<div class="wrap">
+<header class="masthead">
+  <div class="eyebrow">archsetup · dupre panel family · timer</div>
+  <h1>Timer panel — three redesigns</h1>
+  <p>Three ways to shape the timer dropdown, all in the shipped instrument-console faceplate language
+     (same tokens, lamps, console keys, engraved labels, and tabular readouts as the net / bt / sound panels).
+     Each is a <b>working prototype over one shared engine</b> that mirrors wtimer + the PanelModel: add / cancel / pause /
+     resume, promote to the bar slot, per-type presets (add and delete chips), freeform entry with the same validation,
+     stopwatch lap + stop-and-save, the soonest-fire queue sort, the 10-item cap, and a real completion + notify on fire.
+     Try each: add a timer, watch one count down and fire, promote a row, pause a stopwatch, delete a preset chip.</p>
+</header>
+
+<h2><span class="tag">A</span> Rack unit — the faithful list</h2>
+<p class="blurb">The closest sibling to the net / audio panels: a vertical stack you scan top-down. Header with the live
+   count and <b>CLEAR ALL</b>; one output-well row per item, soonest-firing on top; each row carries a lamp, glyph, label,
+   the big countdown, and inline pause / promote / cancel keys. Create strip lives at the bottom — pick a type, tap a preset
+   or type a duration, name it, ADD. Safest port of what already shipped.</p>
+<div class="desk"><div class="panel" id="panelA"></div></div>
+
+<h2><span class="tag">B</span> Transport deck — one hero, a track list</h2>
+<p class="blurb">A cassette-transport shape. The <b>primary</b> item (the one in the bar glyph slot) gets a hero readout with a
+   progress ring and chunky transport keys; everything else is a compact track list underneath. Click a track to promote it into
+   the hero seat; the ‹ › keys cycle the primary. Puts the timer you care about front-and-centre, the rest one glance away.</p>
+<div class="desk"><div class="panel" id="panelB"></div></div>
+
+<h2><span class="tag">C</span> Channel-strip board — a mixing desk of timers</h2>
+<p class="blurb">The mixing-console metaphor: every item is a vertical channel strip on a board, its fader draining from the top
+   as time runs out (a stopwatch fills instead, tinted slate). Read all your timers at once like meters on a desk. Click a strip
+   header to promote it; the trailing <b>＋ NEW</b> strip is the create surface. The most spatial, most stereo of the three.</p>
+<div class="desk"><div class="panel wide" id="panelC"></div></div>
+
+</div>
+
+<script>
+"use strict";
+const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
+const el = (tag, cls, html) => { const n=document.createElement(tag); if(cls)n.className=cls; if(html!=null)n.innerHTML=html; return n; };
+
+/* nerd-font glyphs (mirrors timer/viewmodel.py GLYPH) */
+const GL = {
+  timer:'\u{F051B}', alarm:'\u{F0020}', stopwatch:'\u{F13AB}',
+  pomo_work:'\u{F051C}', pomo_break:'\u{F0176}', paused:'\u{F03E4}',
+  play:'\u{F040A}', promote:'\u{F0143}', cancel:'\u{F0156}', add:'\u{F0415}', clear:'\u{F0A79}'
+};
+
+/* ---------- parsers (mirror parse.py behaviour) ---------- */
+function parseDuration(v){
+  if(v==null) return null;
+  v=String(v).trim().toLowerCase();
+  if(v==='') return null;
+  if(/^\d+$/.test(v)) return parseInt(v,10)*60;              // bare number = minutes
+  if(!/^(\s*\d+\s*[hms])+$/.test(v)) return null;            // only h/m/s tokens
+  let m, tot=0; const re=/(\d+)\s*([hms])/g;
+  while((m=re.exec(v))) tot += m[2]==='h'?+m[1]*3600 : m[2]==='m'?+m[1]*60 : +m[1];
+  return tot>0?tot:null;
+}
+function resolveAlarm(v, now){
+  v=String(v||'').trim().toLowerCase();
+  if(v.startsWith('+')){ const s=parseDuration(v.slice(1)); return s==null?null:now+s; }
+  if(v==='@hour'||v==='top of hour'){ const d=new Date(now*1000); d.setMinutes(0,0,0); d.setHours(d.getHours()+1); return d.getTime()/1000; }
+  const t=v.match(/^(\d{1,2}):(\d{2})$/);
+  if(t){ const hh=+t[1], mm=+t[2]; if(hh>23||mm>59) return null;
+    const d=new Date(now*1000); d.setHours(hh,mm,0,0); let e=d.getTime()/1000; if(e<=now) e+=86400; return e; }
+  return null;
+}
+function fmtTime(secs){
+  secs=Math.max(0,Math.floor(secs));
+  const h=Math.floor(secs/3600), m=Math.floor((secs%3600)/60), s=secs%60;
+  return h ? `${h}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}` : `${m}:${String(s).padStart(2,'0')}`;
+}
+function fmtClock(epoch){ const d=new Date(epoch*1000); return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; }
+
+/* ---------- default presets (mirror panel._default_presets) ---------- */
+const DEFAULT_PRESETS = () => ({
+  timer:[{label:'5m',value:'5m'},{label:'25m',value:'25m'},{label:'10m',value:'10m'},
+         {label:'15m',value:'15m'},{label:'30m',value:'30m'},{label:'60m',value:'60m'},{label:'2h',value:'2h'}],
+  alarm:[{label:'+30m',value:'+30m'},{label:'top of hour',value:'@hour'},{label:'07:00',value:'07:00'}],
+  pomodoro:[{label:'default cycle',value:''}],
+  stopwatch:[]
+});
+const TYPES=['timer','alarm','stopwatch','pomodoro'];
+const COUNTDOWN=['timer','alarm','pomodoro'];
+const MAX=10;
+const POMO={work:25*60, short:5*60, long:15*60, interval:4};
+
+/* ---------- the engine (mirrors PanelModel + wtimer state) ---------- */
+class Engine{
+  constructor(){ this.items=[]; this.seq=0; this.primary=null; this.presets=DEFAULT_PRESETS(); this.onEvent=()=>{}; }
+  now(){ return Date.now()/1000; }
+  count(){ return this.items.length; }
+  full(){ return this.items.length>=MAX; }
+
+  add(type,value,label){
+    if(this.full()) return {ok:false,reason:`queue full (${MAX}/${MAX})`};
+    const now=this.now(); this.seq++; const id='t'+this.seq;
+    const it={id,type,label:label||''};
+    if(type==='timer'){ const s=parseDuration(value); if(s==null) return {ok:false,reason:`bad duration: “${value}”`}; it.target=now+s; it.total=s; }
+    else if(type==='alarm'){ const e=resolveAlarm(value,now); if(e==null) return {ok:false,reason:`bad time: “${value}”`}; it.target=e; it.total=Math.max(1,e-now); }
+    else if(type==='pomodoro'){ it.phase='work'; it.cycle=1; it.interval=POMO.interval; it.target=now+POMO.work; it.total=POMO.work; }
+    else if(type==='stopwatch'){ it.start=now; it.laps=[]; }
+    else return {ok:false,reason:`unknown type: ${type}`};
+    this.items.push(it); if(!this.primary) this.primary=id;
+    return {ok:true, id};
+  }
+  find(id){ return this.items.find(i=>i.id===id); }
+  isPaused(it){ return it.type==='stopwatch' ? it.paused_elapsed!=null : it.paused_left!=null; }
+  remaining(it,ref){
+    ref=ref==null?this.now():ref;
+    if(it.type==='stopwatch') return this.isPaused(it)? it.paused_elapsed : ref-it.start;
+    return this.isPaused(it)? it.paused_left : it.target-ref;
+  }
+  toggle(id){ const it=this.find(id); if(!it) return; const now=this.now();
+    if(it.type==='stopwatch'){
+      if(this.isPaused(it)){ it.start=now-it.paused_elapsed; it.paused_elapsed=null; }
+      else it.paused_elapsed=now-it.start;
+    } else {
+      if(this.isPaused(it)){ it.target=now+it.paused_left; it.paused_left=null; }
+      else it.paused_left=it.target-now;
+    }
+  }
+  cancel(id){ const i=this.items.findIndex(x=>x.id===id); if(i<0) return; this.items.splice(i,1);
+    if(this.primary===id) this.primary=null; }
+  cancelAll(){ this.items=[]; this.primary=null; }
+  promote(id){ if(this.find(id)) this.primary=id; }
+  cycle(dir){ const ids=this.items.map(i=>i.id); if(!ids.length) return;
+    let cur=ids.indexOf(this.effectivePrimary()); cur=cur<0?0:cur;
+    const n=dir==='prev' ? (cur-1+ids.length)%ids.length : (cur+1)%ids.length;
+    this.primary=ids[n]; }
+  lap(id,name){ const it=this.find(id); if(!it||it.type!=='stopwatch') return;
+    it.laps.push({t:this.remaining(it), name:name||''}); }
+  stopSave(id){ const it=this.find(id); if(!it||it.type!=='stopwatch') return null;
+    const run={label:it.label||'run', total:this.remaining(it), laps:it.laps.slice()}; this.cancel(id); return run; }
+
+  effectivePrimary(){
+    const items=this.items; if(!items.length) return null;
+    const ids=items.map(i=>i.id);
+    if(ids.includes(this.primary)) return this.primary;
+    const now=this.now();
+    const acd=items.filter(i=>COUNTDOWN.includes(i.type)&&!this.isPaused(i));
+    if(acd.length) return acd.reduce((a,b)=>this.remaining(a,now)<=this.remaining(b,now)?a:b).id;
+    const asw=items.filter(i=>i.type==='stopwatch'&&!this.isPaused(i));
+    if(asw.length) return asw[0].id;
+    return ids[0];
+  }
+  /* 4-bucket sort: active countdown < paused countdown < active sw < paused sw */
+  sortKey(it){ const now=this.now(), paused=this.isPaused(it), sw=it.type==='stopwatch', rem=this.remaining(it,now);
+    return sw ? [paused?3:2, -rem, +it.id.slice(1)] : [paused?1:0, rem, +it.id.slice(1)]; }
+  rows(){ const prim=this.effectivePrimary(); const now=this.now();
+    return this.items.slice().sort((a,b)=>{ const ka=this.sortKey(a),kb=this.sortKey(b);
+        for(let i=0;i<ka.length;i++){ if(ka[i]<kb[i])return -1; if(ka[i]>kb[i])return 1; } return 0; })
+      .map(it=>this.row(it,prim,now)); }
+  row(it,prim,now){
+    const rem=this.remaining(it,now), paused=this.isPaused(it);
+    let disp, sub='', warn=false, prog=null, glyph;
+    if(it.type==='alarm'){ disp=fmtClock(it.target); sub='at '+fmtClock(it.target); prog=Math.max(0,Math.min(1,rem/it.total)); glyph=GL.alarm; }
+    else if(it.type==='pomodoro'){ disp=fmtTime(rem); sub=`${it.phase} · cycle ${it.cycle}/${it.interval}`; prog=Math.max(0,Math.min(1,rem/it.total));
+      glyph=(it.phase==='work')?GL.pomo_work:GL.pomo_break; }
+    else if(it.type==='stopwatch'){ disp=fmtTime(rem); sub=it.laps.length?`${it.laps.length} lap${it.laps.length>1?'s':''}`:'running'; glyph=GL.stopwatch; }
+    else { disp=fmtTime(rem); sub='timer'; prog=Math.max(0,Math.min(1,rem/it.total)); glyph=GL.timer; }
+    if(prog!=null && rem<=Math.min(30, it.total*0.15)) warn=true;
+    if(paused) glyph=GL.paused;
+    return {id:it.id, type:it.type, glyph, label:it.label||({timer:'Timer',alarm:'Alarm',stopwatch:'Stopwatch',pomodoro:'Pomodoro'})[it.type],
+      typeLabel:it.type, disp, sub, paused, primary:it.id===prim, prog, warn, laps:it.laps?it.laps.length:0};
+  }
+
+  /* advance fired items; returns list of fire events for the view to flash/notify */
+  tick(){
+    const now=this.now(); const fired=[];
+    for(const it of this.items.slice()){
+      if(!COUNTDOWN.includes(it.type) || this.isPaused(it)) continue;
+      if(it.target-now>0) continue;
+      if(it.type==='pomodoro'){
+        if(it.phase==='work'){
+          const isLong = it.cycle % it.interval === 0;
+          fired.push({id:it.id, kind:'pomo', title:`Pomodoro · ${isLong?'long':'short'} break`, body:it.label||`cycle ${it.cycle}`});
+          it.phase = isLong?'long':'short'; const len = isLong?POMO.long:POMO.short; it.target=now+len; it.total=len;
+        } else if(it.phase==='long'){
+          fired.push({id:it.id, kind:'done', title:'Pomodoro complete', body:it.label||`${it.interval} cycles done`});
+          this.cancel(it.id);
+        } else { // short break over → next work
+          it.cycle+=1; fired.push({id:it.id, kind:'pomo', title:'Pomodoro · back to work', body:it.label||`cycle ${it.cycle}`});
+          it.phase='work'; it.target=now+POMO.work; it.total=POMO.work;
+        }
+      } else {
+        fired.push({id:it.id, kind:'done', title:(it.type==='alarm'?'Alarm':'Timer')+' · '+(it.label|| (it.type==='alarm'?fmtClock(it.target):'done')), body:'time’s up'});
+        this.cancel(it.id);
+      }
+    }
+    return fired;
+  }
+  /* presets */
+  presetsFor(t){ return (this.presets[t]||[]).map(p=>({...p})); }
+  addPreset(t,label,value){ if(!TYPES.includes(t)) return {ok:false,reason:'bad type'};
+    if(t==='timer' && parseDuration(value)==null) return {ok:false,reason:'bad duration'};
+    (this.presets[t]||(this.presets[t]=[])).push({label,value}); return {ok:true}; }
+  deletePreset(t,label){ const a=this.presets[t]||[]; const i=a.findIndex(p=>p.label===label); if(i<0) return {ok:false}; a.splice(i,1); return {ok:true}; }
+}
+
+/* ---------- browser notification (best-effort, mirrors the notify path) ---------- */
+let notifPerm = (typeof Notification!=='undefined') ? Notification.permission : 'denied';
+function tryNotify(title, body){
+  if(typeof Notification==='undefined') return;
+  if(notifPerm==='granted'){ try{ new Notification(title,{body}); }catch(e){} }
+  else if(notifPerm==='default'){ Notification.requestPermission().then(p=>notifPerm=p); }
+}
+
+/* ---------- toast helper ---------- */
+function toaster(host){
+  const wrap=el('div','toasts'); host.appendChild(wrap);
+  return (msg,kind)=>{ const t=el('div','toast'+(kind?' '+kind:''),msg); wrap.appendChild(t);
+    setTimeout(()=>{ t.style.transition='opacity .3s'; t.style.opacity='0'; setTimeout(()=>t.remove(),300); }, 2600); };
+}
+
+/* ---------- create-strip controller (shared by all three views) ---------- */
+function makeCreate(engine, toast, rerender, opts){
+  opts=opts||{};
+  const box=el('div','create');
+  const seg=el('div','seg');
+  TYPES.forEach(t=>{ const b=el('button',t==='timer'?'on':'', t[0].toUpperCase()+t.slice(1)); b.dataset.t=t; seg.appendChild(b); });
+  const chips=el('div','chips');
+  const row=el('div','row');
+  const val=el('input','tin'); val.placeholder='5m · 1h30m · 90s'; val.style.flex='2';
+  const lab=el('input','tin'); lab.placeholder='label (optional)'; lab.style.flex='2';
+  const addk=el('button','key on', GL.add+' ADD'); addk.style.flex='1';
+  row.append(val,lab,addk);
+  box.append(seg,chips,row);
+
+  let selType='timer';
+  function paintChips(){
+    chips.innerHTML='';
+    engine.presetsFor(selType).forEach(p=>{
+      const c=el('span','chip', p.label + (opts.editablePresets?` <span class="x" data-del="${encodeURIComponent(p.label)}">×</span>`:''));
+      c.dataset.val=p.value; chips.appendChild(c);
+    });
+    if(opts.editablePresets){ const c=el('span','chip','+ chip'); c.dataset.newchip='1'; c.style.opacity='.7'; chips.appendChild(c); }
+    // type-specific value affordance
+    val.disabled = (selType==='stopwatch'||selType==='pomodoro');
+    val.placeholder = selType==='alarm' ? 'HH:MM · +30m · @hour'
+                    : selType==='stopwatch' ? 'no value — just ADD'
+                    : selType==='pomodoro' ? 'default 25/5 cycle' : '5m · 1h30m · 90s';
+    if(val.disabled) val.value='';
+  }
+  seg.addEventListener('click', e=>{ const b=e.target.closest('button'); if(!b) return;
+    selType=b.dataset.t; [...seg.children].forEach(x=>x.classList.toggle('on',x===b)); val.classList.remove('bad'); paintChips(); });
+  chips.addEventListener('click', e=>{
+    const del=e.target.closest('[data-del]');
+    if(del){ engine.deletePreset(selType, decodeURIComponent(del.dataset.del)); paintChips(); toast('preset removed','gold'); return; }
+    if(e.target.closest('[data-newchip]')){
+      const lb=prompt('Chip label (e.g. 45m):'); if(!lb) return;
+      let vv=lb; if(selType==='timer'||selType==='alarm'){ vv=prompt('Value for “'+lb+'” (e.g. 45m):', lb)||lb; }
+      const r=engine.addPreset(selType, lb, vv); paintChips(); toast(r.ok?'preset added':('preset: '+r.reason), r.ok?'gold':'red'); return;
+    }
+    const c=e.target.closest('.chip'); if(!c||c.dataset.val==null) return;
+    val.classList.remove('bad'); val.value=c.dataset.val;
+    doAdd();
+  });
+  function doAdd(){
+    const r=engine.add(selType, val.value, lab.value.trim());
+    if(!r.ok){ val.classList.add('bad'); toast(r.reason,'red'); return; }
+    val.classList.remove('bad'); if(!val.disabled) val.value=''; lab.value='';
+    toast('added '+selType, 'gold'); rerender();
+  }
+  addk.addEventListener('click', doAdd);
+  val.addEventListener('keydown', e=>{ if(e.key==='Enter') doAdd(); });
+  lab.addEventListener('keydown', e=>{ if(e.key==='Enter') doAdd(); });
+  paintChips();
+  return box;
+}
+
+/* =================================================================== */
+/* VIEW A — RACK UNIT                                                   */
+/* =================================================================== */
+function mountRack(host, engine){
+  const toast=toaster(host);
+  const head=el('div','phead',
+    `<span class="brand">Timer</span><span class="pcount">queue <b class="cnt">0</b>/${MAX}</span>`);
+  const clear=el('button','key sm', GL.clear+' CLEAR ALL'); clear.style.marginLeft='8px';
+  head.appendChild(clear);
+  clear.addEventListener('click', ()=>{ if(!engine.count())return; engine.cancelAll(); toast('cleared all'); render(); });
+  const list=el('div','qlist');
+  host.append(head,list);
+  const create=makeCreate(engine, toast, ()=>render(), {editablePresets:true});
+  host.appendChild(create);
+
+  const flashing=new Set();
+  list.addEventListener('click', e=>{
+    const b=e.target.closest('[data-act]'); if(!b) return;
+    const id=b.dataset.id, act=b.dataset.act;
+    if(act==='toggle') engine.toggle(id);
+    else if(act==='promote') engine.promote(id);
+    else if(act==='cancel'){
+      if(b.dataset.armed){ engine.cancel(id); toast('cancelled'); }
+      else { b.dataset.armed='1'; b.classList.add('armed'); b.textContent='sure?'; setTimeout(()=>{ if(b.isConnected){b.textContent='×';b.classList.remove('armed');delete b.dataset.armed;} },2000); return; }
+    }
+    else if(act==='lap'){ engine.lap(id); toast('lap recorded'); }
+    else if(act==='stop'){ const run=engine.stopSave(id); if(run) toast(`saved “${run.label}” · ${run.laps.length} laps → org`,'gold'); }
+    render();
+  });
+
+  function render(){
+    head.querySelector('.cnt').textContent=engine.count();
+    const rows=engine.rows();
+    list.innerHTML='';
+    if(!rows.length){ list.appendChild(el('div','empty','No timers running — pick a type below and ADD.')); return; }
+    rows.forEach(r=>{
+      const row=el('div','qrow'+(r.primary?' prim':'')+(r.paused?' paused':'')+(flashing.has(r.id)?' fire':''));
+      const ctrls = r.type==='stopwatch'
+        ? `<button class="key sm" data-act="lap" data-id="${r.id}">LAP</button>
+           <button class="key sm red" data-act="stop" data-id="${r.id}">STOP</button>`
+        : `<button class="key icon" data-act="toggle" data-id="${r.id}" title="pause/resume">${r.paused?GL.play:GL.paused}</button>`;
+      row.innerHTML=
+        `<span class="lamp ${r.paused?'off':(r.primary?'gold':(r.warn?'red':''))}"></span>
+         <span class="g">${r.glyph}</span>
+         <span class="meta"><b>${r.label}</b><span class="ty">${r.sub}</span></span>
+         <span class="rd">${r.disp}</span>
+         <span class="ctrls">
+           ${ctrls}
+           <button class="key icon" data-act="promote" data-id="${r.id}" title="to bar slot" ${r.primary?'disabled style=opacity:.4':''}>${GL.promote}</button>
+           <button class="arm" data-act="cancel" data-id="${r.id}" title="cancel">×</button>
+         </span>`;
+      list.appendChild(row);
+    });
+  }
+  engine._render=render;
+  engine._flash=(id)=>{ flashing.add(id); setTimeout(()=>{flashing.delete(id);},1800); };
+  engine._toast=toast;
+  render();
+}
+
+/* =================================================================== */
+/* VIEW B — TRANSPORT DECK                                              */
+/* =================================================================== */
+function mountTransport(host, engine){
+  const toast=toaster(host);
+  const head=el('div','phead',
+    `<span class="brand">Timer · Transport</span><span class="pcount">queue <b class="cnt">0</b>/${MAX}</span>`);
+  const clear=el('button','key sm',GL.clear+' CLEAR'); clear.style.marginLeft='8px';
+  clear.addEventListener('click',()=>{ if(!engine.count())return; engine.cancelAll(); toast('cleared all'); render(); });
+  head.appendChild(clear);
+  const hero=el('div','hero');
+  const tracks=el('div','tracks');
+  host.append(head,hero,tracks);
+  const create=makeCreate(engine,toast,()=>render(),{editablePresets:true});
+  host.appendChild(create);
+
+  const flashing=new Set();
+  function act(fn){ return e=>{ fn(); render(); }; }
+  hero.addEventListener('click', e=>{ const b=e.target.closest('[data-act]'); if(!b) return; const id=b.dataset.id,a=b.dataset.act;
+    if(a==='toggle')engine.toggle(id); else if(a==='cancel'){engine.cancel(id);toast('cancelled');}
+    else if(a==='cycle')engine.cycle(b.dataset.dir); else if(a==='lap'){engine.lap(id);toast('lap');}
+    else if(a==='stop'){const r=engine.stopSave(id); if(r)toast(`saved “${r.label}” · ${r.laps.length} laps`,'gold');}
+    render(); });
+  tracks.addEventListener('click', e=>{
+    const x=e.target.closest('[data-cancel]'); if(x){ engine.cancel(x.dataset.cancel); toast('cancelled'); render(); return; }
+    const t=e.target.closest('[data-id]'); if(t){ engine.promote(t.dataset.id); render(); } });
+
+  function render(){
+    head.querySelector('.cnt').textContent=engine.count();
+    const rows=engine.rows(); const primId=engine.effectivePrimary();
+    // hero = the primary row
+    const h = rows.find(r=>r.id===primId);
+    hero.className='hero'+(h&&h.paused?' paused':'')+(h&&flashing.has(h.id)?' fire':'');
+    if(!h){ hero.innerHTML='<div class="empty" style="width:100%">No timers — add one below to load the deck.</div>'; }
+    else {
+      const ringP = h.prog!=null ? Math.round(h.prog*100) : (h.type==='stopwatch'? 100 : 0);
+      const ringInner = h.type==='stopwatch'
+        ? `<b style="color:var(--slate-hi);font-size:11px">SW</b>`
+        : `<b style="color:var(--cream);font-size:15px">${ringP}<small style="font-size:9px;color:var(--dim)">%</small></b>`;
+      const transport = h.type==='stopwatch'
+        ? `<button class="key" data-act="toggle" data-id="${h.id}">${h.paused?GL.play+' RESUME':GL.paused+' PAUSE'}</button>
+           <button class="key" data-act="lap" data-id="${h.id}">LAP</button>
+           <button class="key red" data-act="stop" data-id="${h.id}">STOP · SAVE</button>`
+        : `<button class="key icon" data-act="cycle" data-dir="prev">${'‹'}</button>
+           <button class="key" data-act="toggle" data-id="${h.id}">${h.paused?GL.play+' RESUME':GL.paused+' PAUSE'}</button>
+           <button class="key red icon" data-act="cancel" data-id="${h.id}">${GL.cancel}</button>
+           <button class="key icon" data-act="cycle" data-dir="next">${'›'}</button>`;
+      hero.innerHTML=
+        `<div class="lhs"><span class="ring${h.warn?' warn':''}" style="--p:${ringP};width:88px;height:88px">${ringInner}</span></div>
+         <div class="rhs">
+           <div class="htype"><span class="g">${h.glyph}</span><span class="badge ${h.paused?'dim':''}">${h.typeLabel}</span>
+             ${h.primary?'<span class="badge">BAR SLOT</span>':''}</div>
+           <div class="hlabel">${h.label}</div>
+           <div class="hbig">${h.disp}</div>
+           <div class="hsub">${h.sub}</div>
+           <div class="transport">${transport}</div>
+         </div>`;
+    }
+    // track list = everything except the hero
+    tracks.innerHTML='';
+    const rest=rows.filter(r=>r.id!==primId);
+    if(rest.length){ tracks.appendChild(el('div','engrave','up next <span class="cnt">· '+rest.length+'</span>')); }
+    rest.forEach(r=>{
+      const t=el('div','track'+(r.paused?' paused':''),
+        `<span class="g">${r.glyph}</span><b>${r.label}</b>
+         <span class="trd">${r.disp}</span>
+         <span class="tx" data-cancel="${r.id}" title="cancel">${GL.cancel}</span>`);
+      t.dataset.id=r.id; tracks.appendChild(t);
+    });
+  }
+  engine._render=render;
+  engine._flash=(id)=>{ flashing.add(id); setTimeout(()=>flashing.delete(id),1800); };
+  engine._toast=toast;
+  render();
+}
+
+/* =================================================================== */
+/* VIEW C — CHANNEL STRIP BOARD                                         */
+/* =================================================================== */
+function mountBoard(host, engine){
+  const toast=toaster(host);
+  const head=el('div','phead',
+    `<span class="brand">Timer · Board</span><span class="pcount">channels <b class="cnt">0</b>/${MAX}</span>`);
+  const clear=el('button','key sm',GL.clear+' CLEAR ALL'); clear.style.marginLeft='8px';
+  clear.addEventListener('click',()=>{ if(!engine.count())return; engine.cancelAll(); toast('cleared all'); render(); });
+  head.appendChild(clear);
+  const board=el('div','board');
+  host.append(head,board);
+
+  // create controls live in the trailing add-strip; build once, reuse the shared controller inside it
+  const addStrip=el('div','strip addstrip');
+  const create=makeCreate(engine,toast,()=>render(),{editablePresets:true});
+  create.style.margin='0'; create.style.background='transparent'; create.style.border='0'; create.style.padding='0'; create.style.width='100%';
+  addStrip.append(el('div','styp','＋ new channel'), create);
+
+  board.addEventListener('click', e=>{
+    const b=e.target.closest('[data-act]');
+    if(b){ const id=b.dataset.id,a=b.dataset.act;
+      if(a==='toggle')engine.toggle(id); else if(a==='cancel'){engine.cancel(id);toast('cancelled');}
+      else if(a==='lap'){engine.lap(id);toast('lap');} else if(a==='stop'){const r=engine.stopSave(id); if(r)toast(`saved “${r.label}”`,'gold');}
+      render(); return; }
+    const h=e.target.closest('[data-promote]'); if(h){ engine.promote(h.dataset.promote); render(); }
+  });
+
+  function render(){
+    head.querySelector('.cnt').textContent=engine.count();
+    const rows=engine.rows();
+    board.innerHTML='';
+    rows.forEach(r=>{
+      const strip=el('div','strip'+(r.primary?' prim':'')+(r.paused?' paused':''));
+      const pct = r.prog!=null ? Math.round(r.prog*100) : 100;
+      const colCls = 'column'+(r.type==='stopwatch'?' sw':'')+(r.warn?' warn':'');
+      const fillH = r.type==='stopwatch' ? 100 : pct;
+      const keys = r.type==='stopwatch'
+        ? `<button class="key sm" data-act="lap" data-id="${r.id}">LAP</button>
+           <button class="key sm red" data-act="stop" data-id="${r.id}">${GL.cancel}</button>`
+        : `<button class="key icon" data-act="toggle" data-id="${r.id}">${r.paused?GL.play:GL.paused}</button>
+           <button class="key icon red" data-act="cancel" data-id="${r.id}">${GL.cancel}</button>`;
+      strip.innerHTML=
+        `<div class="stitle" data-promote="${r.id}" title="promote to bar slot">
+           <span class="g">${r.glyph}</span><b>${r.label}</b></div>
+         <div class="styp">${r.typeLabel}${r.primary?' · bar':''}</div>
+         <div class="${colCls}"><div class="fill" style="height:${fillH}%"></div>
+           ${r.type!=='stopwatch'?`<div class="cap" style="bottom:${fillH}%"></div>`:''}</div>
+         <div class="srd">${r.disp}</div>
+         <div class="skeys">${keys}</div>`;
+      board.appendChild(strip);
+    });
+    board.appendChild(addStrip);
+  }
+  engine._render=render;
+  engine._flash=(id)=>{ flashing.add(id); setTimeout(()=>flashing.delete(id),1800); };
+  const flashing=new Set();
+  engine._flashSet=flashing;
+  engine._toast=toast;
+  render();
+}
+
+/* ---------- seed + wire the three panels ---------- */
+function seed(engine){
+  engine.add('pomodoro','', 'Deep work');
+  engine.add('timer','5m','Tea');
+  engine.add('timer','45s','Egg');            // fires ~45s in, demonstrates completion + notify
+  const sw=engine.add('stopwatch','','Debug run'); engine.lap(sw.id);
+  engine.add('alarm','@hour','Standup');
+}
+
+const engines=[];
+function boot(){
+  const A=new Engine(), B=new Engine(), C=new Engine();
+  seed(A); seed(B); seed(C);
+  mountRack(document.getElementById('panelA'), A);
+  mountTransport(document.getElementById('panelB'), B);
+  mountBoard(document.getElementById('panelC'), C);
+  engines.push(A,B,C);
+}
+boot();
+
+/* ---------- global tick: fire timers, flash + notify, re-render ---------- */
+function loop(){
+  for(const e of engines){
+    const fired=e.tick();
+    for(const f of fired){
+      e._flash && e._flash(f.id);
+      if(e._flashSet) e._flashSet.add(f.id), setTimeout(()=>e._flashSet.delete(f.id),1800);
+      e._toast && e._toast((f.kind==='done'?GL.alarm+' ':'')+f.title, f.kind==='done'?'red':'gold');
+      tryNotify(f.title, f.body);
+    }
+    e._render && e._render();
+  }
+}
+setInterval(loop, reduced?1000:250);
+</script>
+</body>
+</html>
author	Craig Jennings <c@cjennings.net>	2026-07-05 07:21:07 -0500
committer	Craig Jennings <c@cjennings.net>	2026-07-05 07:21:07 -0500
commit	721185f10d1e389ae3816734b7b8174d33900314 (patch)
tree	0e2a09a50e74e17200efc287e841d9e2bee8d8a3 /docs/prototypes/2026-07-02-timer-panel-prototype-1.html
parent	0af88d35a6f22c11e346970bec356bae0b74d4a2 (diff)
download	archsetup-main.tar.gz archsetup-main.zip