V1 Web PWA · Surface walkthrough

Studio Aja · SVC Motion Pipeline

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

walked
8sections3 minread
Markdown source
On this page

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

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)

Purpose#

Aggregator workspace that composes five sibling Aja lane consoles into one motion-pipeline service surface: Pipeline Stages, Per-Stage Configuration, Quality Presets, Job Lifecycle, and Queue Statistics. It owns no /v1 fetch; live data and controls come from the embedded leaves. The page adds a Capability Summary, a breadcrumb, a Route Map, and a quick-action lane.

Entry points#

  • Direct URL / bookmark — /studio/aja/svc-motion-pipeline.
  • Studio nav — Domain-bridge studios section of /studio.
  • Breadcrumb parent — /studio/aja/pipeline-stages.
  • Quick-actions — Pipeline Stages, Per-Stage Configuration, Quality Presets, Job Lifecycle, Queue Statistics.

Layout regions#

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

  • Breadcrumb panel (data-aja-svc-motion-pipeline-breadcrumbs): <nav aria-label="Aja SVC Motion Pipeline breadcrumbs"> → Studio (link) / Aja Pipeline Stages (link → /studio/aja/pipeline-stages) / SVC Motion Pipeline (aria-current="page").
  • Workspace <StudioAjaSvcMotionPipelineWorkspace />:
    • <h1> "Aja SVC Motion Pipeline Workspace" + summary (data-aja-svc-motion-pipeline-summary).
    • Capability Summary (data-aja-svc-motion-pipeline-capability-summary, <h2>) — 4 cards (data-aja-svc-motion-pipeline-capability=<id>): Pipeline Orchestration, Execution Observability, Configuration and Security Governance, Parity and Release Assurance.
    • Pipeline Stages Lane (data-aja-svc-motion-pipeline-pipeline-stages-lane) → embeds <StudioAjaPipelineStagesWorkspace />.
    • Per-Stage Configuration Lane (data-aja-svc-motion-pipeline-per-stage-configuration-lane) → embeds <StudioAjaPerStageConfigurationWorkspace />.
    • Quality Presets Lane (data-aja-svc-motion-pipeline-quality-presets-lane) → embeds <StudioAjaQualityPresetsWorkspace />.
    • Job Lifecycle Lane (data-aja-svc-motion-pipeline-job-lifecycle-lane) → embeds <StudioAjaJobLifecycleWorkspace />.
    • Queue Statistics Lane (data-aja-svc-motion-pipeline-queue-statistics-lane) → embeds <StudioAjaQueueStatisticsWorkspace />.
  • Route Map panel (data-aja-svc-motion-pipeline-route-map, <h2> "Route Map"): 6 STUDIO_AJA_SVC_MOTION_PIPELINE_ROUTE_MAP entries.
  • Quick-action lane: five Link.quickAction anchors (no self-link).

States#

No own data fetch; runtime state is per embedded lane (each leaf runs its own Loading / Unauthorized / Error / Ready lifecycle).

  • Loading — per embedded lane.
  • Unauthorized — per embedded lane (admin-scope 401/403).
  • Error — per embedded lane.
  • Populated — all five lanes render.
  • Empty — N/A; cards and lanes always render.

Interactions#

  • "Studio" → /studio
  • "Aja Pipeline Stages" → /studio/aja/pipeline-stages
  • "SVC Motion Pipeline" — aria-current="page"

Workspace body#

  • Capability cards (4) — non-interactive.
  • Pipeline Stages Lane → embeds StudioAjaPipelineStagesWorkspace.
  • Per-Stage Configuration Lane → embeds StudioAjaPerStageConfigurationWorkspace (see ./studio-aja-per-stage-configuration.md).
  • Quality Presets Lane → embeds StudioAjaQualityPresetsWorkspace (see ./studio-aja-quality-presets.md).
  • Job Lifecycle Lane → embeds StudioAjaJobLifecycleWorkspace.
  • Queue Statistics Lane → embeds StudioAjaQueueStatisticsWorkspace.

Route Map#

  • Route entries (6) — non-interactive listing.

Quick-action lane#

  • "Open Aja Pipeline Stages workspace" → /studio/aja/pipeline-stages
  • "Open Aja Per-Stage Configuration workspace" → /studio/aja/per-stage-configuration
  • "Open Aja Quality Presets workspace" → /studio/aja/quality-presets
  • "Open Aja Job Lifecycle workspace" → /studio/aja/job-lifecycle
  • "Open Aja Queue Statistics workspace" → /studio/aja/queue-statistics
  • "Back to Studio workspace index" → /studio

Data & contracts#

  • Reads: none at page level — delegated to the embedded leaves (e.g. Per-Stage Configuration reads /v1/admin/aja/per-stage-configuration and Quality Presets reads /v1/admin/aja/quality-presets; the rest fetch their own catalogs on mount).
  • Writes: none at page level; each leaf fires its own POST verbs.
  • Realtime: none.
  • Caching: client fetch on mount (cache: 'no-store') per leaf; SSR shell.
  • Auth/role check: BFF endpoints admin-scoped + fail-closed per lane; route gated signed-in + studio via proxy.

Cross-references#

Open questions / known gaps#

  • Pipeline Stages, Job Lifecycle, and Queue Statistics lanes are not yet in this walkthrough sweep — link once those files are created.