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.