---
path: /domains/arete/vision
surface: customer
domain: arete
auth: signed-in
source: apps/oshun/web/src/app/domains/arete/vision/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'
---

# Vision Board · Arete · OSHUN

## Purpose

Internal `/domains/arete/*` alternate surface for a vision-board / dream- life /
future-letter / slideshow workspace. "Visualize your dreams, design your future,
and stay inspired." Backed by fixture constants (`VISION_BOARD_ITEMS`,
`DREAM_LIFE_DESIGN`, `FUTURE_LETTER`, `VISION_CATEGORY_COLORS`,
`VISION_CATEGORY_LABELS`).

## Entry points

- **Direct URL / bookmark** — yes (signed-in)
- **No link from `/arete` polished surface** — verify

## Layout regions

`page.tsx` is a `'use client'` page: SR-only "Vision Board · Arete · OSHUN"
heading + `<AreteVisionBoard />`. Component at
`apps/oshun/web/src/components/domains/arete/AreteVisionBoard.tsx`.

- **Container**: `max-width: 900px; padding: 24px`
- **Header**: Eye icon (24px, accent) + h2 "Vision Board" + subtitle "Visualize
  your dreams, design your future, and stay inspired"
- **Tab bar** (4 tabs, `overflowX: 'auto'`):
  - `board` — Vision Board (Eye icon)
  - `dream` — Dream Life (Book icon)
  - `letter` — Future Letter (Mail icon)
  - `slideshow` — Slideshow (Maximize2 icon)
- **Content area** (per active tab):
  - `board` → `<VisionBoardGrid />` — filterable grid of `VISION_BOARD_ITEMS` by
    `VisionCategory` (career / relationships / health / financial / travel /
    personal-growth / creativity / spiritual). Add form (`showAddForm` state)
    with title / content / category / type (`VisionItemType`). Drag-and-drop
    reorder via `draggedId` state.
  - `dream` → `<DreamLifeView />` — driven by `DREAM_LIFE_DESIGN`
  - `letter` → `<FutureLetterView />` — driven by `FUTURE_LETTER`; uses `Lock`
    and `Clock` icons (suggests time-locked / sealed letter)
  - `slideshow` → `<SlideshowView />` — large-format with `ChevronLeft` /
    `ChevronRight` navigation and `vb-slide-in` / `vb-slide-out` animations

Category icons (`CATEGORY_ICONS`): Briefcase / Heart / Heart / DollarSign /
Plane / TrendingUp / Palette / Sparkles.

## States

- [ ] **Loading** — N/A: client component with sync fixture
- [ ] **Board, all categories** — `filterCategory === 'all'`; full `items` list
- [ ] **Board, filtered** — `filterCategory !== 'all'`; `items.filter`
- [ ] **Add form open** — `showAddForm === true`; title/content/category/ type
      controls visible
- [ ] **Dragging an item** — `draggedId !== null`; reorder in progress
- [ ] **Letter sealed / unsealed** — `vb-seal-pulse` animation suggests a
      sealed-letter state; `Lock` icon imported
- [ ] **Slideshow playing** — `vb-slide-in` / `vb-slide-out` transitions between
      slides
- [ ] **Tab switching** — instant; `vb-fade-in` animation
- [ ] **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

### Tab bar (4 tabs)

- [ ] **Vision Board / Dream Life / Future Letter / Slideshow** (buttons)
  - Function: `setActiveTab(tab.id)`
  - Telemetry: none

### Vision board grid (`board` tab)

- [ ] **Category filter** — filter by `VisionCategory`; counts available per
      category
- [ ] **Add new item** (`Plus` icon, opens `showAddForm`)
  - Title input, content input, category select, type select
  - Submit: `handleAddItem` builds a new `VisionItem` and appends
- [ ] **Drag handle** — `GripVertical` icon per item; `draggedId` state
- [ ] **Per-item type rendering** — `VisionItemType` (text / image / goal /
      quote); each likely renders differently (`Type`, `Image`, `Target`,
      `Quote` icons imported)
- [ ] **Remove item** — `X` icon imported
- [ ] **Maximise item** — `Maximize2` icon imported

### Future letter (`letter` tab)

- [ ] **Sealed state** — `vb-seal-pulse` animation; `Lock` icon
- [ ] **Unlock-at** — `Clock` icon implies a future-date reveal
- [ ] **Read** — present body

### Slideshow (`slideshow` tab)

- [ ] **Prev / Next** — `ChevronLeft` / `ChevronRight` buttons
- [ ] **Transition** — `vb-slide-in` / `vb-slide-out` keyframes

The exact button labels and a11y treatment per view require reading lines beyond
the top of the file.

## Data & contracts

- **Reads**: import-time `VISION_BOARD_ITEMS`, `DREAM_LIFE_DESIGN`,
  `FUTURE_LETTER`, `VISION_CATEGORY_COLORS`, `VISION_CATEGORY_LABELS` from
  `@/lib/arete/arete-extended-simulation`. Types: `VisionItem`,
  `VisionCategory`, `VisionItemType` from `@/lib/arete/arete-extended-types`. No
  BFF.
- **Writes**: none persisted — `items` mutations (add, reorder) are local state
- **Realtime**: none
- **Caching**: client bundle only
- **Auth/role check**: app-level middleware

## Cross-references

- Domain hub: [`arete.md`](./arete.md)
- Related polished surface (intent overlap): [`arete-goal.md`](./arete-goal.md)
  — the "Why" prose section frames a long-term aim; vision board is the
  visual/material analogue
- Related internal alternates:
  - [`domains-arete-affirmations.md`](./domains-arete-affirmations.md)
  - [`domains-arete-goals.md`](./domains-arete-goals.md)
- Component source:
  `apps/oshun/web/src/components/domains/arete/AreteVisionBoard.tsx`
- Simulation data: `apps/oshun/web/src/lib/arete/arete-extended-simulation.ts`
- Types: `apps/oshun/web/src/lib/arete/arete-extended-types.ts`

## Open questions / known gaps

- [ ] No shared chrome with `/arete` polished surface
- [ ] Vision board adds / reorders / removes all reset on reload — no
      persistence
- [ ] Future letter: verify whether the time-lock is enforced server-side or
      simulated client-side
- [ ] Slideshow: verify autoplay behaviour, reduced-motion handling, and
      keyboard navigation
- [ ] Per-tab interactions need deeper enumeration on a deeper walk
- [ ] No counterpart in the polished `/arete/*` routes — vision is a
      domains-namespace-only surface; verify V1-shipping status
- [ ] No telemetry events fired