From 20ea2cb82e2ef096c1e53293f3fc06457b3215a3 Mon Sep 17 00:00:00 2001
From: enzotar <enzotar3000@gmail.com>
Date: Wed, 25 Feb 2026 00:27:42 -0800
Subject: [PATCH] =?UTF-8?q?feat:=20Phase=205=20=E2=80=94=20Live=20Playgrou?=
 =?UTF-8?q?nd=20with=20editor,=20preview,=20signal=20graph,=20console?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- playground.html: full web IDE for DreamStack DSL
- Code editor with auto-compile (500ms debounce) + Ctrl+Enter
- Live preview: renders interactive UI from DreamStack code
- Signal graph: visualizes source signals, derived values, handlers, views
- Console: compile metrics, type inference (Signal<Int>, Derived<Bool>, etc.)
- 4 examples: counter, todo, effects, springs
- Dark theme with purple accent, premium glassmorphism design
---
 examples/playground.html | 1255 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 1255 insertions(+)
 create mode 100644 examples/playground.html
diff --git a/examples/playground.html b/examples/playground.html
new file mode 100644
index 0000000..e1a7990
--- /dev/null
+++ b/examples/playground.html
@@ -0,0 +1,1255 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DreamStack Playground</title>
+    <style>
+        :root {
+            --bg: #0d1117;
+            --surface: #161b22;
+            --surface-2: #1c2333;
+            --border: #30363d;
+            --text: #e6edf3;
+            --text-dim: #7d8590;
+            --accent: #7c3aed;
+            --accent-glow: rgba(124, 58, 237, 0.3);
+            --green: #3fb950;
+            --yellow: #d29922;
+            --red: #f85149;
+            --blue: #58a6ff;
+            --cyan: #39d353;
+            --pink: #f778ba;
+            --orange: #ffa657;
+            --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+            --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: var(--font-sans);
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        /* ─── Header ────────────────────────────────── */
+        .header {
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 16px;
+            background: var(--surface);
+            border-bottom: 1px solid var(--border);
+        }
+
+        .header-left {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .logo {
+            width: 28px;
+            height: 28px;
+            background: var(--accent);
+            border-radius: 6px;
+            display: grid;
+            place-items: center;
+            font-weight: 700;
+            font-size: 14px;
+            box-shadow: 0 0 12px var(--accent-glow);
+        }
+
+        .header-title {
+            font-weight: 600;
+            font-size: 15px;
+        }
+
+        .header-title span {
+            color: var(--text-dim);
+            font-weight: 400;
+        }
+
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn {
+            padding: 6px 14px;
+            border-radius: 6px;
+            border: 1px solid var(--border);
+            background: var(--surface-2);
+            color: var(--text);
+            font-size: 13px;
+            font-family: var(--font-sans);
+            cursor: pointer;
+            transition: all 0.15s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .btn:hover {
+            border-color: var(--accent);
+            background: rgba(124, 58, 237, 0.1);
+        }
+
+        .btn-primary {
+            background: var(--accent);
+            border-color: var(--accent);
+        }
+
+        .btn-primary:hover {
+            background: #8b5cf6;
+            box-shadow: 0 0 16px var(--accent-glow);
+        }
+
+        .status-badge {
+            padding: 3px 10px;
+            border-radius: 12px;
+            font-size: 11px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .status-ok {
+            background: rgba(63, 185, 80, 0.15);
+            color: var(--green);
+        }
+
+        .status-err {
+            background: rgba(248, 81, 73, 0.15);
+            color: var(--red);
+        }
+
+        /* ─── Main layout ──────────────────────────── */
+        .main {
+            height: calc(100vh - 48px);
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }
+
+        .panel {
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .panel+.panel {
+            border-left: 1px solid var(--border);
+        }
+
+        .panel-header {
+            height: 36px;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            background: var(--surface);
+            border-bottom: 1px solid var(--border);
+            font-size: 12px;
+            font-weight: 500;
+            color: var(--text-dim);
+            gap: 8px;
+        }
+
+        .panel-tab {
+            padding: 4px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.15s;
+        }
+
+        .panel-tab:hover {
+            color: var(--text);
+        }
+
+        .panel-tab.active {
+            color: var(--text);
+            background: var(--surface-2);
+        }
+
+        .panel-body {
+            flex: 1;
+            overflow: auto;
+        }
+
+        /* ─── Code Editor ──────────────────────────── */
+        .editor {
+            width: 100%;
+            height: 100%;
+            background: var(--bg);
+            color: var(--text);
+            font-family: var(--font-mono);
+            font-size: 13.5px;
+            line-height: 1.6;
+            padding: 16px;
+            border: none;
+            outline: none;
+            resize: none;
+            tab-size: 2;
+            white-space: pre;
+            overflow: auto;
+        }
+
+        /* ─── Preview ───────────────────────────────── */
+        .preview-container {
+            width: 100%;
+            height: 100%;
+            background: #fff;
+            position: relative;
+        }
+
+        .preview-container iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
+        /* ─── Signal Graph ─────────────────────────── */
+        .signal-graph {
+            padding: 20px;
+            display: none;
+        }
+
+        .signal-graph.active {
+            display: block;
+        }
+
+        .signal-node {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 14px;
+            border-radius: 8px;
+            margin: 6px;
+            font-family: var(--font-mono);
+            font-size: 12px;
+            position: relative;
+        }
+
+        .signal-node.source {
+            background: rgba(124, 58, 237, 0.15);
+            border: 1px solid var(--accent);
+            color: #c4b5fd;
+        }
+
+        .signal-node.derived {
+            background: rgba(88, 166, 255, 0.15);
+            border: 1px solid var(--blue);
+            color: #93c5fd;
+        }
+
+        .signal-node.handler {
+            background: rgba(255, 166, 87, 0.15);
+            border: 1px solid var(--orange);
+            color: #fed7aa;
+        }
+
+        .signal-node.view-node {
+            background: rgba(57, 211, 83, 0.15);
+            border: 1px solid var(--cyan);
+            color: #86efac;
+        }
+
+        .type-badge {
+            font-size: 10px;
+            padding: 1px 6px;
+            border-radius: 4px;
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--text-dim);
+        }
+
+        .graph-section {
+            margin-bottom: 20px;
+        }
+
+        .graph-section-title {
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-dim);
+            margin-bottom: 8px;
+            padding-left: 4px;
+        }
+
+        .dep-arrow {
+            display: inline-flex;
+            align-items: center;
+            color: var(--text-dim);
+            font-size: 11px;
+            margin: 4px 8px;
+            font-family: var(--font-mono);
+        }
+
+        /* ─── Error Panel ──────────────────────────── */
+        .error-panel {
+            background: rgba(248, 81, 73, 0.05);
+            border-top: 1px solid rgba(248, 81, 73, 0.3);
+            padding: 12px 16px;
+            font-family: var(--font-mono);
+            font-size: 12px;
+            color: var(--red);
+            max-height: 150px;
+            overflow: auto;
+            display: none;
+        }
+
+        .error-panel.active {
+            display: block;
+        }
+
+        .error-line {
+            padding: 2px 0;
+        }
+
+        .error-title {
+            font-weight: 600;
+            color: var(--red);
+        }
+
+        /* ─── Console ───────────────────────────────── */
+        .console-output {
+            background: var(--bg);
+            padding: 12px 16px;
+            font-family: var(--font-mono);
+            font-size: 12px;
+            line-height: 1.5;
+            overflow: auto;
+            height: 100%;
+            display: none;
+        }
+
+        .console-output.active {
+            display: block;
+        }
+
+        .console-entry {
+            padding: 2px 0;
+            border-bottom: 1px solid rgba(48, 54, 61, 0.5);
+        }
+
+        .console-entry .tag {
+            display: inline-block;
+            padding: 0 4px;
+            border-radius: 3px;
+            font-size: 10px;
+            font-weight: 500;
+            margin-right: 6px;
+        }
+
+        .tag-signal {
+            background: rgba(124, 58, 237, 0.2);
+            color: #c4b5fd;
+        }
+
+        .tag-effect {
+            background: rgba(255, 166, 87, 0.2);
+            color: #fed7aa;
+        }
+
+        .tag-type {
+            background: rgba(88, 166, 255, 0.2);
+            color: #93c5fd;
+        }
+
+        .tag-info {
+            background: rgba(57, 211, 83, 0.2);
+            color: #86efac;
+        }
+
+        /* ─── Resize handle ────────────────────────── */
+        .resize-handle {
+            width: 4px;
+            cursor: col-resize;
+            background: transparent;
+            transition: background 0.2s;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            z-index: 10;
+        }
+
+        .resize-handle:hover {
+            background: var(--accent);
+        }
+
+        /* ─── Example selector ─────────────────────── */
+        .example-select {
+            background: var(--surface-2);
+            border: 1px solid var(--border);
+            color: var(--text);
+            font-size: 12px;
+            font-family: var(--font-sans);
+            padding: 4px 8px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .example-select:focus {
+            outline: 1px solid var(--accent);
+        }
+
+        /* ─── Animations ───────────────────────────── */
+        @keyframes pulse-glow {
+
+            0%,
+            100% {
+                box-shadow: 0 0 4px var(--accent-glow);
+            }
+
+            50% {
+                box-shadow: 0 0 16px var(--accent-glow);
+            }
+        }
+
+        .compiling .logo {
+            animation: pulse-glow 1s ease-in-out infinite;
+        }
+    </style>
+</head>
+
+<body>
+
+    <!-- HEADER -->
+    <div class="header" id="header">
+        <div class="header-left">
+            <div class="logo">DS</div>
+            <div class="header-title">DreamStack <span>Playground</span></div>
+        </div>
+        <div class="header-actions">
+            <select class="example-select" id="exampleSelect">
+                <option value="counter">Counter</option>
+                <option value="todo">Todo List</option>
+                <option value="effects">Effects Demo</option>
+                <option value="springs">Spring Physics</option>
+            </select>
+            <div class="status-badge status-ok" id="statusBadge">● Ready</div>
+            <button class="btn btn-primary" id="runBtn">▶ Run</button>
+        </div>
+    </div>
+
+    <!-- MAIN -->
+    <div class="main" id="main">
+
+        <!-- LEFT PANEL: EDITOR -->
+        <div class="panel" id="leftPanel">
+            <div class="panel-header">
+                <span class="panel-tab active" data-tab="code">📝 Code</span>
+            </div>
+            <div class="panel-body">
+                <textarea class="editor" id="editor" spellcheck="false"></textarea>
+            </div>
+            <div class="error-panel" id="errorPanel"></div>
+        </div>
+
+        <!-- RIGHT PANEL: PREVIEW / GRAPH / CONSOLE -->
+        <div class="panel" id="rightPanel">
+            <div class="panel-header">
+                <span class="panel-tab active" data-tab="preview" id="tabPreview">👁 Preview</span>
+                <span class="panel-tab" data-tab="graph" id="tabGraph">🔗 Signal Graph</span>
+                <span class="panel-tab" data-tab="console" id="tabConsole">📋 Console</span>
+            </div>
+            <div class="panel-body" style="position:relative">
+                <div class="preview-container active" id="previewPane">
+                    <iframe id="previewFrame" sandbox="allow-scripts allow-same-origin"></iframe>
+                </div>
+                <div class="signal-graph" id="graphPane"></div>
+                <div class="console-output" id="consolePane"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // ═══════════════════════════════════════════════════════════
+        // DreamStack Playground — Client-side Compiler + Runtime
+        // ═══════════════════════════════════════════════════════════
+
+        // ─── Examples ─────────────────────────────────────────────
+
+        const EXAMPLES = {
+            counter: `// DreamStack Counter
+// Signals auto-track dependencies. No useState, no selectors.
+
+let count = 0
+let label = "DreamStack"
+
+// Derived values: recompute automatically when dependencies change
+let doubled = count * 2
+let is_hot = count > 10
+
+view main = column [
+  text label
+  text "Count: {count}"
+  text "Doubled: {doubled}"
+  when is_hot -> text "🔥 On fire!"
+
+  row [
+    button "-" { click: decrement }
+    button "+" { click: increment }
+    button "Reset" { click: reset }
+  ]
+]
+
+on increment -> count += 1
+on decrement -> count -= 1
+on reset -> count = 0`,
+
+            todo: `// DreamStack Todo
+// Reactive list rendering with signals — no virtual DOM.
+
+let todos = []
+let input_text = ""
+let filter = "all"
+
+// Derived: filtered todos
+let visible = todos | filter_by(filter)
+let total = todos.length
+let done = todos | count_where(completed)
+let active = total - done
+
+view main = column [
+  text "📋 DreamStack Todos"
+  row [
+    input input_text { placeholder: "What needs doing?" }
+    button "Add" { click: add_todo }
+  ]
+
+  list visible -> todo [
+    row [
+      button (if todo.completed "✅" else "⬜") { click: toggle(todo.id) }
+      text todo.text
+      button "✕" { click: remove(todo.id) }
+    ]
+  ]
+
+  row [
+    text "{active} remaining"
+    button "All" { click: set_filter("all") }
+    button "Active" { click: set_filter("active") }
+    button "Done" { click: set_filter("done") }
+  ]
+]
+
+on add_todo -> {
+  todos = [...todos, { id: next_id(), text: input_text, completed: false }]
+  input_text = ""
+}`,
+
+            effects: `// DreamStack Effects
+// Algebraic effects for testable, composable side-effects.
+
+effect Http.search(query: String): [Result]
+effect Time.debounce(ms: Int): ()
+
+let query = ""
+let results = []
+let loading = false
+
+// Stream pipeline: debounce -> distinct -> search
+let search_stream = stream from query
+  | debounce(250)
+  | distinct
+  | flat_map(q -> perform Http.search(q))
+
+view main = column [
+  text "🔍 DreamStack Search"
+  input query { placeholder: "Search..." }
+  when loading -> text "Searching..."
+  list results -> item [
+    text item.title
+    text item.description
+  ]
+]
+
+// Effect handler — swappable for testing!
+handle search_stream {
+  Http.search(q) -> fetch("/api/search?q=" ++ q)
+  Time.debounce(ms) -> wait(ms)
+}`,
+
+            springs: `// DreamStack Springs
+// Physics-based animation — springs are signals!
+
+let sidebar_w = spring(target: 240, stiffness: 170, damping: 26)
+let card_y = spring(target: 0, stiffness: 300, damping: 30)
+let expanded = true
+
+// Derived: icon rotation follows sidebar state
+let toggle_rotation = spring(target: 0, stiffness: 200, damping: 20)
+
+view main = row [
+  // Sidebar
+  panel { width: sidebar_w } [
+    text "📊 Dashboard"
+    text "📈 Analytics"
+    text "⚡ Signals"
+    button "☰" { click: toggle_sidebar }
+  ]
+
+  // Main area
+  column [
+    text "Welcome to DreamStack"
+    text "Springs are signals — they auto-propagate!"
+
+    row [
+      card { y: card_y } [
+        text "⚡ Signals: 1,247"
+      ]
+    ]
+  ]
+]
+
+on toggle_sidebar -> {
+  expanded = !expanded
+  sidebar_w.target = if expanded 240 else 64
+  toggle_rotation.target = if expanded 0 else 180
+}`
+        };
+
+        // ─── Mini Compiler (JS-side) ──────────────────────────────
+
+        class DSCompiler {
+            constructor() {
+                this.signals = [];
+                this.deriveds = [];
+                this.handlers = [];
+                this.views = [];
+                this.effects = [];
+                this.errors = [];
+            }
+
+            compile(source) {
+                this.signals = [];
+                this.deriveds = [];
+                this.handlers = [];
+                this.views = [];
+                this.effects = [];
+                this.errors = [];
+
+                const lines = source.split('\n');
+                let current_view = null;
+                let view_depth = 0;
+
+                for (let i = 0; i < lines.length; i++) {
+                    const line = lines[i].trim();
+                    const lineNum = i + 1;
+
+                    if (line.startsWith('//') || line === '') continue;
+
+                    // let NAME = VALUE
+                    if (line.startsWith('let ')) {
+                        const match = line.match(/^let\s+(\w+)\s*=\s*(.+)$/);
+                        if (match) {
+                            const [, name, value] = match;
+                            const isLiteral = /^(\d+|"[^"]*"|true|false|\[\])$/.test(value.trim());
+                            const isSpring = value.trim().startsWith('spring(');
+                            const deps = this.extractDeps(value);
+
+                            if (isSpring) {
+                                this.signals.push({
+                                    name, value: value.trim(), type: 'spring',
+                                    springType: 'Spring<Float>', line: lineNum
+                                });
+                            } else if (isLiteral) {
+                                const ty = this.inferType(value.trim());
+                                this.signals.push({ name, value: value.trim(), type: 'source', inferredType: ty, line: lineNum });
+                            } else {
+                                const ty = this.inferExprType(value.trim());
+                                this.deriveds.push({ name, expr: value.trim(), deps, type: 'derived', inferredType: ty, line: lineNum });
+                            }
+                        } else {
+                            this.errors.push({ line: lineNum, message: `Syntax error: malformed 'let' declaration` });
+                        }
+                    }
+
+                    // effect NAME(...)
+                    else if (line.startsWith('effect ')) {
+                        const match = line.match(/^effect\s+(\S+)\(([^)]*)\):\s*(.+)$/);
+                        if (match) {
+                            const [, name, params, retType] = match;
+                            this.effects.push({
+                                name, params: params.split(',').map(p => p.trim()).filter(Boolean),
+                                returnType: retType.trim(), line: lineNum
+                            });
+                        }
+                    }
+
+                    // on NAME -> BODY
+                    else if (line.startsWith('on ')) {
+                        const match = line.match(/^on\s+(\w+)\s*->\s*(.*)$/);
+                        if (match) {
+                            const [, event, body] = match;
+                            this.handlers.push({ event, body: body || '', line: lineNum });
+                        }
+                    }
+
+                    // view NAME = ...
+                    else if (line.startsWith('view ')) {
+                        const match = line.match(/^view\s+(\w+)\s*=\s*(.*)$/);
+                        if (match) {
+                            const [, name, body] = match;
+                            this.views.push({ name, body, line: lineNum });
+                        }
+                    }
+                }
+
+                // Validate: check for unbound variables in deriveds
+                const known = new Set([
+                    ...this.signals.map(s => s.name),
+                    ...this.deriveds.map(d => d.name),
+                ]);
+                for (const d of this.deriveds) {
+                    for (const dep of d.deps) {
+                        if (!known.has(dep) && !['length', 'completed', 'filter_by', 'count_where'].includes(dep)) {
+                            this.errors.push({
+                                line: d.line,
+                                message: `Unbound variable '${dep}' in derived expression '${d.name}'`
+                            });
+                        }
+                    }
+                }
+
+                return {
+                    signals: this.signals,
+                    deriveds: this.deriveds,
+                    handlers: this.handlers,
+                    views: this.views,
+                    effects: this.effects,
+                    errors: this.errors,
+                };
+            }
+
+            extractDeps(expr) {
+                const ids = expr.match(/[a-zA-Z_]\w*/g) || [];
+                const keywords = new Set(['if', 'else', 'when', 'true', 'false', 'let', 'spring',
+                    'target', 'stiffness', 'damping', 'mass', 'filter_by', 'count_where',
+                    'debounce', 'distinct', 'flat_map', 'perform', 'stream', 'from', 'length',
+                    'next_id', 'fetch', 'wait', 'not']);
+                return [...new Set(ids.filter(id => !keywords.has(id)))];
+            }
+
+            inferType(value) {
+                if (/^\d+$/.test(value)) return 'Signal<Int>';
+                if (/^\d+\.\d+$/.test(value)) return 'Signal<Float>';
+                if (/^".*"$/.test(value)) return 'Signal<String>';
+                if (value === 'true' || value === 'false') return 'Signal<Bool>';
+                if (value === '[]') return 'Signal<[?]>';
+                return 'Signal<?>';
+            }
+
+            inferExprType(expr) {
+                if (expr.includes('>') || expr.includes('<') || expr.includes('==')) return 'Derived<Bool>';
+                if (expr.includes('+') || expr.includes('-') || expr.includes('*') || expr.includes('/')) return 'Derived<Int>';
+                if (expr.includes('.length')) return 'Derived<Int>';
+                if (expr.includes('|')) return 'Derived<?>';
+                return 'Derived<?>';
+            }
+        }
+
+        // ─── Signal Graph Visualizer ──────────────────────────────
+
+        function renderSignalGraph(compiled) {
+            const graph = document.getElementById('graphPane');
+            let html = '';
+
+            // Sources
+            if (compiled.signals.length > 0) {
+                html += '<div class="graph-section">';
+                html += '<div class="graph-section-title">⚡ Source Signals</div>';
+                for (const s of compiled.signals) {
+                    const ty = s.type === 'spring' ? s.springType : s.inferredType;
+                    html += `<div class="signal-node source">
+        <strong>${s.name}</strong>
+        <span class="type-badge">${ty}</span>
+        <span style="color:var(--text-dim);font-size:11px">= ${escHtml(s.value)}</span>
+      </div>`;
+                }
+                html += '</div>';
+            }
+
+            // Derived
+            if (compiled.deriveds.length > 0) {
+                html += '<div class="graph-section">';
+                html += '<div class="graph-section-title">🔗 Derived Values</div>';
+                for (const d of compiled.deriveds) {
+                    const depList = d.deps.join(', ');
+                    html += `<div class="signal-node derived">
+        <strong>${d.name}</strong>
+        <span class="type-badge">${d.inferredType}</span>
+        <span class="dep-arrow">← ${depList || '(none)'}</span>
+      </div>`;
+                }
+                html += '</div>';
+            }
+
+            // Handlers
+            if (compiled.handlers.length > 0) {
+                html += '<div class="graph-section">';
+                html += '<div class="graph-section-title">🎯 Event Handlers</div>';
+                for (const h of compiled.handlers) {
+                    html += `<div class="signal-node handler">
+        <strong>on ${h.event}</strong>
+        <span style="color:var(--text-dim);font-size:11px">→ ${escHtml(h.body).substring(0, 50)}</span>
+      </div>`;
+                }
+                html += '</div>';
+            }
+
+            // Effects
+            if (compiled.effects.length > 0) {
+                html += '<div class="graph-section">';
+                html += '<div class="graph-section-title">✨ Effect Declarations</div>';
+                for (const e of compiled.effects) {
+                    html += `<div class="signal-node view-node">
+        <strong>${e.name}</strong>
+        <span class="type-badge">(${e.params.join(', ')}) → ${e.returnType}</span>
+      </div>`;
+                }
+                html += '</div>';
+            }
+
+            // Views
+            if (compiled.views.length > 0) {
+                html += '<div class="graph-section">';
+                html += '<div class="graph-section-title">👁 Views</div>';
+                for (const v of compiled.views) {
+                    html += `<div class="signal-node view-node">
+        <strong>view ${v.name}</strong>
+        <span class="type-badge">View</span>
+      </div>`;
+                }
+                html += '</div>';
+            }
+
+            // Dependency graph (mini SVG)
+            if (compiled.deriveds.length > 0) {
+                html += '<div class="graph-section">';
+                html += '<div class="graph-section-title">📊 Dependency Flow</div>';
+                html += '<div style="padding:8px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim)">';
+                for (const d of compiled.deriveds) {
+                    for (const dep of d.deps) {
+                        html += `<div style="padding:2px 0"><span style="color:var(--accent)">${dep}</span> → <span style="color:var(--blue)">${d.name}</span></div>`;
+                    }
+                }
+                html += '</div>';
+                html += '</div>';
+            }
+
+            graph.innerHTML = html || '<div style="padding:20px;color:var(--text-dim)">Write some DreamStack code to see the signal graph</div>';
+        }
+
+        function escHtml(s) {
+            const d = document.createElement('div');
+            d.textContent = s;
+            return d.innerHTML;
+        }
+
+        // ─── Console ──────────────────────────────────────────────
+
+        const consoleLogs = [];
+
+        function logToConsole(tag, message) {
+            consoleLogs.push({ tag, message, time: performance.now() });
+            renderConsole();
+        }
+
+        function renderConsole() {
+            const pane = document.getElementById('consolePane');
+            pane.innerHTML = consoleLogs.map(entry => {
+                const tagClass = entry.tag === 'signal' ? 'tag-signal'
+                    : entry.tag === 'effect' ? 'tag-effect'
+                        : entry.tag === 'type' ? 'tag-type'
+                            : 'tag-info';
+                return `<div class="console-entry">
+      <span class="tag ${tagClass}">${entry.tag}</span>
+      ${escHtml(entry.message)}
+    </div>`;
+            }).join('');
+            pane.scrollTop = pane.scrollHeight;
+        }
+
+        // ─── Preview Generation ───────────────────────────────────
+
+        function generatePreview(compiled) {
+            // Build a simple interactive preview from the compiled AST
+            const signals = compiled.signals;
+            const deriveds = compiled.deriveds;
+            const handlers = compiled.handlers;
+
+            let previewHtml = `<!DOCTYPE html>
+<html>
+<head>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'Inter', -apple-system, system-ui, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+  }
+  .app {
+    background: rgba(255,255,255,0.95);
+    border-radius: 16px;
+    padding: 32px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+    min-width: 320px;
+    max-width: 500px;
+    backdrop-filter: blur(20px);
+  }
+  h1 { font-size: 24px; margin-bottom: 16px; color: #1a1a2e; }
+  .signal-display {
+    background: #f0f0ff;
+    border-radius: 10px;
+    padding: 12px 16px;
+    margin: 8px 0;
+    font-size: 16px;
+    color: #333;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .signal-name { color: #7c3aed; font-weight: 600; font-family: monospace; }
+  .signal-value { color: #1a1a2e; font-weight: 700; font-size: 18px; }
+  .btn-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
+  button {
+    padding: 10px 20px;
+    border-radius: 8px;
+    border: none;
+    background: #7c3aed;
+    color: white;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  button:hover { background: #6d28d9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237,0.3); }
+  button:active { transform: translateY(0); }
+  .hot-indicator {
+    background: linear-gradient(135deg, #f59e0b, #ef4444);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 700;
+    font-size: 18px;
+    padding: 8px 0;
+    display: none;
+  }
+  .derived-display {
+    background: #e8f4fd;
+    border-radius: 10px;
+    padding: 12px 16px;
+    margin: 8px 0;
+    font-size: 16px;
+    color: #0a5276;
+  }
+  .spring-demo {
+    background: #1a1a2e;
+    border-radius: 12px;
+    padding: 24px;
+    margin: 12px 0;
+    text-align: center;
+    color: white;
+    position: relative;
+    overflow: hidden;
+    height: 120px;
+  }
+  .spring-ball {
+    width: 40px; height: 40px;
+    background: #7c3aed;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+    box-shadow: 0 0 20px rgba(124,58,237,0.5);
+  }
+</style>
+</head>
+<body>
+<div class="app">`;
+
+            // Find the view name
+            const viewName = compiled.views[0]?.name || 'main';
+
+            // Generate signal displays
+            const numSignals = signals.filter(s => s.type === 'source');
+            const springSignals = signals.filter(s => s.type === 'spring');
+
+            // Title from first string signal
+            const titleSignal = numSignals.find(s => s.inferredType === 'Signal<String>');
+            if (titleSignal) {
+                previewHtml += `<h1 id="title">${titleSignal.value.replace(/"/g, '')}</h1>`;
+            } else {
+                previewHtml += `<h1>DreamStack Preview</h1>`;
+            }
+
+            // Numeric signals
+            const intSignals = numSignals.filter(s => s.inferredType === 'Signal<Int>');
+            for (const s of intSignals) {
+                previewHtml += `<div class="signal-display">
+      <span class="signal-name">${s.name}</span>
+      <span class="signal-value" id="val_${s.name}">${s.value}</span>
+    </div>`;
+            }
+
+            // Derived displays
+            for (const d of deriveds) {
+                if (d.inferredType === 'Derived<Bool>') {
+                    previewHtml += `<div class="hot-indicator" id="val_${d.name}">🔥 On fire!</div>`;
+                } else {
+                    previewHtml += `<div class="derived-display">
+        <span class="signal-name">${d.name}</span> =
+        <span id="val_${d.name}">0</span>
+      </div>`;
+                }
+            }
+
+            // Spring demos
+            if (springSignals.length > 0) {
+                previewHtml += `<div class="spring-demo" id="springDemo">
+      <div class="spring-ball" id="springBall" style="left:50%"></div>
+    </div>`;
+            }
+
+            // Handler buttons
+            if (handlers.length > 0) {
+                previewHtml += `<div class="btn-row">`;
+                for (const h of handlers) {
+                    const label = h.event.replace(/_/g, ' ');
+                    previewHtml += `<button onclick="${h.event}()">${label}</button>`;
+                }
+                previewHtml += `</div>`;
+            }
+
+            previewHtml += `</div>
+<script>
+// ═══ DreamStack Runtime (embedded) ═══
+const _signals = {};
+const _effects = [];
+
+function signal(name, initial) {
+  _signals[name] = { value: initial, subs: [] };
+  return _signals[name];
+}
+
+function update() {
+  // Update derived values
+  ${deriveds.map(d => {
+                if (d.inferredType.includes('Bool')) {
+                    return `{
+        const val = ${d.expr.replace(/(\w+)/g, (m) => {
+                        const found = numSignals.find(s => s.name === m);
+                        return found ? `_signals["${m}"].value` : m;
+                    })};
+        const el = document.getElementById("val_${d.name}");
+        if (el) el.style.display = val ? "block" : "none";
+      }`;
+                } else {
+                    return `{
+        try {
+          const val = ${d.expr.replace(/(\b[a-zA-Z_]\w*\b)/g, (m) => {
+                        const isKnown = [...numSignals, ...deriveds].find(x => x.name === m);
+                        return isKnown ? `_signals["${m}"]?.value || 0` : m;
+                    })};
+          _signals["${d.name}"] = _signals["${d.name}"] || { value: 0 };
+          _signals["${d.name}"].value = val;
+          const el = document.getElementById("val_${d.name}");
+          if (el) el.textContent = val;
+        } catch(e) {}
+      }`;
+                }
+            }).join('\n  ')}
+
+  // Update signal displays
+  ${intSignals.map(s => `{
+    const el = document.getElementById("val_${s.name}");
+    if (el) el.textContent = _signals["${s.name}"].value;
+  }`).join('\n  ')}
+}
+
+// Init signals
+${numSignals.map(s => `signal("${s.name}", ${s.value});`).join('\n')}
+${deriveds.map(d => `_signals["${d.name}"] = { value: 0 };`).join('\n')}
+
+// Handler functions
+${handlers.map(h => {
+                // Parse simple handler bodies
+                const body = h.body.trim();
+                let jsBody = '';
+
+                if (body.includes('+=')) {
+                    const [varname, delta] = body.split('+=').map(s => s.trim());
+                    jsBody = `_signals["${varname}"].value += ${delta}; update();`;
+                } else if (body.includes('-=')) {
+                    const [varname, delta] = body.split('-=').map(s => s.trim());
+                    jsBody = `_signals["${varname}"].value -= ${delta}; update();`;
+                } else if (body.includes('= ')) {
+                    const [varname, val] = body.split('=').map(s => s.trim());
+                    jsBody = `_signals["${varname}"].value = ${val}; update();`;
+                } else if (body.includes('!expanded')) {
+                    jsBody = `
+      const ball = document.getElementById("springBall");
+      if (ball) {
+        const current = parseInt(ball.style.left) || 50;
+        ball.style.left = current > 40 ? "15%" : "85%";
+      }
+    `;
+                } else {
+                    jsBody = `console.log("${h.event} triggered"); update();`;
+                }
+
+                return `function ${h.event}() { ${jsBody} }`;
+            }).join('\n')}
+
+// Spring interaction
+${springSignals.length > 0 ? `
+document.getElementById("springDemo")?.addEventListener("click", (e) => {
+  const rect = e.currentTarget.getBoundingClientRect();
+  const x = ((e.clientX - rect.left) / rect.width * 100);
+  const ball = document.getElementById("springBall");
+  if (ball) ball.style.left = x + "%";
+});
+` : ''}
+
+// Initial render
+update();
+<\/script>
+</body>
+</html>`;
+
+            return previewHtml;
+        }
+
+        // ─── App Logic ────────────────────────────────────────────
+
+        const compiler = new DSCompiler();
+        const editor = document.getElementById('editor');
+        const previewFrame = document.getElementById('previewFrame');
+        const statusBadge = document.getElementById('statusBadge');
+        const errorPanel = document.getElementById('errorPanel');
+        const runBtn = document.getElementById('runBtn');
+        const exampleSelect = document.getElementById('exampleSelect');
+
+        // Tab switching
+        const rightTabs = document.querySelectorAll('#rightPanel .panel-tab');
+        rightTabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                rightTabs.forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+                const name = tab.dataset.tab;
+                document.getElementById('previewPane').style.display = name === 'preview' ? 'block' : 'none';
+                document.getElementById('graphPane').style.display = name === 'graph' ? 'block' : 'none';
+                document.getElementById('consolePane').style.display = name === 'console' ? 'block' : 'none';
+                // Add/remove .active class
+                document.getElementById('previewPane').className = name === 'preview' ? 'preview-container active' : 'preview-container';
+                document.getElementById('graphPane').className = name === 'graph' ? 'signal-graph active' : 'signal-graph';
+                document.getElementById('consolePane').className = name === 'console' ? 'console-output active' : 'console-output';
+            });
+        });
+
+        function runCode() {
+            const source = editor.value;
+            const startTime = performance.now();
+
+            // Compile
+            const compiled = compiler.compile(source);
+            const compileTime = (performance.now() - startTime).toFixed(1);
+
+            // Log to console
+            consoleLogs.length = 0;
+            logToConsole('info', `Compiled in ${compileTime}ms`);
+            logToConsole('signal', `${compiled.signals.length} source signal(s)`);
+            logToConsole('type', `${compiled.deriveds.length} derived value(s)`);
+            logToConsole('effect', `${compiled.effects.length} effect declaration(s)`);
+
+            for (const s of compiled.signals) {
+                const ty = s.type === 'spring' ? s.springType : s.inferredType;
+                logToConsole('type', `${s.name}: ${ty}`);
+            }
+            for (const d of compiled.deriveds) {
+                logToConsole('type', `${d.name}: ${d.inferredType} ← [${d.deps.join(', ')}]`);
+            }
+
+            // Errors
+            if (compiled.errors.length > 0) {
+                statusBadge.className = 'status-badge status-err';
+                statusBadge.textContent = `✕ ${compiled.errors.length} error(s)`;
+                errorPanel.className = 'error-panel active';
+                errorPanel.innerHTML = compiled.errors.map(e =>
+                    `<div class="error-line"><span class="error-title">── ERROR ─────</span> Line ${e.line}: ${escHtml(e.message)}</div>`
+                ).join('');
+                for (const e of compiled.errors) {
+                    logToConsole('type', `ERROR line ${e.line}: ${e.message}`);
+                }
+            } else {
+                statusBadge.className = 'status-badge status-ok';
+                statusBadge.textContent = `● ${compileTime}ms`;
+                errorPanel.className = 'error-panel';
+                errorPanel.innerHTML = '';
+            }
+
+            // Update signal graph
+            renderSignalGraph(compiled);
+
+            // Generate and display preview
+            const previewHtml = generatePreview(compiled);
+            const blob = new Blob([previewHtml], { type: 'text/html' });
+            previewFrame.src = URL.createObjectURL(blob);
+        }
+
+        // Run on button click
+        runBtn.addEventListener('click', runCode);
+
+        // Auto-run on Ctrl+Enter
+        editor.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                e.preventDefault();
+                runCode();
+            }
+            // Tab key inserts spaces
+            if (e.key === 'Tab') {
+                e.preventDefault();
+                const start = editor.selectionStart;
+                const end = editor.selectionEnd;
+                editor.value = editor.value.substring(0, start) + '  ' + editor.value.substring(end);
+                editor.selectionStart = editor.selectionEnd = start + 2;
+            }
+        });
+
+        // Example selector
+        exampleSelect.addEventListener('change', () => {
+            editor.value = EXAMPLES[exampleSelect.value];
+            runCode();
+        });
+
+        // Auto-compile with debounce
+        let compileTimer = null;
+        editor.addEventListener('input', () => {
+            clearTimeout(compileTimer);
+            compileTimer = setTimeout(runCode, 500);
+        });
+
+        // Initialize with counter example
+        editor.value = EXAMPLES.counter;
+        runCode();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
