tryassay 0.21.1 → 0.22.0

package/demo/data/demo-events.json

@@ -0,0 +1,103 @@
+[
+  { "delay": 200, "type": "phase_change", "data": { "phase": "initializing" } },
+  { "delay": 500, "type": "agent_activate", "data": { "name": "Coordinator", "role": "coordinator", "status": "active", "trust": 0.95 } },
+  { "delay": 800, "type": "agent_activate", "data": { "name": "CodeGen", "role": "code", "status": "active", "trust": 0.90 } },
+  { "delay": 1100, "type": "agent_activate", "data": { "name": "Reviewer", "role": "review", "status": "active", "trust": 0.92 } },
+  { "delay": 1400, "type": "agent_activate", "data": { "name": "Tester", "role": "test", "status": "active", "trust": 0.88 } },
+
+  { "delay": 2000, "type": "phase_change", "data": { "phase": "planning" } },
+  { "delay": 2200, "type": "task_add", "data": { "id": "task-1", "title": "Design database schema", "agent": "Coordinator", "status": "in_progress" } },
+  { "delay": 2800, "type": "task_update", "data": { "id": "task-1", "status": "completed" } },
+  { "delay": 3000, "type": "task_add", "data": { "id": "task-2", "title": "Plan API routes", "agent": "Coordinator", "status": "in_progress" } },
+  { "delay": 3500, "type": "task_update", "data": { "id": "task-2", "status": "completed" } },
+  { "delay": 3700, "type": "task_add", "data": { "id": "task-3", "title": "Design auth flow", "agent": "Coordinator", "status": "in_progress" } },
+  { "delay": 4200, "type": "task_update", "data": { "id": "task-3", "status": "completed" } },
+  { "delay": 4400, "type": "task_add", "data": { "id": "task-4", "title": "Plan UI components", "agent": "Coordinator", "status": "in_progress" } },
+  { "delay": 4900, "type": "task_update", "data": { "id": "task-4", "status": "completed" } },
+  { "delay": 5100, "type": "task_add", "data": { "id": "task-5", "title": "Define page routes", "agent": "Coordinator", "status": "in_progress" } },
+  { "delay": 5600, "type": "task_update", "data": { "id": "task-5", "status": "completed" } },
+
+  { "delay": 6000, "type": "phase_change", "data": { "phase": "verifying_plan" } },
+  { "delay": 6300, "type": "verification", "data": { "claim": "Schema defines users table with id, email, password_hash", "result": "pass", "method": "formal" } },
+  { "delay": 6700, "type": "verification", "data": { "claim": "Schema defines todos table with user_id foreign key", "result": "pass", "method": "formal" } },
+  { "delay": 7100, "type": "verification", "data": { "claim": "Auth flow uses bcrypt for password hashing", "result": "pass", "method": "llm" } },
+  { "delay": 7400, "type": "verification", "data": { "claim": "API routes follow RESTful conventions", "result": "pass", "method": "llm" } },
+  { "delay": 7800, "type": "verification", "data": { "claim": "JWT tokens have expiration set", "result": "pass", "method": "formal" } },
+  { "delay": 8200, "type": "verification", "data": { "claim": "CRUD operations validate ownership", "result": "fail", "method": "llm" } },
+  { "delay": 8700, "type": "verification", "data": { "claim": "SQL injection prevented in query builder", "result": "pass", "method": "formal" } },
+  { "delay": 9200, "type": "verification", "data": { "claim": "CSRF protection on mutation endpoints", "result": "pass", "method": "llm" } },
+
+  { "delay": 10000, "type": "phase_change", "data": { "phase": "scaffolding" } },
+  { "delay": 10400, "type": "code_generated", "data": { "path": "package.json", "language": "json", "content": "{\n  \"name\": \"todo-app\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"dev\": \"tsx watch src/index.ts\",\n    \"build\": \"tsc && vite build\",\n    \"start\": \"node dist/index.js\",\n    \"db:push\": \"prisma db push\",\n    \"db:generate\": \"prisma generate\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.18.2\",\n    \"@prisma/client\": \"^5.8.0\",\n    \"bcryptjs\": \"^2.4.3\",\n    \"jsonwebtoken\": \"^9.0.2\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"prisma\": \"^5.8.0\",\n    \"typescript\": \"^5.3.3\",\n    \"vite\": \"^5.0.0\"\n  }\n}" } },
+  { "delay": 11000, "type": "code_generated", "data": { "path": "tsconfig.json", "language": "json", "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"jsx\": \"react-jsx\",\n    \"outDir\": \"./dist\",\n    \"rootDir\": \"./src\",\n    \"skipLibCheck\": true,\n    \"forceConsistentCasingInFileNames\": true\n  },\n  \"include\": [\"src/**/*\"]\n}" } },
+  { "delay": 11800, "type": "code_generated", "data": { "path": "prisma/schema.prisma", "language": "prisma", "content": "generator client {\n  provider = \"prisma-client-js\"\n}\n\ndatasource db {\n  provider = \"postgresql\"\n  url      = env(\"DATABASE_URL\")\n}\n\nmodel User {\n  id           String   @id @default(cuid())\n  email        String   @unique\n  passwordHash String   @map(\"password_hash\")\n  createdAt    DateTime @default(now())\n  todos        Todo[]\n}\n\nmodel Todo {\n  id        String   @id @default(cuid())\n  title     String\n  completed Boolean  @default(false)\n  userId    String\n  user      User     @relation(fields: [userId], references: [id])\n  createdAt DateTime @default(now())\n  updatedAt DateTime @updatedAt\n}" } },
+
+  { "delay": 13000, "type": "phase_change", "data": { "phase": "building_feature" } },
+  { "delay": 13200, "type": "task_add", "data": { "id": "task-6", "title": "Implement auth system", "agent": "CodeGen", "status": "in_progress" } },
+  { "delay": 13800, "type": "code_generated", "data": { "path": "src/auth/register.ts", "language": "typescript", "content": "import { PrismaClient } from '@prisma/client';\nimport bcrypt from 'bcryptjs';\nimport { z } from 'zod';\n\nconst prisma = new PrismaClient();\n\nconst RegisterSchema = z.object({\n  email: z.string().email(),\n  password: z.string().min(8).max(128)\n});\n\nexport async function register(email: string, password: string) {\n  const input = RegisterSchema.parse({ email, password });\n  \n  const existing = await prisma.user.findUnique({\n    where: { email: input.email }\n  });\n  \n  if (existing) {\n    throw new Error('Email already registered');\n  }\n  \n  const passwordHash = await bcrypt.hash(input.password, 12);\n  \n  const user = await prisma.user.create({\n    data: {\n      email: input.email,\n      passwordHash\n    },\n    select: { id: true, email: true, createdAt: true }\n  });\n  \n  return user;\n}" } },
+  { "delay": 14500, "type": "verification", "data": { "claim": "Register validates email format", "result": "pass", "method": "formal" } },
+  { "delay": 14900, "type": "verification", "data": { "claim": "Password hashed with bcrypt cost 12", "result": "pass", "method": "formal" } },
+  { "delay": 15200, "type": "code_generated", "data": { "path": "src/auth/login.ts", "language": "typescript", "content": "import { PrismaClient } from '@prisma/client';\nimport bcrypt from 'bcryptjs';\nimport jwt from 'jsonwebtoken';\nimport { z } from 'zod';\n\nconst prisma = new PrismaClient();\nconst JWT_SECRET = process.env.JWT_SECRET!;\n\nconst LoginSchema = z.object({\n  email: z.string().email(),\n  password: z.string()\n});\n\nexport async function login(email: string, password: string) {\n  const input = LoginSchema.parse({ email, password });\n  \n  const user = await prisma.user.findUnique({\n    where: { email: input.email }\n  });\n  \n  if (!user) {\n    throw new Error('Invalid credentials');\n  }\n  \n  const valid = await bcrypt.compare(input.password, user.passwordHash);\n  if (!valid) {\n    throw new Error('Invalid credentials');\n  }\n  \n  const token = jwt.sign(\n    { sub: user.id, email: user.email },\n    JWT_SECRET,\n    { expiresIn: '24h' }\n  );\n  \n  return { token, user: { id: user.id, email: user.email } };\n}" } },
+  { "delay": 15800, "type": "verification", "data": { "claim": "Login returns same error for missing user and wrong password", "result": "pass", "method": "llm" } },
+  { "delay": 16200, "type": "code_generated", "data": { "path": "src/middleware/auth.ts", "language": "typescript", "content": "import { Request, Response, NextFunction } from 'express';\nimport jwt from 'jsonwebtoken';\n\nconst JWT_SECRET = process.env.JWT_SECRET!;\n\nexport interface AuthRequest extends Request {\n  userId?: string;\n}\n\nexport function requireAuth(req: AuthRequest, res: Response, next: NextFunction) {\n  const header = req.headers.authorization;\n  \n  if (!header || !header.startsWith('Bearer ')) {\n    return res.status(401).json({ error: 'Missing authorization header' });\n  }\n  \n  const token = header.slice(7);\n  \n  try {\n    const payload = jwt.verify(token, JWT_SECRET) as { sub: string };\n    req.userId = payload.sub;\n    next();\n  } catch {\n    return res.status(401).json({ error: 'Invalid or expired token' });\n  }\n}" } },
+  { "delay": 16800, "type": "verification", "data": { "claim": "Auth middleware rejects missing Bearer prefix", "result": "pass", "method": "formal" } },
+  { "delay": 17200, "type": "verification", "data": { "claim": "JWT verification catches expired tokens", "result": "pass", "method": "llm" } },
+  { "delay": 17600, "type": "task_update", "data": { "id": "task-6", "status": "completed" } },
+
+  { "delay": 18000, "type": "task_add", "data": { "id": "task-7", "title": "Implement todo CRUD", "agent": "CodeGen", "status": "in_progress" } },
+  { "delay": 18500, "type": "code_generated", "data": { "path": "src/routes/todos.ts", "language": "typescript", "content": "import { Router } from 'express';\nimport { PrismaClient } from '@prisma/client';\nimport { requireAuth, AuthRequest } from '../middleware/auth';\nimport { z } from 'zod';\n\nconst router = Router();\nconst prisma = new PrismaClient();\n\nconst CreateTodoSchema = z.object({\n  title: z.string().min(1).max(500)\n});\n\nrouter.get('/', requireAuth, async (req: AuthRequest, res) => {\n  const todos = await prisma.todo.findMany({\n    where: { userId: req.userId },\n    orderBy: { createdAt: 'desc' },\n    take: 50\n  });\n  res.json(todos);\n});\n\nrouter.post('/', requireAuth, async (req: AuthRequest, res) => {\n  const input = CreateTodoSchema.parse(req.body);\n  const todo = await prisma.todo.create({\n    data: { title: input.title, userId: req.userId! }\n  });\n  res.status(201).json(todo);\n});\n\nrouter.patch('/:id', requireAuth, async (req: AuthRequest, res) => {\n  const todo = await prisma.todo.findFirst({\n    where: { id: req.params.id, userId: req.userId }\n  });\n  if (!todo) return res.status(404).json({ error: 'Not found' });\n  \n  const updated = await prisma.todo.update({\n    where: { id: todo.id },\n    data: { completed: !todo.completed }\n  });\n  res.json(updated);\n});\n\nrouter.delete('/:id', requireAuth, async (req: AuthRequest, res) => {\n  const todo = await prisma.todo.findFirst({\n    where: { id: req.params.id, userId: req.userId }\n  });\n  if (!todo) return res.status(404).json({ error: 'Not found' });\n  \n  await prisma.todo.delete({ where: { id: todo.id } });\n  res.status(204).send();\n});\n\nexport default router;" } },
+  { "delay": 19200, "type": "verification", "data": { "claim": "GET /todos filters by authenticated userId", "result": "pass", "method": "formal" } },
+  { "delay": 19600, "type": "verification", "data": { "claim": "PATCH validates ownership before toggling", "result": "pass", "method": "formal" } },
+  { "delay": 20000, "type": "code_generated", "data": { "path": "src/models/todo.ts", "language": "typescript", "content": "import { PrismaClient, Todo } from '@prisma/client';\n\nconst prisma = new PrismaClient();\n\nexport type TodoWithoutUser = Omit<Todo, 'userId'>;\n\nexport async function getUserTodos(\n  userId: string,\n  limit = 50,\n  offset = 0\n): Promise<TodoWithoutUser[]> {\n  return prisma.todo.findMany({\n    where: { userId },\n    orderBy: { createdAt: 'desc' },\n    take: limit,\n    skip: offset,\n    select: {\n      id: true,\n      title: true,\n      completed: true,\n      createdAt: true,\n      updatedAt: true\n    }\n  });\n}\n\nexport async function countUserTodos(userId: string): Promise<number> {\n  return prisma.todo.count({ where: { userId } });\n}\n\nexport async function toggleTodo(\n  id: string,\n  userId: string\n): Promise<Todo | null> {\n  const todo = await prisma.todo.findFirst({ where: { id, userId } });\n  if (!todo) return null;\n  return prisma.todo.update({\n    where: { id },\n    data: { completed: !todo.completed }\n  });\n}" } },
+  { "delay": 20600, "type": "verification", "data": { "claim": "getUserTodos applies pagination with limit and offset", "result": "pass", "method": "llm" } },
+  { "delay": 21000, "type": "verification", "data": { "claim": "toggleTodo checks ownership before update", "result": "pass", "method": "formal" } },
+  { "delay": 21400, "type": "verification", "data": { "claim": "Missing pagination on list endpoint", "result": "fail", "method": "llm" } },
+  { "delay": 21800, "type": "verification", "data": { "claim": "DELETE validates ownership before removal", "result": "pass", "method": "formal" } },
+  { "delay": 22200, "type": "task_update", "data": { "id": "task-7", "status": "completed" } },
+
+  { "delay": 23000, "type": "task_add", "data": { "id": "task-8", "title": "Build UI pages", "agent": "CodeGen", "status": "in_progress" } },
+  { "delay": 23500, "type": "code_generated", "data": { "path": "src/pages/LoginPage.tsx", "language": "tsx", "content": "import { useState, FormEvent } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nexport function LoginPage() {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState(false);\n  const navigate = useNavigate();\n\n  async function handleSubmit(e: FormEvent) {\n    e.preventDefault();\n    setError(null);\n    setLoading(true);\n    try {\n      const res = await fetch('/api/auth/login', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ email, password })\n      });\n      if (!res.ok) {\n        const data = await res.json();\n        throw new Error(data.error || 'Login failed');\n      }\n      const { token } = await res.json();\n      localStorage.setItem('token', token);\n      navigate('/todos');\n    } catch (err: any) {\n      setError(err.message);\n    } finally {\n      setLoading(false);\n    }\n  }\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <h1>Sign In</h1>\n      {error && <p className=\"error\">{error}</p>}\n      <input type=\"email\" value={email} onChange={e => setEmail(e.target.value)} placeholder=\"Email\" required />\n      <input type=\"password\" value={password} onChange={e => setPassword(e.target.value)} placeholder=\"Password\" required />\n      <button type=\"submit\" disabled={loading}>{loading ? 'Signing in...' : 'Sign In'}</button>\n    </form>\n  );\n}" } },
+  { "delay": 24200, "type": "verification", "data": { "claim": "Login form disables button during submission", "result": "pass", "method": "llm" } },
+  { "delay": 24600, "type": "verification", "data": { "claim": "Token stored in localStorage after login", "result": "pass", "method": "formal" } },
+  { "delay": 25200, "type": "code_generated", "data": { "path": "src/pages/TodoList.tsx", "language": "tsx", "content": "import { useState, useEffect } from 'react';\n\ninterface Todo {\n  id: string;\n  title: string;\n  completed: boolean;\n  createdAt: string;\n}\n\nexport function TodoList() {\n  const [todos, setTodos] = useState<Todo[]>([]);\n  const [newTitle, setNewTitle] = useState('');\n  const token = localStorage.getItem('token');\n  const headers = { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' };\n\n  useEffect(() => {\n    fetch('/api/todos', { headers }).then(r => r.json()).then(setTodos);\n  }, []);\n\n  async function addTodo() {\n    if (!newTitle.trim()) return;\n    const res = await fetch('/api/todos', {\n      method: 'POST', headers,\n      body: JSON.stringify({ title: newTitle })\n    });\n    const todo = await res.json();\n    setTodos(prev => [todo, ...prev]);\n    setNewTitle('');\n  }\n\n  async function toggle(id: string) {\n    const res = await fetch(`/api/todos/${id}`, { method: 'PATCH', headers });\n    const updated = await res.json();\n    setTodos(prev => prev.map(t => t.id === id ? updated : t));\n  }\n\n  async function remove(id: string) {\n    await fetch(`/api/todos/${id}`, { method: 'DELETE', headers });\n    setTodos(prev => prev.filter(t => t.id !== id));\n  }\n\n  return (\n    <div>\n      <h1>My Todos</h1>\n      <div className=\"add-form\">\n        <input value={newTitle} onChange={e => setNewTitle(e.target.value)} placeholder=\"What needs to be done?\" onKeyDown={e => e.key === 'Enter' && addTodo()} />\n        <button onClick={addTodo}>Add</button>\n      </div>\n      <ul className=\"todo-list\">\n        {todos.map(todo => (\n          <li key={todo.id} className={todo.completed ? 'completed' : ''}>\n            <input type=\"checkbox\" checked={todo.completed} onChange={() => toggle(todo.id)} />\n            <span>{todo.title}</span>\n            <button onClick={() => remove(todo.id)}>Delete</button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}" } },
+  { "delay": 25800, "type": "verification", "data": { "claim": "TodoList includes Authorization header on all requests", "result": "pass", "method": "formal" } },
+  { "delay": 26200, "type": "verification", "data": { "claim": "Optimistic UI update after toggle", "result": "pass", "method": "llm" } },
+  { "delay": 26600, "type": "verification", "data": { "claim": "Delete removes item from local state", "result": "pass", "method": "llm" } },
+  { "delay": 27200, "type": "task_update", "data": { "id": "task-8", "status": "completed" } },
+
+  { "delay": 28000, "type": "phase_change", "data": { "phase": "build_verifying" } },
+  { "delay": 28300, "type": "verification", "data": { "claim": "All routes use requireAuth middleware", "result": "pass", "method": "formal" } },
+  { "delay": 28600, "type": "verification", "data": { "claim": "Prisma schema matches API field names", "result": "pass", "method": "formal" } },
+  { "delay": 28900, "type": "verification", "data": { "claim": "Error responses use consistent JSON format", "result": "pass", "method": "llm" } },
+  { "delay": 29200, "type": "verification", "data": { "claim": "No raw SQL — all queries via Prisma ORM", "result": "pass", "method": "formal" } },
+  { "delay": 29500, "type": "verification", "data": { "claim": "Input validation on all POST/PATCH endpoints", "result": "pass", "method": "formal" } },
+  { "delay": 29800, "type": "verification", "data": { "claim": "JWT_SECRET loaded from environment variable", "result": "pass", "method": "formal" } },
+  { "delay": 30200, "type": "verification", "data": { "claim": "Password not included in user response objects", "result": "pass", "method": "llm" } },
+  { "delay": 30600, "type": "verification", "data": { "claim": "Rate limiting on auth endpoints", "result": "fail", "method": "llm" } },
+  { "delay": 31000, "type": "verification", "data": { "claim": "CORS configured for frontend origin", "result": "pass", "method": "llm" } },
+  { "delay": 31400, "type": "verification", "data": { "claim": "Prisma client instantiated once per module", "result": "pass", "method": "formal" } },
+
+  { "delay": 31700, "type": "phase_change", "data": { "phase": "build_repairing" } },
+  { "delay": 32000, "type": "task_add", "data": { "id": "task-9", "title": "Fix rate limiting on auth endpoints", "agent": "CodeGen", "status": "in_progress" } },
+  { "delay": 32600, "type": "code_generated", "data": { "path": "src/middleware/rate-limiter.ts", "language": "typescript", "content": "import rateLimit from 'express-rate-limit';\n\nexport const authLimiter = rateLimit({\n  windowMs: 15 * 60 * 1000,\n  max: 5,\n  standardHeaders: true,\n  legacyHeaders: false,\n  message: { error: 'Too many login attempts, please try again later' }\n});\n\nexport const apiLimiter = rateLimit({\n  windowMs: 60 * 1000,\n  max: 100,\n  standardHeaders: true,\n  legacyHeaders: false,\n  message: { error: 'Rate limit exceeded' }\n});" } },
+  { "delay": 33100, "type": "verification", "data": { "claim": "Rate limiting applied to auth endpoints", "result": "pass", "method": "formal" } },
+  { "delay": 33400, "type": "task_update", "data": { "id": "task-9", "status": "completed" } },
+
+  { "delay": 34000, "type": "phase_change", "data": { "phase": "cross_verifying" } },
+  { "delay": 34400, "type": "verification", "data": { "claim": "Auth middleware applied to todo routes", "result": "pass", "method": "formal" } },
+  { "delay": 34800, "type": "verification", "data": { "claim": "Foreign key constraint enforced in queries", "result": "pass", "method": "formal" } },
+  { "delay": 35200, "type": "verification", "data": { "claim": "Login page redirects to todo list on success", "result": "pass", "method": "llm" } },
+  { "delay": 35600, "type": "verification", "data": { "claim": "Logout clears JWT from client storage", "result": "pass", "method": "llm" } },
+  { "delay": 36000, "type": "verification", "data": { "claim": "Error responses use consistent format across all endpoints", "result": "pass", "method": "llm" } },
+
+  { "delay": 38000, "type": "phase_change", "data": { "phase": "finalizing" } },
+  { "delay": 39000, "type": "agent_activate", "data": { "name": "CodeGen", "role": "code", "status": "idle", "trust": 0.93 } },
+  { "delay": 39200, "type": "agent_activate", "data": { "name": "Reviewer", "role": "review", "status": "idle", "trust": 0.94 } },
+  { "delay": 39400, "type": "agent_activate", "data": { "name": "Tester", "role": "test", "status": "idle", "trust": 0.91 } },
+
+  { "delay": 40500, "type": "phase_change", "data": { "phase": "completed" } },
+  { "delay": 40700, "type": "agent_activate", "data": { "name": "Coordinator", "role": "coordinator", "status": "idle", "trust": 0.96 } },
+
+  { "delay": 43000, "type": "phase_change", "data": { "phase": "failed" } },
+  { "delay": 45000, "type": "phase_change", "data": { "phase": "completed" } }
+]

package/demo/index.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Assay Verified Agent Runtime</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div id="app">
+    <!-- Header with input bar -->
+    <header id="header">
+      <div id="input-bar">
+        <input
+          type="text"
+          id="prompt-input"
+          placeholder="Describe an application to build..."
+          autocomplete="off"
+        >
+        <button id="submit-btn">Build</button>
+      </div>
+      <div id="global-clock" class="global-clock hidden">
+        <span class="clock-value" id="clock-value">00:00</span>
+        <span class="clock-label">elapsed</span>
+      </div>
+      <button id="mute-toggle" title="Toggle voice narration">&#x1f50a;</button>
+    </header>
+
+    <!-- Plan summary overlay (shown briefly before auto-approve) -->
+    <div id="plan-overlay"></div>
+
+    <!-- Completion overlay with launch button -->
+    <div id="completion-overlay"></div>
+
+    <!-- Three.js orb visualization -->
+    <div id="orb-container"></div>
+
+    <!-- Timeline panel — right side -->
+    <div id="timeline-panel">
+      <div id="metrics-bar">
+        <div class="metric">
+          <span class="metric-value" id="metric-tasks">0/0</span>
+          <span class="metric-label">Tasks</span>
+        </div>
+        <div class="metric">
+          <span class="metric-value" id="metric-claims">0</span>
+          <span class="metric-label">Claims</span>
+        </div>
+        <div class="metric">
+          <span class="metric-value" id="metric-failed">0</span>
+          <span class="metric-label">Caught</span>
+        </div>
+        <div class="metric">
+          <span class="metric-value" id="metric-files">0</span>
+          <span class="metric-label">Files</span>
+        </div>
+      </div>
+      <div id="timeline-steps"></div>
+    </div>
+
+    <!-- Code streaming panel — bottom -->
+    <div id="code-panel">
+      <div id="code-tabs"></div>
+      <div id="code-content"></div>
+    </div>
+  </div>
+
+  <!-- CDN imports — no build step -->
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://cdn.jsdelivr.net/npm/three@0.162.0/build/three.module.js",
+      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.162.0/examples/jsm/"
+    }
+  }
+  </script>
+
+  <!-- Load modules -->
+  <script type="module" src="js/state.js"></script>
+  <script type="module" src="js/orb.js"></script>
+  <script type="module" src="js/timeline.js"></script>
+  <script type="module" src="js/code-panel.js"></script>
+  <script type="module" src="js/voice.js"></script>
+  <script type="module" src="js/question-cards.js"></script>
+  <script type="module" src="js/chat.js"></script>
+  <script type="module" src="js/sse-client.js"></script>
+  <script type="module" src="js/demo-mode.js"></script>
+
+  <!-- Bootstrap -->
+  <script type="module">
+    import './js/state.js';
+    import { initOrb } from './js/orb.js';
+    import { initTimeline } from './js/timeline.js';
+    import { initCodePanel } from './js/code-panel.js';
+    import { initVoice } from './js/voice.js';
+    import { initSSEClient } from './js/sse-client.js';
+    import { initDemoMode, startDemo } from './js/demo-mode.js';
+
+    // ── Config ──
+    // API server URL — override with ?api=http://host:port
+    // API key — override with ?key=xxx or server auto-generates one on startup
+    const params = new URLSearchParams(window.location.search);
+    const API_BASE = params.get('api') || 'http://localhost:3800';
+    const API_KEY = params.get('key') || '';
+
+    // Initialize all modules
+    try { initOrb(); } catch (e) { console.warn('[Boot] Orb init failed (no WebGL?):', e.message); }
+    initTimeline();
+    initCodePanel();
+    initVoice();
+    initSSEClient(API_BASE, API_KEY);
+    initDemoMode();
+
+    // Input bar logic
+    const input = document.getElementById('prompt-input');
+    const btn = document.getElementById('submit-btn');
+
+    // Derive a sensible AppDescription from a natural-language prompt
+    function buildAppDescription(prompt) {
+      // Extract a short name from the prompt
+      const name = prompt
+        .replace(/^(build|create|make|generate)\s+(a|an|me|my)?\s*/i, '')
+        .split(/[.,!?\n]/)[0]
+        .trim()
+        .slice(0, 50)
+        .replace(/\s+/g, '-')
+        .toLowerCase() || 'my-app';
+
+      // Detect features from the prompt
+      const features = [];
+      const lower = prompt.toLowerCase();
+      if (/auth|login|signup|sign.?up|register|password/.test(lower)) features.push('User authentication with email/password');
+      if (/todo|task|checklist/.test(lower)) features.push('Todo/task CRUD with completion tracking');
+      if (/blog|post|article|cms/.test(lower)) features.push('Blog post management with markdown');
+      if (/chat|message|real.?time/.test(lower)) features.push('Real-time chat messaging');
+      if (/e.?commerce|shop|cart|product|payment/.test(lower)) features.push('Product catalog with shopping cart');
+      if (/dashboard|admin|analytics/.test(lower)) features.push('Admin dashboard with analytics');
+      if (/api|rest|endpoint/.test(lower)) features.push('REST API endpoints');
+      if (/search|filter/.test(lower)) features.push('Search and filtering');
+      if (/upload|file|image/.test(lower)) features.push('File upload handling');
+      if (/notification|email|alert/.test(lower)) features.push('Notification system');
+      // If nothing matched, add the whole prompt as a feature
+      if (features.length === 0) features.push(prompt);
+
+      // Detect tech preferences or default
+      let framework = 'next.js';
+      let database = 'supabase';
+      if (/express|node/.test(lower)) framework = 'express';
+      if (/svelte/.test(lower)) framework = 'sveltekit';
+      if (/electron|desktop/.test(lower)) framework = 'electron';
+      if (/postgres(?!.*supa)/.test(lower)) database = 'postgresql';
+      if (/sqlite/.test(lower)) database = 'sqlite';
+
+      return {
+        name,
+        description: prompt,
+        techStack: {
+          language: 'typescript',
+          framework,
+          database,
+          styling: 'tailwind',
+        },
+        features,
+      };
+    }
+
+    btn.addEventListener('click', async () => {
+      const prompt = input.value.trim();
+      if (!prompt) return;
+
+      // Reset state for new run
+      AppState.reset();
+      input.disabled = true;
+      btn.disabled = true;
+
+      // Force demo mode
+      if (params.get('demo') === 'true') {
+        startDemo(prompt);
+        return;
+      }
+
+      // Try live API
+      const appDesc = buildAppDescription(prompt);
+      const headers = { 'Content-Type': 'application/json' };
+      if (API_KEY) headers['Authorization'] = `Bearer ${API_KEY}`;
+
+      try {
+        const res = await fetch(`${API_BASE}/api/v1/app/create`, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify({ ...appDesc, autoApprove: false }),
+        });
+
+        if (!res.ok) {
+          const err = await res.text();
+          throw new Error(`API ${res.status}: ${err}`);
+        }
+
+        const data = await res.json();
+        window.__appId = data.id || data.sessionId;
+        // Connect SSE BEFORE updating phase to avoid missing early events
+        window.__connectSSE(window.__appId);
+        AppState.update({ phase: 'initializing' });
+        AppState.addLog({ type: 'system', message: `Session started: ${window.__appId}` });
+      } catch (err) {
+        console.warn('[Boot] API unavailable, falling back to demo mode:', err.message);
+        startDemo(prompt);
+      }
+    });
+
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') btn.click();
+    });
+
+    // Auto-start demo mode if ?demo=true
+    if (params.get('demo') === 'true' && !input.value) {
+      input.value = 'Build a todo app with authentication';
+      setTimeout(() => btn.click(), 1000);
+    }
+  </script>
+</body>
+</html>

package/demo/js/chat.js

@@ -0,0 +1,292 @@
+// chat.js — Conversational chat for requirements gathering
+// Renders in #plan-overlay, replaces question-cards.js for planning phase
+
+const AppState = window.AppState;
+
+let chatConfig = { apiBase: '', apiKey: '' };
+let currentSessionId = null;
+let pendingCardAnswers = [];
+
+/**
+ * Configure API connection (called from sse-client.js)
+ */
+export function configureChat(apiBase, apiKey) {
+  chatConfig.apiBase = apiBase || '';
+  chatConfig.apiKey = apiKey || '';
+}
+
+/**
+ * Open the chat interface in #plan-overlay.
+ * Called once when the first chat_message SSE event arrives.
+ */
+export function openChat(sessionId) {
+  const overlay = document.getElementById('plan-overlay');
+  if (!overlay) return;
+
+  currentSessionId = sessionId;
+  pendingCardAnswers = [];
+
+  overlay.innerHTML = `
+    <div class="chat-container">
+      <div class="chat-messages" id="chat-messages"></div>
+      <div class="chat-input-bar">
+        <input
+          type="text"
+          id="chat-input"
+          placeholder="Type a message..."
+          autocomplete="off"
+        >
+        <button id="chat-send-btn">Send</button>
+      </div>
+    </div>
+  `;
+
+  overlay.classList.add('visible');
+
+  // Bind send button
+  const sendBtn = document.getElementById('chat-send-btn');
+  const chatInput = document.getElementById('chat-input');
+
+  sendBtn.addEventListener('click', () => sendMessage());
+  chatInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') sendMessage();
+  });
+
+  // Hide the header input bar during chat
+  const header = document.getElementById('header');
+  if (header) header.classList.add('chat-active');
+}
+
+/**
+ * Add an architect message to the chat.
+ * Called on each chat_message SSE event.
+ */
+export function addArchitectMessage(data) {
+  let messagesEl = document.getElementById('chat-messages');
+  if (!messagesEl) {
+    // Chat not open yet — open it first
+    openChat(data.sessionId || window.__appId);
+    messagesEl = document.getElementById('chat-messages');
+    if (!messagesEl) return; // openChat failed, bail
+  }
+
+  const msgDiv = document.createElement('div');
+  msgDiv.className = 'chat-msg chat-msg-architect';
+
+  // Message text
+  const textDiv = document.createElement('div');
+  textDiv.className = 'chat-msg-text';
+  textDiv.textContent = data.content;
+  msgDiv.appendChild(textDiv);
+
+  // Structured cards (if any)
+  if (data.cards && data.cards.length > 0) {
+    const cardsDiv = document.createElement('div');
+    cardsDiv.className = 'chat-cards';
+
+    for (const card of data.cards) {
+      const cardEl = renderCard(card);
+      cardsDiv.appendChild(cardEl);
+    }
+
+    msgDiv.appendChild(cardsDiv);
+  }
+
+  // "Start Building" button (if ready)
+  if (data.readiness && data.readiness.ready) {
+    const buildBtn = document.createElement('button');
+    buildBtn.className = 'chat-build-btn';
+    buildBtn.textContent = 'Start Building';
+    buildBtn.addEventListener('click', () => startBuilding());
+
+    const summaryDiv = document.createElement('div');
+    summaryDiv.className = 'chat-ready-summary';
+    summaryDiv.textContent = data.readiness.summary || '';
+
+    msgDiv.appendChild(summaryDiv);
+    msgDiv.appendChild(buildBtn);
+  }
+
+  messagesEl.appendChild(msgDiv);
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+/**
+ * Close the chat and proceed to build phase.
+ */
+export function closeChat() {
+  const overlay = document.getElementById('plan-overlay');
+  if (overlay) {
+    overlay.classList.remove('visible');
+    setTimeout(() => { overlay.innerHTML = ''; }, 500);
+  }
+
+  // Restore header input bar
+  const header = document.getElementById('header');
+  if (header) header.classList.remove('chat-active');
+
+  currentSessionId = null;
+  pendingCardAnswers = [];
+}
+
+// ── Internal ──
+
+function renderCard(card) {
+  const cardEl = document.createElement('div');
+  cardEl.className = 'chat-card';
+  cardEl.dataset.cardId = card.id;
+
+  const headerEl = document.createElement('div');
+  headerEl.className = 'chat-card-header';
+  headerEl.textContent = card.header || card.question;
+  cardEl.appendChild(headerEl);
+
+  const questionEl = document.createElement('div');
+  questionEl.className = 'chat-card-question';
+  questionEl.textContent = card.question;
+  cardEl.appendChild(questionEl);
+
+  const optionsEl = document.createElement('div');
+  optionsEl.className = 'chat-card-options';
+
+  for (const opt of card.options) {
+    const optEl = document.createElement('div');
+    optEl.className = 'chat-card-option';
+    optEl.dataset.cardId = card.id;
+    optEl.dataset.label = opt.label;
+    optEl.dataset.multi = card.multiSelect ? 'true' : 'false';
+
+    const labelEl = document.createElement('div');
+    labelEl.className = 'chat-card-option-label';
+    labelEl.textContent = opt.label;
+    optEl.appendChild(labelEl);
+
+    const descEl = document.createElement('div');
+    descEl.className = 'chat-card-option-desc';
+    descEl.textContent = opt.description;
+    optEl.appendChild(descEl);
+
+    optEl.addEventListener('click', () => handleCardOptionClick(optEl, card));
+    optionsEl.appendChild(optEl);
+  }
+
+  cardEl.appendChild(optionsEl);
+  return cardEl;
+}
+
+function handleCardOptionClick(optEl, card) {
+  const cardId = optEl.dataset.cardId;
+  const label = optEl.dataset.label;
+  const isMulti = optEl.dataset.multi === 'true';
+
+  if (isMulti) {
+    optEl.classList.toggle('selected');
+  } else {
+    // Deselect siblings
+    const siblings = optEl.parentElement.querySelectorAll('.chat-card-option');
+    siblings.forEach(s => s.classList.remove('selected'));
+    optEl.classList.add('selected');
+  }
+
+  // Update pending card answers
+  const existingIdx = pendingCardAnswers.findIndex(a => a.questionId === cardId);
+  if (existingIdx >= 0) {
+    pendingCardAnswers.splice(existingIdx, 1);
+  }
+
+  // Collect all selected options for this card
+  const cardEl = optEl.closest('.chat-card');
+  const selectedOpts = cardEl.querySelectorAll('.chat-card-option.selected');
+  const selectedLabels = Array.from(selectedOpts).map(el => el.dataset.label);
+
+  if (selectedLabels.length > 0) {
+    pendingCardAnswers.push({
+      questionId: cardId,
+      selectedOptions: selectedLabels,
+    });
+  }
+}
+
+async function sendMessage() {
+  const input = document.getElementById('chat-input');
+  if (!input) return;
+
+  const message = input.value.trim();
+  if (!message && pendingCardAnswers.length === 0) return;
+
+  const sessionId = currentSessionId || window.__appId;
+  if (!sessionId) return;
+
+  // Add user message to chat
+  const messagesEl = document.getElementById('chat-messages');
+  if (messagesEl && message) {
+    const msgDiv = document.createElement('div');
+    msgDiv.className = 'chat-msg chat-msg-user';
+    const textDiv = document.createElement('div');
+    textDiv.className = 'chat-msg-text';
+    textDiv.textContent = message;
+    msgDiv.appendChild(textDiv);
+    messagesEl.appendChild(msgDiv);
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+  }
+
+  // Clear input
+  input.value = '';
+
+  // Build request body
+  const body = { message: message || '' };
+  if (pendingCardAnswers.length > 0) {
+    body.cardAnswers = [...pendingCardAnswers];
+    pendingCardAnswers = [];
+  }
+
+  // Disable all card options after submitting
+  const allCards = document.querySelectorAll('.chat-card');
+  allCards.forEach(card => {
+    card.querySelectorAll('.chat-card-option').forEach(opt => {
+      opt.style.pointerEvents = 'none';
+      opt.style.opacity = '0.6';
+    });
+  });
+
+  // Send to API
+  const headers = { 'Content-Type': 'application/json' };
+  if (chatConfig.apiKey) headers['Authorization'] = `Bearer ${chatConfig.apiKey}`;
+
+  try {
+    const res = await fetch(`${chatConfig.apiBase}/api/v1/app/${sessionId}/chat`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(body),
+    });
+
+    if (!res.ok) {
+      console.error('[Chat] Send failed:', res.status);
+      AppState.addLog({ level: 'error', message: `Chat send failed: ${res.status}` });
+    }
+  } catch (err) {
+    console.error('[Chat] Send error:', err);
+    AppState.addLog({ level: 'error', message: `Chat error: ${err.message}` });
+  }
+}
+
+async function startBuilding() {
+  const sessionId = currentSessionId || window.__appId;
+  if (!sessionId) return;
+
+  const headers = { 'Content-Type': 'application/json' };
+  if (chatConfig.apiKey) headers['Authorization'] = `Bearer ${chatConfig.apiKey}`;
+
+  try {
+    await fetch(`${chatConfig.apiBase}/api/v1/app/${sessionId}/chat`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ message: '__START_BUILD__' }),
+    });
+  } catch (err) {
+    console.error('[Chat] Start build error:', err);
+  }
+
+  closeChat();
+  AppState.addLog({ level: 'success', message: 'Requirements confirmed — starting build...' });
+}