--- path: /tara/sit/[id] surface: customer domain: tara auth: signed-in source: apps/oshun/web/src/app/tara/sit/[id]/page.tsx status: walked last_walked: '2026-06-27 targeted automated coverage — /tara/sit/when-the-mind-wanders: route-level Playwright covers idle/running/paused transport, aligned 15s keyboard scrub, reflection save/queue states, and 44px return-link targets; component tests cover completed/partial/drifted states. Earlier 2026-05-29 automated runtime walk verified populated render, HTTP 200, and 0 page/console errors. 2026-06-28 deepening adds Space/k global shortcut coverage, focused control bypass coverage, and storage-unavailable offline reflection copy. 2026-07-03 addendum adds a clock-controlled browser pass for the 90-second long-idle drift state, scrub recovery to paused, and resume telemetry. 2026-07-03 follow-up covers an unknown sitting id rendering the app-level 404 UI, no player render, usable search, and browser-back recovery to /tara. 2026-07-03 second follow-up returns the offline reflection branch online and confirms the queued UI plus `tara:reflection:` localStorage draft remain because no reconnect drain is wired yet. Evidence: first-tara-sit-deepening.spec.ts, user-flag-to-review.spec.ts, TaraSitPlayer.test.tsx, WALKTHROUGH/results/runtime-sweep-2026-05-29.md' --- # Tara · sit player ## Purpose The single-sitting player. Resolves `[id]` against `getTara()` — either `todaysSit` or one of the `sittings` rows — and renders the `TaraSitPlayer` client component: timer, audio controls, drift detection, completion threshold, reflection capture, and cross-domain step-out. Lands here from `TaraRoom` "Begin sitting", from a notification deep link, or from a resumed session card. ## Entry points - **Linked from `/tara`** via `TaraRoom` "Begin sitting" button on the today-card and the sittings rail - **Deep link from notification** — Tara ritual reminder push (`/tara/sit/`) - **Direct URL / bookmark** — yes (auth required); 404 if `id` resolves to neither `todaysSit` nor a row in `sittings` - **Resumed-session card** on `/` continuation rail (when wired) - **Telegram mini-app share / web share target** — same URL shape - Not in shell nav; not in PWA `manifest.json` `shortcuts[]` (verify) - `robots: { index: false, follow: false }` — never SEO-indexed ## Layout regions `page.tsx` is a thin server component that resolves the sitting then renders `` inside `}>`. The player is one centered column, `maxWidth: 760`. - **Header**: `LCustomerNav` (active=`today`); on the player view itself a top bar with a "← Tara" back link and the `TrustSafetyFlagButton` - **Hero / above-the-fold**: eyebrow status (`Ready when you are` / `In session` / `Paused` / `Paused, gently` / `Reflection`), large display title, byline (`teacher · pathLabel · session NN of M · sitting `) - **Main (running)**: large mono timer (remaining), elapsed/total/percent eyebrow, scrub slider, transport row (play/pause, ±15s, End sitting), drift status bar (conditional), voice-speed + ambient-mix sliders, captions / transcript / large-text toggles, captions panel, transcript panel - **Main (complete)**: completion blessing copy (variant by `completed` vs `partially-completed`), mood-after chips (settled / tender / restless / awake), reflection textarea, Save / saved-status row, "Done · back to Tara" link, then a "Next steps" rule + cross-domain chip row (Arete / Nisaba / Nyx) - **Footer**: none beyond `LWebShell` chrome ## States The player's `data-session-state` attribute reflects the active state — useful for E2E selectors. - [ ] **Loading** — server-rendered after `await getTara()`; no client-side skeleton; verify Suspense / `loading.tsx` boundary exists on the parent segment - [x] **Not started (`not-started`)** — heading "Ready when you are"; play button shows the triangle glyph; timer shows full duration; scrub slider at 0 - [x] **Running (`started`)** — heading "In session"; play button shows the pause glyph; `setInterval(…, 1000)` advances `elapsed`; drift watcher armed - [x] **Paused (`paused`)** — heading "Paused"; tick interval stopped; scrub still works; resuming returns to `started` - [x] **Drifted (`drifted`)** — auto-entered after `DRIFT_IDLE_SECONDS = 90s` with no interaction; soft status bar "The session paused itself. Take a breath; resume when you're ready."; scrubbing returns to `paused`. Playwright now installs the browser clock, starts the real route player, fast-forwards past the idle threshold, asserts the `drifted` state and copy, scrubs forward to recover to `paused`, then resumes with `data-telemetry-event="tara_sit_resumed"`. - [x] **Completed (`completed`)** — `elapsed >= total` OR finish-early with ratio ≥ `COMPLETION_THRESHOLD = 0.8`; reflection panel mounted; blessing copy "A sit, kept…" - [x] **Partially completed (`partially-completed`)** — finish-early with ratio < 0.8; reflection panel mounted; blessing copy "You crossed part of the way…" - [x] **Reflection submitting (`submitting`)** — Save button shows "Saving…"; disabled - [x] **Reflection saved (`saved`)** — green eyebrow "Saved · attached to today" - [x] **Reflection queued (`queued`)** — offline path: writes `tara:reflection:` to `localStorage`; eyebrow "Saved locally, will sync when you're back online". If durable storage throws, the state becomes `memory-queued` and the user is told the draft is kept in this tab only instead of being told it persisted locally. Playwright now also returns the browser online after the offline save and confirms the queued UI plus `tara:reflection:` localStorage entry remain because no client-side drain exists yet. - [x] **404 (sitting not found)** — `id` resolves to neither `todaysSit` nor a `sittings` row → Next `notFound()` → app-level 404 UI. Playwright now deep-links to `/tara/sit/not-a-real-sitting-id` from `/tara`, captures the current dev-shell document status as `200`, and asserts "Page not found", exact `404`, no `[data-tara-sit-player]`, the 404 search box routing to `/?q=morning%20clarity`, and browser-back recovery to `/tara`. - [x] **Reduce-motion** — `prefers-reduced-motion: reduce` matches → play-button transition is `none`. Evidence: `first-tara-sit-deepening.spec.ts` emulates reduced motion and polls the real route player's play button transition until it collapses to `none`. - [ ] **Error (recoverable)** — `getTara()` throws → segment `error.tsx` boundary; retry button preserves `id` - [ ] **Offline (post-load)** — once the player mounted, the timer ticks regardless of network; reflection submit detects `navigator.onLine === false` and queues to `localStorage` - [ ] **Offline (cold load)** — `/tara/sit/` not in SW precache; verify SW runtime caches the rendered HTML for the today-sit so cold offline launch works - [ ] **Gated** — `auth: signed-in` enforced by middleware (verify); no role gating today - [ ] **Standalone PWA** — cold-launch as relaunch target renders cleanly; safe-area insets respected; `LCustomerNav` not clipped - [x] **Storage unavailable** — Safari private mode / quota exceeded: catch around `localStorage.setItem` flips state to `memory-queued` (component state keeps the draft visible). E2E now forces `Storage.prototype.setItem` to throw for `tara:reflection:*`, verifies `data-tara-reflection-sync-state="memory-queued"`, verifies the copy says "Kept in this tab only", and verifies no `tara:reflection:*` durable entry was written. ## Interactions ### Top bar - [x] **"← Tara" back link** (link) - Function: navigates to `/tara` - Keyboard: standard ``; in tab order before timer controls - Screen reader: announces "Back to Tara" (`aria-label`) - Touch target: ≥ 44×44 CSS px (`minHeight: 44`, verified in Playwright) - Mobile: stays in top-left, eyebrow caps - Disabled when: never - Offline: same (client nav) - Telemetry: none - [x] **Trust & safety flag button** (``) - Function: opens flag/report dialog - Keyboard: button; Enter / Space activates - Screen reader: per shared component - Telemetry: per shared component - Evidence: `user-flag-to-review.spec.ts` opens the Tara sitting report dialog, asserts `targetKind="content"`, target id `tara-sit-when-the-mind-wanders`, target label metadata, 44px touch target, category select, rationale field, submit enablement, and cancel close. - See [`shell/01-app-shell.md`](../../shell/01-app-shell.md) and `apps/oshun/web/src/components/TrustSafetyFlagButton.tsx` for shared behavior ### Title block - [x] **Heading** — non-interactive; visual variant of session state - [x] **Display title** — non-interactive; mirrors `sitting.title` - [x] **Byline eyebrow** — non-interactive; `teacher · pathLabel · session XX of M · sitting ` ### Timer + scrubber (only while not complete) - [x] **Timer readout** (`role="timer" aria-live="polite" aria-atomic="true"`) - Function: announces remaining as `MM:SS`; polite live region (does not interrupt) - SR announcement cadence remains a manual AT follow-up if users report flood. - [x] **Scrub slider** (``) - Function: sets `elapsed` to chosen seconds (clamped 0..total) - Keyboard: arrow keys move ±1s by default; verify desired step - Screen reader: `aria-label="Scrub session position"`, `aria-valuemin/max/now`, `aria-valuetext=" elapsed"` - Touch target: native range; verify mobile thumb is hit-friendly - Mobile: full-width - Disabled when: completed/partial — slider not rendered - Offline behavior: same (local state) - Telemetry: none today (consider `tara_sit_scrubbed`) - [x] **Play / pause toggle** (circular button) - Function: toggles `started ↔ paused`; if `not-started`, starts the session and tick interval - Keyboard: Enter / Space; also bound to `Space` and `k` globally via `window` keydown (ignored when focus is inside `