tryassay 0.21.1 → 0.22.0

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/demo-mode.js

@@ -0,0 +1,107 @@
+// demo-mode.js — Canned event replay for offline demos
+// Loads pre-recorded events and replays them with timing
+
+const AppState = window.AppState;
+
+let events = null;
+let timers = [];
+
+function dispatchEvent(event) {
+  const { type, data } = event;
+
+  switch (type) {
+    case 'phase_change':
+      AppState.update({ phase: data.phase });
+      break;
+
+    case 'agent_activate': {
+      const existing = AppState.get().agents.find(a => a.name === data.name);
+      if (existing) {
+        AppState.updateAgent(data.name, data);
+      } else {
+        AppState.addAgent(data);
+      }
+      break;
+    }
+
+    case 'task_add':
+      AppState.addTask(data);
+      AppState.update({ currentTask: { name: data.title || data.name, agent: data.agent, status: data.status } });
+      break;
+
+    case 'task_update':
+      AppState.updateTask(data.id, data);
+      break;
+
+    case 'verification':
+      AppState.addVerification(data);
+      break;
+
+    case 'code_generated':
+      AppState.addCodeFile(data);
+      break;
+
+    case 'metric_update':
+      AppState.update({ metrics: data });
+      break;
+  }
+}
+
+function clearTimers() {
+  for (const id of timers) {
+    clearTimeout(id);
+  }
+  timers = [];
+}
+
+export function initDemoMode() {
+  return fetch('data/demo-events.json')
+    .then(res => {
+      if (!res.ok) throw new Error(`Failed to load demo events: ${res.status}`);
+      return res.json();
+    })
+    .then(data => {
+      events = data;
+    })
+    .catch(err => {
+      console.error('[Demo] Failed to load events:', err);
+    });
+}
+
+export function startDemo(prompt) {
+  if (!events || events.length === 0) {
+    console.error('[Demo] No events loaded. Call initDemoMode() first.');
+    return;
+  }
+
+  // Reset state for fresh demo
+  AppState.reset();
+  clearTimers();
+
+  // Disable input during demo
+  const input = document.getElementById('prompt-input');
+  const btn = document.getElementById('submit-btn');
+  if (input) input.disabled = true;
+  if (btn) btn.disabled = true;
+
+  // Log the prompt
+  AppState.addLog({ level: 'info', message: `Demo started: "${prompt}"` });
+
+  // Schedule all events by their absolute delay
+  const lastDelay = events[events.length - 1].delay;
+
+  for (const event of events) {
+    const id = setTimeout(() => {
+      dispatchEvent(event);
+    }, event.delay);
+    timers.push(id);
+  }
+
+  // Re-enable input after all events complete
+  const finishId = setTimeout(() => {
+    if (input) input.disabled = false;
+    if (btn) btn.disabled = false;
+    timers = [];
+  }, lastDelay + 500);
+  timers.push(finishId);
+}