# UI System First Pass Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Build the first pass of the app-wide UI system and migrate the highest-impact frontend surfaces to the agreed typography, color, icon, layout, button, feedback, and AI content rules.

**Architecture:** Centralize design decisions in token and common widget files, then migrate pages by replacing local hardcoded visuals with shared module visuals and components. Keep this pass focused on visible consistency and maintainability without adding the full accessibility-mode feature yet.

**Tech Stack:** Flutter, Riverpod, shadcn_ui Lucide icons, flutter_markdown.

---

### Task 1: Design Tokens And Common Widgets

**Files:**
- Modify: `health_app/lib/core/app_colors.dart`
- Modify: `health_app/lib/core/app_theme.dart`
- Create: `health_app/lib/core/app_design_tokens.dart`
- Create: `health_app/lib/core/app_module_visuals.dart`
- Create: `health_app/lib/widgets/app_buttons.dart`
- Create: `health_app/lib/widgets/app_status_badge.dart`
- Create: `health_app/lib/widgets/app_toast.dart`
- Create: `health_app/lib/widgets/ai_content.dart`

- [ ] Add typography, spacing, radius, shadow, module color, and module icon tokens.
- [ ] Add reusable gradient-outline button and module-aware buttons.
- [ ] Add top-center toast helper for light feedback.
- [ ] Add shared AI Markdown renderer and plain text cleaner.
- [ ] Run `flutter analyze`.

### Task 2: AI Conversation And Cards

**Files:**
- Modify: `health_app/lib/pages/home/widgets/chat_messages_view.dart`
- Modify: `health_app/lib/pages/home/home_page.dart`

- [ ] Apply shared AI content renderer to AI bubbles.
- [ ] Normalize user bubble, AI bubble, attachments, AI generated note, and Markdown typography.
- [ ] Update intelligent agent visuals to use shared module icons and colors, including `dumbbell` for exercise and `pill` for medication.
- [ ] Preserve gradient-outline white-background buttons in agent welcome cards.
- [ ] Keep today health card gradient outline and ensure empty medication windows still show a light status.
- [ ] Run `flutter analyze lib/pages/home/widgets/chat_messages_view.dart lib/pages/home/home_page.dart`.

### Task 3: Sidebar

**Files:**
- Modify: `health_app/lib/widgets/health_drawer.dart`

- [ ] Keep current structure: user header, health dashboard, common functions, conversation records.
- [ ] Convert user header to no-frame layout with settings on the right.
- [ ] Keep health dashboard as a light panel.
- [ ] Convert common functions to a two-column light matrix without heavy per-item cards.
- [ ] Keep conversation records as lightweight rows with summary left and date right.
- [ ] Run `flutter analyze lib/widgets/health_drawer.dart`.

### Task 4: Core Management Pages

**Files:**
- Modify: `health_app/lib/widgets/enterprise_widgets.dart`
- Modify: `health_app/lib/pages/medication/medication_list_page.dart`
- Modify: `health_app/lib/pages/medication/medication_checkin_page.dart`
- Modify: `health_app/lib/pages/remaining_pages.dart`
- Modify: `health_app/lib/pages/report/report_pages.dart`
- Modify: `health_app/lib/pages/report/ai_analysis_page.dart`
- Modify: `health_app/lib/pages/notifications/notification_center_page.dart`

- [ ] Update summary panels to avoid repeating page titles and reduce icon emphasis.
- [ ] Apply module colors and Lucide icons to medication, exercise, reports, and notifications.
- [ ] Apply shared AI content renderer to report AI text to prevent visible raw Markdown markers such as `**`.
- [ ] Normalize list title/subtitle/tag sizes and row heights.
- [ ] Run targeted `flutter analyze` on modified files.

### Task 5: Profile, Health Archive, Diet, Device

**Files:**
- Modify: `health_app/lib/pages/profile/profile_page.dart`
- Modify: `health_app/lib/pages/remaining_pages.dart`
- Modify: `health_app/lib/pages/diet/diet_capture_page.dart`
- Modify: `health_app/lib/pages/device/device_management_page.dart`
- Modify: `health_app/lib/widgets/ble_sync_dialog.dart`

- [ ] Use two-column short-field layout where appropriate in profile/health archive surfaces already in scope.
- [ ] Apply module tokens to diet and device surfaces.
- [ ] Improve Bluetooth/device panels with shared radius, typography, and module colors.
- [ ] Replace obvious bottom SnackBar style feedback in touched flows with top-center toast where low-risk.
- [ ] Run targeted `flutter analyze` on modified files.

### Task 6: Full Verification

**Files:**
- Test: `health_app`

- [ ] Run `flutter analyze`.
- [ ] If available and practical, run a smoke test or build command for the Flutter app.
- [ ] Summarize changed files and any deferred surfaces.