> ## Documentation Index
> Fetch the complete documentation index at: https://docs.veydra.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Model Playground Overview

> Interactive environment for building and testing system dynamics models

## Overview

The Model Playground is Veydra's central workspace where you build, modify, and test your system dynamics models. It provides an interactive environment with real-time feedback and powerful visualization tools.

## Relationship to Models and Activities

The default playground is the base experience for a model when no explicit activity is selected.

* **Model** owns lifecycle metadata (title, description, model status, repository)
* **Default Playground Settings** define how the base playground opens (default mode, available modes, library/discoverability)
* **Activities** are explicit experiences attached to a model and can override mode behavior with activity-specific configuration

In practice:

1. Open model without activity: model default playground settings are used.
2. Open explicit activity: activity settings apply and can override defaults.

You can edit default playground behavior from the model's dedicated **Playground Settings** page.

## Playground Modes

The Model Playground is organized around a **mode-based workflow** that guides you through the full modeling lifecycle. Each mode focuses on a specific phase and adapts the UI — showing relevant panels, controls, and AI assistant context.

Switch modes using the color-coded buttons in the top navigation bar.

<CardGroup cols={3}>
  <Card title="Presentation" icon="play" color="#dc3545">
    Interactive guided walkthrough of the model with slides, quizzes, and embedded content
  </Card>

  <Card title="Design" icon="wrench" color="#0d6efd">
    Build and structure your model — edit parameters, code, and stock-flow diagrams
  </Card>

  <Card title="Calibrate" icon="flask" color="#0dcaf0">
    Fine-tune parameters to match real-world data (Pro)
  </Card>

  <Card title="Experiment" icon="chart-line" color="#198754">
    Run what-if scenarios and explore different futures
  </Card>

  <Card title="Decide" icon="lightbulb" color="#ffc107">
    Compare multiple scenarios side-by-side for decision analysis (Pro)
  </Card>
</CardGroup>

### Presentation Mode

A read-only guided experience for learning about a model. Content is displayed as scrollable slides with a sticky table of contents sidebar. Slides can include rich text, embedded videos, quizzes, and buttons that navigate to other modes.

* **No editable controls** — Model Controls, System Map, and Code Editor are hidden
* **AI Assistant** adapts with presentation-specific prompts like "Take a Quick Quiz" and "Summarize this model"
* Ideal for onboarding, classroom use, or sharing insights with stakeholders

### Design Mode

The primary building mode where all structural changes happen. Parameter changes in Design mode update the **baseline configuration** that applies across all scenarios. See the dedicated [Design Mode](/playground/design) page for details.

* **Model Editor Panel** — Full access to all sliders (stocks, flows, parameters, simulation settings)
* **Stock-Flow Diagram** — Fully expanded with Flow, Causal, Params, and Loops tabs
* **Code Editor** — Direct Python code editing with Pyodide execution panel
* Charts are hidden so you can focus on model structure

<Note>
  Changes made in Design mode affect the baseline for ALL scenarios. Use Experiment mode for what-if analysis.
</Note>

### Calibrate Mode

Fine-tune your model to match historical or real-world data. See the dedicated [Calibration](/playground/calibration) page for details.

### Experiment Mode

Run what-if scenarios using your calibrated baseline. Slider changes only affect the **current scenario's post-intervention behavior** — the baseline stays fixed for comparison.

* **Model Controls** — Shows parameter sliders (not simulation settings) with save/load scenario support
* **Compare Mode** — Enabled by default, showing baseline vs. scenario on charts
* **Scenario Selector** — Save, load, rename, and delete named scenarios
* **Specialized visualizations** — Gantt charts, wait-time scatter plots, spatial visualizations (for applicable models)

### Decide Mode (Pro)

Compare multiple saved scenarios side-by-side to make strategic decisions. Automatically selects the baseline plus up to two user scenarios for comparison.

* **Multi-Scenario Selector** — Choose which scenarios to overlay on charts
* **Multi-Stock Chart Area** — All stocks shown with scenario overlays
* **Analysis Card** — Aggregated comparison metrics across scenarios
* System Map is fully hidden to maximize chart space

### Mode Availability

Not all modes appear for every model. The available modes are determined by the model's metadata:

| Mode         | Default          | Notes                  |
| ------------ | ---------------- | ---------------------- |
| Design       | Always available | Core building mode     |
| Calibrate    | Always available | Pro features gated     |
| Experiment   | Always available | Primary analysis mode  |
| Presentation | Opt-in per model | Requires slide content |
| Decide       | Opt-in per model | Pro-gated              |

When an explicit activity is opened, activity mode rules can further constrain or override this default availability.

### AI Assistant Per Mode

The AI Assistant panel automatically adapts to the current mode with a matching color theme, contextual welcome message, and mode-specific action buttons. For example, Design mode offers "Start a guided tutorial" while Decide mode offers "Strategy Comparison" and "Risk Analysis".

***

## Key Components

<CardGroup cols={2}>
  <Card title="Model Controls" icon="sliders" href="/components/model-controls">
    Parameter adjustment and simulation controls
  </Card>

  <Card title="Stock-Flow Diagram" icon="diagram-project" href="/components/stock-flow-diagrams">
    Visual representation of your model structure
  </Card>

  <Card title="Chart Area" icon="chart-line" href="/components/charts">
    Real-time simulation results and comparisons
  </Card>

  <Card title="Code Editor" icon="code">
    Direct Python code editing and customization
  </Card>
</CardGroup>

## Workflow Example

<Steps>
  <Step title="Model Setup">
    1. Load or create a new model
    2. Review the stock-flow diagram
    3. Identify key parameters to activate
  </Step>

  <Step title="Parameter Configuration">
    1. Mark important parameters as "Active"
    2. Set initial values using sliders
    3. Configure simulation time range
  </Step>

  <Step title="Calibration">
    1. Switch to Calibrate mode
    2. Adjust parameters so baseline behavior matches expectations
    3. Changes apply to both baseline and current scenario
  </Step>

  <Step title="Experimentation">
    1. Switch to Experiment mode
    2. Adjust parameters to explore what-if scenarios
    3. Compare different scenarios against the calibrated baseline
  </Step>

  <Step title="Analysis">
    1. Review chart results
    2. Export data for further analysis
    3. Save interesting scenarios
  </Step>
</Steps>

## Next Steps

<CardGroup cols={2}>
  <Card title="Calibration" icon="flask" href="/playground/calibration">
    Learn how to calibrate your model with manual, automated, and data-driven methods
  </Card>

  <Card title="Simulation Features" icon="play" href="/features/simulation">
    Learn about advanced simulation capabilities
  </Card>

  <Card title="Model Controls Guide" icon="sliders" href="/components/model-controls">
    Detailed guide to parameter management
  </Card>

  <Card title="Activities" icon="gamepad" href="/features/activities">
    Transform models into interactive games and assessments
  </Card>
</CardGroup>