sportsing 0.1.2 → 0.2.0

package/src/overlay.ts

@@ -21,16 +21,93 @@ import { fenceSafe } from "./prompt-fence.ts";
  *  deep-link tile-scorer (AGT-543) and the post-landing warning (AGT-544). */
 export type WatchLang = "english" | "spanish";
 
+// ── Shared overlay chrome (page-side JS) ────────────────────────────────────
+// The pieces every stream overlay shares — FIFA's here and the NBA/NHL one in
+// league-overlay.ts: helper functions, the floating gear, the settings modal
+// (panel checkboxes + delay slider), and their wiring. Each overlay supplies
+// its own PANELS / D (defaults) and stats window, then splices these in.
+
+// HTML-escape AND quote-escape: textContent→innerHTML handles <>&, but these
+// values are also interpolated into double-quoted attributes (e.g. data-watch),
+// so escape \" and ' too — API-controlled fields (ids) must not break out of an attr.
+export const JS_ESC =
+  "function esc(s){var d=document.createElement('div');d.appendChild(document.createTextNode(String(s==null?'':s)));return d.innerHTML.replace(/\"/g,'&quot;').replace(/'/g,'&#39;');}";
+export const JS_ROW =
+  "function row(label,a,b){return '<div style=\"display:flex;justify-content:space-between;margin-top:3px\"><span>'+esc(a)+'</span><span style=\"color:#8b949e\">'+label+'</span><span>'+esc(b)+'</span></div>';}";
+export const JS_SHOW =
+  "function show(id,on){var e=document.getElementById(id);if(e)e.style.display=on?(e.dataset.disp||''):'none';}";
+export const JS_CB =
+  "function cb(key,label,checked){return '<label style=\"display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer\"><input type=\"checkbox\" data-k=\"'+key+'\"'+(checked?' checked':'')+'>'+esc(label)+'</label>';}";
+// A separately-draggable element: drag from `handle`; if the press doesn't
+// move (a click), fire onClick instead — lets the gear be both draggable and
+// a button. Presses that start on an input/button/label don't initiate a drag.
+export const JS_DRAGGABLE =
+  "function draggable(el,handle,onClick){handle.addEventListener('mousedown',function(e){if(e.target.closest('input,a')||(e.target.closest('button')&&e.target!==handle))return;var sx=e.clientX,sy=e.clientY,l=el.offsetLeft,t=el.offsetTop,moved=false;function mm(ev){var dx=ev.clientX-sx,dy=ev.clientY-sy;if(!moved&&Math.abs(dx)+Math.abs(dy)<4)return;moved=true;el.style.left=(l+dx)+'px';el.style.top=(t+dy)+'px';el.style.right='auto';el.style.bottom='auto';}function mu(){document.removeEventListener('mousemove',mm);document.removeEventListener('mouseup',mu);if(!moved&&onClick)onClick();}document.addEventListener('mousemove',mm);document.addEventListener('mouseup',mu);});}";
+export const JS_CALL =
+  "function call(o){if(window.__sbCall)window.__sbCall(JSON.stringify(o));}";
+
+/** Inside mk(): create the gear (`gear`) and the settings modal (`set`). */
+export const JS_SHELL_CREATE = [
+  // (a) the always-present floating gear — draggable, and a click toggles settings.
+  "  var gear=document.createElement('button');gear.id='sb-gear';gear.title='settings';gear.textContent='\\u2699';",
+  "  gear.style.cssText='position:fixed;top:16px;right:16px;z-index:2147483647;width:34px;height:34px;border-radius:50%;background:rgba(12,12,16,0.94);color:#8b949e;border:none;cursor:pointer;font-size:17px;line-height:34px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,0.5);user-select:none';",
+  "  document.body.appendChild(gear);",
+  // (b) the free-standing settings modal — toggled by the gear, draggable by its
+  // header, dismissed by its own close button.
+  "  var set=document.createElement('div');set.id='sb-set';",
+  "  set.style.cssText='position:fixed;top:58px;right:16px;z-index:2147483647;width:242px;border-radius:10px;background:rgba(12,12,16,0.96);color:#e6edf3;font:13px/1.45 system-ui,sans-serif;box-shadow:0 6px 22px rgba(0,0,0,0.6);user-select:none;display:none';",
+  "  set.innerHTML='"
+  + "<div id=\"sb-set-head\" style=\"display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid #21262d;cursor:move\"><b style=\"font-size:12px\">Overlay settings</b><button id=\"sb-set-x\" title=\"close\" style=\"background:none;border:none;color:#8b949e;cursor:pointer;font-size:16px;line-height:1;padding:0\">\\u00d7</button></div>"
+  + "<div style=\"padding:9px 13px 12px\">"
+  + "<div style=\"color:#8b949e;font-size:11px;margin-bottom:4px\">Show panels</div><div id=\"sb-cbs\"></div>"
+  + "<div style=\"margin-top:11px;font-size:11px\"><div style=\"display:flex;justify-content:space-between;color:#8b949e\"><span>delay</span><span id=\"sb-delay\">0s</span></div><input id=\"sb-slider\" type=\"range\" min=\"0\" max=\"300\" step=\"5\" value=\"0\" style=\"width:100%;margin-top:4px;accent-color:#1f6feb\"></div>"
+  + "<div style=\"color:#555;font-size:10px;margin-top:6px\">delay trails your stream to avoid spoilers (up to 5 min)</div></div>';",
+  "  document.body.appendChild(set);",
+];
+
+/** Style for the stats window (`stats`), created by each overlay's mk(). */
+export const STATS_CSS =
+  "position:fixed;top:16px;left:16px;z-index:2147483646;width:262px;border-radius:10px;background:rgba(12,12,16,0.94);color:#e6edf3;font:13px/1.45 system-ui,sans-serif;box-shadow:0 6px 22px rgba(0,0,0,0.6);user-select:none;display:none";
+
+/** Inside mk(), after `gear`/`set`/`stats` exist: dragging, the settings close
+ *  button, one checkbox per PANELS entry (checked from D), and the delay slider. */
+export const JS_SHELL_WIRE = [
+  "  function toggleSet(){set.style.display=set.style.display==='none'?'block':'none';}",
+  "  draggable(gear,gear,toggleSet);",
+  "  draggable(set,document.getElementById('sb-set-head'));",
+  "  draggable(stats,document.getElementById('sb-stats-head'));",
+  "  document.getElementById('sb-set-x').addEventListener('click',function(){set.style.display='none';});",
+  "  var cbs=document.getElementById('sb-cbs');cbs.innerHTML=PANELS.map(function(p){return cb(p[0],p[1],!!D[p[0]]);}).join('');",
+  "  cbs.addEventListener('change',function(e){if(e.target&&e.target.dataset.k)call({fn:'pref',key:e.target.dataset.k,on:e.target.checked});});",
+  "  document.getElementById('sb-slider').addEventListener('input',function(e){call({fn:'delay',set:Number(e.target.value)});});",
+];
+
+/** Inside window.__sb.update(d), with `P` = d.panels: keep the settings
+ *  controls (delay label, slider, checkboxes) in sync regardless of which
+ *  window is visible. */
+export const JS_SYNC_SETTINGS = [
+  "    var dl=document.getElementById('sb-delay'),sl=document.getElementById('sb-slider'),dv=d.delay||0;if(dl)dl.textContent=dv>=60?(Math.floor(dv/60)+'m '+(dv%60)+'s'):(dv+'s');if(sl&&document.activeElement!==sl)sl.value=dv;",
+  "    var cbx=document.querySelectorAll('#sb-cbs input[data-k]');for(var i=0;i<cbx.length;i++){var k=cbx[i].dataset.k;if(P[k]!==undefined)cbx[i].checked=!!P[k];}",
+];
+
+/** The buffered snapshot from `delaySec` ago — what a (delayed) stream is
+ *  showing: the newest one at or before the cutoff, else the oldest. Null when
+ *  nothing is buffered yet. */
+export function snapshotAtDelay<T>(buffer: { t: number; data: T }[], delaySec: number, now: number): T | null {
+  if (!buffer.length) return null;
+  const cutoff = now - delaySec * 1000;
+  let chosen = buffer[0]!;
+  for (const b of buffer) if (b.t <= cutoff) chosen = b;
+  return chosen.data;
+}
+
 const BOOTSTRAP = [
   "(function(){",
   "if(window.__sbInit)return;window.__sbInit=true;",
   "var D=" + JSON.stringify(OVERLAY_PANEL_DEFAULTS) + ";", // panel defaults — single source of truth (config.ts)
   "var PANELS=[['score','Score & clock'],['stats','Possession / shots'],['winprob','Win-probability breakdown'],['odds','Odds line'],['h2h','Head-to-head'],['events','Live events'],['scores','Other live scores'],['ask','Ask Claude'],['catchup','Get caught up']];",
-  // HTML-escape AND quote-escape: textContent→innerHTML handles <>&, but these
-  // values are also interpolated into double-quoted attributes (e.g. data-watch),
-  // so escape \" and ' too — API-controlled fields (ids) must not break out of an attr.
-  "function esc(s){var d=document.createElement('div');d.appendChild(document.createTextNode(String(s==null?'':s)));return d.innerHTML.replace(/\"/g,'&quot;').replace(/'/g,'&#39;');}",
-  "function row(label,a,b){return '<div style=\"display:flex;justify-content:space-between;margin-top:3px\"><span>'+esc(a)+'</span><span style=\"color:#8b949e\">'+label+'</span><span>'+esc(b)+'</span></div>';}",
+  JS_ESC,
+  JS_ROW,
   // One outcome row for the win-probability breakdown: a colour dot + label on
   // the left, the percentage right-aligned. (The old layout reused row(), whose
   // 3-column [a][label][b] shape scattered the three outcomes awkwardly.)
@@ -38,36 +115,19 @@ const BOOTSTRAP = [
   // depth — callers pass constants, but this keeps the contract safe). label/pct
   // are HTML-escaped via esc(); pct should already be a clamped number.
   "function wprow(col,label,pct){var sc=/^#[0-9a-fA-F]{3,8}$/.test(col)?col:'#8b949e';return '<div style=\"display:flex;justify-content:space-between;font-size:12px;padding:1px 0\"><span><span style=\"color:'+sc+'\">\\u25cf</span> '+esc(label)+'</span><b>'+esc(pct)+'%</b></div>';}",
-  "function show(id,on){var e=document.getElementById(id);if(e)e.style.display=on?(e.dataset.disp||''):'none';}",
+  JS_SHOW,
   "function fmtCd(ms){var s=Math.max(0,Math.floor(ms/1000));return 'in '+Math.floor(s/60)+':'+('0'+(s%60)).slice(-2);}",
   "function statusCell(state,kickoff,detail,id){if(state==='in')return '<span data-watch=\"'+esc(id)+'\" style=\"color:#3fb950;cursor:pointer;font-weight:700\">\\u25cf LIVE \\u25b6</span>';if(state==='pre'){var k=Date.parse(kickoff||'');var ms=k-Date.now();if(k&&ms>0&&ms<=1800000)return '<span style=\"color:#d29922;font-size:11px\">'+fmtCd(ms)+'</span>';if(k)return '<span style=\"color:#8b949e;font-size:11px\">'+esc(new Date(k).toLocaleTimeString([],{hour:'numeric',minute:'2-digit'}))+'</span>';}return '<span style=\"color:#8b949e;font-size:11px\">'+esc(detail||'')+'</span>';}",
-  "function cb(key,label,checked){return '<label style=\"display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer\"><input type=\"checkbox\" data-k=\"'+key+'\"'+(checked?' checked':'')+'>'+esc(label)+'</label>';}",
-  // A separately-draggable element: drag from `handle`; if the press doesn't
-  // move (a click), fire onClick instead — lets the gear be both draggable and
-  // a button. Presses that start on an input/button/label don't initiate a drag.
-  "function draggable(el,handle,onClick){handle.addEventListener('mousedown',function(e){if(e.target.closest('input,a')||(e.target.closest('button')&&e.target!==handle))return;var sx=e.clientX,sy=e.clientY,l=el.offsetLeft,t=el.offsetTop,moved=false;function mm(ev){var dx=ev.clientX-sx,dy=ev.clientY-sy;if(!moved&&Math.abs(dx)+Math.abs(dy)<4)return;moved=true;el.style.left=(l+dx)+'px';el.style.top=(t+dy)+'px';el.style.right='auto';el.style.bottom='auto';}function mu(){document.removeEventListener('mousemove',mm);document.removeEventListener('mouseup',mu);if(!moved&&onClick)onClick();}document.addEventListener('mousemove',mm);document.addEventListener('mouseup',mu);});}",
-  "function call(o){if(window.__sbCall)window.__sbCall(JSON.stringify(o));}",
+  JS_CB,
+  JS_DRAGGABLE,
+  JS_CALL,
   "function mk(){",
   "  if(!document.body){return setTimeout(mk,200);}",
   "  if(document.getElementById('sb-gear'))return;",
-  // (a) the always-present floating gear — draggable, and a click toggles settings.
-  "  var gear=document.createElement('button');gear.id='sb-gear';gear.title='settings';gear.textContent='\\u2699';",
-  "  gear.style.cssText='position:fixed;top:16px;right:16px;z-index:2147483647;width:34px;height:34px;border-radius:50%;background:rgba(12,12,16,0.94);color:#8b949e;border:none;cursor:pointer;font-size:17px;line-height:34px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,0.5);user-select:none';",
-  "  document.body.appendChild(gear);",
-  // (b) the free-standing settings modal — toggled by the gear, draggable by its
-  // header, dismissed by its own close button.
-  "  var set=document.createElement('div');set.id='sb-set';",
-  "  set.style.cssText='position:fixed;top:58px;right:16px;z-index:2147483647;width:242px;border-radius:10px;background:rgba(12,12,16,0.96);color:#e6edf3;font:13px/1.45 system-ui,sans-serif;box-shadow:0 6px 22px rgba(0,0,0,0.6);user-select:none;display:none';",
-  "  set.innerHTML='"
-  + "<div id=\"sb-set-head\" style=\"display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid #21262d;cursor:move\"><b style=\"font-size:12px\">Overlay settings</b><button id=\"sb-set-x\" title=\"close\" style=\"background:none;border:none;color:#8b949e;cursor:pointer;font-size:16px;line-height:1;padding:0\">\\u00d7</button></div>"
-  + "<div style=\"padding:9px 13px 12px\">"
-  + "<div style=\"color:#8b949e;font-size:11px;margin-bottom:4px\">Show panels</div><div id=\"sb-cbs\"></div>"
-  + "<div style=\"margin-top:11px;font-size:11px\"><div style=\"display:flex;justify-content:space-between;color:#8b949e\"><span>delay</span><span id=\"sb-delay\">0s</span></div><input id=\"sb-slider\" type=\"range\" min=\"0\" max=\"300\" step=\"5\" value=\"0\" style=\"width:100%;margin-top:4px;accent-color:#1f6feb\"></div>"
-  + "<div style=\"color:#555;font-size:10px;margin-top:6px\">delay trails your stream to avoid spoilers (up to 5 min)</div></div>';",
-  "  document.body.appendChild(set);",
+  ...JS_SHELL_CREATE,
   // (c) the free-standing stats window — appears only when >=1 panel is enabled.
   "  var stats=document.createElement('div');stats.id='sb-stats';",
-  "  stats.style.cssText='position:fixed;top:16px;left:16px;z-index:2147483646;width:262px;border-radius:10px;background:rgba(12,12,16,0.94);color:#e6edf3;font:13px/1.45 system-ui,sans-serif;box-shadow:0 6px 22px rgba(0,0,0,0.6);user-select:none;display:none';",
+  "  stats.style.cssText='" + STATS_CSS + "';",
   "  stats.innerHTML='"
   + "<div id=\"sb-stats-head\" style=\"display:flex;align-items:center;justify-content:space-between;padding:7px 11px;cursor:move;color:#8b949e;font-size:11px;border-bottom:1px solid #21262d\"><span>\\u26bd live</span><span id=\"sb-fresh\"></span></div>"
   + "<div style=\"padding:9px 13px 11px\">"
@@ -84,14 +144,7 @@ const BOOTSTRAP = [
   + "</div>';",
   "  document.body.appendChild(stats);",
   // wiring
-  "  function toggleSet(){set.style.display=set.style.display==='none'?'block':'none';}",
-  "  draggable(gear,gear,toggleSet);",
-  "  draggable(set,document.getElementById('sb-set-head'));",
-  "  draggable(stats,document.getElementById('sb-stats-head'));",
-  "  document.getElementById('sb-set-x').addEventListener('click',function(){set.style.display='none';});",
-  "  var cbs=document.getElementById('sb-cbs');cbs.innerHTML=PANELS.map(function(p){return cb(p[0],p[1],!!D[p[0]]);}).join('');",
-  "  cbs.addEventListener('change',function(e){if(e.target&&e.target.dataset.k)call({fn:'pref',key:e.target.dataset.k,on:e.target.checked});});",
-  "  document.getElementById('sb-slider').addEventListener('input',function(e){call({fn:'delay',set:Number(e.target.value)});});",
+  ...JS_SHELL_WIRE,
   "  stats.addEventListener('click',function(e){var t=e.target;while(t&&t!==stats){if(t.getAttribute&&t.getAttribute('data-watch')!==null){call({fn:'watch',id:t.getAttribute('data-watch')});return;}t=t.parentElement;}});",
   "  document.getElementById('sb-h2h').addEventListener('click',function(){document.getElementById('sb-h2h-out').textContent='Loading…';call({fn:'headToHead'});});",
   "  var askIn=document.getElementById('sb-ask-in');function doAsk(){var q=(askIn.value||'').trim();if(!q)return;document.getElementById('sb-ask-out').textContent='Asking Claude…';call({fn:'ask',q:q});}",
@@ -104,9 +157,7 @@ const BOOTSTRAP = [
   "function matchList(g){var h='';for(var i=0;i<g.length;i++){h+='<div style=\"display:flex;justify-content:space-between;gap:8px;padding:2px 0\"><span>'+esc(g[i].home)+' '+esc(g[i].hs)+' – '+esc(g[i].as)+' '+esc(g[i].away)+'</span>'+statusCell(g[i].state,g[i].kickoff,g[i].detail,g[i].id)+'</div>';}return h;}",
   "window.__sb={",
   "  update:function(d){mk();var P=d.panels||{};",
-  // keep the settings controls in sync regardless of which window is visible
-  "    var dl=document.getElementById('sb-delay'),sl=document.getElementById('sb-slider'),dv=d.delay||0;if(dl)dl.textContent=dv>=60?(Math.floor(dv/60)+'m '+(dv%60)+'s'):(dv+'s');if(sl&&document.activeElement!==sl)sl.value=dv;",
-  "    var cbx=document.querySelectorAll('#sb-cbs input[data-k]');for(var i=0;i<cbx.length;i++){var k=cbx[i].dataset.k;if(P[k]!==undefined)cbx[i].checked=!!P[k];}",
+  ...JS_SYNC_SETTINGS,
   // today (hub) view — the stats window shows the day's matches regardless of panels
   "    if(d.mode==='today'){show('sb-stats',true);['sb-pl-score','sb-pl-stats','sb-pl-winprob','sb-pl-odds','sb-pl-events','sb-pl-scores','sb-pl-h2h','sb-pl-ask','sb-pl-catchup'].forEach(function(i){show(i,false);});var td=document.getElementById('sb-pl-today');show('sb-pl-today',true);td.innerHTML=matchList(d.games||[])||'<span style=\"color:#8b949e\">no matches today</span>';var fr0=document.getElementById('sb-fresh');if(fr0)fr0.textContent='';return;}",
   // match view — the window appears only when something is enabled
@@ -118,8 +169,8 @@ const BOOTSTRAP = [
   "    show('sb-pl-events',!!P.events);if(P.events){var ev=d.events||[],eh='<div style=\"color:#8b949e;font-size:11px;margin-bottom:4px\">Live events</div>';if(!ev.length)eh+='<div style=\"color:#8b949e;font-size:11px\">none yet</div>';for(var j=0;j<ev.length;j++){eh+='<div style=\"display:flex;gap:8px;padding:2px 0;font-size:12px\"><span style=\"color:#8b949e;width:2.6rem\">'+esc(ev[j].clock)+'</span><b style=\"width:2.4rem\">'+esc(ev[j].team)+'</b><span style=\"flex:1\">'+esc(ev[j].text||ev[j].type)+'</span></div>';}document.getElementById('sb-pl-events').innerHTML=eh;}",
   "    show('sb-pl-scores',!!P.scores);if(P.scores){var os=d.otherScores||[],sh='<div style=\"color:#8b949e;font-size:11px;margin-bottom:4px\">Other live scores</div>';sh+=matchList(os)||'<div style=\"color:#8b949e;font-size:11px\">no other live matches</div>';document.getElementById('sb-pl-scores').innerHTML=sh;}",
   "    show('sb-pl-h2h',!!P.h2h);",
-  "    show('sb-pl-ask',!!P.ask);if(P.ask){var ast=document.getElementById('sb-ask-status');if(ast){if(d.serving){ast.textContent='\\u25cf Claude agent connected';ast.style.color='#3fb950';}else{ast.textContent='\\u25cb No agent \\u2014 run  /loop sportsing serve  to enable answers';ast.style.color='#d29922';}}}",
-  "    show('sb-pl-catchup',!!P.catchup);if(P.catchup){var cst=document.getElementById('sb-catchup-status');if(cst){if(d.serving){cst.textContent='\\u25cf Claude agent connected';cst.style.color='#3fb950';}else{cst.textContent='\\u25cb No agent \\u2014 run  /loop sportsing serve  to enable recaps';cst.style.color='#d29922';}}}",
+  "    show('sb-pl-ask',!!P.ask);if(P.ask){var ast=document.getElementById('sb-ask-status');if(ast){if(d.serving){ast.textContent='\\u25cf Claude agent connected';ast.style.color='#3fb950';}else{ast.textContent='\\u25cb No agent \\u2014 run  /loop sportsing fifa serve  to enable answers';ast.style.color='#d29922';}}}",
+  "    show('sb-pl-catchup',!!P.catchup);if(P.catchup){var cst=document.getElementById('sb-catchup-status');if(cst){if(d.serving){cst.textContent='\\u25cf Claude agent connected';cst.style.color='#3fb950';}else{cst.textContent='\\u25cb No agent \\u2014 run  /loop sportsing fifa serve  to enable recaps';cst.style.color='#d29922';}}}",
   "    var fr=document.getElementById('sb-fresh');if(fr)fr.textContent=d.at?'⟳ '+d.at:'';},",
   "  result:function(d){mk();var o=document.getElementById('sb-h2h-out');if(!o)return;var g=(d&&d.games)||[];var h='<div style=\"color:#8b949e;font-size:11px;margin-bottom:4px\">Past meetings — '+esc((d&&d.team)||'')+'</div>';if(!g.length)h+='<div style=\"color:#8b949e\">none found</div>';for(var i=0;i<g.length;i++){var col=g[i].result==='W'?'#3fb950':g[i].result==='L'?'#f85149':'#8b949e';h+='<div style=\"display:flex;gap:8px;padding:2px 0;border-bottom:1px solid #21262d\"><span style=\"color:#8b949e;width:5.5rem\">'+esc(g[i].date)+'</span><b style=\"width:2.5rem\">'+esc(g[i].score)+'</b><span style=\"color:'+col+'\">'+esc(g[i].result)+'</span></div>';}o.innerHTML=h;},",
   "  askResult:function(t){mk();var o=document.getElementById('sb-ask-out');if(o)o.textContent=t||'(no response)';},",
@@ -145,7 +196,7 @@ async function askViaBus(ev: EspnEvent, question: string): Promise<string> {
   // question would just sit until the 2-min timeout. This is the common gotcha:
   // opening the stream does NOT start an answerer.
   if (!(await isServing())) {
-    return "No Claude agent is serving. In a Claude session, run:  /loop sportsing serve  — then ask again.";
+    return "No Claude agent is serving. In a Claude session, run:  /loop sportsing fifa serve  — then ask again.";
   }
   const live = await getLiveMatch(ev.id).catch(() => null);
   const ctx = live
@@ -183,7 +234,7 @@ async function askViaBus(ev: EspnEvent, question: string): Promise<string> {
   // Generous window — a human-paced serving agent (sportsing fifa serve) needs
   // time to read, think, and reply; 30s was too tight and dropped questions.
   const answer = await waitForAnswer(id, 120_000);
-  return answer ?? "No Claude agent answered (waited 2 min). Keep one serving:  /loop sportsing serve";
+  return answer ?? "No Claude agent answered (waited 2 min). Keep one serving:  /loop sportsing fifa serve";
 }
 
 async function todaySnapshot(): Promise<Record<string, unknown>> {
@@ -385,7 +436,7 @@ export async function runOverlayStream(
   if (!(await isServing())) {
     console.log(c.yellow('💬 The overlay\'s "Ask Claude" / "Get caught up" need an answerer, or they show "No agent". In a Claude session, run either:'));
     console.log("     " + c.bold("/loop agent-setup") + c.dim("   — the blessed setup (see: sportsing fifa agent-setup)"));
-    console.log("     " + c.bold("/loop sportsing serve") + c.dim("   — the answerer loop on its own"));
+    console.log("     " + c.bold("/loop sportsing fifa serve") + c.dim("   — the answerer loop on its own"));
   }
 
   let session: CdpSession | undefined;
@@ -434,13 +485,7 @@ export async function runOverlayStream(
 
   // The buffered snapshot from `delaySec` ago — what the user's (delayed) stream
   // is actually showing. Used both to render and to build a spoiler-safe recap.
-  const delayedSnapshot = (): Record<string, unknown> | null => {
-    if (!buffer.length) return null;
-    const cutoff = Date.now() - delaySec * 1000;
-    let chosen = buffer[0]!;
-    for (const b of buffer) if (b.t <= cutoff) chosen = b;
-    return chosen.data;
-  };
+  const delayedSnapshot = (): Record<string, unknown> | null => snapshotAtDelay(buffer, delaySec, Date.now());
 
   const renderDelayed = () => {
     const data = delayedSnapshot();

package/src/playoff-bracket.ts

@@ -0,0 +1,384 @@
+// Playoff brackets for ESPN-backed leagues (NBA, NHL): grouping postseason
+// games into series, ordering them as a bracket, projecting a bracket from
+// standings before the postseason, and rendering both. Pure — every fetch
+// happens in the command (src/commands/league-bracket.ts) — so it's unit-tested
+// without network.
+//
+// Formats are keyed by ESPN league path, like standings.ts's layouts: they
+// describe each league's postseason shape, not anything about the CLI.
+
+import { c, pad } from "./ansi.ts";
+import { LEAGUES, type Conference, type EspnStandingsEntry, type EspnStandingsGroup, type League, type PlayoffGame } from "./espn.ts";
+import { fmtDate } from "./format.ts";
+import type { Game } from "./game.ts";
+import { sortEntries } from "./standings.ts";
+
+export interface BracketFormat {
+  /** How a bracket is projected from standings (and which standings level it
+   *  needs: NBA conference tables, NHL division tables). */
+  projection: "nba" | "nhl";
+  /** Whether the league has a play-in (ESPN season type 5) to fetch and show. */
+  playIn: boolean;
+  /** Round names, first round → league final. */
+  rounds: [string, string, string, string];
+  /** Wins needed to take a series (every round is best-of-7 in both leagues). */
+  winsNeeded: number;
+  /** Standings stat the projection ranks by, as in the standings view. */
+  rankBy: string;
+}
+
+export const BRACKET_FORMATS: Partial<Record<League, BracketFormat>> = {
+  [LEAGUES.nba]: {
+    projection: "nba",
+    playIn: true,
+    rounds: ["First Round", "Conference Semifinals", "Conference Finals", "NBA Finals"],
+    winsNeeded: 4,
+    rankBy: "winPercent",
+  },
+  [LEAGUES.nhl]: {
+    projection: "nhl",
+    playIn: false,
+    rounds: ["First Round", "Second Round", "Conference Final", "Stanley Cup Final"],
+    winsNeeded: 4,
+    rankBy: "points",
+  },
+};
+
+/**
+ * `--season` input → ESPN season year (the year the season ends): "2026" or
+ * "2025-26" → 2026. Null if it's neither.
+ */
+export function parseSeasonArg(input: string): number | null {
+  const q = input.trim();
+  if (/^\d{4}$/.test(q)) return Number(q);
+  const m = /^(\d{4})-(\d{2})$/.exec(q);
+  if (!m) return null;
+  const start = Number(m[1]);
+  return (start + 1) % 100 === Number(m[2]) ? start + 1 : null;
+}
+
+/** ESPN season year → display name, e.g. 2026 → "2025-26". */
+export function seasonLabel(year: number): string {
+  return `${year - 1}-${String(year % 100).padStart(2, "0")}`;
+}
+
+const CONFERENCES: Conference[] = ["East", "West"];
+const CONFERENCE_NAMES: Record<Conference, string> = { East: "Eastern Conference", West: "Western Conference" };
+
+/** "Eastern Conference" / "East" / "Eastern" → East; null if neither. */
+export function conferenceOf(name: string): Conference | null {
+  const q = name.trim().toLowerCase();
+  if (q.startsWith("east")) return "East";
+  if (q.startsWith("west")) return "West";
+  return null;
+}
+
+// ── Series (the postseason itself) ───────────────────────────────────────────
+
+export interface SeriesTeam {
+  id: string;
+  name: string;
+  abbreviation: string;
+  /** Seed label, e.g. "1"; "" when unknown. */
+  seed: string;
+  wins: number;
+}
+
+export interface Series {
+  round: number;
+  conference: Conference | null;
+  /** Higher seed first (home in game 1). */
+  teams: [SeriesTeam, SeriesTeam];
+  /** The series' games, oldest first. */
+  games: Game[];
+}
+
+const pairKey = (a: string, b: string) => [a, b].sort().join("|");
+
+/** Winner's team id of a finished game; null if not final or level. */
+export function gameWinner(g: Game): string | null {
+  if (g.state !== "post") return null;
+  const h = Number(g.home.score);
+  const a = Number(g.away.score);
+  if (!Number.isFinite(h) || !Number.isFinite(a) || h === a) return null;
+  return h > a ? g.home.id : g.away.id;
+}
+
+/**
+ * Group postseason games (play-in excluded) into series: one per pair of team
+ * ids, wins counted from finished games. Game-one home team is listed first —
+ * that's the higher seed. Duplicates (the same game from both teams'
+ * schedules) count once; games with an unknown side (TBD) are skipped.
+ */
+export function buildSeries(games: PlayoffGame[], seeds: ReadonlyMap<string, string>): Series[] {
+  const byPair = new Map<string, { pg: PlayoffGame; games: Map<string, Game> }>();
+  for (const pg of games) {
+    const g = pg.game;
+    if (pg.playIn || pg.round === null || !g.home.id || !g.away.id) continue;
+    const key = pairKey(g.home.id, g.away.id);
+    const entry = byPair.get(key) ?? byPair.set(key, { pg, games: new Map() }).get(key)!;
+    entry.games.set(g.id, g);
+  }
+  return [...byPair.values()].map(({ pg, games: byId }) => {
+    const list = [...byId.values()].sort((a, b) => Date.parse(a.date) - Date.parse(b.date));
+    const first = list[0]!;
+    const team = (side: Game["home"]): SeriesTeam => ({
+      id: side.id,
+      name: side.name,
+      abbreviation: side.abbreviation,
+      seed: seeds.get(side.id) ?? "",
+      wins: list.filter((g) => gameWinner(g) === side.id).length,
+    });
+    return { round: pg.round!, conference: pg.conference, teams: [team(first.home), team(first.away)], games: list };
+  });
+}
+
+/** Finished series' winner, else null. */
+export function seriesWinner(s: Series, winsNeeded: number): SeriesTeam | null {
+  return s.teams.find((t) => t.wins >= winsNeeded) ?? null;
+}
+
+/** "OKC wins 4-0", "NY leads 3-1", "Tied 2-2", "Not started". */
+export function seriesStatus(s: Series, winsNeeded: number): string {
+  const [a, b] = s.teams;
+  const w = seriesWinner(s, winsNeeded);
+  const label = (t: SeriesTeam) => t.abbreviation || t.name;
+  if (w) {
+    const l = w === a ? b : a;
+    return `${label(w)} wins ${w.wins}-${l.wins}`;
+  }
+  if (a.wins === 0 && b.wins === 0) return "Not started";
+  if (a.wins === b.wins) return `Tied ${a.wins}-${b.wins}`;
+  const [lead, trail] = a.wins > b.wins ? [a, b] : [b, a];
+  return `${label(lead)} leads ${lead.wins}-${trail.wins}`;
+}
+
+const seedNum = (t: SeriesTeam) => Number(t.seed) || Infinity;
+const bestSeed = (s: Series) => Math.min(...s.teams.map(seedNum));
+
+/**
+ * Order one conference's (or the final's) series as a bracket: the latest round
+ * by best seed, then each earlier round by following every team back to the
+ * series it came from, so the two series that feed a later one sit together.
+ * Series no later round reaches fall in after, by best seed.
+ */
+export function bracketOrder(series: Series[]): Series[] {
+  const rounds = [...new Set(series.map((s) => s.round))].sort((a, b) => b - a);
+  const out: Series[] = [];
+  let later: Series[] = [];
+  for (const r of rounds) {
+    const inRound = series.filter((s) => s.round === r).sort((a, b) => bestSeed(a) - bestSeed(b));
+    const ordered: Series[] = [];
+    for (const parent of later) {
+      for (const t of parent.teams) {
+        const feeder = inRound.find((s) => !ordered.includes(s) && s.teams.some((x) => x.id === t.id));
+        if (feeder) ordered.push(feeder);
+      }
+    }
+    for (const s of inRound) if (!ordered.includes(s)) ordered.push(s);
+    out.unshift(...ordered);
+    later = ordered;
+  }
+  return out.sort((a, b) => a.round - b.round);
+}
+
+// ── Projection (before the postseason) ───────────────────────────────────────
+
+export interface Slot {
+  /** Seed label, e.g. "1", "WC2", "C3". */
+  seed: string;
+  /** Null for a slot decided later (an NBA play-in winner). */
+  team: EspnStandingsEntry | null;
+  /** Shown instead of a team, e.g. "Play-in winner". */
+  placeholder?: string;
+}
+
+export interface ProjectedConference {
+  conference: Conference;
+  /** First-round matchups in bracket order (adjacent pairs meet next round). */
+  matchups: [Slot, Slot][];
+  /** NBA play-in games (7 v 8, 9 v 10); empty for the NHL. */
+  playIn: [Slot, Slot][];
+}
+
+const slot = (seed: string, team: EspnStandingsEntry): Slot => ({ seed, team });
+
+/**
+ * NBA: per conference, rank by record (seed breaks ties); 1-6 are in, 7-10 go
+ * to the play-in (7 v 8 for the 7 seed, 9 v 10 for a shot at the 8 seed).
+ * First round in bracket order: 1 v 8, 4 v 5, 3 v 6, 2 v 7. `groups` are
+ * conference tables.
+ */
+export function projectNba(groups: EspnStandingsGroup[], rankBy: string): ProjectedConference[] {
+  const out: ProjectedConference[] = [];
+  for (const conference of CONFERENCES) {
+    const g = groups.find((x) => conferenceOf(x.name) === conference);
+    if (!g) continue;
+    const ranked = sortEntries(g.entries, rankBy);
+    if (ranked.length < 10) continue;
+    const s = (n: number) => slot(String(n), ranked[n - 1]!);
+    const tbd = (n: number): Slot => ({ seed: String(n), team: null, placeholder: "Play-in winner" });
+    out.push({
+      conference,
+      matchups: [
+        [s(1), tbd(8)],
+        [s(4), s(5)],
+        [s(3), s(6)],
+        [s(2), tbd(7)],
+      ],
+      playIn: [
+        [s(7), s(8)],
+        [s(9), s(10)],
+      ],
+    });
+  }
+  return out;
+}
+
+/**
+ * NHL: per conference, the top three of each division plus two wild cards (the
+ * next-best two in the conference). The better division winner plays WC2, the
+ * other WC1; second and third in each division meet. `groups` are division
+ * tables whose `parent` is the conference. Seeds are labelled by division
+ * initial ("C1") or wild card ("WC1").
+ */
+export function projectNhl(groups: EspnStandingsGroup[], rankBy: string): ProjectedConference[] {
+  const out: ProjectedConference[] = [];
+  for (const conference of CONFERENCES) {
+    const divisions = groups
+      .filter((g) => g.parent && conferenceOf(g.parent.name) === conference)
+      .map((g) => ({ g, ranked: sortEntries(g.entries, rankBy) }));
+    if (divisions.length !== 2 || divisions.some((d) => d.ranked.length < 3)) continue;
+    const qualified = new Set(divisions.flatMap((d) => d.ranked.slice(0, 3).map((e) => e.teamId)));
+    const rest = sortEntries(
+      divisions.flatMap((d) => d.ranked.filter((e) => !qualified.has(e.teamId))),
+      rankBy,
+    );
+    if (rest.length < 2) continue;
+    const winners = sortEntries(divisions.map((d) => d.ranked[0]!), rankBy);
+    const ordered = winners.map((w) => divisions.find((d) => d.ranked[0] === w)!);
+    const wildcards = [slot("WC1", rest[0]!), slot("WC2", rest[1]!)];
+    const matchups: [Slot, Slot][] = [];
+    ordered.forEach((d, i) => {
+      const initial = (d.g.name.trim()[0] ?? "?").toUpperCase();
+      const s = (n: number) => slot(`${initial}${n}`, d.ranked[n - 1]!);
+      matchups.push([s(1), wildcards[1 - i]!], [s(2), s(3)]);
+    });
+    out.push({ conference, matchups, playIn: [] });
+  }
+  return out;
+}
+
+// ── Rendering ────────────────────────────────────────────────────────────────
+
+const NAME_W = 26;
+
+function teamCell(name: string, seed: string, fav: boolean): string {
+  const label = `${seed ? `(${seed}) ` : ""}${name}`;
+  return fav ? c.bold(c.yellow(`★ ${label}`)) : `  ${label}`;
+}
+
+function slotCell(s: Slot, favoriteIds: ReadonlySet<string>): string {
+  if (!s.team) return c.dim(`  (${s.seed}) ${s.placeholder ?? "TBD"}`);
+  return teamCell(s.team.team, s.seed, favoriteIds.has(s.team.teamId));
+}
+
+function matchupLine(a: string, b: string): string {
+  return "    " + pad(a, NAME_W + 2) + c.dim(" vs ") + b;
+}
+
+function seriesLine(s: Series, fmt: BracketFormat, favoriteIds: ReadonlySet<string>, now: number): string {
+  const [a, b] = s.teams;
+  const winner = seriesWinner(s, fmt.winsNeeded);
+  const cell = (t: SeriesTeam) => {
+    const txt = teamCell(t.name, t.seed, favoriteIds.has(t.id));
+    return winner && winner !== t ? c.dim(txt) : txt;
+  };
+  const mark = winner ? c.green("✓") : c.dim("·");
+  let tail = seriesStatus(s, fmt.winsNeeded);
+  if (!winner) {
+    const live = s.games.find((g) => g.state === "in");
+    const next = s.games.find((g) => g.state === "pre" && Date.parse(g.date) >= now);
+    if (live) tail += ` · ${c.red("LIVE")} ${live.away.abbreviation} ${live.away.score}-${live.home.score} ${live.home.abbreviation}`;
+    else if (next) tail += ` · Game ${s.games.indexOf(next) + 1} ${fmtDate(next.date)}`;
+  }
+  const score = c.bold(`${a.wins}-${b.wins}`);
+  return `  ${mark} ` + pad(cell(a), NAME_W + 2) + " " + pad(score, 5) + " " + pad(cell(b), NAME_W + 2) + " " + c.dim(tail);
+}
+
+function playInLine(pg: PlayoffGame, favoriteIds: ReadonlySet<string>): string {
+  const g = pg.game;
+  const cell = (t: Game["home"]) => teamCell(t.name, "", favoriteIds.has(t.id));
+  const score = g.state === "pre" ? c.dim(fmtDate(g.date)) : c.bold(`${g.away.score}-${g.home.score}`);
+  const w = gameWinner(g);
+  const mark = w ? c.green("✓") : g.state === "in" ? c.red("●") : c.dim("·");
+  return `  ${mark} ` + pad(cell(g.away), NAME_W + 2) + " @ " + pad(cell(g.home), NAME_W + 2) + " " + score + "  " + c.dim(pg.label);
+}
+
+/**
+ * Render a postseason in progress (or finished): the NBA play-in, then each
+ * conference's rounds, then the league final. Series in bracket order; series
+ * scores, the winner ticked, and the next game or live score for open series.
+ */
+export function renderBracket(
+  fmt: BracketFormat,
+  series: Series[],
+  playIn: PlayoffGame[],
+  favoriteIds: ReadonlySet<string>,
+  now = Date.now(),
+): string {
+  const lines: string[] = [];
+  if (playIn.length > 0) {
+    lines.push("", c.bold(c.cyan("Play-In")));
+    for (const conference of [...CONFERENCES, null]) {
+      const games = playIn
+        .filter((pg) => pg.conference === conference)
+        .sort((a, b) => Date.parse(a.game.date) - Date.parse(b.game.date));
+      if (games.length === 0) continue;
+      lines.push(c.bold(`  ${conference ? CONFERENCE_NAMES[conference] : "Other"}`));
+      for (const pg of games) lines.push("  " + playInLine(pg, favoriteIds));
+    }
+  }
+  // Conference rounds under their conference (round headings shown); the
+  // league final on its own; anything ESPN didn't tag with a conference under
+  // "Other" rather than dropped.
+  const conferenceRound = (s: Series) => s.round < 4;
+  const sections: [string, Series[], boolean][] = [
+    ...CONFERENCES.map((conf): [string, Series[], boolean] => [
+      CONFERENCE_NAMES[conf],
+      series.filter((s) => s.conference === conf && conferenceRound(s)),
+      true,
+    ]),
+    ["Other", series.filter((s) => s.conference === null && conferenceRound(s)), true],
+    [fmt.rounds[3], series.filter((s) => !conferenceRound(s)), false],
+  ];
+  for (const [heading, list, showRounds] of sections) {
+    if (list.length === 0) continue;
+    lines.push("", c.bold(c.cyan(heading)));
+    let round = 0;
+    for (const s of bracketOrder(list)) {
+      if (showRounds && s.round !== round) {
+        round = s.round;
+        lines.push(c.bold(`  ${fmt.rounds[round - 1] ?? `Round ${round}`}`));
+      }
+      lines.push("  " + seriesLine(s, fmt, favoriteIds, now));
+    }
+  }
+  return lines.join("\n");
+}
+
+/** Render a projected bracket: per conference, the play-in (NBA) and the
+ *  first-round matchups in bracket order. */
+export function renderProjection(fmt: BracketFormat, conferences: ProjectedConference[], favoriteIds: ReadonlySet<string>): string {
+  const lines: string[] = [];
+  for (const p of conferences) {
+    lines.push("", c.bold(c.cyan(CONFERENCE_NAMES[p.conference])));
+    if (p.playIn.length > 0) {
+      lines.push(c.bold("  Play-In"));
+      for (const [a, b] of p.playIn) lines.push(matchupLine(slotCell(a, favoriteIds), slotCell(b, favoriteIds)));
+    }
+    lines.push(c.bold(`  ${fmt.rounds[0]}`));
+    for (const [a, b] of p.matchups) lines.push(matchupLine(slotCell(a, favoriteIds), slotCell(b, favoriteIds)));
+  }
+  return lines.join("\n");
+}