story/web/design/home-redesign/design-qa-before-home.md

# Design QA — Cal.com-inspired family home

- Source visual truth: `C:\Users\19926\.codex\generated_images\01a04af9-0d32-7642-8148-1b73f4c8e2f3\exec-b564b19a-1b44-4198-93d0-166c8a00e356.png`
- Implementation evidence: `C:\Users\19926\.codex\visualizations\2026\08\29\01a04af9-0d32-7642-8148-1b73f4c8e2f3\cal-implementation-v3-desktop.png`
- Combined comparison: `C:\Users\19926\.codex\visualizations\2026\08\29\01a04af9-0d32-7642-8148-1b73f4c8e2f3\cal-design-qa-comparison.png`
- Responsive evidence: `C:\Users\19926\.codex\visualizations\2026\08\29\01a04af9-0d32-7642-8148-1b73f4c8e2f3\cal-implementation-narrow.png`
- Route/state: `/?designPreview=1`, signed-in visual preview state, first elder selected.
- CSS viewport: 1440 × 1024; device scale factor 1.
- Source pixels: 1488 × 1057. Implementation pixels: 1425 × 1024 (15 px vertical scrollbar reservation). The combined comparison normalizes both frames to 720 × 512 panels without changing their common ~1.407 aspect ratio.

## Full-view comparison evidence

The side-by-side comparison verifies the same 64 px top-navigation state, 46 px outer page margins, 7/5 primary-panel split, 480 px primary-panel height, three-person switcher, right-side elder summary, and grouped recent-activity surface. The implementation preserves the source's near-monochrome hierarchy, light borders, limited radius scale, and single black primary action.

## Focused-region comparison evidence

The source and implementation were also opened at original resolution. The header/navigation, person switcher, schedule timeline, elder summary, device row, recent conversation, primary action, and recent-activity rows are readable at full scale; no additional crop was required. Individual raster assets were inspected separately at 512 × 512 before being integrated.

## Required fidelity surfaces

- Fonts and typography: passed. Display headings use the Cal Sans-compatible geometric stack at weight 600 with negative tracking; body/UI copy uses Inter-compatible system text. Hierarchy and wrapping match the reference at the target viewport.
- Spacing and layout rhythm: passed. Header, page margins, switcher spacing, main panel ratio/height, row rhythm, radii, and recent section align with the reference. No heavy elevation remains.
- Colors and visual tokens: passed. The interface uses white, #111111, #374151, #6b7280, #e5e7eb, #f8f9fa, and #f5f5f5; primary actions are monochrome and no decorative gradients remain.
- Image quality and asset fidelity: passed. Three 512 px portrait assets and one 512 px speaker product asset replace generic placeholders and retain clarity in circular/40 px crops. Ant Design supplies standard UI icons.
- Copy and content: passed. The selected elder, companionship schedule, recent conversation, confirmed memory, family invitation, device state, and primary action match the selected concept's Chinese product narrative.

## Comparison history

### Iteration 1

- Earlier finding [P1]: shared button selector overrode navigation, person-switcher, and recent-row surfaces with black fills.
- Fix: reduced primary-button selector specificity with `:where(...)` so component-specific surfaces win.
- Post-fix evidence: `cal-implementation-v2-desktop.png` shows white navigation, outlined person tabs, white recent rows, and a single black primary CTA.

### Iteration 2

- Earlier finding [P2]: content frame was too narrow, top navigation began too near the center, and the schedule panel was about 40 px too short.
- Fix: set the family-home frame to 46 px desktop margins, moved navigation to begin after the brand, expanded the 7/5 panel to 1333 px, and raised the schedule row rhythm to produce a 480 px panel.
- Post-fix evidence: `cal-implementation-v3-desktop.png`; measured panel bounds are x=46, y=277.9, width=1333, height=480.

### Iteration 3

- Remaining polish [P3]: the 40 px device thumbnail used a standard microphone icon instead of product imagery.
- Fix: generated and integrated `public/assets/companion-speaker.png`. This is non-blocking polish and does not alter layout.

## Interaction and runtime checks

- Person switcher changed the elder summary from 林秀兰 to 陈建国.
- “安排一次陪伴” navigated to `?section=conversations` and removed preview mode as intended.
- Family narrow-screen view at 531 px had no horizontal overflow; the menu toggle was visible and the closed sidebar translated fully off-canvas.
- Maintenance view at 390 px had no horizontal overflow; its desktop view exposes all six top-navigation destinations.
- Browser console: no warnings or errors in the final customer and maintenance checks.
- `npm run build`: passed. The existing bundle-size advisory remains non-blocking.

## Findings

No actionable P0, P1, or P2 mismatches remain.

## Open Questions

- Authenticated production data may vary in row length and count; truncation and empty states remain governed by the existing business components.

## Implementation Checklist

- [x] Selected visual recreated at the desktop target.
- [x] Shared family and maintenance design tokens applied.
- [x] Primary interactions tested.
- [x] Responsive layout checked below the 768 px breakpoint.
- [x] Build and browser console verified.

## Follow-up Polish

- P3: Cal Sans is represented by a Manrope/Inter-compatible fallback because the proprietary font is not bundled.

final result: passed

---

# Maintenance console design QA

Final result: **passed**

## Evidence

- Visual target: `E:\Codex\story\platform\web\design\maintenance-console-reference.png`
- Browser-rendered implementation: `http://127.0.0.1:5173/maintenance?designPreview=1`
- Side-by-side comparison harness: `E:\Codex\story\platform\web\design\qa-comparison.html`
- Checked at desktop viewport `1280 × 720` and mobile viewport `390 × 844` in the Codex in-app browser.

## Routes checked

- Maintenance overview
- Device management and device-creation drawer
- Firmware management
- Runtime configuration, category tabs, and creation drawer
- Content-model management
- Content quality
- Usage and billing
- Alert handling
- Integration diagnostics

## Comparison result

- Matched the selected visual direction: graphite fixed sidebar, white utility header, warm off-white workspace, cobalt primary actions, compact square controls, dense operational tables, and exception-first hierarchy.
- The production information architecture remains intact while “首次接入” is absent from the maintenance navigation.
- Drawers are visually integrated without a dimming overlay and preserve context for create/upload flows.
- Responsive layout passed: the sidebar becomes an off-canvas menu, page actions wrap, cards stack, and wide operational tables remain horizontally scrollable.
- No blocking visual defects, clipped primary controls, or inaccessible navigation items were found in the checked states.

## Verification

- `npm run build`: passed.
- Production web image: `data-terminal-cloud-web:0.96.1-rc.admin-ui1` running.
- Production readiness: `https://82.157.201.114/health/ready` returned HTTP 200 with PostgreSQL, Redis, and object storage all `up`.
- Production bundle contains the redesigned console and no longer contains the “首次接入” navigation entry.
- Local API requests intentionally return HTTP 502 in the design-preview harness because no local backend is running; those error states were also visually checked. This does not affect the production deployment verification.

---

# Device management redesign QA — 2026-09-18

- Source visual truth: `C:\Users\19926\.codex\generated_images\01a0b207-7ec6-7cc1-b24a-4e79773d017e\exec-343caac2-21e9-40d8-b7f7-45750a67294b.png`
- Browser-rendered implementation screenshot: `E:\Codex\story\platform\web\design\implementation-device-management.png`
- Full-view comparison evidence: `E:\Codex\story\platform\web\design\qa-comparison-device.png`
- Focused controls comparison evidence: `E:\Codex\story\platform\web\design\qa-comparison-device-controls.png`
- Comparison harnesses: `E:\Codex\story\platform\web\design\qa-comparison-device.html` and `E:\Codex\story\platform\web\design\qa-comparison-device-controls.html`
- Route/state: `/maintenance?area=devices&designPreview=1`, first device page, filters closed, no active row selection.
- Viewport: 1490 × 1080 CSS px; device scale factor 1.
- Source pixels: 1487 × 1058. Implementation pixels: 1490 × 1080. The comparison harness preserves each image's aspect ratio; the focused comparison crops the same header/filter/table region at native density.

## Full-view comparison evidence

The side-by-side browser comparison verifies the same graphite sidebar, 50 px utility header, white title/action card, 16 px page inset, compact filter surface, ten-row table, and right-aligned pagination. Major regions, table density, cobalt actions, semantic state tags, and the no-statistics information hierarchy match the approved third concept.

## Focused-region comparison evidence

The focused browser comparison shows the search field, both select controls, table header, first device row, and row action at readable scale. The search control now has one correctly positioned border and one text baseline. Selects use the same height, radius, border tone, cobalt focus ring, and muted-blue selected option treatment as the surrounding console.

## Required fidelity surfaces

- Fonts and typography: passed. The system/Inter-compatible stack, heading weight, compact 12–14 px operational copy, truncation, and row hierarchy match the approved visual direction.
- Spacing and layout rhythm: passed. Header/card spacing, 16 px inter-card gap, 40 px filter controls, 45 px rows, aligned table columns, 8 px card radii, and responsive off-canvas navigation are consistent.
- Colors and visual tokens: passed. Graphite navigation, #0b5cff primary actions, #e4e7ec borders, white surfaces, pale blue focus/selection, and semantic green/blue status tags are consistently applied.
- Image quality and asset fidelity: passed. The target contains no custom raster imagery; standard interface icons come from the existing Ant Design icon system and remain crisp at the checked density.
- Copy and content: passed. The approved device-management title, subtitle, filters, binding/device states, firmware values, timestamps, and operations are represented. Statistics and credential-status summary content remain removed.

## Comparison history

### Iteration 1

- Earlier finding [P2]: the search field inherited borders and height from both the Ant Design wrapper and its internal input, placing a second frame down and to the right.
- Fix: reset the nested input's height, padding, border, background, outline, and shadow while retaining the wrapper as the single visual control.
- Post-fix evidence: `qa-comparison-device-controls.png` shows one aligned search frame and a centered icon/text baseline.

### Iteration 2

- Earlier finding [P2]: focused selects used a black browser-style outline; the popup's saturated selected row, shadow, and spacing did not match the console.
- Fix: applied the console cobalt focus ring, restored selected text opacity while open, and added a scoped maintenance dropdown surface with compact options, pale-blue selection, and restrained shadow.
- Post-fix evidence: the dropdown was opened in the in-app browser and the final popup class resolved to `maintenance-select-dropdown`; the focused comparison verifies the closed control geometry.

## Interaction and runtime checks

- Device-creation drawer opened with `ECHOEAR-S3` prefilled and closed through its cancel action.
- Search reduced the table to the matching `KP01-B43A451634A8` row.
- Binding-state selection filtered the preview data correctly; the final fresh-browser run returned six pending-binding rows.
- Per-row menu exposed “重置烧录信息” and “吊销设备”.
- The 760 px layout defaults the sidebar closed and keeps the operational table horizontally scrollable.
- Fresh browser console check: no warnings or errors.
- `npm run typecheck`: passed.
- `npm run build`: passed; the existing bundle-size advisory remains non-blocking.

## Findings

No actionable P0, P1, or P2 visual or interaction differences remain.

## Open Questions

- The approved mock labels the organization selector as “全部组织”, while production permissions and APIs operate on one selected tenant. The implementation intentionally keeps the real tenant selector instead of implying unsupported cross-tenant aggregation.

## Implementation Checklist

- [x] Removed statistics from the selected third concept.
- [x] Matched the approved desktop structure and table density.
- [x] Fixed the nested search-frame alignment defect.
- [x] Matched select focus and popup styling to the console.
- [x] Verified core controls, responsive behavior, console output, typecheck, and production build.

## Follow-up Polish

- P3: production row lengths and organization names may require wider truncation tooltips than the preview data.

final result: passed