Replace wave graph with new cable-length canvas graph sized to main card

[TrentIndeed]

Motivation

• Replace the previous wave graph with a canvas-based cable-length graph that uses the requested visual style and sizing to fit the main card.
• Preserve the original manual slider-driven functionality so cable lengths are controlled only by the user inputs.
• Keep rep-detection logic as a stub for future sensor input while locking the y-axis to the full 0–36 in range for manual mode.
• Make the plot denser and more readable by increasing line width and adding a glowing lead dot for the newest sample.

Description

• Added index.html which implements the new layout, styling, and the canvas-based plot inside the .card and .graphWrap containers.
• Implemented a real-time plot in the embedded script that keeps the last 10 seconds of samples, uses requestAnimationFrame, and resizes the canvas for device pixel ratio with resize().
• Wire sliders #left and #right to drive series arrays and update labels (#leftVal, #rightVal), and draw grid lines, tick labels, and thicker colored lines with a glowing lead dot.
• Included runtime assertions in the page to validate presence of #chart, 2D context, sliders, and that slider min/max match expected values.

Testing

• Launched a simple HTTP server and loaded index.html with Playwright, capturing a screenshot of the rendered UI which completed successfully.
• The page's runtime JavaScript assertions (e.g. presence of #chart, 2D context, and slider min/max of 0/36) executed in the browser and did not trigger errors.

---

Codex Task