tryassay 0.21.1 → 0.22.0

package/demo/js/question-cards.js

@@ -0,0 +1,207 @@
+// question-cards.js — Interactive question cards for plan mode
+// Renders in the #plan-overlay when the backend sends plan_questions events
+
+const AppState = window.AppState;
+
+let currentSessionId = null;
+let currentSelections = {}; // { questionId: [selectedOptionLabels] }
+let currentQuestions = [];
+let sseConfig = { apiBase: '', apiKey: '' };
+
+/**
+ * Configure API connection (called from sse-client.js)
+ */
+export function configureQuestionCards(apiBase, apiKey) {
+  sseConfig.apiBase = apiBase || '';
+  sseConfig.apiKey = apiKey || '';
+}
+
+/**
+ * Show question cards in the plan overlay.
+ * Called when a plan_questions SSE event arrives.
+ */
+export function showQuestions({ questions, round, confidence, sessionId }) {
+  const overlay = document.getElementById('plan-overlay');
+  if (!overlay) return;
+
+  currentSessionId = sessionId;
+  currentQuestions = questions;
+  currentSelections = {};
+
+  // Initialize selections for each question
+  for (const q of questions) {
+    currentSelections[q.id] = [];
+  }
+
+  const questionsHTML = questions.map(q => renderQuestion(q)).join('');
+
+  overlay.innerHTML = `
+    <div class="plan-card plan-questions-card">
+      <div class="plan-questions-header">
+        <div class="plan-header">Refine Requirements</div>
+        <div class="plan-round">Round ${round} of 3</div>
+      </div>
+      <div class="confidence-meter">
+        <div class="confidence-bar">
+          <div class="confidence-fill" style="width: ${Math.round(confidence * 100)}%"></div>
+        </div>
+        <div class="confidence-label">Requirements Clarity: ${Math.round(confidence * 100)}%</div>
+      </div>
+      <div class="plan-questions">${questionsHTML}</div>
+      <button class="confirm-selections-btn" id="confirm-selections-btn" disabled>Confirm Selections</button>
+    </div>
+  `;
+
+  overlay.classList.add('visible');
+
+  // Bind option click handlers
+  overlay.querySelectorAll('.question-option').forEach(el => {
+    el.addEventListener('click', () => handleOptionClick(el));
+  });
+
+  // Bind confirm button
+  document.getElementById('confirm-selections-btn')?.addEventListener('click', handleConfirm);
+}
+
+/**
+ * Hide question cards and clear the overlay.
+ */
+export function hideQuestions() {
+  const overlay = document.getElementById('plan-overlay');
+  if (overlay) {
+    overlay.classList.remove('visible');
+    setTimeout(() => { overlay.innerHTML = ''; }, 500);
+  }
+  currentSelections = {};
+  currentQuestions = [];
+}
+
+// ── Internal ──
+
+function renderQuestion(q) {
+  const hint = q.multiSelect ? 'Select all that apply' : 'Select one';
+  const optionsHTML = q.options.map(opt => `
+    <div class="question-option"
+         data-question-id="${q.id}"
+         data-option-label="${escapeAttr(opt.label)}"
+         data-multi="${q.multiSelect}">
+      <div class="option-label">${escapeHTML(opt.label)}</div>
+      <div class="option-description">${escapeHTML(opt.description)}</div>
+    </div>
+  `).join('');
+
+  return `
+    <div class="question-card" data-question-id="${q.id}">
+      <div class="question-header">${escapeHTML(q.header)}</div>
+      <div class="question-text">${escapeHTML(q.question)}</div>
+      <div class="select-hint">${hint}</div>
+      <div class="question-options">${optionsHTML}</div>
+    </div>
+  `;
+}
+
+function handleOptionClick(el) {
+  const questionId = el.dataset.questionId;
+  const label = el.dataset.optionLabel;
+  const isMulti = el.dataset.multi === 'true';
+
+  if (isMulti) {
+    // Toggle this option
+    el.classList.toggle('selected');
+    const idx = currentSelections[questionId].indexOf(label);
+    if (idx >= 0) {
+      currentSelections[questionId].splice(idx, 1);
+    } else {
+      currentSelections[questionId].push(label);
+    }
+  } else {
+    // Single select — deselect siblings, select this one
+    const siblings = document.querySelectorAll(`.question-option[data-question-id="${questionId}"]`);
+    siblings.forEach(s => s.classList.remove('selected'));
+    el.classList.add('selected');
+    currentSelections[questionId] = [label];
+  }
+
+  updateConfirmButton();
+}
+
+function updateConfirmButton() {
+  const btn = document.getElementById('confirm-selections-btn');
+  if (!btn) return;
+
+  // All single-select questions must have exactly one answer
+  const allSingleAnswered = currentQuestions
+    .filter(q => !q.multiSelect)
+    .every(q => currentSelections[q.id]?.length > 0);
+
+  btn.disabled = !allSingleAnswered;
+}
+
+async function handleConfirm() {
+  const btn = document.getElementById('confirm-selections-btn');
+  if (btn) {
+    btn.disabled = true;
+    btn.textContent = 'Submitting...';
+  }
+
+  const answers = Object.entries(currentSelections).map(([questionId, selectedOptions]) => ({
+    questionId,
+    selectedOptions,
+  }));
+
+  const headers = { 'Content-Type': 'application/json' };
+  if (sseConfig.apiKey) headers['Authorization'] = `Bearer ${sseConfig.apiKey}`;
+
+  const sessionId = currentSessionId || window.__appId;
+
+  try {
+    const res = await fetch(`${sseConfig.apiBase}/api/v1/app/${sessionId}/answers`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ answers }),
+    });
+
+    if (!res.ok) {
+      console.error('[QuestionCards] Submit failed:', res.status);
+      AppState.addLog({ level: 'error', message: `Failed to submit answers: ${res.status}` });
+      if (btn) {
+        btn.disabled = false;
+        btn.textContent = 'Confirm Selections';
+      }
+      return;
+    }
+  } catch (err) {
+    console.error('[QuestionCards] Submit error:', err);
+    AppState.addLog({ level: 'error', message: `Submit error: ${err.message}` });
+    if (btn) {
+      btn.disabled = false;
+      btn.textContent = 'Confirm Selections';
+    }
+    return;
+  }
+
+  // Show refining state
+  const overlay = document.getElementById('plan-overlay');
+  if (overlay) {
+    overlay.innerHTML = `
+      <div class="plan-card">
+        <div class="refining-state">
+          <div class="refining-spinner"></div>
+          <div>Refining requirements...</div>
+        </div>
+      </div>
+    `;
+  }
+
+  AppState.addLog({ level: 'info', message: 'Answers submitted. Refining requirements...' });
+}
+
+function escapeHTML(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+function escapeAttr(str) {
+  return str.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}

package/demo/js/sse-client.js

@@ -0,0 +1,473 @@
+// 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';
+
+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...' });
+      hidePlanOverlay();
+    } else {
+      console.warn('[SSE] Auto-approve failed:', res.status);
+    }
+  }).catch(err => {
+    console.error('[SSE] Auto-approve error:', err);
+  });
+}
+
+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';
+
+  // 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>
+      <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>
+      <button class="completion-launch-btn" id="launch-btn">Launch Application</button>
+      <div class="completion-status" id="launch-status"></div>
+    </div>
+  `;
+  overlay.classList.add('visible');
+
+  document.getElementById('launch-btn')?.addEventListener('click', () => {
+    launchApp(window.__appId);
+  });
+}
+
+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...';
+
+  const headers = { 'Content-Type': 'application/json' };
+  if (apiKey) headers['Authorization'] = `Bearer ${apiKey}`;
+
+  fetch(`${apiBase}/api/v1/app/${appId}/launch`, {
+    method: 'POST',
+    headers,
+  }).then(res => {
+    if (!res.ok) {
+      if (statusEl) statusEl.textContent = 'Launch failed. Check server logs.';
+      return;
+    }
+    // Start polling for launch status
+    pollLaunchStatus(appId);
+  }).catch(err => {
+    console.error('[Launch] Error:', err);
+    if (statusEl) statusEl.textContent = 'Launch error: ' + err.message;
+  });
+}
+
+function pollLaunchStatus(appId) {
+  const statusEl = document.getElementById('launch-status');
+  const btn = document.getElementById('launch-btn');
+
+  const headers = {};
+  if (apiKey) headers['Authorization'] = `Bearer ${apiKey}`;
+
+  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);
+}
+
+// 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 });
+
+        // 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');
+              const input = document.getElementById('prompt-input');
+              const btn = document.getElementById('submit-btn');
+              if (input) input.disabled = false;
+              if (btn) btn.disabled = false;
+              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);
+      }
+      // 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': {
+      // 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
+      });
+      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)` });
+      showQuestions(data);
+      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 it in the UI overlay (questions are done)
+      hideQuestions();
+      closeChat();
+      AppState.update({ planSummary: data });
+      AppState.addLog({ level: 'info', message: `Architecture: ${data.featureCount} features, ${data.apiRouteCount} routes, ${data.pageCount} pages` });
+      showPlanOverlay(data);
+      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) {
+        AppState.addLog({ level: 'info', message: `Functional: ${data.passedCount} passed, ${data.failedCount} failed` });
+      }
+      if (data.failureCount) {
+        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' });
+      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;
+      }
+      disconnect();
+      break;
+    }
+    case 'complete': {
+      AppState.update({ phase: 'completed' });
+      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
+      if (!completionShown) {
+        showCompletionOverlay(data);
+        completionShown = true;
+      }
+      // Now safe to disconnect — overlay is rendered
+      disconnect();
+      break;
+    }
+  }
+}
+
+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 question-cards module
+  configureQuestionCards(apiBase, apiKey);
+  configureChat(apiBase, apiKey);
+
+  // Expose connect for manual invocation from bootstrap
+  window.__connectSSE = connect;
+
+  // Reset completionShown on new runs
+  AppState.on('reset', () => {
+    completionShown = false;
+  });
+}