Tutorials Architecture

The tutorials app is organized as a monorepo of focused packages with strict typing and no circular dependencies.

packages/
├── playground-shared/       # Types and interfaces
├── playground-runtime/      # Browser runtime adapter (local mode)
├── playground-sdk-adapter/  # Live Causet SaaS adapter
├── causet-sdk/              # TypeScript HTTP client (from jamlet causet-sdk-python)
├── playground-core/         # Pipeline, persistence, share URLs
├── playground-examples/     # Curated demo applications
└── playground-ui/           # React components and Monaco editor

Design principles

Real execution, not fake output. The browser adapter implements the same PlaygroundRuntimeAdapter interface that a future WASM compiler or server proxy would use. Swapping backends requires almost zero UI changes.

Event streaming. Events dispatch with realistic timing delays so you can watch the ledger fill incrementally — like production.

Production quality. Strong typing throughout (no any), lazy-loaded Monaco, virtualized-friendly components, accessibility labels, and dark/light themes.

Execution pipeline

Parse → Validate → Compile → Execute Commands
  → Generate Events → Dispatch → Run Projections
  → Materialize Queries → Display Outputs → Complete

Each stage records timing metrics visible in the status bar and Metrics tab.

Package dependencies

Future-ready

The architecture supports upcoming features without rewrites:

• Live Causet mode — execute intents against Causet SaaS via @causet/causet-sdk (already wired in the sidebar)
• AI code generation and explanations
• Collaborative / multiplayer editing
• GitHub Gist import
• Project save and version history

See Runtime Adapter for the swap-in contract.