crosspad-mcp-server 9.1.1 → 9.2.0

package/tracer/ui/main.js

@@ -0,0 +1,30 @@
+/* Entry point: wire the modules, paint initial state, open the socket, start the
+   render loop. Imported as a module from index.html. */
+
+import { initPlot } from "./plot.js";
+import { connect, setConn, setBanner } from "./connection.js";
+import { initWatchlist } from "./watchlist.js";
+import { initConfig } from "./config.js";
+import { initToolbar } from "./toolbar.js";
+import { loadSymbols } from "./symbols.js";
+
+/* Collapsible side panels. */
+function initPanels(){
+  document.querySelectorAll(".panel h3[data-tgl]").forEach(h=>{
+    h.onclick=()=>{
+      const p=h.parentElement; p.classList.toggle("collapsed");
+      const arr=h.querySelector(".arrow"); if(arr) arr.textContent=p.classList.contains("collapsed")?"▸":"▾";
+    };
+  });
+}
+
+initConfig();
+initWatchlist();
+initToolbar();
+initPanels();
+initPlot();              // grabs the canvas, wires input, starts the render loop
+
+setConn("reconnecting"); // initial indicator paint before the first open
+setBanner("connecting…","idle");
+connect();
+loadSymbols();           // populate autocomplete (graceful if unavailable)

package/tracer/ui/plot.js

@@ -0,0 +1,337 @@
+/* Canvas rendering + plot interaction (zoom/pan/hover). Owns the render loop,
+   the visible-range math, signal paths, lane mode, the crosshair overlay, and
+   the grid. View/hover overrides live on the shared `state` object. */
+
+import { state, sigs, cfg } from "./state.js";
+import { fmt, nearestSample } from "./util.js";
+import { updateStats } from "./stats.js";
+import { setWindow } from "./config.js";
+
+let cv=null, ctx=null;
+
+/* Render-style knobs, swapped up during PNG export (thicker lines, lighter grid,
+   bigger fonts) and restored after. S scales fonts; the export canvas is also
+   drawn at a higher pixel size for a sharp, legible image. */
+let LW=1.25;            // signal line width
+let GRID="#1c1c1c";     // grid line color
+let S=1;                // font scale
+
+/* Resize the backing store to the element's CSS size. */
+export function fit(){ if(cv){ cv.width=cv.clientWidth; cv.height=cv.clientHeight; } }
+
+/* ---------- visible time range ---------- */
+function dataBounds(){
+  let lo=Infinity,hi=-Infinity;
+  for(const[,s]of sigs){const d=s.data;if(d.length){if(d[0].t<lo)lo=d[0].t;if(d[d.length-1].t>hi)hi=d[d.length-1].t;}}
+  return [lo,hi];
+}
+export function curRange(){
+  const [lo,hi]=dataBounds();
+  if(!isFinite(lo))return[0,1];
+  if(state.viewT0!=null)return[state.viewT0,state.viewT1];
+  if(cfg.full)return[lo,hi>lo?hi:lo+1];
+  return[Math.max(lo,hi-cfg.windowSec),hi];
+}
+
+/* Shared-mode Y bounds: manual override (Shift+wheel) wins, else auto-fit. */
+export function sharedYBounds(t0,t1){
+  if(state.viewY0!=null&&state.viewY1!=null)return[state.viewY0,state.viewY1];
+  let lo=Infinity,hi=-Infinity;
+  for(const[,s]of sigs){if(!s.on)continue;
+    for(const p of s.data){if(p.t<t0||p.t>t1)continue;if(p.v<lo)lo=p.v;if(p.v>hi)hi=p.v;}}
+  if(!isFinite(lo)){lo=0;hi=1;}
+  if(hi===lo)hi=lo+1;
+  return[lo,hi];
+}
+
+/* Value bounds across all on-signals' full history (for the Y pan/zoom clamp). */
+function valueBounds(){
+  let lo=Infinity,hi=-Infinity;
+  for(const[,s]of sigs){if(!s.on)continue;for(const p of s.data){if(p.v<lo)lo=p.v;if(p.v>hi)hi=p.v;}}
+  return[lo,hi];
+}
+
+/* Clamp a manual [a,b] override against data [lo,hi]. A small overscroll margin
+   (a fraction of the view span) is allowed past each end so the user SEES a bit
+   of empty space at the edge — a clear "nothing here" instead of the pan
+   appearing to lock for no reason. Returns clamped [a,b] or null. */
+const OVERSCROLL=0.08;
+function clampSpan(a,b,lo,hi){
+  if(a==null||!isFinite(lo)||hi<=lo)return null;
+  const span=b-a; if(!(span>0))return null;
+  const ov=span*OVERSCROLL;
+  const LO=lo-ov, HI=hi+ov;              // edges may sit one margin past the data
+  if(span>=HI-LO)return[LO,HI];          // zoomed out past data+margins → snap
+  if(a<LO){ a=LO; b=LO+span; }
+  if(b>HI){ b=HI; a=HI-span; }
+  return[a,b];
+}
+
+/* Keep the manual time view inside the data's time extent — you can't scroll the
+   signal off-screen or pan into empty space beyond where it reaches. */
+function clampViewTime(){
+  const [lo,hi]=dataBounds();
+  const c=clampSpan(state.viewT0,state.viewT1,lo,hi);
+  if(c){ state.viewT0=c[0]; state.viewT1=c[1]; }
+}
+/* Same for the shared-mode Y override (Shift+wheel). */
+function clampViewY(){
+  const [lo,hi]=valueBounds();
+  const c=clampSpan(state.viewY0,state.viewY1,lo,hi);
+  if(c){ state.viewY0=c[0]; state.viewY1=c[1]; }
+}
+
+/* Stroke one signal's visible polyline. step=true → zero-order hold (logic look). */
+function plotPath(s,X,Y,t0,t1,step){
+  ctx.strokeStyle=s.color;ctx.lineWidth=LW;ctx.beginPath();
+  const d=s.data;let first=true,py=0;
+  for(let i=0;i<d.length;i++){
+    const p=d[i]; if(p.t<t0||p.t>t1)continue;
+    const x=X(p.t),y=Y(p.v);
+    if(first){ctx.moveTo(x,y);first=false;}
+    else{ if(step)ctx.lineTo(x,py); ctx.lineTo(x,y); }
+    py=y;
+  }
+  ctx.stroke();
+}
+
+/* Lane mode: stack each visible signal in its own auto-scaled band with a colored
+   label. DISCRETE signals (all-integer, small range — bits / flags) render as a
+   zero-order-hold staircase (the logic-analyzer look); ANALOG signals render with
+   straight interpolation like shared mode, so they don't look artificially blocky.
+   Returns plotted [{n,s,Y}]. */
+function renderLanesPath(visible,t0,t1,X,W,H){
+  const plotted=[];const n=visible.length; if(!n)return plotted;
+  const laneH=H/n, m=6;
+  for(let i=0;i<n;i++){
+    const [name,s]=visible[i];
+    const top=i*laneH, bot=(i+1)*laneH;
+    if(i>0){ctx.strokeStyle="#1c1c1c";ctx.lineWidth=1;
+      ctx.beginPath();ctx.moveTo(0,top+0.5);ctx.lineTo(W,top+0.5);ctx.stroke();}
+    let lo=Infinity,hi=-Infinity,allInt=true;
+    for(const p of s.data){if(p.t<t0||p.t>t1)continue;
+      if(p.v<lo)lo=p.v;if(p.v>hi)hi=p.v;
+      if(allInt&&!Number.isInteger(p.v))allInt=false;}
+    if(!isFinite(lo)){lo=0;hi=1;} if(hi===lo)hi=lo+1;
+    const span=(hi-lo)||1;
+    const Y=(v)=>bot-m-((v-lo)/span)*(laneH-2*m);
+    const stepMode = allInt && (hi-lo)<=16;   // discrete → staircase; analog → linear
+    plotPath(s,X,Y,t0,t1,stepMode);
+    plotted.push({n:name,s,Y});
+    // top-left: lane max value (muted) + signal name (colored); bottom-left: min.
+    ctx.font=`${10*S}px monospace`;
+    const hiTxt=fmt(hi), loTxt=fmt(lo);
+    const hiW=ctx.measureText(hiTxt).width, nameW=ctx.measureText(name).width;
+    ctx.fillStyle="#000a";ctx.fillRect(2*S,top+2*S,hiW+6*S+nameW+6*S,12*S);
+    ctx.fillStyle="#888";ctx.fillText(hiTxt,4*S,top+11*S);
+    ctx.fillStyle=s.color;ctx.fillText(name,4*S+hiW+6*S,top+11*S);
+    const loW=ctx.measureText(loTxt).width;
+    ctx.fillStyle="#000a";ctx.fillRect(2*S,bot-13*S,loW+4*S,12*S);
+    ctx.fillStyle="#888";ctx.fillText(loTxt,4*S,bot-4*S);
+  }
+  return plotted;
+}
+
+/* Crosshair + on-canvas legend overlay (top-right). The legend always identifies
+   colors; while hovering it also shows each signal's value at the cursor time,
+   draws a dot on each curve, and a dashed vertical line + time label. */
+function drawOverlay(plotted,t0,t1,X,W,H){
+  const span=(t1-t0)||1;
+  const hx=state.hoverX;
+  const hover=hx!=null&&hx>=0&&hx<=W;
+  const hoverT=hover?t0+(hx/W)*span:null;
+  if(hover){
+    ctx.save();
+    ctx.strokeStyle="#888";ctx.lineWidth=1;ctx.setLineDash([4,3]);
+    ctx.beginPath();ctx.moveTo(hx+0.5,0);ctx.lineTo(hx+0.5,H);ctx.stroke();
+    ctx.setLineDash([]);
+    const tl=hoverT.toFixed(3)+"s"; ctx.font="10px monospace";
+    const tw=ctx.measureText(tl).width+6; let lx=hx+4; if(lx+tw>W)lx=hx-4-tw;
+    ctx.fillStyle="#000c";ctx.fillRect(lx,2,tw,13);
+    ctx.fillStyle="#bbb";ctx.fillText(tl,lx+3,12);
+    ctx.restore();
+  }
+  drawLegend(plotted,X,W,hover,hoverT);
+}
+
+/* On-canvas legend box (top-right): color + name, plus the value at the cursor
+   while hovering (also draws a dot on each curve). Shared by the live overlay
+   and the PNG export (always-on, no crosshair). */
+function drawLegend(plotted,X,W,hover,hoverT){
+  const rows=[];
+  for(const pl of plotted){
+    let val=null;
+    if(hover){
+      const p=nearestSample(pl.s.data,hoverT);
+      if(p){val=p.v; const x=X(p.t),y=pl.Y(p.v);
+        if(isFinite(x)&&isFinite(y)){
+          ctx.fillStyle=pl.s.color;ctx.beginPath();ctx.arc(x,y,3*S,0,Math.PI*2);ctx.fill();
+          ctx.strokeStyle="#000";ctx.lineWidth=1;ctx.stroke();
+        }}
+    }
+    rows.push({name:pl.n,color:pl.s.color,val});
+  }
+  if(!rows.length)return;
+  ctx.save();ctx.font=`${11*S}px monospace`;
+  let maxName=0;for(const r of rows)maxName=Math.max(maxName,ctx.measureText(r.name).width);
+  let maxVal=0;if(hover)for(const r of rows)maxVal=Math.max(maxVal,ctx.measureText(fmt(r.val)).width);
+  const pad=6*S,sw=9*S,gap=8*S,lh=14*S;
+  const boxW=pad+sw+5*S+maxName+(hover?gap+maxVal:0)+pad;
+  const boxH=pad+rows.length*lh+pad-2*S;
+  const bx=W-boxW-6*S,by=6*S;
+  ctx.fillStyle="#000a";ctx.fillRect(bx,by,boxW,boxH);
+  ctx.strokeStyle="#2a2a2a";ctx.strokeRect(bx+0.5,by+0.5,boxW,boxH);
+  let y=by+pad+9*S;
+  for(const r of rows){
+    ctx.fillStyle=r.color;ctx.fillRect(bx+pad,y-8*S,sw,sw);
+    ctx.fillStyle="#ccc";ctx.fillText(r.name,bx+pad+sw+5*S,y);
+    if(hover){ctx.fillStyle="#fff";ctx.fillText(fmt(r.val),bx+pad+sw+5*S+maxName+gap,y);}
+    y+=lh;
+  }
+  ctx.restore();
+}
+
+/* ---------- grid / axes ---------- */
+function drawGrid(t0,t1,W,H,ylo,yhi){
+  ctx.strokeStyle=GRID;ctx.lineWidth=1;ctx.fillStyle="#888";ctx.font=`${10*S}px monospace`;
+  for(let i=0;i<=6;i++){
+    const x=W*i/6; ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();
+    const tt=t0+(t1-t0)*i/6;
+    ctx.fillText(tt.toFixed(2)+"s",Math.min(x+2*S,W-40*S),H-2*S);
+  }
+  if(cfg.yMode==="shared"){
+    for(let i=0;i<=4;i++){
+      const y=H*i/4; ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();
+      const vv=yhi-(yhi-ylo)*i/4;
+      ctx.fillText(fmt(vv),2*S,Math.max(10*S,y+10*S));
+    }
+  }
+}
+
+/* Paint grid + every visible signal for the current view into the active canvas
+   (cv/ctx). Returns the `plotted` list ({n,s,Y}) for overlays. Shared by the
+   live render loop and the PNG exporter. */
+function paintSignals(t0,t1,W,H){
+  const span=(t1-t0)||1;
+  const X=(t)=>(t-t0)/span*W;
+  const visible=[...sigs].filter(([,s])=>s.on);
+  if(cfg.yMode==="lanes"){
+    drawGrid(t0,t1,W,H,0,1);
+    return { X, plotted: renderLanesPath(visible,t0,t1,X,W,H) };
+  }
+  const [ylo,yhi]=sharedYBounds(t0,t1);
+  const yspan=(yhi-ylo)||1;
+  const sharedY=(v)=>H-(v-ylo)/yspan*H;
+  drawGrid(t0,t1,W,H,ylo,yhi);
+  const plotted=[];
+  for(const[n,s] of visible){
+    let Y=sharedY;
+    if(cfg.yMode==="norm"){
+      let smn=Infinity,smx=-Infinity;
+      for(const p of s.data){if(p.t<t0||p.t>t1)continue;if(p.v<smn)smn=p.v;if(p.v>smx)smx=p.v;}
+      if(!isFinite(smn)){smn=0;smx=1;}
+      const ss=(smx-smn)||1;
+      Y=(v)=>H-((v-smn)/ss)*(H-8)-4;
+    }
+    plotPath(s,X,Y,t0,t1,false);
+    plotted.push({n,s,Y});
+  }
+  return { X, plotted };
+}
+
+/* ---------- render loop ---------- */
+function render(){
+  requestAnimationFrame(render);
+  if(!ctx)return;
+  ctx.clearRect(0,0,cv.width,cv.height);
+  const [t0,t1]=curRange();
+  const W=cv.width,H=cv.height;
+  const { X, plotted }=paintSignals(t0,t1,W,H);
+  drawOverlay(plotted,t0,t1,X,W,H);
+  updateStats(t0,t1);
+}
+
+/* ---------- PNG export ----------
+   Render a sharp, high-contrast, self-contained image to an offscreen canvas:
+   2× pixel scale, thicker lines, lighter grid, an always-on legend (so the saved
+   image identifies its signals), and a title strip with the date, time window,
+   and Fs. Returns the offscreen canvas for toBlob. */
+export function renderExport(fsText){
+  const SC=2;                                  // pixel + font scale
+  const W=(cv.width||800)*SC, H=(cv.height||400)*SC;
+  const off=document.createElement("canvas"); off.width=W; off.height=H;
+  const offCtx=off.getContext("2d");
+  const sCv=cv,sCtx=ctx,sLW=LW,sGRID=GRID,sS=S;
+  cv=off; ctx=offCtx; LW=2.2*SC; GRID="#333"; S=SC;
+  try{
+    offCtx.fillStyle="#0c0c0c"; offCtx.fillRect(0,0,W,H);
+    const titleH=22*SC;
+    const [t0,t1]=curRange();
+    // plot below the title strip
+    offCtx.save(); offCtx.translate(0,titleH);
+    const { X, plotted }=paintSignals(t0,t1,W,H-titleH);
+    drawLegend(plotted,X,W,false,null);        // always-on legend, no crosshair
+    offCtx.restore();
+    // title strip
+    offCtx.fillStyle="#141414"; offCtx.fillRect(0,0,W,titleH);
+    offCtx.strokeStyle="#2a2a2a"; offCtx.beginPath();offCtx.moveTo(0,titleH-0.5);offCtx.lineTo(W,titleH-0.5);offCtx.stroke();
+    offCtx.fillStyle="#bcd"; offCtx.font=`${12*SC}px monospace`; offCtx.textBaseline="middle";
+    const stamp=new Date().toLocaleString();
+    const title=`CrossPad SWD trace · ${stamp} · ${t0.toFixed(2)}–${t1.toFixed(2)}s · ${cfg.yMode}${fsText?` · ${fsText}`:""}`;
+    offCtx.fillText(title,8*SC,titleH/2);
+    offCtx.textBaseline="alphabetic";
+  } finally {
+    cv=sCv;ctx=sCtx;LW=sLW;GRID=sGRID;S=sS;
+  }
+  return off;
+}
+
+/* ---------- init: grab canvas, wire input, start the loop ----------
+   Both wheel axes are honored: deltaY zooms time (Shift+deltaY zooms shared Y),
+   deltaX (horizontal/tilt wheel) pans time. A 2-D scroll applies both. */
+export function initPlot(){
+  cv=document.getElementById("cv");
+  ctx=cv.getContext("2d");
+  window.addEventListener("resize",fit);
+  fit();
+
+  cv.addEventListener("wheel",(e)=>{e.preventDefault();
+    const W=cv.width||1, H=cv.height||1;
+    const [t0,t1]=curRange();const span=(t1-t0)||1;
+    if(e.deltaY){
+      if(e.shiftKey && cfg.yMode==="shared"){
+        const [y0,y1]=sharedYBounds(t0,t1);const yspan=(y1-y0)||1;
+        const f=e.deltaY<0?0.8:1.25;
+        const cy=y1-(e.offsetY/H)*yspan;
+        state.viewY0=cy-(cy-y0)*f; state.viewY1=cy+(y1-cy)*f;
+        clampViewY();
+      }else{
+        const f=e.deltaY<0?0.8:1.25;
+        const cx=t0+span*(e.offsetX/W);
+        state.viewT0=cx-(cx-t0)*f; state.viewT1=cx+(t1-cx)*f;
+        clampViewTime();
+        setWindow(state.viewT1-state.viewT0);   // keep the Trailing window field in sync
+      }
+    }
+    if(e.deltaX){
+      const dt=(e.deltaX/W)*span;
+      const [a,b]=(state.viewT0!=null)?[state.viewT0,state.viewT1]:[t0,t1];
+      state.viewT0=a+dt; state.viewT1=b+dt;
+      clampViewTime();
+    }
+  },{passive:false});
+
+  let drag=null;
+  cv.addEventListener("mousedown",(e)=>drag={x:e.offsetX,r:curRange()});
+  window.addEventListener("mouseup",()=>drag=null);
+  cv.addEventListener("mousemove",(e)=>{
+    state.hoverX=e.offsetX; state.hoverY=e.offsetY;
+    if(!drag)return;
+    const [t0,t1]=drag.r;const span=t1-t0;const dt=(e.offsetX-drag.x)/cv.width*span;
+    state.viewT0=t0-dt;state.viewT1=t1-dt;
+    clampViewTime();
+  });
+  cv.addEventListener("mouseleave",()=>{ state.hoverX=null; state.hoverY=null; });
+
+  render();
+}

package/tracer/ui/signals.js

@@ -0,0 +1,39 @@
+/* Local model of the watched signal set: reconcile to the server's set, and
+   append samples. The view is rebuilt via bus.rebuildList (assigned by the
+   watchlist module) so this stays free of DOM concerns. */
+
+import { sigs, cfg, nextColor, bus } from "./state.js";
+import { toast } from "./util.js";
+import { getSuggestList, loadSymbols } from "./symbols.js";
+
+let symbolsRetried = false;
+
+/* hello.signals are plain name strings; signals frames are full descriptors. */
+export function toDesc(n){ return (n&&typeof n==="object")?n:{name:String(n)}; }
+
+/* Make the local sigs map match `descs` exactly: add new (stable color, on),
+   update fields, drop removed. `unresolved` (if any) is toasted so the user
+   knows a spec didn't land. */
+export function reconcile(descs, unresolved){
+  const want=new Set(descs.map(d=>d.name));
+  for(const n of [...sigs.keys()]) if(!want.has(n)) sigs.delete(n);
+  for(const d of descs){
+    let s=sigs.get(d.name);
+    if(!s){ s={color:nextColor(),on:true,data:[]}; sigs.set(d.name,s); }
+    if(d.address!=null) s.address=d.address;
+    if(d.size!=null) s.size=d.size;
+    if(d.encoding!=null) s.encoding=d.encoding;
+  }
+  if(unresolved && unresolved.length) toast("unresolved: "+unresolved.join(", "));
+  bus.rebuildList();
+  // If autocomplete is still empty (symbols fetched before a session was active),
+  // retry once now that the server is clearly talking to a target.
+  if(!getSuggestList().length && !symbolsRetried){ symbolsRetried=true; loadSymbols(); }
+}
+
+export function push(n,t,v){
+  const s=sigs.get(n); if(!s)return;
+  s.data.push({t,v});
+  const cap=Math.max(10,cfg.maxSamples|0);
+  if(s.data.length>cap) s.data.shift();
+}

package/tracer/ui/state.js

@@ -0,0 +1,57 @@
+/* Shared mutable state + small data singletons for the trace dashboard.
+   Reassignable scalars (paused / view overrides / hover) live on the `state`
+   object so any module can update them — ESM exports are read-only bindings for
+   importers, but object PROPERTIES are freely mutable, which is exactly what the
+   render loop, input handlers, and toolbar all need. */
+
+export const state = {
+  paused: false,
+  // Manual view overrides; null = follow the live trailing window / auto-Y.
+  viewT0: null, viewT1: null,   // time pan/zoom (and pause-freeze)
+  viewY0: null, viewY1: null,   // shared-mode Y zoom (Shift+wheel)
+  // Crosshair: canvas-space mouse position while hovering (null = not hovering).
+  hoverX: null, hoverY: null,
+};
+
+/* Client-side config (mirrors the side-panel controls). */
+export const cfg = { windowSec: 15, full: false, maxSamples: 100000, yMode: "shared" };
+
+/* sigs: name -> {color,on,data:[{t,v}],address?,size?,encoding?} */
+export const sigs = new Map();
+
+/* ---------- palette + stable color assignment ----------
+   Colors rotate by index so a signal keeps its color across reconciles even as
+   others are added/removed. */
+const palette = ["#4af","#fa4","#4f8","#f48","#af4","#8af","#fd4","#f84","#6df","#d6f","#9f6","#f96"];
+let colorIdx = 0;
+export function nextColor(){ return palette[(colorIdx++) % palette.length]; }
+
+/* ---------- global Fs (PROTOCOL §10) ----------
+   Sample rate is a property of the whole trace, estimated once from the spacing
+   of incoming sample-frame timestamps (a short ring → smoothed rate). An
+   explicit `actual_fs`/`fs` from a frame is authoritative and wins. */
+export const fsState = { stamps: [], reported: null, lastShown: "" };
+const FS_RING = 64;
+export function fsNoteSample(t){
+  if(typeof t!=="number"||!isFinite(t))return;
+  const r=fsState.stamps;
+  if(r.length && t<=r[r.length-1]) return;   // ignore dup/out-of-order
+  r.push(t);
+  if(r.length>FS_RING) r.shift();
+}
+export function fsEstimate(){
+  if(fsState.reported!=null && isFinite(fsState.reported) && fsState.reported>0) return fsState.reported;
+  const r=fsState.stamps;
+  if(r.length<2) return null;
+  const dt=r[r.length-1]-r[0];
+  if(!(dt>0)) return null;
+  return (r.length-1)/dt;
+}
+
+/* ---------- UI hooks (decouple data/connection layers from the view) ----------
+   The view layer assigns these; data/connection layers call them. Keeps the
+   module graph acyclic (no connection→view import). */
+export const bus = {
+  rebuildList: () => {},   // signal set changed → rebuild the Signals panel
+  onSymbols:   () => {},   // /symbols (re)loaded → refresh an open dropdown
+};

package/tracer/ui/stats.js

@@ -0,0 +1,52 @@
+/* Per-signal value-domain stats over the visible window, plus the single global
+   Fs readout. VALUE-DOMAIN metrics only (cur/min/max/mean/p2p/rms/n). Sample
+   rate is a whole-trace property shown once in the top bar (PROTOCOL §10). */
+
+import { sigs, fsState, fsEstimate } from "./state.js";
+import { fmt, cssid } from "./util.js";
+
+export function statsFor(s,t0,t1){
+  let n=0,sum=0,sq=0,mn=Infinity,mx=-Infinity,cur=null;
+  const d=s.data;
+  for(let i=0;i<d.length;i++){
+    const p=d[i];
+    if(p.t<t0||p.t>t1) continue;
+    n++; sum+=p.v; sq+=p.v*p.v;
+    if(p.v<mn)mn=p.v; if(p.v>mx)mx=p.v;
+    cur=p.v;
+  }
+  if(n===0){
+    cur=d.length?d[d.length-1].v:null;
+    return {n:0,cur,min:null,max:null,mean:null,p2p:null,rms:null};
+  }
+  const mean=sum/n;
+  const rms=Math.sqrt(sq/n);
+  return {n,cur,min:mn,max:mx,mean,p2p:mx-mn,rms};
+}
+
+let lastStatsAt=0;
+/* Refresh per-row stats cells (#st-<id>) + the global Fs readout, throttled. */
+export function updateStats(t0,t1){
+  const now=performance.now();
+  if(now-lastStatsAt<200)return; // ~5 Hz, cheap
+  lastStatsAt=now;
+  for(const [n,s] of sigs){
+    const cell=document.getElementById("st-"+cssid(n));
+    if(!cell)continue;
+    const st=statsFor(s,t0,t1);
+    cell.innerHTML=
+      `<span>cur <b>${fmt(st.cur)}</b></span>`+
+      `<span>min <b>${fmt(st.min)}</b></span>`+
+      `<span>max <b>${fmt(st.max)}</b></span>`+
+      `<span>mean <b>${fmt(st.mean)}</b></span>`+
+      `<span>p2p <b>${fmt(st.p2p)}</b></span>`+
+      `<span>rms <b>${fmt(st.rms)}</b></span>`+
+      `<span>n <b>${st.n}</b></span>`;
+  }
+  const fsEl=document.getElementById("fs");
+  if(fsEl){
+    const f=fsEstimate();
+    const txt="Fs "+(f!=null?fmt(f)+" Hz":"—");
+    if(txt!==fsState.lastShown){ fsEl.textContent=txt; fsState.lastShown=txt; }
+  }
+}

package/tracer/ui/style.css

@@ -0,0 +1,97 @@
+*{box-sizing:border-box}
+body{font:13px monospace;margin:0;background:#111;color:#ddd}
+#wrap{display:flex;height:100vh}
+#side{width:340px;min-width:340px;padding:8px;overflow:auto;border-right:1px solid #333;display:flex;flex-direction:column;gap:8px}
+#main{flex:1;display:flex;flex-direction:column;min-width:0}
+canvas{flex:1;background:#000;display:block;cursor:crosshair}
+
+button{background:#222;color:#ddd;border:1px solid #444;padding:3px 8px;cursor:pointer;border-radius:3px}
+button:hover{background:#2c2c2c}
+button.active{background:#264;border-color:#5a5}
+button:focus-visible{outline:1px solid #6cf}
+input,select{background:#1a1a1a;color:#ddd;border:1px solid #444;padding:2px 4px;border-radius:3px;font:12px monospace}
+input:focus,select:focus{outline:none;border-color:#48a}
+
+#bar{position:relative;padding:4px;display:flex;gap:6px;border-bottom:1px solid #333;align-items:center;flex-wrap:wrap}
+/* round "i" help button + its popover (replaces the canvas tooltip) */
+button.i{width:20px;height:20px;padding:0;border-radius:50%;font-style:italic;font-weight:bold;line-height:1;color:#9ab}
+button.i:hover{color:#cde;border-color:#48a}
+.help{position:absolute;top:100%;right:6px;margin-top:4px;z-index:30;width:340px;
+      background:#15171b;border:1px solid #3a4250;border-radius:5px;padding:8px 10px;
+      box-shadow:0 6px 18px #000a;font-size:11px;color:#bcd;line-height:1.7}
+.help[hidden]{display:none}
+.help h4{margin:2px 0 3px;color:#778}
+.help h4:first-child{margin-top:0}
+#bar #fs{margin-left:auto;color:#6cf;font-weight:bold}
+#bar #stat{color:#9c9}
+#bar .sep{width:1px;align-self:stretch;background:#333;margin:0 2px}
+#bar .grp{display:inline-flex;gap:4px;align-items:center}
+
+/* kbd badge — used inline inside buttons/labels (shortcuts live ON the control
+   they trigger, not in a separate hint strip). */
+kbd{background:#1b1b1b;border:1px solid #444;border-bottom-width:2px;border-radius:3px;padding:0 4px;font:10px monospace;color:#9ab;margin-left:2px}
+button kbd{margin-left:4px}
+
+h3,h4{margin:4px 0;font-weight:normal;color:#888;text-transform:uppercase;font-size:11px;letter-spacing:1px}
+.panel{border:1px solid #2a2a2a;border-radius:4px;padding:6px;background:#161616}
+.panel.collapsed .body{display:none}
+.panel h3{cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px}
+.panel h3 .arrow{color:#666}
+.row{display:flex;gap:4px;align-items:center;margin:3px 0}
+.row label{flex:1;color:#aaa;display:flex;align-items:center;gap:4px}
+.row input[type=number]{width:90px}
+
+.presets{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
+.presets button{font-size:11px;padding:2px 6px}
+
+/* ---------- add row + custom autocomplete dropdown ---------- */
+#addrow{display:flex;gap:4px}
+.ac-wrap{position:relative;flex:1}
+.ac-wrap input{width:100%}
+.ac{position:absolute;left:0;right:0;top:100%;margin-top:2px;z-index:20;max-height:260px;overflow:auto;
+    background:#15171b;border:1px solid #3a4250;border-radius:4px;box-shadow:0 6px 18px #000a}
+.ac[hidden]{display:none}
+.ac-opt{display:flex;align-items:baseline;gap:8px;padding:3px 8px;cursor:pointer;white-space:nowrap}
+.ac-opt:hover,.ac-opt.sel{background:#26313f}
+.ac-spec{color:#cde}
+.ac-hint{margin-left:auto;color:#778;font-size:10px}
+
+/* ---------- live signal list (merged signals + stats) ---------- */
+#siglist{display:flex;flex-direction:column;gap:3px;margin-top:6px}
+.sig{border:1px solid #232323;border-radius:4px;padding:4px 5px;background:#141414}
+.sig.off{opacity:.45}
+.sighead{display:flex;align-items:center;gap:6px}
+.sighead .signame{flex:1;cursor:pointer;word-break:break-all;color:#dde}
+.sighead .enc{color:#777;font-size:10px}
+.sw{width:16px;height:16px;padding:0;border:1px solid #3a3a3a;border-radius:3px;cursor:pointer;background:none;vertical-align:middle;flex:none}
+.sw::-webkit-color-swatch-wrapper{padding:0}
+.sw::-webkit-color-swatch{border:none;border-radius:2px}
+.sw::-moz-color-swatch{border:none;border-radius:2px}
+.rm{color:#a44;cursor:pointer;font-weight:bold;padding:0 4px;flex:none}
+.rm:hover{color:#f66}
+.stats{font-size:10px;color:#999;margin-top:2px;padding-left:22px;display:flex;flex-wrap:wrap;gap:0 8px}
+.stats b{color:#ccc;font-weight:normal}
+
+#noSigs{padding:8px 4px;color:#777;line-height:1.7;font-size:11px}
+#noSigs b{color:#9c9;font-weight:normal}
+#noSigs code{background:#1c1c1c;border:1px solid #2c2c2c;border-radius:3px;padding:0 4px;color:#cda}
+
+#toast{position:fixed;top:8px;right:8px;max-width:380px;display:flex;flex-direction:column;gap:4px;z-index:100}
+.t{background:#3a1a1a;border:1px solid #a44;color:#fcc;padding:6px 10px;border-radius:4px;font-size:11px;box-shadow:0 2px 8px #000a}
+.t.info{background:#1a2a3a;border-color:#48a;color:#cdf}
+.muted{color:#777}
+
+/* connection indicator (top bar) */
+#bar .conn{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#999}
+.cdot{font-size:11px;line-height:1;transition:color .2s}
+.cdot.ok{color:#5c5}
+.cdot.idle{color:#cb5}
+.cdot.retry{color:#c95;animation:blink 1s steps(1) infinite}
+.cdot.down{color:#a44}
+@keyframes blink{50%{opacity:.25}}
+#reconnect{font-size:11px;padding:2px 6px}
+
+/* idle / ended banner — unobtrusive strip under the top bar */
+.banner{padding:4px 10px;font-size:11px;border-bottom:1px solid #333;background:#1a1d22;color:#bb9}
+.banner.ended{background:#221a1a;color:#caa}
+.banner.live{display:none!important}