V1 Web PWA · Surface walkthrough

Isis Creator Monetization

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

walked
9sections3 minread
Markdown source
On this page

Context. surface studio · domain isis · route /studio/isis/creator-monetization · auth signed-in + studio entitlement boundary; admin-scoped BFF data; direct legacy route hard-blocked outside the localhost E2E lane bypass · source apps/oshun/web/src/app/studio/isis/creator-monetization/page.tsx

Last walked. 2026-07-01 real-dev-infra Playwright journey — direct route hard-block, localhost lane-bypass admin session, live BFF GET/POST forwarding, valid / manual-review / blocked split plans, fail-closed malformed states, route map, quick actions, touch targets, non-admin unauthorized, and anonymous redirect. Evidence: WALKTHROUGH/results/v1-real-infra-run-2026-06-22.md#261-2026-07-01-studio-isis-creator-monetization-coverage

Purpose#

Admin lane console for revenue-split planning. The operator describes a listing's collaborators (role, percentage share, and whether each accepts) as JSON; the engine returns the computed per-collaborator shares plus warnings (e.g. over/under-allocation). Reads the role catalog and plans via /v1/admin/isis/creator-monetization; admin-scoped and fail-closed.

Entry points#

  • Sibling quick-action from /studio/isis/resource-recommendations
  • Studio index (/studio)
  • Direct URL / bookmark

Layout regions#

page.tsx mounts <ShellLayout active="studio"> (no breadcrumb panel) and three panels: the workspace, the Route Map, and sibling quick-actions.

  • Header: shell header
  • Workspace panel (data-isis-creator-monetization-workspace):
    • <h1> (WorkspaceHeading) "Isis Creator Monetization Workspace"
    • Summary paragraph (data-isis-creator-monetization-summary)
    • Available roles (data-isis-cm-roles)
    • Plan form (data-isis-cm-form)
    • Result (data-isis-cm-result) with per-collaborator shares (data-isis-cm-shares, data-isis-cm-share=<id>) and warnings (data-isis-cm-warnings, data-isis-cm-warning / data-isis-cm-no-warnings)
  • Route Map panel (data-isis-creator-monetization-route-map): <h2>Route Map</h2> over the route map (5 entries)
  • Sibling quick-actions panel: /studio/isis/resource-recommendations, /studio

States#

  • Loading — data-isis-cm-loading
  • Unauthorized — 401/403 admin-scope fail-closed; data-isis-cm-unauthorized
  • Error — non-OK / malformed; data-isis-cm-error
  • Ready (form) — roles + plan form render
  • Result — data-isis-cm-result after planning; plan failure → data-isis-cm-plan-error

Interactions#

Plan form (data-isis-cm-form)#

  • Collaborators (JSON) (data-isis-cm-collaborators, textarea, aria-label="collaborators json")
  • Plan revenue split (data-isis-cm-submit, submit) — sends POST /v1/admin/isis/creator-monetization/plan

Route Map#

  • Route-map articles ×5

Sibling quick-actions#

  • Open Isis Resource Recommendations workspace → /studio/isis/resource-recommendations
  • Back to Studio workspace index → /studio

Data & contracts#

  • Reads: GET /v1/admin/isis/creator-monetization (role catalog)
  • Writes: POST /v1/admin/isis/creator-monetization/plan (compute the revenue split)
  • Validation: client requires a non-empty generated timestamp, non-empty role/status catalogs, canonical split statuses, known roles for normalized shares, non-negative finite share totals/percents, string warnings, a lead payee that is either null or present in the normalized shares, and a successful { ok: true, result } envelope before rendering or acknowledging a plan
  • Realtime: none
  • Caching: client fetch on mount, cache: 'no-store', buildBffAuthHeaders()
  • Auth/role check: direct legacy Studio route is hard-blocked by the Studio boundary; the localhost-only E2E lane bypass exercises the signed-in Studio shell and forwards admin-scoped BFF calls fail-closed (401/403)
  • Component sources:
    • apps/oshun/web/src/components/studio/StudioIsisCreatorMonetizationWorkspace.tsx
    • apps/oshun/web/src/components/studio/StudioIsisCreatorMonetizationRouteMap.ts

Automated coverage#

  • apps/oshun/web/e2e/studio-isis-creator-monetization.spec.ts covers the direct-route hard block, localhost lane-bypass admin session, live BFF role/status catalog, valid split, manual-review terms warning, blocked under-allocation, live invalid_payload rejection, client JSON validation, pending-submit disablement, malformed catalog/plan fail-closed handling, route-map articles, quick-actions, 44px textarea/button/link hit targets, non-admin unauthorized, anonymous redirect, and the shared axe gate.
  • apps/oshun/web/src/components/__tests__/StudioIsisCreatorMonetizationWorkspace.test.tsx covers ready/unauthorized/malformed catalog behavior.
  • apps/oshun/web/src/components/__tests__/StudioIsisCreatorMonetizationWorkspace.integration.test.tsx covers write success, blocked warnings, client JSON validation, and malformed successful write handling.
  • apps/oshun/web/src/components/__tests__/StudioIsisCreatorMonetizationPage.test.tsx and StudioIsisCreatorMonetizationRouteMap.test.ts keep the shell/page contract and route-map content covered.

Cross-references#

Open questions / known gaps#

  • No breadcrumb on this route — navigation via sibling quick-actions
  • Creator monetization spans Aje (payments / Web3) and Hathor (economy) — confirm canonical domain owner for end-to-end payout flows
  • Route-map sub-paths are declared but not yet implemented as separate pages
  • Manual screen-reader, real touch-device, offline-mode, and telemetry delivery passes remain pending outside the automated Playwright checks