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
• Related polished surface (intent overlap): 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-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