# Episteme Presentations

Data-driven presentations for Episteme. Define sequences in YAML, generate Mermaid diagrams and Reveal.js slides.

## Quick Start

```bash
npm install
npm run dev    # Generate + serve
```

Then open http://localhost:3000

## Architecture

```
presentations/
├── data/
│   └── agile-agent-team.yaml    # Source of truth
├── generated/                    # Auto-generated (gitignored)
│   ├── *.mmd                    # Mermaid diagrams
│   └── *.json                   # Reveal.js data
├── reveal/
│   ├── index.html               # Reveal.js shell
│   ├── theme.css                # Clean black dark theme
│   └── renderer.js              # Reads JSON, renders slides
└── scripts/
    └── generate.ts              # YAML → Mermaid + JSON
```

## Commands

| Command | Description |
|---------|-------------|
| `npm run generate` | Generate Mermaid and JSON from YAML |
| `npm run serve` | Serve the reveal directory |
| `npm run dev` | Generate + serve |

## Data Schema

See `data/agile-agent-team.yaml` for the full schema. Key elements:

### Actors
```yaml
actors:
  research_agent:
    id: RA
    label: "Research Agent"
    color: "#3B82F6"
```

### Sequences
```yaml
sequences:
  - id: catastrophe
    title: "The Catastrophe"
    subtitle: "When Proposals Look Like Decisions"
    steps:
      - from: research_agent
        to: episteme
        action: assert
        label: "Store RFC finding"
        data: { ... }
        note: "RFC proposes ES256. Stored as PROPOSED."
        danger: true  # Visual indicator
        callout: "lifecycle: proposed"  # Highlighted badge
```

### Step Properties

| Property | Type | Description |
|----------|------|-------------|
| `from` | string | Actor key |
| `to` | string | Actor key |
| `action` | string | Action type (assert, query, response, etc.) |
| `label` | string | Message label |
| `data` | object | Structured data to display |
| `note` | string | Explanation text |
| `callout` | string | Highlighted badge text |
| `danger` | boolean | Red styling |
| `warning` | boolean | Amber styling |
| `success` | boolean | Green styling |

## Mermaid Output

Each sequence generates a standalone `.mmd` file. Use with:

- GitHub markdown (renders automatically)
- Mermaid CLI: `mmdc -i file.mmd -o file.svg`
- Mermaid Live Editor: https://mermaid.live

## Embedding in Public Site

The Reveal.js presentation is self-contained. To embed:

1. Copy `reveal/` directory to your site
2. Copy `generated/*.json` to your site
3. Update `PRESENTATION_DATA_URL` in index.html

Or iframe embed:
```html
<iframe src="/presentations/reveal/index.html" width="100%" height="600"></iframe>
```

## Theme Customization

Edit `reveal/theme.css`. Key variables:

```css
:root {
  --bg-primary: #000000;
  --bg-card: #111111;
  --accent-episteme: #FBBF24;
  --font-sans: 'Inter', sans-serif;
}
```