--- path: /studio/hathor/visual-storyboarding surface: studio domain: hathor auth: signed-in + studio entitlement source: apps/oshun/web/src/app/studio/hathor/visual-storyboarding/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; body re-derived 2026-06-03 from current source (lane-console architecture)' - '2026-07-03 focused real-dev-infra walk — apps/oshun/web/e2e/studio-hathor-visual-storyboarding.spec.ts now covers anonymous redirect, Hathor-admin live catalog, real @hathor/pre-production seeded / clean / location-info storyboard linting through the local BFF, browser bearer propagation, client/BFF/malformed/transport errors, loading/503/malformed catalog states, non-admin fail-closed state, pending lockout, route-map and quick-action selectors, mobile 44px/no-overflow checks, scoped axe, and direct BFF auth/schema gates. Evidence: WALKTHROUGH/results/v1-real-infra-run-2026-06-22.md §276.' --- # Studio Hathor · Visual Storyboarding ## Purpose Admin lane console for the real `@hathor/pre-production` storyboard completeness linter. The operator pastes a storyboard JSON document containing sequences and frames, then the lane returns a clean/issue verdict, warning and info counts, sequence/frame counts, and the exact issue list. The linter flags empty sequences as warnings, frames with neither description nor action as warnings, and frames without a location as info. Admin-scoped and fail-closed. ## Entry points - **Direct URL / bookmark** — `/studio/hathor/visual-storyboarding`; `alternates.canonical` is set. - **Quick-action from siblings** — e.g. Hathor Pre-Production and Hathor Pre-Production Project Management link here; this page links to Narrative Structure Analysis. - **Studio overview** — see [`../../studio-overview.md`](../../studio-overview.md). ## Layout regions `page.tsx` renders inside ``: - **Workspace** (`StudioHathorVisualStoryboardingWorkspace`, `data-hathor-visual-storyboarding-workspace`): - `

` `WorkspaceHeading` — "Hathor Visual Storyboarding Workspace" - Summary `

` - **Storyboard Lint Lane**: catalog state, then the storyboard JSON form, pending state, result, or inline error. - **Route Map panel** (`

`, `data-hathor-vsb-route-count="5"`, `

Route Map

`): 5 entries from `STUDIO_HATHOR_VISUAL_STORYBOARDING_ROUTE_MAP`, each carrying `data-hathor-vsb-route-map-entry` and `data-route-path`. - **Quick-action lane** (`data-hathor-vsb-quick-actions`, `data-hathor-vsb-quick-action-count="2"`): Narrative Structure Analysis and Back to Studio workspace index. Each link carries `data-hathor-vsb-quick-action`. ## States - [x] **Loading** — `

` "Loading storyboard linter…" while the GET catalog request is in flight. - [x] **Unauthorized** — `data-hathor-vsb-unauthorized role="alert"` notice on 401/403 (admin-scope required). - [x] **Error** — `data-hathor-vsb-error role="alert"` notice on a non-OK catalog response, malformed catalog payload, or network failure. - [x] **Ready (form)** — `data-hathor-vsb-validate-form`, `data-hathor-vsb-form-state="idle"`, and `aria-busy="false"` with the storyboard textarea and submit button. - [x] **Pending validation** — `data-hathor-vsb-form-state="pending"`, `aria-busy="true"`, disabled textarea, disabled submit button, `data-hathor-vsb-submit-state="pending"`, and "Linting…" button copy. - [x] **Result** — `data-hathor-vsb-result role="status" aria-live="polite"` with `data-hathor-vsb-valid`, `data-hathor-vsb-counts`, and either `data-hathor-vsb-issues` containing per-issue `data-hathor-vsb-issue-item` entries or `data-hathor-vsb-clean`. - [x] **Validation error** — `data-hathor-vsb-validate-error role="alert"` for client JSON validation, BFF 400 detail responses, malformed 200 result payloads, or transport failure. ## Interactions - [x] **`data-hathor-vsb-storyboard`** (textarea, `aria-label="storyboard json"`) — edit `{ sequences:[{name,frameIds}], frames:[{frameId,frameNumber,description?,action?,location?}] }`; disabled while validation is pending. - [x] **`data-hathor-vsb-validate-submit`** ("Lint storyboard" / "Linting…") — parses the storyboard JSON and POSTs it to the validate endpoint; on 200 with a valid `result` it renders verdict/counts/issues, otherwise sets `data-hathor-vsb-validate-error` from `detail`, `reason`, or the fail-closed fallback. - [x] **Route Map entries** — verify against `STUDIO_HATHOR_VISUAL_STORYBOARDING_ROUTE_MAP` (5 entries), with stable `data-route-path` ordering. - [x] **Quick-action links** — Narrative Structure Analysis (`data-hathor-vsb-quick-action="narrative-structure-analysis"` → `/studio/hathor/narrative-structure-analysis`), Back to Studio (`data-hathor-vsb-quick-action="studio-index"` → `/studio`). ## Data & contracts - **Reads**: `GET /v1/admin/hathor/visual-storyboarding` (catalog: `checks`, `severities`). - **Writes**: `POST /v1/admin/hathor/visual-storyboarding/validate` with `{ storyboard: { sequences, frames } }`. - **Realtime**: none. - **Caching**: client fetch on mount, `cache: 'no-store'`, `buildBffAuthHeaders()`, `AbortController` on unmount. - **Auth**: admin-scoped, fail-closed (401/403 → unauthorized state); route is behind the signed-in + studio proxy gate. - **Client parsing**: GET catalog requires `checks: string[]` and `severities: string[]`; POST success requires boolean `valid`, numeric `warningCount`, numeric `infoCount`, numeric `sequenceCount`, numeric `frameCount`, and issues shaped as `{ type, message, frameId }` before rendering a result. ## Cross-references - Parent: [`../../studio-overview.md`](../../studio-overview.md) - Shell: [`../../../shell/04-auth-session.md`](../../../shell/04-auth-session.md) - Component sources: - `apps/oshun/web/src/components/studio/StudioHathorVisualStoryboardingWorkspace.tsx` - `apps/oshun/web/src/components/studio/StudioHathorVisualStoryboardingRouteMap.ts` - Sibling routes: [`./studio-hathor-narrative-structure-analysis.md`](./studio-hathor-narrative-structure-analysis.md), [`./studio-hathor-pre-production-project-management.md`](./studio-hathor-pre-production-project-management.md), [`./studio-hathor-pre-production.md`](./studio-hathor-pre-production.md) ## Automated coverage - `apps/oshun/web/e2e/studio-hathor-visual-storyboarding.spec.ts` covers: anonymous redirect, Hathor-admin shell entry, live storyboard catalog, seeded incomplete-board result, edited clean-board result, edited location-info result, browser bearer propagation, scoped axe, 44 px controls, route map, quick actions, client-only malformed JSON validation with zero POSTs, BFF detail surfacing, malformed success payload handling, transport failure, catalog loading/503/malformed states, non-admin fail-closed state, pending validation lockout, mobile no-overflow containment, and direct BFF auth/schema gates. - Focused component tests: `StudioHathorVisualStoryboardingWorkspace.test.tsx` and `StudioHathorVisualStoryboardingWorkspace.integration.test.tsx`. - Focused BFF route test: `apps/oshun/bff/src/__tests__/admin-hathor-visual-storyboarding-route.test.ts`. ## Open questions / known gaps - [x] Hathor is `unconfirmed-v1` per `WALKTHROUGH/matrix/routes.csv`; confirm whether the dedicated `/studio/hathor/*` admin lanes ship V1 or are internal-only. Confirmed in V1 via `V1/TODOS.md` §34 and the 2026-05-29 surface inventory. - [ ] The route-map sub-routes are listed but their concrete `page.tsx` files are not present; confirm whether they remain route-map placeholders or need dedicated deep-link pages. - [ ] Manual assistive-technology pass remains pending; automated scoped axe and touch-target assertions pass for this route.