docs: plan web industrial console redesign

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

@@ -0,0 +1,61 @@
+# Cold Display Guard Web Industrial Console Design
+
+**Date:** 2026-04-29
+
+## Goal
+
+Redesign the existing management frontend as an industrial operations console for refrigerated display monitoring, while preserving the current Vite single-page app, management API contract, and calibration workflow.
+
+## Direction
+
+Use a dense, production-oriented control-room interface. The application should feel like a tool used by operators who repeatedly calibrate zones, check runtime health, inspect alerts, and update camera settings. It should avoid a marketing-page layout and prioritize scanning, comparison, and fast action.
+
+## Information Architecture
+
+The app keeps the existing three views:
+
+- `区域标定`: primary working view for RTSP capture and polygon editing.
+- `事件数据`: monitoring view for runtime metrics and recent JSONL events.
+- `运行配置`: configuration view for camera identity, RTSP URL, thresholds, and JSON preview.
+
+The top bar becomes a compact console header with the product name, operational subtitle, connection/status message, and refresh action. Tabs remain visible but are styled as segmented navigation.
+
+## Calibration View
+
+The captured camera frame is the visual center of the page. The region selector and point editing tools sit beside it as operator controls, while calibration completeness and per-region point counts sit in a right-side inspection panel.
+
+The canvas keeps its current behavior:
+
+- RTSP snapshot must be captured before adding points.
+- Clicks add normalized polygon points to the active region.
+- Local draft storage is preserved.
+- Saved calibration uses `PUT /api/manage/calibration`.
+
+## Events View
+
+Metrics appear as compact telemetry cards, with violation count and baseline state visually distinct. The event table remains the primary data surface, with rows styled for scanability and violation event names emphasized.
+
+## Settings View
+
+Configuration uses a two-column control layout with an adjacent JSON preview. The UI should make production parameters easy to inspect without changing the existing `PUT /api/manage/config` payload.
+
+## Visual System
+
+The console uses a cool industrial palette:
+
+- charcoal and steel for structure
+- white panels for data surfaces
+- cyan/green for ready or active state
+- amber for learning or pending state
+- red for violations and failures
+
+Controls use restrained radius, clear focus states, high contrast, and predictable spacing. The design avoids purple gradients, oversized hero sections, decorative cards, and purely ornamental backgrounds.
+
+## Implementation Scope
+
+Modify only the web frontend:
+
+- `web/src/main.js`
+- `web/src/styles.css`
+
+Do not change API routes, backend behavior, deployment files, or existing unrelated workspace changes.

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