feat: expand vehicle data platform capabilities

vehicle-data-platform/docs/design/ui-ux-20260720/README.md

@@ -0,0 +1,65 @@
+# Vehicle Platform UI/UX Direction
+
+This iteration moves the vehicle platform toward Semi Design's open, responsive application style while preserving the product's existing information architecture and copy.
+
+## Design principles
+
+- Use true white and cool neutral surfaces with restrained blue accents.
+- Prefer connected workspaces, hairline dividers, and open lists over nested floating cards.
+- Keep desktop controls at a readable 14 px baseline and make mobile touch targets at least 44 px high.
+- Preserve information density without shrinking primary labels or hiding core metrics.
+- Give mobile its own interaction hierarchy instead of compressing the desktop layout.
+- Provide visible keyboard focus, clear pressed states, short entrance motion, and reduced-motion support.
+
+## Reference concepts
+
+- `desktop-monitor-concept.png`: desktop shell, navigation, filters, metrics, and connected workspace direction.
+- `mobile-vehicles-concept.png`: direct reference for the mobile vehicle search flow and list hierarchy.
+- `mobile-track-concept.png`: map-first track query and playback direction.
+- `mobile-history-concept.png`: open mobile query and evidence-empty-state direction.
+- `mobile-mileage-concept.png`: connected scope, metric, toolbar, and matrix direction.
+- `mobile-alerts-concept.png`: priority-first active event queue with open, evidence-rich rows.
+- `mobile-access-concept.png`: source coverage directory with a connected three-protocol evidence strip.
+- `mobile-operations-concept.png`: reconciliation queue with semantic priority rails and direct evidence actions.
+- `mobile-users-concept.png`: customer authorization directory with visible readiness and grant counts.
+
+The concepts were generated with the built-in Image Generation tool from the supplied Semi Design reference and the pre-change product screenshots. Their prompts used the full-page `ui-mockup` mode: true white and pale cool gray, restrained `#1268F3`, semantic warning/danger/success colors, 14 px controls, 12 px metadata, 11 px navigation, 20–21 px titles, 44 px minimum touch targets, one-pixel dividers, and no gradients, glow, stacked-card decoration, invented metrics, or new modules.
+
+## Implementation mapping
+
+| Reference characteristic | Implemented result |
+| --- | --- |
+| Open white/cool-gray canvas | Global shell and workspaces use neutral surfaces without decorative gradients or glow |
+| Quiet sidebar with restrained selection | 228 px desktop navigation, compact icon wells, blue selection rail |
+| Connected filter and metric rail | Desktop vehicle search, scope tabs, metrics, and directory share one continuous workspace |
+| Mobile-first search hierarchy | Persistent 50 px search launcher, editable vehicle scope, three always-visible metrics |
+| Open mobile list rows | 16 px vehicle identifier, status dot, protocol tags, timestamp, and row affordance |
+| Stable mobile navigation | 72 px bottom navigation with icon-well active state and safe-area spacing |
+| Responsive continuity | Verified at 1440 × 900 and 390 × 844 with zero horizontal overflow |
+| Map-first track setup | Persistent 52 px vehicle/time launcher, open empty cue, and visible inactive playback model |
+| Open history evidence state | One scope row, one result header, centered evidence prompt, and bottom-sheet query editor |
+| Dense mileage exploration | Two connected summary metrics, compact 44 px tools, fixed plate/total columns, and horizontal date exploration |
+| Priority-first alert triage | Open event rows with severity rails, trigger evidence, status, and a direct detail affordance |
+| Connected access evidence | Vehicle identity, connection conclusion, and three protocol cells remain visible in one scan path |
+| Reconciliation action queue | SLA metrics, scope feedback, semantic issue rows, and evidence/action entry stay in one working surface |
+| Understandable account governance | Customer identity, menu count, vehicle grants, readiness, and authorization detail form a clear directory |
+
+## Fidelity and QA ledger
+
+- Color and surface system: matched.
+- Container hierarchy: matched; desktop uses a continuous working surface and mobile removes nested panels.
+- Typography: matched for primary hierarchy. Mobile metadata is intentionally 11 px at 390 px width to keep plate, status, and timestamp readable without wrapping.
+- Spacing and sizing: desktop sidebar 228 px, table rows 60 px; mobile side inset 14 px, search target 50 px, list rows about 87 px, bottom navigation 72 px.
+- Responsive behavior: matched at both target viewports with no horizontal overflow.
+- Core mobile workflow: search sheet opens, accepts a vehicle query, shows matching candidates, applies the scope, and updates the launcher summary.
+- Accessibility and motion: focus-visible outlines, pressed states, short page arrival motion, and `prefers-reduced-motion` handling are included.
+- P1 query workflows: track, history, and mileage workbench launchers open and close correctly with stable dialog labels and visible state changes.
+- P1 mobile sizing: track launcher 52 px, inactive playback dock 133 px, history empty surface ends exactly at the bottom navigation, mileage summary is 89 px, and mobile result tools/pagination are 44 px.
+- P1 rendered evidence: `mobile-track-implemented.png`, `mobile-history-implemented.png`, and `mobile-mileage-implemented.png`.
+- P2/P3 rendered evidence: paired mobile concepts and implementations for alerts, access, operations, and users, plus 1440 × 900 implemented screenshots for all four governance routes.
+- P2/P3 mobile interaction: each open row launches its evidence or authorization detail at full viewport width without horizontal overflow.
+- Final cross-route audit: all nine routes passed at 1440 × 900 and 390 × 844; no mobile target remained below the 44 px two-dimensional baseline.
+- Final automated verification: 73 test files / 377 tests passed, `git diff --check` passed, and the production artifact gate returned `web_build_gate=ok`.
+- Known upstream warning: Semi UI still emits its existing React StrictMode `findDOMNode` deprecation warning; no runtime exception or route failure was observed.
+
+The desktop concept is used as the system-level shell reference. Each mobile concept maps directly to its implemented route and is retained beside the browser QA screenshot for future comparison.

vehicle-data-platform/docs/design/ui-ux-20260720/WORKPLAN.md

@@ -0,0 +1,94 @@
+# UI/UX Incremental Work Plan
+
+## Objective
+
+Optimize the existing vehicle platform one verified step at a time until the desktop and mobile experiences form one modern, concise, high-quality product system.
+
+## Working rules
+
+- Preserve business behavior, route structure, permissions, and existing product copy.
+- Improve high-frequency tasks before low-frequency administration surfaces.
+- Design mobile workflows for touch instead of shrinking desktop layouts.
+- Use one shared token foundation for color, typography, spacing, controls, focus, and motion.
+- Complete each stage with rendered desktop/mobile evidence, interaction checks, and relevant automated tests.
+
+## Page priority
+
+| Priority | Routes | Primary UX goal |
+| --- | --- | --- |
+| P0 | Global monitor, vehicle search | Fast fleet awareness and vehicle lookup |
+| P1 | Track playback, history, mileage | Clear query setup, result verification, and tool hierarchy |
+| P2 | Alerts, access, operations | Efficient exception triage and evidence review |
+| P3 | Account management | Safe, understandable administration workflows |
+
+## Execution stages
+
+### 1. Current-state audit
+
+- [x] Confirm all nine application routes.
+- [x] Inspect current worktree and preserve unrelated `.codex-audit/` artifacts.
+- [x] Identify the three-level style cascade and approximately 42,000 lines of existing CSS as the main regression risk.
+- [x] Review existing desktop/mobile route screenshots and the Semi-inspired reference concepts.
+
+### 2. Shared design foundation
+
+- [x] Add shared semantic color, typography, spacing, radius, control, focus, and motion tokens.
+- [x] Keep compatibility aliases so existing shared components migrate without behavior changes.
+- [x] Add a global 14 px control baseline, visible keyboard focus, text rendering, and reduced-motion behavior.
+- [x] Move remaining high-frequency hard-coded values to semantic tokens while each page is touched.
+
+### 3. P0 core experience
+
+- [x] Connect desktop monitor filters, metrics, map, and vehicle rail into one workspace.
+- [x] Replace monitor metric gradients with an open white information rail and readable state-colored values.
+- [x] Convert desktop vehicle lookup into a connected search, metric, and directory workspace.
+- [x] Rebuild mobile vehicle lookup around persistent search, editable scope, three metrics, open rows, and bottom navigation.
+- [x] Fix mobile Semi button flex behavior that compressed the search copy.
+- [x] Fix mobile metric inheritance that collapsed descriptions and values into one row.
+
+### 4. P1 query and playback workflows
+
+- [x] Track playback: simplify vehicle selection, source confirmation, playback controls, and empty/result transitions.
+- [x] History: align query range, selected vehicles, result tools, and export feedback.
+- [x] Mileage: improve date/vehicle scope, comparison-table readability, and mobile horizontal exploration.
+- [x] Verify all three mobile workbench launchers, open states, accessible names, viewport fit, and 44/48 px touch baselines at 390 × 844.
+
+### 5. P2/P3 governance workflows
+
+- [x] Alerts: strengthen event priority, status actions, filter feedback, and mobile queue scanning.
+- [x] Access: simplify coverage-to-difference drill-down and governance actions.
+- [x] Operations: clarify health evidence, reconciliation priority, and refresh feedback.
+- [x] Users: make customer scope, grants, creation, and destructive actions easier to understand.
+- [x] Verify the four evidence/detail sheets open from their mobile rows without changing API, permissions, or mutation behavior.
+- [x] Compare each implemented mobile route against its accepted full-page concept.
+
+### 6. Final cross-route verification
+
+- [x] Verify every route at 1440 × 900 and 390 × 844.
+- [x] Confirm zero accidental horizontal overflow and no clipped primary controls.
+- [x] Verify all core filter, selection, detail, pagination, and action paths.
+- [x] Audit touch targets, keyboard focus, reduced motion, loading, empty, error, and success states.
+- [x] Run the complete test suite and production build gate.
+
+## Final verification record
+
+- Routes: monitor, vehicles, tracks, history, statistics, alerts, access, operations, and users.
+- Desktop viewport: 1440 × 900; all nine routes rendered without horizontal overflow or visible route error states.
+- Mobile viewport: 390 × 844; all nine routes rendered at exactly 390 px document width.
+- Mobile target audit: no visible button, link, tab, input, combobox, or role-button had both dimensions below 44 px after the final pagination, monitor entry, and track tool corrections.
+- Governance interactions: alert evidence, access source evidence, reconciliation evidence/action, and customer authorization details opened successfully.
+- Automated tests: 73 files and 377 tests passed.
+- Production gate: TypeScript, Vite production build, artifact preparation, and `verify-build` passed with `web_build_gate=ok`.
+- Source hygiene: `git diff --check` passed; unrelated `.codex-audit/` artifacts were left untouched.
+
+## Stage acceptance checklist
+
+Every page stage must provide:
+
+1. A direct comparison against its accepted concept or the shared design-system reference.
+2. At least five checks covering hierarchy, typography, color, spacing, responsive behavior, icons, or motion.
+3. A desktop and mobile browser screenshot at the target viewport.
+4. A working core task path with visible state change.
+5. Relevant automated tests and a clean `git diff --check`.
+
+Stages 1–6 are complete and verified.