tryassay 0.21.2 → 0.22.1

package/demo/js/sse-client.js

@@ -0,0 +1,600 @@
+// sse-client.js — EventSource to AppState bridge
+// Connects to the Assay API SSE stream and maps events to state updates
+
+import { configureChat, addArchitectMessage, lockChat, unlockChat } from './chat.js';
+import { downloadProject, collectProjectFiles } from './preview.js';
+
+const AppState = window.AppState;
+
+let eventSource = null;
+let apiBase = '';
+let apiKey = '';
+
+function autoApprovePlan(appId) {
+  const headers = { 'Content-Type': 'application/json' };
+  if (apiKey) headers['Authorization'] = `Bearer ${apiKey}`;
+  fetch(`${apiBase}/api/v1/app/${appId}/approve`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ decision: 'approved' }),
+  }).then(res => {
+    if (res.ok) {
+      AppState.addLog({ level: 'info', message: 'Plan approved — building...' });
+    } else {
+      console.warn('[SSE] Auto-approve failed:', res.status);
+    }
+  }).catch(err => {
+    console.error('[SSE] Auto-approve error:', err);
+  });
+}
+
+function showCompletionOverlay(data) {
+  const overlay = document.getElementById('completion-overlay');
+  if (!overlay) return;
+
+  const m = AppState.get().metrics;
+  const appName = data.appName || 'Application';
+  const isSuccess = data.status === 'completed';
+  const status = isSuccess ? 'Build Complete' : 'Build Finished with Issues';
+  const statusClass = isSuccess ? 'success' : 'partial';
+
+  const clockVal = document.getElementById('clock-value');
+  const totalTime = clockVal ? clockVal.textContent : '';
+
+  overlay.innerHTML = `
+    <div class="completion-card">
+      <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">
+        <span>${m.filesGenerated} files</span>
+        <span>${m.claimsVerified} claims verified</span>
+        <span>${m.claimsFailed} caught</span>
+        ${totalTime ? `<span>${totalTime} total</span>` : ''}
+      </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');
+
+  // 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);
+  });
+}
+
+/**
+ * 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');
+
+  // GitHub auth endpoints live on the UI server (same origin), not the API server
+  const uiOrigin = window.location.origin;
+
+  // 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;
+    }
+
+    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();
+  });
+}
+
+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');
+
+  if (!repoNameEl) return;
+
+  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
+let completionShown = false;
+
+function handleSSEEvent(type, data) {
+  switch (type) {
+    case 'connected': {
+      console.log('[SSE] Stream connected:', data);
+      AppState.addLog({ level: 'info', message: `Connected to session: ${data.sessionId || 'unknown'}` });
+      completionShown = false;
+      break;
+    }
+    case 'progress': {
+      // The orchestrator emits AppCreateProgress with a phase object
+      const phase = data.phase;
+      const phaseName = typeof phase === 'string' ? phase : phase?.phase;
+      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({
+            currentTask: {
+              name: phase.featureName || phase.featureId || data.currentFeature,
+              status: 'in_progress'
+            }
+          });
+        }
+
+        // If phase reports counts, update metrics
+        if (data.totalFeatures) {
+          AppState.update({
+            metrics: {
+              totalTasks: data.totalFeatures,
+              tasksComplete: data.completedFeatures?.length || 0,
+            }
+          });
+        }
+
+        // Fallback: if progress says completed/failed but we haven't shown the overlay yet,
+        // wait briefly for the 'complete' event, then show overlay from whatever data we have
+        if ((phaseName === 'completed' || phaseName === 'failed') && !completionShown) {
+          setTimeout(() => {
+            if (!completionShown) {
+              console.log('[SSE] Showing completion overlay from progress fallback');
+              unlockChat();
+              showCompletionOverlay({
+                status: phaseName,
+                appName: data.appName || data.currentFeature || 'Application',
+              });
+              completionShown = true;
+              disconnect();
+            }
+          }, 2000);
+        }
+      }
+      break;
+    }
+    case 'task_update': {
+      const existing = AppState.get().tasks.find(t => t.id === data.id);
+      if (existing) {
+        AppState.updateTask(data.id, 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;
+        const passed = c.passed || c.totalClaims - (c.failed || 0) || 0;
+        const failed = c.failed || 0;
+        for (let i = 0; i < passed; i++) {
+          AppState.addVerification({ claim: `${data.name || data.id}: claim ${i + 1}`, result: 'pass', method: 'formal' });
+        }
+        for (let i = 0; i < failed; i++) {
+          AppState.addVerification({ claim: `${data.name || data.id}: failed claim ${i + 1}`, result: 'fail', method: 'formal' });
+        }
+      }
+      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,
+        result: data.passed ? 'pass' : 'fail',
+        method: data.method || data.verification_method || 'llm'
+      });
+      // If it includes passed/failed counts, synthesize individual claim metrics
+      if (data.passed_count > 0 || data.failed_count > 0) {
+        for (let i = 0; i < (data.passed_count || 0); i++) {
+          AppState.addVerification({ claim: `${data.phase}: check ${i + 1}`, result: 'pass', method: 'formal' });
+        }
+        for (let i = 0; i < (data.failed_count || 0); i++) {
+          AppState.addVerification({ claim: `${data.phase}: failed check ${i + 1}`, result: 'fail', method: 'formal' });
+        }
+      }
+      break;
+    }
+    case 'code_generated': {
+      AppState.addCodeFile({
+        path: data.path,
+        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': {
+      const agents = Array.isArray(data.agents) ? data.agents : (data.name ? [data] : []);
+      for (const agent of agents) {
+        const existing = AppState.get().agents.find(a => a.name === agent.name);
+        if (existing) {
+          AppState.updateAgent(agent.name, agent);
+        } else {
+          AppState.addAgent(agent);
+        }
+      }
+      break;
+    }
+    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)` });
+      // Questions now handled via chat_message events
+      break;
+    }
+    case 'plan_readiness': {
+      if (data.ready) {
+        AppState.addLog({ level: 'success', message: `Requirements confirmed (${Math.round(data.confidence * 100)}% confidence): ${data.summary}` });
+      } else {
+        const gapList = data.gaps.length > 0 ? data.gaps.join(', ') : 'unclear';
+        AppState.addLog({ level: 'info', message: `Still gathering requirements (${Math.round(data.confidence * 100)}% confidence). Gaps: ${gapList}` });
+      }
+      break;
+    }
+    case 'chat_message': {
+      AppState.update({ phase: 'chat' });
+      addArchitectMessage(data);
+      if (data.readiness) {
+        if (data.readiness.ready) {
+          AppState.addLog({ level: 'success', message: `Ready to build (${Math.round(data.readiness.confidence * 100)}%): ${data.readiness.summary}` });
+        } else if (data.readiness.gaps && data.readiness.gaps.length > 0) {
+          AppState.addLog({ level: 'info', message: `Gathering requirements (${Math.round(data.readiness.confidence * 100)}%). Gaps: ${data.readiness.gaps.join(', ')}` });
+        }
+      }
+      break;
+    }
+    case 'plan_summary': {
+      // 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` });
+      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': {
+      // Pipeline is blocked waiting for approval — auto-approve after showing plan
+      AppState.update({ phase: 'requirements_refining' });
+      AppState.addLog({ level: 'info', message: 'Plan ready — auto-approving...' });
+      // Auto-approve after 4 seconds so audience can see the plan
+      setTimeout(() => {
+        autoApprovePlan(data.sessionId || window.__appId);
+      }, 4000);
+      break;
+    }
+    case 'functional_test': {
+      // Functional test progress
+      const ftPhase = data.phase || 'functional_testing';
+      AppState.update({ phase: ftPhase });
+      if (data.passedCount !== undefined) {
+        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;
+    }
+    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) {
+        showCompletionOverlay({ status: 'failed', appName: 'Application' });
+        completionShown = true;
+      }
+      disconnect();
+      break;
+    }
+    case 'complete': {
+      AppState.update({ phase: 'completed' });
+      if (data.metrics) {
+        AppState.update({ metrics: data.metrics });
+      }
+      appendActivityItem('\u2713', 'Build complete', 'activity-success');
+      unlockChat();
+      if (!completionShown) {
+        showCompletionOverlay(data);
+        completionShown = true;
+      }
+      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();
+    eventSource = null;
+  }
+
+  const url = apiKey
+    ? `${apiBase}/api/v1/app/${appId}/stream?key=${encodeURIComponent(apiKey)}`
+    : `${apiBase}/api/v1/app/${appId}/stream`;
+  console.log('[SSE] Connecting to:', url);
+  eventSource = new EventSource(url);
+
+  // Listen for named event types
+  const eventTypes = [
+    'connected', 'progress', 'task_update', 'verification',
+    'code_generated', 'agent_status', 'error', 'complete',
+    'plan_summary', 'awaiting_approval', 'functional_test',
+    'plan_questions',
+    'plan_readiness',
+    'chat_message'
+  ];
+
+  for (const type of eventTypes) {
+    eventSource.addEventListener(type, (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        handleSSEEvent(type, data);
+      } catch (err) {
+        console.error(`[SSE] Failed to parse ${type} event:`, err);
+      }
+    });
+  }
+
+  // Also handle unnamed messages (default event type)
+  eventSource.onmessage = (event) => {
+    try {
+      const data = JSON.parse(event.data);
+      // Try to infer the type from the data shape
+      if (data.phase) handleSSEEvent('progress', data);
+      else if (data.claim) handleSSEEvent('verification', data);
+      else if (data.path && data.content) handleSSEEvent('code_generated', data);
+      else if (data.error) handleSSEEvent('error', data);
+    } catch (err) {
+      console.error('[SSE] Failed to parse message:', err);
+    }
+  };
+
+  eventSource.onopen = () => {
+    console.log('[SSE] Connected successfully');
+  };
+
+  eventSource.onerror = (err) => {
+    console.error('[SSE] Connection error:', err);
+    if (eventSource.readyState === EventSource.CLOSED) {
+      console.warn('[SSE] Connection closed. Check API server and auth key.');
+    }
+  };
+}
+
+function disconnect() {
+  if (eventSource) {
+    eventSource.close();
+    eventSource = null;
+  }
+}
+
+export function initSSEClient(base, key) {
+  apiBase = base || '';
+  apiKey = key || '';
+
+  // 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;
+  });
+}