timeline

# Timeline Playground

Creates an interactive HTML canvas for visualizing decisions across time horizons with probability and regret analysis.

## When to Use

- "show me over time"
- "project forward"
- "10-10-10 this"
- "what will I regret"
- Temporal decision analysis
- Comparing options across time horizons

## What It Creates

A single HTML file with:
- Parallel horizontal tracks (one per decision option)
- Three time zones: 10 minutes, 10 months, 10 years
- Draggable event cards with probability
- Regret markers for flagging future regret points
- Prompt output for extracting insights

## Skill Protocol

### 1. Understand the Decision

Before generating, clarify:
- What decision is being analyzed?
- What are the options (2-4)?
- What events/outcomes matter at each time horizon?
- What would cause regret?

### 2. Generate the Playground

Create a single self-contained HTML file following the structure in [references/probability-cones.md](references/probability-cones.md).

**Core requirements:**
- Single HTML file, all CSS/JS inline
- No external dependencies
- Dark theme, system font for UI
- Live preview on every change
- Copy button with "Copied!" feedback

### 3. State Shape

```javascript
const state = {
  options: [
    { id: 'optA', label: 'Option A', color: '#3b82f6' },
    { id: 'optB', label: 'Option B', color: '#10b981' }
  ],
  events: [
    { id: 1, optionId: 'optA', timeZone: '10min', x: 50, label: 'Immediate relief', probability: 95 },
    { id: 2, optionId: 'optA', timeZone: '10mo', x: 150, label: 'Skills atrophy', probability: 70 }
  ],
  regretMarkers: [
    { optionId: 'optA', timeZone: '10yr', note: 'Missed growth opportunity' }
  ],
  focusedTimeZone: 'all'
};
```

### 4. Layout

```
+-------------------+----------------------------------+
|  Controls:        |  Timeline Canvas                 |
|  • Options list   |  10 min | 10 months | 10 years  |
|  • Add event      |  -------|-----------|----------  |
|  • Probability    |  [Option A tr