tryassay 0.21.1 → 0.22.0

package/demo/js/state.js

@@ -0,0 +1,162 @@
+// state.js — Shared state + pub/sub event bus
+// All modules read from and write to this central store
+
+const AppState = (() => {
+  const listeners = {};
+
+  const state = {
+    phase: 'idle',
+    currentTask: null,
+    agents: [],
+    tasks: [],
+    verifications: [],
+    codeFiles: [],
+    metrics: {
+      tasksComplete: 0,
+      totalTasks: 0,
+      claimsVerified: 0,
+      claimsFailed: 0,
+      filesGenerated: 0
+    },
+    log: []
+  };
+
+  function on(event, fn) {
+    if (!listeners[event]) listeners[event] = [];
+    listeners[event].push(fn);
+    return () => {
+      listeners[event] = listeners[event].filter(f => f !== fn);
+    };
+  }
+
+  function emit(event, data) {
+    if (listeners[event]) {
+      listeners[event].forEach(fn => fn(data));
+    }
+    // Always emit wildcard
+    if (listeners['*']) {
+      listeners['*'].forEach(fn => fn(event, data));
+    }
+  }
+
+  function get() {
+    return state;
+  }
+
+  function update(partial) {
+    const oldPhase = state.phase;
+
+    // Merge top-level primitives and objects
+    for (const key of Object.keys(partial)) {
+      if (Array.isArray(partial[key]) && Array.isArray(state[key])) {
+        state[key] = partial[key];
+      } else if (typeof partial[key] === 'object' && partial[key] !== null && !Array.isArray(partial[key])) {
+        state[key] = { ...state[key], ...partial[key] };
+      } else {
+        state[key] = partial[key];
+      }
+    }
+
+    // Emit specific events based on what changed
+    if (partial.phase !== undefined && partial.phase !== oldPhase) {
+      emit('phase_change', { from: oldPhase, to: state.phase });
+    }
+    if (partial.currentTask !== undefined) {
+      emit('task_update', state.currentTask);
+    }
+    if (partial.tasks !== undefined) {
+      emit('task_update', state.tasks);
+    }
+    if (partial.verifications !== undefined) {
+      emit('verification', state.verifications[state.verifications.length - 1]);
+    }
+    if (partial.codeFiles !== undefined) {
+      emit('code_generated', state.codeFiles[state.codeFiles.length - 1]);
+    }
+    if (partial.agents !== undefined) {
+      emit('agent_status', state.agents);
+    }
+    if (partial.metrics !== undefined) {
+      emit('metric_update', state.metrics);
+    }
+  }
+
+  function addTask(task) {
+    state.tasks.push(task);
+    state.metrics.totalTasks = state.tasks.length;
+    if (task.status === 'completed') {
+      state.metrics.tasksComplete = state.tasks.filter(t => t.status === 'completed').length;
+    }
+    emit('task_update', task);
+    emit('metric_update', state.metrics);
+  }
+
+  function updateTask(id, updates) {
+    const task = state.tasks.find(t => t.id === id);
+    if (task) {
+      Object.assign(task, updates);
+      if (updates.status === 'completed') {
+        state.metrics.tasksComplete = state.tasks.filter(t => t.status === 'completed').length;
+      }
+      state.currentTask = task;
+      emit('task_update', task);
+      emit('metric_update', state.metrics);
+    }
+  }
+
+  function addVerification(v) {
+    state.verifications.push(v);
+    if (v.result === 'pass') state.metrics.claimsVerified++;
+    else state.metrics.claimsFailed++;
+    emit('verification', v);
+    emit('metric_update', state.metrics);
+  }
+
+  function addCodeFile(file) {
+    const existing = state.codeFiles.findIndex(f => f.path === file.path);
+    if (existing >= 0) {
+      state.codeFiles[existing] = file;
+    } else {
+      state.codeFiles.push(file);
+      state.metrics.filesGenerated = state.codeFiles.length;
+    }
+    emit('code_generated', file);
+    emit('metric_update', state.metrics);
+  }
+
+  function addAgent(agent) {
+    state.agents.push(agent);
+    emit('agent_status', state.agents);
+  }
+
+  function updateAgent(name, updates) {
+    const agent = state.agents.find(a => a.name === name);
+    if (agent) {
+      Object.assign(agent, updates);
+      emit('agent_status', state.agents);
+    }
+  }
+
+  function addLog(entry) {
+    state.log.push({ timestamp: Date.now(), ...entry });
+    emit('log', entry);
+  }
+
+  function reset() {
+    state.phase = 'idle';
+    state.currentTask = null;
+    state.agents = [];
+    state.tasks = [];
+    state.verifications = [];
+    state.codeFiles = [];
+    state.metrics = { tasksComplete: 0, totalTasks: 0, claimsVerified: 0, claimsFailed: 0, filesGenerated: 0 };
+    state.log = [];
+    emit('reset', null);
+  }
+
+  return { on, emit, get, update, addTask, updateTask, addVerification, addCodeFile, addAgent, updateAgent, addLog, reset };
+})();
+
+// Make globally available for all modules
+window.AppState = AppState;
+export default AppState;

package/demo/js/timeline.js

@@ -0,0 +1,394 @@
+// timeline.js — Right panel phase steps + metrics + timing
+// Subscribes to AppState events, renders phase progression, verification results,
+// global elapsed clock, per-phase durations, and heartbeat feedback
+
+const PHASES = [
+  { id: 'idle', name: 'Idle' },
+  { id: 'initializing', name: 'Initializing' },
+  { id: 'plan_questioning', name: 'Refining Requirements' },
+  { id: 'plan_refining', name: 'Updating Requirements' },
+  { id: 'planning', name: 'Planning Architecture' },
+  { id: 'verifying_plan', name: 'Verifying Plan' },
+  { id: 'requirements_refining', name: 'Reviewing Plan' },
+  { id: 'scaffolding', name: 'Scaffolding Project' },
+  { id: 'building_feature', name: 'Building Features' },
+  { id: 'build_verifying', name: 'Verifying Code' },
+  { id: 'build_repairing', name: 'Repairing Build' },
+  { id: 'integration_verifying', name: 'Integration Verification' },
+  { id: 'functional_testing', name: 'Functional Testing' },
+  { id: 'functional_repairing', name: 'Repairing Failures' },
+  { id: 'cross_verifying', name: 'Cross-Verifying' },
+  { id: 'finalizing', name: 'Finalizing' },
+  { id: 'completed', name: 'Completed' },
+  { id: 'failed', name: 'Failed' }
+];
+
+// Phases that map to a canonical phase for display
+const PHASE_ALIASES = {
+  'building_wave': 'building_feature',
+  'awaiting_approval': 'requirements_refining',
+};
+
+// Track per-phase data
+const phaseData = {};
+
+// ── Timing state ──
+let globalStartTime = null;
+let globalClockInterval = null;
+let activePhaseClockInterval = null;
+const phaseStartTimes = {};   // phaseId → timestamp
+const phaseDurations = {};    // phaseId → seconds
+let currentActivePhase = 'idle';
+
+// ── Heartbeat state ──
+let lastEventTime = null;
+let heartbeatInterval = null;
+const HEARTBEAT_THRESHOLD_MS = 4000; // show heartbeat after 4s of silence
+
+function resetPhaseData() {
+  for (const p of PHASES) {
+    phaseData[p.id] = { tasks: [], verifications: [] };
+  }
+}
+
+function resetTimingState() {
+  globalStartTime = null;
+  if (globalClockInterval) clearInterval(globalClockInterval);
+  if (activePhaseClockInterval) clearInterval(activePhaseClockInterval);
+  if (heartbeatInterval) clearInterval(heartbeatInterval);
+  globalClockInterval = null;
+  activePhaseClockInterval = null;
+  heartbeatInterval = null;
+  lastEventTime = null;
+  currentActivePhase = 'idle';
+  for (const key of Object.keys(phaseStartTimes)) delete phaseStartTimes[key];
+  for (const key of Object.keys(phaseDurations)) delete phaseDurations[key];
+
+  // Reset clock display
+  const clockEl = document.getElementById('global-clock');
+  const clockVal = document.getElementById('clock-value');
+  if (clockEl) clockEl.classList.add('hidden');
+  if (clockVal) clockVal.textContent = '00:00';
+}
+
+function resolvePhase(phaseId) {
+  return PHASE_ALIASES[phaseId] || phaseId;
+}
+
+function getPhaseIndex(phaseId) {
+  const resolved = resolvePhase(phaseId);
+  return PHASES.findIndex(p => p.id === resolved);
+}
+
+// ── Time formatting ──
+
+function formatElapsed(ms) {
+  const totalSec = Math.floor(ms / 1000);
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  const tenths = Math.floor((ms % 1000) / 100);
+  if (min > 0) {
+    return `${min}:${sec.toString().padStart(2, '0')}.${tenths}`;
+  }
+  return `${sec}.${tenths}s`;
+}
+
+function formatClockDisplay(ms) {
+  const totalSec = Math.floor(ms / 1000);
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
+}
+
+// ── Global clock ──
+
+function startGlobalClock() {
+  if (globalStartTime) return; // already running
+  globalStartTime = Date.now();
+  const clockEl = document.getElementById('global-clock');
+  const clockVal = document.getElementById('clock-value');
+  if (clockEl) clockEl.classList.remove('hidden');
+
+  globalClockInterval = setInterval(() => {
+    if (!globalStartTime) return;
+    const elapsed = Date.now() - globalStartTime;
+    if (clockVal) clockVal.textContent = formatClockDisplay(elapsed);
+  }, 100);
+}
+
+function stopGlobalClock() {
+  // Don't clear globalStartTime — keep final time displayed
+  if (globalClockInterval) {
+    clearInterval(globalClockInterval);
+    globalClockInterval = null;
+  }
+}
+
+// ── Phase timing ──
+
+function onPhaseEnter(phaseId) {
+  const resolved = resolvePhase(phaseId);
+
+  // Start global clock on first non-idle phase
+  if (resolved !== 'idle') {
+    startGlobalClock();
+  }
+
+  // Record phase start
+  phaseStartTimes[resolved] = Date.now();
+  currentActivePhase = resolved;
+  lastEventTime = Date.now();
+
+  // Start active phase clock (updates the active step's elapsed badge)
+  if (activePhaseClockInterval) clearInterval(activePhaseClockInterval);
+  activePhaseClockInterval = setInterval(() => {
+    updateActivePhaseElapsed();
+    updateHeartbeat();
+  }, 100);
+
+  // Stop global clock on terminal phases
+  if (resolved === 'completed' || resolved === 'failed') {
+    stopGlobalClock();
+    // Record final duration for the terminal phase itself
+    phaseDurations[resolved] = 0;
+    if (activePhaseClockInterval) {
+      clearInterval(activePhaseClockInterval);
+      activePhaseClockInterval = null;
+    }
+    if (heartbeatInterval) {
+      clearInterval(heartbeatInterval);
+      heartbeatInterval = null;
+    }
+  }
+}
+
+function onPhaseExit(phaseId) {
+  const resolved = resolvePhase(phaseId);
+  const start = phaseStartTimes[resolved];
+  if (start) {
+    phaseDurations[resolved] = (Date.now() - start) / 1000;
+  }
+}
+
+function updateActivePhaseElapsed() {
+  const resolved = currentActivePhase;
+  const start = phaseStartTimes[resolved];
+  if (!start) return;
+
+  const elapsedEl = document.querySelector('.phase-elapsed-live');
+  if (elapsedEl) {
+    const elapsed = Date.now() - start;
+    elapsedEl.textContent = formatElapsed(elapsed);
+  }
+}
+
+// ── Heartbeat ──
+
+function recordEvent() {
+  lastEventTime = Date.now();
+  // Hide heartbeat immediately when event arrives
+  const hb = document.querySelector('.heartbeat-indicator');
+  if (hb) hb.classList.remove('visible');
+}
+
+function updateHeartbeat() {
+  if (!lastEventTime) return;
+  const silence = Date.now() - lastEventTime;
+  const hb = document.querySelector('.heartbeat-indicator');
+  if (!hb) return;
+
+  if (silence > HEARTBEAT_THRESHOLD_MS) {
+    hb.classList.add('visible');
+  } else {
+    hb.classList.remove('visible');
+  }
+}
+
+// ── Render ──
+
+function renderSteps(currentPhase) {
+  const container = document.getElementById('timeline-steps');
+  if (!container) return;
+
+  const currentIdx = getPhaseIndex(currentPhase);
+
+  container.innerHTML = '';
+
+  for (let i = 0; i < PHASES.length; i++) {
+    const phase = PHASES[i];
+    const step = document.createElement('div');
+    step.className = 'timeline-step';
+    step.dataset.phase = phase.id;
+
+    if (i < currentIdx) {
+      step.classList.add('completed');
+    } else if (i === currentIdx) {
+      step.classList.add('active');
+    } else {
+      step.classList.add('pending');
+    }
+
+    // Step header row: name + duration
+    const headerRow = document.createElement('div');
+    headerRow.className = 'step-header';
+
+    const nameEl = document.createElement('div');
+    nameEl.className = 'step-name';
+    nameEl.textContent = phase.name;
+    headerRow.appendChild(nameEl);
+
+    // Duration badge for completed phases
+    if (i < currentIdx && phaseDurations[phase.id] !== undefined) {
+      const dur = phaseDurations[phase.id];
+      const durEl = document.createElement('span');
+      durEl.className = 'phase-duration';
+      durEl.textContent = dur < 60 ? `${dur.toFixed(1)}s` : `${Math.floor(dur / 60)}m${Math.floor(dur % 60)}s`;
+      headerRow.appendChild(durEl);
+    }
+
+    // Live elapsed for active phase
+    if (i === currentIdx && phase.id !== 'idle' && phase.id !== 'completed' && phase.id !== 'failed') {
+      const elapsedEl = document.createElement('span');
+      elapsedEl.className = 'phase-elapsed-live';
+      const start = phaseStartTimes[phase.id];
+      if (start) {
+        elapsedEl.textContent = formatElapsed(Date.now() - start);
+      }
+      headerRow.appendChild(elapsedEl);
+    }
+
+    step.appendChild(headerRow);
+
+    // Heartbeat indicator (only on active step)
+    if (i === currentIdx && phase.id !== 'idle' && phase.id !== 'completed' && phase.id !== 'failed') {
+      const hbEl = document.createElement('div');
+      hbEl.className = 'heartbeat-indicator';
+      hbEl.innerHTML = '<span class="heartbeat-dot"></span> working';
+      step.appendChild(hbEl);
+    }
+
+    const detailsEl = document.createElement('div');
+    detailsEl.className = 'step-details';
+
+    const data = phaseData[phase.id];
+    if (data) {
+      for (const task of data.tasks) {
+        const taskEl = document.createElement('div');
+        taskEl.className = 'step-task';
+        const badge = document.createElement('span');
+        badge.className = 'agent-badge';
+        badge.textContent = task.agent || 'agent';
+        taskEl.appendChild(badge);
+        const label = document.createTextNode(` ${task.name || task.title || task.id}`);
+        taskEl.appendChild(label);
+        detailsEl.appendChild(taskEl);
+      }
+
+      for (const v of data.verifications) {
+        const vEl = document.createElement('div');
+        vEl.className = 'verification-item';
+        vEl.classList.add(v.result === 'pass' ? 'pass' : 'fail');
+
+        const icon = document.createTextNode(v.result === 'pass' ? '\u2713 ' : '\u2717 ');
+        vEl.appendChild(icon);
+
+        const claim = document.createTextNode(v.claim || v.message || 'claim');
+        vEl.appendChild(claim);
+
+        const methodBadge = document.createElement('span');
+        methodBadge.className = 'method-badge';
+        methodBadge.textContent = v.method || 'llm';
+        vEl.appendChild(methodBadge);
+
+        detailsEl.appendChild(vEl);
+      }
+    }
+
+    step.appendChild(detailsEl);
+    container.appendChild(step);
+  }
+
+  // Auto-scroll to active step
+  const activeStep = container.querySelector('.timeline-step.active');
+  if (activeStep) {
+    activeStep.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
+}
+
+function updateMetrics(metrics) {
+  const tasks = document.getElementById('metric-tasks');
+  const claims = document.getElementById('metric-claims');
+  const failed = document.getElementById('metric-failed');
+  const files = document.getElementById('metric-files');
+
+  if (tasks) tasks.textContent = `${metrics.tasksComplete}/${metrics.totalTasks}`;
+  if (claims) claims.textContent = metrics.claimsVerified;
+  if (failed) failed.textContent = metrics.claimsFailed;
+  if (files) files.textContent = metrics.filesGenerated;
+}
+
+export function initTimeline() {
+  const state = window.AppState;
+  if (!state) return;
+
+  resetPhaseData();
+  resetTimingState();
+  renderSteps('idle');
+  updateMetrics(state.get().metrics);
+
+  state.on('phase_change', ({ from, to }) => {
+    const resolvedFrom = resolvePhase(from);
+    const resolvedTo = resolvePhase(to);
+
+    // Record duration for outgoing phase
+    onPhaseExit(resolvedFrom);
+
+    // Start timing for incoming phase
+    onPhaseEnter(resolvedTo);
+
+    renderSteps(resolvedTo);
+    recordEvent();
+  });
+
+  state.on('task_update', (task) => {
+    if (!task) return;
+    const currentPhase = resolvePhase(state.get().phase);
+
+    // Handle single task
+    if (task && task.id) {
+      const pd = phaseData[currentPhase];
+      if (pd && !pd.tasks.find(t => t.id === task.id)) {
+        pd.tasks.push(task);
+      }
+      renderSteps(currentPhase);
+    }
+    recordEvent();
+  });
+
+  state.on('verification', (v) => {
+    if (!v) return;
+    const currentPhase = resolvePhase(state.get().phase);
+    const pd = phaseData[currentPhase];
+    if (pd) {
+      pd.verifications.push(v);
+      renderSteps(currentPhase);
+    }
+    recordEvent();
+  });
+
+  state.on('code_generated', () => {
+    recordEvent();
+  });
+
+  state.on('metric_update', (metrics) => {
+    updateMetrics(metrics);
+    recordEvent();
+  });
+
+  state.on('reset', () => {
+    resetPhaseData();
+    resetTimingState();
+    renderSteps('idle');
+    updateMetrics({ tasksComplete: 0, totalTasks: 0, claimsVerified: 0, claimsFailed: 0, filesGenerated: 0 });
+  });
+}

package/demo/js/voice.js

@@ -0,0 +1,154 @@
+// voice.js — ElevenLabs TTS narration
+// High-quality voice synthesis per phase transition
+
+const API_URL = 'https://api.elevenlabs.io/v1/text-to-speech';
+const API_KEY = 'sk_80c5021a889afdd474a7f9920cb0b73981ec38c912f9cecf';
+
+// Josh — deep young male narrator, fits sci-fi/tech aesthetic
+const VOICE_ID = 'TxGEqnHWrfWFTfGW9XjX';
+
+let isMuted = false;
+let currentAudio = null;
+let audioQueue = [];
+let isPlaying = false;
+
+const NARRATION = {
+  initializing: 'Analyzing your request. Breaking it down into an architecture plan.',
+  planning: 'Designing the application structure. Identifying components, routes, and data models.',
+  verifying_plan: 'Verifying the architecture. Extracting claims and checking each one against formal rules.',
+  requirements_refining: 'Architecture plan generated. Reviewing features, routes, and data models before building.',
+  scaffolding: 'Plan approved. Scaffolding the project. Creating the file structure and base configuration.',
+  building_feature: null,
+  build_verifying: 'Verifying the generated code. Checking for security issues, type errors, and logic bugs.',
+  build_repairing: 'Build issues detected. Repairing automatically.',
+  integration_verifying: 'Running integration verification. Checking cross-feature consistency.',
+  functional_testing: 'Running functional tests. Starting the application and testing every route with real HTTP requests.',
+  functional_repairing: 'Functional test failures detected. Feeding errors back to the code agent for repair.',
+  cross_verifying: 'Cross-verifying all features together. Checking that routes connect, schemas match, and imports resolve.',
+  finalizing: 'Finalizing the application. All verifications passed.',
+  completed: null
+};
+
+async function synthesize(text) {
+  const res = await fetch(`${API_URL}/${VOICE_ID}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'xi-api-key': API_KEY
+    },
+    body: JSON.stringify({
+      text,
+      model_id: 'eleven_multilingual_v2',
+      voice_settings: {
+        stability: 0.6,
+        similarity_boost: 0.8,
+        style: 0.3,
+        use_speaker_boost: true
+      }
+    })
+  });
+
+  if (!res.ok) {
+    console.error('[Voice] ElevenLabs API error:', res.status, await res.text());
+    return null;
+  }
+
+  const blob = await res.blob();
+  return URL.createObjectURL(blob);
+}
+
+function playNext() {
+  if (isPlaying || audioQueue.length === 0 || isMuted) return;
+
+  isPlaying = true;
+  const audioUrl = audioQueue.shift();
+
+  currentAudio = new Audio(audioUrl);
+  currentAudio.addEventListener('ended', () => {
+    URL.revokeObjectURL(audioUrl);
+    currentAudio = null;
+    isPlaying = false;
+    playNext();
+  });
+  currentAudio.addEventListener('error', () => {
+    URL.revokeObjectURL(audioUrl);
+    currentAudio = null;
+    isPlaying = false;
+    playNext();
+  });
+  currentAudio.play().catch(() => {
+    isPlaying = false;
+    playNext();
+  });
+}
+
+async function speak(text) {
+  if (isMuted || !text) return;
+
+  // Synthesize in background, queue when ready
+  const audioUrl = await synthesize(text);
+  if (audioUrl && !isMuted) {
+    audioQueue.push(audioUrl);
+    playNext();
+  }
+}
+
+function stopAll() {
+  if (currentAudio) {
+    currentAudio.pause();
+    currentAudio = null;
+  }
+  // Revoke any queued URLs
+  audioQueue.forEach(url => URL.revokeObjectURL(url));
+  audioQueue = [];
+  isPlaying = false;
+}
+
+function getNarration(phase) {
+  const state = window.AppState;
+
+  if (phase === 'building_feature') {
+    const taskName = state.get().currentTask?.name || 'current feature';
+    return `Building feature: ${taskName}. Generating the implementation.`;
+  }
+
+  if (phase === 'completed') {
+    const m = state.get().metrics;
+    return `Application complete. ${m.filesGenerated} files generated. ${m.claimsVerified} claims verified. ${m.claimsFailed} issues caught and fixed.`;
+  }
+
+  return NARRATION[phase] || null;
+}
+
+function initMuteButton() {
+  const btn = document.getElementById('mute-toggle');
+  if (!btn) return;
+
+  btn.addEventListener('click', () => {
+    isMuted = !isMuted;
+    if (isMuted) {
+      btn.textContent = '\uD83D\uDD07';
+      btn.classList.add('muted');
+      stopAll();
+    } else {
+      btn.textContent = '\uD83D\uDD0A';
+      btn.classList.remove('muted');
+    }
+  });
+}
+
+export function initVoice() {
+  const state = window.AppState;
+  if (!state) return;
+
+  initMuteButton();
+
+  state.on('phase_change', ({ to }) => {
+    const text = getNarration(to);
+    if (text) speak(text);
+  });
+
+  state.on('reset', () => {
+    stopAll();
+  });
+}