diff --git a/web/src/App.tsx b/web/src/App.tsx
index d702f59..57414f0 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -9,9 +9,13 @@ import { SidePanel } from './components/SidePanel'
 import { ToolPalette } from './components/ToolPalette'
 import { JsonEditor } from './components/JsonEditor'
 import { PropertyEditor } from './components/PropertyEditor'
+import { VariablesEditor } from './components/VariablesEditor'
+import { DslPanel } from './components/DslPanel'
+import { toDSL } from './renderer/dsl'
 import { SimPanel } from './components/SimPanel'
 import { Simulation } from './renderer/sim'
 import { layoutDiagram, nodeSize } from './renderer/layout'
+import { listSaved, loadSaved, saveDiagram, deleteSaved, isTemplate, blankDiagram } from './renderer/storage'
 
 const KEY_MAP: Record<string, number> = {
   ' ': 32,
@@ -37,7 +41,7 @@ export function App() {
   const [error, setError] = useState('')
   const [mode, setMode] = useState<'view' | 'edit' | 'simulate'>('view')
   const [sideOpen, setSideOpen] = useState(false)
-  const [activeTab, setActiveTab] = useState<'palette' | 'json' | 'props'>('palette')
+  const [activeTab, setActiveTab] = useState<'palette' | 'text' | 'json' | 'props'>('palette')
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const [jsonError, setJsonError] = useState<string | null>(null)
   const [editingLabel, setEditingLabel] = useState<{ id: string; edge?: { from: string; to: string }; x: number; y: number; w: number; h: number; label: string } | null>(null)
@@ -46,6 +50,8 @@ export function App() {
   const clipboardRef = useRef<{ nodes: NodeSpec[]; edges: EdgeSpec[] } | null>(null)
   const [selTick, setSelTick] = useState(0)
   const [menu, setMenu] = useState<{ x: number; y: number; kind: 'node' | 'edge' | 'canvas' } | null>(null)
+  const [savedList, setSavedList] = useState<string[]>(() => listSaved())
+  const fileInputRef = useRef<HTMLInputElement>(null)
 
   const editor = editorRef.current
 
@@ -60,8 +66,18 @@ export function App() {
     r.onDoubleClick = handleDoubleClick
     r.onEdgeDoubleClick = handleEdgeDoubleClick
     r.onContextMenu = (x, y, kind) => setMenu({ x, y, kind })
+    r.onSimAdvance = (to) => {
+      const sim = simRef.current
+      if (!sim) return
+      const edge = sim.enabledFor().find((eg) => eg.to === to)
+      if (!edge) return
+      if (edge.event) sim.fire(edge.event)
+      else sim.fireTo(sim.activeEntityId, to)
+      setSimTick((x2) => x2 + 1)
+    }
+    r.onSimSelectEntity = (id) => { simRef.current?.selectEntity(id); setSimTick((x2) => x2 + 1) }
     r.init(canvas, themeName).then(() => {
-      r.loadDiagram(diagram)
+      loadTemplate(diagram)
     })
     return () => {
       r.onDoubleClick = null
@@ -81,6 +97,31 @@ export function App() {
           rendererRef.current?.handleKey(code)
           e.preventDefault()
         }
+      } else if (mode === 'simulate') {
+        const sim = simRef.current
+        if (!sim) return
+        const sm = editorRef.current?.state.type === 'statemachine'
+        // 1-9 pick the Nth event (state machine) or Nth branch (flowchart)
+        if (e.key >= '1' && e.key <= '9') {
+          const idx = +e.key - 1
+          if (sm) { const ev = sim.eventsFor()[idx]; if (ev !== undefined) { sim.fire(ev); setSimTick((x) => x + 1) } }
+          else { const c = sim.choices()[idx]; if (c) { sim.fireTo(sim.activeEntityId, c.to); setSimTick((x) => x + 1) } }
+          e.preventDefault()
+        } else if (e.key === ' ') {
+          sim.stepAll(); setSimTick((x) => x + 1); e.preventDefault()
+        } else if (e.key === 's' || e.key === 'S') {
+          sim.step(); setSimTick((x) => x + 1); e.preventDefault()
+        } else if (e.key === 'r' || e.key === 'R') {
+          sim.reset(); setSimTick((x) => x + 1); e.preventDefault()
+        } else if (e.key === 'n' || e.key === 'N') {
+          sim.spawn(); setSimTick((x) => x + 1); e.preventDefault()
+        } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && sim.entities.length > 1) {
+          // cycle the active entity
+          const ids = sim.entities.map((en) => en.id)
+          const cur = ids.indexOf(sim.activeEntityId)
+          const nx = e.key === 'ArrowDown' ? (cur + 1) % ids.length : (cur - 1 + ids.length) % ids.length
+          sim.selectEntity(ids[nx]); setSimTick((x) => x + 1); e.preventDefault()
+        }
       }
     }
     window.addEventListener('keydown', handler)
@@ -166,43 +207,108 @@ export function App() {
 
   // load JSON string for the JSON editor
   const [jsonStr, setJsonStr] = useState('')
-  const loadJsonStr = useCallback(async (name: string) => {
-    try {
-      const resp = await fetch(`${import.meta.env.BASE_URL}examples/${name}.json`)
-      const text = await resp.text()
-      const spec = JSON.parse(text) as DiagramState
-      layoutDiagram(spec)
-      setJsonStr(JSON.stringify(spec, null, 2))
-      if (editorRef.current) {
-        editorRef.current.load(spec)
-      } else {
-        const ed = new DiagramEditor(spec)
-        editorRef.current = ed
-      }
-      if (rendererRef.current) rendererRef.current.editor = editorRef.current
-      // rebuild the simulation if we loaded a new diagram while simulating
-      if (rendererRef.current?.simMode && editorRef.current) {
+
+  // apply a diagram spec into editor + renderer, regardless of current mode.
+  // reads mode flags off the renderer (not React state) to stay closure-stable.
+  const applySpec = useCallback((spec: DiagramState, name: string, relayout = false) => {
+    if (!spec.nodes) spec.nodes = []
+    if (relayout || spec.nodes.some((n) => n.x === undefined || n.y === undefined)) layoutDiagram(spec)
+    // backfill sizes so a partial spec (positions but no w/h) never yields NaN geometry
+    for (const n of spec.nodes) {
+      if (n.w === undefined || n.h === undefined) { const s = nodeSize(n.kind); n.w = n.w ?? s.w; n.h = n.h ?? s.h }
+    }
+    setJsonStr(JSON.stringify(spec, null, 2))
+    if (editorRef.current) editorRef.current.load(spec)
+    else editorRef.current = new DiagramEditor(spec)
+    const r = rendererRef.current
+    if (r) {
+      r.editor = editorRef.current
+      if (r.editMode) { r.loadStateToWasm(editorRef.current.state); r.resetView() }
+      else r.loadDiagramState(editorRef.current.state)
+      if (r.simMode) {
         const sim = new Simulation(editorRef.current.state)
         simRef.current = sim
-        rendererRef.current.simulation = sim
+        r.simulation = sim
         setSimTick((t) => t + 1)
       }
-    } catch {}
+    }
+    setDiagram(name)
+    setSelectedId(null)
+    setError('')
   }, [])
 
-  useEffect(() => {
-    loadJsonStr(diagram)
-  }, [diagram, loadJsonStr])
+  const loadTemplate = useCallback(async (name: string) => {
+    try {
+      const resp = await fetch(`${import.meta.env.BASE_URL}examples/${name}.json`)
+      const spec = JSON.parse(await resp.text()) as DiagramState
+      applySpec(spec, name, true)
+    } catch {}
+  }, [applySpec])
 
   const handleDiagramChange = useCallback((name: string) => {
+    if (isTemplate(name)) { loadTemplate(name); return }
+    const s = loadSaved(name)
+    if (s) applySpec(s, name)
+  }, [loadTemplate, applySpec])
+
+  const handleNew = useCallback(() => {
+    const t = editorRef.current?.state.type ?? 'flowchart'
+    applySpec(blankDiagram(t), 'Untitled')
+    setMode('edit')
+    setSideOpen(true)
+    const r = rendererRef.current
+    if (r) { r.editMode = true; r.simMode = false }
+  }, [applySpec])
+
+  const handleSaveDiagram = useCallback(() => {
+    const ed = editorRef.current
+    if (!ed) return
+    const suggested = isTemplate(diagram) ? '' : diagram
+    const name = window.prompt('Save diagram as:', suggested)?.trim()
+    if (!name) return
+    saveDiagram(name, ed.state)
+    setSavedList(listSaved())
     setDiagram(name)
-    setError('')
-    setSelectedId(null)
-    if (mode === 'view') {
-      rendererRef.current?.loadDiagram(name)
+  }, [diagram])
+
+  const handleDeleteDiagram = useCallback(() => {
+    if (isTemplate(diagram) || !loadSaved(diagram)) return
+    if (!window.confirm(`Delete saved diagram "${diagram}"?`)) return
+    deleteSaved(diagram)
+    setSavedList(listSaved())
+    handleNew()
+  }, [diagram, handleNew])
+
+  const handleImport = useCallback(() => fileInputRef.current?.click(), [])
+
+  const handleImportFile = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    e.target.value = ''
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = () => {
+      try {
+        const spec = JSON.parse(String(reader.result)) as DiagramState
+        applySpec(spec, file.name.replace(/\.json$/i, '') || 'Imported')
+      } catch {
+        setError('import failed: invalid JSON')
+        setTimeout(() => setError(''), 2500)
+      }
     }
-    loadJsonStr(name)
-  }, [mode, loadJsonStr])
+    reader.readAsText(file)
+  }, [applySpec])
+
+  const handleExportJson = useCallback(() => {
+    const ed = editorRef.current
+    if (!ed) return
+    const blob = new Blob([ed.toJSON()], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${diagram || 'diagram'}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }, [diagram])
 
   const handleThemeChange = useCallback((name: string) => {
     setThemeName(name)
@@ -233,20 +339,16 @@ export function App() {
     if (newMode === 'view') r.resetView()
   }, [])
 
-  const handleFire = useCallback((event: string) => {
-    simRef.current?.fire(event)
-    setSimTick((t) => t + 1)
-  }, [])
-
-  const handleStep = useCallback(() => {
-    simRef.current?.step()
-    setSimTick((t) => t + 1)
-  }, [])
+  const bumpSim = useCallback(() => setSimTick((t) => t + 1), [])
 
-  const handleSimReset = useCallback(() => {
-    simRef.current?.reset()
-    setSimTick((t) => t + 1)
-  }, [])
+  const handleFire = useCallback((event: string) => { simRef.current?.fire(event); bumpSim() }, [bumpSim])
+  const handleFireTo = useCallback((to: string) => { simRef.current?.fireTo(simRef.current.activeEntityId, to); bumpSim() }, [bumpSim])
+  const handleStep = useCallback(() => { simRef.current?.step(); bumpSim() }, [bumpSim])
+  const handleStepAll = useCallback(() => { simRef.current?.stepAll(); bumpSim() }, [bumpSim])
+  const handleSimReset = useCallback(() => { simRef.current?.reset(); bumpSim() }, [bumpSim])
+  const handleSpawn = useCallback(() => { simRef.current?.spawn(); bumpSim() }, [bumpSim])
+  const handleRemoveEntity = useCallback((id: string) => { simRef.current?.removeEntity(id); bumpSim() }, [bumpSim])
+  const handleSelectEntity = useCallback((id: string) => { simRef.current?.selectEntity(id); bumpSim() }, [bumpSim])
 
   const handleZoomIn = useCallback(() => rendererRef.current?.zoomIn(), [])
   const handleZoomOut = useCallback(() => rendererRef.current?.zoomOut(), [])
@@ -373,6 +475,11 @@ export function App() {
     emitState()
   }, [emitState])
 
+  const handleVariablesChange = useCallback((vars: Record<string, number | string | boolean>) => {
+    editorRef.current?.setVariables(vars)
+    emitState()
+  }, [emitState])
+
   const handleTypeChange = useCallback((t: 'flowchart' | 'statemachine') => {
     editorRef.current?.setType(t)
     emitState()
@@ -396,6 +503,14 @@ export function App() {
     emitState()
   }, [emitState])
 
+  const handleSetRole = useCallback((role: 'initial' | 'normal' | 'final') => {
+    const ed = editorRef.current
+    if (!ed) return
+    const ids = ed.selectedNodes.size ? [...ed.selectedNodes] : ed.selected ? [ed.selected] : []
+    for (const id of ids) ed.updateNode(id, { role })
+    emitState()
+  }, [emitState])
+
   const handleBringFront = useCallback(() => {
     const ed = editorRef.current
     if (!ed || !ed.selectedNodes.size) return
@@ -508,22 +623,25 @@ export function App() {
   const hint = mode === 'edit'
     ? 'drag empty = box-select · <kbd>Shift</kbd>-click multi · right-click menu · <kbd>Ctrl+C/V</kbd> copy · arrows nudge · <kbd>Space</kbd>-drag pan · dbl-click rename'
     : mode === 'simulate'
-    ? 'Fire events in the panel · <kbd>Step</kbd> auto-advance · <kbd>Reset</kbd> · scroll to zoom · drag to pan'
+    ? '<kbd>1</kbd>–<kbd>9</kbd> fire event / branch · <kbd>Space</kbd> step all · <kbd>S</kbd> step · <kbd>N</kbd> spawn token · <kbd>↑↓</kbd> switch token · <kbd>R</kbd> reset'
     : '<kbd>1</kbd><kbd>2</kbd><kbd>3</kbd> pick path · <kbd>R</kbd> restart · scroll to zoom · drag to pan'
 
   return (
     <>
       <canvas ref={canvasRef} id="c" />
+      <input ref={fileInputRef} type="file" accept="application/json,.json" style={{ display: 'none' }} onChange={handleImportFile} />
 
       <TopBar
         diagram={diagram}
         theme={themeName}
         mode={mode}
         graphType={editor?.state.type ?? 'flowchart'}
+        savedDiagrams={savedList}
         onDiagramChange={handleDiagramChange}
         onThemeChange={handleThemeChange}
         onModeChange={handleModeChange}
         onTypeChange={handleTypeChange}
+        onNew={handleNew}
       />
 
       <ZoomBar
@@ -536,11 +654,23 @@ export function App() {
 
       <SidePanel open={sideOpen} onToggle={handleTogglePanel}>
         {mode === 'simulate' && simRef.current ? (
-          <SimPanel sim={simRef.current} tick={simTick} onFire={handleFire} onStep={handleStep} onReset={handleSimReset} />
+          <SimPanel
+            sim={simRef.current}
+            tick={simTick}
+            isStateMachine={editor?.state.type === 'statemachine'}
+            onFire={handleFire}
+            onFireTo={handleFireTo}
+            onStep={handleStep}
+            onStepAll={handleStepAll}
+            onReset={handleSimReset}
+            onSpawn={handleSpawn}
+            onRemoveEntity={handleRemoveEntity}
+            onSelectEntity={handleSelectEntity}
+          />
         ) : (
         <>
         <div style={{ display: 'flex', gap: 4, marginBottom: 14, borderBottom: '1px solid var(--line)', paddingBottom: 4 }}>
-          {(['palette', 'json', 'props'] as const).map((tab) => (
+          {(['palette', 'text', 'json', 'props'] as const).map((tab) => (
             <button
               key={tab}
               onClick={() => setActiveTab(tab)}
@@ -579,9 +709,24 @@ export function App() {
             onFontChange={handleGlobalFont}
             onRelayout={handleRelayout}
             dir={editor?.state.dir ?? 'TD'}
+            onSaveDiagram={handleSaveDiagram}
+            onImport={handleImport}
+            onExportJson={handleExportJson}
+            onDeleteDiagram={handleDeleteDiagram}
+            isSaved={!isTemplate(diagram) && savedList.includes(diagram)}
           />
         )}
 
+        {activeTab === 'palette' && (
+          <div style={{ marginTop: 18, borderTop: '1px solid var(--line)', paddingTop: 14 }}>
+            <VariablesEditor variables={editor?.state.variables ?? {}} onChange={handleVariablesChange} />
+          </div>
+        )}
+
+        {activeTab === 'text' && (
+          <DslPanel seed={editor ? toDSL(editor.state) : ''} onApply={(spec) => applySpec(spec, diagram, true)} />
+        )}
+
         {activeTab === 'json' && (
           <JsonEditor value={jsonStr} onChange={handleJsonChange} onError={handleJsonError} />
         )}
@@ -620,6 +765,7 @@ export function App() {
         <ContextMenu
           x={menu.x} y={menu.y} kind={menu.kind}
           canPaste={!!clipboardRef.current?.nodes.length}
+          isStateMachine={editor?.state.type === 'statemachine'}
           onClose={() => setMenu(null)}
           onCopy={copySelection}
           onPaste={pasteClipboard}
@@ -627,6 +773,7 @@ export function App() {
           onDelete={handleDelete}
           onBringFront={handleBringFront}
           onSendBack={handleSendBack}
+          onSetRole={handleSetRole}
         />
       )}
 
@@ -672,10 +819,11 @@ export function App() {
   )
 }
 
-function ContextMenu({ x, y, kind, canPaste, onClose, onCopy, onPaste, onDuplicate, onDelete, onBringFront, onSendBack }: {
-  x: number; y: number; kind: 'node' | 'edge' | 'canvas'; canPaste: boolean
+function ContextMenu({ x, y, kind, canPaste, isStateMachine, onClose, onCopy, onPaste, onDuplicate, onDelete, onBringFront, onSendBack, onSetRole }: {
+  x: number; y: number; kind: 'node' | 'edge' | 'canvas'; canPaste: boolean; isStateMachine: boolean
   onClose: () => void; onCopy: () => void; onPaste: () => void; onDuplicate: () => void
   onDelete: () => void; onBringFront: () => void; onSendBack: () => void
+  onSetRole: (role: 'initial' | 'normal' | 'final') => void
 }) {
   useEffect(() => {
     const close = () => onClose()
@@ -712,6 +860,10 @@ function ContextMenu({ x, y, kind, canPaste, onClose, onCopy, onPaste, onDuplica
       {isNode && item('Duplicate  ⌘D', onDuplicate)}
       {isNode && item('Copy  ⌘C', onCopy)}
       {item('Paste  ⌘V', onPaste, false, !canPaste)}
+      {isNode && isStateMachine && sep}
+      {isNode && isStateMachine && item('Mark as initial ●', () => onSetRole('initial'))}
+      {isNode && isStateMachine && item('Mark as final ◉', () => onSetRole('final'))}
+      {isNode && isStateMachine && item('Mark as normal', () => onSetRole('normal'))}
       {isNode && sep}
       {isNode && item('Bring to front', onBringFront)}
       {isNode && item('Send to back', onSendBack)}
diff --git a/web/src/canvas.ts b/web/src/canvas.ts
index b4d013e..2f7b1f4 100644
--- a/web/src/canvas.ts
+++ b/web/src/canvas.ts
@@ -75,6 +75,8 @@ export class CanvasRenderer implements DrawAPI {
   onDoubleClick: ((nodeId: string, screenX: number, screenY: number) => void) | null = null
   onEdgeDoubleClick: ((from: string, to: string, screenX: number, screenY: number) => void) | null = null
   onContextMenu: ((screenX: number, screenY: number, kind: 'node' | 'edge' | 'canvas') => void) | null = null
+  onSimAdvance: ((toNodeId: string) => void) | null = null
+  onSimSelectEntity: ((entityId: string) => void) | null = null
 
   private boundResize: () => void
   private boundWheel: (e: WheelEvent) => void
@@ -268,6 +270,16 @@ export class CanvasRenderer implements DrawAPI {
     ;(this.instance.exports as any).loadJson(json.length)
   }
 
+  // load an in-memory diagram for VIEW-mode playback (saved/imported diagrams
+  // that aren't fetchable files). Mirrors loadDiagram minus the network fetch.
+  loadDiagramState(state: import('./renderer/types').DiagramState) {
+    if (!this.instance) return
+    this.trail = []
+    this.loadStateToWasm(state)
+    this.startLoop()
+    this.resetView()
+  }
+
   // arm click-to-connect from the selected node; returns false if nothing is selected
   armConnect(): boolean {
     const sel = this.editor?.selected
@@ -518,7 +530,9 @@ export class CanvasRenderer implements DrawAPI {
       this.drawSubgraphFromState(sg)
     }
 
-    const simActive = this.simMode ? this.simulation?.active ?? null : null
+    const sim = this.simMode ? this.simulation : null
+    const simActive = sim?.active ?? null
+    const occupied = new Set<string>(sim?.entities.map((e) => e.at) ?? [])
 
     if (!this.simMode && ed.selected && ed.getSelectionType() === 'subgraph') {
       const selSg = ed.getSelectedSubgraph()
@@ -564,10 +578,12 @@ export class CanvasRenderer implements DrawAPI {
     }
 
     for (const n of state.nodes) {
-      const isSel = this.simMode ? n.id === simActive : ed.isNodeSelected(n.id)
+      const isSel = this.simMode ? occupied.has(n.id) : ed.isNodeSelected(n.id)
       this.drawNodeFromState(n, isSel)
     }
 
+    if (sim) this.drawSimTokens(sim, simActive)
+
     if (!this.simMode && ed.selected && ed.getSelectionType() === 'node') {
       const primary = state.nodes.find((n) => n.id === ed.selected)
       // ports + resize handles only on the single primary node (not on a big multi-select)
@@ -580,10 +596,8 @@ export class CanvasRenderer implements DrawAPI {
     if (this.boxSelect) this.drawBoxSelect()
     if (this.dragNode && (this.guides.x !== undefined || this.guides.y !== undefined)) this.drawGuides()
 
-    if (!this.simMode) {
-      this.readTransitions()
-      this.drawPills()
-    }
+    // WASM transition pills are a view-mode affordance; the editor has its own
+    // affordances, so don't overlay (stale) pills in edit/simulate.
   }
 
   private drawNodeFromState(n: NodeSpec, selected: boolean) {
@@ -626,6 +640,33 @@ export class CanvasRenderer implements DrawAPI {
     ctx.lineWidth = selected ? 3 : 1.5
     ctx.strokeStyle = selected ? c.accent : (n.stroke !== undefined ? hexU32(n.stroke) : c.nodeStroke)
     ctx.stroke()
+
+    // state-machine role markers (UML-ish): initial = entry dot + arrow, final = double ring
+    if (n.role === 'final') {
+      ctx.lineWidth = 1.5
+      ctx.strokeStyle = selected ? c.accent : (n.stroke !== undefined ? hexU32(n.stroke) : c.nodeStroke)
+      this.nodePath(k, sx + 5, sy + 5, sw - 10, sh - 10)
+      ctx.stroke()
+    } else if (n.role === 'initial') {
+      const dotX = sx - 20, dotY = cy
+      ctx.fillStyle = selected ? c.accent : (n.stroke !== undefined ? hexU32(n.stroke) : c.nodeStroke)
+      ctx.beginPath()
+      ctx.arc(dotX, dotY, 5, 0, Math.PI * 2)
+      ctx.fill()
+      ctx.strokeStyle = ctx.fillStyle
+      ctx.lineWidth = 2
+      ctx.beginPath()
+      ctx.moveTo(dotX + 5, dotY)
+      ctx.lineTo(sx - 2, dotY)
+      ctx.stroke()
+      // arrowhead into the node
+      ctx.beginPath()
+      ctx.moveTo(sx, dotY)
+      ctx.lineTo(sx - 6, dotY - 4)
+      ctx.lineTo(sx - 6, dotY + 4)
+      ctx.closePath()
+      ctx.fill()
+    }
     ctx.restore()
 
     if (n.label) {
@@ -648,6 +689,16 @@ export class CanvasRenderer implements DrawAPI {
     }
     const p1 = this.borderPt(a, bx, by)
     const p2 = this.borderPt(b, ax, ay)
+    // a reverse edge exists (A<->B) → bow both to opposite sides so they and
+    // their labels don't overlap. Deterministic side by comparing endpoint ids.
+    if (this.hasReverseEdge(edge)) {
+      const side = edge.from < edge.to ? 1 : -1
+      const dx0 = p2.x - p1.x, dy0 = p2.y - p1.y
+      const len = Math.hypot(dx0, dy0) || 1
+      const off = 26 * side
+      const mid = { x: (p1.x + p2.x) / 2 - (dy0 / len) * off, y: (p1.y + p2.y) / 2 + (dx0 / len) * off }
+      return [p1, mid, p2]
+    }
     // straight and curved both hit-test/draw against the direct segment
     if (route === 'straight' || route === 'curved') return [p1, p2]
     const dy = p2.y - p1.y, dx = p2.x - p1.x
@@ -659,13 +710,42 @@ export class CanvasRenderer implements DrawAPI {
     return [p1, { x: midX, y: p1.y }, { x: midX, y: p2.y }, p2]
   }
 
+  // after connecting two states in a state machine, immediately open the inline
+  // event editor on the new edge so authoring "A --EVENT--> B" is one gesture
+  private maybeEditNewEdge(from: string, to: string) {
+    const ed = this.editor
+    if (!ed || ed.state.type !== 'statemachine') return
+    const edge = ed.state.edges.find((e) => e.from === from && e.to === to)
+    const a = ed.state.nodes.find((n) => n.id === from)
+    const b = ed.state.nodes.find((n) => n.id === to)
+    if (!edge || !a || !b) return
+    ed.select('edge:' + from + '→' + to)
+    this.onSelectionChange?.('edge:' + from + '→' + to)
+    const path = this.edgePath(a, b, edge)
+    const m = Math.floor(path.length / 2)
+    const mid = path.length % 2 === 0
+      ? { x: (path[m - 1].x + path[m].x) / 2, y: (path[m - 1].y + path[m].y) / 2 }
+      : path[m]
+    const rect = this.canvas.getBoundingClientRect()
+    const sx = mid.x * this.cam.zoom + this.cam.x + rect.left
+    const sy = mid.y * this.cam.zoom + this.cam.y + rect.top
+    // defer to the next tick so the inline editor opens AFTER this click's
+    // mouseup/click settles — otherwise the fresh input is blurred immediately
+    setTimeout(() => this.onEdgeDoubleClick?.(from, to, sx, sy), 0)
+  }
+
+  private hasReverseEdge(edge: EdgeSpec): boolean {
+    return !!this.editor?.state.edges.some((e) => e.from === edge.to && e.to === edge.from)
+  }
+
   private drawEdgeFromState(a: NodeSpec, b: NodeSpec, edge: EdgeSpec, active: boolean) {
     const c = this.theme
     const ctx = this.ctx
     const path = this.edgePath(a, b, edge)
     const stroke = active ? c.accent : (edge.color !== undefined ? hexU32(edge.color) : c.edge)
 
-    const curved = (edge.route ?? 'orthogonal') === 'curved' && path.length >= 2
+    // bidirectional bow (3-pt) and explicit curved route both render smoothed
+    const curved = path.length >= 2 && ((edge.route ?? 'orthogonal') === 'curved' || (!edge.waypoints && this.hasReverseEdge(edge)))
     ctx.save()
     ctx.beginPath()
     ctx.moveTo(path[0].x, path[0].y)
@@ -901,6 +981,49 @@ export class CanvasRenderer implements DrawAPI {
     }
   }
 
+  // draw a token per simulation entity at its node; multiple entities on the
+  // same node fan out. The active entity's token is brighter with a ring.
+  private drawSimTokens(sim: import('./renderer/sim').Simulation, activeId: string | null) {
+    const ctx = this.ctx
+    const c = this.theme
+    // group entities by node so co-located tokens don't overlap
+    const byNode = new Map<string, typeof sim.entities>()
+    for (const e of sim.entities) {
+      const arr = byNode.get(e.at) ?? []
+      arr.push(e)
+      byNode.set(e.at, arr)
+    }
+    for (const [nid, ents] of byNode) {
+      const n = sim.state.nodes.find((x) => x.id === nid)
+      if (!n) continue
+      const cx = n.x! + n.w! / 2
+      const cy = n.y! + n.h! / 2
+      ents.forEach((e, i) => {
+        // fan tokens horizontally around the node center
+        const spread = (i - (ents.length - 1) / 2) * 20
+        const tx = cx + spread
+        const ty = cy
+        const isActive = e.at === sim.active && sim.activeEntityId === e.id
+        ctx.save()
+        ctx.shadowColor = c.accent
+        ctx.shadowBlur = isActive ? 14 : 6
+        ctx.fillStyle = c.accent
+        ctx.globalAlpha = isActive ? 1 : 0.55
+        ctx.beginPath()
+        ctx.arc(tx, ty, isActive ? 9 : 7, 0, Math.PI * 2)
+        ctx.fill()
+        ctx.shadowColor = 'transparent'
+        // white highlight dot
+        ctx.globalAlpha = isActive ? 0.9 : 0.5
+        ctx.fillStyle = '#ffffff'
+        ctx.beginPath()
+        ctx.arc(tx - 2, ty - 2, isActive ? 3 : 2.4, 0, Math.PI * 2)
+        ctx.fill()
+        ctx.restore()
+      })
+    }
+  }
+
   private drawGuides() {
     const ctx = this.ctx
     const c = this.theme
@@ -1266,7 +1389,24 @@ export class CanvasRenderer implements DrawAPI {
 
   private onEditMouseDown(e: MouseEvent) {
     if (this.simMode) {
-      // simulate mode: pan only, no editing
+      // simulate mode: click an enabled next-node to advance the active token,
+      // or click another token's node to make that entity active; else pan.
+      const sim = this.simulation
+      if (sim && !this.spaceDown && e.button !== 1) {
+        const rect = this.canvas.getBoundingClientRect()
+        const wx = this.cam.worldX(e.clientX - rect.left)
+        const wy = this.cam.worldY(e.clientY - rect.top)
+        for (let i = sim.state.nodes.length - 1; i >= 0; i--) {
+          const n = sim.state.nodes[i]
+          if (!this.nodeInBounds(n, wx, wy)) continue
+          const targets = sim.enabledFor().map((t) => t.to)
+          if (targets.includes(n.id)) { this.onSimAdvance?.(n.id); return }
+          const ent = sim.entities.find((x) => x.at === n.id)
+          if (ent) { this.onSimSelectEntity?.(ent.id); return }
+          break
+        }
+      }
+      // otherwise pan
       this.dragging = true
       this.last = { x: e.clientX, y: e.clientY }
       this.canvas.style.cursor = 'grabbing'
@@ -1314,6 +1454,7 @@ export class CanvasRenderer implements DrawAPI {
           ed.addEdge(from, n.id)
           this.loadStateToWasm(ed.state)
           window.dispatchEvent(new CustomEvent('editor-state-change'))
+          this.maybeEditNewEdge(from, n.id)
           return
         }
       }
@@ -1466,6 +1607,13 @@ export class CanvasRenderer implements DrawAPI {
     const wx = this.cam.worldX(mx)
     const wy = this.cam.worldY(my)
 
+    // simulate mode: pointer cursor over an enabled next-node (unless dragging/panning)
+    if (this.simMode && !this.dragging && this.simulation) {
+      const targets = new Set(this.simulation.enabledFor().map((t) => t.to))
+      const hot = this.simulation.state.nodes.some((n) => targets.has(n.id) && this.nodeInBounds(n, wx, wy))
+      this.canvas.style.cursor = hot ? 'pointer' : 'grab'
+    }
+
     if (this.tempEdge) {
       this.tempEdge.toPt = { x: wx, y: wy }
       return
@@ -1570,9 +1718,11 @@ export class CanvasRenderer implements DrawAPI {
         for (const n of ed.state.nodes) {
           if (n.id === this.tempEdge.fromNode) continue
           if (this.nodeInBounds(n, mx, my)) {
-            ed.addEdge(this.tempEdge.fromNode, n.id)
+            const src = this.tempEdge.fromNode
+            ed.addEdge(src, n.id)
             this.loadStateToWasm(ed.state)
             window.dispatchEvent(new CustomEvent('editor-state-change'))
+            this.maybeEditNewEdge(src, n.id)
             break
           }
         }
diff --git a/web/src/components/DslPanel.tsx b/web/src/components/DslPanel.tsx
new file mode 100644
index 0000000..82a540b
--- /dev/null
+++ b/web/src/components/DslPanel.tsx
@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react'
+import type { DiagramState } from '../renderer/types'
+import { parseDSL } from '../renderer/dsl'
+
+interface Props {
+  seed: string
+  onApply: (state: DiagramState) => void
+}
+
+const FM = "'Geist Mono', ui-monospace, 'SFMono-Regular', monospace"
+const heading: React.CSSProperties = {
+  fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em',
+  color: 'var(--muted)', margin: '2px 0 8px',
+}
+
+const PLACEHOLDER = `var coins = 0
+[*] -> Locked
+Locked -> Unlocked : COIN
+Unlocked -> Locked : PUSH
+Unlocked -> [*]`
+
+// Text authoring for state machines. Type transitions, hit Apply (or Ctrl+Enter).
+export function DslPanel({ seed, onApply }: Props) {
+  const [text, setText] = useState(seed)
+  const [err, setErr] = useState<string | null>(null)
+
+  // reseed when the underlying diagram changes (new diagram / switched away & back)
+  useEffect(() => { setText(seed); setErr(null) }, [seed])
+
+  const apply = () => {
+    const { state, error } = parseDSL(text)
+    if (error || !state) { setErr(error ?? 'parse failed'); return }
+    setErr(null)
+    onApply(state)
+  }
+
+  // live validation feedback without applying
+  const liveErr = (() => {
+    if (!text.trim()) return null
+    return parseDSL(text).error ?? null
+  })()
+
+  return (
+    <div>
+      <div style={heading}>State-machine text</div>
+      <div style={{ fontSize: 10.5, color: 'var(--muted)', lineHeight: 1.6, marginBottom: 8 }}>
+        <code>A -&gt; B : EVENT [guard] / action</code> · <code>[*] -&gt; S</code> initial · <code>S -&gt; [*]</code> final · <code>var x = 0</code>
+      </div>
+      <textarea
+        value={text}
+        onChange={(e) => { setText(e.target.value); setErr(null) }}
+        onKeyDown={(e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); apply() } }}
+        placeholder={PLACEHOLDER}
+        spellCheck={false}
+        style={{
+          width: '100%', minHeight: 240, boxSizing: 'border-box',
+          background: 'var(--bg)', color: 'var(--text)',
+          border: `1px solid ${liveErr ? '#ef4444' : 'var(--line)'}`, borderRadius: 8,
+          padding: 10, fontSize: 12.5, fontFamily: FM, lineHeight: 1.6,
+          outline: 'none', resize: 'vertical', whiteSpace: 'pre', overflowWrap: 'normal', overflowX: 'auto',
+        }}
+      />
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
+        <button onClick={apply}
+          style={{ background: 'var(--accent)', border: 'none', borderRadius: 8, color: '#fff', cursor: 'pointer', padding: '7px 16px', fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-display)' }}>
+          Apply ▸
+        </button>
+        <span style={{ fontSize: 10.5, color: 'var(--muted)' }}>or <kbd>Ctrl</kbd>+<kbd>Enter</kbd></span>
+      </div>
+      {(err || liveErr) && (
+        <div style={{ fontSize: 11, color: '#ef4444', marginTop: 8, fontFamily: FM }}>{err || liveErr}</div>
+      )}
+    </div>
+  )
+}
diff --git a/web/src/components/SimPanel.tsx b/web/src/components/SimPanel.tsx
index 86b33b0..6d695d2 100644
--- a/web/src/components/SimPanel.tsx
+++ b/web/src/components/SimPanel.tsx
@@ -2,10 +2,16 @@ import type { Simulation } from '../renderer/sim'
 
 interface SimPanelProps {
   sim: Simulation
-  tick: number // forces re-read after imperative sim mutations
-  onFire: (event: string) => void
-  onStep: () => void
+  tick: number // bump forces re-read after imperative sim mutations
+  isStateMachine: boolean
+  onFire: (event: string) => void // fire an event on the active entity
+  onFireTo: (toNodeId: string) => void // flowchart: advance active entity along edge to this node
+  onStep: () => void // auto-step the active entity
+  onStepAll: () => void // advance every entity one auto-step
   onReset: () => void
+  onSpawn: () => void // spawn a new entity at the start node
+  onRemoveEntity: (id: string) => void
+  onSelectEntity: (id: string) => void
 }
 
 const heading: React.CSSProperties = {
@@ -23,49 +29,133 @@ const flat: React.CSSProperties = {
   cursor: 'pointer', padding: '7px 12px', fontSize: 12, fontFamily: 'var(--font-display)',
 }
 
-export function SimPanel({ sim, onFire, onStep, onReset }: SimPanelProps) {
+function nodeLabel(sim: Simulation, id: string): string {
+  return sim.state.nodes.find((n) => n.id === id)?.label || id
+}
+
+function VarRows({ entries }: { entries: [string, unknown][] }) {
+  return (
+    <>
+      {entries.map(([k, v]) => (
+        <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontFamily: 'var(--font-mono)', padding: '2px 0' }}>
+          <span style={{ color: 'var(--muted)' }}>{k}</span>
+          <span style={{ color: 'var(--text)', fontWeight: 600 }}>{String(v)}</span>
+        </div>
+      ))}
+    </>
+  )
+}
+
+export function SimPanel(props: SimPanelProps) {
+  const { sim, isStateMachine, onFire, onFireTo, onStep, onStepAll, onReset, onSpawn, onRemoveEntity, onSelectEntity } = props
+  void props.tick // referenced so re-renders read fresh sim state
+
   const activeNode = sim.state.nodes.find((n) => n.id === sim.active)
-  const events = sim.events()
-  const vars = Object.entries(sim.vars)
-  const canStep = sim.enabled().some((e) => !e.event)
+  const globalVars = Object.entries(sim.vars)
+  const entityVars = Object.entries(sim.activeEntity()?.vars ?? {})
+
+  const events = sim.eventsFor()
+  const choices = sim.choices()
+  const canStep = isStateMachine
+    ? sim.enabledFor().filter((e) => !e.event).length === 1
+    : sim.choices().length === 1
 
   return (
     <div>
+      {/* --- Entities --- */}
+      <div style={heading}>Entities</div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 8 }}>
+        {sim.entities.length === 0 && (
+          <div style={{ fontSize: 11, color: 'var(--muted)' }}>no entities — Reset to start</div>
+        )}
+        {sim.entities.map((ent) => {
+          const isActive = ent.id === sim.activeEntityId
+          return (
+            <div
+              key={ent.id}
+              onClick={() => onSelectEntity(ent.id)}
+              style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6,
+                cursor: 'pointer', borderRadius: 8, padding: '5px 8px',
+                border: isActive ? '1px solid var(--accent)' : '1px solid var(--line)',
+                background: isActive ? 'color-mix(in srgb, var(--accent) 12%, transparent)' : 'none',
+              }}
+            >
+              <span style={{ display: 'flex', alignItems: 'baseline', gap: 6, minWidth: 0 }}>
+                <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', fontWeight: 600, color: isActive ? 'var(--accent)' : 'var(--muted)' }}>{ent.id}</span>
+                <span style={{ fontSize: 12, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{nodeLabel(sim, ent.at)}</span>
+              </span>
+              {sim.entities.length > 1 && (
+                <button
+                  onClick={(e) => { e.stopPropagation(); onRemoveEntity(ent.id) }}
+                  aria-label={`remove ${ent.id}`}
+                  style={{ background: 'none', border: 'none', color: 'var(--muted)', cursor: 'pointer', fontSize: 14, lineHeight: 1, padding: '0 2px' }}
+                >×</button>
+              )}
+            </div>
+          )
+        })}
+      </div>
+      <div style={{ marginBottom: 16 }}>
+        <button style={flat} onClick={onSpawn}>＋ Spawn</button>
+      </div>
+
+      {/* --- Current state --- */}
       <div style={heading}>Current state</div>
       <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--accent)', marginBottom: 16 }}>
         {activeNode?.label || sim.active || '—'}
       </div>
 
+      {/* --- Variables --- */}
       <div style={heading}>Variables</div>
       <div style={{ border: '1px solid var(--line)', borderRadius: 8, padding: 8, marginBottom: 16 }}>
-        {vars.length === 0 && <div style={{ fontSize: 11, color: 'var(--muted)' }}>no variables</div>}
-        {vars.map(([k, v]) => (
-          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontFamily: 'var(--font-mono)', padding: '2px 0' }}>
-            <span style={{ color: 'var(--muted)' }}>{k}</span>
-            <span style={{ color: 'var(--text)', fontWeight: 600 }}>{String(v)}</span>
-          </div>
-        ))}
+        {globalVars.length === 0 && entityVars.length === 0 && (
+          <div style={{ fontSize: 11, color: 'var(--muted)' }}>no variables</div>
+        )}
+        {globalVars.length > 0 && <VarRows entries={globalVars} />}
+        {entityVars.length > 0 && (
+          <>
+            <div style={{ ...heading, margin: '8px 0 4px' }}>This entity</div>
+            <VarRows entries={entityVars} />
+          </>
+        )}
       </div>
 
-      <div style={heading}>Events</div>
+      {/* --- Actions --- */}
+      <div style={heading}>Actions</div>
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 10 }}>
-        {events.length === 0 && <div style={{ fontSize: 11, color: 'var(--muted)' }}>no enabled events from this state</div>}
-        {events.map((ev) => (
-          <button key={ev} style={btn} onClick={() => onFire(ev)}>{ev}</button>
-        ))}
+        {isStateMachine ? (
+          events.length === 0
+            ? <div style={{ fontSize: 11, color: 'var(--muted)' }}>no enabled events</div>
+            : events.map((ev, i) => (
+              <button key={ev} style={btn} onClick={() => onFire(ev)}>{i + 1}  {ev}</button>
+            ))
+        ) : (
+          choices.length === 0
+            ? <div style={{ fontSize: 11, color: 'var(--muted)' }}>end of flow — nothing to advance</div>
+            : choices.map((c, i) => (
+              <button key={`${c.to}-${i}`} style={btn} onClick={() => onFireTo(c.to)}>
+                {i + 1}  {nodeLabel(sim, c.to)}{c.label ? ` (${c.label})` : ''}
+              </button>
+            ))
+        )}
       </div>
       <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
         <button style={{ ...flat, opacity: canStep ? 1 : 0.4 }} onClick={onStep} disabled={!canStep}>Step ▸</button>
+        <button style={flat} onClick={onStepAll}>Step all ▸▸</button>
         <button style={flat} onClick={onReset}>Reset ↺</button>
       </div>
       {sim.lastError && <div style={{ fontSize: 11, color: '#ef4444', marginBottom: 10 }}>{sim.lastError}</div>}
 
+      {/* --- History --- */}
       <div style={heading}>History</div>
       <div style={{ display: 'flex', flexDirection: 'column', gap: 3, maxHeight: 260, overflow: 'auto' }}>
         {sim.history.length === 0 && <div style={{ fontSize: 11, color: 'var(--muted)' }}>nothing fired yet</div>}
         {sim.history.map((h, i) => (
           <div key={i} style={{ fontSize: 11.5, fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>
-            <span style={{ color: 'var(--muted)' }}>{i + 1}.</span> {h.from} <span style={{ color: 'var(--accent)' }}>—{h.event || 'auto'}→</span> {h.to}
+            <span style={{ color: 'var(--muted)' }}>{i + 1}.</span>{' '}
+            {h.entity && <span style={{ color: 'var(--muted)' }}>{h.entity} </span>}
+            {h.from} <span style={{ color: 'var(--accent)' }}>—{h.event || 'auto'}→</span> {h.to}
           </div>
         ))}
       </div>
diff --git a/web/src/components/ToolPalette.tsx b/web/src/components/ToolPalette.tsx
index b8e47d2..2c57451 100644
--- a/web/src/components/ToolPalette.tsx
+++ b/web/src/components/ToolPalette.tsx
@@ -13,6 +13,11 @@ interface ToolPaletteProps {
   onFontChange: (px: number) => void
   onRelayout: (dir: 'TD' | 'BT' | 'LR' | 'RL') => void
   dir: 'TD' | 'BT' | 'LR' | 'RL'
+  onSaveDiagram: () => void
+  onImport: () => void
+  onExportJson: () => void
+  onDeleteDiagram: () => void
+  isSaved: boolean
 }
 
 const NODE_TYPES: { kind: string; label: string; shape: React.ReactNode }[] = [
@@ -60,9 +65,19 @@ const DIRS: { d: 'TD' | 'BT' | 'LR' | 'RL'; label: string }[] = [
   { d: 'BT', label: '↑ Up' }, { d: 'RL', label: '← Left' },
 ]
 
-export function ToolPalette({ onAddNode, onConnect, onAddSubgraph, onDuplicate, onDelete, onClear, onUndo, onRedo, canUndo, canRedo, fontSize, onFontChange, onRelayout, dir }: ToolPaletteProps) {
+export function ToolPalette({ onAddNode, onConnect, onAddSubgraph, onDuplicate, onDelete, onClear, onUndo, onRedo, canUndo, canRedo, fontSize, onFontChange, onRelayout, dir, onSaveDiagram, onImport, onExportJson, onDeleteDiagram, isSaved }: ToolPaletteProps) {
   return (
     <div>
+      <div style={heading}>Diagram</div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 6 }}>
+        <button style={act} onClick={onSaveDiagram} onMouseEnter={hover(true)} onMouseLeave={hover(false)}>Save</button>
+        <button style={act} onClick={onImport} onMouseEnter={hover(true)} onMouseLeave={hover(false)}>Import JSON</button>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 18 }}>
+        <button style={act} onClick={onExportJson} onMouseEnter={hover(true)} onMouseLeave={hover(false)}>Export JSON</button>
+        <button style={isSaved ? act : actOff} onClick={isSaved ? onDeleteDiagram : undefined} onMouseEnter={isSaved ? hover(true, '#ef4444') : undefined} onMouseLeave={isSaved ? hover(false) : undefined}>Delete saved</button>
+      </div>
+
       <div style={heading}>Nodes</div>
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 18 }}>
         {NODE_TYPES.map((t) => (
diff --git a/web/src/components/TopBar.tsx b/web/src/components/TopBar.tsx
index 30a31d4..42d78f5 100644
--- a/web/src/components/TopBar.tsx
+++ b/web/src/components/TopBar.tsx
@@ -1,10 +1,4 @@
-const diagrams = [
-  { value: 'fetch', label: 'Fetch state machine' },
-  { value: 'traffic', label: 'Traffic light' },
-  { value: 'approval', label: 'Approval flow' },
-  { value: 'checkout', label: 'Order checkout' },
-  { value: 'turnstile', label: 'Turnstile (state machine)' },
-]
+import { TEMPLATES } from '../renderer/storage'
 
 const themes = [
   { value: 'dark', label: 'Dark' },
@@ -19,25 +13,43 @@ interface TopBarProps {
   theme: string
   mode: Mode
   graphType: 'flowchart' | 'statemachine'
+  savedDiagrams: string[]
   onDiagramChange: (name: string) => void
   onThemeChange: (name: string) => void
   onModeChange: (mode: Mode) => void
   onTypeChange: (t: 'flowchart' | 'statemachine') => void
+  onNew: () => void
 }
 
 const MODES: Mode[] = ['view', 'edit', 'simulate']
 
-export function TopBar({ diagram, theme, mode, graphType, onDiagramChange, onThemeChange, onModeChange, onTypeChange }: TopBarProps) {
+export function TopBar({ diagram, theme, mode, graphType, savedDiagrams, onDiagramChange, onThemeChange, onModeChange, onTypeChange, onNew }: TopBarProps) {
   return (
     <div className="panel topbar">
       <span className="brand">Flowplay</span>
       <div className="divider" />
+      <button onClick={onNew} title="New blank diagram"
+        style={{ background: 'none', border: '1px solid var(--line)', borderRadius: 8, color: 'var(--text)', cursor: 'pointer', padding: '5px 10px', fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-display)' }}>
+        ＋ New
+      </button>
       <div className="field">
         <label htmlFor="pick">Diagram</label>
-        <select id="pick" value={diagram} onChange={(e) => onDiagramChange(e.target.value)}>
-          {diagrams.map((d) => (
-            <option key={d.value} value={d.value}>{d.label}</option>
-          ))}
+        <select id="pick" value={savedDiagrams.includes(diagram) || TEMPLATES.some((t) => t.id === diagram) ? diagram : ''} onChange={(e) => e.target.value && onDiagramChange(e.target.value)}>
+          {!savedDiagrams.includes(diagram) && !TEMPLATES.some((t) => t.id === diagram) && (
+            <option value="">{diagram || 'Untitled'} (unsaved)</option>
+          )}
+          <optgroup label="Templates">
+            {TEMPLATES.map((d) => (
+              <option key={d.id} value={d.id}>{d.label}</option>
+            ))}
+          </optgroup>
+          {savedDiagrams.length > 0 && (
+            <optgroup label="My diagrams">
+              {savedDiagrams.map((n) => (
+                <option key={n} value={n}>{n}</option>
+              ))}
+            </optgroup>
+          )}
         </select>
       </div>
       <div className="divider" />
diff --git a/web/src/components/VariablesEditor.tsx b/web/src/components/VariablesEditor.tsx
new file mode 100644
index 0000000..0ffece5
--- /dev/null
+++ b/web/src/components/VariablesEditor.tsx
@@ -0,0 +1,75 @@
+import { useState } from 'react'
+
+type Val = number | string | boolean
+type Vars = Record<string, Val>
+
+interface Props {
+  variables: Vars
+  onChange: (next: Vars) => void
+}
+
+const FM = "'Geist Mono', ui-monospace, 'SFMono-Regular', monospace"
+const heading: React.CSSProperties = {
+  fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em',
+  color: 'var(--muted)', margin: '2px 0 8px',
+}
+const input: React.CSSProperties = {
+  flex: 1, minWidth: 0, background: 'var(--bg)', color: 'var(--text)',
+  border: '1px solid var(--line)', borderRadius: 6, padding: '5px 8px',
+  fontSize: 12, fontFamily: FM, outline: 'none',
+}
+const smallBtn: React.CSSProperties = {
+  background: 'none', border: '1px solid var(--line)', borderRadius: 6,
+  color: 'var(--muted)', cursor: 'pointer', padding: '4px 7px', fontSize: 12,
+}
+
+// "true"/"false" → boolean, numeric string → number, otherwise string
+function coerce(v: string): Val {
+  if (v === 'true') return true
+  if (v === 'false') return false
+  if (v !== '' && !isNaN(Number(v))) return Number(v)
+  return v
+}
+
+// Diagram-level variables (properties). These seed the simulation and are
+// readable/writable by edge guards and actions. Add as many as you like.
+export function VariablesEditor({ variables, onChange }: Props) {
+  const entries = Object.entries(variables)
+  const [newKey, setNewKey] = useState('')
+
+  const setVal = (k: string, raw: string) => onChange({ ...variables, [k]: coerce(raw) })
+  const remove = (k: string) => { const n = { ...variables }; delete n[k]; onChange(n) }
+  const add = () => {
+    const k = newKey.trim()
+    if (!k || k in variables) return
+    onChange({ ...variables, [k]: 0 })
+    setNewKey('')
+  }
+
+  return (
+    <div>
+      <div style={heading}>Variables</div>
+      {entries.length === 0 && (
+        <div style={{ fontSize: 11, color: 'var(--muted)', marginBottom: 6 }}>
+          none — add properties the simulation can read and mutate
+        </div>
+      )}
+      {entries.map(([k, v]) => (
+        <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
+          <div style={{ ...input, flex: '0 0 96px', opacity: 0.75, overflow: 'hidden', whiteSpace: 'nowrap' }}>{k}</div>
+          <input style={input} value={String(v)} onChange={(e) => setVal(k, e.target.value)} />
+          <button style={smallBtn} title="Remove" onClick={() => remove(k)}>×</button>
+        </div>
+      ))}
+      <div style={{ display: 'flex', gap: 6, marginTop: 2 }}>
+        <input style={input} placeholder="new property" value={newKey}
+          onChange={(e) => setNewKey(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') add() }} />
+        <button style={{ ...smallBtn, color: 'var(--text)', padding: '4px 10px' }} onClick={add}>Add</button>
+      </div>
+      <div style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 8, lineHeight: 1.6 }}>
+        Use them in edge <b>guards</b> (e.g. <code>coins &gt;= 2</code>) and <b>actions</b> (e.g. <code>coins -= 2</code>).
+      </div>
+    </div>
+  )
+}
diff --git a/web/src/renderer/dsl.ts b/web/src/renderer/dsl.ts
new file mode 100644
index 0000000..befd50a
--- /dev/null
+++ b/web/src/renderer/dsl.ts
@@ -0,0 +1,165 @@
+// A tiny mermaid-flavoured text DSL for authoring state machines fast.
+// Type transitions instead of clicking each edge:
+//
+//   var coins = 0
+//   [*] -> Locked
+//   Locked   -> Unlocked : COIN [coins >= 0] / coins += 1
+//   Unlocked -> Locked   : PUSH
+//   Unlocked -> [*]
+//
+//   Line forms:
+//     var NAME = VALUE            declare a variable (number/bool/string)
+//     [*] -> State               mark State as the initial state
+//     State -> [*]               mark State as a final state
+//     A -> B : EVENT [GUARD] / ACTIONS   a transition (label part optional)
+//     StateName                  a bare state with no transitions yet
+//     # comment                  ignored
+import type { DiagramState, NodeSpec, EdgeSpec } from './types'
+
+type Val = number | string | boolean
+
+function coerce(v: string): Val {
+  const t = v.trim()
+  if (t === 'true') return true
+  if (t === 'false') return false
+  if (t !== '' && !isNaN(Number(t))) return Number(t)
+  // strip surrounding quotes if present
+  if ((t.startsWith('"') && t.endsWith('"')) || (t.startsWith("'") && t.endsWith("'"))) return t.slice(1, -1)
+  return t
+}
+
+// parse the "EVENT [GUARD] / ACTIONS" part after a transition's colon
+function parseLabel(s: string): { event?: string; guard?: string; actions?: string } {
+  let guard: string | undefined
+  let actions: string | undefined
+  const g = s.match(/\[([^\]]*)\]/)
+  if (g) { guard = g[1].trim() || undefined; s = s.replace(g[0], ' ') }
+  const slash = s.indexOf('/')
+  if (slash >= 0) { actions = s.slice(slash + 1).trim() || undefined; s = s.slice(0, slash) }
+  const event = s.trim() || undefined
+  return { event, guard, actions }
+}
+
+export function parseDSL(text: string): { state?: DiagramState; error?: string } {
+  const nodes = new Map<string, NodeSpec>()
+  const edges: EdgeSpec[] = []
+  const variables: Record<string, Val> = {}
+
+  const node = (name: string): NodeSpec => {
+    let n = nodes.get(name)
+    if (!n) { n = { id: name, kind: 'roundrect', label: name, role: 'normal' }; nodes.set(name, n) }
+    return n
+  }
+
+  const lines = text.split('\n')
+  for (let ln = 0; ln < lines.length; ln++) {
+    const raw = lines[ln].trim()
+    if (!raw || raw.startsWith('#') || raw.startsWith('//')) continue
+
+    // variable declaration
+    const vm = raw.match(/^var\s+([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.+)$/)
+    if (vm) { variables[vm[1]] = coerce(vm[2]); continue }
+
+    const arrow = raw.indexOf('->')
+    if (arrow < 0) {
+      // bare state name (allow spaces); ignore stray tokens like [*] alone
+      if (raw !== '[*]') node(raw)
+      continue
+    }
+
+    const src = raw.slice(0, arrow).trim()
+    let rest = raw.slice(arrow + 2).trim()
+    let dst = rest
+    let labelPart = ''
+    const colon = rest.indexOf(':')
+    if (colon >= 0) { dst = rest.slice(0, colon).trim(); labelPart = rest.slice(colon + 1).trim() }
+
+    if (!src || !dst) return { error: `line ${ln + 1}: transition needs "A -> B"` }
+
+    if (src === '[*]' && dst === '[*]') return { error: `line ${ln + 1}: cannot go [*] -> [*]` }
+    if (src === '[*]') { node(dst).role = 'initial'; continue }
+    if (dst === '[*]') { node(src).role = 'final'; continue }
+
+    node(src); node(dst)
+    const { event, guard, actions } = labelPart ? parseLabel(labelPart) : {}
+    // merge into an existing identical from/to edge, else push a new one
+    let e = edges.find((x) => x.from === src && x.to === dst && (x.event ?? '') === (event ?? ''))
+    if (!e) { e = { from: src, to: dst }; edges.push(e) }
+    if (event) e.event = event
+    if (guard) e.guard = guard
+    if (actions) e.actions = actions
+    if (event) e.label = event
+  }
+
+  if (nodes.size === 0) return { error: 'no states — try "A -> B : EVENT"' }
+
+  const state: DiagramState = {
+    nodes: [...nodes.values()],
+    edges,
+    subgraphs: [],
+    type: 'statemachine',
+  }
+  if (Object.keys(variables).length) state.variables = variables
+  return { state }
+}
+
+// generate DSL text from a diagram so the text tab can seed from the canvas
+export function toDSL(state: DiagramState): string {
+  const label = (id: string) => {
+    const n = state.nodes.find((x) => x.id === id)
+    return n?.label || id
+  }
+  const out: string[] = []
+  for (const [k, v] of Object.entries(state.variables ?? {})) out.push(`var ${k} = ${v}`)
+  if (out.length) out.push('')
+
+  for (const n of state.nodes) if (n.role === 'initial') out.push(`[*] -> ${n.label || n.id}`)
+
+  const connected = new Set<string>()
+  for (const e of state.edges) {
+    connected.add(e.from); connected.add(e.to)
+    let lab = ''
+    const ev = e.event ?? ''
+    const g = e.guard ? ` [${e.guard}]` : ''
+    const a = e.actions ? ` / ${e.actions}` : ''
+    if (ev || g || a) lab = ` : ${ev}${g}${a}`
+    out.push(`${label(e.from)} -> ${label(e.to)}${lab}`)
+  }
+
+  for (const n of state.nodes) if (n.role === 'final') out.push(`${n.label || n.id} -> [*]`)
+  // bare, unconnected, non-initial states so they survive a round-trip
+  for (const n of state.nodes) {
+    if (!connected.has(n.id) && n.role !== 'initial' && n.role !== 'final') out.push(n.label || n.id)
+  }
+  return out.join('\n')
+}
+
+// ---- self-check (runs at import; logs, never throws in prod) ----
+function selfTest() {
+  const assert = (c: boolean, m: string) => { if (!c) throw new Error('dsl selfTest: ' + m) }
+  const src = [
+    'var coins = 0',
+    '[*] -> Locked',
+    'Locked -> Unlocked : COIN [coins >= 0] / coins += 1',
+    'Unlocked -> Locked : PUSH',
+    'Unlocked -> [*]',
+  ].join('\n')
+  const { state, error } = parseDSL(src)
+  assert(!error && !!state, 'parses without error')
+  const s = state!
+  assert(s.type === 'statemachine', 'type is statemachine')
+  assert(s.nodes.length === 2, 'two states')
+  assert(s.nodes.find((n) => n.id === 'Locked')?.role === 'initial', 'Locked initial')
+  assert(s.nodes.find((n) => n.id === 'Unlocked')?.role === 'final', 'Unlocked final')
+  assert(s.variables?.coins === 0, 'variable parsed')
+  const coin = s.edges.find((e) => e.from === 'Locked' && e.to === 'Unlocked')!
+  assert(coin.event === 'COIN' && coin.guard === 'coins >= 0' && coin.actions === 'coins += 1', 'label parts')
+  // round trip: generated text re-parses to the same shape
+  const rt = parseDSL(toDSL(s)).state!
+  assert(rt.nodes.length === 2 && rt.edges.length === 2, 'round-trip node/edge count')
+  assert(rt.nodes.find((n) => n.id === 'Locked')?.role === 'initial', 'round-trip initial preserved')
+  // error case
+  assert(!!parseDSL('-> B').error, 'missing source errors')
+  console.log('dsl selfTest passed')
+}
+try { selfTest() } catch (e) { console.error(e) }
diff --git a/web/src/renderer/sim.ts b/web/src/renderer/sim.ts
index 03b3d19..4542b47 100644
--- a/web/src/renderer/sim.ts
+++ b/web/src/renderer/sim.ts
@@ -1,7 +1,7 @@
 // State-machine simulation: a tiny expression evaluator (no eval / no Function
 // on user input) plus a runner. Nodes are states, edges are transitions with an
 // optional event trigger, guard expression, and variable-mutating actions.
-import type { DiagramState } from './types'
+import type { DiagramState, EdgeSpec } from './types'
 
 type Val = number | string | boolean | undefined
 type Vars = Record<string, Val>
@@ -138,56 +138,164 @@ export function runActions(src: string, vars: Vars): void {
 
 // ---- simulation runner ----
 
-export interface HistoryEntry { from: string; event: string; to: string }
+// `entity` is optional so pre-existing single-entity call sites keep working.
+export interface HistoryEntry { from: string; event: string; to: string; entity?: string }
+
+// A live token: it sits AT some node and carries its own per-entity variables.
+export interface SimEntity { id: string; at: string; vars: Vars }
 
 export class Simulation {
-  active = ''
-  vars: Vars = {}
+  vars: Vars = {}                 // global variables (shared across entities)
   history: HistoryEntry[] = []
   lastError = ''
+  entities: SimEntity[] = []      // the live tokens
+  activeEntityId = ''
+  private counter = 0             // for generating e1, e2, ... ids
 
   constructor(public state: DiagramState) { this.reset() }
 
-  reset(): void {
+  // Back-compat: the "active" node id is just the active entity's location.
+  get active(): string { return this.activeEntity()?.at ?? '' }
+
+  activeEntity(): SimEntity | undefined {
+    return this.entities.find((e) => e.id === this.activeEntityId)
+  }
+
+  selectEntity(id: string): void {
+    if (this.entities.some((e) => e.id === id)) this.activeEntityId = id
+  }
+
+  private startNode(): string {
     const init = this.state.nodes.find((n) => n.role === 'initial') ?? this.state.nodes[0]
-    this.active = init?.id ?? ''
+    return init?.id ?? ''
+  }
+
+  spawn(at?: string, vars: Vars = {}): string {
+    const id = 'e' + (++this.counter)
+    this.entities.push({ id, at: at ?? this.startNode(), vars: { ...vars } })
+    return id
+  }
+
+  removeEntity(id: string): void {
+    this.entities = this.entities.filter((e) => e.id !== id)
+    if (this.activeEntityId === id) this.activeEntityId = this.entities[0]?.id ?? ''
+  }
+
+  reset(): void {
+    this.entities = []
+    this.counter = 0
     this.vars = JSON.parse(JSON.stringify(this.state.variables ?? {}))
     this.history = []
     this.lastError = ''
+    // Spawn one entity at each 'initial' node; if none, a single one at nodes[0].
+    const inits = this.state.nodes.filter((n) => n.role === 'initial')
+    if (inits.length) for (const n of inits) this.spawn(n.id)
+    else if (this.state.nodes[0]) this.spawn(this.state.nodes[0].id)
+    this.activeEntityId = this.entities[0]?.id ?? ''
+  }
+
+  // Resolve an entity by id, defaulting to the active one.
+  private ent(entityId?: string): SimEntity | undefined {
+    return entityId ? this.entities.find((e) => e.id === entityId) : this.activeEntity()
   }
 
-  private outgoing() { return this.state.edges.filter((e) => e.from === this.active) }
+  private outgoing(at: string): EdgeSpec[] { return this.state.edges.filter((e) => e.from === at) }
 
-  private guardOk(guard?: string): boolean {
+  // Guards/actions evaluate against the MERGE of global vars overlaid by the
+  // entity's own vars (entity wins on read).
+  private scopeFor(ent: SimEntity): Vars { return { ...this.vars, ...ent.vars } }
+
+  private guardOk(guard: string | undefined, ent: SimEntity): boolean {
     if (!guard) return true
-    try { return truthy(evalExpr(guard, this.vars)) } catch { return false }
+    try { return truthy(evalExpr(guard, this.scopeFor(ent))) } catch { return false }
   }
 
-  enabled() { return this.outgoing().filter((e) => this.guardOk(e.guard)) }
+  // Write rule: run actions against a merged scope, then split results back.
+  // Keys that ALREADY existed in the entity's own vars stay per-entity; every
+  // other key (global-originated, or newly created) is written to global vars.
+  private applyActions(actions: string, ent: SimEntity): void {
+    const scope = this.scopeFor(ent)
+    const entityKeys = new Set(Object.keys(ent.vars))
+    runActions(actions, scope)
+    for (const k of Object.keys(scope)) {
+      if (entityKeys.has(k)) ent.vars[k] = scope[k]
+      else this.vars[k] = scope[k]
+    }
+  }
 
-  events(): string[] {
+  // ---- per-entity queries (entityId defaults to the active entity) ----
+
+  enabledFor(entityId?: string): EdgeSpec[] {
+    const ent = this.ent(entityId)
+    if (!ent) return []
+    return this.outgoing(ent.at).filter((e) => this.guardOk(e.guard, ent))
+  }
+
+  eventsFor(entityId?: string): string[] {
     const s = new Set<string>()
-    for (const e of this.enabled()) if (e.event) s.add(e.event)
+    for (const e of this.enabledFor(entityId)) if (e.event) s.add(e.event)
     return [...s]
   }
 
-  fire(event: string): boolean {
-    const cand = this.outgoing().filter((e) => (e.event ?? '') === event)
-    if (!cand.length) { this.lastError = `no transition on "${event}"`; return false }
-    const e = cand.find((x) => this.guardOk(x.guard))
-    if (!e) { this.lastError = `guard blocked "${event}"`; return false }
-    if (e.actions) { try { runActions(e.actions, this.vars) } catch (err) { this.lastError = String(err); return false } }
-    this.history.push({ from: this.active, event, to: e.to })
-    this.active = e.to
+  // The enabled transitions a UI can offer as a manual pick (flowchart branches).
+  choices(entityId?: string): EdgeSpec[] { return this.enabledFor(entityId) }
+
+  private traverse(ent: SimEntity, e: EdgeSpec, event: string): boolean {
+    if (e.actions) {
+      try { this.applyActions(e.actions, ent) } catch (err) { this.lastError = String(err); return false }
+    }
+    this.history.push({ from: ent.at, event, to: e.to, entity: ent.id })
+    ent.at = e.to
     this.lastError = ''
     return true
   }
 
-  step(): boolean {
-    const auto = this.enabled().filter((e) => !e.event)
+  fireEntity(entityId?: string, event = ''): boolean {
+    const ent = this.ent(entityId)
+    if (!ent) { this.lastError = 'no such entity'; return false }
+    const cand = this.outgoing(ent.at).filter((e) => (e.event ?? '') === event)
+    if (!cand.length) { this.lastError = `no transition on "${event}"`; return false }
+    const e = cand.find((x) => this.guardOk(x.guard, ent))
+    if (!e) { this.lastError = `guard blocked "${event}"`; return false }
+    return this.traverse(ent, e, event)
+  }
+
+  // Move along the edge to a specific target node (how flowchart choices resolve).
+  fireTo(entityId: string | undefined, toNodeId: string): boolean {
+    const ent = this.ent(entityId)
+    if (!ent) { this.lastError = 'no such entity'; return false }
+    const cand = this.outgoing(ent.at).filter((e) => e.to === toNodeId)
+    if (!cand.length) { this.lastError = `no edge to "${toNodeId}"`; return false }
+    const e = cand.find((x) => this.guardOk(x.guard, ent))
+    if (!e) { this.lastError = `guard blocked to "${toNodeId}"`; return false }
+    return this.traverse(ent, e, e.event ?? '')
+  }
+
+  stepEntity(entityId?: string): boolean {
+    const ent = this.ent(entityId)
+    if (!ent) { this.lastError = 'no such entity'; return false }
+    const auto = this.enabledFor(ent.id).filter((e) => !e.event)
     if (auto.length !== 1) { this.lastError = auto.length ? 'ambiguous auto-transition' : 'no auto transition'; return false }
-    return this.fire('')
+    return this.fireEntity(ent.id, '')
   }
+
+  // Advance every entity by one unambiguous auto-step; return count advanced.
+  stepAll(): number {
+    let n = 0
+    for (const ent of [...this.entities]) {
+      const node = this.state.nodes.find((x) => x.id === ent.at)
+      if (node?.role === 'final') continue
+      const auto = this.enabledFor(ent.id).filter((e) => !e.event)
+      if (auto.length === 1 && this.fireEntity(ent.id, '')) n++
+    }
+    return n
+  }
+
+  // ---- back-compat wrappers (operate on the active entity) ----
+  enabled(): EdgeSpec[] { return this.enabledFor() }
+  events(): string[] { return this.eventsFor() }
+  fire(event: string): boolean { return this.fireEntity(this.activeEntityId, event) }
+  step(): boolean { return this.stepEntity(this.activeEntityId) }
 }
 
 // ---- self-check (runs once at import; logs, never throws in prod) ----
@@ -199,5 +307,68 @@ function selfTest() {
   const v: Vars = { coins: 5 }
   runActions('coins -= 2; ready = true', v)
   assert(v.coins === 3 && v.ready === true, 'actions')
+
+  // -- back-compat single-entity flow --
+  const single = new Simulation({
+    nodes: [{ id: 'A', role: 'initial' }, { id: 'B' }],
+    edges: [{ from: 'A', to: 'B', event: 'go' }],
+    subgraphs: [], type: 'statemachine', variables: {},
+  })
+  assert(single.active === 'A', 'single active getter')
+  assert(single.fire('go') === true && single.active === 'B', 'single fire moves active')
+
+  // -- multi-entity: two initial nodes each get a token --
+  const multi = new Simulation({
+    nodes: [
+      { id: 'A', role: 'initial' }, { id: 'B', role: 'initial' },
+      { id: 'C' }, { id: 'D' },
+    ],
+    edges: [
+      { from: 'A', to: 'C', event: 'go' },
+      { from: 'B', to: 'D', event: 'go' },
+    ],
+    subgraphs: [], type: 'statemachine', variables: {},
+  })
+  assert(multi.entities.length === 2, 'spawn at each initial')
+  const [eA, eB] = multi.entities
+  assert(eA.at === 'A' && eB.at === 'B', 'entities at their initial nodes')
+  // fireEntity moves one entity and not the other
+  assert(multi.fireEntity(eA.id, 'go') === true, 'fireEntity ok')
+  assert(eA.at === 'C' && eB.at === 'B', 'only fired entity moved')
+
+  // -- per-entity var isolation + global read visible in guard --
+  const iso = new Simulation({
+    nodes: [{ id: 'S', role: 'initial' }, { id: 'T' }],
+    edges: [{ from: 'S', to: 'T', event: 'go', guard: 'g >= 0 && x >= 1', actions: 'x += 1; g += 5' }],
+    subgraphs: [], type: 'statemachine', variables: { x: 100, g: 0 },
+  })
+  const ie = iso.activeEntity()!
+  ie.vars.x = 1 // entity-local x shadows global x on read
+  assert(iso.fireEntity(ie.id, 'go') === true, 'guard sees entity x=1 and global g=0')
+  assert(ie.vars.x === 2, 'entity var x updated per-entity')
+  assert(iso.vars.x === 100, 'global x not clobbered by entity write')
+  assert(iso.vars.g === 5, 'global g written globally')
+
+  // -- stepAll advances multiple entities --
+  const autos = new Simulation({
+    nodes: [
+      { id: 'A', role: 'initial' }, { id: 'B', role: 'initial' },
+      { id: 'C' }, { id: 'D' },
+    ],
+    edges: [{ from: 'A', to: 'C' }, { from: 'B', to: 'D' }],
+    subgraphs: [], type: 'statemachine', variables: {},
+  })
+  assert(autos.stepAll() === 2, 'stepAll advances both entities')
+  assert(autos.entities[0].at === 'C' && autos.entities[1].at === 'D', 'stepAll targets')
+
+  // -- flowchart choices + fireTo selecting a branch --
+  const fc = new Simulation({
+    nodes: [{ id: 'start', role: 'initial' }, { id: 'left' }, { id: 'right' }],
+    edges: [{ from: 'start', to: 'left' }, { from: 'start', to: 'right' }],
+    subgraphs: [], type: 'flowchart', variables: {},
+  })
+  assert(fc.choices().length === 2, 'flowchart offers both branches')
+  assert(fc.fireTo(fc.activeEntityId, 'right') === true && fc.active === 'right', 'fireTo selects branch')
 }
 try { selfTest() } catch (e) { console.error(e) }
+console.log('sim selfTest passed')
diff --git a/web/src/renderer/storage.ts b/web/src/renderer/storage.ts
new file mode 100644
index 0000000..3ac35a3
--- /dev/null
+++ b/web/src/renderer/storage.ts
@@ -0,0 +1,69 @@
+// Local persistence for user-created diagrams. Built-in examples ship as
+// read-only templates under /examples; anything the user saves lives here in
+// localStorage so diagrams are no longer hardcoded into the app.
+import type { DiagramState } from './types'
+
+const KEY = 'flowplay-diagrams'
+
+// built-in starter templates (fetched from /public/examples at load time)
+export const TEMPLATES: { id: string; label: string }[] = [
+  { id: 'fetch', label: 'Fetch state machine' },
+  { id: 'traffic', label: 'Traffic light' },
+  { id: 'approval', label: 'Approval flow' },
+  { id: 'turnstile', label: 'Turnstile (state machine)' },
+]
+
+export const isTemplate = (id: string) => TEMPLATES.some((t) => t.id === id)
+
+type Store = Record<string, DiagramState>
+
+function read(): Store {
+  try {
+    const raw = localStorage.getItem(KEY)
+    return raw ? (JSON.parse(raw) as Store) : {}
+  } catch {
+    return {}
+  }
+}
+
+function write(s: Store): void {
+  localStorage.setItem(KEY, JSON.stringify(s))
+}
+
+export function listSaved(): string[] {
+  return Object.keys(read()).sort((a, b) => a.localeCompare(b))
+}
+
+export function loadSaved(name: string): DiagramState | null {
+  return read()[name] ?? null
+}
+
+export function saveDiagram(name: string, state: DiagramState): void {
+  const s = read()
+  s[name] = JSON.parse(JSON.stringify(state))
+  write(s)
+}
+
+export function deleteSaved(name: string): void {
+  const s = read()
+  delete s[name]
+  write(s)
+}
+
+export function renameSaved(oldName: string, newName: string): void {
+  if (oldName === newName) return
+  const s = read()
+  if (!(oldName in s)) return
+  s[newName] = s[oldName]
+  delete s[oldName]
+  write(s)
+}
+
+export function existsSaved(name: string): boolean {
+  return name in read()
+}
+
+// a fresh empty diagram to start from scratch
+export function blankDiagram(type: 'flowchart' | 'statemachine' = 'flowchart'): DiagramState {
+  return { nodes: [], edges: [], subgraphs: [], type }
+}