claude, make no mistakes

modules/web/fm95.html

@@ -54,8 +54,6 @@
             .bar-wrap   { margin-top: 10px; background: #0a0e1a; border-radius: 4px; height: 5px; overflow: hidden; }
             .bar-fill   { height: 100%; border-radius: 4px; background: var(--accent, #7eb8f7); width: 0%; transition: width 0.4s ease; }
             .card-desc  { font-size: 0.68rem; color: #2e4060; margin-top: 6px; }
-
-            /* Oscilloscope */
             .scope-wrap {
                 width: 100%;
                 max-width: 960px;
@@ -89,7 +87,6 @@
                 background: #111827; color: #7eb8f7; border: 1px solid #1e2d45;
                 border-radius: 6px; padding: 3px 8px; font-size: 0.72rem;
             }
-
             #last-update { font-size: 0.7rem; color: #2e4060; }
         </style>
     </head>
@@ -125,7 +122,6 @@
             </div>
         </div>
 
-        <!-- Oscilloscope -->
         <div class="scope-wrap">
             <div class="scope-header">
                 <div class="scope-title">Oscilloscope — Input &amp; Audio Level</div>
@@ -166,10 +162,10 @@
             let histAudio = new Array(MAX_PTS).fill(null);
             let histAgc   = new Array(MAX_PTS).fill(null);
 
+            // animation state
             let targets = { input: null, audio: null, agc: null };
             let current = { input: null, audio: null, agc: null };
             let rafId = null;
-
             const LERP = 0.18;
 
             function animateTo(key, target) {
@@ -193,7 +189,7 @@
                     }
                 }
 
-                // only push to history when the tip actually moves
+                // update only the tip of each history array
                 histInput[histInput.length - 1] = current.input;
                 histAudio[histAudio.length - 1] = current.audio;
                 histAgc[histAgc.length - 1]     = current.agc;
@@ -215,7 +211,8 @@
                 canvas.width  = w * r;
                 canvas.height = 200 * r;
                 ctx.scale(r, r);
-            } resizeCanvas();
+            }
+            resizeCanvas();
             window.addEventListener('resize', () => { ctx.setTransform(1,0,0,1,0,0); resizeCanvas(); drawScope(); });
 
             function drawScope() {
@@ -225,12 +222,10 @@
                 const showGrid = gridCb.checked;
 
                 ctx.clearRect(0, 0, W, H);
-
                 ctx.fillStyle = '#060b14';
                 ctx.fillRect(0, 0, W, H);
 
-                let yMax = 1;
-                let yMin = -1;
+                let yMin = -1, yMax = 1;
                 const vals = [...histInput, ...histAudio, ...histAgc].filter(v => v !== null);
                 if (vals.length) {
                     yMin = Math.min(...vals);
@@ -241,7 +236,6 @@
 
                 const toY = v => H - ((v - yMin) / (yMax - yMin)) * H;
 
-                // grid
                 if (showGrid) {
                     ctx.strokeStyle = 'rgba(255,255,255,0.05)';
                     ctx.lineWidth = 1;
@@ -259,7 +253,6 @@
                         const x = (i / vLines) * W;
                         ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
                     }
-                    // zero line
                     if (yMin < 0 && yMax > 0) {
                         const y0 = toY(0);
                         ctx.strokeStyle = 'rgba(255,255,255,0.15)';
@@ -269,7 +262,6 @@
                     }
                 }
 
-                // draw series
                 function drawLine(hist, color) {
                     const slice = hist.slice(-nPts);
                     const step  = W / (nPts - 1);
@@ -285,15 +277,15 @@
                         else ctx.lineTo(x, y);
                     }
                     ctx.stroke();
-                    // glow
                     ctx.strokeStyle = color + '44';
                     ctx.lineWidth = 4;
                     ctx.stroke();
                 }
 
+                // FIX: was drawing histInput three times
                 drawLine(histInput, '#f472b6');
-                drawLine(histInput, '#38bdf8');
-                drawLine(histInput, '#fb923c');
+                drawLine(histAudio, '#38bdf8');
+                drawLine(histAgc,   '#fb923c');
             }
 
             function decode(b64) {
@@ -318,10 +310,13 @@
                     }
                 });
 
-                // replace the three histX.push() lines with:
-                histInput.push(current.input ?? values[3]); if (histInput.length > MAX_PTS) histInput.shift();
-                histAudio.push(current.audio ?? values[4]); if (histAudio.length > MAX_PTS) histAudio.shift();
-                histAgc.push(current.agc   ?? values[2]); if (histAgc.length > MAX_PTS)   histAgc.shift();
+                // FIX: use the raw values as the initial push, not current.* which may be null
+                const iv = current.input ?? values[3];
+                const av = current.audio ?? values[4];
+                const gv = current.agc   ?? values[2];
+                histInput.push(iv); if (histInput.length > MAX_PTS) histInput.shift();
+                histAudio.push(av); if (histAudio.length > MAX_PTS) histAudio.shift();
+                histAgc.push(gv);   if (histAgc.length   > MAX_PTS) histAgc.shift();
 
                 animateTo('input', values[3]);
                 animateTo('audio', values[4]);