# 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`.