docs(overview): align implementation plan with UI standards

中文：使总览页实施计划符合现有 UI、可访问性与测试规范。

Author: edwingao28

docs/superpowers/plans/2026-07-21-executive-overview.md

@@ -45,6 +45,7 @@
 - `packages/app/src/lib/overview-data.ts` — pure model/hardware aggregation and ranking.
 - `packages/app/src/lib/overview-data.test.ts` — reducer tests.
 - `packages/app/src/lib/overview-data.server.ts` — official DB/fixture loading for all active models.
+- `packages/app/src/lib/overview-data.server.test.ts` — server orchestration and active-model ordering tests.
 - `packages/app/src/components/overview/overview-page.tsx` — locale-aware server-rendered scorecard.
 - `packages/app/src/components/overview/overview-detail-link.tsx` — tracked drill-down link.
 - `packages/app/src/app/overview/page.tsx` — English route and metadata.
@@ -475,9 +476,27 @@ git commit -m "feat(overview): aggregate executive inference metrics" \
 **Files:**
 
 - Create: `packages/app/src/lib/overview-data.server.ts`
+- Create: `packages/app/src/lib/overview-data.server.test.ts`
 - Create: `packages/app/cypress/fixtures/api/overview.json`
 
-- [ ] **Step 1: Create the server loader**
+- [ ] **Step 1: Write the server-orchestration test first**
+
+Mock only the DB boundary (`getCachedBenchmarks`) and assert that `getOverviewPageData()`:
+
+1. Requests every `DEFAULT_MODELS` entry through its complete `DISPLAY_MODEL_TO_DB` key list.
+2. Returns models in the existing `DEFAULT_MODELS` product order.
+3. Computes the page `latestDate` from the newest hardware-result date.
+4. Keeps an empty model summary in the returned list.
+
+Run the test before creating the loader:
+
+```bash
+pnpm --dir packages/app exec vitest run src/lib/overview-data.server.test.ts
+```
+
+Expected: FAIL because `overview-data.server.ts` does not exist.
+
+- [ ] **Step 2: Create the server loader**
 
 Implement `overview-data.server.ts`:
 
@@ -505,7 +524,7 @@ export async function getOverviewPageData(): Promise<OverviewPageData> {
 }
 ```
 
-- [ ] **Step 2: Add a small precomputed page fixture**
+- [ ] **Step 3: Add a small precomputed page fixture**
 
 Create `overview.json` using the exact `OverviewPageData` schema. Include all five current default models in product order:
 
@@ -517,18 +536,20 @@ Create `overview.json` using the exact `OverviewPageData` schema. Include all fi
 
 Use deterministic dates such as `2026-07-20` and simple tier values `[1200, 1000, 800, 600]` for a winner and `[1000, 800, 600, 400]` for a runner-up. Store `null` for an unreachable 100 tok/s/user tier in at least one non-winning hardware result.
 
-- [ ] **Step 3: Typecheck the server boundary**
+- [ ] **Step 4: Verify the server boundary**
 
 ```bash
+pnpm --dir packages/app exec vitest run src/lib/overview-data.server.test.ts
 pnpm typecheck
 ```
 
-Expected: exit code 0.
+Expected: both commands exit 0.
 
-- [ ] **Step 4: Commit server loading and fixture**
+- [ ] **Step 5: Commit server loading and fixture**
 
 ```bash
 git add packages/app/src/lib/overview-data.server.ts \
+  packages/app/src/lib/overview-data.server.test.ts \
   packages/app/cypress/fixtures/api/overview.json
 git commit -m "feat(overview): load active-model scorecard data" \
   -m "中文：加载活跃模型总览评分数据。"
@@ -554,6 +575,7 @@ Create `overview-detail-link.tsx`:
 
 import Link from 'next/link';
 import type { ReactNode } from 'react';
+import { ArrowRight } from 'lucide-react';
 
 import { track } from '@/lib/analytics';
 
@@ -569,10 +591,14 @@ export function OverviewDetailLink({
   return (
     <Link
       href={href}
-      className="text-brand hover:underline font-medium"
+      className="group inline-flex items-center gap-1 rounded-sm font-medium text-foreground underline decoration-brand/50 underline-offset-4 transition-colors hover:decoration-brand focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none"
       onClick={() => track('overview_model_detail_clicked', { model })}
     >
       {children}
+      <ArrowRight
+        aria-hidden="true"
+        className="size-4 transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none"
+      />
     </Link>
   );
 }
@@ -594,13 +620,18 @@ Define a colocated `STRINGS` dictionary covering every visible phrase: page titl
 Render:
 
 - one `<h1>` and short methodology line;
-- a single semantic `<table data-testid="overview-scorecard">` in `overflow-x-auto`;
+- one repository `Card` with `className="overflow-hidden p-0"`; never one card per model;
+- a single semantic `<table data-testid="overview-scorecard">` with a localized `sr-only` caption, `scope="col"` headers, `scope="row"` model cells, and a grouped heading over the four tier columns;
+- the table inside a keyboard-focusable `role="region"` scroll container with `data-testid="overview-scorecard-scroll"`, `overflow-x-auto`, a visible inset focus ring, and a deliberate `min-w-[70rem]` table width;
 - one row per `data.models` entry;
 - winner hardware and selected precision in the platform cell;
+- an explicit localized `Best` / `第一名` text label, so winner status never depends on color alone;
 - winner score and tier values formatted with `Intl.NumberFormat(locale)`;
 - runner-up gap as `+N% vs. runner-up` / `较第二名高 N%`;
 - `—` for no data or unreachable values;
 - `†` beside `clamped_low` values;
+- screen-reader text for the unreachable dash and clamped marker;
+- semantic `<time dateTime={...}>` for freshness dates;
 - detail link built with:
 
 ```ts
@@ -613,7 +644,11 @@ const query = new URLSearchParams({
 const detailHref = `${locale === 'zh' ? '/zh/inference' : '/inference'}?${query}`;
 ```
 
-Use a sticky first column and `tabular-nums`. Do not add selectors, charts, accordions, client-side sorting, or an AUC card.
+Use the repository's existing semantic tokens and table language: muted headers, thin `border-border/50` dividers, `hover:bg-muted/30`, `focus-within:bg-muted/30`, right-aligned `tabular-nums`, and the GPU-spec table's sticky first-column divider. Use an outline `Badge` for precision at most. Do not hard-code brand/vendor colors, use `font-mono` for numbers, or use `text-primary` as the sole winner treatment. Respect `motion-reduce`.
+
+Add a code comment beside the server-rendered official-data table explaining that unofficial-run overlays are intentionally inapplicable: this page is a cached, cross-model official snapshot, while uploaded runs remain available in the linked interactive inference dashboard.
+
+Do not add selectors, charts, accordions, client-side sorting, AUC language, or an AUC card. Call the scalar a **weighted score** in both locales.
 
 - [ ] **Step 3: Create the English route**
 
@@ -710,6 +745,11 @@ describe('Executive overview', () => {
     cy.get('select').should('not.exist');
     cy.contains('30 tok/s/user').should('exist');
     cy.contains('100 tok/s/user').should('exist');
+    cy.contains('tr', 'DeepSeek V4 Pro').within(() => {
+      cy.contains('Best').should('exist');
+      cy.contains('1,200').should('exist');
+      cy.contains('+20%').should('exist');
+    });
   });
 
   it('shows a truthful empty state and a tracked detail link', () => {
@@ -719,20 +759,35 @@ describe('Executive overview', () => {
       .find('a[href^="/inference?"]')
       .should('have.attr', 'href')
       .and('include', 'i_seq=8k%2F1k');
+    cy.contains('tr', 'Qwen3.5').should('contain.text', 'Standard decode fallback');
+    cy.get('[data-testid="overview-scorecard"]').should('contain.text', '—');
+    cy.get('[data-testid="overview-scorecard"]').should('contain.text', '†');
+    cy.get('[data-testid="overview-scorecard"] time').first().should('have.attr', 'datetime');
   });
 
-  it('keeps the scorecard usable on mobile', () => {
+  it('keeps the sticky model column usable while the mobile scorecard scrolls', () => {
     cy.viewport(375, 812);
     cy.visit('/overview');
-    cy.get('[data-testid="overview-scorecard"]').should('be.visible');
-    cy.contains('DeepSeek V4 Pro').should('be.visible');
+    cy.get('[data-testid="overview-scorecard-scroll"]').then(($region) => {
+      expect($region[0].scrollWidth).to.be.greaterThan($region[0].clientWidth);
+      $region[0].scrollLeft = 500;
+    });
+    cy.contains('th[scope="row"]', 'DeepSeek V4 Pro').then(($cell) => {
+      const before = $cell[0].getBoundingClientRect().left;
+      cy.get('[data-testid="overview-scorecard-scroll"]').scrollTo('right');
+      cy.wrap($cell).then(($scrolledCell) => {
+        expect($scrolledCell[0].getBoundingClientRect().left).to.be.closeTo(before, 2);
+      });
+    });
   });
 
   it('renders the Chinese sibling and language toggle', () => {
     cy.visit('/zh/overview');
     cy.contains('h1', 'AI 推理高管总览').should('exist');
     cy.get('[data-testid="language-toggle"]').should('have.attr', 'href', '/overview');
     cy.contains('tr', 'GLM5.2').should('contain.text', '暂无 8K/1K 单轮基准测试数据');
+    cy.contains('加权评分').should('exist');
+    cy.contains('第一名').should('exist');
   });
 });
 ```