V1 Web PWA · Surface walkthrough

Studio Aja · Film/VFX Pipeline

A per-surface walkthrough of the V1 Web PWA studio surface: layout, states, interactions, data, and cross-references.

walked + e2e-covered
9sections3 minread

On this page

Context. surface studio · domain aja · route /studio/aja/film-vfx-pipeline · auth signed-in + studio entitlement · source apps/oshun/web/src/app/studio/aja/film-vfx-pipeline/page.tsx

Last walked. 2026-07-04 focused real-dev-infra Playwright route walk — anonymous redirect, Aja-admin visual-quality catalog, exact shipped balanced and edited asymmetric low-hand film/VFX clips through the real BFF, local/BFF validation, malformed/transport failures, loading/403/503/malformed catalog states, pending controls, route-map + quick-action affordances, mobile/touch/axe, and direct BFF auth/schema gates. Evidence: WALKTHROUGH/results/v1-real-infra-run-2026-06-22.md §294.

Purpose#

Leaf lane console that wires the real @aja/motion-quality analyzeVisualQuality analyzer. The operator submits a film/VFX motion and the lane returns the weighted visual-quality score plus three sub-scores — pose aesthetics (shoulder symmetry about the hips, hand placement), motion appeal, and pose clarity — and the overall impression rating.

Entry points#

  • Direct URL / bookmark/studio/aja/film-vfx-pipeline.
  • Studio nav — Domain-bridge studios section of /studio.
  • Sibling quick-action — "Open Aja Medical/Rehabilitation Pipeline workspace" (/studio/aja/medical-rehabilitation-pipeline).

Layout regions#

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

  • Workspace <StudioAjaFilmVfxPipelineWorkspace />:
    • <h1> "Aja Film/VFX Pipeline Workspace" + summary (data-aja-film-vfx-pipeline-summary).
    • Capability Summary panel (data-aja-film-vfx-pipeline-capability-summary, <h2>) — static descriptive block.
    • Visual Quality Operations Lane (data-aja-film-vfx-pipeline-operations-lane, <h2>) — the form; includes data-aja-fv-analyzer-summary (catalog summary).
  • Route Map panel (data-aja-film-vfx-pipeline-route-map, <h2> "Route Map"): 5 STUDIO_AJA_FILM_VFX_PIPELINE_ROUTE_MAP entries — primary, scenes, exports, revisions, governance — exposed with data-aja-film-vfx-pipeline-route-map-entry / data-route-path.
  • Quick-action lane (data-aja-film-vfx-pipeline-quick-actions): two Link.quickAction anchors. No breadcrumb panel.

States#

The lane fetches GET /v1/admin/aja/film-vfx-pipeline on mount.

  • Loadingdata-aja-fv-loading "Loading visual-quality analyzer...".
  • Unauthorizeddata-aja-fv-unauthorized (401/403; default "Aja workspace scope required to analyze visual quality.").
  • Errordata-aja-fv-error.
  • Ready (form)data-aja-fv-catalog with analyzer, sub-score count, impression count, data-aja-fv-sub-score spans, data-aja-fv-impression-option spans, and idle data-aja-fv-form.
  • Resultdata-aja-fv-result with stable score / aesthetics / appeal / clarity / impression attributes, data-aja-fv-headline (score + impression), and data-aja-fv-subscores (aesthetics / appeal / clarity).
  • Validation errordata-aja-fv-analyze-error (e.g. "Provide at least 2 frames." / "Frames must be valid JSON.").
  • Pending — controls and submit disable while data-aja-fv-form-state="analyzing" / data-aja-fv-submit-state="analyzing".
  • Mobile/touch containment — form controls and route actions remain at least 44 px tall with no horizontal overflow.

Interactions#

Analyze form (data-aja-fv-form)#

  • Joint ids — input data-aja-fv-joints (default Hips, LeftShoulder, RightShoulder, LeftHand, RightHand).
  • Frames (JSON) — textarea data-aja-fv-frames (≥2 frames).
  • Analyze visual quality — submit data-aja-fv-submit; fires POST /v1/admin/aja/film-vfx-pipeline/analyze with { joints, frames }; locked with data-aja-fv-submit-state="analyzing" while the real request is pending.

Route Map#

  • Route entries (5) — non-interactive listing with exact path ordering.

Quick-action lane#

  • "Open Aja Medical/Rehabilitation Pipeline workspace"/studio/aja/medical-rehabilitation-pipeline
  • "Back to Studio workspace index"/studio

Data & contracts#

  • Reads: GET /v1/admin/aja/film-vfx-pipeline (catalog: analyzer, summary, subScores, impressions); client fails closed unless the expected visual-quality analyzer, all three sub-score keys, and all four impression labels are present.
  • Writes: POST /v1/admin/aja/film-vfx-pipeline/analyze{ score, aestheticsScore, appealScore, clarityScore, impression }; client fails closed unless every score is finite and the impression is one of the expected labels.
  • Realtime: none.
  • Caching: client fetch on mount (cache: 'no-store'); SSR shell.
  • Auth/role check: BFF endpoint admin-scoped + fail-closed; route gated signed-in + studio via proxy.

Cross-references#

Verification evidence#

  • apps/oshun/web/e2e/studio-aja-film-vfx-pipeline.spec.ts runs against the real Next Studio shell and local BFF, forwarding browser bearer auth rather than mocking the visual-quality contract.
  • The spec covers anonymous redirect, Aja-admin catalog load, exact shipped balanced output, edited asymmetric low-hand poor output, local validation with no POST, BFF validation details, malformed result, transport failure, loading / 503 / malformed / non-admin states, pending form locking, mobile no-overflow
    • 44px controls, scoped axe, and direct BFF 401/403/400/200 gates.

Open questions / known gaps#

  • Route Map lists scenes/exports/revisions/governance child routes that are not yet implemented as pages.