V1 Web PWA · Surface walkthrough

Studio · Yemaya Remote Actor Home Capture

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

walked
8sections9 minread

On this page

Context. surface studio · domain yemaya · route /studio/yemaya/remote-actor-home-capture · auth signed-in + studio entitlement · source apps/oshun/web/src/app/studio/yemaya/remote-actor-home-capture/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#

The most substantive Yemaya studio surface in the bridge cluster: director-facing setup wizard for remote actors performing from home, covering camera placement, lighting shape, backdrop choice, acoustics, calibration, segmentation, color matching, network gating, and dozens of specialty audio and image processing panels. Each setup lane resolves into a readiness score that feeds a director-safe capture brief and an export payload. This is a real, deeply-implemented workspace — like every Yemaya route, it has its own dedicated lane-console component (there is no shared placeholder across Yemaya routes).

Entry points#

  • Linked from /studio/yemaya/voice-video-communication workspace's in-body next-action link
  • Linked from /studio/yemaya/virtual-production-stage workspace's in-body next-action link
  • Linked from /studio index when published
  • Direct URL / bookmark — yes (signed-in + studio entitlement)

Layout regions#

ShellLayout active="studio" then:

  • Workspace panel (data-yemaya-remote-actor-home-capture-workspace, data-yemaya-remote-actor-home-capture-hydrated):
    • Header row with phase chip "Phase 69.1.1.2"
    • <h1> "Yemaya Remote Actor Home Capture Workspace"
    • Summary paragraph (data-yemaya-remote-actor-home-capture-summary): "Guided setup wizard for actors performing from home. It stages camera placement, lighting shape, and backdrop readiness into a director-safe capture brief that can be reviewed before calibration and first rehearsal."
    • Overview grid (overviewGridStyle, 3 articles):
      • Readiness carddata-yemaya-remote-actor-home-capture-readiness-score (large %), data-yemaya-remote-actor-home-capture-headline, progress bar, "/ setup lanes are locked." status text
      • Template And Capture Envelope card — setup template <select>, "Apply template" button, plan envelope target lines (camera distance range, camera height target, backdrop clearance target)
      • Director Brief card — summary text and risk-calls bulleted list (data-yemaya-remote-actor-home-capture-risk-calls); shows "No critical capture risks remain." fallback when empty; notice text line under list
    • Wizard + Active Guidance row (detailGridStyle):
      • Wizard step rail aside (data-yemaya-remote-actor-home-capture-step-rail): one button per plan step (data-yemaya-remote-actor-home-capture-step=<stepId>, …step-status=<status>), each showing index, title, score chip coloured by status, and summary line
      • Wizard active step (data-yemaya-remote-actor-home-capture-wizard, …active-step=<stepId>): status uppercase tag, <h2> title, step summary, field-set rendered by stepFieldset() (varies per step: room-and-camera, framing, lighting, backdrop, notes), three buttons: Previous step (data-yemaya-remote-actor-home-capture-previous-step), Next step (…next-step), Refresh director brief (…export-brief)
      • Active Guidance card (data-yemaya-remote-actor-home-capture-active-findings): one article per finding (data-yemaya-remote-actor-home-capture-finding=<itemId>) showing status tag, title, detail, remediation list
    • Panel grid (detailGridStyle): in source order — Actor Profile, Hardware Recommendation, Acoustics, Voice Capture, Room Tone Removal, Dialogue Mixing, Voice Quality Enhancement, Automatic Gain Normalization, Isolated Dialogue Recording, Backup Recording System, Lip-Sync Verification, Dialogue 3D Audio Positioning, CGI Room Acoustics Simulation, Dialogue Distance Attenuation Filtering, Dialogue Obstruction/Occlusion Modeling, Dialogue Binaural Ambisonics Rendering, Foley Spatial Placement, Environmental Ambience Generation, Audio Transition Engine, Remote ADR Beep Streamer Workflow, Remote ADR Cueing System, ADR Suggestion System… plus image-pipeline panels: Calibration, Color Checker, Edge Feathering, Segmentation, Chroma Key, Lighting, Network, Pose Estimation, Pose Lifting, Face Tracking, Hand Tracking, Gaze Estimation, Mark Hitting, Actor Lighting, Normal Map, Rim Light Synthesis, HDR Light Probe, Noise Reduction, Lens Simulation, Film Grain, Dynamic Range Expansion, Rolling Shutter, Depth Of Field, Frame Interpolation, White Balance, Codec Transcoding, Re-Identification, Pre-Shoot Self-Test, Recalibration, Synchronization (~72 panel components in total — verify against the import list in the workspace source)
    • Actor Checklist card (article) — data-yemaya-remote-actor-home-capture-checklist with one row per plan.actorChecklist item, "Locked" / "Needs work" tag per row
    • Next Actions And Export card (article) — bulleted next actions (data-yemaya-remote-actor-home-capture-next-actions), read-only export textarea (data-yemaya-remote-actor-home-capture-export-payload), two in-body nav links: "Open Yemaya Voice/Video Communication workspace", "Open Yemaya Virtual Production Stage workspace"
  • Route Map panel (data-yemaya-remote-actor-home-capture-route-map): the workspace uses the longest route map in the batch — primary plus wizard/ [sessionId], hardware/[profileId], acoustics/[sessionId], calibration/[sessionId], color-checker/[sessionId], lighting/[lightingPresetId], segmentation/[sessionId], and more (see STUDIO_YEMAYA_REMOTE_ACTOR_HOME_CAPTURE_ROUTE_MAP source)
  • Page-level quick-action panel (separate from the workspace's own in-body nav links): "Open Yemaya Voice/Video Communication workspace", "Back to Studio workspace index"

States#

  • Loading — workspace is 'use client'; pre-hydration data-yemaya-remote-actor-home-capture-hydrated="false". Verify the pre-hydration shell doesn't shift layout when client takes over.
  • Studio entitled, no template applied — initial state shows the default form values, readiness score derived from defaults.
  • Template applieddata-yemaya-remote-actor-home-capture-apply-template click runs applyTemplate() (via useTransition) and resets active step to 'room-and-camera'; the notice line reflects which template was applied.
  • Step navigation — Previous/Next/step-button transitions update data-yemaya-remote-actor-home-capture-active-step; Previous is disabled at first step, Next is disabled at finalStepId.
  • Findings populated — each step exposes findings per plan.steps[…].findings; status colours follow statusAccent().
  • Risk calls empty — director brief shows "No critical capture risks remain." fallback.
  • Export refresheddata-yemaya-remote-actor-home-capture-export-brief click sets exportPayload to plan.exportPayload, flips active step to final-brief, and emits notice "Export payload refreshed from the current setup state."
  • Per-panel adapter states — each downstream panel has its own states driven by injected *BrowserAdapter props; walk them under each panel's own walkthrough.
  • Workspace error — guidance findings and panel-specific notices surface problems inline; no global error boundary on this page.
  • Offline — most computations are deterministic over the form state; adapters needing the browser (capture device probes, voice analysis, network testing) will fail offline — confirm graceful degradation per panel.
  • Standalone PWA — desktop-first layout; verify scroll, button reach, and field labels on mobile.

Interactions#

  • Phase chip "Phase 69.1.1.2" — non-interactive label

Overview grid#

  • Readiness card — non-interactive display of plan.readinessScore (number, headline, progress bar, locked-lane count)
  • Setup template select (data-yemaya-remote-actor-home-capture-template)
    • Function: selects a HomeStudioSetupTemplateId from HOME_STUDIO_SETUP_TEMPLATES
    • Keyboard: standard <select> behaviour; Enter/Space + arrow keys
    • Screen reader: option labels from template.label
  • "Apply template" button (data-yemaya-remote-actor-home-capture-apply-template, className="quickAction")
    • Function: builds setup input from template, applies it via setFormState, resets active step to 'room-and-camera', clears exportPayload, updates notice
    • Disabled when: isPending (during useTransition work) — label becomes "Applying template…"
  • Envelope text block (data-yemaya-remote-actor-home-capture-envelope) — non-interactive; shows camera distance range, camera height target, backdrop clearance target from plan.envelope
  • Risk calls list (data-yemaya-remote-actor-home-capture-risk-calls) — non-interactive bullets

Wizard step rail#

  • Step buttons (one per plan step, data-yemaya-remote-actor-home-capture-step=<stepId>)
    • Function: goToStep(step.stepId) switches the active wizard step
    • Keyboard: standard button; Enter activates
    • Visual cue: border colour follows statusAccent(step.status); active step elevated via transform: 'translateY(-1px)' and dark background

Wizard active step#

  • Field set — varies per step (see stepFieldset()):
    • room-and-camera: capture profile, device class, mount type, performer height, room depth, width, ceiling height
    • framing: lens equivalent (mm), camera distance, camera height, eyeline offset
    • lighting: lamp count, key/fill/rim light source, key angle, window behind subject, light control
    • backdrop: backdrop type, distance, clutter, wardrobe contrast
    • notes: free-text notes textarea
  • "Previous step" button — disabled at first step
  • "Next step" button — disabled at finalStepId
  • "Refresh director brief" button — refreshes export payload, sets activeStep='final-brief'

Active Guidance#

  • Finding articles (one per finding for the active step) — non-interactive; show status tag, title, detail, remediation list

Panel grid#

The workspace embeds ~72 specialty panels (audio, image pipeline, network, pose, etc.). Each panel is its own component with its own walkthrough; do not duplicate per-control bullets here. Walk by:

  • Actor Profile panel — actor identity, storage adapter
  • Hardware Recommendation panel — budget-scoped upgrade suggestions
  • Acoustics panel — room-noise baselines, clap-decay analysis
  • Voice Capture / Room Tone Removal / Dialogue Mixing / Voice Quality Enhancement / Automatic Gain Normalization / Isolated Dialogue Recording / Backup Recording System / Lip-Sync Verification / Dialogue 3D Audio Positioning / CGI Room Acoustics Simulation / Dialogue Distance Attenuation Filtering / Dialogue Obstruction-Occlusion Modeling / Dialogue Binaural Ambisonics Rendering / Foley Spatial Placement / Environmental Ambience Generation / Audio Transition Engine / Remote ADR Beep Streamer Workflow / Remote ADR Cueing System / ADR Suggestion System — audio chain
  • Calibration / Color Checker / Edge Feathering / Segmentation / Chroma Key / Lighting / Pose Estimation / Pose Lifting / Face Tracking / Hand Tracking / Gaze Estimation / Mark Hitting / Actor Lighting / Normal Map / Rim Light Synthesis / HDR Light Probe / Noise Reduction / Lens Simulation / Film Grain / Dynamic Range Expansion / Rolling Shutter / Depth Of Field / Frame Interpolation / White Balance / Codec Transcoding / Re-Identification / Pre-Shoot Self-Test / Recalibration / Synchronization — image pipeline + capture readiness
  • Network panel — bandwidth gating, packet-loss tolerance

Actor Checklist#

  • Checklist rows — non-interactive; show "Locked" / "Needs work" tags from plan.actorChecklist

Next Actions And Export#

  • Next actions bullets — non-interactive
  • Export payload textarea — read-only <textarea rows={14}> with monospace font; reflects exportPayload state
  • In-body link: "Open Yemaya Voice/Video Communication workspace"/studio/yemaya/voice-video-communication
  • In-body link: "Open Yemaya Virtual Production Stage workspace"/studio/yemaya/virtual-production-stage

Page-level (outside workspace)#

  • Route Map entries — non-interactive cards from STUDIO_YEMAYA_REMOTE_ACTOR_HOME_CAPTURE_ROUTE_MAP
  • "Open Yemaya Voice/Video Communication workspace" (page-level quickAction) → /studio/yemaya/voice-video-communication (note: duplicates the in-body link)
  • "Back to Studio workspace index"/studio

Data & contracts#

  • Reads: no BFF call from this page. The workspace consumes HOME_STUDIO_SETUP_TEMPLATES, HOME_STUDIO_SETUP_STEP_IDS, createHomeStudioSetupInputFromActorProfile, createHomeStudioSetupInputFromTemplate, createHomeStudioSetupWizardPlan from @yemaya/remote-film-capture.
  • Writes: none persisted — wizard state is React state, exports go through a read-only textarea.
  • Realtime: none on this page; some downstream panels accept *BrowserAdapter props that can connect to live browser capabilities (capture devices, network probes).
  • Caching: server-rendered metadata; canonical '/studio/yemaya/remote-actor-home-capture'. The page-level metadata description enumerates the workspace's capabilities at length.
  • Auth/role check: signed-in via root /studio. No additional AAA-tier gate on this route segment.

Cross-references#

  • Studio overview: ../../studio-overview.md
  • Shell auth: ../../../shell/04-auth-session.md
  • Sibling routes (this batch): /studio/yemaya/voice-video-communication, /studio/yemaya/virtual-production-stage
  • Library: libs/yemaya/remote-film-capture/ (consumed via @yemaya/remote-film-capture)
  • Feature spec: V1/features.md — Yemaya rendering substrate
  • Component source: apps/oshun/web/src/components/studio/StudioYemayaRemoteActorHomeCaptureWorkspace.tsx (~1566 lines)
  • Route map: apps/oshun/web/src/components/studio/StudioYemayaRemoteActorHomeCaptureRouteMap.ts

Open questions / known gaps#

  • ~72 panel components embed directly without lazy loading or virtual scrolling. Verify time-to-interactive on a typical signed-in session and document mitigations (code-splitting, suspense boundaries, next/dynamic).
  • All *BrowserAdapter props are page-level props.* references but the page doesn't supply them — adapters land via the props chain from a parent route or are intended to default to live browser hooks. Confirm wiring and default behaviour.
  • Export payload is read-only; no copy-to-clipboard button. Walk whether selecting + Cmd-C is the intended UX.
  • Page-level quick-action and in-body links both target /studio/yemaya/voice-video-communication. Confirm this duplication is intentional or whether one should change.
  • No persistence of wizard state across navigations; bookmarks lose input. Verify if wizard/[sessionId] sub-route is intended to add persistence.