# OSHUN Web App — Comprehensive Polish, Testing & Verification Checklist (v3)

**Created**: 2026-02-22 **Source**: Deep audit of OSHUN_WEB_APP_TODOS_2.md
completions, codebase analysis, test coverage gaps **Scope**: Visual polish,
animations, micro-interactions, comprehensive testing, Claude-in-Chrome E2E
verification

---

## STRICT QUALITY ENFORCEMENT RULES

These rules are **absolute and non-negotiable**. Every task executor MUST follow
them.

### Rule 1: NEVER Mark a Task Complete Prematurely

A task is ONLY complete when ALL of the following are true:

1. The code compiles with zero TypeScript errors (`npx tsc --noEmit`)
2. The code passes lint (`npx eslint --no-error-on-unmatched-pattern`)
3. All related tests pass (`npx vitest run <test-file>`)
4. The feature has been visually verified in a real browser (Claude-in-Chrome or
   manual)
5. The implementation matches EVERY bullet point in the task description
6. No TODO comments, placeholder returns, or stub functions remain
7. Accessibility requirements are met (keyboard nav, ARIA, focus management)
8. Responsive behavior works at 375px, 768px, and 1440px widths

If ANY of these conditions fail, the task stays `[ ]`. Period.

### Rule 2: NO Stubs, Placeholders, or Shortcuts

- Every function must contain real implementation logic
- Every test must contain real assertions (not just `expect(true).toBe(true)`)
- Every animation must be visually smooth and correct
- Every component must handle loading, error, and empty states
- "TODO" comments are forbidden in completed tasks

### Rule 3: Test Assertions Must Be Meaningful

Tests must verify:

- Correct DOM output (not just "renders without crashing")
- User interactions produce expected state changes
- Edge cases (empty data, null values, network errors)
- Accessibility attributes are present and correct
- Loading/error states render appropriately

### Rule 4: Visual Verification Required

Every UI task must be verified using Claude-in-Chrome:

- Take a screenshot after implementation
- Verify at mobile (375px), tablet (768px), and desktop (1440px)
- Verify hover states, focus states, and animations
- Verify dark mode appearance
- Verify with prefers-reduced-motion if animations are involved

### Rule 5: Honest Status Reporting

- `[ ]` — Not started
- `[~]` — In progress (actively being worked on)
- `[x]` — Complete (ALL Rule 1 conditions verified)

If blocked or unable to complete: leave as `[ ]` and add a note explaining why.

---

## Legend

- `[ ]` — Not started
- `[~]` — In progress
- `[x]` — Complete (verified against Rule 1)

---

## Phase 1: Design System Animation & Micro-Interaction Foundation

Before any feature polish, establish the animation primitives that all
components will use.

### 1.1 Animation Primitives

- [x] Add `animateIn` keyframe: fade-in + translateY(8px) → translateY(0) with
      entrance easing, 200ms duration
- [x] Add `animateOut` keyframe: fade-out + translateY(0) → translateY(8px) with
      exit easing, 150ms duration
- [x] Add `scaleIn` keyframe: scale(0.95) + opacity(0) → scale(1) + opacity(1)
      with spring easing, 250ms
- [x] Add `scaleOut` keyframe: scale(1) → scale(0.95) + opacity(0) with exit
      easing, 150ms
- [x] Add `slideInFromBottom` keyframe: translateY(100%) → translateY(0) with
      spring easing, 300ms
- [x] Add `slideOutToBottom` keyframe: translateY(0) → translateY(100%) with
      exit easing, 200ms
- [x] Add `slideInFromRight` keyframe: translateX(100%) → translateX(0) with
      spring easing, 300ms
- [x] Add `slideOutToRight` keyframe: translateX(0) → translateX(100%) with exit
      easing, 200ms
- [x] Add `shake` keyframe: translateX(0, -4px, 4px, -4px, 4px, 0) for error
      feedback, 400ms
- [x] Add `pulse` keyframe: scale(1) → scale(1.05) → scale(1) with standard
      easing, 600ms loop
- [x] Add `glow` keyframe: box-shadow opacity 0.3 → 0.6 → 0.3 with domain accent
      color, 2s loop
- [x] Add `checkmarkDraw` keyframe: stroke-dashoffset from full to 0 for
      checkbox animation, 300ms
- [x] Add `ripple` keyframe: scale(0) + opacity(0.3) → scale(2.5) + opacity(0)
      for touch feedback, 500ms
- [x] Add `float` keyframe: translateY(0) → translateY(-6px) → translateY(0)
      with ease-in-out, 3s loop
- [x] Add `spin` keyframe: rotate(0deg) → rotate(360deg) for loading spinners,
      800ms linear loop
- [x] Add `shimmer` keyframe: background-position -200% → 200% for skeleton
      loading, 1.5s linear loop
- [x] Ensure ALL keyframes have `@media (prefers-reduced-motion: reduce)`
      override that disables or reduces them
- [x] Create CSS utility classes for each animation: `.animate-in`,
      `.animate-out`, `.scale-in`, `.slide-up`, etc.
- [x] Add animation delay utilities: `.delay-50`, `.delay-100`, `.delay-150`,
      `.delay-200`, `.delay-300`
- [x] Add stagger utilities: `.stagger-children > :nth-child(n)` with
      incremental delays (50ms per child)
- [x] Verify all animations in browser at 60fps using Chrome DevTools
      Performance tab

### 1.2 Interactive State Tokens

- [x] Define hover transform token: `scale(1.02)` for cards, `scale(1.05)` for
      small buttons
- [x] Define active transform token: `scale(0.98)` for press-down effect
- [x] Define hover shadow token: elevated shadow (larger blur, slightly more
      offset)
- [x] Define hover background token:
      `color-mix(in srgb, currentColor 5%, transparent)` overlay
- [x] Define focus-visible ring: 2px solid accent color with 2px offset,
      animated opacity
- [x] Define glow-on-hover mixin: box-shadow with domain accent color at 20%
      opacity, 0 0 20px spread
- [x] Create `.interactive-card` utility: combines hover scale, shadow
      elevation, and transition
- [x] Create `.interactive-button` utility: combines hover scale, background
      shift, and active press
- [x] Create `.interactive-icon` utility: combines hover rotate(5deg), color
      shift, and scale
- [x] Add transitions to all interactive tokens: use motion duration tokens
      (fast for hover, normal for complex)
- [x] Verify hover/active/focus states visually in Chrome using Claude-in-Chrome

### 1.3 Gradient & Visual Effect Tokens

- [x] Define domain gradient tokens: linear-gradient from accent-400 to
      accent-600 for each domain
- [x] Define hero gradient: radial-gradient with domain accent at 20% opacity
      fading to transparent
- [x] Define card shine effect: linear-gradient(105deg, transparent 40%,
      rgba(255,255,255,0.03) 45%, transparent 50%) for subtle shine on hover
- [x] Define glassmorphism mixin: background rgba(255,255,255,0.05),
      backdrop-filter blur(12px), border 1px solid rgba(255,255,255,0.08)
- [x] Define frosted-glass variant: background rgba(4,11,22,0.7),
      backdrop-filter blur(20px)
- [x] Define text-gradient utility: background-clip text with domain gradient
- [x] Define glow effect: box-shadow 0 0 30px domain-accent at 15% opacity
- [x] Define border-glow: border-color transition to domain accent on hover
- [x] Verify all effects render correctly on Chrome, Safari, Firefox

### 1.4 Skeleton Loading Enhancement

- [x] Fix Skeleton component: apply
      `animation: oshun-skeleton 1.5s ease-in-out infinite` instead of static
      background
- [x] Add gradient shimmer to skeleton:
      `linear-gradient(90deg, surface-color 25%, surface-raised 50%, surface-color 75%)`
      with `background-size: 200% 100%`
- [x] Add skeleton border-radius matching for each preset (text: 4px, avatar:
      50%, card: 12px, stat: 8px)
- [x] Add skeleton pulse variant for reduced-motion users (opacity 0.5 → 1 →
      0.5)
- [x] Add skeleton height/width animation (subtle grow from 95% to 100% width on
      load)
- [x] Verify skeleton animation smoothness at 60fps in Chrome DevTools
- [x] Verify skeleton respects `prefers-reduced-motion: reduce`

### 1.5 Loading Spinner Component

- [x] Create `<Spinner>` component with sizes: xs (12px), sm (16px), md (20px),
      lg (28px), xl (36px)
- [x] Use SVG circle with stroke-dasharray animation (not CSS rotate on border)
- [x] Add color prop: default (text-tertiary), accent (domain color), white (for
      dark backgrounds)
- [x] Add `aria-label="Loading"` and `role="status"` for accessibility
- [x] Add `<span className="sr-only">Loading...</span>` for screen readers
- [x] Respect `prefers-reduced-motion`: show static spinner icon instead of
      animation
- [x] Integrate Spinner into Button component's loading state
- [x] Integrate Spinner into SearchInput's loading state
- [x] Write unit test: renders at each size, has correct aria attributes
- [x] Write unit test: respects reduced motion preference
- [x] Verify spinner animation visually in Claude-in-Chrome

---

## Phase 2: Design System Component Visual Polish

Every design system component gets hover states, animations, and visual
refinement.

### 2.1 Button Polish

- [x] Add hover transform: `scale(1.02)` with
      `transition: transform var(--duration-fast) var(--easing-standard)`
- [x] Add active transform: `scale(0.98)` for press-down feel
- [x] Add hover background brightness shift: `filter: brightness(1.1)` for
      primary, `background-color` change for ghost/secondary
- [x] Add ripple effect on click: expanding circle from click point with 500ms
      fade-out
- [x] Add focus-visible ring animation: ring fades in over 150ms instead of
      instant
- [x] Add loading spinner (Spinner component) replacing text when `loading=true`
- [x] Add icon animation on hover: leading icon shifts left 2px, trailing icon
      shifts right 2px
- [x] Add disabled state: reduce opacity to 0.5 with `cursor: not-allowed` and
      no hover effects
- [x] Add domain variant gradient background for primary domain buttons
- [x] Verify all states in Claude-in-Chrome: default, hover, active, focus,
      disabled, loading
- [x] Write test: ripple effect triggers on click
- [x] Write test: spinner shows during loading state
- [x] Write test: hover/active transforms apply correct CSS classes

### 2.2 IconButton Polish

- [x] Add hover: background-color transition from transparent to
      `surface-raised` over 150ms
- [x] Add hover: icon `scale(1.1)` with spring easing
- [x] Add active: icon `scale(0.9)` press effect
- [x] Add tooltip delay: 500ms before showing, instant hide
- [x] Add tooltip entrance animation: `scaleIn` from 0.9 with fade
- [x] Add focus-visible ring: 2px accent ring with 2px offset
- [x] Verify in Claude-in-Chrome: hover fills background, icon scales, tooltip
      appears after delay

### 2.3 Card Polish

- [x] Add hover: `translateY(-2px)` lift effect with shadow elevation increase
- [x] Add hover: border-color transition to slightly lighter shade
- [x] Add hover: subtle background brightness increase
      (`filter: brightness(1.03)`)
- [x] Add transition:
      `transform 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard)`
- [x] Add `interactive` prop that enables hover effects (not all cards should be
      hoverable)
- [x] Add domain accent border variant: left border 3px solid domain color
- [x] Add entrance animation: `animateIn` when first rendered (fade + slide up)
- [x] Add card shine effect on hover (subtle light sweep across surface)
- [x] Verify in Claude-in-Chrome: smooth lift on hover, no layout shift

### 2.4 Badge Polish

- [x] Add entrance animation: `scaleIn` when first rendered (bounce from 0.8 to
      1.0)
- [x] Add pulse animation for notification badges: gentle `pulse` keyframe loop
- [x] Add dot variant: small colored circle (8px) without text for compact
      notification indicators
- [x] Add count animation: number counts up from 0 when badge appears
- [x] Verify all variants visually: default, success, warning, error, info,
      domain

### 2.5 Tag Polish

- [x] Add remove button hover: `X` icon rotates 90deg and turns red
- [x] Add remove animation: tag scales to 0 and fades out over 200ms before
      removal
- [x] Add entrance animation: `scaleIn` with stagger when multiple tags render
- [x] Add hover: slight brightness increase on tag background
- [x] Verify remove animation in Claude-in-Chrome: smooth shrink + fade

### 2.6 ProgressBar Polish

- [x] Add fill animation: bar grows from 0% to target width over 600ms with
      spring easing on mount
- [x] Add stripe animation for indeterminate: diagonal stripes moving right
- [x] Add shimmer effect on fill edge: subtle light sweep
- [x] Add color transition when progress changes (smooth interpolation)
- [x] Add milestone markers: optional dots at 25%, 50%, 75% with tooltip
- [x] Verify animation smoothness in Claude-in-Chrome

### 2.7 ProgressRing Polish

- [x] Add fill animation: stroke-dashoffset animates from full circumference to
      target over 800ms
- [x] Add glow effect: SVG filter with gaussian blur on progress stroke
- [x] Add color gradient along stroke: start-color to end-color (domain accent
      spectrum)
- [x] Add pulse effect when reaching 100%: ring pulses twice then shows
      checkmark
- [x] Add center label animation: count-up number display
- [x] Verify SVG animation renders correctly across Chrome and Safari

### 2.8 StatTile Polish

- [x] Add hover: card lift effect (translateY -2px) with shadow elevation
- [x] Add value count-up animation: numbers animate from 0 to value over 800ms
      with easeOutCubic
- [x] Add trend arrow animation: slides in from left/right with color (green up,
      red down)
- [x] Add sparkline draw animation: line draws from left to right over 600ms
      using stroke-dashoffset
- [x] Add icon background glow on hover: domain accent glow circle behind icon
- [x] Verify count-up animation in Claude-in-Chrome

### 2.9 Avatar Polish

- [x] Add image load transition: fade-in from skeleton placeholder over 200ms
- [x] Add online status indicator pulse: green dot with subtle pulse animation
- [x] Add hover: slight scale(1.05) for interactive avatars
- [x] Add ring variant: colored ring around avatar for special status (admin,
      premium)
- [x] Add group variant: overlapping avatars with +N counter
- [x] Verify image loading transition in Claude-in-Chrome

### 2.10 Toast Polish

- [x] Add entrance animation: slide in from right edge + fade-in over 300ms
- [x] Add exit animation: slide out to right + fade-out over 200ms
- [x] Add auto-dismiss progress bar: thin line at bottom that shrinks from 100%
      to 0%
- [x] Add stacking: multiple toasts stack vertically with 8px gap, each new
      toast pushes others down
- [x] Add hover pause: hovering over toast pauses auto-dismiss timer
- [x] Add action button hover: underline + slight scale
- [x] Add icon animation per variant: success checkmark draws in, error X
      shakes, warning triangle pulses
- [x] Verify toast lifecycle (enter → auto-dismiss → exit) in Claude-in-Chrome

### 2.11 OverlaySheet Polish

- [x] Add backdrop animation: opacity 0 → 0.5 over 200ms with blur-in
- [x] Add sheet entrance: `slideInFromBottom` on mobile, `scaleIn` on desktop,
      over 300ms with spring easing
- [x] Add sheet exit: `slideOutToBottom` on mobile, `scaleOut` on desktop, over
      200ms
- [x] Add swipe indicator: small gray bar (40px x 4px) at top of mobile sheet
      for swipe affordance
- [x] Add swipe-to-dismiss: sheet follows finger position, dismiss if
      dragged >30% of height
- [x] Add content stagger: children inside sheet stagger-animate in 50ms apart
      after sheet opens
- [x] Add close button hover: rotate 90deg, background fill transition
- [x] Verify entrance/exit animations in Claude-in-Chrome at 375px and 1440px

### 2.12 Tabs Polish

- [x] Add animated indicator: underline bar slides from active tab to clicked
      tab with spring easing
- [x] Add tab hover: background-color transition to surface-raised over 150ms
- [x] Add tab active press: slight translateY(1px) on mouse-down
- [x] Add tab focus: accent-colored focus ring with animated opacity
- [x] Add scrollable tabs: horizontal scroll with fade-out masks on edges when
      overflowing
- [x] Add scroll buttons: left/right chevron buttons appear when tabs overflow
- [x] Verify indicator slide animation across 5+ tabs in Claude-in-Chrome

### 2.13 SegmentedControl Polish

- [x] Add sliding highlight: background highlight slides from previous to next
      selected segment with spring easing, 250ms
- [x] Add hover on unselected: text color shifts to lighter shade
- [x] Add press effect: selected segment scales down slightly (0.98) on click
- [x] Add transition for segment text color change: 150ms color transition
- [x] Verify slide animation with 4 segments in Claude-in-Chrome

### 2.14 Dropdown Polish

- [x] Add entrance animation: `scaleIn` from top-left origin point (or anchor
      corner) over 200ms
- [x] Add exit animation: `scaleOut` to origin over 150ms
- [x] Add item hover: background slide-in from left over 100ms (not instant
      color change)
- [x] Add keyboard focus: item has left accent border that slides in
- [x] Add separator: thin divider line with 8px margin
- [x] Add sub-menu support: items with chevron that open nested dropdown on
      hover
- [x] Add scroll shadow: top/bottom shadows appear when dropdown content is
      scrollable
- [x] Verify entrance animation and item hover in Claude-in-Chrome

### 2.15 SearchInput Polish

- [x] Add focus animation: border width transitions from 1px to 2px with accent
      color over 150ms
- [x] Add focus: input background shifts to slightly different shade
- [x] Add search icon animation: subtle scale(1.1) bounce when input receives
      focus
- [x] Add clear button: fades in over 150ms when text is present, fades out when
      cleared
- [x] Add keyboard shortcut hint: fades out when input is focused, fades back on
      blur
- [x] Add loading state: replace search icon with Spinner component during
      search
- [x] Add results count badge: animated badge showing "N results" that counts up
- [x] Verify focus animation and clear button transition in Claude-in-Chrome

### 2.16 ListItem Polish

- [x] Add hover: background-color transition + slight translateX(2px) rightward
      shift
- [x] Add active press: background darkens + translateX resets
- [x] Add leading icon/avatar entrance: stagger fade-in from left
- [x] Add trailing action hover: independent hover effect (scale, color shift)
- [x] Add swipe-to-action on mobile: swipe left reveals action buttons (delete,
      archive)
- [x] Add drag handle: visible on hover, shows grabbable cursor
- [x] Verify hover effect and mobile swipe in Claude-in-Chrome at 375px and
      1440px

### 2.17 CalendarHeatmap Polish

- [x] Add entrance animation: cells stagger-animate in from top-left to
      bottom-right
- [x] Add cell hover: scale(1.3) with tooltip showing date and count
- [x] Add cell click: ripple effect + callback
- [x] Add color intensity animation: cells fade from gray to colored intensity
      on data load
- [x] Add legend: color scale legend at bottom with labels
- [x] Add month labels: abbreviated month names above columns
- [x] Verify stagger animation and hover tooltip in Claude-in-Chrome

### 2.18 MiniChart Polish

- [x] Add line draw animation: stroke-dashoffset animates from full to 0 over
      800ms
- [x] Add area fill animation: opacity fades from 0 to target opacity over 600ms
      after line draws
- [x] Add hover tooltip: vertical line + dot at nearest data point with value
      label
- [x] Add gradient fill: subtle vertical gradient under the line
- [x] Add responsive: chart scales to container width
- [x] Verify draw animation and hover interaction in Claude-in-Chrome

### 2.19 Confetti Enhancement

- [x] Add emoji confetti variant: emoji characters (star, heart, sparkle)
      instead of geometric shapes
- [x] Add directional burst: confetti explodes from a specific element (e.g.,
      achievement badge)
- [x] Add sound effect option: subtle "pop" audio on trigger (opt-in, respects
      user preference)
- [x] Add duration variants: quick (1s), normal (2.5s), celebration (4s)
- [x] Verify confetti burst direction and physics in Claude-in-Chrome

### 2.20 FormField Polish

- [x] Add floating label animation: label translates from inside input to above
      on focus/fill
- [x] Add error state: red border + shake animation (400ms) + error message
      slides in from top
- [x] Add success state: green border + checkmark icon fades in
- [x] Add character counter: shows current/max characters, turns red near limit
- [x] Add helper text: subtle text below input that fades in on focus
- [x] Add required indicator: red asterisk with subtle pulse
- [x] Verify floating label animation in Claude-in-Chrome

### 2.21 Tooltip Polish

- [x] Add entrance: `scaleIn` from 0.9 with 100ms delay after hover starts
- [x] Add exit: instant hide on mouse leave (no delay)
- [x] Add arrow: CSS triangle pointing to anchor element
- [x] Add multi-line support: max-width 200px with text wrap
- [x] Add keyboard shortcut display: monospace badge inside tooltip for shortcut
      hints
- [x] Verify tooltip positioning at all 4 placements (top, right, bottom, left)
      in Claude-in-Chrome

### 2.22 Divider Polish

- [x] Add label variant: text centered on the divider line with background
      matching parent
- [x] Add gradient variant: line fades from transparent → color → transparent
- [x] Add animated variant: line draws from center outward on mount
- [x] Verify all variants in Claude-in-Chrome

### 2.23 EmptyState & ErrorState Polish

- [x] EmptyState: add floating animation to illustration icon (gentle `float`
      keyframe)
- [x] EmptyState: add entrance animation — icon scales in, then text fades in,
      then CTA slides up
- [x] EmptyState: add illustrated variant with SVG illustrations per domain
- [x] ErrorState: add shake animation on mount to draw attention
- [x] ErrorState: add retry button with loading spinner during retry
- [x] ErrorState: add error code display in expandable detail section
- [x] ErrorState: add animated error icon (X that draws in via stroke animation)
- [x] Verify both states in Claude-in-Chrome

### 2.24 HabitCheckbox Polish

- [x] Add checkmark draw animation: SVG checkmark stroke draws in over 300ms on
      check
- [x] Add background fill animation: checkbox background fills with accent color
      from center
- [x] Add celebration micro-burst: tiny confetti particles (5-8) explode from
      checkbox on first daily check
- [x] Add uncheck animation: checkmark fades out, background drains to empty
- [x] Add streak fire icon animation: flame icon does subtle flicker animation
- [x] Add streak count badge: animated count-up when streak increments
- [x] Verify check animation chain in Claude-in-Chrome

### 2.25 StreakIndicator Polish

- [x] Add flame animation: CSS gradient flame that flickers subtly (color
      shift + slight scale)
- [x] Add count pulse: number pulses once when streak value changes
- [x] Add milestone glow: special glow effect at streak milestones (7, 30,
      100, 365)
- [x] Add broken streak: flame turns gray, count shows with strikethrough
- [x] Verify flame flicker animation in Claude-in-Chrome

### 2.26 DomainPill Polish

- [x] Add hover: pill background brightens, accent dot pulses
- [x] Add entrance: pill scales in from 0.8 with spring easing
- [x] Add active state: pill background fills with domain accent color, text
      turns white
- [x] Verify all domain pills (Tara, Arete, Veritas, Nyx) in Claude-in-Chrome

### 2.27 ConfidenceBadge & VisibilityBadge Polish

- [x] ConfidenceBadge: add color interpolation animation from gray to final
      color on mount
- [x] ConfidenceBadge: add percentage text count-up animation
- [x] ConfidenceBadge: add tooltip with breakdown on hover
- [x] VisibilityBadge: add icon entrance animation (fade + scale)
- [x] VisibilityBadge: add hover tooltip explaining visibility level
- [x] Verify both badges in Claude-in-Chrome

---

## Phase 3: Shell, Navigation & Layout Visual Polish

### 3.1 Sidebar Polish

- [x] Add logo entrance animation: logo fades in + scales from 0.9 to 1.0 on app
      load
- [x] Add nav item hover: background slides in from left (not instant), icon
      shifts right 2px
- [x] Add nav item active: left border bar (3px) slides in from top with accent
      color
- [x] Add nav item click: ripple effect from click point
- [x] Add collapse animation: sidebar width transitions from 240px to 64px with
      spring easing, labels fade out before width shrinks
- [x] Add expand animation: width transitions from 64px to 240px, labels fade in
      after width expands
- [x] Add collapse button: chevron icon rotates 180deg on toggle
- [x] Add domain quick-launch icons: hover glow with domain accent color
- [x] Add domain quick-launch tooltip: domain name tooltip on hover in collapsed
      state
- [x] Add user avatar section: hover shows dropdown with slide-down animation
- [x] Add notification badge on Activity: red dot with pulse animation
- [x] Add keyboard shortcut hints: monospace badges that fade in/out on Alt key
      hold
- [x] Add scroll behavior: if nav items overflow, add subtle scroll shadow at
      top/bottom
- [x] Verify collapsed/expanded states in Claude-in-Chrome at 1440px
- [x] Verify mobile bottom nav renders correctly at 375px

### 3.2 TopBar Polish

- [x] Add breadcrumb separator animation: chevrons fade in with stagger
- [x] Add breadcrumb link hover: underline slides in from left
- [x] Add search trigger button: magnifying glass icon scales on hover
- [x] Add search trigger keyboard hint: "Cmd+K" badge with border
- [x] Add notification bell: subtle wiggle animation when new notifications
      arrive
- [x] Add notification count badge: animated count-up, red pulse on increment
- [x] Add user menu avatar: border ring on hover, dropdown with slide-down
      entrance
- [x] Add user menu items: hover background slides in, icons shift right
- [x] Add breadcrumb truncation: long breadcrumbs collapse with "..." and
      expandable menu
- [x] Verify TopBar at all breakpoints in Claude-in-Chrome

### 3.3 MobileBottomNav Polish

- [x] Add icon-only tabs with labels below: icon + text label centered
- [x] Add active tab indicator: top border bar (2px) slides to active tab with
      spring easing
- [x] Add active icon: filled variant of icon when active (e.g., HomeIcon →
      solid home)
- [x] Add tap feedback: icon scales down to 0.9 on touch, back to 1.0 on release
- [x] Add badge on Activity tab: red dot badge with count
- [x] Add safe-area-inset padding for notched devices (iPhone)
- [x] Add backdrop blur for glass effect on the nav bar background
- [x] Verify bottom nav in Claude-in-Chrome at 375px, ensure no overlap with
      content

### 3.4 AppShell Layout Polish

- [x] Add page transition animation: outgoing page fades out + slides left,
      incoming fades in + slides right
- [x] Add content area entrance: main content stagger-animates in on initial
      load
- [x] Add responsive transition: smooth width change when sidebar
      collapses/expands (content area adjusts)
- [x] Add scroll-to-top: floating button appears after scrolling 500px, smooth
      scrolls to top on click
- [x] Add scroll progress indicator: thin progress bar at very top of viewport
      showing scroll position
- [x] Verify layout transitions in Claude-in-Chrome at 1440px with sidebar
      toggle

### 3.5 CommandPalette Polish

- [x] Add entrance: backdrop fades in + palette drops in from top with spring
      bounce
- [x] Add exit: palette scales out + fades, backdrop fades out
- [x] Add search input: auto-focused with animated placeholder text
- [x] Add result items: stagger-animate in as search results appear
- [x] Add result hover: background slides in from left + icon highlight
- [x] Add keyboard navigation: selected item has animated left border indicator
- [x] Add category headers: subtle overline labels between result groups
- [x] Add recent searches section: clock icon + clickable recent queries
- [x] Add "no results" state: animated empty state illustration
- [x] Add transition between result sets: crossfade when query changes
- [x] Verify command palette in Claude-in-Chrome: open with Cmd+K, type,
      navigate, select

### 3.6 UniversalSearchPanel Polish

- [x] Add search results grouping: domain-colored section headers with icons
- [x] Add result card hover: lift effect + border accent matching result's
      domain
- [x] Add result entrance: stagger-animate in 50ms apart
- [x] Add search loading: skeleton placeholders matching result card layout
- [x] Add search empty: animated empty state with suggestions
- [x] Add filter pills: animated tag pills for domain/type filters with remove
      animation
- [x] Add search history: recent searches below input with clock icons
- [x] Add highlight matching text: bold/highlight matched query terms in results
- [x] Verify search flow in Claude-in-Chrome: type query → see results → click
      result

### 3.7 NotificationsCenterPanel Polish

- [x] Add notification entrance: new notifications slide in from right with
      green dot
- [x] Add notification read transition: green dot fades out, background slightly
      changes
- [x] Add notification hover: background lightens + action buttons slide in from
      right
- [x] Add notification dismiss: swipe left (mobile) or X button → notification
      slides out right
- [x] Add domain color coding: left border strip matching domain accent color
- [x] Add filter tabs animation: indicator bar slides between tabs
- [x] Add mark-all-read: notifications simultaneously transition to read state
      with stagger
- [x] Add empty state: bell illustration with "All caught up!" message and
      celebration
- [x] Add notification count in tab title: "(3) OSHUN" browser tab title
- [x] Verify notification interactions in Claude-in-Chrome: read, dismiss,
      filter

### 3.8 QuickActionsTrayPanel Polish

- [x] Add entrance: actions grid scales in from bottom-right FAB origin
- [x] Add action button hover: icon scale(1.1) + label text fades in
- [x] Add action button press: ripple effect + scale(0.95)
- [x] Add domain-colored action buttons: each action's icon uses domain accent
- [x] Add focus trap: Tab/Shift+Tab cycles through action buttons
- [x] Add Escape close: closes tray with scale-out animation
- [x] Verify quick actions in Claude-in-Chrome: open tray, hover actions, click
      action

### 3.9 WhatsNewDropdown Polish

- [x] Add entrance: dropdown slides down from bell icon with spring easing
- [x] Add new item badge: "NEW" pill with pulse animation
- [x] Add version separator: divider with version number label
- [x] Add item hover: background transition + right arrow slides in
- [x] Add item click: navigate to feature with dropdown close animation
- [x] Verify in Claude-in-Chrome: click "What's New", see items, click through

### 3.10 WidgetSidebar Polish

- [x] Add entrance: slides in from right edge with spring easing, 300ms
- [x] Add exit: slides out to right, 200ms
- [x] Add widget card hover: lift effect matching Card hover
- [x] Add widget reorder: drag-and-drop with smooth position transitions
- [x] Add widget collapse: content area collapses with height animation
- [x] Add widget remove: scales out + fades, remaining widgets slide up to fill
      gap
- [x] Add widget add: new widget scales in at insertion point
- [x] Verify widget sidebar in Claude-in-Chrome: open, reorder, collapse, remove

### 3.11 FocusModeToggle Polish

- [x] Add toggle animation: icon transitions from sun to moon (or focus icon to
      normal icon)
- [x] Add UI dimming transition: non-essential elements fade to 50% opacity over
      300ms
- [x] Add overlay vignette: subtle dark vignette at edges when focus mode is
      active
- [x] Add notification suppression indicator: bell icon gets strikethrough
- [x] Verify focus mode visual changes in Claude-in-Chrome

### 3.12 LanguageSwitcher Polish

- [x] Add dropdown entrance: language list fades in + slides down
- [x] Add current language flag/indicator: country flag emoji or language code
      badge
- [x] Add language hover: background transition + checkmark slides in for
      current language
- [x] Add language change transition: fade-out old text → fade-in new text
      across all visible labels
- [x] Verify language switch in Claude-in-Chrome: change language, verify all
      text updates

### 3.13 DomainTransition Polish

- [x] Add transition animation: outgoing domain surface fades + scales down,
      incoming slides in + scales up
- [x] Add color transition: accent color transitions from outgoing domain to
      incoming domain
- [x] Add domain icon morph: if possible, outgoing icon cross-fades to incoming
      icon
- [x] Add breadcrumb update animation: new breadcrumb segments slide in from
      right
- [x] Verify domain switching animation in Claude-in-Chrome: navigate between
      Tara → Arete → Veritas → Nyx

### 3.14 OfflineBanner & CookieConsentBanner Polish

- [x] OfflineBanner entrance: slides down from top edge with warning color
- [x] OfflineBanner exit: slides back up when back online
- [x] OfflineBanner pulse: subtle yellow pulse to draw attention
- [x] CookieConsentBanner entrance: slides up from bottom with glass background
- [x] CookieConsentBanner buttons: accept/decline with standard button hover
      effects
- [x] CookieConsentBanner dismiss: slides down and out on accept
- [x] Verify both banners in Claude-in-Chrome

### 3.15 PwaInstallPrompt & SmartAppBanner Polish

- [x] PWA prompt entrance: slides up from bottom center with glass background
- [x] PWA prompt icon: app icon with subtle glow
- [x] PWA prompt dismiss: slides down and fades
- [x] SmartAppBanner entrance: slides down from top
- [x] SmartAppBanner close: slides up and out
- [x] Verify PWA prompt in Claude-in-Chrome

---

## Phase 4: Page-Level Visual Polish

### 4.1 Home Page — HeroBanner Polish

- [x] Add gradient background: radial gradient from domain accent (10% opacity)
      at top-left, fading to transparent
- [x] Add greeting text entrance: words stagger-animate in left-to-right with
      30ms delay each
- [x] Add contextual summary entrance: fades in 200ms after greeting completes
- [x] Add "Continue where you left off" card: glass background with domain
      accent border, hover lift
- [x] Add "Continue" card entrance: slides in from left with spring easing
- [x] Add resume CTA button: primary button with icon, hover glow effect
- [x] Add weather/sky widget: glass card with subtle star/cloud animation in
      background
- [x] Add affirmation card: elegant serif typography, subtle gradient
      background, entrance fade-in
- [x] Add affirmation rotation: crossfade between affirmations every 10s
- [x] Verify hero section in Claude-in-Chrome at 375px, 768px, 1440px

### 4.2 Home Page — KpiGrid Polish

- [x] Add card entrance: stagger-animate in from left-to-right with 100ms delay
      between cards
- [x] Add card hover: lift (translateY -3px) + shadow elevation + subtle glow
- [x] Add card click: ripple + navigate to relevant section
- [x] Add value count-up: numbers animate from 0 on mount with easeOutCubic
- [x] Add trend arrow: animated entrance (slides in from bottom with fade)
- [x] Add trend color: green for positive, red for negative, gray for flat
- [x] Add sparkline: line draws in from left to right with 800ms animation
- [x] Add sparkline area: gradient fill fades in after line completes
- [x] Add icon background: circular background with domain accent at 10% opacity
- [x] Add icon hover: icon scales 1.1 with glow effect
- [x] Add skeleton loader: KPI-shaped skeleton with shimmer during initial load
- [x] Verify KPI grid at all breakpoints in Claude-in-Chrome

### 4.3 Home Page — DailyPlan Polish

- [x] Add plan card glass background with domain accent tint
- [x] Add plan item entrance: stagger from top with 80ms delay
- [x] Add checkbox: custom styled with checkmark draw animation on toggle
- [x] Add completed item: text gets strikethrough animation (line draws through
      text) + opacity fade
- [x] Add progress bar: animated fill showing completion percentage
- [x] Add progress text: "2 of 5 complete" with count-up animation
- [x] Add time estimate badges: subtle pill badges with clock icon
- [x] Add drag handles: grip icon visible on hover, item follows cursor during
      drag
- [x] Add reorder animation: items smoothly reposition when dragged to new
      position
- [x] Add add-item button: "+" button with scale hover, opens inline add form
- [x] Add customize toggle: gear icon that reveals edit mode with slide
      transition
- [x] Verify daily plan interactions in Claude-in-Chrome: check items, drag
      reorder

### 4.4 Home Page — ActivityFeed Polish

- [x] Add activity item entrance: stagger-animate in from right with 60ms delay
- [x] Add domain color strip: left border strip with domain accent color
- [x] Add relative timestamps: auto-update ("2m ago" → "3m ago") without full
      re-render
- [x] Add activity icon: domain-specific icon in colored circle
- [x] Add activity hover: card lifts, action button slides in from right
- [x] Add action button: "Resume", "Read", "Open" — context-specific CTA
- [x] Add "View all" link: right-aligned link with arrow icon that shifts right
      on hover
- [x] Add new item animation: new items slide in at top, pushing existing items
      down smoothly
- [x] Add empty state: animated illustration with "No recent activity" message
- [x] Verify activity feed in Claude-in-Chrome: see items, hover, click actions

### 4.5 Home Page — DomainCardGrid Polish

- [x] Add card entrance: stagger from top-left to bottom-right with 120ms delay
- [x] Add card gradient background: domain-specific gradient at low opacity
- [x] Add card hover: lift (translateY -4px) + shadow elevation + border glow
      with domain color
- [x] Add card hover preview: recent activity mini-list fades in at bottom of
      card
- [x] Add engagement progress ring: stroke animation on mount (draws circle)
- [x] Add engagement ring glow: subtle glow effect on the ring stroke
- [x] Add "last active" timestamp: relative time with clock icon
- [x] Add notification badge: animated count badge in top-right corner with
      pulse
- [x] Add quick action buttons: icon buttons in row at card bottom, hover with
      tooltip
- [x] Add domain icon: larger domain icon with subtle float animation
- [x] Add card click: scale(0.98) press then navigate
- [x] Add stats values: count-up animation on mount
- [x] Verify domain cards in Claude-in-Chrome: hover each, check ring animation,
      click actions

### 4.6 Explore Page Polish

- [x] Add trending carousel: horizontal scroll with snap points, smooth scroll
      buttons
- [x] Add carousel item hover: lift + scale + shadow elevation
- [x] Add carousel navigation: arrow buttons with hover fill, disabled state at
      ends
- [x] Add carousel dots: active dot larger and accent-colored with smooth
      transition
- [x] Add recommendation section: glass card backgrounds with domain accent
      tints
- [x] Add "New in each domain" section: domain-colored section headers with
      stagger items
- [x] Add community picks: larger feature cards with image/gradient placeholders
- [x] Add collection cards: gradient backgrounds matching collection theme
- [x] Add collection hover: card lifts, item count badge bounces
- [x] Add editorial spotlight: larger card with typography-focused design, serif
      heading
- [x] Add "Discover" mode: button with dice icon, random content loads with
      shuffle animation
- [x] Add recently viewed: horizontal scroll list with time indicators
- [x] Add search integration: inline search bar with results appearing below
- [x] Add filter animation: filter pills animate in/out when toggled
- [x] Add empty state for each section: domain-appropriate illustration
- [x] Verify explore page in Claude-in-Chrome: scroll carousel, click items, use
      filters

### 4.7 Activity Page Polish

- [x] Add timeline layout: vertical timeline line with domain-colored dots at
      each event
- [x] Add timeline item entrance: items fade in + slide from left/right
      alternating
- [x] Add domain filter tabs: animated indicator bar slides between tabs
- [x] Add kind filter: pill buttons with animated toggle state
- [x] Add bulk actions: "Mark all read" button with loading spinner during
      operation
- [x] Add swipe-to-dismiss: mobile swipe right reveals dismiss action
- [x] Add achievement cards: golden/bronze/silver border based on tier
- [x] Add achievement unlock animation: card shakes then reveals badge with
      confetti burst
- [x] Add milestone celebration: full-screen confetti + overlay when milestone
      achieved
- [x] Add weekly digest card: glass background with summary stats, expandable
- [x] Add streak calendar: CalendarHeatmap integration with activity data
- [x] Add streak calendar entrance: cells stagger-animate in
- [x] Verify activity page in Claude-in-Chrome: filter by domain, filter by
      kind, mark as read

### 4.8 Profile Page Polish

- [x] Add profile header: large avatar with edit overlay (camera icon on hover)
- [x] Add profile header gradient: domain-colored gradient behind avatar
- [x] Add display name: inline edit with pencil icon, save with checkmark
      animation
- [x] Add settings sections: accordion-style collapsible sections with smooth
      height animation
- [x] Add section entrance: sections stagger-animate in on page load
- [x] Add toggle switches: custom styled with smooth slide animation and color
      transition
- [x] Add notification toggles per domain: domain-colored toggle backgrounds
- [x] Add subscription card: premium badge with gradient border and glow
- [x] Add connected services: service icons with connected/disconnected status
      indicators
- [x] Add data export: button with progress bar during export
- [x] Add account deletion: red zone section with warning colors, confirmation
      modal
- [x] Add theme toggle: dark/light/system segmented control with instant preview
- [x] Add accessibility section: reduced motion toggle, font size slider,
      contrast toggle
- [x] Add timezone picker: searchable dropdown with current time preview
- [x] Add save confirmation: success toast on each preference change
- [x] Verify profile page in Claude-in-Chrome: edit name, toggle settings, check
      responsiveness

### 4.9 Search Results Page Polish

- [x] Add results grouped by domain: domain headers with accent colors and icons
- [x] Add result item hover: lift + left border accent
- [x] Add result item click: ripple + navigate
- [x] Add relevance score: subtle percentage or star rating
- [x] Add filter sidebar: collapsible filter panel with animated toggles
- [x] Add search highlight: matched query terms in bold/accent color
- [x] Add result count: "Found N results" with count-up animation
- [x] Add no results: animated empty state with search suggestions
- [x] Add loading skeletons: result-shaped skeletons with shimmer
- [x] Verify search results in Claude-in-Chrome: search query, see grouped
      results, use filters

### 4.10 Onboarding Flow Polish

- [x] Add step indicator: horizontal progress dots with connecting lines
- [x] Add step transitions: pages slide left/right with crossfade
- [x] Add domain selection cards: gradient backgrounds, hover lift, selection
      checkmark animation
- [x] Add interest tags: tag pills that bounce in on render, selection animation
- [x] Add notification preference toggles: smooth toggle animations with
      descriptions
- [x] Add completion celebration: confetti burst + welcome message on wizard
      complete
- [x] Add skip option: subtle "Skip for now" link with no-pressure styling
- [x] Verify onboarding flow start to finish in Claude-in-Chrome

### 4.11 Welcome Page Polish

- [x] Add hero: large typography with gradient text effect on key words
- [x] Add domain preview cards: glass cards with domain gradients, hover
      animations
- [x] Add CTA button: large primary button with gradient background, hover glow
- [x] Add feature highlights: icon + text cards with stagger entrance
- [x] Add scroll animations: sections fade in as they scroll into viewport
- [x] Add subtle particle background: very faint floating particles/stars
- [x] Verify welcome page in Claude-in-Chrome at 375px and 1440px

### 4.12 Legal Pages Polish

- [x] Add consistent typography: serif headings, readable body text with proper
      line-height
- [x] Add table of contents: sticky sidebar with section links that highlight on
      scroll
- [x] Add section scroll-spy: current section highlights in TOC as user scrolls
- [x] Add back-to-top button: appears after scrolling past first section
- [x] Add print-friendly styles: `@media print` rules for clean printing
- [x] Verify legal page readability in Claude-in-Chrome

### 4.13 Error, NotFound, and Loading Pages Polish

- [x] Error page: animated error icon (wobble + color flash), clear retry CTA,
      error details toggle
- [x] Error page: add "Report issue" button with pre-filled error context
- [x] 404 page: animated ghost/broken link illustration, search bar, navigation
      links
- [x] 404 page: fun micro-copy ("Looks like you've ventured into uncharted
      territory")
- [x] Loading page: skeleton layout matching shell structure, shimmer animation
- [x] Loading page: progress bar at top if loading takes >2s
- [x] Verify all 3 pages in Claude-in-Chrome

---

## Phase 5: Domain Surface Visual Polish

### 5.1 Tara — SessionPlayer Polish

- [x] Add timer ring: smooth stroke-dashoffset animation tracking elapsed time
- [x] Add timer ring glow: subtle Tara-cyan glow on the active stroke
- [x] Add phase indicator: current phase label crossfades when transitioning
      (inhale → hold → exhale)
- [x] Add phase timeline: horizontal bar showing upcoming phases, current phase
      highlighted
- [x] Add phase transition: smooth color gradient shift between phases
- [x] Add play/pause button: icon morphs from play to pause with transition
- [x] Add skip buttons: forward/back icons with press feedback (scale 0.9)
- [x] Add volume slider: custom styled with Tara accent color fill
- [x] Add volume icon: morphs between volume levels (mute → low → high)
- [x] Add audio quality selector: segmented control with smooth highlight
      transition
- [x] Add playback speed selector: pill selector with current speed highlighted
- [x] Add completion screen: timer ring fills to 100%, checkmark draws in
      center, stats fade in below
- [x] Add completion confetti: Tara-colored confetti burst on session complete
- [x] Add post-session reflection: text area slides in from bottom with floating
      label
- [x] Add share button: share sheet slides in with copy link, social icons
- [x] Add favorite heart: fill animation on toggle (outline → filled with pulse)
- [x] Add background ambient: audio wave visualization behind timer ring (subtle
      bars)
- [x] Add ambient selection: dropdown with sound previews (play icon on hover)
- [x] Verify full session lifecycle in Claude-in-Chrome: start → play → phase
      transitions → complete

### 5.2 Tara — BreathworkTimer Polish

- [x] Add breathing circle: smooth expand/contract animation using CSS scale
      (not transform)
- [x] Add breathing circle glow: soft Tara-cyan glow that intensifies on inhale,
      fades on exhale
- [x] Add phase text: "Inhale", "Hold", "Exhale" crossfade with spring animation
- [x] Add phase counter: "Round 2 of 5" with count-up animation
- [x] Add pattern selector cards: gradient Tara backgrounds, hover lift, active
      checkmark
- [x] Add pattern preview: mini breathing circle that shows pattern rhythm
- [x] Add ambient sound selector: icon buttons with sound name tooltip, active
      ring indicator
- [x] Add cycle count selector: stepper control with smooth increment/decrement
- [x] Add haptic toggle: phone icon with vibration lines animation when enabled
- [x] Add session summary card: glass background with stats (rounds, duration),
      celebration confetti
- [x] Add streak integration badge: flame icon with "Day N" text, pulse on new
      streak day
- [x] Verify breathing patterns in Claude-in-Chrome: select Box Breathing,
      start, watch animation

### 5.3 Tara — SessionLibrary Polish

- [x] Add grid/list toggle: icon toggles with smooth layout transition (grid ↔
      list)
- [x] Add session cards in grid: hover lift + Tara accent border
- [x] Add session cards in list: hover background + left accent border
- [x] Add filter sidebar: collapsible with smooth height animation
- [x] Add filter chips: animated tag pills showing active filters, remove with
      scale-out
- [x] Add category icons: unique icons for each category (Wind for breathwork,
      Moon for sleep, Compass for focus, Sparkles for loving-kindness, etc.)
- [x] Add level badges: colored difficulty badges (green beginner, blue
      intermediate, purple advanced)
- [x] Add duration badges: clock icon + time with rounded pill styling
- [x] Add instructor avatar: small avatar with name, hover shows bio tooltip
- [x] Add "Start" button: Tara-accent primary button with play icon
- [x] Add favorite heart: toggle with fill/outline animation
- [x] Add session detail overlay: slides in from right, gradient hero,
      scrollable content with related sessions
- [x] Add sort selector: dropdown with checkmark on active sort
- [x] Add search: real-time filtering with debounced loading spinner and "N
      sessions for 'query'" count
- [x] Add empty state: Tara-branded SVG illustration with "No sessions match"
      message
- [x] Add staggered card animations: cards animate in with delay offset
- [x] Verify session library in Claude-in-Chrome: filter, search, sort,
      grid/list toggle, click session, detail overlay

### 5.4 Tara — Courses Polish

- [x] Add course card: large gradient hero area, progress bar at bottom, hover
      lift
- [x] Add course detail page: hero with course image/gradient, lesson list below
- [x] Add lesson list items: numbered with status icons (check, play, lock)
- [x] Add lesson progress tracking: completed items have green checkmark that
      draws in
- [x] Add current lesson indicator: pulsing play icon, highlighted background
- [x] Add locked lesson indicator: lock icon, dimmed opacity, "Complete
      previous" tooltip
- [x] Add course progress ring: animated stroke showing completion percentage
- [x] Add "Continue course" CTA: button that shows current lesson number
- [x] Add course completion: celebration screen with certificate badge,
      confetti, stats
- [x] Add course browse: category/level filter pills with animated toggle
- [x] Verify course flow in Claude-in-Chrome: browse → select → see lessons →
      track progress

### 5.5 Tara — Favorites & Stats Polish

- [x] Favorites: stagger-animate in session cards
- [x] Favorites: remove animation — card scales out, remaining cards slide to
      fill gap
- [x] Favorites: sort selector with animated dropdown
- [x] Favorites: empty state with heart illustration and "Save sessions you
      love" CTA
- [x] Stats: calendar heatmap entrance with stagger cells
- [x] Stats: line chart draw animation for meditation time trend
- [x] Stats: bar chart grow animation for session frequency
- [x] Stats: streak section with flame animation and milestone markers
- [x] Stats: insights cards with icon + stat, stagger entrance
- [x] Stats: period toggle (week/month/all) with crossfade data transition
- [x] Stats: session history list with date, duration, type columns, hover
      highlight
- [x] Verify stats page in Claude-in-Chrome: toggle periods, see charts, view
      history

### 5.6 Arete — Habits Polish

- [x] Add habit card: glass background with category color tint on left border
- [x] Add habit card hover: lift + glow in category color
- [x] Add habit checkbox: custom with checkmark draw animation + mini confetti
      burst
- [x] Add habit streak display: flame icon with flicker, count badge
- [x] Add habit creation form: multi-step with animated transitions between
      steps
- [x] Add cue-routine-reward builder: 3 connected cards with arrow connections
- [x] Add habit stacking UI: vertical stack with connecting lines, drag to
      reorder
- [x] Add celebration animation: habit check triggers confetti + streak
      increment animation
- [x] Add streak forgiveness indicator: "Grace days: 2 remaining" with shield
      icon
- [x] Add identity statement: "I am a person who..." with elegant serif
      typography
- [x] Add keystone badge: star badge on keystone habits with glow
- [x] Add analytics dashboard: charts with draw animations, percentage rings
- [x] Add completion rate bar: animated fill with color gradient (red → yellow →
      green)
- [x] Add time-of-day heatmap: horizontal heatmap showing completion by hour
- [x] Add habit calendar: CalendarHeatmap with habit-specific data
- [x] Add habit detail page: full history, streaks, analytics, edit/archive
      actions
- [x] Add habit archive: item slides out, "Archived" toast appears
- [x] Add habit reminder config: time picker with notification preview
- [x] Verify habit lifecycle in Claude-in-Chrome: create → check → see streak →
      view analytics

### 5.7 Arete — Goals Polish

- [x] Add goal card: glass background with category color accent
- [x] Add goal progress bar: animated fill with milestone markers
- [x] Add milestone checkpoints: dot markers on progress bar that fill when
      reached
- [x] Add milestone celebration: confetti burst when milestone completed
- [x] Add goal creation form: multi-step wizard with SMART validation indicators
- [x] Add SMART indicators: 5 badges (S, M, A, R, T) that fill green as criteria
      are met
- [x] Add goal-habit alignment: visual connection lines from goals to linked
      habits
- [x] Add timeline view: horizontal timeline with milestones positioned by date
- [x] Add progress chart: line graph with animated draw, target line overlay
- [x] Add goal categories: colored category pills with icons
- [x] Add priority ranking: drag-to-reorder with smooth position transitions
- [x] Add goal sharing: share card with partner avatar, progress comparison
- [x] Add goal archive: slide-out animation with confirmation modal
- [x] Verify goal lifecycle in Claude-in-Chrome: create → set milestones → track
      progress

### 5.8 Arete — Journal Polish

- [x] Add journal editor: rich text toolbar with icon buttons, hover tooltips
- [x] Add toolbar entrance: slides in from top when editor focused
- [x] Add mood selector: emoji buttons in horizontal row, selected emoji
      pulses + enlarges
- [x] Add mood animation: selected mood emoji bounces and background tints with
      mood color
- [x] Add reflection prompts: rotating prompts with crossfade transition,
      refresh button
- [x] Add entry card: date header, mood emoji, preview text, word count badge
- [x] Add entry card hover: lift + left border accent based on mood color
- [x] Add calendar view: month calendar with dots on days with entries
- [x] Add calendar day click: entries for that day slide in from right
- [x] Add search: full-text search with highlighted matching excerpts
- [x] Add journal analytics: mood trend chart (line graph), writing frequency
      (bar chart), topic cloud
- [x] Add chart draw animations: mood line draws, bars grow up
- [x] Add export: button with format selection (PDF, Text), loading spinner
      during export
- [x] Add privacy lock: lock icon toggle with lock/unlock animation
- [x] Add gratitude mode: 3 text fields with "I'm grateful for..." label
- [x] Add template selector: template cards with descriptions, preview on hover
- [x] Add auto-save indicator: "Saved" text that fades in after typing stops,
      "Saving..." during save
- [x] Verify journal entry creation in Claude-in-Chrome: write → add mood → save
      → view in list

### 5.9 Arete — AI Coach Polish

- [x] Add chat interface: message bubbles with smooth entrance from bottom
- [x] Add user message: right-aligned bubble with send animation (slides up +
      fades in)
- [x] Add coach message: left-aligned bubble with typing indicator → text reveal
- [x] Add typing indicator: 3 animated dots with stagger bounce
- [x] Add coach avatar: circular with AI/brain icon, subtle glow
- [x] Add insight cards: glass cards with data visualizations inside chat flow
- [x] Add pattern visualization: inline chart showing habit/mood/energy patterns
- [x] Add notification integration: "Coach suggests:" cards in notification
      center
- [x] Add journal analytics: inline NLP summary cards with sentiment meter
- [x] Add conversation history: list of past conversations with date/topic
- [x] Add conversation start: "New conversation" with animated greeting
- [x] Verify coach interaction in Claude-in-Chrome: ask question → see response
      → view insight

### 5.10 Arete — Gamification Polish

- [x] Add achievement cards: golden border, badge icon with glow, unlock
      animation
- [x] Add achievement unlock: card shakes → flips → reveals badge → confetti
      burst
- [x] Add points display: large number with count-up animation on change
- [x] Add level progress bar: gradient fill with level badges at milestones
- [x] Add level-up celebration: full overlay with new level badge, confetti,
      fanfare
- [x] Add leaderboard: numbered list with current user highlighted, position
      change indicators
- [x] Add leaderboard entrance: rows stagger in from left with rank numbers
      counting up
- [x] Add challenge cards: timer countdown badges, progress bars, participant
      count
- [x] Add challenge join: confirmation modal with commitment pledge
- [x] Add challenge leaderboard: mini leaderboard within challenge detail
- [x] Add reward redemption: reward cards with redeem button, unlock animation
- [x] Verify achievement unlock in Claude-in-Chrome: trigger achievement → see
      celebration

### 5.11 Arete — Remaining Modules Polish (Time, Balance, Affirmations, Vision, SevenHabits)

- [x] AreteTime: Pomodoro timer with circular progress ring, work/break phase
      colors, session count
- [x] AreteTime: time blocking calendar with drag-to-create blocks, color coding
      by category
- [x] AreteTime: focus mode overlay with dimming + timer display
- [x] AreteBalance: radar chart with animated draw, 5 dimensions (work, health,
      relationships, growth, recreation)
- [x] AreteBalance: assessment questionnaire with progress bar, animated step
      transitions
- [x] AreteBalance: recommendation cards with action buttons, stagger entrance
- [x] AreteAffirmations: full-screen card with serif typography, domain gradient
      background
- [x] AreteAffirmations: card flip animation to reveal new affirmation
- [x] AreteAffirmations: affirmation carousel with swipe/arrow navigation
- [x] AreteVision: vision statement wizard with animated step transitions
- [x] AreteVision: vision board with draggable image/text cards, grid layout
- [x] AreteVision: timeline view with year markers, milestone dots
- [x] AreteSevenHabits: 7 habit cards with Covey quadrant colors, progress rings
- [x] AreteSevenHabits: Eisenhower matrix with drag-drop between quadrants
- [x] AreteSevenHabits: Big Rocks weekly planner with draggable blocks
- [x] AreteSevenHabits: Circle of Influence concentric circle visualization
- [x] Verify each module in Claude-in-Chrome

### 5.12 Veritas — Article Reader Polish

- [x] Add article typography: serif font for body, proper line-height (1.7),
      max-width 680px
- [x] Add reading progress bar: thin accent-colored bar at top that fills as
      user scrolls
- [x] Add estimated reading time badge: clock icon + "N min read" in article
      header
- [x] Add highlight system: select text → tooltip appears with highlight color
      picker
- [x] Add highlight colors: 4 options (yellow, green, blue, pink) with subtle
      backgrounds
- [x] Add annotation system: highlighted text can have attached note, icon
      indicator in margin
- [x] Add share sheet: glass card with social icons, copy link button with
      success animation
- [x] Add text-to-speech: play button with progress indicator, pause/resume
- [x] Add text size control: A-/A+ buttons in reader toolbar, smooth font-size
      transition
- [x] Add article versioning: timeline dots showing edit history, hover shows
      change summary
- [x] Add related articles: horizontal scroll section at article end with card
      hover effects
- [x] Add source badge: credibility score badge with confidence meter
- [x] Add save button: bookmark icon with fill animation on save
- [x] Verify article reading experience in Claude-in-Chrome: read, highlight,
      annotate, share

### 5.13 Veritas — Claim Checker & Bias Detector Polish

- [x] Claim checker: evidence chain timeline with verdict badges
      (verified/debunked/inconclusive)
- [x] Claim checker: confidence breakdown chart with animated fills
- [x] Claim checker: "See both sides" toggle with split-view animation
- [x] Claim checker: user submission form with validation, step-by-step wizard
- [x] Claim checker: status tracker with animated step indicators
- [x] Bias detector: inline bias highlights in article text with colored
      underlines
- [x] Bias detector: bias score meter with animated needle/fill
- [x] Bias detector: neutral phrasing comparison (side-by-side diff view)
- [x] Bias detector: coverage bias bar chart with animated grows
- [x] Bias detector: source comparison cards with hover to see same-story
      coverage
- [x] Verify claim and bias features in Claude-in-Chrome

### 5.14 Veritas — Knowledge Graph & Story Clusters Polish

- [x] Knowledge graph: force-directed graph with smooth physics animation
- [x] Knowledge graph: node hover enlarges node + shows connection count
- [x] Knowledge graph: node click centers and zooms to node with info panel
- [x] Knowledge graph: edge hover shows relationship label
- [x] Knowledge graph: color coding by entity type (person, org, topic)
- [x] Knowledge graph: zoom controls with smooth zoom transition
- [x] Story clusters: cluster cards with multiple source thumbnails
- [x] Story clusters: timeline view with animated event dots
- [x] Story clusters: source comparison accordion within cluster
- [x] Story clusters: key developments summary with bullet entrance animation
- [x] Verify graph interaction in Claude-in-Chrome: pan, zoom, click nodes

### 5.15 Veritas — Remaining Modules Polish (Sources, Queue, Topics, Newsletter, Agents, RAG)

- [x] Source directory: source cards with credibility score meters, hover detail
      panel
- [x] Source directory: author profile cards with verification badges
- [x] Source directory: comparison tool with side-by-side metrics
- [x] Reading queue: sortable list with drag-to-reorder, swipe-to-dismiss
- [x] Reading queue: category folders with expand/collapse animation
- [x] Reading queue: total reading time badge with count-up
- [x] Reading queue: offline download indicator (checkmark when cached)
- [x] Topics: hierarchical category tree with expand/collapse animations
- [x] Topics: topic detail page with latest articles feed, trending indicator
- [x] Topics: follow/unfollow button with animated toggle
- [x] Newsletter: subscription config with frequency/format selectors
- [x] Newsletter: preview card with newsletter content snapshot
- [x] Agents: pipeline status cards with animated progress bars and status
      indicators
- [x] RAG: chat-style Q&A interface with source citations inline
- [x] RAG: evidence compilation with numbered source cards
- [x] Verify each module in Claude-in-Chrome

### 5.16 Nyx — Interactive Sky Map Polish

- [x] Add sky map canvas: smooth pan with momentum scrolling
- [x] Add sky map zoom: pinch-to-zoom on mobile, scroll wheel on desktop, smooth
      transition
- [x] Add star rendering: stars rendered with size based on magnitude,
      brightness-based glow
- [x] Add constellation lines: toggleable line overlays with fade-in/out
      transition
- [x] Add constellation labels: labels fade in when constellation toggle enabled
- [x] Add planet labels: planet names with icons, visible at default zoom
- [x] Add deep sky markers: nebulae/galaxy icons at correct positions
- [x] Add satellite track: animated dashed line showing ISS path, real-time dot
      position
- [x] Add compass overlay: N/S/E/W markers that rotate with map orientation
- [x] Add time slider: draggable slider changes sky view, smooth star position
      interpolation
- [x] Add object click popup: glass card with object details, animations: slide
      in from bottom
- [x] Add object click popup: name, type, magnitude, coordinates, "Best viewed"
      tip
- [x] Add controls overlay: zoom +/- buttons, constellation toggle, grid toggle
      with glass background
- [x] Add grid overlay: RA/Dec grid lines with fade-in/out transition
- [x] Verify sky map interaction in Claude-in-Chrome: pan, zoom, click star,
      toggle constellations

### 5.17 Nyx — Solar Activity & NEO Polish

- [x] Solar dashboard: real-time solar wind gauges with animated needle
- [x] Solar dashboard: aurora probability map with color gradient overlay
- [x] Solar dashboard: CME alert cards with severity colors and timeline
- [x] Solar dashboard: sunspot count tracker with historical chart
- [x] Solar dashboard: notification config with alert threshold slider
- [x] NEO dashboard: upcoming close approaches table with distance visualization
- [x] NEO dashboard: Torino scale risk meter with animated fill
- [x] NEO dashboard: orbit visualization with animated trajectory paths
- [x] NEO dashboard: NEO detail card with size comparison illustration
- [x] NEO dashboard: alert config with distance/size threshold sliders
- [x] Verify solar and NEO dashboards in Claude-in-Chrome

### 5.18 Nyx — Remaining Modules Polish (TimeTravelOverlay, Education, Catalogs, ObservationLog, Sonification, SkyConditions)

- [x] Time travel: date picker with calendar UI, animated sky transition to
      selected date
- [x] Time travel: historical event presets with description cards
- [x] Time travel: eclipse visualization with animated shadow overlay
- [x] Education: module cards with difficulty badges, progress indicators
- [x] Education: interactive tutorial with step-by-step overlay highlights
- [x] Education: quiz interface with answer feedback animations (green check,
      red X)
- [x] Education: glossary with alphabetical navigation, search filter
- [x] Catalog: filterable grid of celestial objects with type icons
- [x] Catalog: object detail card with image, description, location coordinates
- [x] Catalog: observation checklist with checkbox draw animation
- [x] Catalog: "What can I see tonight?" filter based on equipment/conditions
- [x] Observation log: entry form with fields for target, conditions, equipment,
      rating (star selector)
- [x] Observation log: photo upload with drag-drop zone, image preview
- [x] Observation log: session planner with timeline of planned observations
- [x] Observation log: statistics cards with count-up animations
- [x] Observation log: calendar view with observation day markers
- [x] Sonification: audio player with waveform visualization
- [x] Sonification: mode selector (star brightness, pulsar, solar wind) with
      icon buttons
- [x] Sky conditions: weather forecast cards with cloud/sun icons
- [x] Sky conditions: light pollution map with color gradient overlay
- [x] Sky conditions: moon phase calendar with visual lunar phase diagrams
- [x] Sky conditions: "Best viewing tonight" recommendation card with rating
- [x] Verify each Nyx module in Claude-in-Chrome

---

## Phase 6: Cross-Domain, Routines, Achievements & Assistant Polish

### 6.1 Cross-Domain Hub Polish

- [x] Add rituals cards: multi-domain gradient backgrounds showing connected
      domains
- [x] Add ritual execution: step-by-step guided flow with domain-colored steps
- [x] Add ritual step transition: crossfade between domain surfaces
- [x] Add cross-domain correlation cards: chart showing relationship between
      activities
- [x] Add recommendation cards: suggested cross-domain activities with domain
      icons
- [x] Add unified streak display: all domain streaks in a row with flame
      animations
- [x] Add streak comparison: bar chart comparing domain engagement
- [x] Verify cross-domain features in Claude-in-Chrome

### 6.2 Routines Polish

- [x] Routine template browser: template cards with domain color coding, hover
      lift
- [x] Routine creator: drag-drop step builder with smooth reorder animations
- [x] Routine creator: step cards with domain accent borders, remove animation
- [x] Routine creator: schedule selector with day-of-week buttons, animated
      toggle
- [x] Routine detail: step list with status indicators (upcoming, current,
      completed)
- [x] Routine execution UI: current step enlarged with domain accent, timer if
      timed
- [x] Routine execution: step completion animation (checkmark draw + confetti)
- [x] Routine execution: progress bar advancing smoothly between steps
- [x] Routine execution: pause/resume with pulsing indicator
- [x] Routine completion: summary card with stats, celebration confetti
- [x] Active status bar: persistent banner with routine progress, animated step
      counter
- [x] Routine history: timeline of past executions with completion rates
- [x] Routine summary dashboard: charts with animated draws
- [x] DailyPlanV2: integrated routine display with real data, animated
      transitions
- [x] Verify routine execution flow in Claude-in-Chrome: select → start → step
      through → complete

### 6.3 Achievements & Social Polish

- [x] Achievement gallery: grid of badge cards, locked badges dimmed with lock
      icon
- [x] Achievement unlock: card flip animation → badge reveal → confetti burst
- [x] Achievement categories: tabbed sections with domain-colored headers
- [x] Achievement tier badges: bronze/silver/gold/platinum with metallic
      gradient borders
- [x] Achievement progress: progress bar within locked achievement showing how
      close
- [x] Social partnership invite: search + send flow with animated invite card
- [x] Social partnership dashboard: side-by-side progress comparison
- [x] Social check-in form: mood/highlight fields with animated submission
- [x] Social messaging: chat bubbles with send/receive animations
- [x] Challenge browse: cards with timer countdown, participant avatars
- [x] Challenge leaderboard: animated rank display with position changes
- [x] Challenge completion: celebration overlay with badge award
- [x] Verify achievement unlock and social features in Claude-in-Chrome

### 6.4 Assistant Panel Polish

- [x] Add panel entrance: slides in from right edge with spring easing, glass
      background
- [x] Add FAB button: floating action button in bottom-right with pulse on first
      visit
- [x] Add FAB hover: scale(1.1) with glow effect
- [x] Add chat messages: smooth entrance from bottom, stagger for multi-part
      responses
- [x] Add typing indicator: 3 bouncing dots with Arete accent color
- [x] Add voice input: microphone button with recording pulse animation,
      waveform display
- [x] Add voice input recording: pulsing red dot + amplitude visualization
- [x] Add TTS playback: speaker icon with animated sound waves during playback
- [x] Add domain context badge: shows current domain with accent color in
      assistant header
- [x] Add tool actions: inline action cards (e.g., "Starting Tara session...")
      with loading state
- [x] Add session history: conversation list with date/topic, click to resume
- [x] Add suggestion chips: contextual suggestions below input with animated
      entrance
- [x] Verify assistant interaction in Claude-in-Chrome: open → type → see
      response → use voice

### 6.5 Wearable & Complication Widgets Polish

- [x] Glance summary: compact card with key stats, animated entrance
- [x] Complication mini-widgets: tiny stat cards with domain colors, hover to
      expand
- [x] Streak comparison: multi-domain streak bars with animated fills
- [x] Smart reminder cards: notification-style cards with action buttons
- [x] Daily/weekly summary: digest card with expandable sections
- [x] Verify widgets in Claude-in-Chrome at 375px (mobile-first design)

---

## Phase 7: Comprehensive Unit Tests — Design System Components

Every design system component gets thorough unit tests covering rendering,
interaction, accessibility, and edge cases.

### 7.1 Button Tests (expand existing)

- [x] Test: renders with each variant (primary, secondary, ghost, destructive,
      domain)
- [x] Test: renders at each size (sm, md, lg)
- [x] Test: shows loading spinner when loading=true
- [x] Test: disables click handler when loading=true
- [x] Test: disables click handler when disabled=true
- [x] Test: renders leading icon correctly positioned
- [x] Test: renders trailing icon correctly positioned
- [x] Test: applies fullWidth class when fullWidth=true
- [x] Test: fires onClick when clicked (not disabled, not loading)
- [x] Test: applies correct aria-disabled when disabled
- [x] Test: applies aria-busy when loading
- [x] Test: keyboard activation with Enter key
- [x] Test: keyboard activation with Space key
- [x] Test: has focus-visible styling (focus ring present)
- [x] Test: renders as anchor tag when href prop provided
- [x] Test: applies domain accent color for domain variant

### 7.2 IconButton Tests (new)

- [x] Test: renders icon correctly
- [x] Test: renders at each size (sm, md, lg)
- [x] Test: fires onClick when clicked
- [x] Test: does not fire onClick when disabled
- [x] Test: has aria-label attribute
- [x] Test: shows tooltip on hover (after delay)
- [x] Test: hides tooltip on mouse leave
- [x] Test: keyboard activation with Enter and Space
- [x] Test: has focus-visible ring

### 7.3 Card Tests (new)

- [x] Test: renders children content
- [x] Test: applies elevated variant styles
- [x] Test: applies outlined variant styles
- [x] Test: applies filled variant styles
- [x] Test: renders header slot content
- [x] Test: renders footer slot content
- [x] Test: applies domain accent border when domainAccent prop provided
- [x] Test: applies hover styles when interactive=true
- [x] Test: renders as clickable when onClick provided
- [x] Test: has correct ARIA role when interactive

### 7.4 Badge Tests (new)

- [x] Test: renders label text
- [x] Test: renders each variant (default, success, warning, error, info,
      domain)
- [x] Test: renders at sm and md sizes
- [x] Test: renders icon when provided
- [x] Test: applies correct colors for each variant
- [x] Test: renders dot variant (no text)

### 7.5 Tag Tests (new)

- [x] Test: renders label text
- [x] Test: renders icon when provided
- [x] Test: renders remove button when onRemove provided
- [x] Test: fires onRemove when remove button clicked
- [x] Test: does not render remove button when onRemove not provided
- [x] Test: applies default/outline/filled variant styles
- [x] Test: remove button has aria-label "Remove [tag-name]"

### 7.6 ProgressBar Tests (new)

- [x] Test: renders with correct width percentage
- [x] Test: renders label text
- [x] Test: renders percentage text
- [x] Test: clamps value between 0 and 100
- [x] Test: renders indeterminate animation when value not provided
- [x] Test: applies domain color when specified
- [x] Test: has role="progressbar" with aria-valuenow, aria-valuemin,
      aria-valuemax
- [x] Test: renders milestone markers when provided

### 7.7 ProgressRing Tests (new)

- [x] Test: renders SVG circle with correct stroke-dashoffset for value
- [x] Test: renders center label
- [x] Test: clamps value between 0 and 100
- [x] Test: applies domain color to stroke
- [x] Test: has role="progressbar" with ARIA attributes
- [x] Test: renders at each size (sm, md, lg)

### 7.8 StatTile Tests (new)

- [x] Test: renders value and label
- [x] Test: renders trend indicator (up/down/flat)
- [x] Test: renders icon when provided
- [x] Test: renders sparkline when data provided
- [x] Test: applies interactive styles when onClick provided
- [x] Test: fires onClick when clicked

### 7.9 Avatar Tests (new)

- [x] Test: renders image when src provided
- [x] Test: renders initials when no src
- [x] Test: generates correct initials from name (first + last)
- [x] Test: renders at each size (xs, sm, md, lg, xl)
- [x] Test: shows online indicator when online=true
- [x] Test: has alt text for image
- [x] Test: falls back to initials when image fails to load

### 7.10 Skeleton Tests (expand existing)

- [x] Test: renders text preset with correct height/width
- [x] Test: renders avatar preset as circle
- [x] Test: renders card preset with correct dimensions
- [x] Test: renders list preset with multiple rows
- [x] Test: applies shimmer animation class
- [x] Test: has aria-hidden="true"
- [x] Test: respects prefers-reduced-motion

### 7.11 EmptyState Tests (new)

- [x] Test: renders heading text
- [x] Test: renders description text
- [x] Test: renders illustration/icon
- [x] Test: renders CTA button when provided
- [x] Test: fires CTA onClick when clicked
- [x] Test: has correct heading level (h2 or h3)

### 7.12 ErrorState Tests (new)

- [x] Test: renders error message
- [x] Test: renders retry button
- [x] Test: fires onRetry when retry button clicked
- [x] Test: renders expandable detail section
- [x] Test: toggles detail section visibility on click
- [x] Test: has error icon with correct alt text
- [x] Test: has aria-live="polite" for dynamic content

### 7.13 Toast Tests (expand existing)

- [x] Test: renders each variant (success, error, warning, info)
- [x] Test: auto-dismisses after specified duration
- [x] Test: does not auto-dismiss when duration=0
- [x] Test: fires onDismiss callback when dismissed
- [x] Test: renders action button when provided
- [x] Test: fires action callback when action clicked
- [x] Test: stacks multiple toasts with correct order
- [x] Test: pauses auto-dismiss on hover
- [x] Test: resumes auto-dismiss on mouse leave
- [x] Test: has role="alert" and aria-live="assertive"

### 7.14 Tabs Tests (expand existing)

- [x] Test: renders all tab labels
- [x] Test: activates tab on click
- [x] Test: fires onChange with correct tab value
- [x] Test: Arrow Left/Right navigates between tabs
- [x] Test: Home key jumps to first tab
- [x] Test: End key jumps to last tab
- [x] Test: does not activate disabled tab
- [x] Test: has role="tablist" on container
- [x] Test: has role="tab" on each tab
- [x] Test: has aria-selected on active tab
- [x] Test: associated tab panels have role="tabpanel"
- [x] Test: tab panel has aria-labelledby referencing tab

### 7.15 SegmentedControl Tests (new)

- [x] Test: renders all segment options
- [x] Test: selects option on click
- [x] Test: fires onChange with selected value
- [x] Test: shows highlight on selected segment
- [x] Test: keyboard navigation with Arrow keys
- [x] Test: has role="radiogroup" on container
- [x] Test: segments have role="radio" with aria-checked

### 7.16 Dropdown Tests (expand existing)

- [x] Test: opens on trigger click
- [x] Test: closes on trigger click when open
- [x] Test: closes on Escape key
- [x] Test: closes on click outside
- [x] Test: selects item on click
- [x] Test: fires onSelect with correct item
- [x] Test: Arrow Down navigates to next item
- [x] Test: Arrow Up navigates to previous item
- [x] Test: Enter selects focused item
- [x] Test: renders separator between groups
- [x] Test: does not select disabled items
- [x] Test: has role="menu" on dropdown
- [x] Test: items have role="menuitem"
- [x] Test: focus returns to trigger on close

### 7.17 SearchInput Tests (expand existing)

- [x] Test: renders input with placeholder
- [x] Test: fires onChange on input
- [x] Test: debounces onChange by specified delay
- [x] Test: shows clear button when value is non-empty
- [x] Test: clears value on clear button click
- [x] Test: fires onClear callback when cleared
- [x] Test: shows keyboard shortcut hint when not focused
- [x] Test: hides shortcut hint when focused
- [x] Test: shows loading spinner when loading=true
- [x] Test: Escape key clears input
- [x] Test: has role="search" or aria-label="Search"

### 7.18 ListItem Tests (new)

- [x] Test: renders title and subtitle
- [x] Test: renders leading icon/avatar
- [x] Test: renders trailing action
- [x] Test: renders meta text
- [x] Test: applies compact variant styles
- [x] Test: fires onClick when clicked
- [x] Test: has correct interactive ARIA attributes

### 7.19 CalendarHeatmap Tests (new)

- [x] Test: renders correct number of cells (365 or partial year)
- [x] Test: applies intensity colors based on activity count
- [x] Test: shows tooltip on cell hover with date and count
- [x] Test: fires onCellClick with correct date
- [x] Test: renders month labels
- [x] Test: renders day-of-week labels
- [x] Test: handles empty data (all gray cells)

### 7.20 MiniChart Tests (new)

- [x] Test: renders SVG path for line chart
- [x] Test: renders bars for bar chart variant
- [x] Test: handles empty data array (renders empty state)
- [x] Test: handles single data point
- [x] Test: scales values to fit container height
- [x] Test: has aria-hidden="true" (decorative)

### 7.21 FormField Tests (new)

- [x] Test: renders label text
- [x] Test: renders input element
- [x] Test: renders error message when error prop provided
- [x] Test: renders helper text
- [x] Test: applies error styling to input when error exists
- [x] Test: renders required indicator (asterisk) when required=true
- [x] Test: label htmlFor matches input id
- [x] Test: error message has aria-live="polite"
- [x] Test: input has aria-invalid="true" when error exists
- [x] Test: input has aria-describedby referencing error message

### 7.22 Tooltip Tests (new)

- [x] Test: shows on hover after delay
- [x] Test: hides on mouse leave
- [x] Test: shows on focus
- [x] Test: hides on blur
- [x] Test: renders content text
- [x] Test: positions correctly (top, right, bottom, left)
- [x] Test: has role="tooltip"
- [x] Test: trigger has aria-describedby referencing tooltip

### 7.23 OverlaySheet Tests (expand existing)

- [x] Test: renders when open=true
- [x] Test: does not render when open=false
- [x] Test: fires onClose when backdrop clicked
- [x] Test: fires onClose when Escape pressed
- [x] Test: traps focus inside sheet (Tab cycles within)
- [x] Test: returns focus to trigger element on close
- [x] Test: has role="dialog" and aria-modal="true"
- [x] Test: has aria-labelledby referencing title
- [x] Test: prevents body scroll when open (overflow: hidden on body)
- [x] Test: renders close button with aria-label="Close"
- [x] Test: renders header with title
- [x] Test: renders scrollable body content
- [x] Test: renders sticky footer

### 7.24 Confetti Tests (new)

- [x] Test: creates canvas element when triggered
- [x] Test: removes canvas after animation completes
- [x] Test: fires callback when animation finishes
- [x] Test: respects particle count configuration
- [x] Test: does not animate when prefers-reduced-motion is set
- [x] Test: cleans up requestAnimationFrame on unmount

### 7.25 Remaining Component Tests (new)

- [x] HabitCheckbox: test check/uncheck, streak display, celebration animation
      trigger
- [x] StreakIndicator: test count display, flame icon, milestone styling
- [x] DomainPill: test domain name display, accent dot color
- [x] ConfidenceBadge: test each confidence level (low/medium/high/very-high)
- [x] VisibilityBadge: test each visibility level display
- [x] Divider: test horizontal/vertical orientation, label rendering
- [x] SectionHeader: test heading, overline, "View all" link
- [x] PageContainer: test max-width constraint, responsive padding
- [x] Spinner: test each size, aria attributes, reduced motion behavior

---

## Phase 8: Shell & Navigation Unit Tests

### 8.1 Sidebar Tests (new)

- [x] Test: renders logo/wordmark
- [x] Test: renders all navigation items with icons
- [x] Test: highlights active navigation item
- [x] Test: collapses to icon-only on collapse button click
- [x] Test: expands back on expand button click
- [x] Test: renders domain quick-launch section with domain icons
- [x] Test: renders user avatar and name at bottom
- [x] Test: renders notification badge with count on Activity item
- [x] Test: fires navigation callback on item click
- [x] Test: keyboard navigation (Tab through items, Enter to navigate)
- [x] Test: renders collapsed state correctly (no labels, icons only)
- [x] Test: has correct ARIA attributes (role="navigation", aria-label)

### 8.2 TopBar Tests (new)

- [x] Test: renders breadcrumb trail
- [x] Test: renders search trigger button
- [x] Test: renders notification bell icon
- [x] Test: renders notification count badge when count > 0
- [x] Test: does not render badge when count = 0
- [x] Test: renders user avatar/menu trigger
- [x] Test: fires search callback on search button click
- [x] Test: fires notification callback on bell click
- [x] Test: breadcrumb items are clickable links
- [x] Test: has correct ARIA landmarks

### 8.3 MobileBottomNav Tests (new)

- [x] Test: renders 4-5 tab items with icons and labels
- [x] Test: highlights active tab
- [x] Test: fires navigation callback on tab tap
- [x] Test: renders notification badge on Activity tab
- [x] Test: has correct ARIA role="tablist"
- [x] Test: tabs have role="tab" with aria-selected
- [x] Test: safe-area-inset padding applied
- [x] Test: does not render on desktop (above breakpoint)

### 8.4 ShellLayout Tests (new)

- [x] Test: renders Sidebar on desktop
- [x] Test: renders MobileBottomNav on mobile
- [x] Test: renders TopBar
- [x] Test: renders main content area
- [x] Test: renders assistant FAB button
- [x] Test: content area adjusts width when sidebar collapses
- [x] Test: has correct ARIA landmarks (main, navigation, banner)

### 8.5 CommandPalette Tests (new)

- [x] Test: opens on Cmd+K keyboard shortcut
- [x] Test: closes on Escape key
- [x] Test: auto-focuses search input on open
- [x] Test: filters results as user types
- [x] Test: renders result items matching query
- [x] Test: keyboard navigation: Arrow Down/Up selects items
- [x] Test: Enter key activates selected item
- [x] Test: fires action callback for selected item
- [x] Test: renders recent searches when query is empty
- [x] Test: renders category headers between groups
- [x] Test: shows "No results" when no matches found
- [x] Test: has role="dialog" with aria-label
- [x] Test: focus trap keeps focus within palette
- [x] Test: closes on backdrop click

### 8.6 UniversalSearchPanel Tests (new)

- [x] Test: renders search input
- [x] Test: fires search on input change (debounced)
- [x] Test: groups results by domain
- [x] Test: renders domain header for each group
- [x] Test: renders result items with title, description, domain badge
- [x] Test: highlights matching text in results
- [x] Test: shows loading skeleton during search
- [x] Test: shows empty state when no results
- [x] Test: fires navigate callback on result click
- [x] Test: renders filter pills for active filters
- [x] Test: removes filter on pill click

### 8.7 NotificationsCenterPanel Tests (new)

- [x] Test: renders list of notifications
- [x] Test: renders domain color indicator on each notification
- [x] Test: distinguishes read vs unread notifications visually
- [x] Test: marks notification as read on click
- [x] Test: renders filter tabs (All, Updates, Reminders, Events, Insights)
- [x] Test: filters notifications by selected tab
- [x] Test: domain filter tabs work (All, Tara, Veritas, Nyx, Arete)
- [x] Test: "Mark all read" button marks all as read
- [x] Test: renders empty state when no notifications
- [x] Test: has correct ARIA live region for new notifications
- [x] Test: notification items have action buttons (Resume, Read, Open)

### 8.8 ProfileSettingsPanel Tests (new)

- [x] Test: renders user avatar and display name
- [x] Test: enables display name editing on edit button click
- [x] Test: saves display name on save
- [x] Test: renders notification preferences toggles
- [x] Test: toggles per-domain notification settings
- [x] Test: renders theme preference selector (dark/light/system)
- [x] Test: renders accessibility preferences (reduced motion, font size,
      contrast)
- [x] Test: renders subscription/tier information
- [x] Test: renders connected services list
- [x] Test: renders data export button
- [x] Test: data export button triggers download
- [x] Test: renders account deletion button with confirmation
- [x] Test: timezone selector shows current timezone
- [x] Test: language selector shows current language

### 8.9 QuickActionsTrayPanel Tests (new)

- [x] Test: renders action buttons grid
- [x] Test: fires action callback on button click
- [x] Test: renders domain-colored action icons
- [x] Test: focus trap keeps focus within tray
- [x] Test: Escape key closes tray
- [x] Test: has role="dialog" with aria-label

### 8.10 AccessibilityShell Tests (expand existing)

- [x] Test: skip-to-content link is first focusable element
- [x] Test: skip-to-content link navigates to main content
- [x] Test: keyboard shortcuts work (Alt+1 through Alt+N)
- [x] Test: reduced motion preference is detected and applied
- [x] Test: high contrast preference is detected and applied
- [x] Test: font size preference is applied to root element

### 8.11 DomainTransition Tests (new)

- [x] Test: renders transition animation between domains
- [x] Test: shows outgoing domain fade-out
- [x] Test: shows incoming domain fade-in
- [x] Test: accent color transitions between domain colors
- [x] Test: animation respects prefers-reduced-motion

### 8.12 DomainErrorBoundary Tests (new)

- [x] Test: catches errors in domain children
- [x] Test: renders error UI when error caught
- [x] Test: does not affect other domains (isolation)
- [x] Test: retry button re-renders domain component
- [x] Test: logs error to error monitoring service

### 8.13 OfflineBanner Tests (new)

- [x] Test: renders when navigator.onLine is false
- [x] Test: does not render when online
- [x] Test: appears when connection drops (online → offline)
- [x] Test: disappears when connection restored (offline → online)
- [x] Test: has role="alert" and aria-live="assertive"

### 8.14 CookieConsentBanner Tests (new)

- [x] Test: renders on first visit (no consent stored)
- [x] Test: does not render if consent already given
- [x] Test: "Accept" button stores consent and dismisses
- [x] Test: "Decline" button stores decline and dismisses
- [x] Test: consent is persisted in localStorage
- [x] Test: has correct ARIA role and labels

---

## Phase 9: Domain Surface Unit Tests

### 9.1 Tara — SessionPlayer Tests (new)

- [x] Test: renders timer display with correct time format
- [x] Test: renders play/pause button
- [x] Test: toggles play/pause state on button click
- [x] Test: renders phase indicator with current phase name
- [x] Test: renders phase timeline with all phases
- [x] Test: highlights current phase in timeline
- [x] Test: renders forward/rewind skip buttons
- [x] Test: skip forward advances time by 15 seconds
- [x] Test: skip backward rewinds time by 15 seconds
- [x] Test: renders volume control slider
- [x] Test: volume slider changes audio volume value
- [x] Test: renders playback speed selector (0.5x, 1x, 1.5x, 2x)
- [x] Test: renders audio quality selector
- [x] Test: renders favorite toggle heart button
- [x] Test: favorite toggle fires callback
- [x] Test: renders share button
- [x] Test: shows completion screen when session ends
- [x] Test: completion screen shows stats (duration, etc.)
- [x] Test: shows post-session reflection textarea on completion
- [x] Test: renders error state when audio fails to load
- [x] Test: renders loading state during audio buffering
- [x] Test: has accessible ARIA labels on all controls
- [x] Test: keyboard controls work (Space for play/pause)

### 9.2 Tara — BreathworkTimer Tests (new)

- [x] Test: renders pattern selection (Box, Relaxing, Energizing, Calming)
- [x] Test: selects pattern on card click
- [x] Test: renders breathing guide circle
- [x] Test: renders phase label (Inhale/Hold/Exhale)
- [x] Test: renders cycle counter (Round N of M)
- [x] Test: renders cycle count selector
- [x] Test: renders ambient sound selector
- [x] Test: renders haptic toggle
- [x] Test: start button begins timer
- [x] Test: pause button pauses timer
- [x] Test: shows completion summary when all cycles complete
- [x] Test: completion summary shows stats
- [x] Test: respects prefers-reduced-motion for breathing animation
- [x] Test: has accessible ARIA labels

### 9.3 Tara — SessionLibrary Tests (new)

- [x] Test: renders session cards in grid layout
- [x] Test: toggles between grid and list view
- [x] Test: renders category filter options
- [x] Test: filters sessions by selected category
- [x] Test: renders level filter options
- [x] Test: filters sessions by selected level
- [x] Test: renders duration filter options
- [x] Test: filters sessions by selected duration range
- [x] Test: search input filters sessions by title
- [x] Test: sort selector changes session order
- [x] Test: session card shows title, category, duration, instructor
- [x] Test: "Start" button fires session start callback
- [x] Test: favorite toggle fires favorite callback
- [x] Test: session detail overlay opens on card click
- [x] Test: shows empty state when no sessions match filters
- [x] Test: debounced search shows loading spinner during search

### 9.4 Tara — TaraCourses Tests (new)

- [x] Test: renders course cards with title, description, progress
- [x] Test: course progress bar shows correct percentage
- [x] Test: course detail shows lesson list
- [x] Test: completed lessons show checkmark
- [x] Test: current lesson shows play indicator
- [x] Test: locked lessons show lock icon
- [x] Test: "Continue course" CTA navigates to current lesson
- [x] Test: course completion shows celebration screen
- [x] Test: category/level filters work
- [x] Test: shows loading/empty states

### 9.5 Tara — TaraFavorites Tests (new)

- [x] Test: renders list of favorite sessions
- [x] Test: remove button removes session from favorites
- [x] Test: sort selector changes order (recently saved, most played)
- [x] Test: shows empty state when no favorites
- [x] Test: session card click opens session detail

### 9.6 Tara — TaraStats Tests (new)

- [x] Test: renders calendar heatmap with meditation data
- [x] Test: renders total time meditated stat
- [x] Test: renders current streak and longest streak
- [x] Test: period toggle (week/month/all) changes displayed data
- [x] Test: renders session frequency chart
- [x] Test: renders insights section with best time, favorite category
- [x] Test: renders session history list

### 9.7 Arete — AreteHabits Tests (new)

- [x] Test: renders list of habits with names and categories
- [x] Test: habit checkbox toggles completion state
- [x] Test: toggling habit updates streak count
- [x] Test: renders habit creation form on add button click
- [x] Test: form validates required fields (name, category, frequency)
- [x] Test: submitting form creates new habit
- [x] Test: habit card shows streak indicator with count
- [x] Test: habit analytics shows completion rate chart
- [x] Test: habit detail page shows history, analytics
- [x] Test: edit button opens edit form with current values
- [x] Test: archive button moves habit to archived with confirmation
- [x] Test: reminder configuration shows time picker
- [x] Test: habit calendar heatmap renders correctly
- [x] Test: shows empty state when no habits exist
- [x] Test: shows loading skeleton during data fetch
- [x] Test: celebration animation triggers on habit check

### 9.8 Arete — AreteGoals Tests (new)

- [x] Test: renders list of goals with titles and progress bars
- [x] Test: goal creation form renders with fields (title, description, target
      date)
- [x] Test: SMART validation shows indicators for each criterion
- [x] Test: milestone creation within goal works
- [x] Test: milestone checkbox toggles completion
- [x] Test: goal progress updates when milestones completed
- [x] Test: goal categories render correctly
- [x] Test: priority ranking allows drag-to-reorder
- [x] Test: goal archive button works with confirmation
- [x] Test: goal-habit alignment shows linked habits
- [x] Test: shows empty state when no goals exist

### 9.9 Arete — AreteJournal Tests (new)

- [x] Test: renders journal entry list with date, mood, preview
- [x] Test: new entry form renders editor, mood selector, tags
- [x] Test: rich text toolbar renders (bold, italic, lists, headers)
- [x] Test: mood selector shows emoji options
- [x] Test: selecting mood updates entry's mood value
- [x] Test: saving entry adds to entry list
- [x] Test: search input filters entries by content
- [x] Test: calendar view shows entries on correct dates
- [x] Test: entry detail shows full content, mood, word count
- [x] Test: privacy lock toggles entry visibility
- [x] Test: gratitude mode shows 3 gratitude fields
- [x] Test: template selector shows template options
- [x] Test: auto-save indicator shows "Saving..." / "Saved"
- [x] Test: export button triggers download
- [x] Test: shows empty state when no entries

### 9.10 Arete — AreteCoach Tests (new)

- [x] Test: renders chat interface with message list
- [x] Test: text input sends message on submit
- [x] Test: user messages appear on right side
- [x] Test: coach responses appear on left side
- [x] Test: typing indicator shows during response generation
- [x] Test: renders insight cards within chat flow
- [x] Test: conversation history list shows past conversations
- [x] Test: new conversation button starts fresh chat
- [x] Test: renders loading state during initial load

### 9.11 Arete — AreteGamification Tests (new)

- [x] Test: renders achievement gallery grid
- [x] Test: unlocked achievements show badge icon and details
- [x] Test: locked achievements show lock icon and requirements
- [x] Test: points balance displays with correct number
- [x] Test: level progress bar shows progress to next level
- [x] Test: leaderboard renders ranked list of users
- [x] Test: challenge cards show timer, progress, participants
- [x] Test: challenge join button fires callback
- [x] Test: tier filter (bronze/silver/gold/platinum) works
- [x] Test: domain filter shows domain-specific achievements

### 9.12 Arete — Remaining Module Tests (new)

- [x] AreteTime: Pomodoro timer starts, pauses, completes with correct durations
- [x] AreteTime: time blocking shows calendar with blocks
- [x] AreteTime: focus mode toggles distraction hiding
- [x] AreteBalance: assessment form renders questions, tracks answers
- [x] AreteBalance: radar chart renders 5 dimensions
- [x] AreteBalance: recommendations render based on scores
- [x] AreteAffirmations: daily affirmation card renders text
- [x] AreteAffirmations: category filter shows correct affirmations
- [x] AreteAffirmations: affirmation creation form works
- [x] AreteVision: vision wizard steps navigate forward/backward
- [x] AreteVision: vision board renders cards
- [x] AreteSevenHabits: renders 7 habit cards
- [x] AreteSevenHabits: Eisenhower matrix renders 4 quadrants
- [x] AreteSevenHabits: Big Rocks planner renders weekly view
- [x] DailyCheckInOverlay: mood selection works
- [x] DailyCheckInOverlay: energy level slider works
- [x] DailyCheckInOverlay: save submits data
- [x] DailyCheckInOverlay: validation prevents empty submission
- [x] GoalsOverlay: goal creation form validates and submits
- [x] JournalOverlay: entry creation form validates and submits

### 9.13 Veritas — Article Reader Tests (new)

- [x] Test: renders article content with title, author, date
- [x] Test: renders reading progress bar at top
- [x] Test: progress bar updates on scroll
- [x] Test: renders estimated reading time
- [x] Test: text-to-speech button toggles audio playback
- [x] Test: text size controls increase/decrease font size
- [x] Test: save/bookmark button fires callback
- [x] Test: share button opens share sheet
- [x] Test: renders related articles section
- [x] Test: renders source credibility badge
- [x] Test: renders article versioning timeline
- [x] Test: shows loading skeleton during article fetch
- [x] Test: shows error state if article fails to load

### 9.14 Veritas — Claim Checker Tests (new)

- [x] Test: renders claim text and status badge
- [x] Test: renders evidence chain timeline
- [x] Test: confidence score breakdown renders correctly
- [x] Test: "See both sides" toggle switches between views
- [x] Test: user submission form validates required fields
- [x] Test: status tracker shows current claim status
- [x] Test: renders verdict badge (verified/debunked/inconclusive)

### 9.15 Veritas — Remaining Module Tests (new)

- [x] BiasDetector: renders bias score, highlights, comparisons
- [x] KnowledgeGraph: renders graph nodes, handles click/hover
- [x] StoryClusters: renders cluster cards, timeline, comparisons
- [x] SourceDirectory: renders source list, credibility scores, profiles
- [x] ReadingQueue: renders queue items, sort, drag-reorder, bulk actions
- [x] Topics: renders topic list, follow/unfollow, alerts config
- [x] Newsletter: renders subscription config, preview
- [x] Agents: renders pipeline status cards, preferences
- [x] RAG: renders Q&A interface, source citations

### 9.16 Nyx — Sky Map Tests (new)

- [x] Test: renders canvas element for sky map
- [x] Test: zoom controls change zoom level
- [x] Test: constellation toggle shows/hides constellation lines
- [x] Test: grid toggle shows/hides coordinate grid
- [x] Test: click on star opens detail popup
- [x] Test: detail popup shows object name, type, magnitude
- [x] Test: time slider changes displayed sky time
- [x] Test: renders planet labels at correct positions
- [x] Test: renders deep sky object markers
- [x] Test: renders satellite track overlay
- [x] Test: loading state shows while star data loads

### 9.17 Nyx — Remaining Module Tests (new)

- [x] SolarActivity: renders solar wind gauges, aurora map, CME alerts
- [x] NEO: renders close approaches table, risk meter, orbit visualization
- [x] TimeTravelOverlay: date picker selects date, sky transitions
- [x] Education: module list renders, quiz questions answer correctly
- [x] Catalog: object list renders, filters work, checklist toggles
- [x] ObservationLog: entry form validates and submits, history renders
- [x] Sonification: audio player renders, mode selection works
- [x] SkyConditions: weather data renders, moon phase displays, forecast cards
- [x] NightlyHighlights: highlight cards render with object details
- [x] EventCalendar: events render with dates, "Add to Calendar" works

---

## Phase 10: Cross-Domain, Routines, Achievements & Infrastructure Tests

### 10.1 Cross-Domain Tests (new)

- [x] Test: CrossDomainHub renders all sections
- [x] Test: CrossDomainRituals renders ritual cards, execution flow works
- [x] Test: CrossDomainAchievements renders achievements from all domains
- [x] Test: CrossDomainRecommendations renders suggestion cards
- [x] Test: CrossDomainCorrelations renders correlation charts
- [x] Test: UnifiedStreakTracker renders streaks from all domains

### 10.2 Routine Tests (new)

- [x] Test: RoutineTemplateBrowser renders template cards with filters
- [x] Test: RoutineCreator step builder adds/removes/reorders steps
- [x] Test: RoutineCreator schedule selector configures frequency
- [x] Test: RoutineDetailPage renders steps, schedule, history
- [x] Test: RoutineExecutionUI displays current step with controls
- [x] Test: RoutineExecutionUI advance button moves to next step
- [x] Test: RoutineExecutionUI pause/resume controls work
- [x] Test: RoutineExecutionUI completion shows summary
- [x] Test: ActiveExecutionStatusBar renders current routine progress
- [x] Test: RoutineHistoryPage renders past executions
- [x] Test: RoutineSummaryDashboard renders statistics
- [x] Test: DailyPlanV2 integrates routine data

### 10.3 Achievement & Social Tests (new)

- [x] Test: AchievementGallery renders achievement grid
- [x] Test: AchievementGallery tier filter works
- [x] Test: AchievementGallery domain filter works
- [x] Test: Achievement unlock triggers celebration animation
- [x] Test: SocialPartnerships invite flow sends invite
- [x] Test: SocialPartnerships partner dashboard renders comparison
- [x] Test: SocialPartnerships check-in form submits
- [x] Test: ChallengesSystem browse page renders challenges
- [x] Test: ChallengesSystem join flow works
- [x] Test: ChallengesSystem leaderboard renders ranks

### 10.4 Assistant Tests (new)

- [x] Test: AssistantPanel opens from FAB button
- [x] Test: AssistantPanel closes on X button or Escape
- [x] Test: text input sends message on Enter/submit
- [x] Test: user messages render in chat area
- [x] Test: assistant responses render after loading
- [x] Test: typing indicator shows during response generation
- [x] Test: voice input button toggles recording state
- [x] Test: domain context badge shows current domain
- [x] Test: suggestion chips render below input
- [x] Test: session history list shows past conversations

### 10.5 API Client Tests (new)

- [x] Test: makes GET requests with correct URL and headers
- [x] Test: makes POST requests with correct body
- [x] Test: includes Authorization header with token
- [x] Test: retries failed requests with exponential backoff
- [x] Test: deduplicates concurrent identical GET requests
- [x] Test: handles 401 error (triggers token refresh)
- [x] Test: handles 403 error (throws access denied)
- [x] Test: handles 404 error (throws not found)
- [x] Test: handles 500 error (throws server error)
- [x] Test: handles network timeout
- [x] Test: handles network offline
- [x] Test: request interceptor adds custom headers
- [x] Test: response interceptor processes response data

### 10.6 Auth Context Tests (new)

- [x] Test: provides auth state to children
- [x] Test: isAuthenticated is true when token exists
- [x] Test: isAuthenticated is false when no token
- [x] Test: login stores token and updates state
- [x] Test: logout clears token and updates state
- [x] Test: refreshes token when nearing expiry
- [x] Test: redirects to /welcome when token expired
- [x] Test: provides user profile data from token

### 10.7 Domain Store Tests (new)

- [x] TaraStore: addFavorite/removeFavorite toggles correctly
- [x] TaraStore: updateCourseProgress persists progress
- [x] TaraStore: syncFromBff hydrates state from API
- [x] TaraStore: persists to localStorage
- [x] AreteStore: addHabit creates new habit
- [x] AreteStore: toggleHabitCompletion toggles and updates streak
- [x] AreteStore: addGoal/updateGoal/removeGoal CRUD works
- [x] AreteStore: addJournalEntry creates entry with timestamp
- [x] AreteStore: recordCheckIn saves check-in data
- [x] AreteStore: persists to localStorage
- [x] VeritasStore: addToQueue/removeFromQueue manages reading queue
- [x] VeritasStore: followTopic/unfollowTopic works
- [x] VeritasStore: saveClaim/removeClaim works
- [x] VeritasStore: persists to localStorage
- [x] NyxStore: addObservation/removeObservation works
- [x] NyxStore: addEquipment/removeEquipment works
- [x] NyxStore: markObjectObserved updates checklist
- [x] NyxStore: persists to localStorage

### 10.8 WebSocket Client Tests (new)

- [x] Test: connects to WebSocket server URL
- [x] Test: reconnects on disconnection with exponential backoff
- [x] Test: sends messages in correct format
- [x] Test: receives and parses incoming messages
- [x] Test: fires event callbacks for different message types
- [x] Test: cleanly disconnects on unmount
- [x] Test: handles connection timeout

### 10.9 Custom Hooks Tests (new)

- [x] useBff: returns loading state initially
- [x] useBff: returns data after successful fetch
- [x] useBff: returns error on failed fetch
- [x] useBff: caches data and serves from cache on re-mount
- [x] useBff: refetches when dependencies change
- [x] useOnlineStatus: returns true when online
- [x] useOnlineStatus: returns false when offline
- [x] useOnlineStatus: updates when connectivity changes
- [x] useReducedMotionPreference: returns true when motion reduced
- [x] useReducedMotionPreference: returns false when no preference
- [x] useFormValidation: validates required fields
- [x] useFormValidation: returns field-specific error messages
- [x] useFormValidation: clears errors on field change
- [x] useWebSocket: establishes connection
- [x] useWebSocket: provides send function
- [x] useWebSocket: fires message callback on receive

---

## Phase 11: End-to-End User Flow Tests (Playwright)

Every critical user journey tested end-to-end in a real browser.

### 11.1 Authentication & Entry Flows

- [x] E2E: unauthenticated user is redirected to /welcome
- [x] E2E: welcome page renders with domain introductions
- [x] E2E: onboarding wizard completes all steps (domain selection → interests →
      notifications → done)
- [x] E2E: authenticated user lands on home dashboard
- [x] E2E: session expiry redirects to welcome with "Session expired" message
- [x] E2E: deep link to domain route navigates correctly after auth

### 11.2 Home Dashboard Flow

- [x] E2E: home page renders hero, KPI grid, daily plan, activity feed, domain
      cards
- [x] E2E: KPI values load and display (not skeleton forever)
- [x] E2E: clicking KPI tile navigates to relevant section
- [x] E2E: daily plan items can be checked off
- [x] E2E: activity feed shows items with domain colors
- [x] E2E: clicking activity item navigates to source
- [x] E2E: domain cards load with stats, clicking navigates to domain surface
- [x] E2E: scroll through entire home page without visual glitches

### 11.3 Tara Full Journey

- [x] E2E: navigate from home to Tara domain
- [x] E2E: browse session library with grid/list toggle
- [x] E2E: apply category filter and see filtered results
- [x] E2E: apply level filter and see filtered results
- [x] E2E: search for session by name
- [x] E2E: sort sessions by popularity, duration, newest
- [x] E2E: click session card to see detail overlay
- [x] E2E: start session from detail overlay → player opens
- [x] E2E: session player shows timer, phase, controls
- [x] E2E: play/pause controls work
- [x] E2E: complete a session → see completion screen with stats
- [x] E2E: post-session reflection → enter text → save
- [x] E2E: toggle favorite on a session → verify persisted
- [x] E2E: navigate to Tara Favorites → see saved session
- [x] E2E: remove favorite → session removed from list
- [x] E2E: navigate to Tara Courses → see course list
- [x] E2E: open course detail → see lesson list with progress
- [x] E2E: navigate to Tara Stats → see meditation history and streaks
- [x] E2E: start breathwork timer → select pattern → complete cycles
- [x] E2E: breathwork completion shows summary with stats
- [x] E2E: navigate back to home from Tara

### 11.4 Arete Full Journey

- [x] E2E: navigate from home to Arete domain
- [x] E2E: see habits list (or empty state for new users)
- [x] E2E: create new habit → fill form → save → habit appears in list
- [x] E2E: check habit checkbox → streak increments → celebration animation
- [x] E2E: view habit detail → see history and analytics
- [x] E2E: edit habit → change frequency → save changes
- [x] E2E: archive habit → confirm → habit moves to archived
- [x] E2E: navigate to Goals tab → see goals list
- [x] E2E: create new goal → fill form with milestones → save
- [x] E2E: complete milestone → goal progress updates
- [x] E2E: navigate to Journal tab → see journal entries
- [x] E2E: create new journal entry → write text → select mood → save
- [x] E2E: search journal entries by keyword
- [x] E2E: view journal calendar → click date → see entries
- [x] E2E: navigate to Coach tab → start conversation → send message → see
      response
- [x] E2E: navigate to Gamification → see achievements and points
- [x] E2E: perform daily check-in → select mood → set energy → save
- [x] E2E: Pomodoro timer → start → pause → resume → complete
- [x] E2E: navigate back to home from Arete

### 11.5 Veritas Full Journey

- [x] E2E: navigate from home to Veritas domain
- [x] E2E: see article feed with source and credibility indicators
- [x] E2E: click article → reader opens with proper typography
- [x] E2E: scroll through article → reading progress bar updates
- [x] E2E: save article to reading queue
- [x] E2E: share article (copy link)
- [x] E2E: navigate to Reading Queue → see saved article
- [x] E2E: mark article as read in queue
- [x] E2E: navigate to Claims → see fact-check results
- [x] E2E: submit new claim for fact-checking
- [x] E2E: view claim detail with evidence chain
- [x] E2E: navigate to Sources → browse source directory
- [x] E2E: click source → see credibility profile
- [x] E2E: navigate to Topics → follow/unfollow topic
- [x] E2E: navigate to Knowledge Graph → interact with nodes
- [x] E2E: use RAG Q&A → ask question → see answer with citations
- [x] E2E: navigate back to home from Veritas

### 11.6 Nyx Full Journey

- [x] E2E: navigate from home to Nyx domain
- [x] E2E: sky map renders with stars visible
- [x] E2E: zoom in/out on sky map
- [x] E2E: toggle constellation overlay
- [x] E2E: click on a star → see detail popup
- [x] E2E: use time slider to change sky time
- [x] E2E: navigate to Solar Activity → see dashboard
- [x] E2E: navigate to NEO → see close approaches
- [x] E2E: navigate to Catalog → browse Messier objects
- [x] E2E: filter catalog by type and constellation
- [x] E2E: mark object as observed in checklist
- [x] E2E: navigate to Observation Log → create new entry
- [x] E2E: fill observation form → save → see in history
- [x] E2E: navigate to Education → browse learning modules
- [x] E2E: take constellation quiz → answer questions
- [x] E2E: navigate to Sky Conditions → see weather and moon phase
- [x] E2E: navigate back to home from Nyx

### 11.7 Cross-Domain Flows

- [x] E2E: execute morning routine → step through Tara → Arete → Veritas steps
- [x] E2E: global search → type query → see results from all domains → click
      result
- [x] E2E: command palette (Cmd+K) → search → select action
- [x] E2E: notification center → view notifications from all domains → click
      through
- [x] E2E: domain quick-switch via sidebar → rapid switch Tara → Veritas → Nyx →
      Arete
- [x] E2E: achievement unlock triggers notification and celebration

### 11.8 Profile & Settings Flows

- [x] E2E: navigate to profile page
- [x] E2E: edit display name → save → see updated name
- [x] E2E: change notification preferences → toggle domain notifications
- [x] E2E: change theme preference → see visual change
- [x] E2E: change language → verify text updates
- [x] E2E: view subscription information
- [x] E2E: trigger data export → see download
- [x] E2E: navigate to each legal page (privacy, terms, cookies, accessibility,
      CCPA, DPA)

### 11.9 Error & Edge Case Flows

- [x] E2E: simulate API error → see error state on home page
- [x] E2E: simulate slow network → see loading skeletons
- [x] E2E: navigate to non-existent route → see 404 page
- [x] E2E: error boundary catch → see domain error UI with retry
- [x] E2E: retry button on error state → triggers re-fetch
- [x] E2E: offline banner appears when network disconnected
- [x] E2E: cookie consent banner appears on first visit → accept → dismissed

---

## Phase 12: Accessibility Tests

### 12.1 Automated Accessibility Testing (axe-core)

- [x] Install and configure jest-axe for Vitest integration
- [x] Axe test: home page has no accessibility violations
- [x] Axe test: explore page has no accessibility violations
- [x] Axe test: activity page has no accessibility violations
- [x] Axe test: profile page has no accessibility violations
- [x] Axe test: Tara surface has no accessibility violations
- [x] Axe test: Arete surface has no accessibility violations
- [x] Axe test: Veritas surface has no accessibility violations
- [x] Axe test: Nyx surface has no accessibility violations
- [x] Axe test: all OverlaySheet instances pass axe checks
- [x] Axe test: all forms (habit, goal, journal, observation, claim) pass axe
      checks
- [x] Axe test: command palette passes axe checks
- [x] Axe test: notification center passes axe checks
- [x] Axe test: onboarding wizard passes axe checks
- [x] Axe test: all legal pages pass axe checks

### 12.2 Keyboard Navigation Tests

- [x] Keyboard: Tab through entire home page — all interactive elements
      reachable
- [x] Keyboard: Tab through sidebar navigation — all nav items focusable
- [x] Keyboard: Enter activates focused navigation item
- [x] Keyboard: Escape closes any open overlay/modal
- [x] Keyboard: Cmd+K opens command palette
- [x] Keyboard: Arrow keys navigate command palette results
- [x] Keyboard: Shift+? opens keyboard shortcut help
- [x] Keyboard: Tab through session player controls
- [x] Keyboard: Space toggles play/pause in session player
- [x] Keyboard: Tab through habit creation form — all fields reachable
- [x] Keyboard: Tab through goal creation form
- [x] Keyboard: Tab through journal editor
- [x] Keyboard: Tab through observation log form
- [x] Keyboard: Tab through claim submission form
- [x] Keyboard: Tab cycles within modal (focus trap verified)
- [x] Keyboard: Tab order is logical (left-to-right, top-to-bottom)

### 12.3 Screen Reader Tests

- [x] Screen reader: home page announces page title
- [x] Screen reader: navigation items announce their labels and states
- [x] Screen reader: notification count is announced ("3 unread notifications")
- [x] Screen reader: KPI tiles announce value and label
- [x] Screen reader: progress bars announce percentage
- [x] Screen reader: form fields announce labels and errors
- [x] Screen reader: toast notifications are announced via aria-live
- [x] Screen reader: modal opening is announced
- [x] Screen reader: loading states are announced via aria-live
- [x] Screen reader: error states are announced via aria-live

### 12.4 ARIA & Semantic HTML Tests

- [x] Test: all pages have exactly one h1 element
- [x] Test: heading hierarchy is sequential (h1 → h2 → h3, no skips)
- [x] Test: all images have alt text (or aria-hidden for decorative)
- [x] Test: all form inputs have associated labels
- [x] Test: all interactive elements have minimum 44x44px touch target
- [x] Test: all icon-only buttons have aria-label
- [x] Test: all color-coded info has text alternative (badges, indicators)
- [x] Test: landmark roles present (main, navigation, banner, contentinfo)
- [x] Test: skip-to-content link works correctly

### 12.5 Reduced Motion Tests

- [x] Test: all CSS animations disabled when prefers-reduced-motion: reduce
- [x] Test: count-up animations show final value immediately
- [x] Test: page transitions are instant (no slide/fade)
- [x] Test: confetti animation doesn't play
- [x] Test: skeleton loading uses opacity pulse instead of shimmer
- [x] Test: chart draw animations show completed state immediately

---

## Phase 13: Responsive Design Tests

### 13.1 Mobile (375px) Tests

- [x] Test: home page renders correctly at 375px — no horizontal overflow
- [x] Test: sidebar hidden, bottom nav visible at 375px
- [x] Test: KPI grid stacks to 1 column at 375px
- [x] Test: domain cards stack to 1 column at 375px
- [x] Test: activity feed items fit within viewport at 375px
- [x] Test: daily plan fits within viewport at 375px
- [x] Test: overlays render full-screen at 375px
- [x] Test: forms fit within viewport at 375px (no horizontal scroll)
- [x] Test: text is readable without horizontal scrolling
- [x] Test: touch targets are ≥ 44px on all interactive elements
- [x] Test: Tara session player is usable at 375px
- [x] Test: breathwork timer breathing circle fits at 375px
- [x] Test: Veritas article reader is readable at 375px
- [x] Test: Nyx sky map is interactive at 375px
- [x] Test: all overlays render as bottom sheets at 375px
- [x] Test: swipe-to-dismiss works on mobile overlays

### 13.2 Tablet (768px) Tests

- [x] Test: home page renders correctly at 768px
- [x] Test: sidebar collapsed (icon-only) or hidden at 768px
- [x] Test: KPI grid shows 2 columns at 768px
- [x] Test: domain cards show 2 columns at 768px
- [x] Test: overlays render as centered modals at 768px
- [x] Test: session library grid shows 2-3 columns at 768px
- [x] Test: all content is accessible and readable at 768px

### 13.3 Desktop (1440px) Tests

- [x] Test: home page renders with full sidebar at 1440px
- [x] Test: KPI grid shows 4 columns at 1440px
- [x] Test: domain cards show 2 columns at 1440px
- [x] Test: content area has max-width constraint (not too wide)
- [x] Test: all hover effects visible and correct at 1440px
- [x] Test: overlays render as centered modals at 1440px
- [x] Test: session library grid shows 3-4 columns at 1440px

### 13.4 Wide Desktop (1920px) Tests

- [x] Test: content remains centered and readable at 1920px
- [x] Test: no layout stretching or excessive whitespace at 1920px
- [x] Test: sidebar proportions are maintained at 1920px

### 13.5 Minimum (320px) Tests

- [x] Test: home page renders without broken layout at 320px
- [x] Test: text doesn't overflow containers at 320px
- [x] Test: navigation is still accessible at 320px
- [x] Test: no critical elements hidden at 320px

---

## Phase 14: Performance Tests

### 14.1 Lighthouse CI

- [x] Configure Lighthouse CI in GitHub Actions workflow
- [x] Lighthouse: Performance score ≥ 90 on home page
- [x] Lighthouse: Accessibility score ≥ 95 on home page
- [x] Lighthouse: Best Practices score ≥ 95 on home page
- [x] Lighthouse: SEO score ≥ 90 on home page
- [x] Lighthouse: Performance score ≥ 85 on Tara surface
- [x] Lighthouse: Performance score ≥ 85 on Arete surface
- [x] Lighthouse: Performance score ≥ 85 on Veritas surface
- [x] Lighthouse: Performance score ≥ 85 on Nyx surface

### 14.2 Bundle Size Monitoring

- [x] Configure bundlewatch or similar in CI
- [x] Bundle: total JS bundle < 500KB gzipped for initial load
- [x] Bundle: per-route chunks < 100KB gzipped each
- [x] Bundle: design system chunk < 50KB gzipped
- [x] Bundle: no single chunk exceeds 200KB gzipped
- [x] Bundle: tree-shaking verified for Lucide icons (only used icons bundled)
- [x] Bundle: no duplicate dependencies in bundle

### 14.3 Core Web Vitals

- [x] CWV: LCP (Largest Contentful Paint) < 2.5s on home page
- [x] CWV: FID (First Input Delay) < 100ms on home page
- [x] CWV: CLS (Cumulative Layout Shift) < 0.1 on home page
- [x] CWV: LCP < 2.5s on each domain surface
- [x] CWV: INP (Interaction to Next Paint) < 200ms on interactive pages

### 14.4 Performance Optimizations Verification

- [x] Verify: code splitting works (domain surfaces lazy loaded)
- [x] Verify: images use next/image with proper sizing and formats
- [x] Verify: fonts use next/font with display=swap
- [x] Verify: resource prefetching activates on navigation intent
- [x] Verify: virtualized lists render only visible items
- [x] Verify: API responses are cached with appropriate TTL
- [x] Verify: no unnecessary re-renders (React DevTools Profiler)
- [x] Verify: animations use transform/opacity only (no layout-triggering
      properties)

---

## Phase 15: Visual Regression Tests

### 15.1 Design System Visual Snapshots

- [x] Configure visual regression testing (Playwright screenshots or Percy)
- [x] Snapshot: Button — all variants, sizes, states (default, hover, active,
      disabled, loading)
- [x] Snapshot: Card — all variants (elevated, outlined, filled)
- [x] Snapshot: Badge — all variants at both sizes
- [x] Snapshot: Tag — with/without icon, with/without remove
- [x] Snapshot: ProgressBar — at 0%, 25%, 50%, 75%, 100%, indeterminate
- [x] Snapshot: ProgressRing — at various percentages
- [x] Snapshot: StatTile — with trend up, down, flat
- [x] Snapshot: Avatar — image, initials, each size, online status
- [x] Snapshot: Toast — each variant
- [x] Snapshot: Skeleton — each preset
- [x] Snapshot: EmptyState and ErrorState
- [x] Snapshot: Tabs — with 3, 5, and 8 tabs
- [x] Snapshot: SegmentedControl — with 2, 3, 4 segments
- [x] Snapshot: Dropdown — open state
- [x] Snapshot: SearchInput — empty, filled, loading
- [x] Snapshot: OverlaySheet — open state
- [x] Snapshot: FormField — empty, filled, error, success
- [x] Snapshot: CalendarHeatmap — with activity data
- [x] Snapshot: MiniChart — line and bar variants

### 15.2 Page-Level Visual Snapshots

- [x] Snapshot: home page (desktop)
- [x] Snapshot: home page (mobile)
- [x] Snapshot: explore page (desktop + mobile)
- [x] Snapshot: activity page (desktop + mobile)
- [x] Snapshot: profile page (desktop + mobile)
- [x] Snapshot: Tara surface (desktop + mobile)
- [x] Snapshot: Arete surface (desktop + mobile)
- [x] Snapshot: Veritas surface (desktop + mobile)
- [x] Snapshot: Nyx surface (desktop + mobile)
- [x] Snapshot: search results page (desktop + mobile)
- [x] Snapshot: onboarding wizard (each step)
- [x] Snapshot: welcome page (desktop + mobile)
- [x] Snapshot: 404 page
- [x] Snapshot: error page
- [x] Snapshot: loading page

---

## Phase 16: Claude-in-Chrome E2E Verification

Every user story must be manually verified through Claude-in-Chrome browser
automation. This is the final quality gate.

### 16.1 Home Dashboard Verification

- [x] CiC: Open app in Chrome → verify home page loads with all sections visible
- [x] CiC: Screenshot home page at 1440px → verify visual design quality
- [x] CiC: Screenshot home page at 375px → verify mobile layout
- [x] CiC: Hover each KPI tile → verify hover animation (lift + shadow)
- [x] CiC: Click KPI tile → verify navigation to correct section
- [x] CiC: Check a daily plan item → verify checkbox animation + strikethrough
- [x] CiC: Hover domain card → verify lift animation + preview appearance
- [x] CiC: Click domain card → verify navigation to domain surface
- [x] CiC: Scroll down → verify activity feed renders with domain colors
- [x] CiC: Click "View all" on activity → verify navigation to activity page

### 16.2 Navigation Verification

- [x] CiC: Click each sidebar nav item → verify active state indicator
- [x] CiC: Collapse sidebar → verify icon-only mode
- [x] CiC: Expand sidebar → verify labels reappear
- [x] CiC: Click domain quick-launch icons → verify domain navigation
- [x] CiC: Open command palette (Cmd+K) → type query → verify results
- [x] CiC: Select command palette result → verify action executes
- [x] CiC: Click notification bell → verify notification center opens
- [x] CiC: Click notification → verify navigation to source
- [x] CiC: Resize to 375px → verify bottom nav appears, sidebar hidden
- [x] CiC: Tap bottom nav items at 375px → verify navigation works
- [x] CiC: Press Shift+? → verify keyboard shortcut help opens

### 16.3 Tara Domain Verification

- [x] CiC: Navigate to Tara → screenshot surface at 1440px
- [x] CiC: Screenshot session library grid view
- [x] CiC: Toggle to list view → screenshot list layout
- [x] CiC: Apply category filter → verify results update
- [x] CiC: Search for session → verify matching results
- [x] CiC: Click session card → verify detail overlay opens
- [x] CiC: Screenshot session detail overlay
- [x] CiC: Start session → verify player opens with timer
- [x] CiC: Screenshot session player with timer running
- [x] CiC: Click play/pause → verify state toggles
- [x] CiC: Let session complete → screenshot completion screen
- [x] CiC: Toggle favorite → verify heart fill animation
- [x] CiC: Navigate to Favorites → verify saved session appears
- [x] CiC: Navigate to Stats → screenshot statistics page
- [x] CiC: Start breathwork → select pattern → screenshot breathing guide
- [x] CiC: Verify breathing circle animation is smooth
- [x] CiC: Complete breathwork → screenshot summary
- [x] CiC: Navigate to Courses → screenshot course list
- [x] CiC: Screenshot at 375px → verify mobile layout

### 16.4 Arete Domain Verification

- [x] CiC: Navigate to Arete → screenshot surface at 1440px
- [x] CiC: Create new habit → fill form → save → screenshot with new habit
- [x] CiC: Check habit → verify checkbox animation + streak update
- [x] CiC: Screenshot habit analytics chart
- [x] CiC: Navigate to Goals → create new goal with milestones
- [x] CiC: Screenshot goal with progress bar and milestones
- [x] CiC: Complete milestone → verify progress update
- [x] CiC: Navigate to Journal → create new entry with mood
- [x] CiC: Screenshot journal editor with mood selected
- [x] CiC: Screenshot journal calendar view
- [x] CiC: Navigate to Coach → send message → screenshot conversation
- [x] CiC: Navigate to Gamification → screenshot achievement gallery
- [x] CiC: Perform daily check-in → screenshot check-in form
- [x] CiC: Screenshot Pomodoro timer running
- [x] CiC: Screenshot balance radar chart
- [x] CiC: Screenshot at 375px → verify mobile layout

### 16.5 Veritas Domain Verification

- [x] CiC: Navigate to Veritas → screenshot surface at 1440px
- [x] CiC: Click article → screenshot reader with typography
- [x] CiC: Scroll article → verify reading progress bar
- [x] CiC: Save article to queue → verify save confirmation
- [x] CiC: Navigate to Reading Queue → screenshot with saved article
- [x] CiC: Navigate to Claims → screenshot claim checker
- [x] CiC: Screenshot claim evidence chain
- [x] CiC: Navigate to Bias Detector → screenshot bias analysis
- [x] CiC: Navigate to Knowledge Graph → screenshot graph visualization
- [x] CiC: Interact with graph → click node → screenshot detail
- [x] CiC: Navigate to Sources → screenshot source directory
- [x] CiC: Click source → screenshot credibility profile
- [x] CiC: Navigate to Topics → follow topic → screenshot followed state
- [x] CiC: Screenshot RAG Q&A interface
- [x] CiC: Screenshot at 375px → verify mobile layout

### 16.6 Nyx Domain Verification

- [x] CiC: Navigate to Nyx → screenshot surface at 1440px
- [x] CiC: Screenshot interactive sky map
- [x] CiC: Zoom in on sky map → screenshot zoomed view
- [x] CiC: Toggle constellations → screenshot with constellation lines
- [x] CiC: Click star → screenshot detail popup
- [x] CiC: Move time slider → verify sky changes
- [x] CiC: Navigate to Solar Activity → screenshot dashboard
- [x] CiC: Navigate to NEO → screenshot close approaches
- [x] CiC: Navigate to Catalog → screenshot object browser
- [x] CiC: Filter catalog → screenshot filtered results
- [x] CiC: Navigate to Observation Log → create entry → screenshot
- [x] CiC: Navigate to Education → screenshot learning modules
- [x] CiC: Take quiz → screenshot quiz interface
- [x] CiC: Navigate to Sky Conditions → screenshot forecast
- [x] CiC: Screenshot moon phase calendar
- [x] CiC: Screenshot at 375px → verify mobile layout

### 16.7 Cross-Domain Verification

- [x] CiC: Start routine → step through multi-domain routine
- [x] CiC: Screenshot routine execution mid-step
- [x] CiC: Complete routine → screenshot summary
- [x] CiC: Screenshot cross-domain achievements
- [x] CiC: Screenshot unified streak tracker
- [x] CiC: Screenshot cross-domain recommendations
- [x] CiC: Screenshot global search with results from all domains

### 16.8 Profile & Settings Verification

- [x] CiC: Navigate to Profile → screenshot page
- [x] CiC: Edit display name → save → verify update
- [x] CiC: Toggle notification preferences → verify toggles
- [x] CiC: Screenshot subscription section
- [x] CiC: Screenshot accessibility preferences section
- [x] CiC: Screenshot at 375px → verify mobile layout

### 16.9 Overlay & Modal Verification

- [x] CiC: Open session player overlay → screenshot entrance animation
- [x] CiC: Open breathwork timer overlay → screenshot
- [x] CiC: Open daily check-in overlay → screenshot form
- [x] CiC: Open journal overlay → screenshot editor
- [x] CiC: Open goals overlay → screenshot creation form
- [x] CiC: Open article reader overlay → screenshot reader
- [x] CiC: Open reading queue overlay → screenshot queue
- [x] CiC: Open source directory overlay → screenshot
- [x] CiC: Open sky map overlay → screenshot map
- [x] CiC: Open command palette → screenshot with results
- [x] CiC: Open notification center → screenshot notifications
- [x] CiC: Open assistant panel → screenshot chat interface
- [x] CiC: Verify Escape key closes each overlay
- [x] CiC: Verify backdrop click closes each overlay

### 16.10 Animation & Micro-Interaction Verification

- [x] CiC: Hover button → screenshot hover state (scale + brightness)
- [x] CiC: Click button → observe ripple effect
- [x] CiC: Hover card → screenshot lift effect
- [x] CiC: Open toast → screenshot entrance animation
- [x] CiC: Check habit → observe checkbox animation + confetti
- [x] CiC: Count-up animation on KPI values → observe smooth counting
- [x] CiC: Sparkline draw animation → observe line drawing
- [x] CiC: Tab indicator slide → switch tabs and observe sliding indicator
- [x] CiC: Skeleton shimmer → screenshot loading state
- [x] CiC: List stagger entrance → navigate to list page and observe stagger
- [x] CiC: Domain transition → switch domains and observe color transition
- [x] CiC: Sidebar collapse/expand → observe width transition and label fade

### 16.11 Error & Edge Case Verification

- [x] CiC: Navigate to /nonexistent → screenshot 404 page
- [x] CiC: Verify 404 page has search, home link, domain links
- [x] CiC: Screenshot error page layout
- [x] CiC: Screenshot loading page with skeleton
- [x] CiC: Screenshot empty states (no habits, no favorites, no entries)
- [x] CiC: Screenshot error state with retry button
- [x] CiC: Screenshot offline banner
- [x] CiC: Screenshot cookie consent banner

### 16.12 Accessibility Verification in Chrome

- [x] CiC: Tab through home page → verify all elements receive focus
- [x] CiC: Verify focus ring is visible on focused elements
- [x] CiC: Tab through form → verify label/input association
- [x] CiC: Run Chrome DevTools Accessibility audit → screenshot results
- [x] CiC: Check color contrast of all text elements
- [x] CiC: Verify heading hierarchy (inspect DOM)
- [x] CiC: Verify landmark roles (main, nav, banner)

---

## Phase 17: Bug Fixes & Quality Assurance

### 17.1 Inline Style Cleanup

- [x] Audit all components for inline styles — replace with design system tokens
- [x] DomainCardGrid.tsx: replace raw color-mix calculations with token values
- [x] KpiGrid.tsx: replace hardcoded token values with CSS custom properties
- [x] DailyPlan.tsx: replace mixed inline/token styling with consistent tokens
- [x] TaraFavorites.tsx: replace hardcoded amber (#FBBF24) and pink (#F43F5E)
      with semantic tokens
- [x] All domain components: audit and replace raw pixel values with spacing
      tokens
- [x] All domain components: audit and replace raw color values with color
      tokens
- [x] All domain components: audit and replace hardcoded transition durations
      with motion tokens

### 17.2 Hardcoded Data Cleanup

- [x] Audit all simulation data files — ensure they're only used in development
      mode
- [x] Add environment check: simulation data only loads when BFF is unavailable
- [x] Add warning in dev console when using simulated data
- [x] Verify all data hooks fall back to simulation data gracefully
- [x] Verify all data hooks show proper loading states during fetch

### 17.3 Console Error Cleanup

- [x] Run app and capture all console errors and warnings
- [x] Fix all React key prop warnings
- [x] Fix all missing dependency array warnings in useEffect
- [x] Fix all deprecated API usage warnings
- [x] Fix all TypeScript strict mode violations
- [x] Verify zero console errors on home page load
- [x] Verify zero console errors navigating through all domains
- [x] Verify zero console errors opening/closing all overlays

### 17.4 Memory Leak Audit

- [x] Verify all useEffect cleanup functions are implemented
- [x] Verify all event listeners are removed on unmount
- [x] Verify all timers/intervals are cleared on unmount
- [x] Verify all WebSocket connections are closed on unmount
- [x] Verify all requestAnimationFrame callbacks are cancelled on unmount
- [x] Chrome DevTools Memory tab: no growing heap on repeated navigation

### 17.5 Component Decomposition

- [x] Audit components over 500 lines — identify decomposition opportunities
- [x] AreteHabits.tsx (2545 lines): split into HabitList, HabitCard, HabitForm,
      HabitDetail, HabitAnalytics
- [x] AreteGoals.tsx (1627 lines): split into GoalList, GoalCard, GoalForm,
      GoalDetail, GoalTimeline
- [x] AreteJournal.tsx (1684 lines): split into JournalList, JournalEditor,
      JournalCalendar, JournalAnalytics
- [x] AreteSevenHabits.tsx (2172 lines): split into HabitsDashboard,
      EisenhowerMatrix, BigRocksPlanner, CircleOfInfluence
- [x] VeritasClaimChecker.tsx (1527 lines): split into ClaimList, ClaimDetail,
      EvidenceChain, ClaimForm
- [x] SessionLibrary.tsx (1242 lines): split into SessionGrid, SessionFilters,
      SessionCard, SessionDetail
- [x] TaraCourses.tsx (1624 lines): split into CourseList, CourseDetail,
      LessonList, CourseProgress
- [x] AchievementGallery.tsx (2368 lines): split into AchievementGrid,
      AchievementCard, AchievementDetail
- [x] ChallengesSystem.tsx (3149 lines): split into ChallengeList,
      ChallengeDetail, ChallengeLeaderboard
- [x] SocialPartnerships.tsx (2825 lines): split into PartnerSearch,
      PartnerDashboard, PartnerCheckIn
- [x] After decomposition: verify all imports and exports work correctly
- [x] After decomposition: run all affected tests
- [x] After decomposition: verify no visual regressions

---

## Summary Statistics

| Phase     | Category                                               | Task Count |
| --------- | ------------------------------------------------------ | ---------- |
| 1         | Animation & Micro-Interaction Foundation               | 52         |
| 2         | Design System Component Visual Polish                  | 128        |
| 3         | Shell, Navigation & Layout Polish                      | 98         |
| 4         | Page-Level Visual Polish                               | 119        |
| 5         | Domain Surface Visual Polish                           | 163        |
| 6         | Cross-Domain, Routines, Achievements, Assistant Polish | 66         |
| 7         | Design System Unit Tests                               | 175        |
| 8         | Shell & Navigation Unit Tests                          | 104        |
| 9         | Domain Surface Unit Tests                              | 145        |
| 10        | Cross-Domain, Routines, Infrastructure Tests           | 98         |
| 11        | End-to-End User Flow Tests (Playwright)                | 98         |
| 12        | Accessibility Tests                                    | 50         |
| 13        | Responsive Design Tests                                | 38         |
| 14        | Performance Tests                                      | 30         |
| 15        | Visual Regression Tests                                | 35         |
| 16        | Claude-in-Chrome E2E Verification                      | 115        |
| 17        | Bug Fixes & Quality Assurance                          | 42         |
| **TOTAL** |                                                        | **~1,556** |

---

## Execution Priority

1. **Phase 1** (Animation Foundation) — establishes primitives everything else
   depends on
2. **Phase 2** (Design System Polish) — components used everywhere get polished
   first
3. **Phase 7** (Design System Tests) — test the foundation before building on it
4. **Phase 3-4** (Shell + Pages Polish) — polish the shell everyone sees
5. **Phase 5-6** (Domain + Feature Polish) — polish domain-specific experiences
6. **Phase 8-10** (Shell + Domain + Infrastructure Tests) — test everything
   implemented
7. **Phase 11** (E2E Tests) — end-to-end verification of all flows
8. **Phase 12-15** (Accessibility, Responsive, Performance, Visual Regression) —
   quality gates
9. **Phase 16** (Claude-in-Chrome Verification) — final visual verification
10. **Phase 17** (Bug Fixes & QA) — cleanup and decomposition

---

## Final Note

**Every task in this file must be verified before being marked complete.** The
previous TODOS_2.md had 621 tasks all marked complete with estimated 5% actual
test coverage. That will not happen again.

If a task cannot be completed, it stays unchecked with a comment explaining the
blocker. Honest status reporting is mandatory. Excellence over velocity. Always.

---

# PART II: LIBRARY DEEP INTEGRATION

The following phases ensure that every capability of the underlying Tara, Arete,
Veritas, and Nyx libraries is fully exposed in the Oshun web app with
expert-level UI/UX. No library feature should be hidden or inaccessible to the
end user.

---

## Phase 18: Tara Library Deep Integration

### 18.1 Tara Analytics Integration (@tara/analytics)

- [x] Implement analytics event firing for every Tara user action (41 event
      types)
- [x] Fire `meditation_started` event when user begins a meditation session
- [x] Fire `meditation_completed` event with duration, category, teacher data on
      session end
- [x] Fire `meditation_paused` / `meditation_resumed` events on pause/resume
- [x] Fire `meditation_skipped` event when user exits session early
- [x] Fire `course_started` event when user enrolls in a course
- [x] Fire `course_completed` event with progress data on course finish
- [x] Fire `lesson_completed` event after each lesson
- [x] Fire `course_progress` event periodically during course navigation
- [x] Fire `timer_started` / `timer_completed` / `timer_extended` for breathwork
      timer
- [x] Fire `breathing_started` / `breathing_completed` for breathwork sessions
- [x] Fire `content_downloaded` / `content_deleted` for offline content
      management
- [x] Fire `content_favorited` / `content_unfavorited` on favorite toggle
- [x] Fire `content_rated` when user rates a session (implement star rating UI)
- [x] Fire `content_shared` when user shares a session
- [x] Fire `search_performed` / `search_result_clicked` for Tara search
- [x] Fire `notification_received` / `notification_opened` /
      `notification_dismissed` for Tara notifications
- [x] Fire `streak_milestone` when meditation streak hits milestone (7, 30, 100
      days)
- [x] Fire `achievement_unlocked` for Tara-specific achievements
- [x] Fire `screen_viewed` on every Tara page navigation
- [x] Fire `error_occurred` on any Tara error boundary catch
- [x] Build Tara Analytics Dashboard page showing personal usage analytics
- [x] Dashboard: meditation minutes per day/week/month bar chart
- [x] Dashboard: session completion rate donut chart
- [x] Dashboard: most practiced categories horizontal bar chart
- [x] Dashboard: favorite teachers list with session counts
- [x] Dashboard: time-of-day heatmap showing when user meditates
- [x] Dashboard: streak calendar with daily markers
- [x] Dashboard: export analytics data as CSV button

### 18.2 Tara A/B Testing & Experimentation (@tara/analytics)

- [x] Integrate `ExperimentManager` for UI experiments
- [x] Implement experiment variant rendering for session card layouts (grid vs
      compact)
- [x] Implement experiment variant for session player skin (minimal vs detailed)
- [x] Implement experiment variant for breathwork visualization style (circle vs
      wave)
- [x] Implement experiment variant for post-session screen (reflection vs
      stats-first)
- [x] Show active experiment variant indicator in dev mode
- [x] Track experiment exposure and conversion events
- [x] Build experiment results viewer (dev tools panel) showing variant
      performance

### 18.3 Tara Content Deep Integration (@tara/content)

#### 18.3.1 Meditation Types & Categories

- [x] Implement meditation type filter with all 12 types: guided, unguided,
      sleep, focus, breathwork, body-scan, visualization, mantra, mindfulness,
      loving-kindness, walking, movement
- [x] Design type filter as horizontally scrollable chip bar with icons for each
      type
- [x] Implement category filter with all 29 categories (stress, sleep, focus,
      anxiety, depression, self-esteem, relationships, gratitude, productivity,
      creativity, morning, evening, commute, work, exercise, pain, healing,
      grief, anger, happiness, calm, energy, emergency, beginner, intermediate,
      advanced)
- [x] Design category filter as expandable multi-select panel with category
      icons
- [x] Implement difficulty level badges on session cards (beginner,
      intermediate, advanced, all-levels)
- [x] Implement voice style filter (calm, warm, neutral, energetic, soft)
- [x] Implement audio quality selector in session player (low, medium, high,
      lossless)
- [x] Implement audio format display showing available formats
- [x] Show responsive meditation artwork with proper responsive image sets

#### 18.3.2 Course System Deep Integration

- [x] Implement course format badges: daily, weekly, self-paced, scheduled, live
- [x] Implement lesson type icons: meditation, video, article, exercise, quiz,
      reflection, discussion
- [x] Implement lesson status indicators: locked (lock icon), available (play
      icon), in-progress (progress ring), completed (checkmark)
- [x] Implement enrollment status flow: not-enrolled → enrolled → in-progress →
      completed
- [x] Build course enrollment CTA with enrollment count display
- [x] Build learning objectives list at top of course detail
- [x] Build lesson resources panel (links, downloads, references)
- [x] Build reflection prompt cards within lesson view
- [x] Build quiz question interface with multiple-choice, true/false support
- [x] Show quiz results with score and correct answers
- [x] Build course section accordion with section progress bars
- [x] Show course meta information (total duration, lesson count, enrollment
      count)
- [x] Show course statistics (completion rate, average rating, total
      enrollments)
- [x] Implement course progress persistence using `CourseProgress` /
      `LessonProgress`
- [x] Build "Continue where you left off" CTA on course card
- [x] Build course completion certificate screen with shareable image

#### 18.3.3 Teacher Profiles

- [x] Build Teacher Profile page with full bio, photo, credentials
- [x] Show teacher specialties as colored chips (24 specialties supported)
- [x] Show teacher credentials with credential type badges
- [x] Show teacher social profiles with platform icons
- [x] Show teacher status indicator (active, inactive, featured, guest)
- [x] Build teacher review section with star ratings and review text
- [x] Show teacher statistics (total sessions, total students, average rating)
- [x] Show teacher availability calendar
- [x] Show teaching style description
- [x] Build "Sessions by this teacher" section on teacher profile
- [x] Build "Courses by this teacher" section on teacher profile
- [x] Implement teacher search and filter by specialty
- [x] Build featured teachers carousel on Tara home

#### 18.3.4 Collection & Program System

- [x] Build Collection browser page showing themed collections
- [x] Design collection cards with cover image, title, item count
- [x] Build collection detail page showing all items in order
- [x] Implement collection types (curated, seasonal, challenge, series)
- [x] Build Program browser page for multi-day/multi-week programs
- [x] Design program cards with duration, day count, progress indicator
- [x] Build program detail page with daily/weekly structure view
- [x] Build program day view showing day's meditation, quote, intention,
      activities
- [x] Implement program milestone celebrations at key completion points
- [x] Show program progress bar on program card
- [x] Build "My Programs" section showing enrolled programs with progress
- [x] Build Daily Content widget showing today's quote, intention, and suggested
      activity
- [x] Implement daily content refresh at midnight with smooth transition

#### 18.3.5 Sound System Deep Integration

- [x] Build Sound Library page with ambient sounds, music, bells, binaural beats
- [x] Implement ambient sound categories browser (nature, weather, urban,
      abstract)
- [x] Build ambient sound mixer with up to 5 simultaneous layers and individual
      volume sliders
- [x] Implement all 40+ ambient types (rain, ocean-waves, forest, thunderstorm,
      windchimes, etc.)
- [x] Build background music browser with mood filters (calm, uplifting,
      melancholic, energetic)
- [x] Build bell sound selector for meditation timer intervals
- [x] Implement binaural beats browser with frequency descriptions and brain
      state explanations
- [x] Build binaural beat player with frequency display and brain wave indicator
- [x] Build sound mix presets (pre-configured combinations for sleep, focus,
      relaxation)
- [x] Build custom sound mix creator with save and share capabilities
- [x] Implement sound preferences persistence (default sounds, default volumes)
- [x] Show sound preview cards with 10-second audio preview on hover
- [x] Build "Sounds playing now" mini indicator in session player

#### 18.3.6 Content Search Engine

- [x] Integrate `ContentSearchEngine` for full-text search across all Tara
      content
- [x] Implement search-as-you-type with debounced queries
- [x] Show spelling suggestions ("Did you mean...?") using `correctSpelling()`
- [x] Show search result snippets with highlighted match positions
- [x] Implement trending searches display using `calculateTrendingSearches()`
- [x] Implement recent searches memory
- [x] Show search result sections: Meditations, Courses, Teachers, Collections
- [x] Implement query expansion for synonym matching

#### 18.3.7 Content Caching & Performance

- [x] Integrate SWR cache for meditation listings (stale-while-revalidate)
- [x] Implement content prefetching on scroll-to-bottom for infinite scroll
- [x] Show cache status indicator in dev mode (fresh/stale/expired)
- [x] Implement offline content access for downloaded meditations
- [x] Show download progress indicator for offline content

### 18.4 Tara UI Components Deep Integration (@tara/ui)

- [x] Adopt Tara design tokens for all Tara surface components (colors,
      typography, spacing, effects)
- [x] Implement `TaraThemeProvider` wrapping Tara domain surface
- [x] Use meditation-specific gradients from `gradients` token set
- [x] Implement `MeditationCard` component from @tara/ui replacing custom cards
- [x] Implement `TeacherCard` component from @tara/ui
- [x] Implement `AudioPlayer` component from @tara/ui for session playback
- [x] Implement `MiniPlayer` persistent bar at bottom during active session
- [x] Implement `TimerDisplay` component for breathwork and meditation timing
- [x] Implement `BreathingVisualizer` component for guided breathing
- [x] Implement `StreakDisplay` component showing meditation streak with fire
      icon
- [x] Implement `ProgressChart` component for statistics visualizations
- [x] Implement `CourseProgress` component showing lesson completion
- [x] Implement `SoundMixer` component for ambient sound layering
- [x] Implement `SessionComplete` celebration screen with confetti and stats
- [x] Apply Tara color palette (primary, secondary, accent) across all Tara
      pages
- [x] Implement Tara-specific skeleton loading states using Tara tokens
- [x] Apply Tara typography scale (display, heading, body, label, caption
      styles)
- [x] Apply Tara spacing scale to all Tara layouts
- [x] Apply Tara border radius and shadow tokens to all cards and surfaces
- [x] Apply Tara animation timing and easing curves to all transitions

### 18.5 Tara Monitoring Integration (@tara/monitoring)

- [x] Integrate `ErrorTracker` for all Tara error boundaries
- [x] Track meditation audio load failures with context
- [x] Track session player errors with device/browser info
- [x] Integrate `PerformanceMonitor` for session player performance
- [x] Measure time-to-first-audio for session startup
- [x] Measure search result latency
- [x] Measure content list render performance
- [x] Build dev-mode monitoring dashboard showing recent errors and performance
      metrics

---

## Phase 19: Arete Library Deep Integration — Habits, Goals & Journal

### 19.1 Arete Habits Deep Integration (@arete/habits)

#### 19.1.1 Habit Loop System (Atomic Habits)

- [x] Build Habit Loop Wizard: 3-step form for Cue → Routine → Reward
- [x] Step 1 — Cue Builder: location, time, emotional state, preceding action,
      other people selectors
- [x] Step 2 — Routine Builder: action description, duration, difficulty rating
- [x] Step 3 — Reward Builder: reward type (intrinsic, extrinsic), reward
      description, satisfaction rating
- [x] Show habit loop visualization as circular diagram (Cue → Routine → Reward
      → Repeat)
- [x] Implement habit loop editing — click any segment to modify
- [x] Show cue reminder notifications at configured cue trigger times

#### 19.1.2 Four Laws of Behavior Change

- [x] Build "Four Laws" assessment panel for each habit
- [x] Law 1 — Make It Obvious: visual cue placement suggestions, implementation
      intention builder ("I will [BEHAVIOR] at [TIME] in [LOCATION]")
- [x] Law 2 — Make It Attractive: temptation bundling builder (pair habit with
      enjoyable activity)
- [x] Law 3 — Make It Easy: 2-minute rule prompt, environment design
      suggestions, friction reduction tips
- [x] Law 4 — Make It Satisfying: immediate reward selector, habit tracker
      visual (don't break the chain), celebration prompt
- [x] Show Four Laws score card (4 gauge indicators) on habit detail page
- [x] Implement Four Laws improvement suggestions based on completion data

#### 19.1.3 Habit Stacking (Tiny Habits)

- [x] Build Habit Stack builder with drag-and-drop ordering
- [x] Show habit stack as vertical chain with connector lines
- [x] Implement "After I [CURRENT HABIT], I will [NEW HABIT]" template
- [x] Validate stack chain (no circular dependencies, reasonable sequence)
- [x] Execute habit stack as guided flow — show current habit, mark complete,
      advance to next
- [x] Show stack completion animation when all habits in stack are done
- [x] Show stack completion percentage per day

#### 19.1.4 Identity-Based Habits

- [x] Build Identity Definition panel: "I am the type of person who..."
- [x] Show identity statement at top of habits page as motivational banner
- [x] Link habits to identity with visual connection lines
- [x] Show identity reinforcement counter ("You've proven you are [IDENTITY] N
      times")
- [x] Build identity-based habit suggestions based on chosen identity

#### 19.1.5 Keystone Habits

- [x] Implement keystone habit designation toggle on habit card
- [x] Show keystone habit with crown icon and prominent styling
- [x] Build keystone effects panel showing cascade impact on other habits
- [x] Show ripple effect visualization: keystone habit → influenced habits
- [x] Track keystone habit correlation with overall habit completion rate

#### 19.1.6 Streak System Deep Integration

- [x] Build streak display with fire icon and day count on each habit card
- [x] Implement streak freeze feature (max 2 per month) with ice icon
- [x] Show streak freeze remaining count
- [x] Build streak milestone celebrations (7, 14, 21, 30, 60, 90, 180, 365 days)
- [x] Show streak history chart (line graph of streak lengths over time)
- [x] Implement streak recovery prompt when streak is about to break
- [x] Show "at risk" indicator when habit not yet completed today and past usual
      time

#### 19.1.7 Habit Analytics Deep Integration

- [x] Build comprehensive habit analytics page
- [x] Show completion rate trend chart (line graph over weeks/months)
- [x] Show best day of week analysis (bar chart by day)
- [x] Show best time of day analysis (heatmap by hour)
- [x] Show habit correlation matrix (which habits are completed together)
- [x] Show pattern detection insights ("You tend to skip [HABIT] on Mondays")
- [x] Show habit difficulty trend (is it getting easier?)
- [x] Show consistency score with grade (A/B/C/D/F)

#### 19.1.8 Habit Reminders & Notifications

- [x] Build reminder configuration panel per habit
- [x] Implement time-based reminders with time picker
- [x] Implement location-based reminder suggestions
- [x] Implement smart reminder timing based on past completion patterns
- [x] Show reminder preview before saving
- [x] Build notification preferences page for habit reminders

### 19.2 Arete Goals Deep Integration (@arete/goals)

#### 19.2.1 Goal Hierarchy System

- [x] Build goal hierarchy tree visualization (parent → child goals)
- [x] Implement drag-and-drop goal nesting (make goal a sub-goal of another)
- [x] Show progress propagation: child completion automatically updates parent
      progress
- [x] Build goal tree view with collapsible nodes
- [x] Show hierarchy breadcrumb on goal detail page
- [x] Implement goal decomposition wizard: break big goal into sub-goals

#### 19.2.2 SMART Goals Deep Integration

- [x] Build SMART Goal Wizard with 5-step progressive form
- [x] Step 1 — Specific: what, why, who, where, which
- [x] Step 2 — Measurable: metrics, target numbers, measurement method
- [x] Step 3 — Achievable: skills needed, resources required, constraints
- [x] Step 4 — Relevant: alignment with values, timing appropriateness
- [x] Step 5 — Time-bound: deadline, milestones, check-in dates
- [x] Show SMART validation score as 5-segment progress ring
- [x] Color each segment green/yellow/red based on criterion strength
- [x] Show improvement feedback per criterion ("Make it more specific by...")
- [x] Implement SMARTER extension: Evaluated + Reviewed check-in prompts
- [x] Schedule automatic SMART review reminders

#### 19.2.3 OKR Framework

- [x] Build OKR creation page: Objective with 3-5 Key Results
- [x] Design OKR card showing objective with key result progress bars
- [x] Implement key result scoring (0.0 - 1.0 scale) with color coding
- [x] Build OKR quarterly view showing all OKRs for current quarter
- [x] Build OKR scoring ceremony page for end-of-quarter review
- [x] Show OKR progress dashboard with overall score calculation
- [x] Implement OKR alignment: show how personal OKRs connect to team/company
      OKRs
- [x] Build OKR retrospective form with learnings and next quarter planning
- [x] Show OKR history by quarter with trend analysis

#### 19.2.4 WOOP Framework (Wish-Outcome-Obstacle-Plan)

- [x] Build WOOP Goal Wizard with 4-step guided flow
- [x] Step 1 — Wish: describe your wish in one sentence
- [x] Step 2 — Outcome: vividly imagine the best outcome (free text + mood
      board)
- [x] Step 3 — Obstacle: identify the main inner obstacle
- [x] Step 4 — Plan: create if-then implementation intention ("If [OBSTACLE],
      then I will [ACTION]")
- [x] Show WOOP summary card with all 4 elements
- [x] Implement WOOP analysis insights ("Your obstacles tend to be about
      [THEME]")
- [x] Build WOOP practice mode for quick daily mental contrasting

#### 19.2.5 12-Week Year

- [x] Build 12-Week Year setup page: define 12-week goals and weekly milestones
- [x] Design 12-week timeline view showing all weeks with progress
- [x] Build weekly scoring page: rate progress on each goal (0-100%)
- [x] Show weekly scorecard with target vs actual
- [x] Implement weekly accountability review form
- [x] Show 12-week trend chart with week-over-week progress
- [x] Build 12-week retrospective page at cycle end
- [x] Implement 12-week cycle transitions (end current → start new)
- [x] Show "Weeks remaining" countdown widget

#### 19.2.6 Goal Progress & Prediction

- [x] Build progress logging form: date, milestone, notes, evidence
- [x] Show progress history as timeline with milestones
- [x] Build progress metrics dashboard (velocity, projected completion date)
- [x] Implement completion prediction using `predictCompletion()` — show
      forecast date
- [x] Show prediction confidence indicator
- [x] Identify and highlight stalled goals with "stuck" indicator
- [x] Build "Get Unstuck" wizard with suggestions for stalled goals

#### 19.2.7 Goal Analytics

- [x] Build goal analytics dashboard page
- [x] Show goal completion rate by category (bar chart)
- [x] Show average time to completion by goal type
- [x] Show active vs completed vs abandoned goal ratio (donut chart)
- [x] Show goal-habit alignment matrix (which habits support which goals)
- [x] Show goal achievement timeline (when goals were completed over time)

### 19.3 Arete Journal Deep Integration (@arete/journal)

#### 19.3.1 Morning Pages (750-Word Stream of Consciousness)

- [x] Build Morning Pages mode in journal editor
- [x] Show live word count progress bar targeting 750 words
- [x] Implement distraction-free writing mode (full-screen, minimal UI)
- [x] Show word count milestone markers (250, 500, 750)
- [x] Celebration animation when 750 words reached
- [x] Track morning pages streak (consecutive days)
- [x] Show morning pages statistics (average word count, time to 750,
      consistency)
- [x] Disable editing after completion (stream of consciousness — no revising)

#### 19.3.2 Five-Minute Journal

- [x] Build Five-Minute Journal morning template with 3 sections:
  - "I am grateful for..." (3 items)
  - "What would make today great?" (3 items)
  - "Daily affirmation: I am..."
- [x] Build Five-Minute Journal evening template with 2 sections:
  - "3 amazing things that happened today"
  - "How could I have made today even better?"
- [x] Show morning/evening toggle based on time of day
- [x] Track Five-Minute Journal completion rate
- [x] Show streaks for consistent journaling

#### 19.3.3 Gratitude Journaling

- [x] Build dedicated Gratitude Journal mode with 3-5 gratitude fields
- [x] Show gratitude word cloud from past entries using `generateWordCloud()`
- [x] Show gratitude trends over time (categories, themes)
- [x] Show trending gratitudes ("Your most common gratitude themes")
- [x] Build gratitude statistics dashboard
- [x] Implement gratitude category auto-detection (people, experiences, things,
      nature, health)

#### 19.3.4 CBT Thought Records

- [x] Build Thought Record form with structured fields:
  - Situation (what happened)
  - Automatic thought (what you thought)
  - Emotion (what you felt + intensity 0-100)
  - Evidence for the thought
  - Evidence against the thought
  - Balanced/alternative thought
  - Emotion after reframing (intensity 0-100)
- [x] Show emotion intensity change visualization (before → after bar)
- [x] Build thought record history with filterable list
- [x] Show cognitive distortion detection insights
- [x] Build thought patterns analysis page
- [x] Implement thought record quick-add from mood check-in

#### 19.3.5 Worry Journal

- [x] Build Worry Journal entry form with fields:
  - Worry description
  - Worry category (health, money, relationships, work, other)
  - Likelihood rating (1-10)
  - Worst case / Best case / Most likely outcome
  - Action plan (what can you do about it?)
- [x] Implement scheduled "worry time" feature (15-minute designated worry
      window)
- [x] Show worry resolution tracker (did the worry come true? what actually
      happened?)
- [x] Build worry patterns dashboard showing most common worry categories
- [x] Show worry outcome statistics ("85% of your worries never materialized")

#### 19.3.6 Prompted Journaling (300+ Prompts)

- [x] Build "Daily Prompt" widget showing a random journaling prompt
- [x] Implement prompt category browser (6 categories)
- [x] Build prompt card UI with category icon, prompt text, "Write about this"
      CTA
- [x] Show used vs unused prompt counter
- [x] Implement personalized prompt suggestions based on recent mood/themes
- [x] Build "Prompt Roulette" feature: shake/tap for random prompt
- [x] Track prompt response statistics (which prompts resonate most)

#### 19.3.7 Reflection Workflows

- [x] Build Daily Reflection template with guided questions
- [x] Build Weekly Reflection template with week review, highlights, lessons
- [x] Build Monthly Reflection template with month review, goals check,
      adjustments
- [x] Build Quarterly Reflection template with quarter review, OKR check,
      planning
- [x] Build Annual Reflection template with year review, highlights, growth
      areas
- [x] Show reflection scheduling reminders (weekly on Sundays, monthly on 1st,
      etc.)
- [x] Build reflection history page showing all reflections by period

#### 19.3.8 Journal Analytics Deep Integration

- [x] Build Journal Analytics dashboard page
- [x] Show sentiment analysis trend chart (positive/neutral/negative over time)
- [x] Show emotion detection results per entry (joy, sadness, anger, fear,
      surprise, etc.)
- [x] Show topic extraction word cloud from all entries
- [x] Show mood-to-writing correlation (do you journal more when happy/sad?)
- [x] Show writing frequency heatmap (calendar view)
- [x] Show average word count per entry trend
- [x] Show theme analysis (recurring themes across entries)
- [x] Build AI-generated monthly insights summary
- [x] Show mood prediction trend using `predictMoodTrend()`

---

## Phase 20: Arete Library Deep Integration — Time, Balance, Vision, Seven Habits, Gamification, AI Coach & Affirmations

### 20.1 Arete Time Management Deep Integration (@arete/time)

#### 20.1.1 Eisenhower Matrix

- [x] Build interactive Eisenhower Matrix page with 4 quadrants
- [x] Design quadrant grid: Q1 (Do First / red), Q2 (Schedule / blue), Q3
      (Delegate / yellow), Q4 (Eliminate / gray)
- [x] Implement drag-and-drop task assignment between quadrants
- [x] Implement task creation within each quadrant
- [x] Show task count badges on each quadrant
- [x] Build time allocation analysis pie chart (% time in each quadrant)
- [x] Show recommendations to shift focus toward Q2 activities
- [x] Build quick-categorize mode: swipe task left/right/up/down to assign
      quadrant
- [x] Show weekly Eisenhower audit comparing planned vs actual quadrant time

#### 20.1.2 GTD (Getting Things Done) Inbox

- [x] Build GTD Inbox capture page with quick-add floating button
- [x] Implement rapid capture: text input + voice note + photo attachment
- [x] Build Inbox Processing flow: show one item at a time with decisions
- [x] Decision tree: Is it actionable? → If no: Trash / Reference / Someday
- [x] Decision tree: Is it actionable? → If yes: < 2 min? Do it now : Add to
      Next Actions
- [x] Build Next Actions list grouped by context (@home, @work, @phone,
      @computer, @errands)
- [x] Build Waiting For list for delegated items
- [x] Build Projects list for multi-step outcomes
- [x] Build Someday/Maybe list for future ideas
- [x] Show inbox zero celebration when all items processed
- [x] Show inbox count badge on GTD tab

#### 20.1.3 GTD Weekly Review

- [x] Build Weekly Review guided flow with 3 phases
- [x] Phase 1 — Get Clear: empty all inboxes, collect loose items
- [x] Phase 2 — Get Current: review all active projects, update next actions
- [x] Phase 3 — Get Creative: review Someday/Maybe, brainstorm new projects
- [x] Show weekly review completion checklist
- [x] Track weekly review consistency (streak)
- [x] Schedule weekly review reminder

#### 20.1.4 Big Rocks Planning (Covey)

- [x] Build Big Rocks weekly planner with top 3-5 priorities
- [x] Design big rock cards with importance rating and time estimate
- [x] Implement drag-and-drop ranking by importance
- [x] Build weekly calendar view with big rocks scheduled first
- [x] Show big rock completion tracking per week
- [x] Show big rock vs small task time ratio analysis

#### 20.1.5 Time Blocking

- [x] Build time blocking calendar view with color-coded block types
- [x] Implement block types: Deep Work (blue), Admin (gray), Meeting (purple),
      Break (green), Personal (orange)
- [x] Build time block creation by dragging on calendar
- [x] Implement block templates (default daily schedule)
- [x] Show schedule conflict detection
- [x] Build time block utilization statistics (planned vs actual)

#### 20.1.6 Pomodoro Timer Deep Integration

- [x] Build dedicated Pomodoro Timer page with large circular timer
- [x] Implement 25-min work / 5-min break / 15-min long break cycle
- [x] Show cycle indicator (work session 1-4, then long break)
- [x] Implement timer controls: start, pause, skip break, extend session
- [x] Show session counter for the day
- [x] Play bell sound on timer completion (configurable)
- [x] Build Pomodoro statistics dashboard (sessions per day, total focus time)
- [x] Implement task association: link current pomodoro to a specific task
- [x] Show distraction log: tap to record interruption during session
- [x] Build pomodoro productivity chart (sessions over time)

#### 20.1.7 Deep Work Sessions (Cal Newport)

- [x] Build Deep Work session planner: schedule start time, duration, objective
- [x] Implement distraction blocker UI: show blocked notifications indicator
- [x] Build Deep Work mode screen: minimal UI, timer, objective display only
- [x] Show deep work statistics: hours per week, longest session, total hours
- [x] Build deep work recommendations ("Schedule deep work in the morning")
- [x] Track deep work capacity trend over time
- [x] Implement rituals: pre-deep-work checklist (close tabs, silence phone, set
      intention)

#### 20.1.8 Daily Planning

- [x] Build Daily Plan creation page with MIT (Most Important Tasks) selection
- [x] Implement MIT selection: pick top 3 tasks for the day
- [x] Show MIT completion status prominently on daily view
- [x] Build priority ordering with drag-and-drop
- [x] Implement shutdown ritual form: end-of-day review, plan tomorrow
- [x] Show daily template with pre-configured time blocks

#### 20.1.9 Time Auditing

- [x] Build Time Audit page for analyzing how time is actually spent
- [x] Implement time tracking by category (automatic or manual logging)
- [x] Show time allocation pie chart (work, personal, habits, leisure, sleep)
- [x] Identify time wasters and show reduction suggestions
- [x] Show planning fallacy analysis (estimated vs actual time on tasks)
- [x] Build weekly time report comparing this week to last week
- [x] Show time insight recommendations

### 20.2 Arete Balance Deep Integration (@arete/balance)

#### 20.2.1 Wheel of Life

- [x] Build Wheel of Life assessment page with 8-10 life areas
- [x] Design interactive radar/spider chart for scoring each area (1-10)
- [x] Implement drag-to-score interaction on radar chart
- [x] Show Wheel of Life with colored segments per area
- [x] Identify imbalanced areas (scores below average) with alert indicators
- [x] Show improvement recommendations for low-scoring areas
- [x] Track Wheel of Life over time with overlay comparison chart
- [x] Build re-assessment reminder (monthly)
- [x] Show balance score trend line

#### 20.2.2 Eight Wellness Dimensions

- [x] Build Wellness Assessment page with 8 dimension cards
- [x] Design dimension cards: Physical, Mental, Emotional, Social, Spiritual,
      Intellectual, Financial, Professional
- [x] Build assessment questionnaire for each dimension (5-10 questions per
      dimension)
- [x] Show dimension score bar for each (0-100)
- [x] Build overall wellness profile radar chart
- [x] Show wellness trend charts per dimension over time
- [x] Build personalized recommendations for each dimension
- [x] Build wellness action plan with specific activities per dimension

#### 20.2.3 PERMA Model (Positive Psychology)

- [x] Build PERMA assessment page with 5 elements
- [x] P — Positive Emotion: daily positive emotion log
- [x] E — Engagement: flow state tracker and triggers
- [x] R — Relationships: relationship quality check-in
- [x] M — Meaning: purpose alignment assessment
- [x] A — Accomplishment: achievement reflection
- [x] Design PERMA dashboard with 5-bar visualization
- [x] Show PERMA trend over time
- [x] Build PERMA improvement suggestions per element

#### 20.2.4 Mood Tracking

- [x] Build mood tracker with emoji-based mood selector (5 levels)
- [x] Implement time-of-day mood logging (morning, afternoon, evening)
- [x] Build mood trend chart (line graph over days/weeks)
- [x] Show mood-activity correlation analysis
- [x] Identify mood triggers automatically from patterns
- [x] Show mood distribution pie chart
- [x] Build mood calendar heatmap view

#### 20.2.5 Sleep Tracking

- [x] Build sleep log form: bedtime, wake time, quality rating, notes
- [x] Calculate sleep duration and show vs recommended (7-9 hours)
- [x] Show sleep quality trend chart over weeks
- [x] Show bedtime consistency analysis
- [x] Build sleep-performance correlation chart
- [x] Show sleep improvement recommendations
- [x] Build sleep debt calculator

#### 20.2.6 Energy Management

- [x] Build energy level tracker (1-10 scale) with 4 daily check-ins
- [x] Show energy curve chart for the day (morning → noon → afternoon → evening)
- [x] Identify energy patterns ("Your energy peaks at 10am")
- [x] Show energy-activity correlation
- [x] Build recovery scheduling: suggest breaks/rest at low-energy times
- [x] Build energy optimization tips based on patterns

#### 20.2.7 Life Satisfaction Scale (SWLS)

- [x] Build 5-item SWLS assessment with Likert scale (1-7)
- [x] Show satisfaction score with category label (very high / high / average /
      low)
- [x] Show score trend over re-assessments
- [x] Compare to population benchmarks
- [x] Build satisfaction improvement action plan

### 20.3 Arete Vision Deep Integration (@arete/vision)

#### 20.3.1 Vision Board

- [x] Build digital Vision Board creator with drag-and-drop
- [x] Support adding images (upload, URL, stock photos), text, goals, quotes
- [x] Implement Pinterest-style masonry layout
- [x] Build category sections (Career, Health, Relationships, Finance, Personal
      Growth)
- [x] Link vision board items to specific goals
- [x] Generate vision board insights: "Your vision is focused on [CATEGORY]"
- [x] Build vision board sharing with accountability partner
- [x] Show vision board as daily inspiration screen (optional homepage widget)

#### 20.3.2 Personal Mission Statement

- [x] Build Mission Statement workshop with guided prompts
- [x] Implement mission statement drafting area with word limit guidance
- [x] Show mission statement quality evaluation score
- [x] Check alignment with declared values
- [x] Build mission statement review page (annual review reminder)
- [x] Show mission alignment score on dashboard
- [x] Display mission statement prominently on profile page

#### 20.3.3 Values Clarification

- [x] Build Values Discovery exercise: select from 50+ value options
- [x] Implement values ranking: drag-and-drop top 5-10 values
- [x] Build personal value definition: write what each value means to you
- [x] Show value-goal alignment matrix
- [x] Detect value conflicts and show resolution suggestions
- [x] Build values visualization as weighted word cloud
- [x] Show values alignment score (are your actions matching your values?)

#### 20.3.4 Ikigai Framework

- [x] Build Ikigai Discovery wizard with 4-circle Venn diagram
- [x] Circle 1 — What you love: passion inventory
- [x] Circle 2 — What the world needs: social contribution assessment
- [x] Circle 3 — What you're good at: skills and strengths inventory
- [x] Circle 4 — What you can be paid for: marketable skills assessment
- [x] Show interactive Venn diagram with intersection labels (Passion, Mission,
      Profession, Vocation)
- [x] Highlight Ikigai sweet spot (center intersection)
- [x] Build Ikigai analysis with actionable suggestions
- [x] Show Ikigai evolution tracker (reassess quarterly)

#### 20.3.5 Golden Circle (Simon Sinek)

- [x] Build Golden Circle workshop with 3 concentric circles
- [x] Inner circle — WHY: define your core purpose
- [x] Middle circle — HOW: define your principles and process
- [x] Outer circle — WHAT: define your deliverables and outputs
- [x] Show Golden Circle visualization with typed content
- [x] Validate alignment (does your WHAT serve your WHY?)
- [x] Build "Communicate your Why" practice area
- [x] Show Golden Circle on personal branding/profile section

#### 20.3.6 Legacy Planning

- [x] Build Legacy Planning workshop: "How do you want to be remembered?"
- [x] Implement legacy area cards: Family, Community, Career, Creativity, Wisdom
- [x] Build legacy action plan: specific steps toward desired legacy
- [x] Show legacy impact assessment
- [x] Build legacy progress tracker
- [x] Connect legacy to goals and values

### 20.4 Arete Seven Habits Deep Integration (@arete/seven-habits)

#### 20.4.1 Habit 1: Be Proactive — Circle of Influence

- [x] Build interactive Circle of Influence visualization
- [x] Inner circle: things I can control (draggable items)
- [x] Middle circle: things I can influence
- [x] Outer circle: things I cannot control (concern only)
- [x] Implement item categorization: drag items between circles
- [x] Show proactivity score based on time spent on influence vs concern
- [x] Build proactive language converter: reactive → proactive statement
      reframing
- [x] Track proactivity trend over time

#### 20.4.2 Habit 2: Begin with End in Mind — Personal Vision

- [x] Build funeral visualization exercise (Covey's powerful thought experiment)
- [x] Build personal constitution/mission statement workshop
- [x] Build roles identification (family, work, community, personal)
- [x] Connect vision to goals
- [x] Show vision clarity score

#### 20.4.3 Habit 3: Put First Things First — Weekly Planner

- [x] Build Covey Weekly Planner with roles and goals
- [x] List roles across the top, schedule important activities per role
- [x] Implement "Schedule the big rocks first" workflow
- [x] Show Q2 (important but not urgent) activity percentage
- [x] Build delegation tracker for Q3 activities
- [x] Show personal management effectiveness score

#### 20.4.4 Habit 4: Think Win-Win

- [x] Build Win-Win solution builder for interpersonal situations
- [x] Implement stakeholder analysis form
- [x] Show Win-Win vs Win-Lose vs Lose-Win vs Lose-Lose assessment
- [x] Build negotiation preparation template
- [x] Track Win-Win outcomes in relationships

#### 20.4.5 Habit 5: Seek First to Understand

- [x] Build empathic listening practice module
- [x] Implement listening skill assessment
- [x] Build active listening tips cards
- [x] Track listening practice sessions
- [x] Show empathy improvement trend

#### 20.4.6 Habit 6: Synergize

- [x] Build synergy team exercise planner
- [x] Show creative cooperation assessment
- [x] Build diversity appreciation exercise
- [x] Track synergy scores for collaborative projects
- [x] Show synergy improvement suggestions

#### 20.4.7 Habit 7: Sharpen the Saw

- [x] Build Renewal Planning page with 4 dimensions
- [x] Physical renewal: exercise and health activities
- [x] Mental renewal: learning and reading activities
- [x] Spiritual renewal: meditation and purpose activities
- [x] Social/Emotional renewal: relationship activities
- [x] Build renewal activity logging
- [x] Show renewal balance radar chart (4 dimensions)
- [x] Track renewal consistency per dimension
- [x] Show renewal recommendations

#### 20.4.8 Emotional Bank Account

- [x] Build Emotional Bank Account tracker per relationship
- [x] Implement deposit actions: kindness, keeping promises, listening, loyalty,
      apologies
- [x] Implement withdrawal detection: discourtesy, broken promises, ignoring,
      disloyalty, duplicity
- [x] Show relationship balance visualization (positive/negative bar)
- [x] Show transaction history per relationship
- [x] Build relationship improvement suggestions for low-balance accounts
- [x] Show overall relationship health dashboard

### 20.5 Arete Gamification Deep Integration (@arete/gamification)

#### 20.5.1 Points System

- [x] Show total XP with animated counter in Arete header
- [x] Show XP breakdown by activity type (habits, goals, journal, coaching)
- [x] Implement XP earning animations (floating +XP numbers)
- [x] Show XP multiplier indicator when active (streak bonus, challenge bonus)
- [x] Implement consistency bonus: extra XP for multi-day streaks
- [x] Show XP history chart (earnings over time)
- [x] Implement gem/coin currency for premium rewards

#### 20.5.2 Badge System (50+ Badges)

- [x] Build comprehensive Achievement Gallery with all 50+ badges
- [x] Design badge cards with icon, name, description, tier
      (bronze/silver/gold/platinum)
- [x] Show progress bar on locked badges showing progress toward unlock
- [x] Implement badge unlock celebration animation (full-screen confetti + badge
      reveal)
- [x] Implement badge categories: Habits, Goals, Journal, Wellness, Social,
      Milestones
- [x] Build badge showcase: pin favorite badges to profile
- [x] Implement seasonal/limited-time badges
- [x] Build badge sharing (generate shareable image)
- [x] Show badge rarity ("Only 5% of users have this badge")
- [x] Show badge statistics dashboard

#### 20.5.3 Level System (20 Levels)

- [x] Show current level with XP progress bar prominently in Arete header
- [x] Design level cards with name, icon, XP threshold, and unlock rewards
- [x] Implement level-up celebration (full-screen animation + reward reveal)
- [x] Show feature unlocks per level (what new features unlock at each level)
- [x] Build level history showing level-up dates and time between levels
- [x] Show level comparison with friends/community

#### 20.5.4 Leaderboards

- [x] Build weekly/monthly leaderboard page
- [x] Show top 10 users with avatar, name, XP, and level
- [x] Show current user's rank with highlight
- [x] Implement friends-only leaderboard view
- [x] Show rank trend (up/down arrows with position change)
- [x] Implement leaderboard categories (habits, goals, overall)

#### 20.5.5 Accountability Partners

- [x] Build partner search and invite flow
- [x] Build partner dashboard showing both users' progress side-by-side
- [x] Implement daily check-in messaging between partners
- [x] Build encouragement sending (pre-made motivational messages + custom)
- [x] Show partner activity feed
- [x] Track partnership effectiveness (are both improving?)

#### 20.5.6 Commitment Contracts

- [x] Build commitment contract creation form
- [x] Implement stakes configuration (monetary or non-monetary)
- [x] Build referee designation (who verifies completion)
- [x] Implement anti-charity selection (donation to unpreferred cause on
      failure)
- [x] Show contract status with countdown timer
- [x] Track completion evidence submission
- [x] Build contract history page

#### 20.5.7 Community Challenges

- [x] Build Challenge Browser page with active and upcoming challenges
- [x] Design challenge cards: name, duration, participants, prize, progress
- [x] Build challenge join flow with commitment confirmation
- [x] Show real-time challenge progress leaderboard
- [x] Build challenge completion celebration page
- [x] Show challenge templates for starting your own challenge
- [x] Track challenge participation history
- [x] Award challenge-specific badges on completion

#### 20.5.8 Rewards Store

- [x] Build Rewards Store page where users spend earned coins/gems
- [x] Design reward cards: name, cost, category, description
- [x] Implement reward categories: Self-Care, Fun, Social, Learning, Premium
- [x] Build custom reward creation (user-defined rewards)
- [x] Show reward redemption history
- [x] Implement reward availability by level (some rewards unlock at higher
      levels)

### 20.6 Arete AI Coach Deep Integration (@arete/ai-coach)

#### 20.6.1 Conversational Coaching

- [x] Build rich AI Coach chat interface with message types (text, insight
      cards, action items)
- [x] Implement coaching session types: Goal Coaching, Habit Coaching, CBT,
      Motivation, Reflection
- [x] Show coaching session type selector at start of conversation
- [x] Implement CBT-style questioning within chat flow
- [x] Build insight cards that appear inline in conversation (highlighted boxes)
- [x] Show suggested follow-up questions as tappable chips
- [x] Build coaching session summary at end with key takeaways and action items
- [x] Implement coaching session rating (was this helpful?)
- [x] Show coaching session history with searchable transcripts

#### 20.6.2 Personalized Recommendations

- [x] Build AI Recommendations widget on Arete dashboard
- [x] Show habit recommendations with reasoning ("Based on your goals...")
- [x] Show goal suggestions based on values and vision
- [x] Show content recommendations (journal prompts, exercises, readings)
- [x] Show optimal timing recommendations ("Best time for deep work: 9am-11am")
- [x] Show challenge recommendations based on current level
- [x] Build "Why this recommendation" explainer for each suggestion
- [x] Track recommendation acceptance rate

#### 20.6.3 Pattern Recognition

- [x] Build AI Insights page showing detected patterns across all Arete data
- [x] Show habit pattern insights ("You complete habits 40% more on Mondays")
- [x] Show mood pattern insights ("Your mood improves after journaling")
- [x] Show energy pattern insights ("Energy peaks at 10am, dips at 2pm")
- [x] Show productivity pattern insights ("Deep work sessions are longest on
      Wednesdays")
- [x] Build anomaly alerts ("You missed 3 habits today — that's unusual")
- [x] Show behavior prediction insights
- [x] Build weekly AI summary email with top insights

#### 20.6.4 Smart Notifications

- [x] Implement AI-optimized notification timing based on user behavior patterns
- [x] Build personalized push notification messages
- [x] Implement gentle nudges for at-risk habits
- [x] Track notification effectiveness (open rates, action rates)
- [x] Build notification fatigue prevention (auto-reduce if too many dismissed)
- [x] Show notification preferences with per-feature granular control

### 20.7 Arete Affirmations Deep Integration (@arete/affirmations)

- [x] Build Daily Affirmation widget on Arete dashboard/home
- [x] Design affirmation card with beautiful typography and gradient background
- [x] Show category-based affirmation browsing (Confidence, Abundance, Health,
      Relationships, Career, Gratitude, Overcoming Fear, Growth)
- [x] Build affirmation favorites/bookmarks
- [x] Build custom affirmation creator with guidance tips
- [x] Implement affirmation scheduling (morning notification with daily
      affirmation)
- [x] Build affirmation practice mode: read → repeat → internalize flow
- [x] Show affirmation of the day with daily rotation from 500+ library
- [x] Build AI-generated personalized affirmations based on current goals and
      challenges
- [x] Track affirmation engagement and effectiveness over time
- [x] Build affirmation widget for home screen (optional)

---

## Phase 21: Veritas Library Deep Integration — Fact-Checking, Bias, Claims & Knowledge Graph

### 21.1 Veritas Fact-Checking Deep Integration (@veritas/fact-checking)

#### 21.1.1 Claim Verification Pipeline

- [x] Build Claim Verification Results page with comprehensive verdict display
- [x] Design verdict badge component: Verified (green), Likely True (light
      green), Inconclusive (yellow), Likely False (orange), Debunked (red)
- [x] Build confidence score display with animated gauge (0-100%)
- [x] Show confidence score breakdown: source credibility, evidence strength,
      consistency, recency
- [x] Build evidence chain timeline showing chronological evidence discovery
- [x] Show each evidence item with relevance score bar and source credibility
      badge
- [x] Implement "See both sides" toggle: supporting evidence vs contradicting
      evidence
- [x] Build external fact-check integration display (ClaimBuster results, Google
      Fact Check results)
- [x] Show Africa-specific fact-check results from GhanaFact, AfricaCheck
- [x] Build domain credibility lookup: click any source → see credibility
      profile
- [x] Implement credibility database browser with search
- [x] Show social media source warnings (lower credibility badge)
- [x] Show fact-checking organization indicators (higher credibility badge)

#### 21.1.2 AI-Powered Fact-Checking UI

- [x] Build AI Evidence Ranker results view showing AI-ranked evidence with
      explanations
- [x] Build AI Credibility Analyzer panel showing AI assessment of source
      trustworthiness
- [x] Build AI Verdict Generator results page showing AI-generated verdict with
      reasoning chain
- [x] Show AI confidence vs human reviewer agreement indicator
- [x] Show AI reasoning transparency: "Why this verdict?" expandable section
- [x] Implement human-in-the-loop verification: user can override AI verdict
      with evidence

#### 21.1.3 Claim Checkworthiness

- [x] Build "Is this worth checking?" quick assessment tool
- [x] Design checkworthiness score display (high/medium/low with color coding)
- [x] Show checkworthiness criteria breakdown
- [x] Build claim priority queue sorted by checkworthiness
- [x] Implement quick-check workflow: paste text → get instant checkworthiness
      assessment

### 21.2 Veritas Bias Detection Deep Integration (@veritas/bias-detection)

#### 21.2.1 Political Bias Analysis

- [x] Build Political Bias Analyzer page
- [x] Design bias spectrum visualization: far-left → left → center-left → center
      → center-right → right → far-right
- [x] Show article's position on bias spectrum with pointer indicator
- [x] Display bias score with confidence level
- [x] Show Ghana-specific political spectrum context (NPP, NDC, CPP, etc.)
- [x] Implement bias keyword highlighting in article text (colored underlines)
- [x] Show bias scoring breakdown by category (language, framing, source
      selection, story choice)
- [x] Build multi-source comparison: same story across different outlets with
      bias scores

#### 21.2.2 Coverage Balance Analysis

- [x] Build Coverage Balance dashboard showing media coverage distribution
- [x] Design coverage ratio charts: topic coverage by political alignment
- [x] Show balance score with grade (A-F) and improvement suggestions
- [x] Build coverage comparison view: side-by-side articles on same topic from
      different perspectives
- [x] Show temporal coverage analysis (has coverage shifted over time?)

#### 21.2.3 Blindspot Detection

- [x] Build Media Blindspot Detector page
- [x] Show underreported topics list with severity indicators (critical,
      warning, info)
- [x] Design blindspot severity visualization (heat map or grid)
- [x] Show actionable blindspot alerts ("This topic has zero coverage from
      left-leaning sources")
- [x] Build blindspot trend tracking over time
- [x] Show Ghana-specific blindspot analysis

### 21.3 Veritas Claims Deep Integration (@veritas/claims)

#### 21.3.1 Claim Extraction

- [x] Build "Paste Article" claim extraction tool
- [x] Implement text input area (paste or type article text)
- [x] Show extracted claims with inline highlighting in original text
- [x] Design claim cards with type badge (statistical, causal, comparative,
      predictive, attribution, existential)
- [x] Show claim importance score with visual indicator
- [x] Show claim checkworthiness ranking
- [x] Build claim boundary visualization (exact text span highlighted)
- [x] Implement entity extraction display: people, organizations, locations
      mentioned in claims
- [x] Show Ghana-specific context detection for claims

#### 21.3.2 Claim Management

- [x] Build Claim Tracker dashboard showing all tracked claims
- [x] Design claim lifecycle display: submitted → analyzing → evidence-gathering
      → verified/debunked
- [x] Build user claim submission form with rich text input
- [x] Implement claim categorization by domain (politics, health, economy,
      education, etc.)
- [x] Show claim grouping by topic (related claims clustered together)
- [x] Build claim filtering and sorting (by date, importance, status, domain)
- [x] Implement claim sharing with permalink

### 21.4 Veritas Knowledge Graph Deep Integration (@veritas/knowledge-graph)

#### 21.4.1 Interactive Knowledge Graph

- [x] Build full-page interactive Knowledge Graph visualization
- [x] Implement force-directed graph layout with physics simulation
- [x] Design node types: Person (circle), Organization (hexagon), Location
      (diamond), Event (square), Topic (triangle)
- [x] Color-code nodes by type with legend
- [x] Implement node sizing by importance/connection count
- [x] Show relationship edges with labeled connections (employed by, located in,
      involved in, etc.)
- [x] Implement graph navigation: click-to-center, zoom, pan, fit-to-screen
- [x] Build node detail panel: click node → see entity profile in side panel
- [x] Implement subgraph extraction: show connections within N hops of selected
      node
- [x] Show graph statistics: total entities, relationships, clusters

#### 21.4.2 Entity Profiles

- [x] Build Politician Profile page (Ghana-specific)
- [x] Show politician's party, constituency, positions held, key statements
- [x] Show politician's media coverage timeline
- [x] Show politician's fact-check history (verified vs debunked claims)
- [x] Build Organization Profile page
- [x] Show org's key people, locations, events, media mentions
- [x] Build Location Profile page (Ghana regions, cities)
- [x] Show location's key events, issues, coverage patterns
- [x] Build Event Profile page
- [x] Show event timeline, involved entities, media coverage analysis

#### 21.4.3 Temporal Knowledge Tracking

- [x] Build temporal timeline for entity relationships (how connections change
      over time)
- [x] Show entity evolution: position changes, alliance shifts, topic
      involvement over time
- [x] Build time slider to explore knowledge graph at different points in time
- [x] Show "What changed" highlights between time periods

### 21.5 Veritas Story Clustering Deep Integration (@veritas/story-clustering)

#### 21.5.1 Story Cluster Browser

- [x] Build Story Clusters page showing grouped news stories
- [x] Design cluster cards: headline, source count, timeline span, freshness
- [x] Show cluster canonical article (best representative article) prominently
- [x] Show cluster member articles list with source diversity indicator
- [x] Build cluster timeline showing story evolution over time
- [x] Implement cluster comparison: select 2 clusters → see overlap analysis
- [x] Show cluster score with quality indicators (completeness, recency,
      coverage breadth)

#### 21.5.2 Real-Time Clustering

- [x] Build Live Feed page showing stories being clustered in real-time
- [x] Show new article assignment animation (article → cluster)
- [x] Build cluster evolution tracking: show how clusters grow and merge
- [x] Implement cluster alerts: notify when cluster reaches significance
      threshold
- [x] Show trending clusters with growth rate indicator

#### 21.5.3 Multilingual Clustering

- [x] Show language diversity within clusters
- [x] Display language badges on articles (English, Twi, Ewe, Ga, Hausa, etc.)
- [x] Build cross-language article comparison view
- [x] Show code-switching detection results for articles

---

## Phase 22: Veritas Library Deep Integration — Articles, Research, Headlines, Newsletter & NLP

### 22.1 Veritas Article Generation (@veritas/article-generation)

- [x] Build Article Generation wizard for editorial workflow
- [x] Step 1 — Research: show gathered sources with credibility scores
- [x] Step 2 — Outline: show AI-generated outline with editable sections
- [x] Step 3 — Draft: show generated content with editorial voice selector
- [x] Step 4 — Verify: show fact-check results for claims in generated article
- [x] Step 5 — Refine: final editing with SEO optimization suggestions
- [x] Implement content type selector: news article, feature, analysis, opinion,
      explainer
- [x] Implement tone selector: neutral, investigative, narrative, explanatory
- [x] Implement target audience selector: general, expert, youth
- [x] Show Ghana editorial context settings
- [x] Build article preview with responsive layout
- [x] Show article generation pipeline status tracker

### 22.2 Veritas Research Assistant (@veritas/research-assistant)

- [x] Build Research Assistant page with chat-like interface
- [x] Implement quick briefing generator: enter topic → get comprehensive brief
- [x] Show historical context timeline with source references
- [x] Build Related Stories discovery panel showing connected stories
- [x] Build Background Briefing page: comprehensive topic overview for
      journalists
- [x] Show source references with credibility indicators
- [x] Build Ghana-specific briefing mode with local context
- [x] Implement research session history with searchable past queries

### 22.3 Veritas RAG Integration (@veritas/rag)

- [x] Build RAG Q&A interface with question input and cited answers
- [x] Design answer display with inline source citations (numbered references)
- [x] Show source snippets expandable below answer
- [x] Implement follow-up question suggestions
- [x] Build article archive search with semantic understanding
- [x] Show search filters: date range, source, topic, author
- [x] Build "Explore context" mode: ask questions about a specific article's
      topic
- [x] Show retrieval confidence scores per source

### 22.4 Veritas Headline Service (@veritas/headline-service)

#### 22.4.1 Headline Generation & Scoring

- [x] Build Headline Studio page for journalists
- [x] Implement headline generation: enter article summary → get 5-10 headline
      options
- [x] Show SEO score for each headline option with improvement tips
- [x] Show engagement prediction score for each headline
- [x] Show clickbait detection score with warning indicator
- [x] Design headline comparison view: select 2 headlines → see score comparison
- [x] Implement headline editing with real-time score updates
- [x] Show headline type badges: news, feature, question, how-to, list

#### 22.4.2 Headline A/B Testing

- [x] Build Headline A/B Test creation page
- [x] Design test setup: variant A vs variant B with audience split
- [x] Show real-time test results dashboard (clicks, CTR, engagement)
- [x] Show statistical significance indicator
- [x] Build test history page with past results
- [x] Show Ghana-specific headline performance insights

### 22.5 Veritas Content Classification (@veritas/content-classification)

- [x] Build Content Classification dashboard showing auto-classified articles
- [x] Show topic classification results with confidence scores
- [x] Show sensitivity analysis results (political, religious, ethnic, violent,
      explicit)
- [x] Design sensitivity level badges: low (green), medium (yellow), high
      (orange), critical (red)
- [x] Show priority scoring with editorial recommendations
- [x] Build breaking news detection alerts with Ghana-specific keyword matching
- [x] Show editorial recommendation cards based on classification results

### 22.6 Veritas Newsletter (@veritas/newsletter)

- [x] Build Newsletter Management page
- [x] Build newsletter edition composer with template selection
- [x] Design newsletter template preview with responsive layout
- [x] Implement newsletter A/B testing for subject lines
- [x] Build subscriber management page with segments
- [x] Show newsletter analytics: open rates, click rates, unsubscribes
- [x] Implement newsletter automation: trigger newsletters based on events
      (breaking news, weekly digest)
- [x] Build newsletter archive page showing past editions
- [x] Show newsletter preview before sending

### 22.7 Veritas Ghana NLP (@veritas/ghana-nlp)

- [x] Build Language Tools page with translation and TTS
- [x] Implement Twi/Ewe/Ga/Hausa translation interface using Khaya integration
- [x] Build batch translation tool for translating articles to multiple
      languages
- [x] Show code-switching detection and analysis for articles
- [x] Build language detection display showing dominant language of content
- [x] Design Ghanaian English normalization display (local terms → standard
      terms)
- [x] Show Ghanaian term glossary browser
- [x] Build TTS player for Ghanaian language content
- [x] Show STT results for voice-based content
- [x] Build NER results display for Ghana-specific entities

### 22.8 Veritas SEO (@veritas/seo)

- [x] Build SEO Dashboard for published content
- [x] Show Core Web Vitals monitoring with real-time scores
- [x] Build sitemap management page
- [x] Show structured data preview for articles (JSON-LD)
- [x] Build Web Stories creator for AMP content
- [x] Show SEO score per article with improvement suggestions
- [x] Build meta tag editor with preview

### 22.9 Veritas Agents (@veritas/agents-core)

- [x] Build AI Agent Pipeline dashboard showing all active agents
- [x] Design agent status cards: running (green), idle (gray), error (red)
- [x] Show agent health monitoring with uptime indicators
- [x] Show agent task queue with priority ordering
- [x] Show agent metrics dashboard (tasks completed, processing time, error
      rate)
- [x] Build agent configuration panel for admin users
- [x] Show agent event log with filterable message history
- [x] Build agent context window visualization showing token usage

---

## Phase 23: Nyx Library Deep Integration — Core Astronomy, Coordinates & Ephemeris

### 23.1 Nyx Coordinate System Integration (@nyx/coordinates)

- [x] Build Coordinate Converter tool page
- [x] Implement Equatorial (RA/Dec) ↔ Horizontal (Alt/Az) conversion with
      location input
- [x] Implement Equatorial ↔ Galactic (l/b) conversion
- [x] Implement Equatorial ↔ Ecliptic (lat/lon) conversion
- [x] Implement Equatorial ↔ Supergalactic conversion
- [x] Design coordinate display with HMS/DMS formatting
- [x] Build coordinate input fields with validation (RA in hours/degrees, Dec in
      degrees)
- [x] Show coordinate system diagram explaining each system
- [x] Build observer location picker (map or GPS auto-detect)
- [x] Show current local sidereal time display
- [x] Show hour angle for any given object
- [x] Implement atmospheric refraction display on altitude readings
- [x] Show aberration corrections for precise observations
- [x] Build proper motion propagation tool: enter star + epoch → get current
      position
- [x] Show parallax-to-distance converter

### 23.2 Nyx Ephemeris Deep Integration (@nyx/ephemeris)

#### 23.2.1 Planetary Ephemeris

- [x] Build Solar System Ephemeris page showing all planet positions
- [x] Design planet position table: RA, Dec, Alt, Az, magnitude, distance,
      elongation, illumination
- [x] Build planet rise/transit/set times table for observer location
- [x] Show planet visibility windows (best viewing times) for current night
- [x] Build planet position chart on sky map showing current planet locations
- [x] Implement planetary phase display (Mercury, Venus phase angle and
      illuminated fraction)
- [x] Show planet opposition/conjunction dates for outer planets
- [x] Build planet magnitude chart showing brightness changes over months

#### 23.2.2 Sun & Moon Ephemeris

- [x] Build Sun Dashboard showing sunrise/sunset, twilight times (civil,
      nautical, astronomical)
- [x] Show sun position on horizon diagram
- [x] Build Moon Dashboard showing moonrise/moonset, phase, illumination
      percentage
- [x] Show moon phase calendar for the month (emoji phase icons)
- [x] Show lunar libration and position angle
- [x] Build golden hour / blue hour calculator for photographers
- [x] Show solar/lunar altitude curves for the day (chart)

#### 23.2.3 Minor Body Ephemeris

- [x] Build Asteroid Ephemeris tool: search for asteroid → get position and
      visibility
- [x] Build Comet Ephemeris tool: search for comet → get position, magnitude,
      tail info
- [x] Show NEO close approach table with risk indicators
- [x] Implement non-gravitational force display for comet trajectories
- [x] Build minor body finder chart (sky plot showing object path)

#### 23.2.4 Visibility Planning

- [x] Build "What's Visible Tonight" planning page
- [x] Show all objects above horizon sorted by visibility quality
- [x] Show airmass chart for selected object (airmass vs time)
- [x] Show atmospheric extinction correction
- [x] Build observing session planner: select objects → get optimal viewing
      order
- [x] Show visibility calendar: best nights for specific objects this month

### 23.3 Nyx Orbital Mechanics Integration (@nyx/orbital)

#### 23.3.1 Orbital Elements Viewer

- [x] Build Orbital Elements display page for any solar system body
- [x] Show Keplerian elements: a, e, i, Ω, ω, M with labels and diagrams
- [x] Show equinoctial elements alternative representation
- [x] Show state vectors (position and velocity) in various reference frames
- [x] Implement orbital element input for custom orbit definition

#### 23.3.2 Orbit Visualization

- [x] Build 3D orbital visualization using @nyx/orbital visualization service
- [x] Show orbit path with periapsis and apoapsis markers
- [x] Implement camera controls: rotate, zoom, pan
- [x] Show planet positions on their orbits at current date
- [x] Implement time animation: play forward/backward to see orbital motion
- [x] Show orbital plane inclination and node lines
- [x] Build side-by-side orbit comparison (compare two objects' orbits)

#### 23.3.3 N-Body Simulation

- [x] Build N-Body Simulation page for educational visualization
- [x] Show Sun-Earth-Moon system with real-time integration
- [x] Implement simulation controls: speed, step size, integrator selection
- [x] Show Lagrange points for Earth-Sun system with stability indicators
- [x] Build custom N-body setup: add bodies with mass, position, velocity
- [x] Show energy conservation indicator for simulation accuracy
- [x] Implement Barnes-Hut vs direct force comparison for performance
      demonstration

#### 23.3.4 Lambert Problem Solver

- [x] Build interplanetary transfer calculator (Lambert's problem)
- [x] Implement departure/arrival planet selector
- [x] Show pork-chop plot (delta-v contours vs departure/arrival dates)
- [x] Show transfer orbit visualization
- [x] Display required delta-v and flight time

### 23.4 Nyx Events Deep Integration (@nyx/events)

#### 23.4.1 Solar Eclipses

- [x] Build Solar Eclipse page with next/past eclipse timeline
- [x] Show eclipse path on world map with center line and umbral limits
- [x] Implement observer location input for local circumstances
- [x] Show contact times (C1, C2, C3, C4) for observer location
- [x] Show eclipse magnitude and duration at observer location
- [x] Show Saros cycle information (series number, exeligmos)
- [x] Build eclipse animation: time-lapse of moon shadow moving across Earth
- [x] Show Besselian elements for precise calculations
- [x] Build eclipse photography planning tool

#### 23.4.2 Lunar Eclipses

- [x] Build Lunar Eclipse page with next/past eclipse timeline
- [x] Show eclipse type (total, partial, penumbral) with diagram
- [x] Show eclipse timing: penumbral/umbral entry/exit, mid-eclipse
- [x] Show Danjon Scale brightness estimation for total eclipses
- [x] Show eclipse visibility map (where the eclipse is visible)
- [x] Build eclipse observation form for logging personal observations

#### 23.4.3 Planetary Conjunctions

- [x] Build Conjunction Calendar page showing upcoming conjunctions
- [x] Show conjunction details: planets involved, angular separation, time,
      direction
- [x] Show sky chart for conjunction viewing
- [x] Highlight greatest elongations of Mercury and Venus
- [x] Show triple conjunction events when applicable
- [x] Build conjunction alert notifications

#### 23.4.4 Lunar Occultations

- [x] Build Lunar Occultation predictions page
- [x] Show occulted star details with magnitude
- [x] Show grazing occultation path on map
- [x] Show disappearance/reappearance times for observer
- [x] Build occultation observation logging form

#### 23.4.5 Transits

- [x] Build Transit predictions page (Mercury, Venus transits)
- [x] Show next Mercury/Venus transit dates with countdown
- [x] Build Galilean Moon event viewer (eclipses, occultations, transits of
      Jupiter's moons)
- [x] Show ISS transit predictions against Sun/Moon with path map
- [x] Build transit observation logging form

### 23.5 Nyx Constellations Deep Integration (@nyx/constellations)

#### 23.5.1 Multi-Cultural Constellation Browser

- [x] Build Constellation Browser page with culture selector
- [x] Design culture tabs: IAU (Western), Chinese, Egyptian, Polynesian, Norse,
      Indigenous American
- [x] Show constellation cards: name, culture, star count, best viewing season,
      mythology snippet
- [x] Build constellation detail page with star map diagram
- [x] Show constellation boundaries on sky map
- [x] Show constellation artwork overlays (cultural artistic renderings)

#### 23.5.2 IAU Constellations (88)

- [x] Show all 88 IAU constellations with official boundaries
- [x] Show constellation stick figures connecting main stars
- [x] Show brightest stars within each constellation with names
- [x] Show deep-sky objects within each constellation
- [x] Build constellation search by name or abbreviation
- [x] Show seasonal visibility: which constellations visible per month

#### 23.5.3 Chinese Constellations

- [x] Build Chinese Star Map page showing Three Enclosures
- [x] Show 28 Lunar Mansions with Chinese names and descriptions
- [x] Display mansion info with associated element and animal
- [x] Show cultural significance and traditional Chinese astronomy context
- [x] Build interactive Chinese constellation overlay on sky map

#### 23.5.4 Egyptian Constellations

- [x] Build Egyptian Star Map page showing Decan system
- [x] Show circumpolar and southern Egyptian constellations
- [x] Display cultural context of Egyptian astronomy
- [x] Show Decan rising times and calendar significance

#### 23.5.5 Polynesian Constellations

- [x] Build Polynesian Navigation Star Map page
- [x] Show Hawaiian, Tahitian, and Maori constellation traditions
- [x] Display navigation constellations used for oceanic wayfinding
- [x] Show zenith stars for Pacific island navigation
- [x] Show star compass directions

#### 23.5.6 Norse Constellations

- [x] Build Norse Star Map page showing Germanic/Viking sky traditions
- [x] Show Norse constellation names and mythology
- [x] Display connections to Norse mythology (Yggdrasil, Bifrost, etc.)

#### 23.5.7 Indigenous American Constellations

- [x] Build Indigenous American Star Map page
- [x] Show Lakota, Navajo, Pawnee, Inca, and Ojibwe traditions
- [x] Display dark constellations (shapes in the dark Milky Way)
- [x] Show cultural significance and seasonal celebrations
- [x] Build "Sky Stories" section with constellation mythology narratives

#### 23.5.8 Constellation of the Night

- [x] Build "Tonight's Constellations" widget showing currently visible
      constellations
- [x] Show constellation finder based on observer location and time
- [x] Build "Constellation challenge" checklist for amateur astronomers

---

## Phase 24: Nyx Library Deep Integration — Catalogs & Real-Time Monitoring

### 24.1 Star Catalogs Integration

#### 24.1.1 Bright Star Catalogue (BSC / Yale)

- [x] Build Bright Star browser page with 9,110 entries
- [x] Implement star search by common name (Sirius, Vega, Arcturus, etc.)
- [x] Implement star search by Bayer designation (α Ori, β Per, etc.)
- [x] Build spectral type filter with color-coded results
- [x] Show star detail page: name, constellation, magnitude, spectral type,
      distance, RA/Dec
- [x] Show spectral analysis: temperature, color, estimated mass from spectral
      type
- [x] Implement cone search: show all bright stars within N degrees of given
      position
- [x] Build magnitude filter slider (limit by apparent magnitude)
- [x] Show constellation membership for each star

#### 24.1.2 Hipparcos Catalog

- [x] Build Hipparcos Star browser with 118,218 entries
- [x] Implement HIP number search
- [x] Show precise astrometry: position, parallax, proper motion
- [x] Show variable star search and display with variability type
- [x] Show multiple star system indicators
- [x] Build nearest stars list using parallax data
- [x] Show Gaia DR3 cross-match results where available

#### 24.1.3 Gaia DR3

- [x] Build Gaia Data Explorer for deep sky surveys
- [x] Implement HEALPix-based sky region browsing
- [x] Show Gaia source count by sky region (heat map)
- [x] Build advanced query interface for Gaia TAP service
- [x] Show Gaia photometry (G, BP, RP bands) for searched objects
- [x] Show proper motion vectors on sky map
- [x] Show parallax-derived distance estimates with error bars
- [x] Build color-magnitude diagram from Gaia data for selected region

#### 24.1.4 SIMBAD Integration

- [x] Build Object Name Resolver: type any astronomical name → get coordinates
      and info
- [x] Implement SIMBAD object search by identifier, coordinates, or type
- [x] Show comprehensive object profile from SIMBAD database
- [x] Show cross-identifications (same object in different catalogs)
- [x] Show bibliography references for each object
- [x] Build object type browser with hierarchical classification

### 24.2 Deep-Sky Object Catalogs

#### 24.2.1 Messier Catalog (110 objects)

- [x] Build Messier Catalog browser with all 110 objects
- [x] Design Messier object cards: number, name, type, constellation, magnitude,
      size
- [x] Show Messier object images (thumbnails + full resolution)
- [x] Build Messier Marathon planner (observe all 110 in one night)
- [x] Implement Messier observation checklist with completion percentage
- [x] Show Messier object finder charts (sky plots showing location)
- [x] Build "Messier of the Month" featured object widget

#### 24.2.2 NGC/IC Catalog

- [x] Build NGC/IC catalog browser with search and filter
- [x] Show object type icons: galaxy (spiral), nebula (cloud), cluster (dots),
      etc.
- [x] Implement catalog search by NGC/IC number
- [x] Show cross-references to Messier numbers where applicable
- [x] Build historical observation notes display

#### 24.2.3 Specialized Deep-Sky Browsers

- [x] Build Nebulae browser page with type filters (emission, planetary, dark,
      reflection)
- [x] Build Star Cluster browser with type filters (open, globular)
- [x] Build Galaxy browser with morphological type filters (spiral, elliptical,
      irregular, etc.)
- [x] Build Quasar browser showing highest-redshift objects
- [x] Build Black Hole catalog page showing known stellar and supermassive black
      holes
- [x] Build Neutron Star / Pulsar catalog page with period and timing data
- [x] Build Supernova Remnant catalog page with age and remnant properties
- [x] Build Gravitational Wave source catalog (LIGO/Virgo detections)

#### 24.2.4 SDSS (Sloan Digital Sky Survey)

- [x] Build SDSS Data Explorer page
- [x] Show 5-band photometry (ugriz) for objects
- [x] Show spectroscopic data with redshift
- [x] Show galaxy morphological classification
- [x] Build SDSS color-color diagram tool

#### 24.2.5 NED (NASA Extragalactic Database)

- [x] Build extragalactic object browser using NED data
- [x] Show galaxy and AGN profiles with spectroscopy
- [x] Show redshift-distance relationship display
- [x] Build large-scale structure visualization from NED data

### 24.3 Solar System Catalogs

#### 24.3.1 Planet Browser

- [x] Build comprehensive Planet Browser page for all 8 major planets
- [x] Design planet cards: image, name, type, distance, size comparison
- [x] Build planet detail page: physical properties, orbital parameters,
      atmosphere composition
- [x] Show ring system details for Saturn, Jupiter, Uranus, Neptune
- [x] Show planet comparison tool: select 2+ planets → compare properties
      side-by-side
- [x] Build dwarf planet section (Pluto, Ceres, Eris, Makemake, Haumea)

#### 24.3.2 Moon Browser

- [x] Build comprehensive Moon Browser for all known moons
- [x] Show moon cards grouped by parent planet
- [x] Build moon detail page: orbital parameters, physical properties, discovery
      info
- [x] Highlight notable moons: Io, Europa, Ganymede, Callisto, Titan, Enceladus,
      Triton
- [x] Show moon size comparison visualization
- [x] Build Galilean moon event viewer (eclipses, transits, occultations by
      Jupiter)

#### 24.3.3 Comet Browser

- [x] Build Comet Browser showing periodic and notable comets
- [x] Show comet orbital elements and next perihelion date
- [x] Show comet physical properties (coma size, tail length)
- [x] Show comet visibility predictions for upcoming apparitions
- [x] Build comet finder chart for currently visible comets
- [x] Show famous comets section (Halley, Hale-Bopp, NEOWISE, etc.)

#### 24.3.4 Asteroid & NEO Browser

- [x] Build Asteroid Browser with search and filter
- [x] Show asteroid orbital classification (NEA, MBA, Trojan, etc.)
- [x] Build NEO Close Approach table sorted by date
- [x] Show Potentially Hazardous Asteroid (PHA) list with threat indicators
- [x] Show Torino Scale rating for known impact risks
- [x] Build Sentry impact monitoring display
- [x] Show NEO orbit visualization with Earth's orbit for context

#### 24.3.5 Spacecraft Tracker

- [x] Build Active Spacecraft page showing current missions
- [x] Show spacecraft position relative to Earth/target body
- [x] Show ISS orbital elements and current position on map
- [x] Build space probe tracker for deep space missions
- [x] Show mission timeline for each spacecraft

### 24.4 Real-Time Solar Activity (@nyx/realtime-solar)

- [x] Build comprehensive Solar Activity Dashboard
- [x] Show Kp index gauge with geomagnetic storm level indicator (G1-G5)
- [x] Show Ap index daily value with trend chart
- [x] Show Dst index for ring current monitoring
- [x] Show F10.7 solar radio flux indicator
- [x] Show sunspot number with 11-year cycle chart
- [x] Build Solar Flare log showing recent flares with class (A, B, C, M, X)
- [x] Build CME (Coronal Mass Ejection) tracker showing Earth-directed CMEs
- [x] Show SOHO/SDO solar imagery (latest images)
- [x] Build Aurora Forecast page with KP-based visibility zones
- [x] Show aurora visibility map highlighting viewing locations
- [x] Show aurora hotspot locations with probability percentages
- [x] Build aurora alert notifications for observable events
- [x] Show recommended aurora viewing locations based on observer position
- [x] Build geomagnetic storm timeline showing past and predicted storms
- [x] Implement auto-refresh with configurable interval for all solar data

### 24.5 Real-Time NEO Monitoring (@nyx/realtime-neo)

- [x] Build NEO Monitoring Dashboard with NASA data
- [x] Show today's close approaches table sorted by miss distance
- [x] Show close approach radar: concentric circles showing distance thresholds
- [x] Implement size-based filtering (show only objects > N meters)
- [x] Show distance threshold alerts with color coding
- [x] Build risk assessment panel showing Sentry results
- [x] Show NEO discovery rate chart over time
- [x] Build NEO orbit visualization showing trajectory relative to Earth
- [x] Implement real-time alert system for new close approaches
- [x] Show PHA watchlist with monitoring status

### 24.6 Satellite Tracking (@nyx/realtime/satellites)

- [x] Build Satellite Tracker page with real-time position map
- [x] Show ISS current position on world map with ground track
- [x] Build satellite pass predictions for observer location
- [x] Show pass details: time, direction, maximum altitude, magnitude
- [x] Build satellite search by name or NORAD catalog number
- [x] Show satellite visibility calendar for the week
- [x] Implement pass alert notifications for bright satellites

---

## Phase 25: Nyx Library Deep Integration — Renderer, Education, Telescope, Sonification & Widgets

### 25.1 Nyx Renderer Deep Integration (@nyx/renderer)

#### 25.1.1 Core Rendering Engine

- [x] Implement WebGPU-primary / WebGL-fallback rendering for sky map
- [x] Build shader pipeline for star, planet, nebula, galaxy rendering
- [x] Implement scene graph management for rendering layers
- [x] Build render performance dashboard (FPS counter, draw calls, GPU memory)
- [x] Implement level-of-detail (LOD) system for smooth zoom transitions

#### 25.1.2 Star Rendering

- [x] Render stars with proper apparent magnitude brightness scaling
- [x] Implement spectral type coloring (O=blue, B=blue-white, A=white,
      F=yellow-white, G=yellow, K=orange, M=red)
- [x] Implement magnitude limiting slider (show stars down to magnitude N)
- [x] Show star names for brightest stars (Sirius, Vega, etc.)
- [x] Implement star twinkle animation for atmospheric effect
- [x] Show proper motion trails option (very fast-moving stars)

#### 25.1.3 Planet Rendering

- [x] Render planets with proper size and brightness at current positions
- [x] Show planet labels with name and current magnitude
- [x] Implement planet surface textures for detailed planet views
- [x] Show planetary atmospheres in close-up view
- [x] Render Saturn's rings at correct orientation

#### 25.1.4 Deep-Sky Object Rendering

- [x] Render nebulae with gas cloud simulation and dust extinction
- [x] Render galaxies with morphological type appearance (spiral arms,
      elliptical glow)
- [x] Render star clusters with spatial distribution
- [x] Render exotic objects (black hole lensing effect, neutron star beams,
      quasar jets)

#### 25.1.5 Post-Processing Effects

- [x] Implement HDR tone mapping for realistic brightness range
- [x] Implement bloom effect for bright stars and objects
- [x] Implement color grading for different sky conditions
- [x] Build exposure control slider for light/dark adaptation

#### 25.1.6 Background Rendering

- [x] Render procedural background stars for dense Milky Way
- [x] Show Milky Way band across sky map
- [x] Implement zodiacal light near ecliptic
- [x] Show gegenschein at anti-solar point

#### 25.1.7 Cosmic Scale System

- [x] Implement seamless zoom from Earth surface → Solar System → Galaxy →
      Universe
- [x] Build scale indicator showing current field of view
- [x] Implement adaptive rendering at different zoom levels
- [x] Show distance labels changing with zoom level (km → AU → ly → Mpc)

### 25.2 Nyx Time Travel Integration (@nyx/time-travel)

- [x] Build Time Travel interface with date/time picker
- [x] Implement sky view at any date from 4000 BCE to 4000 CE
- [x] Show historical sky events (famous conjunctions, eclipses, comets)
- [x] Build "What did the sky look like when..." feature
- [x] Show precession effects on pole star and constellation positions
- [x] Implement smooth time animation (play forward/backward at adjustable
      speed)
- [x] Show retrograde motion loops for planets
- [x] Build historical event database: key astronomical events in history

### 25.3 Nyx Education Deep Integration (@nyx/education)

#### 25.3.1 Lesson Framework

- [x] Build Astronomy Learning Center page
- [x] Design course catalog with categories (Beginner, Intermediate, Advanced)
- [x] Implement lesson viewer with mixed content: text, images, video,
      interactive elements
- [x] Build progress tracking per lesson and course
- [x] Show completion badges earned for course completion
- [x] Build adaptive difficulty: adjust lesson complexity based on quiz
      performance
- [x] Implement lesson builder for creating custom educational content

#### 25.3.2 Interactive Lessons

- [x] Build "Introduction to the Night Sky" lesson series
- [x] Build "Understanding Coordinates" interactive lesson with coordinate
      exercises
- [x] Build "The Solar System Tour" lesson with planetary data exploration
- [x] Build "Star Types and Evolution" lesson with HR diagram interaction
- [x] Build "Galaxies and Cosmology" lesson series
- [x] Build "Observing Techniques" practical guide

#### 25.3.3 Quiz System

- [x] Build Quiz interface with multiple question types
- [x] Implement multiple-choice questions with instant feedback
- [x] Implement matching questions (match star to constellation)
- [x] Implement ordering questions (order planets by distance)
- [x] Implement fill-in-the-blank questions
- [x] Build quiz results page with score, correct answers, and explanations
- [x] Build quiz history showing improvement over time
- [x] Implement constellation identification quiz: show sky region → name the
      constellation
- [x] Implement magnitude estimation quiz: show star field → estimate magnitudes
- [x] Implement object identification quiz: show image → identify the object

#### 25.3.4 Achievement System

- [x] Build education achievement gallery
- [x] Design achievement badges by category (observation, knowledge, skill)
- [x] Implement rarity levels (common, uncommon, rare, legendary)
- [x] Show achievement unlock animations
- [x] Build achievement progress tracking with milestones

### 25.4 Nyx Telescope Integration (@nyx/integrations/telescope)

- [x] Build Telescope Control Panel page
- [x] Implement ASCOM Alpaca device discovery and connection
- [x] Implement INDI protocol connection via WebSocket
- [x] Build unified telescope control interface: GoTo coordinates, Sync,
      Park/Unpark
- [x] Show telescope state monitor: tracking mode, pointing coordinates,
      connection status
- [x] Implement "Go To This Object" button on every object detail page
- [x] Build "Slew to coordinates" form with RA/Dec input
- [x] Implement tracking control: sidereal, lunar, solar tracking rates
- [x] Build pulse guiding control for autoguiding
- [x] Show telescope equipment profile (mount type, aperture, focal length)
- [x] Build equipment management page for adding/removing telescopes
- [x] Build observation planner integration: select observing list → telescope
      auto-slews

### 25.5 Nyx Sonification Deep Integration (@nyx/audio/sonification)

- [x] Build Data Sonification page for astronomical audio experiences
- [x] Implement magnitude-to-pitch mapping: bright stars → low pitch, dim stars
      → high pitch
- [x] Implement spectral type-to-timbre mapping: hot stars → bright timbre, cool
      stars → warm timbre
- [x] Implement distance-to-reverb mapping: close stars → dry, distant stars →
      reverberant
- [x] Build variable star sonification: Cepheid pulsation → rhythmic pattern
- [x] Build RR Lyrae star sonification with rapid oscillation sound
- [x] Build Mira variable sonification with slow period sound
- [x] Build eclipsing binary sonification with periodic dip pattern
- [x] Implement "Listen to the sky" mode: pan across sky map and hear stars
- [x] Build constellation sonification: play a constellation as a chord
- [x] Build sonification controls: volume, playback speed, mapping adjustments
- [x] Build sonification accessibility mode for visually impaired users

### 25.6 Nyx Widgets Integration

#### 25.6.1 ISS Tracker Widget

- [x] Build ISS Tracker widget for Nyx dashboard
- [x] Show ISS current position on mini world map
- [x] Show next visible pass for observer location
- [x] Show pass countdown timer
- [x] Implement pass alert notification

#### 25.6.2 Moon Phase Widget

- [x] Build Moon Phase widget for Nyx dashboard and home page
- [x] Show current moon phase with realistic illumination rendering
- [x] Show phase name (new, waxing crescent, first quarter, waxing gibbous,
      full, etc.)
- [x] Show illumination percentage
- [x] Show next major phase date (next full moon, next new moon)
- [x] Build mini lunar calendar for the month

#### 25.6.3 Star Map Widget

- [x] Build Mini Star Map widget for Nyx dashboard
- [x] Show current sky with major constellations for observer location
- [x] Implement compass orientation (tap to rotate to north)
- [x] Show planet positions on mini map
- [x] Implement tap-to-expand to full sky map

### 25.7 Nyx Analysis Tools

#### 25.7.1 Galaxy Classification

- [x] Build Galaxy Classification tool using Hubble sequence
- [x] Show galaxy morphological types: Elliptical (E0-E7), Spiral (Sa-Sc),
      Barred Spiral (SBa-SBc), Irregular
- [x] Build galaxy image viewer with classification overlay
- [x] Implement citizen science galaxy classification exercise

#### 25.7.2 Exoplanet Habitability

- [x] Build Exoplanet Habitability Calculator
- [x] Show habitable zone boundaries for any star
- [x] Calculate habitability score for known exoplanets
- [x] Show Earth Similarity Index (ESI) for exoplanets
- [x] Build habitable exoplanet catalog sorted by habitability score
- [x] Show habitable zone visualization (distance from star vs temperature)

### 25.8 Nyx Observation Log Deep Integration

- [x] Build comprehensive Observation Log with structured entry form
- [x] Entry fields: date/time, object, equipment, conditions, seeing,
      transparency, notes, sketch upload
- [x] Implement auto-populate: select object → fill coordinates, constellation,
      magnitude
- [x] Build observation history page with search, filter, and sort
- [x] Show observation statistics: total observations, unique objects, nights
      out
- [x] Build observation map showing where you've observed from
- [x] Build observation calendar showing active observing nights
- [x] Implement equipment logging per observation
- [x] Build observation session groups (multiple observations in one night)
- [x] Export observation log as CSV/PDF

### 25.9 Nyx Sky Conditions Deep Integration

- [x] Build comprehensive Sky Conditions page
- [x] Show weather forecast for observer location with cloud cover chart
- [x] Show seeing forecast (atmospheric turbulence prediction)
- [x] Show transparency forecast
- [x] Show light pollution level (Bortle scale) for observer location
- [x] Show moon phase and moonrise/moonset for impact on observing
- [x] Build "Observing Score" metric combining all conditions (0-100)
- [x] Show 7-day sky conditions forecast
- [x] Build location comparison: compare observing conditions at multiple sites
- [x] Show dark sky site finder on map with Bortle ratings

---

## Phase 26: Library Integration Unit Tests

### 26.1 Tara Integration Tests

- [x] Test: Tara analytics events fire correctly for all 41 event types
- [x] Test: experiment manager assigns consistent variants per user
- [x] Test: content client fetches meditations with proper pagination
- [x] Test: content client fetches courses with progress data
- [x] Test: content client fetches teachers with specialty filters
- [x] Test: content client fetches collections and programs
- [x] Test: meditation filter functions filter by type, category, difficulty,
      duration, teacher
- [x] Test: course filter functions filter by format, category, difficulty,
      teacher
- [x] Test: search engine indexes content and returns ranked results
- [x] Test: search engine provides spelling suggestions
- [x] Test: SWR cache serves stale data while revalidating
- [x] Test: content cache invalidation works correctly
- [x] Test: sound mixer manages multiple audio layers with independent volumes
- [x] Test: binaural beat player generates correct frequency differential
- [x] Test: session player state machine transitions correctly (idle → playing →
      paused → completed)
- [x] Test: breathwork timer cycles through correct phase durations (inhale →
      hold → exhale → hold)
- [x] Test: TaraThemeProvider applies correct theme tokens
- [x] Test: all Tara React hooks return expected data shapes
- [x] Test: error tracker captures and categorizes Tara errors
- [x] Test: performance monitor measures operation durations accurately

### 26.2 Arete Habits Integration Tests

- [x] Test: createHabit creates habit with cue-routine-reward loop
- [x] Test: habit stacking creates correct execution order
- [x] Test: habit stack validation rejects circular dependencies
- [x] Test: streak system increments on completion, resets on miss
- [x] Test: streak freeze prevents streak break (max 2 per month)
- [x] Test: identity-based habit linking works bidirectionally
- [x] Test: keystone habit cascade effects calculate correctly
- [x] Test: habit analytics calculates completion rate accurately
- [x] Test: habit pattern detection identifies day-of-week patterns
- [x] Test: habit reminders schedule at correct times
- [x] Test: Four Laws scoring evaluates each law independently

### 26.3 Arete Goals Integration Tests

- [x] Test: goal hierarchy propagates progress correctly from child to parent
- [x] Test: SMART validation scores each criterion independently
- [x] Test: SMART wizard generates improvement feedback
- [x] Test: OKR key result scoring calculates 0.0-1.0 scale correctly
- [x] Test: OKR quarterly progress aggregates key results
- [x] Test: WOOP framework stores all 4 elements correctly
- [x] Test: 12-Week Year creates 12 weekly plans
- [x] Test: 12-Week Year scoring calculates weekly scores
- [x] Test: goal progress prediction estimates completion date
- [x] Test: stalled goal detection identifies goals with no progress

### 26.4 Arete Journal Integration Tests

- [x] Test: Morning Pages tracks word count progress toward 750
- [x] Test: Five-Minute Journal morning template has 3 sections
- [x] Test: Five-Minute Journal evening template has 2 sections
- [x] Test: gratitude entry creates entry with multiple items
- [x] Test: gratitude word cloud generates frequency data
- [x] Test: CBT thought record stores all 7 fields correctly
- [x] Test: worry journal tracks resolution outcomes
- [x] Test: prompted journaling returns prompts by category
- [x] Test: reflection workflow templates generate correct structure
- [x] Test: journal sentiment analysis returns valid sentiment scores
- [x] Test: journal topic extraction returns relevant topics

### 26.5 Arete Time, Balance, Vision, Seven Habits Tests

- [x] Test: Eisenhower Matrix categorizes tasks into correct quadrants
- [x] Test: GTD inbox processing follows correct decision tree
- [x] Test: Pomodoro timer cycles work → break → work correctly
- [x] Test: Deep Work session records duration and distraction count
- [x] Test: time auditing calculates category percentages
- [x] Test: Wheel of Life scores 8 dimensions on 1-10 scale
- [x] Test: PERMA model assesses 5 elements independently
- [x] Test: mood tracking correlates with activities
- [x] Test: sleep tracking calculates quality score
- [x] Test: energy tracking identifies daily patterns
- [x] Test: Ikigai framework calculates intersection of 4 circles
- [x] Test: Golden Circle validates WHY-HOW-WHAT alignment
- [x] Test: Circle of Influence categorizes items by control level
- [x] Test: Emotional Bank Account tracks deposits and withdrawals
- [x] Test: Values Clarification detects conflicts between values

### 26.6 Arete Gamification & AI Coach Tests

- [x] Test: points system awards XP correctly per activity type
- [x] Test: multiplier bonus applies during streaks
- [x] Test: badge unlock conditions evaluate correctly for all 50+ badges
- [x] Test: level progression calculates XP thresholds for 20 levels
- [x] Test: leaderboard ranking sorts by XP correctly
- [x] Test: accountability partner check-in creates records
- [x] Test: commitment contract validates stakes and referee
- [x] Test: community challenge join flow works correctly
- [x] Test: rewards store deducts currency on redemption
- [x] Test: AI coach generates contextual responses based on user data
- [x] Test: personalized recommendations score and rank suggestions
- [x] Test: pattern recognition detects habit completion patterns
- [x] Test: smart notification timing optimizes for open rates
- [x] Test: affirmation categories contain valid affirmations
- [x] Test: AI-generated affirmations are personalized to user goals

### 26.7 Veritas Integration Tests

- [x] Test: fact-checking pipeline scores evidence relevance correctly
- [x] Test: domain credibility database returns known scores
- [x] Test: ClaimBuster client sends and receives checkworthiness scores
- [x] Test: AI verdict generator provides reasoning chain
- [x] Test: political bias scoring maps to correct bias band
- [x] Test: coverage balance analysis detects imbalances
- [x] Test: blindspot detection identifies underreported topics
- [x] Test: claim extraction identifies claims in article text
- [x] Test: claim categorization assigns correct domain
- [x] Test: knowledge graph entity extraction finds persons, orgs, locations
- [x] Test: relationship extraction links entities correctly
- [x] Test: story clustering groups similar articles together
- [x] Test: canonical article selection picks best representative
- [x] Test: timeline construction orders events chronologically
- [x] Test: article generation pipeline produces structured output
- [x] Test: headline scoring evaluates SEO and engagement independently
- [x] Test: clickbait detection identifies sensational headlines
- [x] Test: content classification assigns topics with confidence scores
- [x] Test: sensitivity classification detects politically sensitive content
- [x] Test: newsletter manager creates and sends newsletters
- [x] Test: Ghana NLP translation produces valid output
- [x] Test: code-switching detection identifies language mixing
- [x] Test: RAG pipeline retrieves relevant context for queries
- [x] Test: research assistant generates briefings with sources

### 26.8 Nyx Integration Tests

- [x] Test: coordinate transformation Equatorial ↔ Horizontal is consistent
- [x] Test: coordinate transformation Equatorial ↔ Galactic is consistent
- [x] Test: coordinate transformation Equatorial ↔ Ecliptic is consistent
- [x] Test: proper motion propagation calculates positions at future epochs
- [x] Test: atmospheric refraction correction applies correctly at low altitudes
- [x] Test: ephemeris service calculates Sun position within 1 arcmin
- [x] Test: ephemeris service calculates Moon position within 5 arcmin
- [x] Test: planetary ephemeris generates valid RA/Dec for all 8 planets
- [x] Test: visibility service calculates airmass correctly
- [x] Test: minor body ephemeris generates valid asteroid positions
- [x] Test: Kepler solver converges for eccentricities 0 to 0.99
- [x] Test: Lambert solver finds transfer orbit between Earth and Mars
- [x] Test: N-body simulation conserves energy over 1000 steps
- [x] Test: Lagrange point L1-L5 positions are calculated correctly
- [x] Test: solar eclipse finder predicts known eclipses
- [x] Test: lunar eclipse finder predicts known eclipses
- [x] Test: conjunction finder detects known planetary conjunctions
- [x] Test: constellation database contains all 88 IAU constellations
- [x] Test: constellation database contains Chinese, Egyptian, Polynesian,
      Norse, Indigenous entries
- [x] Test: BSC catalog query service returns valid star data
- [x] Test: Hipparcos catalog query service returns valid astrometry
- [x] Test: SIMBAD name resolver resolves "M31" to Andromeda Galaxy
- [x] Test: Messier catalog contains all 110 objects
- [x] Test: NOAA solar data client fetches Kp index
- [x] Test: NEO monitoring service fetches close approaches from NASA
- [x] Test: sonification mapping converts magnitude to valid frequency range
- [x] Test: lesson framework creates lessons with progress tracking
- [x] Test: quiz system evaluates answers correctly
- [x] Test: telescope controller sends valid ASCOM Alpaca commands

---

## Phase 27: Library Integration E2E & Claude-in-Chrome Verification

### 27.1 Tara Integration E2E Verification

- [x] CiC: Navigate to Tara → verify all 12 meditation types visible in type
      filter
- [x] CiC: Apply category filter → verify 29 categories available
- [x] CiC: Open teacher profile → verify bio, specialties, credentials, stats
      displayed
- [x] CiC: Browse collections → verify collection cards show cover image and
      item count
- [x] CiC: Start a program → verify daily content (quote, intention, activity)
      displays
- [x] CiC: Open Sound Library → verify ambient sounds, music, bells, binaural
      beats tabs
- [x] CiC: Open Sound Mixer → mix 3 ambient sounds → verify independent volume
      controls
- [x] CiC: Search for meditation → verify spelling suggestions and highlighted
      results
- [x] CiC: Screenshot Tara Analytics Dashboard → verify charts render with data
- [x] CiC: Open course detail → verify lesson types with correct icons
- [x] CiC: Start course → complete lesson → verify progress updates
- [x] CiC: Screenshot breathwork timer with binaural beats playing

### 27.2 Arete Integration E2E Verification

- [x] CiC: Create habit with full loop (Cue → Routine → Reward) → verify loop
      diagram
- [x] CiC: Build habit stack with 3 habits → verify chain visualization
- [x] CiC: Check habit → verify streak increment and celebration animation
- [x] CiC: Screenshot habit analytics page with charts
- [x] CiC: Create SMART goal → verify 5-criterion score ring
- [x] CiC: Create OKR → add key results → verify scoring interface
- [x] CiC: Create WOOP goal → verify 4-element summary card
- [x] CiC: Start 12-Week Year → verify timeline and weekly scoring
- [x] CiC: Create Morning Pages entry → verify word count progress to 750
- [x] CiC: Create Five-Minute Journal → verify morning/evening template
- [x] CiC: Create CBT Thought Record → verify all 7 fields
- [x] CiC: Open Gratitude Journal → verify word cloud renders
- [x] CiC: Open Eisenhower Matrix → drag task between quadrants
- [x] CiC: Start Pomodoro timer → verify 25-min countdown and break cycle
- [x] CiC: Open GTD Inbox → capture item → process with decision tree
- [x] CiC: Open Deep Work mode → verify distraction-free UI
- [x] CiC: Complete Wheel of Life assessment → verify radar chart renders
- [x] CiC: Complete PERMA assessment → verify 5-bar visualization
- [x] CiC: Open Ikigai workshop → fill 4 circles → verify Venn diagram
- [x] CiC: Open Circle of Influence → drag items between circles
- [x] CiC: Open Emotional Bank Account → add deposit → verify balance
- [x] CiC: Screenshot gamification gallery with badges and level
- [x] CiC: Open Achievement Gallery → verify 50+ badges with progress
- [x] CiC: Open AI Coach → send message → verify response with insight cards
- [x] CiC: View Daily Affirmation widget → verify beautiful card design
- [x] CiC: Open Rewards Store → verify reward cards with currency display
- [x] CiC: Open Vision Board → add items → verify masonry layout
- [x] CiC: Screenshot at 375px → verify all Arete features mobile-responsive

### 27.3 Veritas Integration E2E Verification

- [x] CiC: Paste article text → verify claim extraction with highlighting
- [x] CiC: Open claim detail → verify evidence chain timeline renders
- [x] CiC: Open Political Bias Analyzer → verify bias spectrum visualization
- [x] CiC: Open Coverage Balance dashboard → verify ratio charts
- [x] CiC: Open Blindspot Detector → verify underreported topics list
- [x] CiC: Open Knowledge Graph → verify interactive force-directed graph
- [x] CiC: Click graph node → verify entity profile panel opens
- [x] CiC: Open Politician Profile → verify party, credentials, fact-check
      history
- [x] CiC: Open Story Clusters → verify cluster cards with timelines
- [x] CiC: Open Article Generator → step through 5-step wizard
- [x] CiC: Open Headline Studio → verify SEO and engagement scores
- [x] CiC: Create A/B test for headline → verify test setup
- [x] CiC: Open Research Assistant → generate briefing → verify source citations
- [x] CiC: Open RAG Q&A → ask question → verify cited answer
- [x] CiC: Open Newsletter Manager → preview newsletter template
- [x] CiC: Open Ghana NLP tools → verify translation interface
- [x] CiC: Open Content Classification → verify topic and sensitivity badges
- [x] CiC: Open Agent Dashboard → verify agent status cards
- [x] CiC: Screenshot at 375px → verify all Veritas features mobile-responsive

### 27.4 Nyx Integration E2E Verification

- [x] CiC: Open Coordinate Converter → convert RA/Dec to Alt/Az → verify output
- [x] CiC: Open Ephemeris page → verify planet position table
- [x] CiC: Open Sun Dashboard → verify sunrise/sunset and twilight times
- [x] CiC: Open Moon Dashboard → verify phase and illumination
- [x] CiC: Open "What's Visible Tonight" → verify object list
- [x] CiC: Open Orbital Visualization → verify 3D orbit renders
- [x] CiC: Open N-Body Simulation → verify animation plays
- [x] CiC: Open Solar Eclipse page → verify path map
- [x] CiC: Open Conjunction Calendar → verify upcoming events
- [x] CiC: Open Constellation Browser → switch between 6 cultures → verify
      different constellations
- [x] CiC: Open Chinese Star Map → verify Three Enclosures and 28 Mansions
- [x] CiC: Open Indigenous American constellations → verify dark constellations
- [x] CiC: Open Messier Catalog → verify all 110 objects with images
- [x] CiC: Open NGC/IC browser → search by number → verify results
- [x] CiC: Open Bright Star browser → search "Sirius" → verify star details
- [x] CiC: Open Gaia Explorer → run cone search → verify results
- [x] CiC: Open SIMBAD resolver → type "M31" → verify Andromeda Galaxy
- [x] CiC: Open Planet Browser → compare Earth and Mars side-by-side
- [x] CiC: Open Moon Browser → verify Galilean moons section
- [x] CiC: Open Comet Browser → verify visibility predictions
- [x] CiC: Open NEO Dashboard → verify close approach table
- [x] CiC: Open Solar Activity Dashboard → verify Kp gauge, sunspot chart, flare
      log
- [x] CiC: Open Aurora Forecast → verify visibility map
- [x] CiC: Open Satellite Tracker → verify ISS position on map
- [x] CiC: Open Sky Map → toggle constellation overlay → verify cultural options
- [x] CiC: Zoom in on sky map → verify stars render with spectral colors
- [x] CiC: Open Time Travel → set date to 1969-07-20 → verify historical sky
- [x] CiC: Open Education Center → start lesson → complete quiz → verify score
- [x] CiC: Open Telescope Control → verify connection interface
- [x] CiC: Open Sonification → listen to constellation → verify audio plays
- [x] CiC: Open Galaxy Classification → verify Hubble sequence display
- [x] CiC: Open Exoplanet Habitability → verify habitable zone visualization
- [x] CiC: Open Observation Log → create entry → verify in history
- [x] CiC: Open Sky Conditions → verify weather, seeing, Bortle scale
- [x] CiC: Open Moon Phase widget → verify illumination rendering
- [x] CiC: Screenshot at 375px → verify all Nyx features mobile-responsive

---

## Updated Summary Statistics

| Phase     | Category                                                                          | Task Count |
| --------- | --------------------------------------------------------------------------------- | ---------- |
| 1         | Animation & Micro-Interaction Foundation                                          | 52         |
| 2         | Design System Component Visual Polish                                             | 128        |
| 3         | Shell, Navigation & Layout Polish                                                 | 98         |
| 4         | Page-Level Visual Polish                                                          | 119        |
| 5         | Domain Surface Visual Polish                                                      | 163        |
| 6         | Cross-Domain, Routines, Achievements, Assistant Polish                            | 66         |
| 7         | Design System Unit Tests                                                          | 175        |
| 8         | Shell & Navigation Unit Tests                                                     | 104        |
| 9         | Domain Surface Unit Tests                                                         | 145        |
| 10        | Cross-Domain, Routines, Infrastructure Tests                                      | 98         |
| 11        | End-to-End User Flow Tests (Playwright)                                           | 98         |
| 12        | Accessibility Tests                                                               | 50         |
| 13        | Responsive Design Tests                                                           | 38         |
| 14        | Performance Tests                                                                 | 30         |
| 15        | Visual Regression Tests                                                           | 35         |
| 16        | Claude-in-Chrome E2E Verification                                                 | 115        |
| 17        | Bug Fixes & Quality Assurance                                                     | 42         |
| **18**    | **Tara Library Deep Integration**                                                 | **~155**   |
| **19**    | **Arete — Habits, Goals & Journal Integration**                                   | **~195**   |
| **20**    | **Arete — Time, Balance, Vision, 7 Habits, Gamification, AI Coach, Affirmations** | **~335**   |
| **21**    | **Veritas — Fact-Checking, Bias, Claims, Knowledge Graph**                        | **~115**   |
| **22**    | **Veritas — Articles, Research, Headlines, Newsletter, NLP**                      | **~95**    |
| **23**    | **Nyx — Coordinates, Ephemeris, Events, Constellations**                          | **~150**   |
| **24**    | **Nyx — Catalogs & Real-Time Monitoring**                                         | **~135**   |
| **25**    | **Nyx — Renderer, Education, Telescope, Sonification, Widgets**                   | **~130**   |
| **26**    | **Library Integration Unit Tests**                                                | **~150**   |
| **27**    | **Library Integration E2E & Claude-in-Chrome Verification**                       | **~120**   |
| **TOTAL** |                                                                                   | **~3,186** |

---

## Updated Execution Priority

1. **Phase 1** (Animation Foundation) — establishes primitives everything else
   depends on
2. **Phase 2** (Design System Polish) — components used everywhere get polished
   first
3. **Phase 7** (Design System Tests) — test the foundation before building on it
4. **Phase 3-4** (Shell + Pages Polish) — polish the shell everyone sees
5. **Phase 5-6** (Domain + Feature Polish) — polish domain-specific experiences
6. **Phase 8-10** (Shell + Domain + Infrastructure Tests) — test everything
   implemented
7. **Phase 18-25** (Library Deep Integration) — expose all library capabilities
   in UI
8. **Phase 26** (Library Integration Tests) — test all library integrations
9. **Phase 11** (E2E Tests) — end-to-end verification of all flows
10. **Phase 12-15** (Accessibility, Responsive, Performance, Visual Regression)
    — quality gates
11. **Phase 16 + 27** (Claude-in-Chrome Verification) — final visual
    verification
12. **Phase 17** (Bug Fixes & QA) — cleanup and decomposition

---

## Final Note

**Every task in this file must be verified before being marked complete.** The
previous TODOS_2.md had 621 tasks all marked complete with estimated 5% actual
test coverage. That will not happen again.

If a task cannot be completed, it stays unchecked with a comment explaining the
blocker. Honest status reporting is mandatory. Excellence over velocity. Always.

**Library Integration Note:** Phases 18-25 ensure that the Oshun web app is not
just a thin UI shell, but a comprehensive platform that fully leverages every
capability of the underlying Tara (meditation & mindfulness), Arete (personal
development), Veritas (fact-checking & journalism), and Nyx (astronomy)
libraries. Every library function, every content type, every analytical
capability must be accessible to the end user through a beautifully designed,
ergonomic, and intuitive interface.