V1 Web PWA · Surface walkthrough

Studio Hathor · Story Graph Authoring

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

walked
8sections4 minread

On this page

Context. surface studio · domain hathor · route /studio/hathor/story-graph-authoring · auth signed-in + studio entitlement · source apps/oshun/web/src/app/studio/hathor/story-graph-authoring/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 (still the dense expert-mode template, not yet migrated to the admin lane-console architecture)

Purpose#

Dense expert-mode workspace for story-graph topology, branch continuity, and policy-aware release governance over StoryGraphAuthoringRecords. Unlike the sibling Hathor routes (which are admin lane consoles), this one is still the older list-detail-wizard template: it reads records from a studio-scoped BFF endpoint and best-effort persists wizard mutations back, with operator-role gating (admin / editor / viewer), command palette, collaboration, audit, and production-readiness panels.

Entry points#

  • Quick-action link from /studio/hathor/dialogue-tree-authoring, /studio/hathor/journal-and-codex, and the /studio/hathor/narrative aggregator — "Open Hathor Story Graph Authoring workspace"
  • Embedded inside /studio/hathor/narrative as the "Story Graph Authoring Lane"
  • Direct URL / bookmark — yes; alternates.canonical set to /studio/hathor/story-graph-authoring
  • Studio overview — see ../../studio-overview.md

Layout regions#

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

  • Workspace <StudioHathorStoryGraphAuthoringWorkspace /> (data-hathor-story-graph-authoring-workspace, with data-hathor-story-graph-authoring-density / -viewport-mode / -focused-section / -high-contrast root attributes):
    • WorkspaceHeading <h1> — "Hathor Story Graph Authoring Workspace" + intro <p> "Dense expert-mode shell for story graph topology…"
    • Multiple <h2> panels: Expert Controls (data-hathor-story-graph-authoring-controls-grid), Command Strip, Command Palette, Capability Lanes (data-hathor-story-graph-authoring-capability-lanes), Story Graph Records, Detail View, Create and Edit Wizard, Collaboration, Realtime Stream Status, Progressive Disclosure, Import / Export and Parity, Policy Controls, Production Readiness, Observability, Telemetry, Accessibility QA, Audit and Change History, In-product docs and guidance
  • Route Map panel data-hathor-story-graph-authoring-route-map<h2> "Route Map" listing the 5 STUDIO_HATHOR_STORY_GRAPH_AUTHORING_ROUTE_MAP entries (graphs / nodes / edges / governance child paths)
  • Quick-action lane — two Link.quickAction anchors: Dialogue Tree Authoring, Back to Studio workspace index

States#

  • Loading / hydrated — server shell; the client component fetches records from the BFF on mount and falls back to its in-component seed set when the fetch returns no usable records
  • Records present — list / detail / wizard over StoryGraphAuthoringRecords
  • Role-gated (viewer / editor / restricted tier) — wizard and stream mutations are blocked with notices like "Restricted tier requires admin for wizard mutations." / "Production signoff requires admin role."
  • Error (unrecoverable) — bubbles to nearest error.tsx

Interactions#

Expert controls#

  • Densitydata-hathor-story-graph-authoring-density-select
  • Breakpoint previewdata-hathor-story-graph-authoring-breakpoint-preview-select
  • Focused sectiondata-hathor-story-graph-authoring-focused-section-select
  • Command strip / palettedata-hathor-story-graph-authoring-command-strip-toggle, -command-palette-toggle, -command-palette-search, -command-palette-action (e.g. "Focus blockers")

Records / wizard / governance#

  • Bulk status-bulk-set-review / -bulk-set-blocked
  • Wizard — Create and Edit Wizard (gated by admin role + tier)
  • Collaboration — assignee, approval, comments (@mention parsing)
  • Production signoff — approve / revoke (admin-only)
  • Audit & change history, Accessibility QA, Telemetry, Observability panels

Route Map panel#

  • Route entries — verify match with STUDIO_HATHOR_STORY_GRAPH_AUTHORING_ROUTE_MAP (5 entries)

Quick-action lane#

  • "Open Hathor Dialogue Tree Authoring workspace"/studio/hathor/dialogue-tree-authoring
  • "Back to Studio workspace index"/studio

Data & contracts#

  • Reads: GET /v1/studio/hathor/story-graph-authoring/records (STORY_GRAPH_RECORDS_ENDPOINT) — returns { records: [...] }; on non-2xx or malformed body the component falls back to its in-component seed records
  • Writes: POST /v1/studio/hathor/story-graph-authoring/records — best-effort void fetch (keepalive: true) that persists a wizard record; a failed write never blocks the wizard
  • Realtime: a Realtime Stream Status panel is present (gated by role/tier)
  • Caching: client fetch, cache: 'no-store', buildBffAuthHeaders()
  • Auth/role check: studio-scoped (note: /v1/studio/..., not /v1/admin/... like the sibling lane consoles); additional in-component operator-role gating (admin / editor / viewer); route gated signed-in + studio by the BFF proxy

Cross-references#

Open questions / known gaps#

  • This route is the one Hathor surface in this set that has NOT been migrated to the admin lane-console pattern — it still ships the dense expert-mode template (records list-detail-wizard, command palette, density / viewport / high-contrast toggles, collaboration, audit, telemetry, production-readiness). Confirm whether the migration is pending or whether this template is intentionally retained here.
  • The POST write is best-effort (void fetch); confirm whether record persistence is meant to be authoritative and surfaced to the operator.
  • Hathor is unconfirmed-v1 per WALKTHROUGH/matrix/routes.csv. Confirm whether the dedicated /studio/hathor/ routes ship at V1 or are internal-only.