Upload static/wizard.js

static/wizard.js

@@ -1,29 +1,77 @@
 /**
  * ╔══════════════════════════════════════════════════════╗
- * ║  WIZARD-VIBE STUDIO — Client Runtime               ║
- * ║  SSE Streaming · Sandbox iframe · Publish Gate      ║
+ * ║  OMNI-VIBE STUDIO — Client Runtime                ║
+ * ║  Tabbed Forge/Preview · SSE Stream · Ghost Deploy  ║
  * ╚══════════════════════════════════════════════════════╝
  */
 
-const S = { sessionId: null, sandboxStatus: 'idle', fullCode: '', errorsFound: 0, errorsFixed: 0, publishData: null };
+const S = { sessionId: null, sandboxStatus: 'idle', fullCode: '', errorsFound: 0, errorsFixed: 0, publishData: null, previewUnlocked: false };
 const D = {
-  prompt: document.getElementById('prompt-input'), vibeBtn: document.getElementById('vibe-btn'),
-  codeContent: document.getElementById('code-content'), previewFrame: document.getElementById('preview-frame'),
-  previewOverlay: document.getElementById('preview-overlay'), statusDot: document.getElementById('status-dot'),
-  statusText: document.getElementById('status-text'), statusPhase: document.getElementById('status-phase'),
-  sandboxBadge: document.getElementById('sandbox-badge'), publishBtn: document.getElementById('publish-btn'),
-  publishGate: document.getElementById('publish-gate'), gateIcon: document.querySelector('.gate-icon'),
-  gateText: document.querySelector('.gate-text'), publishResult: document.getElementById('publish-result'),
-  publishUrl: document.getElementById('publish-url'), githubLink: document.getElementById('github-link'),
-  spacesLink: document.getElementById('spaces-link'), agentLink: document.getElementById('agent-link'),
-  modelBadges: document.getElementById('model-badges'), wizardHat: document.getElementById('wizard-hat'),
-  statusRing: document.getElementById('status-ring'), copyBtn: document.getElementById('copy-btn'),
+  prompt: document.getElementById('prompt-input'),
+  vibeBtn: document.getElementById('vibe-btn'),
+  codeContent: document.getElementById('code-content'),
+  previewFrame: document.getElementById('preview-frame'),
+  previewOverlay: document.getElementById('preview-overlay'),
+  statusDot: document.getElementById('status-dot'),
+  statusText: document.getElementById('status-text'),
+  statusPhase: document.getElementById('status-phase'),
+  sandboxBadge: document.getElementById('sandbox-badge'),
+  publishBtn: document.getElementById('publish-btn'),
+  publishGate: document.getElementById('publish-gate'),
+  gateIcon: document.querySelector('.gate-icon'),
+  gateText: document.querySelector('.gate-text'),
+  publishResult: document.getElementById('publish-result'),
+  publishUrl: document.getElementById('publish-url'),
+  githubLink: document.getElementById('github-link'),
+  spacesLink: document.getElementById('spaces-link'),
+  agentLink: document.getElementById('agent-link'),
+  modelBadges: document.getElementById('model-badges'),
+  wizardHat: document.getElementById('wizard-hat'),
+  statusRing: document.getElementById('status-ring'),
+  copyBtn: document.getElementById('copy-btn'),
+  previewTabBtn: document.getElementById('preview-tab-btn'),
+  panelForge: document.getElementById('panel-forge'),
+  panelPreview: document.getElementById('panel-preview'),
 };
 
-// ═══ SSE STREAMING — ASYNC ITERATOR CLIENT ═══
+/* ═══ TAB SWITCHING ═══ */
+document.querySelectorAll('.tab-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    if (btn.disabled) return;
+    // Deactivate all
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+    // Activate clicked
+    btn.classList.add('active');
+    const panelId = 'panel-' + btn.dataset.tab;
+    document.getElementById(panelId).classList.add('active');
+  });
+});
 
+function unlockPreview() {
+  if (S.previewUnlocked) return;
+  S.previewUnlocked = true;
+  D.previewTabBtn.disabled = false;
+  D.previewTabBtn.classList.remove('locked');
+  D.previewTabBtn.classList.add('unlocked');
+  D.previewTabBtn.querySelector('.tab-icon').textContent = '👁️';
+}
+
+function switchToPreview() {
+  if (!S.previewUnlocked) return;
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  D.previewTabBtn.classList.add('active');
+  D.panelPreview.classList.add('active');
+}
+
+/* ═══ SSE STREAMING ═══ */
 async function* streamFromServer(prompt) {
-  const resp = await fetch('/api/stream', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({prompt}) });
+  const resp = await fetch('/api/stream', {
+    method:'POST',
+    headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({prompt})
+  });
   if (!resp.ok) throw new Error(`Stream error: ${resp.status}`);
   const reader = resp.body.getReader(), dec = new TextDecoder();
   let buf = '';
@@ -42,8 +90,7 @@ async function* streamFromServer(prompt) {
   }
 }
 
-// ═══ STATE MACHINE — WIZARD HAT MORPHING ═══
-
+/* ═══ STATE MACHINE ═══ */
 function setSandboxStatus(st) {
   S.sandboxStatus = st;
   D.wizardHat.classList.remove('stable','error','published','building');
@@ -73,8 +120,7 @@ function setSandboxStatus(st) {
   D.statusText.textContent = st.charAt(0).toUpperCase()+st.slice(1);
 }
 
-// ═══ IFRAME HOT-RELOAD ═══
-
+/* ═══ IFRAME HOT-RELOAD ═══ */
 function updateIframe(code) {
   const blob = new Blob([code], {type:'text/html'});
   const url = URL.createObjectURL(blob);
@@ -86,7 +132,8 @@ function updateIframe(code) {
 
 function appendCode(chunk) {
   if (D.codeContent.querySelector('.placeholder')) D.codeContent.innerHTML = '';
-  const span = document.createElement('span'); span.className='code-chunk-new'; span.textContent=chunk;
+  const span = document.createElement('span');
+  span.className='code-chunk-new'; span.textContent=chunk;
   D.codeContent.appendChild(span);
   D.codeContent.parentElement.scrollTop = D.codeContent.parentElement.scrollHeight;
 }
@@ -103,17 +150,32 @@ function updateModelBadges(plan) {
   });
 }
 
-// ═══ MAIN GENERATION ═══
-
+/* ═══ MAIN GENERATION ═══ */
 async function generate() {
   const prompt = D.prompt.value.trim(); if (!prompt) return;
-  S.fullCode = ''; S.errorsFound = 0; S.errorsFixed = 0; S.publishData = null;
+  S.fullCode = ''; S.errorsFound = 0; S.errorsFixed = 0;
+  S.publishData = null; S.previewUnlocked = false;
+
+  // Reset to Forge tab
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  document.querySelector('.tab-btn[data-tab="forge"]').classList.add('active');
+  D.panelForge.classList.add('active');
+
+  // Lock Preview tab
+  D.previewTabBtn.disabled = true;
+  D.previewTabBtn.classList.add('locked');
+  D.previewTabBtn.classList.remove('unlocked');
+  D.previewTabBtn.querySelector('.tab-icon').textContent = '🔒';
+
   D.codeContent.innerHTML = '<span class="placeholder">Streaming...</span>';
   D.previewOverlay.classList.remove('hidden');
+  D.previewFrame.src = 'about:blank';
   D.publishResult.style.display = 'none';
   D.publishBtn.classList.remove('gold'); D.publishBtn.disabled = true;
   D.modelBadges.innerHTML = '';
-  D.vibeBtn.disabled = true; D.vibeBtn.querySelector('.btn-text').textContent = 'Generating...';
+  D.vibeBtn.disabled = true;
+  D.vibeBtn.querySelector('.btn-text').textContent = 'Generating...';
   setSandboxStatus('building');
   D.statusPhase.textContent = 'Connecting...';
 
@@ -124,27 +186,38 @@ async function generate() {
       if (ev.chunk) { appendCode(ev.chunk); S.fullCode += ev.chunk; }
       if (ev.partial) updateIframe(ev.partial);
       if (ev.heal) { S.errorsFound = ev.errors_found; S.errorsFixed = ev.errors_fixed; }
-      if (ev.sandbox) setSandboxStatus(ev.status);
+      if (ev.sandbox) {
+        setSandboxStatus(ev.status);
+        // Unlock Preview tab when stable or published
+        if (ev.status === 'stable' || ev.status === 'published') {
+          unlockPreview();
+        }
+      }
     }
   } catch (err) {
     console.error('Stream error:', err);
     setSandboxStatus('error');
     D.statusText.textContent = `Error: ${err.message}`;
   } finally {
-    D.vibeBtn.disabled = false; D.vibeBtn.querySelector('.btn-text').textContent = 'Generate';
+    D.vibeBtn.disabled = false;
+    D.vibeBtn.querySelector('.btn-text').textContent = 'Generate';
     D.statusText.textContent = 'Done';
+    // Always unlock preview after generation, even on errors
+    // (so user can see partial/error output)
+    if (S.fullCode) unlockPreview();
   }
 }
 
-// ═══ PUBLISH ═══
-
+/* ═══ PUBLISH ═══ */
 async function publish() {
-  const repoName = prompt('Repo name:', `wizard-vibe-${Date.now().toString(36)}`);
+  const repoName = prompt('Repo name:', `omni-vibe-${Date.now().toString(36)}`);
   if (!repoName) return;
-  D.publishBtn.disabled = true; D.publishBtn.querySelector('.btn-text').textContent = 'Publishing...';
+  D.publishBtn.disabled = true;
+  D.publishBtn.querySelector('.btn-text').textContent = 'Publishing...';
   try {
     const resp = await fetch('/api/publish', {
-      method:'POST', headers:{'Content-Type':'application/json'},
+      method:'POST',
+      headers:{'Content-Type':'application/json'},
       body:JSON.stringify({repo_name:repoName, description:D.prompt.value.trim().slice(0,200)}),
     });
     const r = await resp.json();
@@ -160,18 +233,20 @@ async function publish() {
   } catch (err) {
     D.statusText.textContent = `Publish error: ${err.message}`;
   } finally {
-    D.publishBtn.disabled = false; D.publishBtn.querySelector('.btn-text').textContent = 'Publish to A2A Network';
+    D.publishBtn.disabled = false;
+    D.publishBtn.querySelector('.btn-text').textContent = 'Publish to A2A Network';
   }
 }
 
-// ═══ EVENT BINDINGS ═══
-
+/* ═══ EVENT BINDINGS ═══ */
 D.vibeBtn.addEventListener('click', generate);
 D.publishBtn.addEventListener('click', publish);
-D.prompt.addEventListener('keydown', e => { if ((e.ctrlKey||e.metaKey) && e.key==='Enter') { e.preventDefault(); generate(); } });
+D.prompt.addEventListener('keydown', e => {
+  if ((e.ctrlKey||e.metaKey) && e.key==='Enter') { e.preventDefault(); generate(); }
+});
 D.copyBtn.addEventListener('click', async () => {
   if (!S.fullCode) return;
   try { await navigator.clipboard.writeText(S.fullCode); } catch {}
 });
 
-console.log('🧙‍♂️ Wizard-Vibe Studio — Liquid Glass Client ready');
+console.log('🧙‍♂️ Omni-Vibe Studio — Liquid Glass Client ready');