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.

Layout regions#

page.tsx renders inside <ShellLayout active="studio">:

• Workspace (StudioHathorVisualStoryboardingWorkspace, data-hathor-visual-storyboarding-workspace):
  • <h1> WorkspaceHeading — "Hathor Visual Storyboarding Workspace"
  • Summary <p data-hathor-visual-storyboarding-summary>
  • Storyboard Lint Lane: catalog state, then the storyboard JSON form, pending state, result, or inline error.
• Route Map panel (<section data-hathor-visual-storyboarding-route-map>, data-hathor-vsb-route-count="5", <h2>Route Map</h2>): 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#

• Loading — <p data-hathor-vsb-loading role="status" aria-live="polite"> "Loading storyboard linter…" while the GET catalog request is in flight.
• Unauthorized — data-hathor-vsb-unauthorized role="alert" notice on 401/403 (admin-scope required).
• Error — data-hathor-vsb-error role="alert" notice on a non-OK catalog response, malformed catalog payload, or network failure.
• Ready (form) — data-hathor-vsb-validate-form, data-hathor-vsb-form-state="idle", and aria-busy="false" with the storyboard textarea and submit button.
• 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.
• 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.
• 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#

• data-hathor-vsb-storyboard (textarea, aria-label="storyboard json") — edit { sequences:[{name,frameIds}], frames:[{frameId,frameNumber,description?,action?,location?}] }; disabled while validation is pending.
• 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.
• Route Map entries — verify against STUDIO_HATHOR_VISUAL_STORYBOARDING_ROUTE_MAP (5 entries), with stable data-route-path ordering.
• 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
• Shell: ../../../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-pre-production-project-management.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#

• 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.