Step 5/17 av Playground v3-leveransen (Session 2, Wave 2).
5 grouped sections (organization/technology/security/architecture/business)
rendered with Tier 3 .form-progress sidebar and .expansion components per
group. Validation via .error-summary with click-to-focus links.
ONBOARDING_SCHEMA mirrors agents/onboarding-agent.md Phase 1-5 (18 fields
total). commitOnboarding() writes to state.shared.<group>.<field> via
Proxy → throttled IDB/localStorage write. Re-onboard is just navigate
back to onboarding — pre-fills from state automatically.
Verified via vm sandbox: bootstrap auto-routes to onboarding when no
org.name, commitOnboarding produces >=5 keys in shared.organization,
validation catches required-empty (2) and accepts filled (0).
Surface routing: showSurface() toggles [hidden] across data-surface
sections. scheduleRender batches via queueMicrotask. Action router
dispatches data-action attributes to ACTIONS map. README/CLAUDE.md-update
deferred til Step 17 (Session 5).
Step 3/17 av Playground v3-leveransen.
Eksport:
- buildEnvelope(): { appId, schemaVersion, exportedAt, shared, projects,
activeProjectId, activeSurface, preferences } — JSON.parse(JSON.stringify(...))
for å strippe Proxy-wrappere
- exportState(): Blob + URL.createObjectURL + programmatisk <a download>-klikk
+ revokeObjectURL etter 0ms timeout. File System Access API krever HTTPS
(secure context) og er ikke tilgjengelig på file:// — derfor Blob-pattern.
- Filnavn-format: ms-ai-architect-playground-<ISO-stamp>.json
Import:
- importState(File): file.text() -> JSON.parse -> envelope-validering (appId
+ schemaVersion required) -> migrateState() -> persistence.save() -> in-place
state-update (Proxy-binding må bevares — kan ikke bytte raw-referansen)
-> manuell 'change'-event-dispatch så subscribers re-rendrer
- file.text() er Promise<string> som fungerer på file:// uten secure context
MIGRATIONS-pipeline:
- Eager: alle migrasjoner kjøres sekvensielt fra fil-versjon til SCHEMA_VERSION
ved import (ikke lazy ved access)
- Nøkkel-format: 'N->M' (fortløpende). Aldri hopp over et steg.
- Kaster eksplisitt feil ved manglende migrasjons-funksjon eller ved
funksjon som ikke setter schemaVersion korrekt — silent corruption
unngås (brief Risk High).
Eksponerte globals: __buildEnvelope, __exportState, __importState, __MIGRATIONS.
Verify-assert: JSON.parse(JSON.stringify(window.__buildEnvelope())).schemaVersion === 1
Plan: .claude/projects/2026-05-03-playground-v3-architecture/plan.md (Step 3)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Step 2/17 av Playground v3-leveransen.
State-skjelett:
- StateBus extends EventTarget (sharedBus + projectBus)
- Dyp Proxy med set/deleteProperty-traps som batcher dispatchEvent via
queueMicrotask (N synkrone mutasjoner -> én change-event per tick)
- Path tracking: subscribers får detail.paths for å filtrere relevante grener
- INITIAL_STATE med shared.{organization,technology,security,architecture,
business} + projects[] + activeProjectId/Surface + preferences.theme
Persistens:
- IDB primær: én DB ('ms-ai-architect-playground-v1') med 3 stores
(shared, projects, meta). Promise-wrapper rundt indexedDB.open.
- Synkrone migrasjoner i onupgradeneeded med oldVersion-guards (callback-stil
cursor — async cursor-iterasjon er forbudt per w3c/IndexedDB#282)
- db.onversionchange = () => db.close() defensivt på alle koblinger
- localStorage-fallback ved IDB-feil (Safari private mode, kvote): rå JSON
i STATE_KEY, warn ved >4.5 MB nær 5 MiB cap
- Throttled writer: debounce 300 ms etter siste mutasjon
Bootstrap:
- Auto-kjørt på slutten av <body> (DOM allerede parsed)
- window.__store + window.__persistence eksponert for Verify-asserts
Verify-asserts (i nettleser-konsoll på file://-åpnet HTML):
typeof window.__store !== 'undefined' && window.__store.state.schemaVersion === 1
Plan: .claude/projects/2026-05-03-playground-v3-architecture/plan.md (Step 2)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Step 1/17 av Playground v3-leveransen (Session 1, Wave 1).
- Single-file HTML med klassisk inline-script (file://-kompatibel per WHATWG
html#8121: external type=module-scripts feiler på file:// i Chrome+Firefox)
- 7 vendored CSS-link-tags i korrekt rekkefølge: fonts, tokens, base, components,
components-tier2, components-tier3, components-tier3-supplement
- 4 placeholder-overflater (#surface-onboarding, #surface-home, #surface-catalog,
#surface-project) — fylles ut i Steps 5-7
- IIFE med STATE_KEY ('ms-ai-architect-state-v1') og SCHEMA_VERSION (1) konstanter
- Eksponerer __STATE_KEY og __SCHEMA_VERSION på window for Verify-asserts
- v2-fila beholdes parallelt frem til Step 17 (sletting)
Plan: .claude/projects/2026-05-03-playground-v3-architecture/plan.md
Brief: .claude/projects/2026-05-03-playground-v3-architecture/brief.md
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
