---
path: /domains/tara/teachers
surface: customer
domain: tara
auth: signed-in
source: apps/oshun/web/src/app/domains/tara/teachers/page.tsx
status: walked
last_walked:
  '2026-06-29 targeted real-dev-infra Playwright and source walkthrough —
  directory entry from Tara hub, simulated-data metadata, featured carousel,
  exact populated/filter/search/empty counts, keyboard card routing,
  profile/course handoff, reduced-motion CSS collapse, and route-level axe scan
  verified. Evidence: apps/oshun/web/e2e/tara-teacher-pages.spec.ts;
  apps/oshun/web/e2e/tara-teacher-pages-accessibility.spec.ts;
  WALKTHROUGH/results/v1-real-infra-run-2026-06-22.md §196'
---

# Tara — teacher directory

## Purpose

Directory of Tara teachers. Lets the user browse, search, and filter teachers by
specialty before opening a specific teacher profile.

## Entry points

- **Tara hub** — verify the link from `/tara` (the polished surface lists
  teachers and links here for the full directory)
- **Teacher profile back-link** — `/domains/tara/teachers/<id>` returns here via
  `router.back()` (also exposes `onSelectTeacher` for direct teacher switching)
- **Direct URL / bookmark** — yes
- **Domain back-stack** — `router.back()` wired into `onBack`

## Layout regions

`page.tsx` is a `'use client'` thin wrapper that renders
`<TaraTeacherDirectoryPage>` with two callbacks:

- `onSelectTeacher={(id) => router.push('/domains/tara/teachers/' + id)}`
- `onBack={() => router.back()}`

Inside `TaraTeacherDirectoryPage` (`TaraTeacherProfile.tsx`):

- **Root contract** — `data-tara-teacher-directory`, `data-source="simulated"`,
  `data-total-teachers="12"`, `data-featured-teachers="7"`.
- **Header** — icon back button (`data-tara-teacher-directory-back`) when
  `onBack` is provided, "Teachers" heading, and support copy.
- **Featured teachers carousel** — `data-tara-teacher-featured-carousel`, body
  metadata (`data-featured-count`, `data-current-teacher-id`,
  `data-scroll-step`), left/right scroll buttons, and keyboard/clickable
  featured cards.
- **Search input** — `data-tara-teacher-directory-search-input`; filters by
  teacher name, bio, and specialty labels.
- **Clear search** — `data-tara-teacher-directory-search-clear`; present only
  while a query is active.
- **Specialty filter chips** — `data-tara-teacher-specialty-filter`, exact
  selected state via `aria-pressed` and `data-selected`; first 12 alphabetized
  specialties render.
- **Results contract** — `data-tara-teacher-directory-listing` carries
  `data-search-active`, `data-search-query`, `data-selected-specialty`,
  `data-selected-specialty-label`, `data-result-count`, `data-total-count`,
  `data-featured-count`, and `data-specialty-count`.
- **Teacher grid** — `data-tara-teacher-directory-list` cards with
  `data-tara-teacher-card`, status, featured flag, specialties, rating, and
  session count.
- **Empty state** — `data-tara-teacher-directory-empty` with role `status`.
- **Status badges** — `STATUS_CONFIG`: active / inactive / featured / guest.

## States

- [x] **Populated** — 12 `SIMULATED_TEACHERS` cards verified from direct route
      and from the Tara hub secondary tool entry.
- [x] **Filtered (specialty)** — Anxiety chip selects
      `data-selected-specialty="anxiety"` and narrows the grid to exactly 2
      cards with `data-specialties~="anxiety"`.
- [x] **Searching** — query `Sarah` sets `data-search-active="true"`,
      `data-search-query="Sarah"`, and narrows to the Sarah Chen card.
- [x] **Clear search** — clear button resets query, search-active state, and
      returns the grid to 12 cards.
- [x] **Empty result** — query `No such guide` sets `data-result-count="0"`,
      removes teacher cards, and shows the in-grid
      `data-tara-teacher-directory-empty` status copy.
- [x] **Featured carousel scroll** — right/left buttons update
      `data-scroll-step` from 0 → 1 → 0; carousel body exposes the current
      featured count.
- [x] **Status branches currently produced by V1 data** — 7 featured cards and 5
      active cards are verified. `inactive` and `guest` status styles exist in
      `STATUS_CONFIG` but current fixture data does not produce them.
- [x] **Reduced motion** — under Playwright's reduced-motion media emulation,
      directory card animation duration collapses to ≤0.01ms.

## Interactions

### Header

- [x] **Back** (button) — `router.back()` via `onBack`; stable hook
      `data-tara-teacher-directory-back` exists when rendered.

### Search input

- [x] **Search** (text) — filters teacher list by name, bio, and specialty
      label.
- [x] **Clear (×)** — clears the search and restores the populated grid.

### Specialty chips

- [x] **Specialty chip** (button) — toggles active specialty state; Anxiety and
      All states are covered with exact DOM metadata.

### Featured carousel

- [x] **Carousel arrows** (`ChevronLeft` / `ChevronRight`) — scroll one step and
      expose `data-scroll-step`.
- [x] **Featured teacher card** — click and keyboard handlers call
      `onSelectTeacher(id)` → `router.push('/domains/tara/teachers/<id>')`.

### Teacher grid

- [x] **Teacher card click** — Sarah Chen card opens
      `/domains/tara/teachers/tara-teacher-001`.
- [x] **Teacher card keyboard** — Space on Alex Rivera's card opens
      `/domains/tara/teachers/tara-teacher-004`.

## Data & contracts

- **Reads**:
  - `SIMULATED_TEACHERS` from `@/lib/tara/tara-simulation-data`
  - Content types: `TaraTeacher`, `MeditationCategory` from
    `@/lib/tara/content-types`
- **Writes**: _None._
- **Realtime**: _None._
- **Caching**: client-only
- **Auth/role check**: shell middleware
- **Featured selection**: current contract is the local `teacher.featured`
  boolean; 7 of 12 teachers are featured.
- **Status selection**: `getTeacherStatus` returns `featured` for featured
  teachers, `active` for all current non-featured teachers with >30 sessions,
  and `guest` only for future data with ≤30 sessions. `inactive` remains a
  style-only config value in this component.
- **Accessibility**: route-level axe coverage is in
  `tara-teacher-pages-accessibility.spec.ts`; the main interaction spec also
  uses the shared auto-axe fixture.

## Cross-references

- Sibling Tara routes:
  - [`tara.md`](./tara.md),
    [`domains-tara-analytics.md`](./domains-tara-analytics.md),
    [`domains-tara-collections.md`](./domains-tara-collections.md),
    [`domains-tara-courses-id.md`](./domains-tara-courses-id.md),
    [`domains-tara-programs.md`](./domains-tara-programs.md),
    [`domains-tara-search.md`](./domains-tara-search.md),
    [`domains-tara-sounds.md`](./domains-tara-sounds.md),
    [`domains-tara-teachers-id.md`](./domains-tara-teachers-id.md)
- Component sources:
  - `apps/oshun/web/src/components/domains/tara/TaraTeacherProfile.tsx`
    (`TaraTeacherDirectoryPage` line 1516)
- Feature spec: [`V1/features.md#tara`](../../../V1/features.md#tara)

## Open questions / known gaps

- [ ] Confirm the BFF endpoint for the real teacher directory; today
      `SIMULATED_TEACHERS` is local fixture data and is surfaced honestly via
      `data-source="simulated"`.
- [ ] Product decision needed for whether `inactive` and `guest` teachers are
      expected V1 customer states. The styles exist, but the current fixture
      data does not render either branch.
- [ ] Verify whether `/domains/tara/teachers` ships in V1 or is gated behind the
      polished `/tara` surface. The current web route is directly reachable and
      linked from Tara hub secondary tools.