Upload static/wizard.js

static/wizard.js

@@ -1,50 +1,46 @@
 /**
  * ╔══════════════════════════════════════════════════════╗
  * ║  OMNI-VIBE STUDIO — Client Runtime                ║
- * ║  Tabbed Forge/Preview · SSE Stream · Ghost Deploy  ║
+ * ║  Fluid Thinking · Wizard Pulse · E2E Handshake    ║
  * ╚══════════════════════════════════════════════════════╝
  */
 
-const S = { sessionId: null, sandboxStatus: 'idle', fullCode: '', errorsFound: 0, errorsFixed: 0, publishData: null, previewUnlocked: false };
+const S = {
+  sessionId: null, fullCode: '', previewUnlocked: false,
+  publishReady: false, publishData: null, handshakeVerified: false,
+};
 const D = {
   prompt: document.getElementById('prompt-input'),
   vibeBtn: document.getElementById('vibe-btn'),
   codeContent: document.getElementById('code-content'),
+  charCount: document.getElementById('char-count'),
   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'),
+  previewBadge: document.getElementById('preview-badge'),
+  previewTabBtn: document.getElementById('preview-tab-btn'),
+  panelForge: document.getElementById('panel-forge'),
+  panelPreview: document.getElementById('panel-preview'),
   publishBtn: document.getElementById('publish-btn'),
-  publishGate: document.getElementById('publish-gate'),
-  gateIcon: document.querySelector('.gate-icon'),
-  gateText: document.querySelector('.gate-text'),
+  publishBar: document.getElementById('publish-bar'),
+  pubIcon: document.getElementById('pub-icon'),
+  pubText: document.getElementById('pub-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'),
+  liveLink: document.getElementById('live-link'),
   wizardHat: document.getElementById('wizard-hat'),
-  statusRing: document.getElementById('status-ring'),
+  thoughtBar: document.getElementById('thought-bar'),
+  thoughtText: document.getElementById('thought-text'),
+  thoughtModels: document.getElementById('thought-models'),
   copyBtn: document.getElementById('copy-btn'),
-  previewTabBtn: document.getElementById('preview-tab-btn'),
-  panelForge: document.getElementById('panel-forge'),
-  panelPreview: document.getElementById('panel-preview'),
 };
 
 /* ═══ 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');
+    document.getElementById('panel-' + btn.dataset.tab).classList.add('active');
   });
 });
 
@@ -57,12 +53,31 @@ function unlockPreview() {
   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');
+/* ═══ WIZARD PULSE — high-velocity, 600ms ═══ */
+function pulseWizard() {
+  D.wizardHat.classList.add('pulse');
+}
+function stopWizard(state) {
+  D.wizardHat.classList.remove('pulse');
+  D.wizardHat.classList.remove('stable','error','published');
+  if (state) D.wizardHat.classList.add(state);
+}
+
+/* ═══ SWARM THOUGHT PROCESS — single line ═══ */
+function showThought() {
+  D.thoughtBar.style.display = 'flex';
+  requestAnimationFrame(() => D.thoughtBar.classList.add('visible'));
+}
+function updateThought(text, models) {
+  D.thoughtText.textContent = text;
+  if (models?.length) {
+    D.thoughtModels.innerHTML = models.map(m =>
+      `<span>${m.model_id.split('/').pop()}</span>`
+    ).join('');
+  }
+}
+function hideThought() {
+  D.thoughtBar.classList.remove('visible');
 }
 
 /* ═══ SSE STREAMING ═══ */
@@ -90,37 +105,7 @@ async function* streamFromServer(prompt) {
   }
 }
 
-/* ═══ STATE MACHINE ═══ */
-function setSandboxStatus(st) {
-  S.sandboxStatus = st;
-  D.wizardHat.classList.remove('stable','error','published','building');
-  D.statusRing.classList.remove('stable','error','published');
-  D.statusDot.classList.remove('building','streaming','stable','error','published');
-  D.publishGate.classList.remove('unlocked');
-  const map = {
-    building:  {hat:'building', dot:'building', badge:'🔨', btn:true, gate:[false,'🔒','Building...']},
-    streaming: {hat:'',        dot:'streaming',badge:'📡', btn:true, gate:[false,'🔒','Streaming...']},
-    stable:    {hat:'stable',  dot:'stable',   badge:'✅', btn:false,gate:[true,'🔓','Sandbox stable — Ready']},
-    error:     {hat:'error',   dot:'error',    badge:'❌', btn:true, gate:[false,'🔒','Sandbox errors']},
-    published: {hat:'published',dot:'published',badge:'🌟',btn:false,gate:[true,'🌟','Published to A2A']},
-  };
-  const m = map[st] || map.building;
-  if (m.hat) D.wizardHat.classList.add(m.hat);
-  if (st==='stable'||st==='published') D.statusRing.classList.add(st);
-  D.statusDot.classList.add(m.dot);
-  D.sandboxBadge.textContent = m.badge;
-  D.publishBtn.disabled = m.btn;
-  if (m.gate) {
-    if (m.gate[0]) D.publishGate.classList.add('unlocked');
-    D.gateIcon.textContent = m.gate[1];
-    D.gateText.textContent = m.gate[2];
-  }
-  if (st==='published') D.publishBtn.classList.add('gold');
-  else D.publishBtn.classList.remove('gold');
-  D.statusText.textContent = st.charAt(0).toUpperCase()+st.slice(1);
-}
-
-/* ═══ IFRAME HOT-RELOAD ═══ */
+/* ═══ IFRAME ═══ */
 function updateIframe(code) {
   const blob = new Blob([code], {type:'text/html'});
   const url = URL.createObjectURL(blob);
@@ -136,84 +121,150 @@ function appendCode(chunk) {
   span.className='code-chunk-new'; span.textContent=chunk;
   D.codeContent.appendChild(span);
   D.codeContent.parentElement.scrollTop = D.codeContent.parentElement.scrollHeight;
+  D.charCount.textContent = `${S.fullCode.length.toLocaleString()} chars`;
 }
 
-function updateModelBadges(plan) {
-  D.modelBadges.innerHTML = '';
-  if (!plan?.models) return;
-  plan.models.forEach(m => {
-    const b = document.createElement('span');
-    b.className = `model-badge ${m.task_type}`;
-    b.textContent = m.model_id.split('/').pop();
-    b.title = `${m.model_id} (${Math.round(m.confidence*100)}%)`;
-    D.modelBadges.appendChild(b);
-  });
+/* ═══ END-TO-END HANDSHAKE VERIFICATION ═══ */
+async function verifyHandshake(url) {
+  try {
+    const resp = await fetch('/api/verify-handshake', {
+      method:'POST',
+      headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({url}),
+    });
+    const data = await resp.json();
+    S.handshakeVerified = data.verified;
+    return data;
+  } catch {
+    S.handshakeVerified = false;
+    return {verified:false, error:'Handshake unreachable'};
+  }
+}
+
+/* ═══ PUBLISH GATE ═══ */
+function setPublishState(ready, text, icon) {
+  S.publishReady = ready;
+  D.publishBtn.disabled = !ready;
+  if (ready) {
+    D.publishBar.classList.add('unlocked');
+    D.pubIcon.textContent = icon || '🔓';
+    D.pubText.textContent = text || 'Ready to publish';
+  } else {
+    D.publishBar.classList.remove('unlocked');
+    D.pubIcon.textContent = icon || '🔒';
+    D.pubText.textContent = text || 'Validate to unlock publishing';
+  }
 }
 
 /* ═══ 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.previewUnlocked = false;
+  S.fullCode = ''; S.previewUnlocked = false; S.publishReady = false; S.handshakeVerified = false;
 
-  // Reset to Forge tab
+  // Reset
   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.codeContent.innerHTML = '<span class="placeholder">Streaming…</span>';
+  D.charCount.textContent = '';
   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 = '';
+  setPublishState(false, 'Building…', '🔨');
   D.vibeBtn.disabled = true;
-  D.vibeBtn.querySelector('.btn-text').textContent = 'Generating...';
-  setSandboxStatus('building');
-  D.statusPhase.textContent = 'Connecting...';
+
+  // Wizard pulse start
+  pulseWizard();
+  showThought();
+  updateThought('Analyzing prompt…', []);
 
   try {
     for await (const ev of streamFromServer(prompt)) {
-      if (ev.phase) D.statusPhase.textContent = ev.phase;
-      if (ev.plan) updateModelBadges(ev.plan);
+      // Phase updates → single thought line
+      if (ev.phase) {
+        const phaseMap = {
+          'pose': 'Selecting models…',
+          'generate': 'Generating code…',
+          'audit': 'Verifying output…',
+          'heal': 'Self-healing errors…',
+          'sandbox': 'Validating sandbox…',
+        };
+        updateThought(phaseMap[ev.phase] || ev.phase, []);
+      }
+
+      // Pose plan → show model badges
+      if (ev.pose) {
+        const models = [];
+        if (ev.pose.architect?.stack?.backend) models.push({model_id:'postgres+oauth'});
+        models.push({model_id:'liquid-glass'});
+        updateThought('Swarm dispatched', models);
+      }
+
+      // Code streaming
       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; }
+
+      // Sandbox result
       if (ev.sandbox) {
-        setSandboxStatus(ev.status);
-        // Unlock Preview tab when stable or published
+        stopWizard(ev.status === 'stable' ? 'stable' : ev.status === 'error' ? 'error' : null);
         if (ev.status === 'stable' || ev.status === 'published') {
           unlockPreview();
+          setPublishState(true, 'Sandbox stable', '🔓');
+          updateThought('Build complete', [{model_id:'ready'}]);
+        } else if (ev.status === 'error') {
+          setPublishState(false, 'Sandbox errors found', '❌');
+          updateThought('Errors detected', []);
         }
       }
     }
   } catch (err) {
     console.error('Stream error:', err);
-    setSandboxStatus('error');
-    D.statusText.textContent = `Error: ${err.message}`;
+    stopWizard('error');
+    updateThought(`Error: ${err.message}`, []);
   } finally {
     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();
+    if (!S.publishReady) stopWizard(null);
+    setTimeout(hideThought, 2000);
   }
 }
 
-/* ═══ PUBLISH ═══ */
+/* ═══ PUBLISH WITH HANDSHAKE ═══ */
 async function publish() {
-  const repoName = prompt('Repo name:', `omni-vibe-${Date.now().toString(36)}`);
-  if (!repoName) return;
+  if (!S.publishReady) return;
+
+  // Phase 1: Verify handshake
+  D.publishBtn.classList.add('verifying');
+  D.publishBtn.querySelector('.spinner').style.display = 'inline-block';
+  updateThought('Verifying server handshake…', [{model_id:'litheat.app'}]);
+  showThought();
+
+  const hk = await verifyHandshake('litheat.app');
+  if (!hk.verified) {
+    updateThought('Handshake failed — retrying…', []);
+    // Retry once
+    await new Promise(r => setTimeout(r, 1000));
+    const hk2 = await verifyHandshake('litheat.app');
+    if (!hk2.verified) {
+      updateThought('⚠ Server unreachable — publishing anyway', []);
+      D.publishBtn.classList.remove('verifying');
+      D.vibeBtn.querySelector('.spinner')?.style && (D.publishBtn.querySelector('.spinner').style.display = 'none');
+    }
+  } else {
+    updateThought('✓ Handshake verified', [{model_id:'litheat.app'}]);
+  }
+
+  // Phase 2: Publish
+  const repoName = `omni-vibe-${Date.now().toString(36)}`;
   D.publishBtn.disabled = true;
-  D.publishBtn.querySelector('.btn-text').textContent = 'Publishing...';
+  D.publishBtn.classList.add('verifying');
+  updateThought('Deploying to production…', [{model_id:'ghost-deploy'}]);
+
   try {
     const resp = await fetch('/api/publish', {
       method:'POST',
@@ -221,20 +272,29 @@ async function publish() {
       body:JSON.stringify({repo_name:repoName, description:D.prompt.value.trim().slice(0,200)}),
     });
     const r = await resp.json();
+
     if (r.success) {
-      S.publishData = r; setSandboxStatus('published');
+      S.publishData = r;
+      stopWizard('published');
+      setPublishState(true, 'Published!', '🌟');
+      D.publishBtn.classList.add('gold');
       D.publishResult.style.display = 'block';
-      D.publishUrl.textContent = r.spaces?.url || r.github?.repo_url || 'Published';
-      if (r.github?.repo_url) { D.githubLink.href = r.github.repo_url; D.githubLink.style.display = 'inline'; }
-      if (r.spaces?.url) { D.spacesLink.href = r.spaces.url; D.spacesLink.style.display = 'inline'; }
-      if (r.agent_url) { D.agentLink.href = r.agent_url; D.agentLink.style.display = 'inline'; }
+      const liveUrl = r.spaces?.url || r.tunnel_url || '#';
+      D.liveLink.href = liveUrl;
+      D.liveLink.textContent = liveUrl;
+      updateThought('✓ Live — production ready', [{model_id:'deployed'}]);
       D.publishResult.scrollIntoView({behavior:'smooth',block:'nearest'});
-    } else { D.statusText.textContent = `Publish error: ${r.error}`; }
+    } else {
+      updateThought(`Publish error: ${r.error || r.space_error || 'Unknown'}`, []);
+      setPublishState(true, 'Publish failed — retry', '⚠');
+    }
   } catch (err) {
-    D.statusText.textContent = `Publish error: ${err.message}`;
+    updateThought(`Publish error: ${err.message}`, []);
+    setPublishState(true, 'Publish failed — retry', '⚠');
   } finally {
-    D.publishBtn.disabled = false;
-    D.publishBtn.querySelector('.btn-text').textContent = 'Publish to A2A Network';
+    D.publishBtn.disabled = !S.publishReady;
+    D.publishBtn.classList.remove('verifying');
+    setTimeout(hideThought, 3000);
   }
 }
 
@@ -242,11 +302,17 @@ async function publish() {
 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(); }
+  if (e.key==='Enter' && !e.shiftKey) { e.preventDefault(); generate(); }
 });
 D.copyBtn.addEventListener('click', async () => {
   if (!S.fullCode) return;
   try { await navigator.clipboard.writeText(S.fullCode); } catch {}
 });
 
-console.log('🧙‍♂️ Omni-Vibe Studio — Liquid Glass Client ready');
+/* ═══ AUTO-RESIZE TEXTAREA ═══ */
+D.prompt.addEventListener('input', () => {
+  D.prompt.style.height = 'auto';
+  D.prompt.style.height = Math.min(D.prompt.scrollHeight, 120) + 'px';
+});
+
+console.log('🧙‍♂️ Omni-Vibe Studio — Fluid Thinking Client ready');