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

# Time Management · Arete · OSHUN

## Purpose

Internal `/domains/arete/*` alternate surface for time-management frameworks:
Eisenhower matrix, Pomodoro timer, time blocks, time audit, Pareto 80/20
analysis. Backed by fixture constants (`EISENHOWER_QUADRANTS`,
`EISENHOWER_TASKS`, `POMODORO_STATS`, `TIME_BLOCKS`, `TIME_LOG_ENTRIES`,
`TIME_AUDIT`, `PARETO_ACTIVITIES`).

## 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 "Time Management · Arete · OSHUN"
heading + `<AreteTimeManagement />`. Component at
`apps/oshun/web/src/components/domains/arete/AreteTimeManagement.tsx`.

- **Container**: `max-width: 900px; padding: 24px`
- **Header**: Clock icon (24px, accent) + h2 "Time Management" + subtitle
  "Master your time with proven frameworks and tools"
- **Tab bar** (5 tabs, `overflowX: 'auto'`):
  - `eisenhower` — Eisenhower (Grid3X3 icon)
  - `pomodoro` — Pomodoro (Timer icon)
  - `blocks` — Time Blocks (CalendarDays icon)
  - `audit` — Time Audit (BarChart3 icon)
  - `pareto` — Pareto 80/20 (TrendingUp icon)
- **Content area** (per active tab):
  - `eisenhower` → `<EisenhowerMatrixView />` — quadrant grid using
    `EisenhowerQuadrant` types
  - `pomodoro` → `<PomodoroTimerView />` — driven by `PomodoroPhase`,
    `PomodoroTimerState` types; uses `useRef`/`useEffect`/`useCallback` for
    timer wiring
  - `blocks` → `<TimeBlocksView />` — driven by `TimeBlock` type with drag/drop
    (`GripVertical` icon imported)
  - `audit` → `<TimeAuditView />` — `TIME_AUDIT` + `TIME_LOG_ENTRIES`
  - `pareto` → `<ParetoAnalysisView />` — `PARETO_ACTIVITIES`

CSS keyframes defined in source: `tm-fade-in`, `tm-pulse-ring`, `tm-timer-tick`.

## States

- [ ] **Loading** — N/A: client component with sync fixture
- [ ] **Tab switching** — instant; `tm-fade-in` animation
- [ ] **Pomodoro running** — `PomodoroTimerState` includes a running flag
      (verify in lower lines); timer-tick animation pulses
- [ ] **Pomodoro paused / reset / skipped** — `Pause` / `RotateCcw` /
      `SkipForward` lucide icons imported, implying these controls exist
- [ ] **Pomodoro phase changed** — `PomodoroPhase` (focus / short break / long
      break); colour cues are likely via `Zap` / `Coffee` / `Brain` icons
- [ ] **Eisenhower task drag** — `GripVertical` import suggests drag-and- drop
      reordering between quadrants
- [ ] **Empty state per tab** — empty fixtures would yield empty views; 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

### Tab bar (5 tabs)

- [ ] **Eisenhower / Pomodoro / Time Blocks / Time Audit / Pareto 80/20**
      (buttons)
  - Function: `setActiveTab(tab.id)`
  - Telemetry: none

### Eisenhower matrix

- [ ] **Task per quadrant** — render and drag-reorder (verify)
- [ ] **Add task** — `Plus` icon imported; likely an add-task affordance
- [ ] **Delete task** — `Trash2` icon imported; per-task delete

### Pomodoro timer

- [ ] **Play / Pause / Reset / Skip** (icon buttons)
  - Function: timer state machine; ticks driven by `useEffect` / `useRef`
- [ ] **Phase indicator** — focus / break visual

### Time blocks

- [ ] **Block card** — drag handle (`GripVertical`) suggests reorder
- [ ] **Add / delete block** (`Plus` / `Trash2` / `X` icons imported)

### Time audit

- [ ] **Per-category breakdown** — chart and entries from `TIME_AUDIT` +
      `TIME_LOG_ENTRIES`

### Pareto

- [ ] **Per-activity list** — sorted by impact; ranked 80/20

The exact UI of each view requires reading lines beyond the top of the file; the
inventory above is structural.

## Data & contracts

- **Reads**: import-time `EISENHOWER_QUADRANTS`, `EISENHOWER_TASKS`,
  `POMODORO_STATS`, `TIME_BLOCKS`, `TIME_LOG_ENTRIES`, `TIME_AUDIT`,
  `PARETO_ACTIVITIES`, `TIME_BLOCK_CATEGORY_COLORS`,
  `TIME_AUDIT_CATEGORY_COLORS` from `@/lib/arete/arete-extended-simulation`.
  Types: `EisenhowerQuadrant`, `EisenhowerTask`, `PomodoroPhase`,
  `PomodoroTimerState`, `TimeBlock` from `@/lib/arete/arete-extended-types`. No
  BFF.
- **Writes**: none persisted — all state is local (timer, task list, blocks)
- **Realtime**: none
- **Caching**: client bundle only
- **Auth/role check**: app-level middleware

## Cross-references

- Domain hub: [`arete.md`](./arete.md)
- Related internal alternates:
  - [`domains-arete-habits.md`](./domains-arete-habits.md) — daily habit
    tracking
  - [`domains-arete-plan-review.md`](./domains-arete-plan-review.md)
- Component source:
  `apps/oshun/web/src/components/domains/arete/AreteTimeManagement.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
- [ ] Pomodoro state, task lists, time blocks all reset on reload — no
      persistence
- [ ] Pomodoro timer ticks are presumably driven by `useEffect`+`setInterval`;
      verify the cleanup path on unmount and tab change
- [ ] Per-tab interactions need deeper enumeration on a deeper walk
- [ ] No counterpart in the polished `/arete/*` routes; verify V1-shipping
      status
- [ ] No telemetry events fired