# Training Log Detail Design QA

## Evidence

- Source visual truth: `docs/superpowers/specs/assets/training-log-detail-option-2.png`
- Implementation screenshot: `docs/superpowers/specs/assets/training-log-detail-final-expanded-1440.png`
- Collapsed implementation screenshot with global surface: `docs/superpowers/specs/assets/training-log-detail-global-surface-1440-v2.png`
- Normalized full-view comparison: `docs/superpowers/specs/assets/training-log-detail-final-comparison-normalized.png`
- Focused parameter comparison: `docs/superpowers/specs/assets/training-log-detail-final-comparison-params.png`
- White-canvas reference: `docs/superpowers/specs/assets/page-white-canvas-reference.png`
- White-canvas implementation: `docs/superpowers/specs/assets/model-edit-white-page-canvas-final-1440.png`
- White-canvas normalized comparison: `docs/superpowers/specs/assets/page-white-canvas-comparison.png`
- Training-log white-canvas screenshot: `docs/superpowers/specs/assets/training-log-detail-white-page-canvas-1440.png`
- Self-surface list screenshot: `docs/superpowers/specs/assets/fine-tune-list-self-surface-final-1440.png`
- Default-canvas detail screenshot: `docs/superpowers/specs/assets/training-log-detail-default-canvas-final-1440.png`
- Reference/detail comparison: `docs/superpowers/specs/assets/page-surface-reference-detail-comparison.png`
- Create-page duplicate-surface evidence: `docs/superpowers/specs/assets/fine-tune-create-double-surface-before-1440.png`
- Create-page single-surface evidence: `docs/superpowers/specs/assets/fine-tune-create-single-surface-final-1440.png`
- Route-transition flash reference: `/var/folders/nk/yks07zp14wb4rv3jqq0pt_4h0000gn/T/codex-clipboard-ea775434-828f-4bca-9714-72887faa9af9.png`
- Route-transition final detail frame: `docs/superpowers/specs/assets/route-transition-detail-final.png`
- Viewport: 1440 × 1024; comparison content normalized to 1200 × 800 after removing the existing 240px sidebar and 60px header from the implementation capture.
- State: `finance-sft-001`, completed, mock data loaded, training parameters expanded.

## Full-view comparison

The implementation preserves the selected two-column hierarchy: task and dataset information occupy the wide left track, runtime facts use the narrow right rail, and training parameters continue as a full-width disclosure section. The selected mock omitted the product shell, so the comparison intentionally crops the existing sidebar and header rather than treating them as design drift.

The global product mode now uses two intentional surface modes. Form and detail routes render inside one `#ffffff` page canvas with 16px radius and 24px content padding. List routes that already own a white table/card surface render that surface directly on the `#f3f5f8` application background, avoiding a redundant white layer.

## Required fidelity surfaces

- Fonts and typography: Existing system font stack is preserved. Heading, label, value, and muted-copy hierarchy match the selected direction; output model uses body-level contrast after iteration 1, and all “未配置” values use `#64748b` on white after iteration 2.
- Spacing and layout rhythm: 24px main gap, 16px section gap, 12px surface radius, and light row separators match the selected composition. The existing application shell reduces usable content width, but normalized proportions remain aligned.
- Colors and tokens: Indigo accent, Slate text, success status, `#f3f5f8` page background, and white content surfaces are consistent with the current product.
- Image and icon fidelity: The screen contains no raster imagery. Existing Font Awesome icons are retained to match the repository's icon system; no placeholder, emoji, CSS drawing, or handcrafted SVG was introduced.
- Copy and content: Task name, status, model, date, duration, dataset metadata, storage, SFT, LoRA, and missing-value copy match the selected design and actual mock data.

## Interaction and responsive checks

- Parameter disclosure changed from `aria-expanded="false"` to `true` after activation, and the expanded content became visible.
- At 1000px viewport width, the overview changed to one column and the document had no horizontal overflow.
- At 700px viewport width, dataset metrics and parameter rows changed to one column and the document had no horizontal overflow.
- Browser console: no errors. One existing Element Plus `el-link` underline deprecation warning was emitted by the login flow and is unrelated to this page.

## Comparison history

### Iteration 1 — blocked

- [P2] The implementation added a visible “基础训练参数” heading that did not exist in the selected mock, creating extra vertical space.
- [P2] “暂未生成” was styled too faintly compared with the selected design.

Fixes:

- Removed the redundant visible base-parameter heading while retaining an accessible region label.
- Restored body-level contrast for “暂未生成”.

Post-fix evidence:

- `docs/superpowers/specs/assets/training-log-detail-final-comparison-normalized.png`
- `docs/superpowers/specs/assets/training-log-detail-final-comparison-params.png`

### Iteration 2 — blocked

- [P2] “未配置” values used `#94a3b8` on white, below WCAG AA contrast for 14px text.

Fix:

- Updated muted values to `#64748b`; the regression check now calculates the contrast ratio and requires at least 4.5:1.

Post-fix evidence:

- Browser computed color: `rgb(100, 116, 139)`.
- Browser console: no errors.

### Iteration 3 — passed

No actionable P0/P1/P2 differences remain. The retained P3 difference is that the generated mock does not include the real product sidebar/header; this is an intentional constraint because the existing shell is shared by every page.

### Iteration 4 — clarified global page canvas, passed

- [P1] The earlier interpretation left the route content directly on the gray layout background and only made individual cards white. The clarified reference requires a single white page canvas behind every route.

Fixes:

- Split the shell and page tokens into `--app-shell-bg: #f3f5f8` and `--app-page-bg: #ffffff`.
- Added one global `.page-canvas` around every route in `MainLayout.vue`.
- Added 16px outer gutter, 16px canvas radius, 24px canvas padding, and a subtle canvas shadow.
- Flattened a route-root `PageCard` to prevent a duplicate large card layer.

Post-fix evidence:

- `docs/superpowers/specs/assets/page-white-canvas-comparison.png`
- Browser computed canvas: white background, 16px radius, 24px padding; outer shell: `rgb(243, 245, 248)`.
- Both the model-edit page and training-log page render inside the same global white canvas without horizontal overflow.

### Iteration 5 — corrected list-page surface ownership, passed

- [P1] Applying the white page canvas to every route created a redundant layer on list pages because `DataTablePage`, model evaluation, and model management already provide their own white root card.

Fixes:

- Added explicit `pageSurface: 'self'` metadata to each self-surfaced list route: model tuning, model evaluation, model inference, model management, data processing, and dataset management.
- Added `.page-canvas.is-self-surface` to remove the outer canvas padding, radius, background, and shadow only for those routes.
- Preserved the default white canvas for training-log, create, edit, preview, chat, and result routes.

Post-fix evidence:

- `docs/superpowers/specs/assets/fine-tune-list-self-surface-final-1440.png`
- `docs/superpowers/specs/assets/training-log-detail-default-canvas-final-1440.png`
- `docs/superpowers/specs/assets/page-surface-reference-detail-comparison.png`
- Browser computed list state: transparent outer canvas, 0px padding/radius, no shadow; white 12px-radius list card on `rgb(243, 245, 248)` shell.
- Browser computed detail state: white outer canvas, 24px padding, 16px radius, subtle shadow.
- Both states have no horizontal overflow and no console errors at 1440 × 900.

### Iteration 6 — flattened wrapped root PageCard, passed

- [P1] The training-task creation route wraps its root `PageCard` in `.fine-tune-create`. The earlier selector only matched a `PageCard` directly under `.page-canvas`, so this page retained a second white background, 12px radius, and card shadow.

Fixes:

- Added an explicit `.page-card-host` marker to the training-task creation route root; the layout flattens only a directly rendered root `PageCard` or a `PageCard` inside that explicit host.
- Root `PageCard` now uses a transparent background, 0px radius, no shadow, and no bottom margin while preserving its header/body layout.
- Kept the selector excluded from `.is-self-surface`, so list cards retain their own white background, 12px radius, and shadow.
- Rejected a generic one-level descendant selector because it would also match the training-log parameter card.

Post-fix evidence:

- `docs/superpowers/specs/assets/fine-tune-create-double-surface-before-1440.png`
- `docs/superpowers/specs/assets/fine-tune-create-single-surface-final-1440.png`
- Browser computed create-page root card: transparent background, 0px radius, no shadow; outer canvas remains white with 24px padding.
- Browser computed list-page card remains white with 12px radius and subtle shadow on a transparent outer canvas.
- Browser computed training-log parameter card remains white with 12px radius and subtle shadow, confirming that internal business cards are not flattened.
- Both pages have no horizontal overflow; create-page console has no errors.

### Iteration 7 — removed page-level opacity transition, passed

- [P1] When navigating from a self-surface list to a default-canvas secondary page, `route.meta.pageSurface` changed immediately while the old list remained for the 150ms `out-in` leave animation. The result was a semi-transparent old list rendered inside the new white canvas.

Fixes:

- Removed the page-level Vue `transition` wrapper from `MainLayout.vue`.
- Removed the `.fade-enter-*` and `.fade-leave-*` opacity rules.
- Preserved local component animations such as dialogs, disclosures, and the selected-row batch bar.

Post-fix evidence:

- Source flash frame: `/var/folders/nk/yks07zp14wb4rv3jqq0pt_4h0000gn/T/codex-clipboard-ea775434-828f-4bca-9714-72887faa9af9.png`.
- Final detail frame: `docs/superpowers/specs/assets/route-transition-detail-final.png`.
- Immediate state after list → create: old list absent, route-root opacity `1`, zero `.fade-*` transition elements, correct default canvas.
- Immediate state after create → list: old create page absent, route-root opacity `1`, zero `.fade-*` transition elements, correct self-surface canvas.
- Immediate state after list → training log: old list absent, route-root opacity `1`, zero `.fade-*` transition elements, correct default canvas.
- All three paths had no horizontal overflow; browser console had no errors.

## Build evidence gap

The `type-check` script now uses project-reference mode (`vue-tsc -b --noEmit`) so it no longer reports a false pass. `npm run type-check` and `npm run build` remain blocked by pre-existing TypeScript errors in `src/mock/adapter.ts`, `FineTuneCreateView.vue`, and `FineTuneListView.vue`; no remaining error points to `TrainingLogView.vue` or the page-surface files. `npx vite build` succeeds, proving the updated UI bundles for production.

Design-QA final result: passed

final result: passed

---

# Service Dashboard Design QA

## Evidence

- Source visual truth: `docs/superpowers/specs/assets/service-dashboard-approved-1440.png`
- Browser-rendered implementation: `docs/superpowers/specs/assets/service-dashboard-implementation-1440.png`
- Viewport: 1440 × 1024
- State: authenticated `admin` user on `/dashboard`; service dashboard navigation active; 7-day chart visible; four training tasks visible.

## Full-view comparison

The implementation preserves the approved composition: the product shell stays intact, the service dashboard is the active navigation item, the platform-health summary spans the top, the grouped training chart occupies the wide middle track, service health occupies the narrow track, and the training-task table spans the bottom. The three bar series, dual axes, dates, values, service counts, task names, statuses, progress, accuracy, and actions match the selected mock.

A separate focused crop was not required because both source and implementation evidence are full-resolution desktop captures at a readable scale; the chart labels, axis units, service rows, and every task-table column are legible in the full-view comparison.

## Required fidelity surfaces

- Fonts and typography: the existing Inter/system/PingFang stack is retained. Heading, section title, metric, table header, and muted-copy weights and sizes match the selected direction.
- Spacing and layout rhythm: 24px page padding, 14px section gaps, 10px panel radii, light separators, and the wide-chart/narrow-status grid preserve the selected hierarchy. The implementation uses the repository's 240px sidebar and 60px header exactly.
- Colors and visual tokens: white page canvas, `#f3f5f8` shell, indigo `#4f46e5`, green `#10b981`, amber `#f59e0b`, red `#ef4444`, and slate text are aligned with the source and current product tokens.
- Image and icon fidelity: the page contains no decorative raster imagery. The supplied product logo is preserved and existing Font Awesome icons are used consistently; no emoji, handcrafted SVG, placeholder image, or CSS illustration was introduced.
- Copy and content: dashboard title, health summary, chart legend and units, service states, task names, task status, model names, progress, accuracy, timestamps, and action labels match the approved design.

## Interaction and runtime checks

- Login with the existing `admin` credentials navigated to `/dashboard`, confirming the requested default entry behavior.
- ECharts rendered one canvas; hovering 07/10 exposed the tooltip values: training count 18, GPU count 7, and average accuracy 91%.
- “查看全部任务” navigated to `/fine-tune` and browser back restored `/dashboard`.
- The first “查看详情” action navigated to `/training-log/103942` and browser back restored `/dashboard`.
- Browser console errors: none.
- `npm run test:default-dashboard`: passed.
- `npm run test:dashboard`: passed.
- `npx vite build`: passed.

## Comparison history

### Iteration 1 — passed

No actionable P0/P1/P2 differences remain. The only intentional product constraint is that the sidebar active background follows the repository's current neutral active token instead of the slightly bluer tint produced by ImageGen; location, contrast, label, and active-state clarity remain equivalent.

## Validation gap

`npm run type-check` remains blocked by pre-existing TypeScript errors in the mock adapter, dataset mock typing, data-process list, evaluation tabs, and fine-tune views. No reported error points to `DashboardView.vue`, the ECharts registration, router defaults, login redirect, or dashboard regression scripts. The direct Vite production build succeeds.

Design-QA final result: passed

final result: passed

## Compact dashboard revision

- User annotation reference: `/var/folders/nk/yks07zp14wb4rv3jqq0pt_4h0000gn/T/codex-clipboard-43f63327-063f-47da-9e96-31b53cebc49d.png`
- Revised implementation screenshot: `docs/superpowers/specs/assets/service-dashboard-compact-1440.png`
- Viewport: 1440 × 1024
- State: authenticated dashboard, compact layout, redundant title/action row removed.

### Iteration 2 — passed

The annotated header row containing the duplicate “服务看板” title, subtitle, and “查看告警” action was removed entirely. Section gaps, overview height, health icon, metric type, chart height, service rows, task heading, and task rows were reduced by roughly 10%–15%. The result preserves chart labels, dual-axis readability, service-state text, task progress, accuracy, and all task actions while bringing the primary content closer to the top of the page.

- ECharts tooltip remains functional after the height reduction and reports all three 07/10 series values.
- The revised page contains no browser console errors.
- The full-resolution comparison makes the removed annotation target and the compact replacement legible; no focused crop is necessary.
- `npm run test:dashboard`, `npm run test:default-dashboard`, and `npx vite build` pass.

Design-QA final result: passed

final result: passed

## One-screen dashboard revision

- User annotation reference: `/var/folders/nk/yks07zp14wb4rv3jqq0pt_4h0000gn/T/codex-clipboard-3c166ffc-7243-4e57-94fc-48949599c4f1.png`
- Revised implementation screenshot: `docs/superpowers/specs/assets/service-dashboard-one-screen-1440x768.png`
- Viewport: 1440 × 768
- State: authenticated dashboard with the desktop low-height compact rules active.

### Iteration 3 — passed

The platform-status block was reduced again, including its container padding, inner gap, health icon, status copy, metric labels, and metric values. The chart, service rows, task rows, and page-canvas padding now use a dedicated `max-height: 900px` desktop mode. The dashboard page canvas is constrained to the available application viewport so the outer content area does not introduce a vertical scrollbar.

Browser measurements at 1440 × 768:

- document overflow: false
- layout-content overflow: false
- page-canvas overflow: false
- dashboard overflow: false
- task section bottom: 653px within the 768px viewport
- ECharts tooltip: passed with all three series present
- browser console errors: none
- `npm run test:dashboard`, `npm run test:default-dashboard`, and `npx vite build`: passed

Design-QA final result: passed

final result: passed

## Flexible middle-region revision

- User annotation reference: `/var/folders/nk/yks07zp14wb4rv3jqq0pt_4h0000gn/T/codex-clipboard-daf2bbae-baea-418d-9962-7d0e1a1c219b.png`
- Revised implementation screenshot: `docs/superpowers/specs/assets/service-dashboard-flex-middle-1440x900.png`
- Viewport: 1440 × 900
- State: authenticated dashboard with flexible middle-region growth.

### Iteration 4 — passed

The previous fixed-height middle row caused unused white space beneath the task table on taller screens. The dashboard now reserves compact intrinsic height for the platform summary and task table while allowing the chart/service row to consume all remaining viewport height. The ECharts canvas grows with that row, and the service-state rows distribute across the matching height.

Browser measurements:

- at 1440 × 768, chart height: 283px; no document, layout, canvas, or dashboard overflow
- at 1440 × 900, chart height: 415px; no document, layout, canvas, or dashboard overflow
- task table bottom at 1440 × 900: 868px within the 900px viewport
- ECharts tooltip: passed with all three series present
- browser console errors: none
- `npm run test:dashboard`, `npm run test:default-dashboard`, and `npx vite build`: passed

Design-QA final result: passed

final result: passed

## Narrow service-status revision

- User request: make the right-hand service-status panel slightly narrower.
- Revised implementation screenshot: `docs/superpowers/specs/assets/service-dashboard-narrow-service-1440x900.png`
- Viewports: 1440 × 900 and 1440 × 768
- State: authenticated dashboard with the service-status column reduced to approximately 30% of the middle row.

### Iteration 5 — passed

The middle grid now allocates `1.9fr` to the training chart and `0.82fr` to service status, with a 300px minimum width for the service panel. This gives the chart more horizontal space while keeping all service names, status badges, and instance counts fully visible.

Browser measurements:

- at 1440 × 900, chart width: 799px; service width: 345px; service share: 30.1%
- at 1440 × 768, chart width: 799px; service width: 345px
- clipped service cells: none at both tested viewports
- horizontal and vertical document overflow: none at both tested viewports
- browser console errors: none
- `npm run test:dashboard`, `npm run test:default-dashboard`, and `npx vite build`: passed

Design-QA final result: passed

final result: passed

## Taller training-task revision

- User request: increase the training-task region slightly and shorten the middle chart/service region.
- Source visual truth: `docs/superpowers/specs/assets/service-dashboard-narrow-service-1440x900.png` plus the current user annotation.
- Intended viewports: 1440 × 900 and 1440 × 768.
- State: authenticated dashboard with larger task heading and table rows.

### Iteration 6 — blocked

The task section now uses a taller heading and table rows in both standard and low-height desktop modes. Because the middle row is the only flexible region, the additional task height is taken directly from the chart/service row while preserving the one-screen layout contract in code.

Verification evidence:

- `npm run test:dashboard`: passed
- `npm run test:default-dashboard`: passed
- `npx vite build`: passed
- browser-rendered comparison: blocked because the in-app browser rejected the local preview URL under its URL security policy
- implementation screenshot: unavailable for this iteration

Design-QA final result: blocked

final result: blocked
