docs: plan web industrial console redesign

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

@@ -0,0 +1,61 @@
+# 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`.