icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/forge_studio_builder.html

@@ -0,0 +1,1637 @@
+{% extends "base.html" %}
+{% block title %}Forge Studio Builder{% endblock %}
+{% block content %}
+<style>
+    /* ---- Layout: 3-column IDE ---- */
+    .fsb { display: grid; grid-template-columns: 260px 1fr 300px; grid-template-rows: 44px 1fr; height: calc(100vh - 56px); overflow: hidden; }
+    .fsb-toolbar { grid-column: 1/-1; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
+    .fsb-palette { grid-row: 2; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); }
+    .fsb-canvas-wrap { grid-row: 2; display: flex; flex-direction: column; overflow: hidden; }
+    .fsb-props { grid-row: 2; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--border); }
+
+    /* ---- Toolbar ---- */
+    .fsb-toolbar .app-name { font-weight: 700; font-size: 14px; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
+    .fsb-toolbar button { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 5px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; white-space: nowrap; }
+    .fsb-toolbar button:hover { border-color: var(--accent); }
+    .fsb-toolbar button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+    .fsb-toolbar button.primary:hover { filter: brightness(1.15); }
+    .fsb-toolbar .sep { width: 1px; height: 20px; background: var(--border); }
+    .fsb-toolbar .viewport-btns { display: flex; gap: 2px; }
+    .fsb-toolbar .vp-btn { padding: 4px 8px; border-radius: 4px; font-size: 11px; background: transparent; border: 1px solid transparent; color: var(--text-dim); cursor: pointer; }
+    .fsb-toolbar .vp-btn.active { background: var(--surface2); border-color: var(--border); color: var(--text); }
+
+    /* ---- Palette (left) ---- */
+    .fsb-palette-search { padding: 10px; position: sticky; top: 0; background: var(--surface); z-index: 2; }
+    .fsb-palette-search input { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 7px 10px; font-size: 12px; }
+    .fsb-cat { padding: 0 10px; margin-bottom: 8px; }
+    .fsb-cat-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); padding: 6px 0; font-weight: 600; cursor: pointer; user-select: none; }
+    .fsb-cat-title:hover { color: var(--accent); }
+    .fsb-comp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
+    .fsb-comp { padding: 8px 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; text-align: center; cursor: grab; user-select: none; transition: all .12s; }
+    .fsb-comp:hover { border-color: var(--accent); background: rgba(59,130,246,.08); }
+    .fsb-comp:active { cursor: grabbing; opacity: .7; }
+    .fsb-comp .icon { font-size: 16px; display: block; margin-bottom: 2px; }
+
+    /* ---- Canvas (center) ---- */
+    .fsb-canvas-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12px; }
+    .fsb-page-tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
+    .fsb-page-tab { padding: 4px 12px; border-radius: 4px; font-size: 11px; cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--text-dim); white-space: nowrap; }
+    .fsb-page-tab.active { background: var(--surface2); border-color: var(--border); color: var(--text); }
+    .fsb-page-tab:hover { color: var(--text); }
+    .fsb-add-page { font-size: 14px; cursor: pointer; color: var(--text-dim); padding: 2px 6px; border-radius: 4px; }
+    .fsb-add-page:hover { color: var(--accent); background: var(--surface2); }
+
+    .fsb-canvas { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 24px; background: var(--bg, #0d1117); }
+    .fsb-frame { background: #fff; border-radius: 8px; box-shadow: 0 2px 20px rgba(0,0,0,.25); overflow: hidden; transition: width .3s; }
+    .fsb-frame.desktop { width: 100%; max-width: 1200px; }
+    .fsb-frame.tablet { width: 768px; }
+    .fsb-frame.mobile { width: 375px; }
+    .fsb-frame-inner { min-height: 500px; padding: 16px; position: relative; }
+
+    /* ---- Tree Nodes on Canvas ---- */
+    .fsb-node { border: 2px dashed transparent; border-radius: 6px; padding: 8px; margin: 4px 0; min-height: 36px; position: relative; transition: all .12s; }
+    .fsb-node:hover { border-color: rgba(59,130,246,.4); }
+    .fsb-node.selected { border-color: var(--accent) !important; background: rgba(59,130,246,.06); }
+    .fsb-node.drag-over { border-color: #22c55e; background: rgba(34,197,94,.08); }
+    .fsb-node-label { position: absolute; top: -10px; left: 8px; font-size: 9px; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 3px; opacity: 0; transition: opacity .12s; z-index: 5; pointer-events: none; }
+    .fsb-node:hover .fsb-node-label, .fsb-node.selected .fsb-node-label { opacity: 1; }
+    .fsb-node-actions { position: absolute; top: -10px; right: 8px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; z-index: 5; }
+    .fsb-node:hover .fsb-node-actions, .fsb-node.selected .fsb-node-actions { opacity: 1; }
+    .fsb-node-actions button { font-size: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; padding: 1px 4px; color: var(--text-dim); }
+    .fsb-node-actions button:hover { color: #ef4444; border-color: #ef4444; }
+    .fsb-drop-zone { min-height: 40px; border: 2px dashed var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-dim); transition: all .15s; }
+    .fsb-drop-zone.drag-over { border-color: #22c55e; background: rgba(34,197,94,.08); color: #22c55e; }
+
+    /* Component visual hints on canvas */
+    .fsb-vis { font-size: 12px; color: #333; }
+    .fsb-vis-btn { display: inline-block; background: #3b82f6; color: #fff; padding: 6px 16px; border-radius: 6px; font-size: 12px; }
+    .fsb-vis-input { display: block; width: 100%; background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px; padding: 8px; font-size: 12px; color: #999; }
+    .fsb-vis-card { background: #fafafa; border: 1px solid #e5e5e5; border-radius: 8px; padding: 12px; }
+    .fsb-vis-text { font-size: 13px; color: #333; }
+    .fsb-vis-heading { font-size: 18px; font-weight: 700; color: #111; }
+    .fsb-vis-metric { text-align: center; padding: 12px; }
+    .fsb-vis-metric .val { font-size: 24px; font-weight: 700; color: #3b82f6; }
+    .fsb-vis-metric .lbl { font-size: 11px; color: #999; }
+    .fsb-vis-table { width: 100%; border-collapse: collapse; font-size: 11px; color: #555; }
+    .fsb-vis-table th, .fsb-vis-table td { border: 1px solid #e5e5e5; padding: 6px 8px; text-align: left; }
+    .fsb-vis-table th { background: #f5f5f5; font-weight: 600; }
+    .fsb-vis-badge { display: inline-block; background: #e5e5e5; padding: 2px 8px; border-radius: 10px; font-size: 10px; }
+    .fsb-vis-flex { display: flex; gap: 8px; flex-wrap: wrap; }
+    .fsb-vis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
+    .fsb-vis-separator { border-top: 1px solid #e5e5e5; margin: 8px 0; }
+    .fsb-vis-tabs { display: flex; gap: 0; border-bottom: 2px solid #e5e5e5; margin-bottom: 8px; }
+    .fsb-vis-tabs span { padding: 6px 14px; font-size: 12px; color: #999; cursor: default; }
+    .fsb-vis-tabs span:first-child { color: #3b82f6; border-bottom: 2px solid #3b82f6; margin-bottom: -2px; }
+    .fsb-vis-chart { background: #f0f4ff; border-radius: 8px; height: 160px; display: flex; align-items: center; justify-content: center; color: #3b82f6; font-size: 12px; }
+    .fsb-vis-sidebar { display: flex; }
+    .fsb-vis-sidebar-nav { width: 200px; background: #1e293b; color: #94a3b8; padding: 12px; border-radius: 8px 0 0 8px; min-height: 200px; }
+    .fsb-vis-sidebar-nav .item { padding: 6px 10px; border-radius: 4px; font-size: 12px; margin-bottom: 2px; }
+    .fsb-vis-sidebar-nav .item:first-child { background: rgba(59,130,246,.2); color: #60a5fa; }
+    .fsb-vis-kanban { display: flex; gap: 8px; overflow-x: auto; }
+    .fsb-vis-kanban-col { min-width: 180px; background: #f5f5f5; border-radius: 8px; padding: 8px; }
+    .fsb-vis-kanban-col h4 { font-size: 11px; text-transform: uppercase; color: #999; margin-bottom: 6px; }
+    .fsb-vis-kanban-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 8px; margin-bottom: 4px; font-size: 11px; }
+
+    /* ---- Properties (right) ---- */
+    .fsb-props-header { padding: 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; }
+    .fsb-props-header h3 { font-size: 13px; font-weight: 600; margin: 0; }
+    .fsb-props-header .type { font-size: 11px; color: var(--accent); }
+    .fsb-props-empty { padding: 40px 20px; text-align: center; color: var(--text-dim); font-size: 13px; }
+    .fsb-prop-group { padding: 12px; border-bottom: 1px solid var(--border); }
+    .fsb-prop-group-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
+    .fsb-prop { margin-bottom: 10px; }
+    .fsb-prop label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 3px; }
+    .fsb-prop input, .fsb-prop select, .fsb-prop textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 8px; font-size: 12px; }
+    .fsb-prop textarea { min-height: 60px; resize: vertical; }
+    .fsb-prop input[type="checkbox"] { width: auto; }
+    .fsb-prop-id { font-size: 10px; color: var(--text-dim); font-family: monospace; }
+
+    /* ---- Preview Panel (toggle replaces canvas) ---- */
+    .fsb-preview-panel { display: none; flex: 1; overflow: auto; background: #0d1117; padding: 20px; }
+    .fsb-preview-panel.active { display: flex; flex-direction: column; }
+    .fsb-preview-tabs { display: flex; gap: 2px; margin-bottom: 12px; }
+    .fsb-preview-tabs span { padding: 5px 12px; border-radius: 6px 6px 0 0; font-size: 11px; cursor: pointer; background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); border-bottom: none; }
+    .fsb-preview-tabs span.active { background: var(--surface); color: var(--text); }
+    .fsb-preview-code { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; font-family: monospace; font-size: 12px; white-space: pre-wrap; overflow-x: auto; color: var(--text); max-height: 80vh; overflow-y: auto; flex: 1; }
+    .fsb-live-preview { flex: 1; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
+    .fsb-live-preview iframe { width: 100%; height: 100%; min-height: 500px; border: none; }
+
+    /* ---- Data Binding (property panel section) ---- */
+    .fsb-binding { background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.15); border-radius: 6px; padding: 8px; margin-bottom: 8px; }
+    .fsb-binding-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+    .fsb-binding-header .tag { font-size: 9px; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 3px; }
+    .fsb-binding-remove { font-size: 10px; cursor: pointer; color: var(--text-dim); }
+    .fsb-binding-remove:hover { color: #ef4444; }
+
+    /* ---- Intake Chat Panel ---- */
+    .fsb-chat-panel { display: none; flex-direction: column; height: 100%; background: var(--surface); }
+    .fsb-chat-panel.active { display: flex; }
+    .fsb-chat-header { padding: 16px; border-bottom: 1px solid var(--border); }
+    .fsb-chat-header h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px 0; }
+    .fsb-chat-header p { font-size: 12px; color: var(--text-dim); margin: 0 0 10px 0; }
+    .fsb-readiness-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; position: relative; }
+    .fsb-readiness-fill { height: 100%; border-radius: 4px; transition: width .5s, background .5s; background: #ef4444; }
+    .fsb-readiness-fill.medium { background: #eab308; }
+    .fsb-readiness-fill.ready { background: #22c55e; }
+    .fsb-readiness-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-top: 4px; }
+    .fsb-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+    .fsb-chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; }
+    .fsb-chat-msg.analyst { align-self: flex-start; background: var(--surface2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
+    .fsb-chat-msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
+    .fsb-chat-msg.system { align-self: center; background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.25); color: var(--text); font-size: 12px; text-align: center; max-width: 90%; }
+    .fsb-chat-input-row { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
+    .fsb-chat-input-row textarea { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 10px; font-size: 13px; resize: none; min-height: 44px; max-height: 120px; font-family: inherit; }
+    .fsb-chat-input-row button { padding: 0 18px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
+    .fsb-chat-input-row button:hover { filter: brightness(1.15); }
+    .fsb-chat-input-row button:disabled { opacity: .5; cursor: not-allowed; }
+    .fsb-chat-actions { display: flex; gap: 8px; padding: 0 16px 16px; }
+    .fsb-chat-actions button { flex: 1; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
+    .fsb-chat-actions .btn-generate { background: #22c55e; color: #fff; border: none; }
+    .fsb-chat-actions .btn-generate:disabled { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); cursor: not-allowed; }
+    .fsb-chat-actions .btn-generate:not(:disabled):hover { filter: brightness(1.15); }
+    .fsb-chat-actions .btn-skip { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
+    .fsb-chat-actions .btn-skip:hover { border-color: var(--accent); color: var(--text); }
+    .fsb-chat-req-count { font-size: 11px; color: var(--text-dim); padding: 0 16px 4px; }
+    .fsb-chat-typing { align-self: flex-start; color: var(--text-dim); font-size: 12px; font-style: italic; }
+
+    /* ---- Eject Dialog ---- */
+    .fsb-eject-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; align-items: center; justify-content: center; }
+    .fsb-eject-overlay.open { display: flex; }
+    .fsb-eject-dialog { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 520px; max-width: 95vw; padding: 28px; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
+    .fsb-eject-dialog h2 { font-size: 18px; margin-bottom: 6px; }
+    .fsb-eject-dialog p { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; }
+    .fsb-eject-summary { background: var(--surface2); border-radius: 8px; padding: 14px; font-size: 12px; margin-bottom: 16px; }
+    .fsb-eject-summary .row { display: flex; justify-content: space-between; padding: 3px 0; }
+    .fsb-eject-summary .row .label { color: var(--text-dim); }
+    .fsb-eject-footer { display: flex; justify-content: flex-end; gap: 10px; }
+    .fsb-eject-result { display: none; margin-top: 16px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); border-radius: 8px; padding: 14px; font-size: 13px; }
+    .fsb-eject-result.visible { display: block; }
+
+    @media (max-width: 900px) {
+        .fsb { grid-template-columns: 1fr; grid-template-rows: 44px auto 1fr; }
+        .fsb-palette { grid-row: 2; max-height: 200px; overflow-y: auto; border-right: none; border-bottom: 1px solid var(--border); }
+        .fsb-canvas-wrap { grid-row: 3; }
+        .fsb-props { display: none; }
+    }
+</style>
+
+<div class="fsb">
+    <!-- Toolbar -->
+    <div class="fsb-toolbar">
+        <a href="/forge-studio" style="color:var(--text-dim);text-decoration:none;font-size:18px;" title="Back to apps">&larr;</a>
+        <span class="app-name" id="app-name">Forge Studio Builder</span>
+        <div class="sep"></div>
+        <div class="viewport-btns">
+            <span class="vp-btn active" data-vp="desktop" onclick="setViewport('desktop')">Desktop</span>
+            <span class="vp-btn" data-vp="tablet" onclick="setViewport('tablet')">Tablet</span>
+            <span class="vp-btn" data-vp="mobile" onclick="setViewport('mobile')">Mobile</span>
+        </div>
+        <div class="sep"></div>
+        <button onclick="togglePreview()" id="btn-preview">Preview Code</button>
+        <button onclick="validateTree()">Validate</button>
+        <button onclick="openCompliance()">Compliance</button>
+        <button onclick="saveApp()">Save</button>
+        <button onclick="openBuildDialog()">Build App</button>
+        <button class="primary" onclick="openEjectDialog()">Export</button>
+    </div>
+
+    <!-- Palette -->
+    <div class="fsb-palette">
+        <div class="fsb-palette-search">
+            <input type="text" id="palette-search" placeholder="Search components..." oninput="filterPalette(this.value)">
+        </div>
+        <div id="palette-list"></div>
+    </div>
+
+    <!-- Canvas -->
+    <div class="fsb-canvas-wrap">
+        <div class="fsb-canvas-header">
+            <div class="fsb-page-tabs" id="page-tabs"></div>
+            <span class="fsb-add-page" onclick="addPage()" title="Add page">+</span>
+        </div>
+        <div class="fsb-canvas" id="canvas-area">
+            <div class="fsb-frame desktop" id="canvas-frame">
+                <div class="fsb-frame-inner" id="canvas-root"></div>
+            </div>
+        </div>
+        <div class="fsb-preview-panel" id="preview-panel">
+            <div class="fsb-preview-tabs">
+                <span class="active" onclick="switchPreviewTab('live')" data-ptab="live">Live Preview</span>
+                <span onclick="switchPreviewTab('code')" data-ptab="code">JSX Code</span>
+            </div>
+            <div class="fsb-live-preview" id="live-preview" style="display:block;">
+                <iframe id="live-preview-frame" sandbox="allow-scripts" srcdoc="<p style='padding:24px;color:#999;font-family:sans-serif'>Loading preview...</p>"></iframe>
+            </div>
+            <pre class="fsb-preview-code" id="preview-code" style="display:none;"></pre>
+        </div>
+
+        <!-- Intake Chat Panel (hidden by default, shown in intake mode) -->
+        <div class="fsb-chat-panel" id="chat-panel">
+            <div class="fsb-chat-header">
+                <h3>Requirements Analyst</h3>
+                <p>I'll help you define the right requirements before generating your app.</p>
+                <div class="fsb-readiness-bar">
+                    <div class="fsb-readiness-fill" id="readiness-fill" style="width:0%"></div>
+                </div>
+                <div class="fsb-readiness-label">
+                    <span>Readiness</span>
+                    <span id="readiness-pct">0%</span>
+                </div>
+            </div>
+            <div class="fsb-chat-messages" id="chat-messages"></div>
+            <div class="fsb-chat-req-count" id="chat-req-count"></div>
+            <div class="fsb-chat-input-row">
+                <textarea id="chat-input" placeholder="Describe your requirements..." rows="2" onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendIntakeMessage()}"></textarea>
+                <button id="btn-send-msg" onclick="sendIntakeMessage()">Send</button>
+            </div>
+            <div class="fsb-chat-actions">
+                <button class="btn-generate" id="btn-generate-intake" disabled onclick="generateFromIntake()">Generate App</button>
+                <button class="btn-skip" onclick="skipIntake()">Skip &mdash; Generate Now</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Properties -->
+    <div class="fsb-props">
+        <div class="fsb-props-header">
+            <h3 id="prop-title">Properties</h3>
+            <div class="type" id="prop-type"></div>
+        </div>
+        <div id="prop-panel">
+            <div class="fsb-props-empty">Select a component on the canvas to edit its properties</div>
+        </div>
+    </div>
+</div>
+
+<!-- Eject Dialog -->
+<div class="fsb-eject-overlay" id="eject-dialog">
+    <div class="fsb-eject-dialog">
+        <h2>Export as Standalone Project</h2>
+        <p>Generate a complete Next.js + Supabase project with all dependencies, Docker Compose, authentication, and compliance artifacts.</p>
+        <div class="fsb-eject-summary" id="eject-summary"></div>
+        <div class="fsb-eject-footer">
+            <button class="fsb-btn-secondary" style="background:var(--surface2);border:1px solid var(--border);padding:8px 16px;border-radius:6px;cursor:pointer;color:var(--text);" onclick="closeEjectDialog()">Cancel</button>
+            <button class="primary" id="btn-eject" style="background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:600;" onclick="doEject()">Export Project</button>
+        </div>
+        <div class="fsb-eject-result" id="eject-result"></div>
+    </div>
+</div>
+
+<!-- Build App Dialog (Blueprint Pipeline) -->
+<div class="fsb-eject-overlay" id="build-dialog" style="display:none;">
+    <div class="fsb-eject-dialog" style="max-width:580px;">
+        <h2 id="build-title">Build Application</h2>
+        <div id="build-step-classify" style="display:none;">
+            <p style="color:var(--text-dim);font-size:13px;margin-bottom:16px;">Analyzing your app to determine the best build path...</p>
+            <div style="text-align:center;padding:24px;"><span class="fsb-spinner" style="display:inline-block;width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;"></span></div>
+        </div>
+        <div id="build-step-result" style="display:none;">
+            <div id="build-tier-badge" style="display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;margin-bottom:12px;"></div>
+            <div id="build-tier-info" style="font-size:13px;color:var(--text-dim);margin-bottom:12px;"></div>
+            <div id="build-signals" style="margin-bottom:16px;"></div>
+            <div id="build-needs" style="margin-bottom:16px;"></div>
+            <div class="fsb-eject-footer" style="display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--border);">
+                <button style="background:var(--surface2);border:1px solid var(--border);padding:8px 16px;border-radius:6px;cursor:pointer;color:var(--text);font-size:12px;" onclick="closeBuildDialog()">Cancel</button>
+                <button id="build-force-toggle" style="background:var(--surface2);border:1px solid var(--border);padding:8px 16px;border-radius:6px;cursor:pointer;color:var(--text);font-size:12px;display:none;" onclick="toggleForceTier()">Override Tier</button>
+                <button id="btn-build-go" class="primary" style="background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:600;font-size:12px;" onclick="doBuild()">Build</button>
+            </div>
+        </div>
+        <div id="build-step-progress" style="display:none;">
+            <div style="margin-bottom:12px;">
+                <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;">
+                    <span id="build-progress-label">Building...</span>
+                    <span id="build-progress-pct">0%</span>
+                </div>
+                <div style="height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;">
+                    <div id="build-progress-bar" style="height:100%;background:var(--accent);border-radius:3px;width:0%;transition:width 0.5s;"></div>
+                </div>
+            </div>
+            <div id="build-progress-steps" style="font-size:12px;color:var(--text-dim);"></div>
+        </div>
+        <div id="build-step-done" style="display:none;">
+            <div id="build-done-icon" style="text-align:center;font-size:48px;margin-bottom:8px;"></div>
+            <div id="build-done-msg" style="text-align:center;font-size:14px;margin-bottom:16px;"></div>
+            <div id="build-done-details" style="background:var(--surface2);border-radius:8px;padding:12px;font-size:12px;max-height:200px;overflow-y:auto;margin-bottom:12px;"></div>
+            <div style="display:flex;gap:8px;justify-content:flex-end;">
+                <button style="background:var(--surface2);border:1px solid var(--border);padding:8px 16px;border-radius:6px;cursor:pointer;color:var(--text);font-size:12px;" onclick="closeBuildDialog()">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<style>@keyframes spin{to{transform:rotate(360deg)}}</style>
+
+<script>
+// =========================================================================
+// State
+// =========================================================================
+const APP_ID = "{{ app_id | e }}";
+const API = "/api/forge-studio";
+let catalog = { components: [], categories: {} };
+let appData = null;  // Full ForgeApp
+let currentPageIdx = 0;
+let selectedNodeId = null;
+let previewMode = false;
+let dragType = null;  // component type being dragged from palette
+
+// Component icon map
+const ICONS = {
+    Button:"[B]", Card:"[C]", Input:"[I]", Text:"[T]", Table:"[T]", Form:"[F]",
+    Select:"[S]", Textarea:"[A]", Checkbox:"[X]", Switch:"[~]", Dialog:"[D]",
+    Tabs:"[=]", Badge:"[b]", Avatar:"[@]", Separator:"[-]", Chart:"[#]",
+    Metric:"[M]", KanbanBoard:"[K]", Sidebar:"[|]", NavigationMenu:"[N]",
+    Flex:"[F]", Grid:"[G]", Image:"[P]", Alert:"[!]", Progress:"[%]",
+    Accordion:"[V]", Sheet:"[S]", Tooltip:"[?]", Calendar:"[C]",
+    Breadcrumb:"[>]", Pagination:"[<]", ScrollArea:"[~]", Popover:"[o]",
+    DropdownMenu:"[v]", Skeleton:"[.]",
+};
+
+// =========================================================================
+// Init
+// =========================================================================
+async function init() {
+    const catRes = await fetch(`${API}/catalog`);
+    catalog = await catRes.json();
+    renderPalette();
+
+    if (APP_ID) {
+        const appRes = await fetch(`${API}/apps/${APP_ID}`);
+        if (appRes.ok) {
+            const raw = await appRes.json();
+            appData = raw.app_json ? (typeof raw.app_json === "string" ? JSON.parse(raw.app_json) : raw.app_json) : raw;
+        }
+    }
+
+    if (!appData) {
+        appData = {
+            name: "Untitled App",
+            pages: [{ id: "page-home", name: "Home", route: "/", component_tree: [], is_protected: true }],
+        };
+    }
+
+    document.getElementById("app-name").textContent = appData.name || "Untitled App";
+    // Default to first page with content (skip empty login pages)
+    for (let i = 0; i < (appData.pages || []).length; i++) {
+        if ((appData.pages[i].component_tree || []).length > 0) {
+            currentPageIdx = i;
+            break;
+        }
+    }
+    renderPageTabs();
+    renderCanvas();
+}
+
+// =========================================================================
+// Palette
+// =========================================================================
+function renderPalette() {
+    const el = document.getElementById("palette-list");
+    // Build categories from full component list (categories API returns string arrays)
+    const comps = catalog.components || [];
+    const grouped = {};
+    for (const c of comps) {
+        const cat = c.category || "other";
+        if (!grouped[cat]) grouped[cat] = [];
+        grouped[cat].push(c);
+    }
+    let html = "";
+    for (const [cat, items] of Object.entries(grouped)) {
+        html += `<div class="fsb-cat" data-cat="${cat}">
+            <div class="fsb-cat-title" onclick="this.parentElement.classList.toggle('collapsed')">${cat.toUpperCase()}</div>
+            <div class="fsb-comp-list">`;
+        for (const c of items) {
+            const type = c.type || c;
+            const desc = c.description || type;
+            html += `<div class="fsb-comp" draggable="true"
+                ondragstart="onPaletteDragStart(event,'${type}')"
+                ondragend="onPaletteDragEnd(event)"
+                title="${esc(desc)}">
+                <span class="icon">${ICONS[type] || "[?]"}</span>${type}</div>`;
+        }
+        html += `</div></div>`;
+    }
+    el.innerHTML = html;
+}
+
+function filterPalette(q) {
+    q = q.toLowerCase();
+    document.querySelectorAll(".fsb-cat").forEach(cat => {
+        let anyVisible = false;
+        cat.querySelectorAll(".fsb-comp").forEach(c => {
+            const show = !q || c.textContent.toLowerCase().includes(q);
+            c.style.display = show ? "" : "none";
+            if (show) anyVisible = true;
+        });
+        cat.style.display = anyVisible ? "" : "none";
+    });
+}
+
+// =========================================================================
+// Page Tabs
+// =========================================================================
+function renderPageTabs() {
+    const el = document.getElementById("page-tabs");
+    el.innerHTML = (appData.pages || []).map((p, i) =>
+        `<span class="fsb-page-tab ${i === currentPageIdx ? 'active' : ''}" onclick="switchPage(${i})">${esc(p.name)} <small style="color:var(--text-dim)">${esc(p.route)}</small></span>`
+    ).join("");
+}
+
+function switchPage(idx) {
+    currentPageIdx = idx;
+    selectedNodeId = null;
+    renderPageTabs();
+    renderCanvas();
+    renderProps();
+}
+
+function addPage() {
+    const name = prompt("Page name:", "New Page");
+    if (!name) return;
+    const route = "/" + name.toLowerCase().replace(/\s+/g, "-");
+    appData.pages.push({ id: `page-${Date.now()}`, name, route, component_tree: [], is_protected: true });
+    currentPageIdx = appData.pages.length - 1;
+    renderPageTabs();
+    renderCanvas();
+}
+
+// =========================================================================
+// Canvas Rendering
+// =========================================================================
+function currentPage() { return appData.pages[currentPageIdx] || { component_tree: [] }; }
+function currentTree() { return currentPage().component_tree || []; }
+
+function renderCanvas() {
+    const root = document.getElementById("canvas-root");
+    const tree = currentTree();
+    if (tree.length === 0) {
+        root.innerHTML = `<div class="fsb-drop-zone" ondragover="onCanvasDragOver(event)" ondragleave="onCanvasDragLeave(event)" ondrop="onCanvasDrop(event,null,-1)">
+            Drag components here to start building</div>`;
+    } else {
+        root.innerHTML = tree.map((node, i) => renderNode(node, i, null)).join("") +
+            `<div class="fsb-drop-zone" style="min-height:24px;margin-top:4px;font-size:10px;" ondragover="onCanvasDragOver(event)" ondragleave="onCanvasDragLeave(event)" ondrop="onCanvasDrop(event,null,${tree.length})">+ Drop here</div>`;
+    }
+}
+
+function renderNode(node, idx, parentId) {
+    const sel = node.id === selectedNodeId ? " selected" : "";
+    const vis = renderVisual(node);
+    const childrenHtml = (node.children || []).length > 0
+        ? node.children.map((c, ci) => renderNode(c, ci, node.id)).join("") +
+          `<div class="fsb-drop-zone" style="min-height:20px;font-size:10px;" ondragover="onCanvasDragOver(event)" ondragleave="onCanvasDragLeave(event)" ondrop="onCanvasDrop(event,'${node.id}',${node.children.length})">+</div>`
+        : `<div class="fsb-drop-zone" style="min-height:20px;font-size:10px;" ondragover="onCanvasDragOver(event)" ondragleave="onCanvasDragLeave(event)" ondrop="onCanvasDrop(event,'${node.id}',0)">Drop children here</div>`;
+
+    return `<div class="fsb-node${sel}" data-id="${node.id}" onclick="selectNode(event,'${node.id}')"
+        draggable="true" ondragstart="onNodeDragStart(event,'${node.id}')" ondragend="onPaletteDragEnd(event)"
+        ondragover="onNodeDragOver(event)" ondragleave="onCanvasDragLeave(event)" ondrop="onNodeDrop(event,'${node.id}',${idx},'${parentId}')">
+        <span class="fsb-node-label">${esc(node.type)}</span>
+        <span class="fsb-node-actions">
+            <button onclick="moveNode(event,'${node.id}','${parentId}',-1)" title="Move up">&uarr;</button>
+            <button onclick="moveNode(event,'${node.id}','${parentId}',1)" title="Move down">&darr;</button>
+            <button onclick="duplicateNode(event,'${node.id}','${parentId}')" title="Duplicate">D</button>
+            <button onclick="deleteNode(event,'${node.id}','${parentId}')" title="Delete">&times;</button>
+        </span>
+        ${vis}
+        ${hasChildren(node.type) ? childrenHtml : ""}
+    </div>`;
+}
+
+function hasChildren(type) {
+    const containers = ["Card","Flex","Grid","Tabs","Accordion","Dialog","Sheet","Sidebar","Form","ScrollArea","Page"];
+    return containers.includes(type);
+}
+
+function renderVisual(node) {
+    const p = node.props || {};
+    switch (node.type) {
+        case "Button": return `<span class="fsb-vis-btn">${esc(p.label || "Button")}</span>`;
+        case "Input": return `<input class="fsb-vis-input" placeholder="${esc(p.placeholder || p.name || 'Input')}" disabled>`;
+        case "Textarea": return `<textarea class="fsb-vis-input" placeholder="${esc(p.placeholder || 'Textarea')}" disabled style="min-height:50px"></textarea>`;
+        case "Select": return `<select class="fsb-vis-input" disabled><option>${esc(p.placeholder || 'Select...')}</option></select>`;
+        case "Text": return `<div class="fsb-vis-text">${esc(p.content || "Text content")}</div>`;
+        case "Card": return `<div class="fsb-vis-card"><div style="font-weight:600;margin-bottom:4px">${esc(p.title || "Card")}</div>`;
+        case "Table": return renderTableVisual(p);
+        case "Metric": return `<div class="fsb-vis-metric"><div class="val">${esc(p.value || "0")}</div><div class="lbl">${esc(p.label || "Metric")}</div></div>`;
+        case "Chart": return `<div class="fsb-vis-chart">${esc(p.title || "Chart")} (${esc(p.chart_type || "bar")})</div>`;
+        case "Badge": return `<span class="fsb-vis-badge">${esc(p.label || p.text || "Badge")}</span>`;
+        case "Separator": return `<div class="fsb-vis-separator"></div>`;
+        case "Flex": return `<div class="fsb-vis-flex">`;
+        case "Grid": return `<div class="fsb-vis-grid">`;
+        case "Tabs": return renderTabsVisual(p);
+        case "Sidebar": return `<div class="fsb-vis-sidebar"><div class="fsb-vis-sidebar-nav">${(p.items||[]).map(i=>`<div class="item">${esc(typeof i==='string'?i:i.label||'')}</div>`).join("")||'<div class="item">Dashboard</div><div class="item">Settings</div>'}</div><div style="flex:1;padding:12px;">`;
+        case "KanbanBoard": return renderKanbanVisual(p);
+        case "Checkbox": return `<label style="font-size:12px;display:flex;align-items:center;gap:6px;color:#333"><input type="checkbox" disabled> ${esc(p.label || "Checkbox")}</label>`;
+        case "Switch": return `<label style="font-size:12px;display:flex;align-items:center;gap:6px;color:#333"><input type="checkbox" disabled> ${esc(p.label || "Toggle")}</label>`;
+        case "Avatar": return `<div style="width:36px;height:36px;border-radius:50%;background:#e5e5e5;display:flex;align-items:center;justify-content:center;font-size:14px;color:#999">A</div>`;
+        case "Image": return `<div style="background:#f0f0f0;height:120px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px">Image${p.alt ? ': '+esc(p.alt) : ''}</div>`;
+        case "Alert": return `<div style="background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:10px;font-size:12px;color:#92400e">${esc(p.message || p.title || "Alert message")}</div>`;
+        case "Progress": return `<div style="background:#e5e5e5;height:8px;border-radius:4px;overflow:hidden"><div style="background:#3b82f6;height:100%;width:${p.value||60}%"></div></div>`;
+        case "NavigationMenu": return `<nav style="display:flex;gap:16px;padding:8px;background:#f5f5f5;border-radius:6px;font-size:12px;color:#555">${(p.items||[{label:'Home'},{label:'About'}]).map(i=>`<span>${esc(typeof i==='string'?i:i.label||'')}</span>`).join("")}</nav>`;
+        case "Calendar": return `<div style="background:#f5f5f5;border-radius:8px;padding:12px;text-align:center;font-size:12px;color:#555">Calendar</div>`;
+        case "Dialog": return `<div style="background:#fafafa;border:2px dashed #ddd;border-radius:8px;padding:12px;"><div style="font-weight:600;font-size:12px;margin-bottom:4px">${esc(p.title || "Dialog")}</div>`;
+        case "Form": return `<form onsubmit="return false" style="display:flex;flex-direction:column;gap:8px;">`;
+        default: return `<div class="fsb-vis" style="font-size:11px;color:#999;">${esc(node.type)}</div>`;
+    }
+}
+
+function renderTableVisual(p) {
+    const cols = Array.isArray(p.columns) ? p.columns : [{header:"Column 1"},{header:"Column 2"},{header:"Column 3"}];
+    return `<table class="fsb-vis-table"><thead><tr>${cols.map(c=>`<th>${esc(typeof c==='string'?c:c.header||c.key||'')}</th>`).join("")}</tr></thead><tbody><tr>${cols.map(()=>'<td style="color:#bbb">...</td>').join("")}</tr></tbody></table>`;
+}
+function renderTabsVisual(p) {
+    const tabs = Array.isArray(p.tabs) ? p.tabs : [{label:"Tab 1"},{label:"Tab 2"}];
+    return `<div class="fsb-vis-tabs">${tabs.map(t=>`<span>${esc(typeof t==='string'?t:t.label||'')}</span>`).join("")}</div>`;
+}
+function renderKanbanVisual(p) {
+    const cols = Array.isArray(p.columns) ? p.columns : [{title:"To Do"},{title:"In Progress"},{title:"Done"}];
+    return `<div class="fsb-vis-kanban">${cols.map(c=>`<div class="fsb-vis-kanban-col"><h4>${esc(typeof c==='string'?c:c.title||'')}</h4><div class="fsb-vis-kanban-card">Sample item</div></div>`).join("")}</div>`;
+}
+
+// =========================================================================
+// Drag & Drop — Palette to Canvas
+// =========================================================================
+function onPaletteDragStart(e, type) {
+    dragType = type;
+    e.dataTransfer.effectAllowed = "copy";
+    e.dataTransfer.setData("text/plain", type);
+}
+function onPaletteDragEnd(e) { dragType = null; }
+function onCanvasDragOver(e) { e.preventDefault(); e.currentTarget.classList.add("drag-over"); }
+function onCanvasDragLeave(e) { e.currentTarget.classList.remove("drag-over"); }
+
+function onCanvasDrop(e, parentId, idx) {
+    e.preventDefault(); e.stopPropagation();
+    e.currentTarget.classList.remove("drag-over");
+    const type = dragType || e.dataTransfer.getData("text/plain");
+    if (!type) return;
+    const node = createNode(type);
+    insertNode(node, parentId, idx);
+    selectedNodeId = node.id;
+    renderCanvas();
+    renderProps();
+}
+
+// Drag existing nodes to reorder
+function onNodeDragStart(e, nodeId) {
+    e.stopPropagation();
+    dragType = null;
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("application/x-forge-node", nodeId);
+}
+function onNodeDragOver(e) { e.preventDefault(); e.currentTarget.classList.add("drag-over"); }
+function onNodeDrop(e, targetId, targetIdx, targetParentId) {
+    e.preventDefault(); e.stopPropagation();
+    e.currentTarget.classList.remove("drag-over");
+    const movedId = e.dataTransfer.getData("application/x-forge-node");
+    if (movedId && movedId !== targetId) {
+        const tree = currentTree();
+        const removed = removeFromTree(tree, movedId);
+        if (removed) {
+            if (targetId && hasChildren(findNodeInTree(tree, targetId)?.type)) {
+                const parent = findNodeInTree(tree, targetId);
+                if (parent) { parent.children = parent.children || []; parent.children.push(removed); }
+            } else {
+                insertNode(removed, targetParentId === "null" ? null : targetParentId, targetIdx);
+            }
+            renderCanvas();
+        }
+        return;
+    }
+    // Palette drop onto node (insert as child)
+    const type = dragType || e.dataTransfer.getData("text/plain");
+    if (!type) return;
+    const node = createNode(type);
+    if (hasChildren(findNodeInTree(currentTree(), targetId)?.type)) {
+        const parent = findNodeInTree(currentTree(), targetId);
+        if (parent) { parent.children = parent.children || []; parent.children.push(node); }
+    } else {
+        insertNode(node, targetParentId === "null" ? null : targetParentId, targetIdx + 1);
+    }
+    selectedNodeId = node.id;
+    renderCanvas();
+    renderProps();
+}
+
+// =========================================================================
+// Tree Manipulation
+// =========================================================================
+function createNode(type) {
+    const id = type.toLowerCase() + "-" + Math.random().toString(36).slice(2,8);
+    const defaults = getDefaultProps(type);
+    return { id, type, props: defaults, children: [] };
+}
+
+function getDefaultProps(type) {
+    const comp = catalog.components.find(c => c.type === type);
+    if (!comp) return {};
+    const props = {};
+    const schema = comp.props_schema || {};
+    for (const [k, v] of Object.entries(schema)) {
+        if (v.default !== undefined) props[k] = v.default;
+        else if (v.required) {
+            if (v.type === "string") props[k] = k === "label" ? type : k === "content" ? "Sample text" : "";
+            else if (v.type === "number") props[k] = 0;
+            else if (v.type === "boolean") props[k] = false;
+        }
+    }
+    return props;
+}
+
+function insertNode(node, parentId, idx) {
+    const tree = currentTree();
+    if (!parentId) {
+        if (idx < 0 || idx >= tree.length) tree.push(node);
+        else tree.splice(idx, 0, node);
+    } else {
+        const parent = findNodeInTree(tree, parentId);
+        if (parent) {
+            parent.children = parent.children || [];
+            if (idx < 0 || idx >= parent.children.length) parent.children.push(node);
+            else parent.children.splice(idx, 0, node);
+        }
+    }
+}
+
+function findNodeInTree(tree, id) {
+    for (const node of tree) {
+        if (node.id === id) return node;
+        if (node.children) {
+            const found = findNodeInTree(node.children, id);
+            if (found) return found;
+        }
+    }
+    return null;
+}
+
+function removeFromTree(tree, id) {
+    for (let i = 0; i < tree.length; i++) {
+        if (tree[i].id === id) return tree.splice(i, 1)[0];
+        if (tree[i].children) {
+            const found = removeFromTree(tree[i].children, id);
+            if (found) return found;
+        }
+    }
+    return null;
+}
+
+function findParentInTree(tree, id, parent) {
+    for (const node of tree) {
+        if (node.id === id) return parent;
+        if (node.children) {
+            const found = findParentInTree(node.children, id, node);
+            if (found) return found;
+        }
+    }
+    return null;
+}
+
+// =========================================================================
+// Node Actions
+// =========================================================================
+function selectNode(e, id) {
+    e.stopPropagation();
+    selectedNodeId = id;
+    renderCanvas();
+    renderProps();
+}
+
+function deleteNode(e, id, parentId) {
+    e.stopPropagation();
+    removeFromTree(currentTree(), id);
+    if (selectedNodeId === id) selectedNodeId = null;
+    renderCanvas();
+    renderProps();
+}
+
+function duplicateNode(e, id, parentId) {
+    e.stopPropagation();
+    const tree = currentTree();
+    const node = findNodeInTree(tree, id);
+    if (!node) return;
+    const clone = JSON.parse(JSON.stringify(node));
+    reId(clone);
+    const parent = findParentInTree(tree, id, null);
+    const siblings = parent ? parent.children : tree;
+    const idx = siblings.findIndex(n => n.id === id);
+    siblings.splice(idx + 1, 0, clone);
+    selectedNodeId = clone.id;
+    renderCanvas();
+    renderProps();
+}
+
+function reId(node) {
+    node.id = node.type.toLowerCase() + "-" + Math.random().toString(36).slice(2,8);
+    (node.children || []).forEach(reId);
+}
+
+function moveNode(e, id, parentId, dir) {
+    e.stopPropagation();
+    const tree = currentTree();
+    const parent = findParentInTree(tree, id, null);
+    const siblings = parent ? parent.children : tree;
+    const idx = siblings.findIndex(n => n.id === id);
+    const newIdx = idx + dir;
+    if (newIdx < 0 || newIdx >= siblings.length) return;
+    [siblings[idx], siblings[newIdx]] = [siblings[newIdx], siblings[idx]];
+    renderCanvas();
+}
+
+// =========================================================================
+// Property Panel
+// =========================================================================
+function renderProps() {
+    const panel = document.getElementById("prop-panel");
+    const titleEl = document.getElementById("prop-title");
+    const typeEl = document.getElementById("prop-type");
+
+    if (!selectedNodeId) {
+        titleEl.textContent = "Properties";
+        typeEl.textContent = "";
+        panel.innerHTML = `<div class="fsb-props-empty">Select a component on the canvas to edit its properties</div>`;
+        return;
+    }
+
+    const node = findNodeInTree(currentTree(), selectedNodeId);
+    if (!node) { selectedNodeId = null; renderProps(); return; }
+
+    titleEl.textContent = node.type;
+    typeEl.textContent = node.id;
+
+    const comp = catalog.components.find(c => c.type === node.type);
+    const schema = comp ? comp.props_schema || {} : {};
+
+    let html = `<div class="fsb-prop-group">
+        <div class="fsb-prop-group-title">Identity</div>
+        <div class="fsb-prop">
+            <label>ID</label>
+            <input type="text" value="${esc(node.id)}" onchange="updateNodeId('${node.id}', this.value)">
+        </div>
+        ${node.slot !== undefined ? `<div class="fsb-prop"><label>Slot</label><input type="text" value="${esc(node.slot||'')}" onchange="updateNodeField('${node.id}','slot',this.value)"></div>` : ""}
+    </div>`;
+
+    html += `<div class="fsb-prop-group"><div class="fsb-prop-group-title">Props</div>`;
+
+    const propKeys = Object.keys(schema);
+    if (propKeys.length === 0) {
+        // Show raw props editor for components without schema
+        html += `<div class="fsb-prop"><label>Raw JSON</label><textarea onchange="updateNodePropsRaw('${node.id}',this.value)">${esc(JSON.stringify(node.props || {}, null, 2))}</textarea></div>`;
+    } else {
+        for (const [key, def] of Object.entries(schema)) {
+            const val = (node.props || {})[key];
+            html += renderPropField(node.id, key, def, val);
+        }
+    }
+    // Show any extra props not in schema
+    for (const [k, v] of Object.entries(node.props || {})) {
+        if (!schema[k]) {
+            html += `<div class="fsb-prop"><label>${esc(k)} <small style="color:var(--text-dim)">(custom)</small></label>
+                <input type="text" value="${esc(String(v))}" onchange="updateNodeProp('${node.id}','${k}',this.value)"></div>`;
+        }
+    }
+    html += `</div>`;
+
+    // Data Binding section
+    html += `<div class="fsb-prop-group"><div class="fsb-prop-group-title">Data Binding</div>`;
+    const binding = node.data_binding || null;
+    if (binding) {
+        html += `<div class="fsb-binding">
+            <div class="fsb-binding-header"><span class="tag">Bound</span>
+                <span class="fsb-binding-remove" onclick="removeBinding('${node.id}')">&times; Remove</span></div>
+            <div class="fsb-prop"><label>Table</label>
+                <select onchange="updateBinding('${node.id}','table',this.value)">
+                    <option value="">--</option>
+                    ${(window._schemaTables||[]).map(t=>`<option value="${t}" ${binding.table===t?'selected':''}>${t}</option>`).join("")}
+                </select></div>
+            <div class="fsb-prop"><label>Column → Prop mapping</label>
+                <textarea onchange="updateBindingJson('${node.id}','column_map',this.value)"
+                    placeholder='{"column":"prop_key"}'>${esc(JSON.stringify(binding.column_map||{},null,2))}</textarea></div>
+            <div class="fsb-prop"><label>Filter (optional)</label>
+                <input type="text" value="${esc(binding.filter||'')}"
+                    onchange="updateBinding('${node.id}','filter',this.value)"
+                    placeholder="e.g. status=eq.active"></div>
+            <div class="fsb-prop"><label>Order by</label>
+                <input type="text" value="${esc(binding.order_by||'')}"
+                    onchange="updateBinding('${node.id}','order_by',this.value)"
+                    placeholder="e.g. created_at.desc"></div>
+            <div class="fsb-prop"><label>Limit</label>
+                <input type="number" value="${binding.limit||''}"
+                    onchange="updateBinding('${node.id}','limit',Number(this.value)||null)"></div>
+        </div>`;
+    } else {
+        html += `<button style="background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);padding:6px 12px;border-radius:6px;font-size:11px;cursor:pointer;width:100%;" onclick="addBinding('${node.id}')">+ Bind to Data Source</button>`;
+    }
+    html += `</div>`;
+
+    // Add prop button
+    html += `<div class="fsb-prop-group"><button style="background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);padding:6px 12px;border-radius:6px;font-size:11px;cursor:pointer;width:100%;" onclick="addCustomProp('${node.id}')">+ Add Custom Prop</button></div>`;
+
+    panel.innerHTML = html;
+}
+
+function renderPropField(nodeId, key, def, val) {
+    const type = def.type || "string";
+    const id = `prop-${nodeId}-${key}`;
+    let input = "";
+
+    if (def.enum) {
+        input = `<select id="${id}" onchange="updateNodeProp('${nodeId}','${key}',this.value)">
+            <option value="">--</option>
+            ${def.enum.map(v => `<option value="${v}" ${val === v ? 'selected' : ''}>${v}</option>`).join("")}
+        </select>`;
+    } else if (type === "boolean") {
+        input = `<label style="display:flex;align-items:center;gap:6px;">
+            <input type="checkbox" id="${id}" ${val ? 'checked' : ''} onchange="updateNodeProp('${nodeId}','${key}',this.checked)">
+            ${key}</label>`;
+    } else if (type === "number") {
+        input = `<input type="number" id="${id}" value="${val !== undefined ? val : ''}" onchange="updateNodeProp('${nodeId}','${key}',Number(this.value))">`;
+    } else if (type === "array" || type === "object") {
+        input = `<textarea id="${id}" onchange="updateNodePropJson('${nodeId}','${key}',this.value)">${esc(JSON.stringify(val || (type === "array" ? [] : {}), null, 2))}</textarea>`;
+    } else {
+        const isLong = key === "content" || key === "description" || key === "placeholder";
+        if (isLong) {
+            input = `<textarea id="${id}" onchange="updateNodeProp('${nodeId}','${key}',this.value)">${esc(val || '')}</textarea>`;
+        } else {
+            input = `<input type="text" id="${id}" value="${esc(val !== undefined ? String(val) : '')}" onchange="updateNodeProp('${nodeId}','${key}',this.value)">`;
+        }
+    }
+
+    const req = def.required ? ' <span style="color:#ef4444">*</span>' : '';
+    return `<div class="fsb-prop"><label>${esc(key)}${req}</label>${input}</div>`;
+}
+
+// =========================================================================
+// Property Updates
+// =========================================================================
+function updateNodeProp(nodeId, key, value) {
+    const node = findNodeInTree(currentTree(), nodeId);
+    if (!node) return;
+    node.props = node.props || {};
+    node.props[key] = value;
+    renderCanvas();
+}
+
+function updateNodePropJson(nodeId, key, jsonStr) {
+    try {
+        const val = JSON.parse(jsonStr);
+        updateNodeProp(nodeId, key, val);
+    } catch (e) { /* ignore invalid JSON while typing */ }
+}
+
+function updateNodePropsRaw(nodeId, jsonStr) {
+    try {
+        const node = findNodeInTree(currentTree(), nodeId);
+        if (!node) return;
+        node.props = JSON.parse(jsonStr);
+        renderCanvas();
+    } catch (e) { /* ignore */ }
+}
+
+function updateNodeId(oldId, newId) {
+    const node = findNodeInTree(currentTree(), oldId);
+    if (!node || !newId.trim()) return;
+    node.id = newId.trim();
+    if (selectedNodeId === oldId) selectedNodeId = newId.trim();
+    renderCanvas();
+    renderProps();
+}
+
+function updateNodeField(nodeId, field, value) {
+    const node = findNodeInTree(currentTree(), nodeId);
+    if (node) { node[field] = value; renderCanvas(); }
+}
+
+function addCustomProp(nodeId) {
+    const key = prompt("Property name:");
+    if (!key) return;
+    const value = prompt("Value:", "");
+    updateNodeProp(nodeId, key, value);
+    renderProps();
+}
+
+// =========================================================================
+// Viewport
+// =========================================================================
+function setViewport(vp) {
+    const frame = document.getElementById("canvas-frame");
+    frame.className = "fsb-frame " + vp;
+    document.querySelectorAll(".vp-btn").forEach(b => b.classList.toggle("active", b.dataset.vp === vp));
+}
+
+// =========================================================================
+// Preview & Validate
+// =========================================================================
+function togglePreview() {
+    previewMode = !previewMode;
+    const btn = document.getElementById("btn-preview");
+    const canvas = document.getElementById("canvas-area");
+    const preview = document.getElementById("preview-panel");
+    if (previewMode) {
+        btn.textContent = "Visual Editor";
+        canvas.style.display = "none";
+        preview.classList.add("active");
+        generatePreview();
+    } else {
+        btn.textContent = "Preview Code";
+        canvas.style.display = "";
+        preview.classList.remove("active");
+    }
+}
+
+async function generatePreview() {
+    // Legacy — now handled by switchPreviewTab/refreshLivePreview/generatePreviewCode
+    if (previewTab === "live") refreshLivePreview();
+    else generatePreviewCode();
+}
+
+async function validateTree() {
+    try {
+        const res = await fetch(`${API}/validate`, {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({ component_tree: currentTree() }),
+        });
+        const data = await res.json();
+        if (data.valid) {
+            alert(`Valid! ${data.component_count} components, no errors.`);
+        } else {
+            alert(`Validation errors:\n${(data.errors||[]).join("\n")}`);
+        }
+    } catch (e) {
+        alert("Validation failed: " + e.message);
+    }
+}
+
+// =========================================================================
+// Save
+// =========================================================================
+async function saveApp() {
+    if (!APP_ID) { alert("Create an app first from the landing page."); return; }
+    try {
+        const res = await fetch(`${API}/apps/${APP_ID}`, {
+            method: "PUT",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify(appData),
+        });
+        const data = await res.json();
+        if (data.error) alert("Save failed: " + data.error);
+        else alert("Saved!");
+    } catch (e) {
+        alert("Save error: " + e.message);
+    }
+}
+
+// =========================================================================
+// Eject
+// =========================================================================
+function openEjectDialog() {
+    const pages = (appData.pages || []).length;
+    let components = 0;
+    (appData.pages || []).forEach(p => { components += countNodes(p.component_tree || []); });
+    document.getElementById("eject-summary").innerHTML = `
+        <div class="row"><span class="label">App Name</span><span>${esc(appData.name||'Untitled')}</span></div>
+        <div class="row"><span class="label">Pages</span><span>${pages}</span></div>
+        <div class="row"><span class="label">Components</span><span>${components}</span></div>
+        <div class="row"><span class="label">Stack</span><span>Next.js 15 + Supabase + Tailwind + shadcn/ui</span></div>
+        <div class="row"><span class="label">Includes</span><span>Auth, RLS, Docker, SECURITY.md</span></div>`;
+    document.getElementById("eject-result").classList.remove("visible");
+    document.getElementById("eject-dialog").classList.add("open");
+}
+function closeEjectDialog() {
+    document.getElementById("eject-dialog").classList.remove("open");
+    // Small delay to ensure overlay is fully removed before other clicks
+    document.getElementById("eject-dialog").style.pointerEvents = "none";
+    setTimeout(() => { document.getElementById("eject-dialog").style.pointerEvents = ""; }, 100);
+}
+
+function countNodes(tree) {
+    let c = 0;
+    for (const n of tree) { c++; if (n.children) c += countNodes(n.children); }
+    return c;
+}
+
+async function doEject() {
+    const btn = document.getElementById("btn-eject");
+    btn.textContent = "Exporting...";
+    btn.disabled = true;
+    try {
+        const res = await fetch(`${API}/apps/${APP_ID || 'new'}/eject`, {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({}),
+        });
+        const data = await res.json();
+        const resultEl = document.getElementById("eject-result");
+        if (data.status === "success") {
+            resultEl.innerHTML = `<strong>Export complete!</strong><br>
+                ${data.file_count || 0} files generated in ${data.duration_ms || 0}ms<br>
+                <code style="font-size:11px;color:var(--text-dim)">${esc(data.output_dir || '')}</code>`;
+        } else {
+            resultEl.innerHTML = `<strong style="color:#ef4444">Export failed:</strong> ${esc(data.error || 'Unknown error')}`;
+        }
+        resultEl.classList.add("visible");
+    } catch (e) {
+        document.getElementById("eject-result").innerHTML = `<strong style="color:#ef4444">Error:</strong> ${e.message}`;
+        document.getElementById("eject-result").classList.add("visible");
+    }
+    btn.textContent = "Export Project";
+    btn.disabled = false;
+}
+
+document.getElementById("eject-dialog").addEventListener("click", function(e) { if (e.target === this) closeEjectDialog(); });
+document.getElementById("build-dialog").addEventListener("click", function(e) { if (e.target === this) closeBuildDialog(); });
+
+// =========================================================================
+// Build App — Blueprint Pipeline (Tier 1 local / Tier 2 parent handoff)
+// =========================================================================
+let buildTierResult = null;
+let buildForceTier = "";
+
+async function openBuildDialog() {
+    if (!appData || !appData.name) { alert("Design an app first."); return; }
+    buildTierResult = null;
+    buildForceTier = "";
+    // Show dialog in classify state
+    document.getElementById("build-dialog").style.display = "flex";
+    showBuildStep("classify");
+    // Auto-classify
+    try {
+        const desc = appData.generation_prompt || appData.description || appData.name || "";
+        const body = {
+            description: desc,
+            app_spec: { pages: appData.pages || [], workflows: appData.workflows || [] },
+        };
+        const res = await fetch(`${API}/blueprint/classify`, {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify(body),
+        });
+        buildTierResult = await res.json();
+        showBuildClassificationResult();
+    } catch (e) {
+        // Fallback to local
+        buildTierResult = { tier: "local", score: 0, signals: [], needs: {}, recommendation: "Fallback — classification unavailable." };
+        showBuildClassificationResult();
+    }
+}
+
+function closeBuildDialog() {
+    document.getElementById("build-dialog").style.display = "none";
+}
+
+function showBuildStep(step) {
+    ["classify","result","progress","done"].forEach(s => {
+        document.getElementById("build-step-" + s).style.display = (s === step) ? "block" : "none";
+    });
+}
+
+function showBuildClassificationResult() {
+    showBuildStep("result");
+    const r = buildTierResult;
+    const isLocal = (buildForceTier || r.tier) === "local";
+    const badge = document.getElementById("build-tier-badge");
+    badge.textContent = isLocal ? "Tier 1 — Local Build" : "Tier 2 — Parent Handoff";
+    badge.style.background = isLocal ? "rgba(34,197,94,.15)" : "rgba(234,179,8,.15)";
+    badge.style.color = isLocal ? "#16a34a" : "#ca8a04";
+
+    document.getElementById("build-tier-info").textContent = r.recommendation || "";
+
+    // Signals
+    const sigHtml = r.signals && r.signals.length
+        ? `<div style="font-size:11px;font-weight:600;margin-bottom:4px;color:var(--text-dim);">DETECTION SIGNALS</div>` +
+          r.signals.map(s => `<span style="display:inline-block;background:var(--surface2);padding:2px 8px;border-radius:10px;font-size:11px;margin:2px;">${esc(s)}</span>`).join("")
+        : "";
+    document.getElementById("build-signals").innerHTML = sigHtml;
+
+    // Needs (for parent tier)
+    const needs = r.needs || {};
+    const needItems = Object.entries(needs).filter(([,v]) => v).map(([k]) => k);
+    const needsHtml = needItems.length
+        ? `<div style="font-size:11px;font-weight:600;margin-bottom:4px;color:var(--text-dim);">INFRASTRUCTURE NEEDS</div>` +
+          needItems.map(n => `<span style="display:inline-block;background:rgba(239,68,68,.1);color:#ef4444;padding:2px 8px;border-radius:10px;font-size:11px;margin:2px;">${esc(n)}</span>`).join("")
+        : "";
+    document.getElementById("build-needs").innerHTML = needsHtml;
+
+    // Show override toggle
+    document.getElementById("build-force-toggle").style.display = "inline-block";
+    document.getElementById("build-force-toggle").textContent = isLocal ? "Force Parent Handoff" : "Force Local Build";
+
+    // Build button label
+    document.getElementById("btn-build-go").textContent = isLocal ? "Build Locally" : "Submit to Parent";
+}
+
+function toggleForceTier() {
+    const current = buildForceTier || buildTierResult.tier;
+    buildForceTier = current === "local" ? "parent" : "local";
+    showBuildClassificationResult();
+}
+
+async function doBuild() {
+    const btn = document.getElementById("btn-build-go");
+    btn.disabled = true;
+    btn.textContent = "Starting...";
+    const tier = buildForceTier || buildTierResult.tier;
+
+    if (tier === "local") {
+        // Local build — synchronous via eject pipeline
+        showBuildStep("progress");
+        updateBuildProgress("Generating project...", 20);
+
+        try {
+            const res = await fetch(`${API}/blueprint/build`, {
+                method: "POST",
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify({
+                    app_id: APP_ID || "",
+                    description: appData.generation_prompt || appData.description || appData.name || "",
+                    force_tier: "local",
+                    project_id: appData.project_id || "",
+                }),
+            });
+            const data = await res.json();
+            updateBuildProgress("Finalizing...", 90);
+
+            setTimeout(() => {
+                showBuildStep("done");
+                if (data.status === "delivered" || (data.build_result && data.build_result.status === "delivered")) {
+                    const br = data.build_result || data;
+                    document.getElementById("build-done-icon").textContent = "\u2705";
+                    document.getElementById("build-done-msg").innerHTML = `<strong>Local Build Complete</strong>`;
+                    document.getElementById("build-done-details").innerHTML = `
+                        <div><strong>Output:</strong> ${esc(br.output_dir || '')}</div>
+                        <div><strong>Files:</strong> ${br.file_count || 0} generated</div>
+                        <div><strong>Blueprint:</strong> ${esc(data.blueprint_id || '')}</div>
+                        <div><strong>Duration:</strong> ${data.duration_ms || 0}ms</div>`;
+                } else {
+                    document.getElementById("build-done-icon").textContent = "\u274c";
+                    document.getElementById("build-done-msg").innerHTML = `<strong style="color:#ef4444;">Build Failed</strong>`;
+                    document.getElementById("build-done-details").textContent = data.build_result?.error || data.error || JSON.stringify(data);
+                }
+            }, 500);
+        } catch (e) {
+            showBuildStep("done");
+            document.getElementById("build-done-icon").textContent = "\u274c";
+            document.getElementById("build-done-msg").innerHTML = `<strong style="color:#ef4444;">Error</strong>`;
+            document.getElementById("build-done-details").textContent = e.message;
+        }
+    } else {
+        // Parent handoff — async
+        showBuildStep("progress");
+        updateBuildProgress("Creating blueprint...", 10);
+
+        try {
+            const res = await fetch(`${API}/blueprint/build`, {
+                method: "POST",
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify({
+                    app_id: APP_ID || "",
+                    description: appData.generation_prompt || appData.description || appData.name || "",
+                    force_tier: "parent",
+                    auto_submit: true,
+                    project_id: appData.project_id || "",
+                }),
+            });
+            const data = await res.json();
+
+            if (data.build_result && data.build_result.status === "submitted") {
+                updateBuildProgress("Submitted to parent ICDEV", 30);
+                // Start polling
+                pollParentBuild(data.blueprint_id);
+            } else if (data.build_result && data.build_result.status === "queued") {
+                showBuildStep("done");
+                document.getElementById("build-done-icon").textContent = "\u23f3";
+                document.getElementById("build-done-msg").innerHTML = `<strong>Queued for Retry</strong><br><span style="font-size:12px;color:var(--text-dim);">Parent ICDEV is unreachable. Blueprint saved and will retry automatically.</span>`;
+                document.getElementById("build-done-details").innerHTML = `
+                    <div><strong>Blueprint:</strong> ${esc(data.blueprint_id || '')}</div>
+                    <div><strong>Parent:</strong> ${esc(data.build_result.parent_endpoint || '')}</div>`;
+            } else {
+                showBuildStep("done");
+                document.getElementById("build-done-icon").textContent = "\u274c";
+                document.getElementById("build-done-msg").innerHTML = `<strong style="color:#ef4444;">Submission Failed</strong>`;
+                document.getElementById("build-done-details").textContent = JSON.stringify(data, null, 2);
+            }
+        } catch (e) {
+            showBuildStep("done");
+            document.getElementById("build-done-icon").textContent = "\u274c";
+            document.getElementById("build-done-msg").innerHTML = `<strong style="color:#ef4444;">Error</strong>`;
+            document.getElementById("build-done-details").textContent = e.message;
+        }
+    }
+    btn.disabled = false;
+    btn.textContent = "Build";
+}
+
+function updateBuildProgress(label, pct) {
+    document.getElementById("build-progress-label").textContent = label;
+    document.getElementById("build-progress-pct").textContent = pct + "%";
+    document.getElementById("build-progress-bar").style.width = pct + "%";
+}
+
+async function pollParentBuild(blueprintId, attempt) {
+    attempt = attempt || 0;
+    if (attempt > 60) { // Max 5 min (5s * 60)
+        showBuildStep("done");
+        document.getElementById("build-done-icon").textContent = "\u23f3";
+        document.getElementById("build-done-msg").innerHTML = `<strong>Build In Progress</strong><br><span style="font-size:12px;color:var(--text-dim);">Check status later from the Blueprints list.</span>`;
+        document.getElementById("build-done-details").innerHTML = `<div><strong>Blueprint:</strong> ${esc(blueprintId)}</div>`;
+        return;
+    }
+
+    try {
+        const res = await fetch(`${API}/blueprint/${blueprintId}/status`);
+        const data = await res.json();
+        const st = data.build_status || data.status || "unknown";
+        const pct = data.progress_pct || Math.min(30 + attempt * 2, 90);
+
+        updateBuildProgress(data.current_step || `Building (${st})...`, pct);
+
+        if (st === "delivered") {
+            showBuildStep("done");
+            document.getElementById("build-done-icon").textContent = "\u2705";
+            document.getElementById("build-done-msg").innerHTML = `<strong>Parent Build Complete</strong>`;
+            document.getElementById("build-done-details").innerHTML = `
+                <div><strong>Blueprint:</strong> ${esc(blueprintId)}</div>
+                <div><strong>Build URL:</strong> <a href="${esc(data.build_url || '#')}" target="_blank" style="color:var(--accent);">${esc(data.build_url || 'N/A')}</a></div>`;
+            return;
+        }
+        if (st === "failed") {
+            showBuildStep("done");
+            document.getElementById("build-done-icon").textContent = "\u274c";
+            document.getElementById("build-done-msg").innerHTML = `<strong style="color:#ef4444;">Parent Build Failed</strong>`;
+            document.getElementById("build-done-details").textContent = data.build_log || "No details available.";
+            return;
+        }
+
+        // Continue polling
+        setTimeout(() => pollParentBuild(blueprintId, attempt + 1), 5000);
+    } catch (e) {
+        setTimeout(() => pollParentBuild(blueprintId, attempt + 1), 5000);
+    }
+}
+
+// Canvas click deselects
+document.getElementById("canvas-area").addEventListener("click", function(e) {
+    if (e.target === this || e.target.id === "canvas-frame" || e.target.id === "canvas-root") {
+        selectedNodeId = null;
+        renderCanvas();
+        renderProps();
+    }
+});
+
+function esc(s) { const d = document.createElement("div"); d.textContent = s || ""; return d.innerHTML; }
+
+// =========================================================================
+// Data Binding
+// =========================================================================
+window._schemaTables = [];
+
+async function loadSchemaTables() {
+    try {
+        const res = await fetch(`${API}/schema-tables`);
+        if (res.ok) {
+            const data = await res.json();
+            window._schemaTables = data.tables || [];
+        }
+    } catch (e) { /* schema tables optional */ }
+}
+
+function addBinding(nodeId) {
+    const node = findNodeInTree(currentTree(), nodeId);
+    if (!node) return;
+    node.data_binding = { table: "", column_map: {}, filter: "", order_by: "", limit: null };
+    renderProps();
+}
+
+function removeBinding(nodeId) {
+    const node = findNodeInTree(currentTree(), nodeId);
+    if (!node) return;
+    delete node.data_binding;
+    renderProps();
+    scheduleHotReload();
+}
+
+function updateBinding(nodeId, field, value) {
+    const node = findNodeInTree(currentTree(), nodeId);
+    if (!node || !node.data_binding) return;
+    node.data_binding[field] = value;
+    scheduleHotReload();
+}
+
+function updateBindingJson(nodeId, field, jsonStr) {
+    try {
+        const val = JSON.parse(jsonStr);
+        updateBinding(nodeId, field, val);
+    } catch (e) { /* ignore invalid JSON while typing */ }
+}
+
+// =========================================================================
+// Live Preview with Hot Reload
+// =========================================================================
+let previewTab = "live";
+let hotReloadTimer = null;
+
+function switchPreviewTab(tab) {
+    previewTab = tab;
+    document.querySelectorAll("[data-ptab]").forEach(el =>
+        el.classList.toggle("active", el.dataset.ptab === tab));
+    document.getElementById("live-preview").style.display = tab === "live" ? "block" : "none";
+    document.getElementById("preview-code").style.display = tab === "code" ? "block" : "none";
+    if (tab === "live") refreshLivePreview();
+    else generatePreviewCode();
+}
+
+function scheduleHotReload() {
+    clearTimeout(hotReloadTimer);
+    hotReloadTimer = setTimeout(() => {
+        if (previewMode) {
+            if (previewTab === "live") refreshLivePreview();
+            else generatePreviewCode();
+        }
+    }, 400);
+}
+
+async function refreshLivePreview() {
+    const frame = document.getElementById("live-preview-frame");
+    try {
+        const res = await fetch(`${API}/preview`, {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({ component_tree: currentTree(), mode: "html" }),
+        });
+        const data = await res.json();
+        const html = data.html || _jsxToPreviewHtml(data.jsx || "");
+        frame.srcdoc = html;
+    } catch (e) {
+        frame.srcdoc = `<p style="padding:24px;color:#ef4444;font-family:sans-serif">Preview error: ${e.message}</p>`;
+    }
+}
+
+async function generatePreviewCode() {
+    const codeEl = document.getElementById("preview-code");
+    codeEl.textContent = "Generating...";
+    try {
+        const res = await fetch(`${API}/preview`, {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({ component_tree: currentTree() }),
+        });
+        const data = await res.json();
+        codeEl.textContent = data.jsx || data.error || "No output";
+    } catch (e) {
+        codeEl.textContent = "Error: " + e.message;
+    }
+}
+
+function _jsxToPreviewHtml(jsx) {
+    // Wrap JSX in a basic HTML shell for iframe rendering
+    return `<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 16px; color: #333; }
+  button { background: #3b82f6; color: #fff; padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
+  input, select, textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; margin-bottom: 8px; }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  th, td { border: 1px solid #e5e5e5; padding: 8px; text-align: left; }
+  th { background: #f5f5f5; font-weight: 600; }
+  .flex { display: flex; gap: 8px; flex-wrap: wrap; }
+  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
+  .card { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 16px; }
+  .badge { display: inline-block; background: #e5e5e5; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
+  .metric { text-align: center; padding: 12px; }
+  .metric .val { font-size: 28px; font-weight: 700; color: #3b82f6; }
+  .metric .lbl { font-size: 12px; color: #999; }
+  .kanban { display: flex; gap: 12px; }
+  .kanban-col { min-width: 200px; background: #f5f5f5; border-radius: 8px; padding: 12px; }
+  .kanban-col h4 { font-size: 12px; text-transform: uppercase; color: #999; margin-bottom: 8px; }
+  .kanban-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 8px; margin-bottom: 6px; font-size: 12px; }
+</style>
+</head><body>
+<pre style="font-family:monospace;font-size:12px;white-space:pre-wrap;color:#555;">${jsx.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</pre>
+<hr style="margin:16px 0;border:none;border-top:1px solid #eee;">
+<p style="font-size:11px;color:#999;">Live preview — JSX rendered as formatted code. Full React rendering available after eject.</p>
+</body></html>`;
+}
+
+// Override original togglePreview to use new live preview
+const _origTogglePreview = togglePreview;
+togglePreview = function() {
+    previewMode = !previewMode;
+    const btn = document.getElementById("btn-preview");
+    const canvas = document.getElementById("canvas-area");
+    const preview = document.getElementById("preview-panel");
+    if (previewMode) {
+        btn.textContent = "Visual Editor";
+        canvas.style.display = "none";
+        preview.classList.add("active");
+        if (previewTab === "live") refreshLivePreview();
+        else generatePreviewCode();
+    } else {
+        btn.textContent = "Preview Code";
+        canvas.style.display = "";
+        preview.classList.remove("active");
+    }
+};
+
+// Hook into all tree-modifying operations for hot reload
+const _origUpdateNodeProp = updateNodeProp;
+updateNodeProp = function(nodeId, key, value) {
+    _origUpdateNodeProp(nodeId, key, value);
+    scheduleHotReload();
+};
+
+function openCompliance() {
+    if (APP_ID) window.open(`/forge-studio/compliance?app_id=${APP_ID}`, '_blank');
+    else alert("Save the app first to view compliance dashboard.");
+}
+
+loadSchemaTables();
+
+// ===========================================================================
+// Intake Chat Mode — RICOAS ↔ Forge Studio Bridge
+// ===========================================================================
+
+let intakeSessionId = null;
+let intakeSending = false;
+
+function initIntakeMode(description) {
+    // Show chat panel, hide canvas + preview
+    document.getElementById("chat-panel").classList.add("active");
+    document.getElementById("canvas-area").style.display = "none";
+    document.getElementById("preview-panel").classList.remove("active");
+    // Dim the palette
+    document.querySelector(".fsb-palette").style.opacity = "0.4";
+    document.querySelector(".fsb-palette").style.pointerEvents = "none";
+
+    appendChatMsg("system", "Starting guided requirements session...");
+
+    fetch(`${API}/intake/start`, {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({ description: description || "" }),
+    })
+    .then(r => r.json())
+    .then(data => {
+        if (data.error) { appendChatMsg("system", "Error: " + data.error); return; }
+        intakeSessionId = data.session_id;
+
+        if (data.welcome_message) appendChatMsg("analyst", data.welcome_message);
+        if (data.initial_analysis && data.initial_analysis.analyst_response) {
+            appendChatMsg("analyst", data.initial_analysis.analyst_response);
+        }
+        updateReadinessUI(data.readiness);
+        updateReqCount(data.initial_analysis?.requirements_count || 0);
+    })
+    .catch(e => appendChatMsg("system", "Failed to start intake: " + e.message));
+}
+
+async function sendIntakeMessage() {
+    if (intakeSending || !intakeSessionId) return;
+    const input = document.getElementById("chat-input");
+    const msg = input.value.trim();
+    if (!msg) return;
+
+    input.value = "";
+    appendChatMsg("user", msg);
+    intakeSending = true;
+    document.getElementById("btn-send-msg").disabled = true;
+
+    // Show typing indicator
+    const typingEl = document.createElement("div");
+    typingEl.className = "fsb-chat-msg fsb-chat-typing";
+    typingEl.textContent = "Analyst is thinking...";
+    typingEl.id = "typing-indicator";
+    document.getElementById("chat-messages").appendChild(typingEl);
+    scrollChatBottom();
+
+    try {
+        const res = await fetch(`${API}/intake/message`, {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({ session_id: intakeSessionId, message: msg }),
+        });
+        const data = await res.json();
+
+        // Remove typing indicator
+        const ti = document.getElementById("typing-indicator");
+        if (ti) ti.remove();
+
+        if (data.error) {
+            appendChatMsg("system", "Error: " + data.error);
+        } else {
+            if (data.analyst_response) appendChatMsg("analyst", data.analyst_response);
+            updateReadinessUI(data.readiness_update);
+            updateReqCount(data.requirements_count || 0);
+        }
+    } catch (e) {
+        const ti = document.getElementById("typing-indicator");
+        if (ti) ti.remove();
+        appendChatMsg("system", "Error: " + e.message);
+    }
+
+    intakeSending = false;
+    document.getElementById("btn-send-msg").disabled = false;
+    document.getElementById("chat-input").focus();
+}
+
+async function generateFromIntake() {
+    if (!intakeSessionId) return;
+    const btn = document.getElementById("btn-generate-intake");
+    btn.textContent = "Generating...";
+    btn.disabled = true;
+
+    appendChatMsg("system", "Generating your application from the gathered requirements...");
+
+    try {
+        const res = await fetch(`${API}/intake/generate`, {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({ session_id: intakeSessionId, use_llm: false, store: true }),
+        });
+        const result = await res.json();
+        if (result.app_id) {
+            appendChatMsg("system", "App generated! Loading builder...");
+            setTimeout(() => {
+                window.location = `/forge-studio/builder?app_id=${result.app_id}`;
+            }, 800);
+        } else {
+            appendChatMsg("system", "Generation failed: " + (result.errors?.join(", ") || result.error || "Unknown error"));
+            btn.textContent = "Generate App";
+            btn.disabled = false;
+        }
+    } catch (e) {
+        appendChatMsg("system", "Error: " + e.message);
+        btn.textContent = "Generate App";
+        btn.disabled = false;
+    }
+}
+
+function skipIntake() {
+    // Get the original description from URL params and generate directly
+    const params = new URLSearchParams(window.location.search);
+    const desc = params.get("description") || "";
+    if (!desc) {
+        appendChatMsg("system", "No description provided. Please type your requirements in the chat.");
+        return;
+    }
+    appendChatMsg("system", "Generating app directly from your description...");
+
+    fetch(`${API}/apps`, {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({ description: desc, use_llm: false, store: true }),
+    })
+    .then(r => r.json())
+    .then(result => {
+        if (result.status === "success" && result.app) {
+            window.location = `/forge-studio/builder?app_id=${result.app.id}`;
+        } else {
+            appendChatMsg("system", "Generation failed: " + (result.error || "Unknown error"));
+        }
+    })
+    .catch(e => appendChatMsg("system", "Error: " + e.message));
+}
+
+function appendChatMsg(role, text) {
+    const el = document.createElement("div");
+    el.className = "fsb-chat-msg " + role;
+    el.textContent = text || "";
+    document.getElementById("chat-messages").appendChild(el);
+    scrollChatBottom();
+}
+
+function scrollChatBottom() {
+    const c = document.getElementById("chat-messages");
+    c.scrollTop = c.scrollHeight;
+}
+
+function updateReadinessUI(readiness) {
+    if (!readiness) return;
+    const pct = Math.round((readiness.overall || 0) * 100);
+    const fill = document.getElementById("readiness-fill");
+    fill.style.width = pct + "%";
+    fill.className = "fsb-readiness-fill" + (pct >= 50 ? " ready" : pct >= 25 ? " medium" : "");
+    document.getElementById("readiness-pct").textContent = pct + "%";
+
+    const btn = document.getElementById("btn-generate-intake");
+    const funcScore = readiness.functional_score || readiness.overall || 0;
+    // Lower threshold for Forge Studio — RICOAS completeness is strict (DoD-grade)
+    // 2+ turns of intake provides enough context for app generation
+    const ready = pct >= 30 || funcScore >= 0.5;
+    btn.disabled = !ready;
+}
+
+function updateReqCount(count) {
+    const el = document.getElementById("chat-req-count");
+    el.textContent = count > 0 ? `${count} requirement${count > 1 ? "s" : ""} extracted` : "";
+}
+
+// Check URL params for intake mode
+(function checkIntakeMode() {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("mode") === "intake") {
+        initIntakeMode(params.get("description") || "");
+    }
+})();
+
+init();
+</script>
+{% endblock %}