cold_display_guard/docs/plans/2026-04-29-web-industrial-console.md

Web Industrial Console Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Redesign the Cold Display Guard management frontend into a dense industrial control console without changing the backend API.

Architecture: Keep the existing Vite app and vanilla JavaScript state model. Replace the static HTML shell with a more structured console layout, then update render helpers to emit richer classes for status, calibration completeness, and event severity. Implement the visual system in web/src/styles.css.

Tech Stack: Vite 5, vanilla JavaScript modules, HTML canvas, CSS custom properties.

---

Task 1: Restructure Console Shell

Files:

• Modify: web/src/main.js

Steps:

1. Replace the current app.innerHTML shell with a console header, segmented tabs, status pill, and view-specific panels.
2. Preserve all existing element IDs used by JavaScript event handlers.
3. Keep the three views: calibrationView, eventsView, and settingsView.
4. Run pnpm --dir web build.

Task 2: Add UI State Classes

Files:

• Modify: web/src/main.js

Steps:

1. Update renderRegionList() to include region color swatches, labels, active state, and completion state.
2. Update renderRegionSummary() to emit completion classes.
3. Update renderMetrics() to classify baseline and violation cards.
4. Update renderEvents() to classify violation rows.
5. Update setStatus() to classify success, error, and progress states.
6. Run pnpm --dir web build.

Task 3: Implement Industrial Visual System

Files:

• Modify: web/src/styles.css

Steps:

1. Replace the existing generic styles with CSS variables for the industrial console palette.
2. Style the header, tabs, status strip, controls, panels, calibration canvas, metrics, tables, and settings layout.
3. Add responsive behavior for tablet and mobile widths.
4. Confirm text does not overflow compact controls.
5. Run pnpm --dir web build.

Task 4: Verify

Files:

• Read: web/dist/index.html

Steps:

1. Run pnpm --dir web build.
2. Confirm Vite emits web/dist.
3. Review git diff -- web/src/main.js web/src/styles.css docs/plans/2026-04-29-web-industrial-console-design.md docs/plans/2026-04-29-web-industrial-console.md.