V1 Web PWA · Surface walkthrough

Studio · Security Hardening Program

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

walked
9sections4 minread

On this page

Context. surface studio · domain governance · route /studio/security-hardening-program · auth signed-in + studio entitlement · source apps/oshun/web/src/app/studio/security-hardening-program/page.tsx

Last walked. 2026-07-03 real-dev-infra Playwright addendum — focused route journey verified direct admin navigation, live BFF catalog, seeded and edited posture scoring, deterministic remediation tie-breaks, client-only JSON validation, live BFF 400 details, pending-submit lockout, malformed/offline fail-closed paths, catalog loading/error, non-admin fail-closed auth, direct BFF auth/schema gates, quick-action affordances, shared axe, mobile containment, and anonymous redirect. Evidence: WALKTHROUGH/results/v1-real-infra-run-2026-06-22.md §262; apps/oshun/web/e2e/studio-security-hardening-program.spec.ts. Previous: 2026-05-29 automated runtime walk (Playwright headless) — render, /v1 data (2xx), console/page-errors, expected content, screenshot verified.

Purpose#

Score security posture with the real scorer: the Security Posture Lane computes severity-weighted control coverage, a posture score (achieved weight ÷ total weight), and a remediation backlog ranked by the weight still at stake. It is a live admin console wired to /v1/admin/studio/security-posture, not an in-page simulation.

Entry points#

  • Direct URL / bookmark/studio/security-hardening-program (signed-in + studio entitlement; admin scope required to score)
  • Sibling Studio routes — reached via the quick-action panel on data-retention-lifecycle-controls, internationalization-localization, and other governance/operations pages

Layout regions#

page.tsx mounts <ShellLayout active="studio"> and renders <StudioSecurityHardeningProgramWorkspace /> followed by a single panel of quick-action links.

  • Shell: ShellLayout chrome with the Studio tab active
  • Workspace heading: WorkspaceHeading renders the page <h1> "Studio Security Hardening Program", followed by the data-security-hardening-summary paragraph
  • Security Posture Lane: an <h2> data-sp-lane-heading ("Security Posture Lane") section with the load states and, when ready, the evaluate form, remediation backlog, and controls table
  • Quick-actions panel: data-sp-quick-actions data-sp-quick-action-count="5" wraps 5 sibling quickAction Links: data-sp-quick-action="data-retention-lifecycle-controls", sdk-documentation-integration, webhooks-external-automation, api-gateway-bff-composition, and internationalization-localization. No self-link and no Route Map panel.

States#

  • Loadingdata-sp-loading ("Loading posture scorer…")
  • Unauthorizeddata-sp-unauthorized ("Access restricted.") on 401/403
  • Errordata-sp-error ("Could not load the posture scorer.")
  • Ready / formdata-sp-enums ("N severities · M statuses") plus the data-sp-form evaluate form seeded with DEFAULT_PAYLOAD and data-sp-form-state="idle|pending"
  • Pending submitdata-sp-submit-state="pending", disabled, aria-disabled="true", and aria-busy="true" while the evaluate POST is in flight
  • Resultdata-sp-result headline (data-sp-headline with data-sp-score, data-sp-critical-gaps), the data-sp-remediation backlog (data-sp-remediation-heading, data-sp-remediation-row), and the data-sp-controls table of data-sp-control-row rows (data-sp-control-gap)
  • Evaluate errordata-sp-evaluate-error for invalid JSON, a non-200 response, an offline evaluate POST, or a malformed 200 success payload
  • Offline — catalog GET fails closed to the error panel; the evaluate POST surfaces the generic error when the network is unreachable
  • Gated — admin scope denied → data-sp-unauthorized; the route itself is proxy-gated to signed-in + studio
  • Standalone PWA — renders within the shell; no URL-bar dependency

Interactions#

  • Controls (JSON)textarea data-sp-payload, aria-label="controls json", seeded with { controls[{ controlId, name, severity, status }] }
  • Score posturebutton data-sp-submit (type="submit"); POSTs the parsed JSON to /v1/admin/studio/security-posture/evaluate, setting data-sp-result on a 200 with a valid result, or data-sp-evaluate-error otherwise
  • Quick-action links — each quickAction Link navigates to its sibling Studio route (see Layout regions for the 5 targets)

Data & contracts#

  • Reads: GET /v1/admin/studio/security-posture on mount — returns the catalog (severities[], controlStatuses[])
  • Writes: POST /v1/admin/studio/security-posture/evaluate — returns { result: { controls[], postureScore, remediation[], summary{ implementedCount, partialCount, notImplementedCount, criticalGapCount } } }
  • Realtime: none
  • Caching: client fetch with cache: 'no-store'; buildBffAuthHeaders() attaches the bearer token
  • Auth/role check: admin-scoped fail-closed — admin:* or admin:studio, 401/403 under the studio workspace gate

E2E coverage#

  • apps/oshun/web/e2e/studio-security-hardening-program.spec.ts forwards GET /v1/admin/studio/security-posture and POST /v1/admin/studio/security-posture/evaluate to the live dev BFF with explicit admin and non-admin dev bearers. It covers direct admin navigation, catalog bearer forwarding, seeded score 53.33, remediation order c2 → c3 → c5, perfect posture, deterministic same-gap remediation tie-breaks, malformed JSON zero-POST rejection, live BFF invalid-payload details, pending-submit lockout, catalog loading/error, malformed catalog, malformed 200 evaluate success, network-unreachable evaluate error, non-admin fail-closed state, direct BFF auth/schema gates, quick-action href/touch targets, shared axe, anonymous redirect, and mobile containment.

Cross-references#

Open questions / known gaps#

  • Confirm whether the page will gain a breadcrumb/Route Map panel like other Studio surfaces, or keep the flat quick-action panel — current page.tsx keeps the flat quick-action panel with no self-link and no Route Map panel as of 2026-07-03.
  • Document the live control inventory the scorer should ingest once posture scoring runs against real infrastructure findings. Current V1 browser behavior scores caller-supplied JSON through the real deterministic BFF scorer; automatic infrastructure-finding ingestion remains a product data source gap, not a browser interaction gap.