Researched: 2026-03-24 Domain: Frontend UI alignment with Figma Make generated code and screenshots Confidence: HIGH

This phase bridges the gap between the existing Phase 1 frontend (functional but using placeholder UI) and the Figma designs represented by 5 Figma Make generated code packages plus their screenshot targets. The existing frontend has a solid foundation: JWT auth, i18n, layouts, design tokens, and 17 shadcn/ui base components. However, the current pages (login, user dashboard, admin dashboard) are minimal placeholder implementations showing EmptyState components instead of the rich, data-driven UIs shown in the Figma designs.

The Figma Make code provides complete, self-contained React implementations for each screen -- these serve as visual and structural references but must NOT be copied verbatim. They use different routing (react-router vs react-router-dom), lack i18n, lack real auth integration, and use hardcoded mock data instead of TanStack Query hooks. The implementation strategy is: extract visual patterns and component structures from figma-make, adapt them to the existing project conventions (i18n, auth store, design tokens, barrel exports, path aliases), and fill in the placeholder pages with Figma-matching content.

Primary recommendation: Treat figma-make code as a visual reference library. For each of the 5 screens, adapt the component structure and Tailwind classes into the existing project's patterns -- using the project's design tokens, i18n keys, auth store, and UI component library.

<phase_requirements>

• TypeScript strict: true -- no any types, no unused variables
• TanStack Query hooks per domain, no inline useQuery in components
• Path alias @/ for all imports from src/
• Barrel exports for component directories (index.ts)
• cn() utility for conditional class composition
• No Redux -- TanStack Query for server state, lightweight store for auth
• react-i18next for all user-facing text -- must support zh-CN and en-US
• Conventional commits encouraged
• Pre-commit checks: npx tsc -b and npm run build must pass

• Tailwind CSS v4 with @theme inline pattern
• Colors: --primary: #1E40AF, --strength, --weakness, --improvement, chart colors 1-5
• Sidebar: --sidebar: #1E293B with dark theme
• Fonts: Inter + Noto Sans SC + JetBrains Mono
• Radius: sm/md/lg/xl based on --radius: 0.625rem

Figma target: Centered card with gradient background, AI Coach logo (blue rounded square with lightbulb icon), email/password fields, remember me checkbox, sign-in button, copyright footer, language switcher in top-right corner.

Current state: Login page exists at frontend/src/pages/login.tsx. Uses Card component, has email/password/remember-me/sign-in. Uses i18n correctly, integrates with real auth via useLogin() mutation.

Gaps:

Assessment: Minor visual adjustments. Structural match is good. Keep existing auth integration.

Figma target: Showcase page demonstrating all domain-specific components -- ScoreCard, HCPProfileCard, ServiceConfigCard, RadarChart, DimensionBar, DataTable, StatusBadge, FormField, ChatBubble, ChatInput, EmptyState, LoadingState, AudioControls, LanguageSwitcher, AdminSidebar, TopNav.

Current state: Only EmptyState, LanguageSwitcher, and LoadingState exist in frontend/src/components/shared/. Base shadcn/ui components (17) exist in frontend/src/components/ui/.

New components needed for frontend/src/components/shared/:

1. score-card.tsx -- Score display with trend and sparkline
2. hcp-profile-card.tsx -- HCP avatar, specialty, difficulty badge, personality tags
3. session-item.tsx -- Training session row with avatar, score, time
4. stat-card.tsx -- Dashboard stat with icon, value, trend, progress bar
5. action-card.tsx -- Gradient start-training card
6. recommended-scenario.tsx -- Recommended practice scenario
7. chat-bubble.tsx -- Left/right aligned chat message
8. chat-input.tsx -- Message input with voice and send buttons
9. dimension-bar.tsx -- Score bar with label and percentage
10. status-badge.tsx -- Colored status indicator (Active/Draft/Error/Pending)
11. mini-charts.tsx -- SVG mini radar and trend charts

Components needed later (Phase 2+, not this phase):

• RadarChart (requires recharts -- needed for scoring/dashboard in Phase 2/4)
• DataTable (complex -- belongs in Phase 2 admin pages)
• ServiceConfigCard (Phase 2 admin config)
• AudioControls (Phase 3 voice features)
• FormField (Phase 2 admin forms)

Figma target: Full-screen 3-panel layout: Left panel (280px, scenario briefing + HCP profile + key messages + scoring criteria), Center panel (flexible, avatar display area + chat messages + input area with text/audio toggle), Right panel (260px, AI coach hints + message tracker + session stats). Top bar with timer and End Session button.

Current state: No training page exists. Route placeholder comment in router: // Phase 2+: training, history, reports.

New files needed:

• frontend/src/pages/user/training-session.tsx -- Main 3-panel page
• frontend/src/components/coach/left-panel.tsx -- Scenario/HCP info
• frontend/src/components/coach/center-panel.tsx -- Chat + avatar area
• frontend/src/components/coach/right-panel.tsx -- Coaching hints/stats

Route: /user/training/session or /user/training/:sessionId (the training list page is Scenario Selection, the session page is this)

Key structural decisions:

• This is a full-screen layout (not inside the standard UserLayout with nav bar) per Figma -- it has its own top bar with timer
• Collapsible left/right panels with chevron toggles
• Input mode toggle (Text/Audio) at bottom
• Avatar area with toggle switch

Figma target: User dashboard with top nav, 4 stat cards in a row (Sessions Completed, Average Score, This Week, Improvement), left section with Recent Training Sessions (5 items with avatar, name, specialty, mode badge, score, time), right section with Start Training cards (F2F HCP Training gradient blue, Conference Training gradient purple) and Recommended Scenario.

Current state: Exists at frontend/src/pages/user/dashboard.tsx but just shows a Card with EmptyState.

Fix: Replace EmptyState content with the full dashboard layout using mock data. Components needed: StatCard, SessionItem, ActionCard, RecommendedScenario, MiniCharts.

Figma target: Page titled "Select Training Scenario" with tab navigation (F2F Training / Conference Training), filter row (All Products, All Difficulties, All Specialties dropdowns + Search input), then a 3-column grid of HCP scenario cards showing avatar photo, doctor name (Chinese), specialty badge, hospital, personality tags, product, difficulty badge, and "Start Training" button.

Current state: No scenario selection page exists. The route /user/training is not yet registered.

New files needed:

• frontend/src/pages/user/training.tsx -- Scenario selection page

Components reused: HCPProfileCard (from shared components), Badge, Select, Input, Tabs

Note: recharts is used in the figma-make RadarChart component but is NOT needed for Phase 01.1. The dashboard uses simple SVG MiniCharts (no recharts dependency). Recharts should be added in Phase 2 or Phase 4 when actual scoring/analytics pages are built.

Installation (Phase 01.1 only):

cd frontend
npm install @radix-ui/react-scroll-area @radix-ui/react-tabs @radix-ui/react-progress

frontend/src/
├── components/
│   ├── shared/              # Existing + new domain components
│   │   ├── empty-state.tsx       # Existing
│   │   ├── language-switcher.tsx # Existing
│   │   ├── loading-state.tsx     # Existing
│   │   ├── score-card.tsx        # NEW: Score display with trend
│   │   ├── hcp-profile-card.tsx  # NEW: HCP scenario card
│   │   ├── session-item.tsx      # NEW: Training session row
│   │   ├── stat-card.tsx         # NEW: Dashboard stat card
│   │   ├── action-card.tsx       # NEW: Start training CTA
│   │   ├── recommended-scenario.tsx # NEW: Recommended practice
│   │   ├── chat-bubble.tsx       # NEW: Chat message bubble
│   │   ├── chat-input.tsx        # NEW: Chat input + voice
│   │   ├── dimension-bar.tsx     # NEW: Score dimension bar
│   │   ├── status-badge.tsx      # NEW: Status indicator
│   │   └── mini-charts.tsx       # NEW: SVG mini visualizations
│   ├── coach/               # NEW: F2F training session components
│   │   ├── left-panel.tsx        # Scenario/HCP info panel
│   │   ├── center-panel.tsx      # Chat + avatar area
│   │   └── right-panel.tsx       # Coaching hints panel
│   └── ui/                  # Existing shadcn/ui base components
│       ├── scroll-area.tsx       # NEW: Radix ScrollArea
│       ├── tabs.tsx              # NEW: Radix Tabs
│       ├── progress.tsx          # NEW: Radix Progress
│       ├── textarea.tsx          # NEW: Textarea (needed for chat)
│       └── ... (existing 17 components)
├── pages/
│   ├── login.tsx                 # UPDATE: Visual polish
│   ├── user/
│   │   ├── dashboard.tsx         # UPDATE: Full Figma dashboard
│   │   ├── training.tsx          # NEW: Scenario selection page
│   │   └── training-session.tsx  # NEW: F2F training session page
│   └── admin/
│       └── dashboard.tsx         # UPDATE: Placeholder for now

What: Take figma-make component code as visual reference, rewrite using project conventions. When to use: Every component from figma-make. Example:

Figma-make uses:

// figma-make pattern (DO NOT COPY)
import { Card } from './ui/card';
<div className="text-3xl font-bold text-gray-900">{value}</div>

Project adaptation:

// Project pattern (USE THIS)
import { Card, CardContent } from "@/components/ui";
import { useTranslation } from "react-i18next";
import { cn } from "@/lib/utils";

<div className={cn("text-3xl font-bold text-foreground")}>{value}</div>

Key differences to enforce:

1. Imports use @/ path alias, not relative paths
2. Use design token colors (text-foreground) not Tailwind raw colors (text-gray-900) where tokens exist
3. All user-visible text through useTranslation() hooks
4. Component files use kebab-case naming
5. Use cn() for conditional classes

What: Use static mock data objects inside page components for display purposes. When to use: This phase is UI-only -- no backend API calls for dashboard/scenario data. Example:

// Mock data at top of page component
const mockSessions = [
  { id: "1", hcpName: "Dr. Sarah Mitchell", specialty: "Cardiology", mode: "F2F" as const, score: 85, timeAgo: "2 hours ago" },
  // ...
];

// Render with mock data (will be replaced by TanStack Query hooks in Phase 2)
{mockSessions.map((session) => (
  <SessionItem key={session.id} {...session} />
))}

What: Add new routes to the existing router following established patterns. When to use: Adding training and training-session routes. Example:

// In frontend/src/router/index.tsx
{
  path: "/user",
  element: <UserLayout />,
  children: [
    { path: "dashboard", element: <UserDashboard /> },
    { path: "training", element: <ScenarioSelection /> },
    { path: "training/session", element: <TrainingSession /> },
  ],
},

Note: TrainingSession page may use its own full-screen layout (no UserLayout wrapper) since the Figma shows it as a standalone 3-panel screen without the standard top nav. This should be a separate route at the ProtectedRoute level, not nested under UserLayout.

• Copying figma-make code verbatim: The generated code uses different routing lib, no i18n, hardcoded text, different import paths
• Using raw Tailwind colors instead of design tokens: Use text-primary not text-blue-600, bg-destructive not bg-red-500
• Adding recharts dependency for mini charts: Use inline SVG per figma-make MiniCharts pattern -- recharts is overkill for this phase
• Skipping i18n for "temporary" mock data: Even mock data labels should use i18n keys -- this prevents technical debt
• Creating components in figma-make structure: Components go in frontend/src/components/shared/ or frontend/src/components/coach/, NOT in src/app/components/

What goes wrong: Copying figma-make code that uses import { Card } from './ui/card' instead of import { Card } from '@/components/ui'. Why it happens: Figma Make generates standalone projects with different directory structure. How to avoid: Every import must be rewritten to use @/ alias and the project's barrel exports. Warning signs: Build fails with "Module not found" errors.

What goes wrong: Hardcoded English text from figma-make code lands in the final components. Why it happens: Figma Make code has no i18n -- all text is inline strings. How to avoid: Create new i18n namespace dashboard.json and training.json for new page strings. Add both en-US and zh-CN translations. Warning signs: Text not updating when language is switched.

What goes wrong: Some components use text-gray-900 while others use text-foreground, creating inconsistent dark mode behavior. Why it happens: Figma-make code mixes raw Tailwind colors with design token references inconsistently. How to avoid: Map figma-make colors to design tokens: text-gray-900 -> text-foreground, bg-blue-600 -> bg-primary, text-gray-600 -> text-muted-foreground, bg-green-600 -> text-strength. Warning signs: Colors look wrong in dark mode (if ever enabled).

What goes wrong: F2F Training session page renders inside UserLayout, getting double navigation bars. Why it happens: The training session page is a full-screen 3-panel layout that should NOT be inside UserLayout. How to avoid: Register the training session route at the ProtectedRoute level, not as a child of UserLayout. Warning signs: Squished layout, nav bar visible during training session.

What goes wrong: Figma-make code uses implicit types, any patterns, and nullable access without checks. Why it happens: Figma Make generates code targeting a relaxed TypeScript config. How to avoid: Add explicit interfaces for all props. Use optional chaining. The project has noUncheckedIndexedAccess: true which catches array index access issues. Warning signs: tsc -b fails with type errors.

What goes wrong: New UI components (ScrollArea, Tabs, Progress, Textarea) are created but not exported from @/components/ui/index.ts. Why it happens: Forgetting to update the barrel export file. How to avoid: After creating each new UI component file, immediately add it to frontend/src/components/ui/index.ts. Warning signs: Import errors when using import { Tabs } from '@/components/ui'.

// frontend/src/components/shared/stat-card.tsx
import type { LucideIcon } from "lucide-react";
import { Card, CardContent } from "@/components/ui";
import { cn } from "@/lib/utils";

interface StatCardProps {
  label: string;
  value: string | number;
  icon?: LucideIcon;
  trend?: { value: string; direction: "up" | "down" };
  chart?: React.ReactNode;
  progress?: { current: number; total: number };
}

export function StatCard({ label, value, icon: Icon, trend, chart, progress }: StatCardProps) {
  return (
    <Card>
      <CardContent className="p-6">
        <div className="flex items-start justify-between mb-4">
          {Icon && (
            <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
              <Icon className="size-5 text-primary" />
            </div>
          )}
          {chart}
        </div>
        <div className="text-3xl font-bold text-foreground">{value}</div>
        <div className="text-sm text-muted-foreground">{label}</div>
        {trend && (
          <div className={cn("mt-3 flex items-center gap-1 text-sm font-medium",
            trend.direction === "up" ? "text-strength" : "text-destructive"
          )}>
            {trend.value}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// frontend/public/locales/en-US/dashboard.json
{
  "welcome": "Welcome back, {{name}}!",
  "overview": "Here's your training overview",
  "sessionsCompleted": "Sessions Completed",
  "averageScore": "Average Score",
  "thisWeek": "This Week",
  "improvement": "Improvement",
  "recentSessions": "Recent Training Sessions",
  "viewAll": "View All",
  "startTraining": "Start Training",
  "f2fTraining": "F2F HCP Training",
  "f2fDescription": "Practice 1-on-1 with digital HCP",
  "conferenceTraining": "Conference Training",
  "conferenceDescription": "Practice department presentation",
  "recommendedScenario": "Recommended Scenario",
  "start": "Start"
}

// Addition to frontend/src/router/index.tsx
import ScenarioSelection from "@/pages/user/training";
import TrainingSession from "@/pages/user/training-session";

// Inside ProtectedRoute children:
{
  path: "/user",
  element: <UserLayout />,
  children: [
    { path: "dashboard", element: <UserDashboard /> },
    { path: "training", element: <ScenarioSelection /> },
  ],
},
// Training session as separate full-screen route (not inside UserLayout)
{
  path: "/user/training/session",
  element: <TrainingSession />,
},

Current namespaces: common, auth, nav

New namespaces needed:

Both en-US and zh-CN translations required for each.

1. F2F Training Session Route Nesting

   • What we know: The Figma shows a full-screen 3-panel layout without the standard nav bar
   • What's unclear: Should training session be a completely separate route outside UserLayout, or should it be a special "full-screen" mode within UserLayout that hides the nav?
   • Recommendation: Separate route at ProtectedRoute level (simpler, cleaner)

2. Mock Data vs Backend Integration Timing

   • What we know: This phase is UI-only alignment, Phase 2 adds real backend data
   • What's unclear: Should mock data be in separate files for easy removal, or inline in components?
   • Recommendation: Mock data as const arrays at top of page components, with // TODO: Replace with TanStack Query hook in Phase 2 comments

3. Scenario Selection Page Data Source

   • What we know: The Figma shows Chinese doctor names with specialty/hospital/personality
   • What's unclear: Whether to show the same specific mock HCPs as in Figma or generic placeholders
   • Recommendation: Match the Figma mock data closely (Dr. Wang Wei, Dr. Li Na, etc.) for visual fidelity review

Missing dependencies with no fallback: None Missing dependencies with fallback: None

• Figma-make generated code: 5 directories analyzed in full
• Figma-make screenshots: 5 PNG files visually inspected
• Existing frontend source: All files in frontend/src/ reviewed
• frontend/package.json: Current dependency list verified
• frontend/src/styles/index.css: Current design tokens verified
• npm registry: Versions verified for @radix-ui/react-scroll-area (1.2.10), @radix-ui/react-tabs (1.1.13), @radix-ui/react-progress (1.1.8), recharts (3.8.0)

• CLAUDE.md project conventions: All coding standards extracted and applied to research
• Phase 1 decisions from STATE.md: Design token source, routing patterns, auth patterns

Confidence breakdown:

• Standard stack: HIGH - Existing project dependencies well documented, new deps verified against npm
• Architecture: HIGH - Existing patterns established in Phase 1, figma-make code fully analyzed
• Pitfalls: HIGH - Based on concrete comparison between figma-make code and project conventions
• Component inventory: HIGH - Every file in both codebases enumerated and compared

Research date: 2026-03-24 Valid until: 2026-04-24 (stable -- no fast-moving dependencies)

Visual and interaction contract for Figma alignment phase. Generated by gsd-ui-researcher, verified by gsd-ui-checker.

Phase goal: Align existing frontend with 5 Figma Make generated screens. Maintain visual consistency with Figma screenshots and ensure functional completeness. All new components use the existing design token system established in Phase 1.

Note: 17 shadcn/ui base components already exist in frontend/src/components/ui/. This phase adds 4 new base components (ScrollArea, Tabs, Progress, Textarea) and 11 shared domain components.

Declared values (must be multiples of 4):

Exceptions:

• F2F Training left panel width: 280px (per Figma)
• F2F Training right panel width: 260px (per Figma)
• F2F Training top bar height: 56px (h-14)
• F2F Training avatar display area height: 240px (h-[240px])
• Chat input minimum height: 44px (min-h-[44px], touch target)
• Mic/Send buttons: 44px (h-11 w-11, touch target)
• Login card max width: 480px (max-w-[480px])
• Dashboard max width: 1440px (max-w-[1440px])

Font stack: 'Inter', 'Noto Sans SC', sans-serif (already configured as --font-sans)

Weight rules (2 weights only):

• 400 (normal): Body text, captions, form inputs, descriptions, placeholders, secondary labels, nav items (non-active)
• 600 (semibold): All emphasis -- page titles (h1), section headings (h2), panel headers, stat values, buttons, form labels, card section titles, active nav items, badge text

Size usage by screen:

• Login: Title at 30px semibold, labels at 12px semibold, input text at 16px normal, button at 16px semibold
• Dashboard: Stat values at 30px semibold, section titles at 20px semibold, session text at 16px normal, trend labels at 12px normal
• Scenario Selection: Page title at 30px semibold, doctor names at 16px semibold, specialties at 12px normal
• F2F Training: Panel headers at 16px semibold, card titles at 12px semibold, card body at 12px normal
• Chat messages: 16px normal, timestamps at 12px normal

Accent reserved for:

1. Primary CTA buttons (Sign In, Start Training)
2. Active navigation link indicators
3. Icon background tints (bg-primary/10 on stat cards)
4. Chat bubbles from HCP (bg-blue-500)
5. Input mode toggle active state
6. Progress bar fill
7. Badge highlighting for "F2F" mode indicator

Semantic colors (already established):

Difficulty badge color mapping:

Mode badge color mapping:

Figma-to-Design-Token color mapping (executor must follow):

All text must go through react-i18next. Two new i18n namespaces required: dashboard and training.

Empty state (kept from Phase 1):

• Heading: "No data yet" / "暂无数据" (common:noData)
• Body: "Complete your first training session to see results here" / "完成您的第一次培训后即可查看结果" (common:noDataDescription)

Error state:

• Heading: "Something went wrong" / "出现错误" (common:errorTitle)
• Body: "Please try again or contact support if the problem persists" / "请重试，如问题持续请联系技术支持" (common:errorDescription)

Destructive action:

• End Session: Browser confirm() dialog with message "Are you sure you want to end this training session?" / "确定要结束本次培训吗？" (training:endSessionConfirm)

Each screen declares one primary focal point -- the element the user's eye should land on first.

All icon-only interactive elements must declare aria-label and render a visible Tooltip on hover/focus.

• Full viewport, centered card
• Background: bg-gradient-to-br from-blue-50 via-white to-blue-50
• Card: max-w-[480px] bg-white rounded-2xl shadow-xl p-8
• Logo: 64x64 blue gradient square with lightbulb SVG icon, rounded-2xl
• Language switcher: fixed top-6 right-6, white bg, shadow-sm, rounded-lg
• Copyright: fixed bottom-6, centered, text-xs text-muted-foreground

• Inside existing UserLayout (with top nav)
• Max width: 1440px, centered, px-6 py-8
• Row 1: 4-column grid of StatCards, gap-6, mb-6
• Row 2: 5-column grid -- left 3 cols (Recent Sessions), right 2 cols (Start Training + Recommended)
• Cards: bg-white rounded-lg p-6 shadow-sm border border-gray-200 (mapped to bg-card rounded-lg p-6 shadow-sm border border-border)

• Inside existing UserLayout (with top nav)
• Page title: text-3xl font-semibold, mb-4
• Tabs: F2F Training | Conference Training, mb-6
• Filter row: 3 Select dropdowns + Search Input, gap-4, mb-8
• Card grid: 3-column on desktop, 2-column tablet, 1-column mobile, gap-6
• HCP cards: centered avatar (96px circle), name semibold, specialty badge, hospital, personality tags, product, difficulty badge, full-width "Start Training" button

• Full-screen (h-screen w-screen overflow-hidden flex)
• NOT inside UserLayout -- separate route at ProtectedRoute level
• Left panel: 280px width, bg-slate-50, border-r, collapsible to 48px (w-12)
• Center panel: flex-1, bg-white, vertical flex (top bar 56px + avatar 240px + chat flex-1 + input area)
• Right panel: 260px width, bg-slate-50, border-l, collapsible to 48px (w-12)
• Top bar: h-14, border-b, timer left, End Session button right (destructive variant)

• Email/password fields: focus ring-2 ring-blue-500
• Password visibility toggle: Eye/EyeOff icon button, aria-label per accessibility table above
• Remember me: Checkbox component
• Submit: Loading state with Loader2 spinner + "Signing in..." text
• Error: Red text below form on auth failure

• Stat cards: Static display (no interaction in this phase)
• Recent sessions: Clickable rows with chevron-right, hover bg-gray-50
• Action cards (F2F / Conference): "Start Training" button navigates to /user/training
• Recommended scenario: "Start Training" button navigates to training session
• View All link: Navigates to session history (placeholder/no-op in this phase)

• Tab switching: F2F Training / Conference Training tabs filter the grid
• Filters: All Products, All Difficulties, All Specialties dropdowns + search input (client-side filtering of mock data)
• HCP cards: "Start Training" button navigates to /user/training/session
• Card hover: shadow-md transition

• Left panel collapse: ChevronLeft toggle (with aria-label and Tooltip per accessibility table), collapses to 48px strip
• Right panel collapse: ChevronRight toggle (with aria-label and Tooltip per accessibility table), collapses to 48px strip
• Session timer: Auto-incrementing mm:ss display
• Avatar toggle: Switch component enables/disables avatar display area
• Chat: Auto-scroll to bottom on new messages
• Text input: Textarea with Enter to send, Shift+Enter for newline
• Input mode toggle: Text/Audio pill buttons
• Mic button: Idle (blue) -> Recording (red pulse) -> Processing (yellow) -> Idle; aria-label updates per state (see accessibility table)
• Send button: Disabled when input empty or in audio mode; aria-label per accessibility table
• End Session: Destructive button triggers confirm dialog
• HCP response: Simulated 1.5s delay with typing indicator (three bouncing dots)
• Key messages: Checkbox toggles in left panel

New Radix dependencies to install:

cd frontend && npm install @radix-ui/react-scroll-area @radix-ui/react-tabs @radix-ui/react-progress

No third-party registries. All components are either existing shadcn/ui primitives or custom domain components built on top of them.

Both en-US and zh-CN translations required for every key.

This phase uses static mock data. No backend API calls. Mock data lives as const arrays at the top of page components with // TODO: Replace with TanStack Query hook in Phase 2 comments.

• 4 stat values: Sessions Completed (24), Average Score (78), This Week (5 of 7), Improvement (+12%)
• 5 recent sessions: Dr. Sarah Mitchell (Cardiology, F2F, 85), Dr. James Wong (Oncology, Conference, 72), Dr. Michael Chen (Neurology, F2F, 92), Dr. Emily Roberts (Endocrinology, Conference, 55), Dr. Robert Thompson (Rheumatology, F2F, 88)
• 2 action cards: F2F HCP Training (blue gradient), Conference Training (purple gradient)
• 1 recommended scenario: Dr. Amanda Hayes, Intermediate difficulty

• 6 HCP cards matching Figma screenshot:
  1. Dr. Wang Wei (王伟) - Oncologist, Beijing Cancer Hospital, Hard, PD-1 Inhibitor
  2. Dr. Li Na (李娜) - Cardiologist, Shanghai Cardiovascular Center, Easy, ACE Inhibitor
  3. Dr. Zhang Ming (张明) - Neurologist, Guangzhou General Hospital, Medium, Migraine Treatment
  4. Dr. Chen Hui (陈慧) - Pulmonologist, Shenzhen Respiratory Institute, Medium, COPD Inhaler
  5. Dr. Liu Yang (刘洋) - Endocrinologist, Hangzhou Diabetes Center, Hard, GLP-1 Agonist
  6. Dr. Zhao Lin (赵琳) - Hematologist, Nanjing Blood Disease Hospital, Easy, Anticoagulant Therapy

• HCP: Dr. Wang Wei, Oncologist, Skeptical/Detail-oriented personality
• Product: PD-1 Inhibitor
• 4 key messages: Efficacy data from Phase III trial, Safety profile comparison, Dosing convenience, Patient quality of life data
• 5 scoring criteria: Key Message 30%, Objection Handling 25%, Communication 20%, Product Knowledge 15%, Scientific 10%
• Initial HCP message: "Good morning, I have about 10 minutes. What brings you here today?"
• 2 AI Coach hints in right panel

• Dimension 1 Copywriting: PASS
• Dimension 2 Visuals: PASS
• Dimension 3 Color: PASS
• Dimension 4 Typography: PASS
• Dimension 5 Spacing: PASS
• Dimension 6 Registry Safety: PASS

Approval: pending