tryassay 0.21.2 → 0.22.1

package/demo/js/code-panel.js

@@ -0,0 +1,206 @@
+// code-panel.js — Bottom streaming code display with typewriter effect
+// Subscribes to AppState code_generated events, renders tabs + syntax-highlighted code
+
+const files = [];       // { path, code }
+let activeIndex = -1;
+let typewriterRaf = 0;  // requestAnimationFrame ID
+
+const KEYWORDS = new Set([
+  'const', 'let', 'var', 'function', 'return', 'import', 'export', 'from',
+  'if', 'else', 'async', 'await', 'class', 'extends', 'new', 'this',
+  'throw', 'try', 'catch', 'typeof', 'interface', 'type'
+]);
+
+const BUILDING_PHASES = new Set(['building_feature', 'scaffolding']);
+
+function highlightSyntax(code) {
+  let result = '';
+  let i = 0;
+  const len = code.length;
+
+  while (i < len) {
+    // Comments: // to end of line
+    if (code[i] === '/' && code[i + 1] === '/') {
+      const end = code.indexOf('\n', i);
+      const slice = end === -1 ? code.slice(i) : code.slice(i, end);
+      result += `<span class="comment">${escapeHtml(slice)}</span>`;
+      i += slice.length;
+      continue;
+    }
+
+    // Strings: single or double quoted
+    if (code[i] === '"' || code[i] === "'") {
+      const quote = code[i];
+      let j = i + 1;
+      while (j < len && code[j] !== quote) {
+        if (code[j] === '\\') j++; // skip escaped chars
+        j++;
+      }
+      j++; // include closing quote
+      result += `<span class="string">${escapeHtml(code.slice(i, j))}</span>`;
+      i = j;
+      continue;
+    }
+
+    // Template literals
+    if (code[i] === '`') {
+      let j = i + 1;
+      while (j < len && code[j] !== '`') {
+        if (code[j] === '\\') j++;
+        j++;
+      }
+      j++;
+      result += `<span class="string">${escapeHtml(code.slice(i, j))}</span>`;
+      i = j;
+      continue;
+    }
+
+    // Numbers
+    if (/\d/.test(code[i]) && (i === 0 || /[\s,;:=+\-*/([\]{}<>!&|^~?]/.test(code[i - 1]))) {
+      let j = i;
+      while (j < len && /[\d.xXa-fA-F_]/.test(code[j])) j++;
+      result += `<span class="number">${escapeHtml(code.slice(i, j))}</span>`;
+      i = j;
+      continue;
+    }
+
+    // Words (potential keywords)
+    if (/[a-zA-Z_$]/.test(code[i])) {
+      let j = i;
+      while (j < len && /[a-zA-Z0-9_$]/.test(code[j])) j++;
+      const word = code.slice(i, j);
+      if (KEYWORDS.has(word)) {
+        result += `<span class="keyword">${word}</span>`;
+      } else {
+        result += escapeHtml(word);
+      }
+      i = j;
+      continue;
+    }
+
+    // Everything else
+    result += escapeHtml(code[i]);
+    i++;
+  }
+
+  return result;
+}
+
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function renderTabs() {
+  const tabsEl = document.getElementById('code-tabs');
+  if (!tabsEl) return;
+
+  tabsEl.innerHTML = '';
+
+  for (let i = 0; i < files.length; i++) {
+    const btn = document.createElement('button');
+    btn.className = 'code-tab';
+    if (i === activeIndex) btn.classList.add('active');
+    // Show just the filename, not the full path
+    const name = files[i].path.split('/').pop();
+    btn.textContent = name;
+    btn.addEventListener('click', () => showFile(i));
+    tabsEl.appendChild(btn);
+  }
+}
+
+function showFile(index) {
+  if (index < 0 || index >= files.length) return;
+  activeIndex = index;
+  renderTabs();
+  startTypewriter(files[index].code);
+}
+
+function startTypewriter(code) {
+  const contentEl = document.getElementById('code-content');
+  if (!contentEl) return;
+
+  // Cancel any ongoing typewriter
+  if (typewriterRaf) cancelAnimationFrame(typewriterRaf);
+
+  const highlighted = highlightSyntax(code);
+  let charIndex = 0;
+  const charsPerFrame = 30;
+
+  contentEl.innerHTML = '';
+  contentEl.classList.add('cursor-blink');
+
+  function tick() {
+    charIndex += charsPerFrame;
+    if (charIndex >= highlighted.length) {
+      contentEl.innerHTML = highlighted;
+      contentEl.classList.remove('cursor-blink');
+      typewriterRaf = 0;
+      return;
+    }
+    // Render up to charIndex, but don't break inside HTML tags
+    let safeEnd = charIndex;
+    const openBracket = highlighted.lastIndexOf('<', safeEnd);
+    const closeBracket = highlighted.lastIndexOf('>', safeEnd);
+    if (openBracket > closeBracket) {
+      // We're inside a tag — extend to close it
+      const nextClose = highlighted.indexOf('>', safeEnd);
+      if (nextClose !== -1) safeEnd = nextClose + 1;
+    }
+    contentEl.innerHTML = highlighted.slice(0, safeEnd);
+    typewriterRaf = requestAnimationFrame(tick);
+  }
+
+  typewriterRaf = requestAnimationFrame(tick);
+}
+
+function updatePanelVisibility(phase) {
+  const panel = document.getElementById('code-panel');
+  if (!panel) return;
+  if (BUILDING_PHASES.has(phase)) {
+    panel.classList.add('active');
+  } else {
+    panel.classList.remove('active');
+  }
+}
+
+export function initCodePanel() {
+  const state = window.AppState;
+  if (!state) return;
+
+  state.on('code_generated', (file) => {
+    if (!file || !file.path) return;
+    const existing = files.findIndex(f => f.path === file.path);
+    const normalized = { path: file.path, code: file.content || file.code || '' };
+    if (existing >= 0) {
+      files[existing] = normalized;
+      if (existing === activeIndex) {
+        startTypewriter(normalized.code);
+      }
+    } else {
+      files.push(normalized);
+      // Auto-select newly added file
+      showFile(files.length - 1);
+    }
+    renderTabs();
+  });
+
+  state.on('phase_change', ({ to }) => {
+    updatePanelVisibility(to);
+  });
+
+  state.on('reset', () => {
+    files.length = 0;
+    activeIndex = -1;
+    if (typewriterRaf) cancelAnimationFrame(typewriterRaf);
+    typewriterRaf = 0;
+    const tabsEl = document.getElementById('code-tabs');
+    const contentEl = document.getElementById('code-content');
+    if (tabsEl) tabsEl.innerHTML = '';
+    if (contentEl) {
+      contentEl.innerHTML = '';
+      contentEl.classList.remove('cursor-blink');
+    }
+    const panel = document.getElementById('code-panel');
+    if (panel) panel.classList.remove('active');
+  });
+}

package/demo/js/preview.js

@@ -0,0 +1,456 @@
+// preview.js — WebContainer boot, file sync, iframe management
+// Boots WebContainer on page load, pre-warms with Next.js scaffold,
+// then syncs files from code_generated SSE events via HMR.
+
+import { WebContainer } from 'https://esm.sh/@webcontainer/api';
+
+const AppState = window.AppState;
+
+let container = null;
+let serverProcess = null;
+let isServerReady = false;
+
+// Track installed packages to avoid redundant installs
+const installedPackages = new Set(['next', 'react', 'react-dom', '@types/node', '@types/react', 'typescript', 'tailwindcss', 'postcss', 'autoprefixer']);
+
+// Static scaffold — same every time
+const SCAFFOLD = {
+  'package.json': {
+    file: {
+      contents: JSON.stringify({
+        name: 'assay-preview',
+        version: '0.1.0',
+        private: true,
+        scripts: {
+          dev: 'next dev --port 3333'
+        },
+        dependencies: {
+          next: '14.2.21',
+          react: '^18.3.0',
+          'react-dom': '^18.3.0'
+        },
+        devDependencies: {
+          '@types/node': '^20.0.0',
+          '@types/react': '^18.3.0',
+          typescript: '^5.7.0',
+          tailwindcss: '^3.4.0',
+          postcss: '^8.4.0',
+          autoprefixer: '^10.4.0'
+        }
+      }, null, 2)
+    }
+  },
+  'next.config.js': {
+    file: {
+      contents: `/** @type {import('next').NextConfig} */\nconst nextConfig = {};\nmodule.exports = nextConfig;\n`
+    }
+  },
+  'tsconfig.json': {
+    file: {
+      contents: JSON.stringify({
+        compilerOptions: {
+          target: 'ES2017',
+          lib: ['dom', 'dom.iterable', 'esnext'],
+          allowJs: true,
+          skipLibCheck: true,
+          strict: true,
+          noEmit: true,
+          esModuleInterop: true,
+          module: 'esnext',
+          moduleResolution: 'bundler',
+          resolveJsonModule: true,
+          isolatedModules: true,
+          jsx: 'preserve',
+          incremental: true,
+          plugins: [{ name: 'next' }],
+          paths: { '@/*': ['./*'] }
+        },
+        include: ['next-env.d.ts', '**/*.ts', '**/*.tsx', '.next/types/**/*.ts'],
+        exclude: ['node_modules']
+      }, null, 2)
+    }
+  },
+  'tailwind.config.js': {
+    file: {
+      contents: `/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./app/**/*.{js,ts,jsx,tsx}'],\n  theme: { extend: {} },\n  plugins: [],\n};\n`
+    }
+  },
+  'postcss.config.js': {
+    file: {
+      contents: `module.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n};\n`
+    }
+  },
+  'app': {
+    directory: {
+      'layout.tsx': {
+        file: {
+          contents: `import type { Metadata } from 'next';\nimport './globals.css';\n\nexport const metadata: Metadata = { title: 'Preview' };\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang="en">\n      <body>{children}</body>\n    </html>\n  );\n}\n`
+        }
+      },
+      'globals.css': {
+        file: {
+          contents: `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`
+        }
+      },
+      'page.tsx': {
+        file: {
+          contents: `'use client';\n\nexport default function Home() {\n  return (\n    <div className="flex items-center justify-center min-h-screen bg-gray-950 text-white">\n      <p className="text-gray-500 text-sm">Waiting for files...</p>\n    </div>\n  );\n}\n`
+        }
+      }
+    }
+  }
+};
+
+/**
+ * Boot WebContainer, mount scaffold, install deps, start dev server.
+ * Call on page load — runs silently in background during chat phase.
+ */
+export async function initPreview() {
+  const iframe = document.getElementById('preview-iframe');
+  updatePreviewStatus('cold', 'Setting up environment...');
+  AppState.update({ containerState: 'cold' });
+
+  try {
+    container = await WebContainer.boot();
+    await container.mount(SCAFFOLD);
+
+    updatePreviewStatus('cold', 'Installing dependencies...');
+    const installProcess = await container.spawn('npm', ['install']);
+    const installCode = await installProcess.exit;
+
+    if (installCode !== 0) {
+      console.error('[Preview] npm install failed with code', installCode);
+      updatePreviewStatus('cold', 'Install failed — retrying...');
+      const retry = await container.spawn('npm', ['install']);
+      await retry.exit;
+    }
+
+    updatePreviewStatus('cold', 'Starting dev server...');
+    serverProcess = await container.spawn('npm', ['run', 'dev']);
+
+    serverProcess.output.pipeTo(new WritableStream({
+      write(data) {
+        console.log('[Preview:server]', data);
+      }
+    }));
+
+    container.on('server-ready', (port, url) => {
+      console.log('[Preview] Server ready on port', port, 'at', url);
+      isServerReady = true;
+      AppState.update({ containerState: 'warm', previewUrl: url });
+
+      if (iframe) {
+        iframe.src = url;
+      }
+
+      updatePreviewStatus('warm', 'Describe your app and watch it appear here.');
+
+      const queue = AppState.get().fileQueue;
+      if (queue.length > 0) {
+        console.log(`[Preview] Flushing ${queue.length} queued files`);
+        AppState.update({ containerState: 'building', fileQueue: [] });
+        for (const file of queue) {
+          collectFileForInstall(file);
+        }
+      }
+    });
+
+    AppState.on('code_generated', (file) => {
+      handleFileGenerated(file);
+    });
+
+    AppState.on('phase_change', ({ to }) => {
+      if (to === 'verifying' || to === 'verification') {
+        AppState.update({ containerState: 'verifying' });
+        updatePreviewStatus('verifying', `Verifying... ${AppState.get().metrics.claimsVerified} claims checked`);
+      } else if (to === 'completed') {
+        AppState.update({ containerState: 'done' });
+        const m = AppState.get().metrics;
+        const clockEl = document.getElementById('clock-value');
+        const elapsed = clockEl ? clockEl.textContent : '';
+        updatePreviewStatus('done', `${m.filesGenerated} files | ${m.totalTasks} features | ${elapsed}`);
+        showDownloadButton();
+      } else if (to === 'failed') {
+        updatePreviewStatus('done', 'Build failed');
+      }
+    });
+
+  } catch (err) {
+    console.error('[Preview] Boot failed:', err);
+    updatePreviewStatus('cold', `Boot failed: ${err.message}`);
+  }
+}
+
+/**
+ * Extract external package names from import/require statements.
+ * Ignores relative imports (./  ../), path aliases (@/), and built-ins.
+ */
+function extractDependencies(content) {
+  const deps = new Set();
+  const importRe = /(?:import\s+.*?\s+from\s+|import\s+|require\s*\(\s*)['"]([^'"./][^'"]*)['"]/g;
+  let match;
+  while ((match = importRe.exec(content)) !== null) {
+    let pkg = match[1];
+    // Skip path aliases like @/lib/foo
+    if (pkg.startsWith('@/')) continue;
+    // Scoped packages: @scope/name/sub → @scope/name
+    if (pkg.startsWith('@')) {
+      const parts = pkg.split('/');
+      if (parts.length < 2) continue;
+      pkg = parts.slice(0, 2).join('/');
+    } else {
+      pkg = pkg.split('/')[0];
+    }
+    // Skip scaffold packages and Node.js built-ins
+    if (['next', 'react', 'react-dom', 'fs', 'path', 'http', 'https', 'url', 'crypto', 'stream', 'util', 'events', 'buffer', 'os', 'child_process', 'net', 'tls', 'dns', 'querystring', 'assert', 'zlib'].includes(pkg)) continue;
+    deps.add(pkg);
+  }
+  return deps;
+}
+
+// Pending files held back until deps are installed
+let pendingFiles = [];
+let pendingDeps = new Set();
+let flushTimer = null;
+
+/**
+ * Collect a file and its dependencies. After a brief pause (all files in a
+ * burst have arrived), install missing deps FIRST, then write all files.
+ */
+function collectFileForInstall(file) {
+  if (!container) return;
+
+  pendingFiles.push(file);
+
+  if (file.path.match(/\.(ts|tsx|js|jsx)$/)) {
+    for (const dep of extractDependencies(file.content)) {
+      if (!installedPackages.has(dep)) {
+        pendingDeps.add(dep);
+      }
+    }
+  }
+
+  // Debounce: 1.5s after last file, flush everything
+  clearTimeout(flushTimer);
+  flushTimer = setTimeout(flushPendingFiles, 1500);
+}
+
+async function flushPendingFiles() {
+  const files = [...pendingFiles];
+  const deps = [...pendingDeps];
+  pendingFiles = [];
+  pendingDeps.clear();
+
+  // Install missing dependencies FIRST
+  if (deps.length > 0 && container) {
+    console.log(`[Preview] Installing ${deps.length} deps before writing files: ${deps.join(', ')}`);
+    updatePreviewStatus('building', `Installing ${deps.join(', ')}...`);
+    try {
+      const proc = await container.spawn('npm', ['install', '--legacy-peer-deps', ...deps]);
+      proc.output.pipeTo(new WritableStream({
+        write(data) { console.log('[Preview:install]', data); }
+      }));
+      const code = await proc.exit;
+      if (code === 0) {
+        for (const d of deps) installedPackages.add(d);
+        console.log(`[Preview] Installed: ${deps.join(', ')}`);
+      } else {
+        console.warn(`[Preview] npm install exited ${code} for: ${deps.join(', ')}`);
+      }
+    } catch (err) {
+      console.error('[Preview] Install failed:', err);
+    }
+  }
+
+  // NOW write all files
+  let envFileWritten = false;
+  for (const file of files) {
+    await writeFileToContainer(file.path, file.content);
+    if (file.path === '.env.local' || file.path === '.env') {
+      envFileWritten = true;
+    }
+  }
+  updatePreviewStatus('building', `Building... ${AppState.get().metrics.filesGenerated} files`);
+
+  // Next.js only reads .env.local at startup — restart the dev server
+  // so both server-side and client-side code pick up the new values
+  if (envFileWritten) {
+    await restartDevServer();
+  }
+
+  // If more files arrived while installing, flush again
+  if (pendingFiles.length > 0) {
+    clearTimeout(flushTimer);
+    flushTimer = setTimeout(flushPendingFiles, 1500);
+  }
+}
+
+function handleFileGenerated(file) {
+  if (!file || !file.path || !file.content) return;
+
+  const currentContainer = AppState.get().containerState;
+  if (currentContainer === 'warm' || currentContainer === 'cold') {
+    AppState.update({ containerState: 'building' });
+  }
+
+  if (isServerReady && container) {
+    // Collect files, install deps, then write — all batched
+    collectFileForInstall(file);
+  } else {
+    const queue = AppState.get().fileQueue;
+    queue.push({ path: file.path, content: file.content });
+    AppState.update({ fileQueue: queue });
+  }
+}
+
+/**
+ * Kill the running Next.js dev server and start a fresh one.
+ * Required after .env.local changes — Next.js reads env files only at startup.
+ */
+async function restartDevServer() {
+  if (!container) return;
+  console.log('[Preview] Restarting dev server to pick up new .env.local...');
+  updatePreviewStatus('building', 'Restarting dev server for env changes...');
+
+  // Kill the current server process
+  if (serverProcess) {
+    serverProcess.kill();
+    serverProcess = null;
+  }
+  isServerReady = false;
+
+  // Start a new dev server
+  serverProcess = await container.spawn('npm', ['run', 'dev']);
+  serverProcess.output.pipeTo(new WritableStream({
+    write(data) {
+      console.log('[Preview:server]', data);
+    }
+  }));
+
+  // Wait for server-ready via a one-time listener
+  await new Promise((resolve) => {
+    const onReady = (port, url) => {
+      console.log('[Preview] Server restarted on port', port, 'at', url);
+      isServerReady = true;
+      AppState.update({ containerState: 'warm', previewUrl: url });
+      const iframe = document.getElementById('preview-iframe');
+      if (iframe) iframe.src = url;
+      updatePreviewStatus('building', `Building... ${AppState.get().metrics.filesGenerated} files`);
+      resolve();
+    };
+    container.on('server-ready', onReady);
+    // Safety timeout — don't hang forever if server fails to start
+    setTimeout(() => {
+      isServerReady = true; // Allow file writes to continue regardless
+      resolve();
+    }, 30000);
+  });
+}
+
+async function writeFileToContainer(filePath, content) {
+  if (!container) return;
+
+  try {
+    const parts = filePath.split('/');
+    if (parts.length > 1) {
+      const dir = parts.slice(0, -1).join('/');
+      await container.fs.mkdir(dir, { recursive: true });
+    }
+
+    await container.fs.writeFile(filePath, content);
+    console.log(`[Preview] Wrote: ${filePath}`);
+  } catch (err) {
+    console.error(`[Preview] Failed to write ${filePath}:`, err);
+  }
+}
+
+function updatePreviewStatus(state, message) {
+  const statusEl = document.getElementById('preview-status');
+  if (statusEl) {
+    statusEl.textContent = message;
+    statusEl.dataset.state = state;
+  }
+
+  const fileCountEl = document.getElementById('file-count');
+  if (fileCountEl) {
+    const count = AppState.get().metrics.filesGenerated;
+    fileCountEl.textContent = count;
+    fileCountEl.parentElement.classList.toggle('hidden', count === 0);
+  }
+}
+
+function showDownloadButton() {
+  const previewPanel = document.getElementById('preview-panel');
+  if (!previewPanel) return;
+
+  if (previewPanel.querySelector('.preview-download-btn')) return;
+
+  const btn = document.createElement('button');
+  btn.className = 'preview-download-btn';
+  btn.textContent = 'Download Project';
+  btn.addEventListener('click', downloadProject);
+  previewPanel.appendChild(btn);
+}
+
+/**
+ * Collect all project files from the WebContainer as an array of {path, content}.
+ * Excludes node_modules and .next directories.
+ */
+export async function collectProjectFiles() {
+  if (!container) return [];
+
+  const files = [];
+  async function walk(dirPath) {
+    const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = dirPath === '.' ? entry.name : `${dirPath}/${entry.name}`;
+      if (entry.name === 'node_modules' || entry.name === '.next') continue;
+
+      if (entry.isDirectory()) {
+        await walk(fullPath);
+      } else {
+        const content = await container.fs.readFile(fullPath, 'utf-8');
+        files.push({ path: fullPath, content });
+      }
+    }
+  }
+  await walk('.');
+  return files;
+}
+
+export async function downloadProject() {
+  if (!container) return;
+
+  try {
+    const { default: JSZip } = await import('https://esm.sh/jszip@3.10.1');
+    const zip = new JSZip();
+
+    async function addToZip(dirPath, zipFolder) {
+      const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
+      for (const entry of entries) {
+        const fullPath = dirPath === '.' ? entry.name : `${dirPath}/${entry.name}`;
+        if (entry.name === 'node_modules' || entry.name === '.next') continue;
+
+        if (entry.isDirectory()) {
+          const subfolder = zipFolder.folder(entry.name);
+          await addToZip(fullPath, subfolder);
+        } else {
+          const content = await container.fs.readFile(fullPath, 'utf-8');
+          zipFolder.file(entry.name, content);
+        }
+      }
+    }
+
+    await addToZip('.', zip);
+
+    const blob = await zip.generateAsync({ type: 'blob' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${AppState.get().planSummary?.appName || 'assay-app'}.zip`;
+    a.click();
+    URL.revokeObjectURL(url);
+  } catch (err) {
+    console.error('[Preview] Download failed:', err);
+  }
+}