tryassay 0.22.0 → 0.22.2

package/demo/js/sse-client.js

@@ -1,8 +1,8 @@
 // sse-client.js — EventSource to AppState bridge
 // Connects to the Assay API SSE stream and maps events to state updates
 
-import { showQuestions, hideQuestions, configureQuestionCards } from './question-cards.js';
-import { configureChat, addArchitectMessage, closeChat } from './chat.js';
+import { configureChat, addArchitectMessage, lockChat, unlockChat } from './chat.js';
+import { downloadProject, collectProjectFiles } from './preview.js';
 
 const AppState = window.AppState;
 
@@ -20,7 +20,6 @@ function autoApprovePlan(appId) {
   }).then(res => {
     if (res.ok) {
       AppState.addLog({ level: 'info', message: 'Plan approved — building...' });
-      hidePlanOverlay();
     } else {
       console.warn('[SSE] Auto-approve failed:', res.status);
     }
@@ -29,64 +28,23 @@ function autoApprovePlan(appId) {
   });
 }
 
-function showPlanOverlay(summary) {
-  let overlay = document.getElementById('plan-overlay');
-  if (!overlay) return;
-
-  const features = (summary.features || []).map(f =>
-    `<div class="plan-feature">
-      <span class="plan-feature-name">${f.name || f.id}</span>
-      <span class="plan-feature-meta">${f.complexity} &middot; ${f.routeCount || 0} routes &middot; ${f.pageCount || 0} pages</span>
-    </div>`
-  ).join('');
-
-  const warnings = (summary.warnings || []).map(w =>
-    `<div class="plan-warning">${w}</div>`
-  ).join('');
-
-  overlay.innerHTML = `
-    <div class="plan-card">
-      <div class="plan-header">Architecture Plan</div>
-      <div class="plan-meta">
-        <span>${summary.techStack || ''}</span>
-        <span>${summary.estimatedComplexity || ''}</span>
-        <span>${summary.featureCount || 0} features</span>
-        <span>${summary.schemaEntities || 0} entities</span>
-        <span>${summary.apiRouteCount || 0} routes</span>
-        <span>${summary.pageCount || 0} pages</span>
-      </div>
-      <div class="plan-features">${features}</div>
-      ${warnings ? `<div class="plan-warnings">${warnings}</div>` : ''}
-      <div class="plan-auto">Auto-approving...</div>
-    </div>
-  `;
-  overlay.classList.add('visible');
-}
-
-function hidePlanOverlay() {
-  const overlay = document.getElementById('plan-overlay');
-  if (overlay) {
-    overlay.classList.remove('visible');
-    setTimeout(() => { overlay.innerHTML = ''; }, 500);
-  }
-}
-
 function showCompletionOverlay(data) {
   const overlay = document.getElementById('completion-overlay');
   if (!overlay) return;
 
   const m = AppState.get().metrics;
   const appName = data.appName || 'Application';
-  const status = data.status === 'completed' ? 'Build Complete' : 'Build Finished (with issues)';
-  const statusClass = data.status === 'completed' ? 'success' : 'partial';
+  const isSuccess = data.status === 'completed';
+  const status = isSuccess ? 'Build Complete' : 'Build Finished with Issues';
+  const statusClass = isSuccess ? 'success' : 'partial';
 
-  // Grab total elapsed time from the global clock
   const clockVal = document.getElementById('clock-value');
   const totalTime = clockVal ? clockVal.textContent : '';
 
   overlay.innerHTML = `
     <div class="completion-card">
-      <div class="completion-icon ${statusClass}">${data.status === 'completed' ? '\u2713' : '\u26a0'}</div>
+      <button class="completion-close-btn" id="completion-close" title="Close">\u00d7</button>
+      <div class="completion-icon ${statusClass}">${isSuccess ? '\u2713' : '\u26a0'}</div>
       <div class="completion-header">${status}</div>
       <div class="completion-app-name">${appName}</div>
       <div class="completion-metrics">
@@ -95,85 +53,217 @@ function showCompletionOverlay(data) {
         <span>${m.claimsFailed} caught</span>
         ${totalTime ? `<span>${totalTime} total</span>` : ''}
       </div>
-      <button class="completion-launch-btn" id="launch-btn">Launch Application</button>
-      <div class="completion-status" id="launch-status"></div>
+      <div class="completion-actions">
+        <button class="completion-action-btn completion-download-btn" id="completion-download">
+          <span class="completion-action-icon">\u2913</span>
+          Download Project (.zip)
+        </button>
+        <button class="completion-action-btn completion-github-btn" id="completion-github">
+          <span class="completion-action-icon">\u2197</span>
+          Push to GitHub
+        </button>
+      </div>
+      <div class="completion-status" id="completion-status"></div>
     </div>
   `;
   overlay.classList.add('visible');
 
-  document.getElementById('launch-btn')?.addEventListener('click', () => {
-    launchApp(window.__appId);
+  // Close button — dismisses modal, reveals preview + chat
+  document.getElementById('completion-close')?.addEventListener('click', () => {
+    overlay.classList.remove('visible');
+  });
+
+  // Download button — calls existing zip download from preview.js
+  document.getElementById('completion-download')?.addEventListener('click', () => {
+    downloadProject();
+  });
+
+  // GitHub button — starts GitHub export flow
+  document.getElementById('completion-github')?.addEventListener('click', () => {
+    startGitHubExport(appName);
   });
 }
 
-function launchApp(appId) {
-  const btn = document.getElementById('launch-btn');
-  const statusEl = document.getElementById('launch-status');
-  if (btn) {
-    btn.disabled = true;
-    btn.textContent = 'Launching...';
-  }
-  if (statusEl) statusEl.textContent = 'Installing dependencies...';
+/**
+ * GitHub export flow:
+ * 1. Check if user is authenticated via GitHub OAuth
+ * 2. If not, open OAuth popup
+ * 3. Once authenticated, show repo form and push
+ */
+async function startGitHubExport(appName) {
+  const statusEl = document.getElementById('completion-status');
+  const githubBtn = document.getElementById('completion-github');
 
-  const headers = { 'Content-Type': 'application/json' };
-  if (apiKey) headers['Authorization'] = `Bearer ${apiKey}`;
+  // GitHub auth endpoints live on the UI server (same origin), not the API server
+  const uiOrigin = window.location.origin;
 
-  fetch(`${apiBase}/api/v1/app/${appId}/launch`, {
-    method: 'POST',
-    headers,
-  }).then(res => {
-    if (!res.ok) {
-      if (statusEl) statusEl.textContent = 'Launch failed. Check server logs.';
+  // Check auth status
+  if (statusEl) statusEl.textContent = 'Checking GitHub connection...';
+
+  try {
+    const res = await fetch(`${uiOrigin}/api/v1/auth/github/status`);
+    const authData = await res.json();
+
+    if (!authData.configured) {
+      if (statusEl) statusEl.textContent = 'GitHub not configured. Set GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET env vars, then restart the demo.';
       return;
     }
-    // Start polling for launch status
-    pollLaunchStatus(appId);
-  }).catch(err => {
-    console.error('[Launch] Error:', err);
-    if (statusEl) statusEl.textContent = 'Launch error: ' + err.message;
+
+    if (authData.authenticated) {
+      showGitHubForm(appName, authData.username);
+    } else {
+      // Open OAuth popup
+      if (statusEl) statusEl.textContent = 'Opening GitHub authorization...';
+      const popup = window.open(
+        `${uiOrigin}/api/v1/auth/github`,
+        'github-oauth',
+        'width=600,height=700,menubar=no,toolbar=no'
+      );
+
+      // Poll for auth completion
+      const pollAuth = setInterval(async () => {
+        try {
+          if (popup && popup.closed) {
+            clearInterval(pollAuth);
+            const checkRes = await fetch(`${uiOrigin}/api/v1/auth/github/status`);
+            const checkData = await checkRes.json();
+            if (checkData.authenticated) {
+              showGitHubForm(appName, checkData.username);
+            } else {
+              if (statusEl) statusEl.textContent = 'GitHub authorization cancelled. You can still download the zip.';
+            }
+            return;
+          }
+        } catch { /* keep polling */ }
+      }, 1000);
+    }
+  } catch (err) {
+    console.error('[GitHub] Auth check failed:', err);
+    if (statusEl) statusEl.textContent = 'GitHub connection unavailable. Download the zip instead.';
+  }
+}
+
+function showGitHubForm(appName, username) {
+  const statusEl = document.getElementById('completion-status');
+  if (!statusEl) return;
+
+  const slugName = appName
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '') || 'my-app';
+
+  statusEl.innerHTML = `
+    <div class="github-form">
+      <div class="github-form-row">
+        <label>Repository</label>
+        <input type="text" id="github-repo-name" value="${slugName}" placeholder="repo-name">
+      </div>
+      <div class="github-form-row">
+        <label>Visibility</label>
+        <label class="github-toggle">
+          <input type="checkbox" id="github-private" checked>
+          <span>Private</span>
+        </label>
+      </div>
+      <div class="github-form-row">
+        <span class="github-user">Pushing as ${username}</span>
+        <button class="completion-action-btn completion-github-push-btn" id="github-push">Create & Push</button>
+      </div>
+    </div>
+  `;
+
+  document.getElementById('github-push')?.addEventListener('click', () => {
+    executeGitHubPush();
   });
 }
 
-function pollLaunchStatus(appId) {
-  const statusEl = document.getElementById('launch-status');
-  const btn = document.getElementById('launch-btn');
+async function executeGitHubPush() {
+  const repoNameEl = document.getElementById('github-repo-name');
+  const privateEl = document.getElementById('github-private');
+  const pushBtn = document.getElementById('github-push');
+  const statusEl = document.getElementById('completion-status');
 
-  const headers = {};
-  if (apiKey) headers['Authorization'] = `Bearer ${apiKey}`;
+  if (!repoNameEl) return;
 
-  const poll = setInterval(() => {
-    fetch(`${apiBase}/api/v1/app/${appId}/launch`, { headers })
-      .then(res => res.json())
-      .then(data => {
-        if (data.status === 'installing') {
-          if (statusEl) statusEl.textContent = 'Installing dependencies...';
-        } else if (data.status === 'starting') {
-          if (statusEl) statusEl.textContent = 'Starting dev server...';
-        } else if (data.status === 'ready') {
-          clearInterval(poll);
-          if (btn) {
-            btn.textContent = 'Open Application';
-            btn.disabled = false;
-            btn.onclick = () => window.open(data.url, '_blank');
-            btn.classList.add('ready');
-          }
-          if (statusEl) {
-            statusEl.innerHTML = `<a href="${data.url}" target="_blank" class="launch-url">${data.url}</a>`;
-          }
-          AppState.addLog({ level: 'info', message: `Application ready at ${data.url}` });
-        } else if (data.status === 'failed') {
-          clearInterval(poll);
-          if (btn) {
-            btn.textContent = 'Launch Failed';
-            btn.disabled = true;
-          }
-          if (statusEl) statusEl.textContent = data.error || 'Launch failed';
-        }
-      })
-      .catch(() => {
-        // Ignore polling errors, keep trying
-      });
-  }, 2000);
+  const repoName = repoNameEl.value.trim();
+  if (!repoName) return;
+
+  const isPrivate = privateEl?.checked ?? true;
+
+  if (pushBtn) {
+    pushBtn.disabled = true;
+    pushBtn.textContent = 'Creating repo...';
+  }
+
+  try {
+    // Collect files from WebContainer
+    const files = await collectProjectFiles();
+    if (files.length === 0) {
+      if (statusEl) statusEl.innerHTML = '<span class="github-error">No files found in project.</span>';
+      return;
+    }
+
+    if (pushBtn) pushBtn.textContent = `Pushing ${files.length} files...`;
+
+    // Export endpoint lives on the UI server (same origin)
+    const uiOrigin = window.location.origin;
+    const res = await fetch(`${uiOrigin}/api/v1/app/${window.__appId}/export/github`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ repoName, private: isPrivate, files }),
+    });
+
+    const result = await res.json();
+
+    if (result.success && result.repoUrl) {
+      if (statusEl) {
+        statusEl.innerHTML = `
+          <div class="github-success">
+            Pushed to <a href="${result.repoUrl}" target="_blank" class="github-link">${result.repoUrl}</a>
+          </div>
+        `;
+      }
+    } else {
+      if (statusEl) {
+        statusEl.innerHTML = `<span class="github-error">${result.error || 'Push failed. Try downloading the zip instead.'}</span>`;
+      }
+    }
+  } catch (err) {
+    console.error('[GitHub] Push failed:', err);
+    if (statusEl) {
+      statusEl.innerHTML = `<span class="github-error">Push failed: ${err.message}</span>`;
+    }
+  }
+
+  if (pushBtn) {
+    pushBtn.disabled = false;
+    pushBtn.textContent = 'Create & Push';
+  }
+}
+
+/**
+ * Append a compact activity item to the chat messages panel.
+ * Used during build to show real-time progress.
+ */
+function appendActivityItem(icon, text, className) {
+  const messagesEl = document.getElementById('chat-messages');
+  if (!messagesEl) return;
+
+  const item = document.createElement('div');
+  item.className = `activity-item ${className || ''}`;
+
+  const iconSpan = document.createElement('span');
+  iconSpan.className = 'activity-icon';
+  iconSpan.textContent = icon;
+  item.appendChild(iconSpan);
+
+  const textSpan = document.createElement('span');
+  textSpan.className = 'activity-text';
+  textSpan.textContent = text;
+  item.appendChild(textSpan);
+
+  messagesEl.appendChild(item);
+  messagesEl.scrollTop = messagesEl.scrollHeight;
 }
 
 // Track whether completion overlay has been shown
@@ -194,6 +284,19 @@ function handleSSEEvent(type, data) {
       if (phaseName) {
         AppState.update({ phase: phaseName });
 
+        // Activity feed: show phase changes
+        const featureName = phase.featureName || phase.featureId || data.currentFeature;
+        const phaseLabel = phaseName.replace(/_/g, ' ');
+        if (phaseName === 'provisioning_supabase') {
+          appendActivityItem('\u2601', 'Provisioning Supabase database...', 'activity-phase');
+        } else if (phaseName === 'supabase_migrations') {
+          appendActivityItem('\u2601', 'Pushing database migrations...', 'activity-phase');
+        } else if (featureName) {
+          appendActivityItem('\u25b6', `${phaseLabel} \u2014 ${featureName}`, 'activity-phase');
+        } else if (!['completed', 'failed'].includes(phaseName)) {
+          appendActivityItem('\u25b6', phaseLabel, 'activity-phase');
+        }
+
         // Extract feature info for voice narration
         if (phase.featureId || phase.featureName || data.currentFeature) {
           AppState.update({
@@ -220,10 +323,7 @@ function handleSSEEvent(type, data) {
           setTimeout(() => {
             if (!completionShown) {
               console.log('[SSE] Showing completion overlay from progress fallback');
-              const input = document.getElementById('prompt-input');
-              const btn = document.getElementById('submit-btn');
-              if (input) input.disabled = false;
-              if (btn) btn.disabled = false;
+              unlockChat();
               showCompletionOverlay({
                 status: phaseName,
                 appName: data.appName || data.currentFeature || 'Application',
@@ -243,6 +343,12 @@ function handleSSEEvent(type, data) {
       } else {
         AppState.addTask(data);
       }
+      // Activity feed: show task completion
+      if (data.status === 'completed' && data.claims) {
+        const passed = data.claims.passed || data.claims.totalClaims - (data.claims.failed || 0) || 0;
+        const failed = data.claims.failed || 0;
+        appendActivityItem('\u2713', `${data.name || data.id} (${passed} claims, ${failed} failed)`, failed > 0 ? 'activity-warn' : 'activity-success');
+      }
       // Extract per-feature claim counts into verification metrics
       if (data.claims) {
         const c = data.claims;
@@ -258,6 +364,12 @@ function handleSSEEvent(type, data) {
       break;
     }
     case 'verification': {
+      // Activity feed: show verification results
+      if (data.passed_count !== undefined || data.failed_count !== undefined) {
+        const p = data.passed_count || 0;
+        const f = data.failed_count || 0;
+        appendActivityItem('\u2714', `Verification: ${p} passed, ${f} failed`, f > 0 ? 'activity-warn' : 'activity-success');
+      }
       // Add the phase-level verification result
       AppState.addVerification({
         claim: data.claim,
@@ -281,6 +393,12 @@ function handleSSEEvent(type, data) {
         language: data.language || 'typescript',
         content: data.content
       });
+      // Activity feed: show generated file
+      appendActivityItem('+', data.path, 'activity-file');
+      const previewPanel = document.getElementById('preview-panel');
+      if (previewPanel && !previewPanel.classList.contains('live')) {
+        previewPanel.classList.add('live');
+      }
       break;
     }
     case 'agent_status': {
@@ -298,7 +416,7 @@ function handleSSEEvent(type, data) {
     case 'plan_questions': {
       AppState.update({ phase: 'plan_questioning' });
       AppState.addLog({ level: 'info', message: `Requirements round ${data.round}: ${data.questions.length} questions (${Math.round(data.confidence * 100)}% confidence)` });
-      showQuestions(data);
+      // Questions now handled via chat_message events
       break;
     }
     case 'plan_readiness': {
@@ -323,12 +441,14 @@ function handleSSEEvent(type, data) {
       break;
     }
     case 'plan_summary': {
-      // Architecture plan arrived — show it in the UI overlay (questions are done)
-      hideQuestions();
-      closeChat();
+      // Architecture plan arrived — show summary in chat panel
       AppState.update({ planSummary: data });
+      appendActivityItem('\u2692', `Architecture: ${data.featureCount} features, ${data.apiRouteCount} routes, ${data.pageCount} pages`, 'activity-phase');
       AppState.addLog({ level: 'info', message: `Architecture: ${data.featureCount} features, ${data.apiRouteCount} routes, ${data.pageCount} pages` });
-      showPlanOverlay(data);
+      const featureList = (data.features || []).map(f => `${f.name || f.id} (${f.complexity})`).join(', ');
+      addArchitectMessage({
+        message: `Architecture plan ready: ${data.featureCount} features, ${data.apiRouteCount} routes, ${data.pageCount} pages. ${featureList ? 'Features: ' + featureList + '.' : ''} Auto-approving...`,
+      });
       break;
     }
     case 'awaiting_approval': {
@@ -346,9 +466,12 @@ function handleSSEEvent(type, data) {
       const ftPhase = data.phase || 'functional_testing';
       AppState.update({ phase: ftPhase });
       if (data.passedCount !== undefined) {
-        AppState.addLog({ level: 'info', message: `Functional: ${data.passedCount} passed, ${data.failedCount} failed` });
+        const failed = data.failedCount || 0;
+        appendActivityItem('\u2731', `Testing: ${data.passedCount} passed, ${failed} failed`, failed > 0 ? 'activity-warn' : 'activity-success');
+        AppState.addLog({ level: 'info', message: `Functional: ${data.passedCount} passed, ${failed} failed` });
       }
       if (data.failureCount) {
+        appendActivityItem('\u21bb', `Repairing ${data.failureCount} failures (attempt ${data.attempt})`, 'activity-warn');
         AppState.addLog({ level: 'warn', message: `Repairing ${data.failureCount} test failures (attempt ${data.attempt})` });
       }
       break;
@@ -356,11 +479,9 @@ function handleSSEEvent(type, data) {
     case 'error': {
       AppState.update({ phase: 'failed' });
       AppState.addLog({ level: 'error', message: data.message || data.error || 'Unknown error' });
+      appendActivityItem('\u2718', data.message || data.error || 'Build failed', 'activity-error');
+      unlockChat();
       if (!completionShown) {
-        const input = document.getElementById('prompt-input');
-        const btn = document.getElementById('submit-btn');
-        if (input) input.disabled = false;
-        if (btn) btn.disabled = false;
         showCompletionOverlay({ status: 'failed', appName: 'Application' });
         completionShown = true;
       }
@@ -372,23 +493,26 @@ function handleSSEEvent(type, data) {
       if (data.metrics) {
         AppState.update({ metrics: data.metrics });
       }
-      // Re-enable input
-      const input = document.getElementById('prompt-input');
-      const btn = document.getElementById('submit-btn');
-      if (input) input.disabled = false;
-      if (btn) btn.disabled = false;
-      // Show completion overlay with launch button
+      appendActivityItem('\u2713', 'Build complete', 'activity-success');
+      unlockChat();
       if (!completionShown) {
         showCompletionOverlay(data);
         completionShown = true;
       }
-      // Now safe to disconnect — overlay is rendered
       disconnect();
       break;
     }
   }
 }
 
+function updateStatusBar() {
+  const state = AppState.get();
+  const phaseEl = document.getElementById('status-phase');
+  const tasksEl = document.getElementById('status-tasks');
+  if (phaseEl) phaseEl.textContent = `phase: ${state.phase}`;
+  if (tasksEl) tasksEl.textContent = `tasks: ${state.metrics.tasksComplete}/${state.metrics.totalTasks}`;
+}
+
 function connect(appId) {
   if (eventSource) {
     eventSource.close();
@@ -459,13 +583,16 @@ export function initSSEClient(base, key) {
   apiBase = base || '';
   apiKey = key || '';
 
-  // Share config with question-cards module
-  configureQuestionCards(apiBase, apiKey);
+  // Share config with chat module
   configureChat(apiBase, apiKey);
 
   // Expose connect for manual invocation from bootstrap
   window.__connectSSE = connect;
 
+  // Status bar updates
+  AppState.on('phase_change', updateStatusBar);
+  AppState.on('metric_update', updateStatusBar);
+
   // Reset completionShown on new runs
   AppState.on('reset', () => {
     completionShown = false;

package/demo/js/state.js

@@ -18,7 +18,10 @@ const AppState = (() => {
       claimsFailed: 0,
       filesGenerated: 0
     },
-    log: []
+    log: [],
+    containerState: 'cold',   // WebContainer lifecycle: cold|warm|building|verifying|done
+    previewUrl: null,         // iframe URL from WebContainer server-ready event
+    fileQueue: []             // files queued before container is ready
   };
 
   function on(event, fn) {
@@ -45,6 +48,7 @@ const AppState = (() => {
 
   function update(partial) {
     const oldPhase = state.phase;
+    const oldContainerState = state.containerState;
 
     // Merge top-level primitives and objects
     for (const key of Object.keys(partial)) {
@@ -61,6 +65,9 @@ const AppState = (() => {
     if (partial.phase !== undefined && partial.phase !== oldPhase) {
       emit('phase_change', { from: oldPhase, to: state.phase });
     }
+    if (partial.containerState !== undefined && partial.containerState !== oldContainerState) {
+      emit('container_state_change', { from: oldContainerState, to: state.containerState });
+    }
     if (partial.currentTask !== undefined) {
       emit('task_update', state.currentTask);
     }
@@ -151,6 +158,9 @@ const AppState = (() => {
     state.codeFiles = [];
     state.metrics = { tasksComplete: 0, totalTasks: 0, claimsVerified: 0, claimsFailed: 0, filesGenerated: 0 };
     state.log = [];
+    state.containerState = 'cold';
+    state.previewUrl = null;
+    state.fileQueue = [];
     emit('reset', null);
   }