62 lines
2.3 KiB
Markdown
62 lines
2.3 KiB
Markdown
# 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`.
|