---
path: /domains/arete/goals
surface: customer
domain: arete
auth: signed-in
source: apps/oshun/web/src/app/domains/arete/goals/page.tsx
status: walked
last_walked:
  '2026-05-29 automated runtime walk (Playwright headless) — render, /v1 data
  (2xx), console/page-errors, expected content, screenshot verified; live
  screen-reader, touch, offline, and telemetry-delivery checks pending a manual
  AT pass. Evidence: WALKTHROUGH/results/runtime-sweep-2026-05-29.md'
---

# 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`](./arete.md)
- Polished counterpart: [`arete-goal.md`](./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`](./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