Disciplines · Audits

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

These rules are absolute and non-negotiable.

35sections162 minread

On this page

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:

The code compiles with zero TypeScript errors (npx tsc --noEmit)
The code passes lint (npx eslint --no-error-on-unmatched-pattern)
All related tests pass (npx vitest run <test-file>)
The feature has been visually verified in a real browser (Claude-in-Chrome or manual)
The implementation matches EVERY bullet point in the task description
No TODO comments, placeholder returns, or stub functions remain
Accessibility requirements are met (keyboard nav, ARIA, focus management)
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#

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

1.2 Interactive State Tokens#

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

1.3 Gradient & Visual Effect Tokens#

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

1.4 Skeleton Loading Enhancement#

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

1.5 Loading Spinner Component#

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

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

2.2 IconButton Polish#

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

2.3 Card Polish#

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

2.4 Badge Polish#

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

2.5 Tag Polish#

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

2.6 ProgressBar Polish#

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

2.7 ProgressRing Polish#

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

2.8 StatTile Polish#

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

2.9 Avatar Polish#

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

2.10 Toast Polish#

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

2.11 OverlaySheet Polish#

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

2.12 Tabs Polish#

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

2.13 SegmentedControl Polish#

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

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

2.15 SearchInput Polish#

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

2.16 ListItem Polish#

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

2.17 CalendarHeatmap Polish#

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

2.18 MiniChart Polish#

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

2.19 Confetti Enhancement#

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

2.20 FormField Polish#

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

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

2.22 Divider Polish#

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

2.23 EmptyState & ErrorState Polish#

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

2.24 HabitCheckbox Polish#

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

2.25 StreakIndicator Polish#

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

2.26 DomainPill Polish#

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

2.27 ConfidenceBadge & VisibilityBadge Polish#

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

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

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

3.3 MobileBottomNav Polish#

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

3.4 AppShell Layout Polish#

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

3.5 CommandPalette Polish#

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

3.6 UniversalSearchPanel Polish#

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

3.7 NotificationsCenterPanel Polish#

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

3.8 QuickActionsTrayPanel Polish#

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

3.9 WhatsNewDropdown Polish#

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

3.10 WidgetSidebar Polish#

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

3.11 FocusModeToggle Polish#

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

3.12 LanguageSwitcher Polish#

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

3.13 DomainTransition Polish#

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

3.14 OfflineBanner & CookieConsentBanner Polish#

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

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

Phase 4: Page-Level Visual Polish#

4.1 Home Page — HeroBanner Polish#

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

4.2 Home Page — KpiGrid Polish#

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

4.3 Home Page — DailyPlan Polish#

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

4.4 Home Page — ActivityFeed Polish#

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

4.5 Home Page — DomainCardGrid Polish#

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

4.6 Explore Page Polish#

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

4.7 Activity Page Polish#

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

4.8 Profile Page Polish#

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

4.9 Search Results Page Polish#

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

4.10 Onboarding Flow Polish#

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

4.11 Welcome Page Polish#

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

4.12 Legal Pages Polish#

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

4.13 Error, NotFound, and Loading Pages Polish#

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

Phase 5: Domain Surface Visual Polish#

5.1 Tara — SessionPlayer Polish#

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

5.2 Tara — BreathworkTimer Polish#

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

5.3 Tara — SessionLibrary Polish#

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

5.4 Tara — Courses Polish#

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

5.5 Tara — Favorites & Stats Polish#

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

5.6 Arete — Habits Polish#

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

5.7 Arete — Goals Polish#

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

5.8 Arete — Journal Polish#

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

5.9 Arete — AI Coach Polish#

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

5.10 Arete — Gamification Polish#

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

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

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

5.12 Veritas — Article Reader Polish#

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

5.13 Veritas — Claim Checker & Bias Detector Polish#

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

5.14 Veritas — Knowledge Graph & Story Clusters Polish#

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

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

5.16 Nyx — Interactive Sky Map Polish#

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

5.17 Nyx — Solar Activity & NEO Polish#

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

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

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

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

6.1 Cross-Domain Hub Polish#

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

6.2 Routines Polish#

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

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

6.4 Assistant Panel Polish#

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

6.5 Wearable & Complication Widgets Polish#

Glance summary: compact card with key stats, animated entrance
Complication mini-widgets: tiny stat cards with domain colors, hover to expand
Streak comparison: multi-domain streak bars with animated fills
Smart reminder cards: notification-style cards with action buttons
Daily/weekly summary: digest card with expandable sections
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)#

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

7.2 IconButton Tests (new)#

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

7.3 Card Tests (new)#

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

7.4 Badge Tests (new)#

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

7.5 Tag Tests (new)#

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

7.6 ProgressBar Tests (new)#

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

7.7 ProgressRing Tests (new)#

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

7.8 StatTile Tests (new)#

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

7.9 Avatar Tests (new)#

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

7.10 Skeleton Tests (expand existing)#

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

7.11 EmptyState Tests (new)#

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

7.12 ErrorState Tests (new)#

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

7.13 Toast Tests (expand existing)#

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

7.14 Tabs Tests (expand existing)#

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

7.15 SegmentedControl Tests (new)#

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

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

7.17 SearchInput Tests (expand existing)#

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

7.18 ListItem Tests (new)#

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

7.19 CalendarHeatmap Tests (new)#

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

7.20 MiniChart Tests (new)#

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

7.21 FormField Tests (new)#

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

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

7.23 OverlaySheet Tests (expand existing)#

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

7.24 Confetti Tests (new)#

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

7.25 Remaining Component Tests (new)#

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

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

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

8.3 MobileBottomNav Tests (new)#

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

8.4 ShellLayout Tests (new)#

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

8.5 CommandPalette Tests (new)#

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

8.6 UniversalSearchPanel Tests (new)#

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

8.7 NotificationsCenterPanel Tests (new)#

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

8.8 ProfileSettingsPanel Tests (new)#

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

8.9 QuickActionsTrayPanel Tests (new)#

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

8.10 AccessibilityShell Tests (expand existing)#

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

8.11 DomainTransition Tests (new)#

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

8.12 DomainErrorBoundary Tests (new)#

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

8.13 OfflineBanner Tests (new)#

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

8.14 CookieConsentBanner Tests (new)#

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

Phase 9: Domain Surface Unit Tests#

9.1 Tara — SessionPlayer Tests (new)#

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

9.2 Tara — BreathworkTimer Tests (new)#

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

9.3 Tara — SessionLibrary Tests (new)#

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

9.4 Tara — TaraCourses Tests (new)#

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

9.5 Tara — TaraFavorites Tests (new)#

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

9.6 Tara — TaraStats Tests (new)#

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

9.7 Arete — AreteHabits Tests (new)#

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

9.8 Arete — AreteGoals Tests (new)#

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

9.9 Arete — AreteJournal Tests (new)#

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

9.10 Arete — AreteCoach Tests (new)#

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

9.11 Arete — AreteGamification Tests (new)#

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

9.12 Arete — Remaining Module Tests (new)#

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

9.13 Veritas — Article Reader Tests (new)#

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

9.14 Veritas — Claim Checker Tests (new)#

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

9.15 Veritas — Remaining Module Tests (new)#

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

9.16 Nyx — Sky Map Tests (new)#

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

9.17 Nyx — Remaining Module Tests (new)#

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

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

10.1 Cross-Domain Tests (new)#

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

10.2 Routine Tests (new)#

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

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

10.4 Assistant Tests (new)#

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

10.5 API Client Tests (new)#

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

10.6 Auth Context Tests (new)#

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

10.7 Domain Store Tests (new)#

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

10.8 WebSocket Client Tests (new)#

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

10.9 Custom Hooks Tests (new)#

useBff: returns loading state initially
useBff: returns data after successful fetch
useBff: returns error on failed fetch
useBff: caches data and serves from cache on re-mount
useBff: refetches when dependencies change
useOnlineStatus: returns true when online
useOnlineStatus: returns false when offline
useOnlineStatus: updates when connectivity changes
useReducedMotionPreference: returns true when motion reduced
useReducedMotionPreference: returns false when no preference
useFormValidation: validates required fields
useFormValidation: returns field-specific error messages
useFormValidation: clears errors on field change
useWebSocket: establishes connection
useWebSocket: provides send function
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#

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

11.2 Home Dashboard Flow#

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

11.3 Tara Full Journey#

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

11.4 Arete Full Journey#

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

11.5 Veritas Full Journey#

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

11.6 Nyx Full Journey#

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

11.7 Cross-Domain Flows#

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

11.8 Profile & Settings Flows#

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

11.9 Error & Edge Case Flows#

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

Phase 12: Accessibility Tests#

12.1 Automated Accessibility Testing (axe-core)#

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

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

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

12.4 ARIA & Semantic HTML Tests#

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

12.5 Reduced Motion Tests#

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

Phase 13: Responsive Design Tests#

13.1 Mobile (375px) Tests#

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

13.2 Tablet (768px) Tests#

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

13.3 Desktop (1440px) Tests#

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

13.4 Wide Desktop (1920px) Tests#

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

13.5 Minimum (320px) Tests#

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

Phase 14: Performance Tests#

14.1 Lighthouse CI#

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

14.2 Bundle Size Monitoring#

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

14.3 Core Web Vitals#

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

14.4 Performance Optimizations Verification#

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

Phase 15: Visual Regression Tests#

15.1 Design System Visual Snapshots#

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

15.2 Page-Level Visual Snapshots#

Snapshot: home page (desktop)
Snapshot: home page (mobile)
Snapshot: explore page (desktop + mobile)
Snapshot: activity page (desktop + mobile)
Snapshot: profile page (desktop + mobile)
Snapshot: Tara surface (desktop + mobile)
Snapshot: Arete surface (desktop + mobile)
Snapshot: Veritas surface (desktop + mobile)
Snapshot: Nyx surface (desktop + mobile)
Snapshot: search results page (desktop + mobile)
Snapshot: onboarding wizard (each step)
Snapshot: welcome page (desktop + mobile)
Snapshot: 404 page
Snapshot: error page
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#

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

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

16.3 Tara Domain Verification#

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

16.4 Arete Domain Verification#

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

16.5 Veritas Domain Verification#

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

16.6 Nyx Domain Verification#

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

16.7 Cross-Domain Verification#

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

16.8 Profile & Settings Verification#

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

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

16.10 Animation & Micro-Interaction Verification#

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

16.11 Error & Edge Case Verification#

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

16.12 Accessibility Verification in Chrome#

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

Phase 17: Bug Fixes & Quality Assurance#

17.1 Inline Style Cleanup#

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

17.2 Hardcoded Data Cleanup#

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

17.3 Console Error Cleanup#

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

17.4 Memory Leak Audit#

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

17.5 Component Decomposition#

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

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

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

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

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

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

18.3.1 Meditation Types & Categories#

Implement meditation type filter with all 12 types: guided, unguided, sleep, focus, breathwork, body-scan, visualization, mantra, mindfulness, loving-kindness, walking, movement
Design type filter as horizontally scrollable chip bar with icons for each type
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)
Design category filter as expandable multi-select panel with category icons
Implement difficulty level badges on session cards (beginner, intermediate, advanced, all-levels)
Implement voice style filter (calm, warm, neutral, energetic, soft)
Implement audio quality selector in session player (low, medium, high, lossless)
Implement audio format display showing available formats
Show responsive meditation artwork with proper responsive image sets

18.3.2 Course System Deep Integration#

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

18.3.3 Teacher Profiles#

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

18.3.4 Collection & Program System#

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

18.3.5 Sound System Deep Integration#

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

18.3.6 Content Search Engine#

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

18.3.7 Content Caching & Performance#

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

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

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

18.5 Tara Monitoring Integration (@tara/monitoring)#

Integrate ErrorTracker for all Tara error boundaries
Track meditation audio load failures with context
Track session player errors with device/browser info
Integrate PerformanceMonitor for session player performance
Measure time-to-first-audio for session startup
Measure search result latency
Measure content list render performance
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)#

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

19.1.2 Four Laws of Behavior Change#

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

19.1.3 Habit Stacking (Tiny Habits)#

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

19.1.4 Identity-Based Habits#

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

19.1.5 Keystone Habits#

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

19.1.6 Streak System Deep Integration#

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

19.1.7 Habit Analytics Deep Integration#

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

19.1.8 Habit Reminders & Notifications#

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

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

19.2.1 Goal Hierarchy System#

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

19.2.2 SMART Goals Deep Integration#

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

19.2.3 OKR Framework#

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

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

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

19.2.5 12-Week Year#

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

19.2.6 Goal Progress & Prediction#

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

19.2.7 Goal Analytics#

Build goal analytics dashboard page
Show goal completion rate by category (bar chart)
Show average time to completion by goal type
Show active vs completed vs abandoned goal ratio (donut chart)
Show goal-habit alignment matrix (which habits support which goals)
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)#

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

19.3.2 Five-Minute Journal#

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..."
Build Five-Minute Journal evening template with 2 sections:
- "3 amazing things that happened today"
- "How could I have made today even better?"
Show morning/evening toggle based on time of day
Track Five-Minute Journal completion rate
Show streaks for consistent journaling

19.3.3 Gratitude Journaling#

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

19.3.4 CBT Thought Records#

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)
Show emotion intensity change visualization (before → after bar)
Build thought record history with filterable list
Show cognitive distortion detection insights
Build thought patterns analysis page
Implement thought record quick-add from mood check-in

19.3.5 Worry Journal#

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?)
Implement scheduled "worry time" feature (15-minute designated worry window)
Show worry resolution tracker (did the worry come true? what actually happened?)
Build worry patterns dashboard showing most common worry categories
Show worry outcome statistics ("85% of your worries never materialized")

19.3.6 Prompted Journaling (300+ Prompts)#

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

19.3.7 Reflection Workflows#

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

19.3.8 Journal Analytics Deep Integration#

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

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

20.1.2 GTD (Getting Things Done) Inbox#

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

20.1.3 GTD Weekly Review#

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

20.1.4 Big Rocks Planning (Covey)#

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

20.1.5 Time Blocking#

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

20.1.6 Pomodoro Timer Deep Integration#

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

20.1.7 Deep Work Sessions (Cal Newport)#

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

20.1.8 Daily Planning#

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

20.1.9 Time Auditing#

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

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

20.2.1 Wheel of Life#

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

20.2.2 Eight Wellness Dimensions#

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

20.2.3 PERMA Model (Positive Psychology)#

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

20.2.4 Mood Tracking#

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

20.2.5 Sleep Tracking#

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

20.2.6 Energy Management#

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

20.2.7 Life Satisfaction Scale (SWLS)#

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

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

20.3.1 Vision Board#

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

20.3.2 Personal Mission Statement#

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

20.3.3 Values Clarification#

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

20.3.4 Ikigai Framework#

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

20.3.5 Golden Circle (Simon Sinek)#

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

20.3.6 Legacy Planning#

Build Legacy Planning workshop: "How do you want to be remembered?"
Implement legacy area cards: Family, Community, Career, Creativity, Wisdom
Build legacy action plan: specific steps toward desired legacy
Show legacy impact assessment
Build legacy progress tracker
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#

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

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

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

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

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

20.4.4 Habit 4: Think Win-Win#

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

20.4.5 Habit 5: Seek First to Understand#

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

20.4.6 Habit 6: Synergize#

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

20.4.7 Habit 7: Sharpen the Saw#

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

20.4.8 Emotional Bank Account#

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

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

20.5.1 Points System#

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

20.5.2 Badge System (50+ Badges)#

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

20.5.3 Level System (20 Levels)#

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

20.5.4 Leaderboards#

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

20.5.5 Accountability Partners#

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

20.5.6 Commitment Contracts#

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

20.5.7 Community Challenges#

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

20.5.8 Rewards Store#

Build Rewards Store page where users spend earned coins/gems
Design reward cards: name, cost, category, description
Implement reward categories: Self-Care, Fun, Social, Learning, Premium
Build custom reward creation (user-defined rewards)
Show reward redemption history
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#

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

20.6.2 Personalized Recommendations#

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

20.6.3 Pattern Recognition#

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

20.6.4 Smart Notifications#

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

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

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

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

21.1.2 AI-Powered Fact-Checking UI#

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

21.1.3 Claim Checkworthiness#

Build "Is this worth checking?" quick assessment tool
Design checkworthiness score display (high/medium/low with color coding)
Show checkworthiness criteria breakdown
Build claim priority queue sorted by checkworthiness
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#

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

21.2.2 Coverage Balance Analysis#

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

21.2.3 Blindspot Detection#

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

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

21.3.1 Claim Extraction#

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

21.3.2 Claim Management#

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

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

21.4.1 Interactive Knowledge Graph#

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

21.4.2 Entity Profiles#

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

21.4.3 Temporal Knowledge Tracking#

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

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

21.5.1 Story Cluster Browser#

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

21.5.2 Real-Time Clustering#

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

21.5.3 Multilingual Clustering#

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

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

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

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

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

22.3 Veritas RAG Integration (@veritas/rag)#

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

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

22.4.1 Headline Generation & Scoring#

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

22.4.2 Headline A/B Testing#

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

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

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

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

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

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

22.8 Veritas SEO (@veritas/seo)#

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

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

Build AI Agent Pipeline dashboard showing all active agents
Design agent status cards: running (green), idle (gray), error (red)
Show agent health monitoring with uptime indicators
Show agent task queue with priority ordering
Show agent metrics dashboard (tasks completed, processing time, error rate)
Build agent configuration panel for admin users
Show agent event log with filterable message history
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)#

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

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

23.2.1 Planetary Ephemeris#

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

23.2.2 Sun & Moon Ephemeris#

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

23.2.3 Minor Body Ephemeris#

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

23.2.4 Visibility Planning#

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

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

23.3.1 Orbital Elements Viewer#

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

23.3.2 Orbit Visualization#

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

23.3.3 N-Body Simulation#

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

23.3.4 Lambert Problem Solver#

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

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

23.4.1 Solar Eclipses#

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

23.4.2 Lunar Eclipses#

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

23.4.3 Planetary Conjunctions#

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

23.4.4 Lunar Occultations#

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

23.4.5 Transits#

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

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

23.5.1 Multi-Cultural Constellation Browser#

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

23.5.2 IAU Constellations (88)#

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

23.5.3 Chinese Constellations#

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

23.5.4 Egyptian Constellations#

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

23.5.5 Polynesian Constellations#

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

23.5.6 Norse Constellations#

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

23.5.7 Indigenous American Constellations#

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

23.5.8 Constellation of the Night#

Build "Tonight's Constellations" widget showing currently visible constellations
Show constellation finder based on observer location and time
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)#

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

24.1.2 Hipparcos Catalog#

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

24.1.3 Gaia DR3#

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

24.1.4 SIMBAD Integration#

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

24.2 Deep-Sky Object Catalogs#

24.2.1 Messier Catalog (110 objects)#

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

24.2.2 NGC/IC Catalog#

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

24.2.3 Specialized Deep-Sky Browsers#

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

24.2.4 SDSS (Sloan Digital Sky Survey)#

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

24.2.5 NED (NASA Extragalactic Database)#

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

24.3 Solar System Catalogs#

24.3.1 Planet Browser#

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

24.3.2 Moon Browser#

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

24.3.3 Comet Browser#

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

24.3.4 Asteroid & NEO Browser#

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

24.3.5 Spacecraft Tracker#

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

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

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

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

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

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

Build Satellite Tracker page with real-time position map
Show ISS current position on world map with ground track
Build satellite pass predictions for observer location
Show pass details: time, direction, maximum altitude, magnitude
Build satellite search by name or NORAD catalog number
Show satellite visibility calendar for the week
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#

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

25.1.2 Star Rendering#

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

25.1.3 Planet Rendering#

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

25.1.4 Deep-Sky Object Rendering#

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

25.1.5 Post-Processing Effects#

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

25.1.6 Background Rendering#

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

25.1.7 Cosmic Scale System#

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

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

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

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

25.3.1 Lesson Framework#

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

25.3.2 Interactive Lessons#

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

25.3.3 Quiz System#

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

25.3.4 Achievement System#

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

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

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

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

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

25.6 Nyx Widgets Integration#

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

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

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

25.7 Nyx Analysis Tools#

25.7.1 Galaxy Classification#

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

25.7.2 Exoplanet Habitability#

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

25.8 Nyx Observation Log Deep Integration#

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

25.9 Nyx Sky Conditions Deep Integration#

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

Phase 26: Library Integration Unit Tests#

26.1 Tara Integration Tests#

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

26.2 Arete Habits Integration Tests#

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

26.3 Arete Goals Integration Tests#

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

26.4 Arete Journal Integration Tests#

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

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

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

26.6 Arete Gamification & AI Coach Tests#

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

26.7 Veritas Integration Tests#

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

26.8 Nyx Integration Tests#

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

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

27.1 Tara Integration E2E Verification#

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

27.2 Arete Integration E2E Verification#

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

27.3 Veritas Integration E2E Verification#

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

27.4 Nyx Integration E2E Verification#

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

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