Goals · Arete · OSHUN (internal goal system)

Purpose#

Internal /domains/arete/* alternate goal-system surface. A multi-view workspace covering SMART / OKR / WOOP / 12-week-year frameworks, plus a hierarchy view, progress and analytics dashboards, goal detail, and a get-unstuck wizard. Heavier and more app-like than the polished /arete/goal "one true page" surface.

Entry points#

• Direct URL / bookmark — yes (signed-in)
• Back navigation — page passes onBack={() => router.back()} to AreteGoalSystem; the dashboard shows the ArrowLeft button only when onBack is provided
• No link from /arete polished surface — verify

Layout regions#

page.tsx is a 'use client' page using useRouter(). Renders <AreteGoalSystem onBack={() => router.back()} />. Component at apps/oshun/web/src/components/domains/arete/AreteGoalSystem.tsx.

• Container: min-height: 100vh; max-width: 800px; padding: tokens.spacing[4]; background: L.bg
• Top bar (dashboard only): ArrowLeft button (aria-label="Back") + h1 "Goal System" (accent color)
• Dashboard view === 'dashboard': <GoalDashboard goals={goals} onNavigate={navigate} />
• Other views routed by internal view state (GoalView union):
  • hierarchy → <GoalHierarchyView goals onBack={goBack} />
  • smart_wizard → <SMARTGoalWizard onBack={goBack} />
  • okr → <OKRFrameworkView goals onBack={goBack} />
  • woop → <WOOPWizardView onBack={goBack} />
  • twelve_week → <TwelveWeekYearView goals onBack={goBack} />
  • progress → <GoalProgressView goals onBack onNavigate />
  • analytics → <GoalAnalyticsDashboard goals analytics={sampleGoalAnalytics} onBack />
  • detail → <GoalDetailView goal={selectedGoal} onBack onNavigate />
  • get_unstuck → <GetUnstuckWizard goal={selectedGoal} onBack />

Constants:

• CATEGORY_CONFIG: 8 categories (health / career / relationships / learning / financial / creative / spiritual / custom) with labels, colors, lucide icons
• STATUS_CONFIG: active / at_risk / completed / abandoned / paused
• SMART_COLORS: specific / measurable / achievable / relevant / timeBound

States#

• Loading — N/A: client component with sync fixture
• Dashboard (default) — view === 'dashboard'; lists sampleGoals
• Drill-in views — one of nine non-dashboard views; back button returns to dashboard via goBack callback (sets view to 'dashboard')
• Goal selection — selectedGoalId is set via navigate(v, id); detail and get_unstuck views require selectedGoal to be defined, otherwise the view does not render
• Empty goals — sampleGoals from fixture; empty array would render an empty dashboard (no empty-state copy at top level)
• Error (recoverable) — relies on app-level error boundary
• Offline — purely client; identical offline
• Gated — N/A
• Standalone PWA — no shell chrome around the page

Interactions#

Top bar#

• Back button (aria-label="Back")
  • Function: calls onBack prop, which is router.back() from the page
  • Visible only when view === 'dashboard' AND onBack was provided

Dashboard (GoalDashboard)#

• Per-goal navigate — clicking a goal calls onNavigate('detail', goal.id)
• Framework / wizard launch buttons — verify in the inner component which buttons exist for SMART / OKR / WOOP / 12-week / hierarchy / progress / analytics
• "Get Unstuck Wizard" — for at-risk goals; the AlertTriangle button shown earlier in the source ("This Goal is Stuck - Get Unstuck Wizard") calls onNavigate('get_unstuck', goal.id)

View-specific interactions (wizards, charts)#

• Per-view interactions exist (SMART step navigation, WOOP entry, OKR key-result tracking, progress ring fills, etc.) — enumerate when individually walking each view

Data & contracts#

• Reads: import-time sampleGoals, sampleGoalAnalytics from @/lib/arete/arete-simulation-data. Types from @/lib/arete/arete-types (GoalData, GoalCategory, GoalStatus, TwelveWeekYear, GoalAnalytics). No BFF.
• Writes: none — [goals] is useState but never mutated in the outer component
• Realtime: none
• Caching: client bundle only
• Auth/role check: app-level middleware

Cross-references#

• Domain hub: arete.md
• Polished counterpart: arete-goal.md — the one-page goal portrait (different intent: editorial single-view vs. this multi-framework workspace)
• Sibling planning surface: domains-arete-plan-review.md
• Component source: apps/oshun/web/src/components/domains/arete/AreteGoalSystem.tsx
• Simulation data: apps/oshun/web/src/lib/arete/arete-simulation-data.ts
• Types: apps/oshun/web/src/lib/arete/arete-types.ts

Open questions / known gaps#

• No shared chrome with /arete polished surface — bare client page
• No persistence — useState([sampleGoals]) reverts on reload
• Nine subviews are rendered conditionally from a single switch — each is a sub-flow that needs its own walkthrough leaf
• Relationship between this surface and /arete/goal (one-page goal portrait) — V1-shipping vs. internal? /arete/goal is a thin server page using Lilith design; this is a heavy client tabbed workspace. Document which is canonical for V1