create-theokit 0.7.0 → 0.9.0

package/templates/default/AGENTS.md

@@ -0,0 +1,96 @@
+# AGENTS.md — TheoKit App
+
+Guide for coding agents (Claude, Copilot, Cursor) working on this TheoKit project.
+
+## Architecture
+
+This is a **full-stack TypeScript app** built with TheoKit — a framework for AI agent apps.
+
+```
+app.ts              → Entry point: TheoApp.create({ controllers, agents, providers })
+server/
+  controllers/      → HTTP endpoints (@Controller + @Get/@Post/@Delete)
+  agents/           → AI agents (@Agent + @MainLoop + @Tool)
+  toolboxes/        → Agent tools (@Toolbox + @Tool with Zod schemas)
+  guards/           → Auth/RBAC (@UseGuards + canActivate)
+  interceptors/     → Request/response transforms (@UseInterceptors)
+  filters/          → Error formatting (@UseFilters + @Catch)
+  middleware/       → Request pipeline (NestMiddleware)
+  store.ts          → In-memory data store
+app/
+  page.tsx          → React frontend
+  layout.tsx        → Root layout
+public/
+  index.html        → Static HTML frontend with chat UI
+```
+
+## Key Patterns
+
+### Controllers (HTTP API)
+```typescript
+import { Controller, Get, Post, Body, Param } from '@theokit/http'
+import { z } from 'zod'
+
+const zCreate = z.object({ title: z.string().min(3) })
+
+@Controller('api/tasks')
+class TasksController {
+  @Get()
+  list() { return tasks }
+
+  @Post()
+  create(@Body(zCreate) body: z.infer<typeof zCreate>) {
+    return store.create(body)  // 201 automatic for POST
+  }
+}
+```
+
+### Agents (AI with tools)
+```typescript
+import { Agent, MainLoop, Toolbox, Tool, Mixin } from '@theokit/agents'
+
+@Agent({ name: 'assistant', route: '/api/agents/assistant', model: 'openai/gpt-4o-mini' })
+@Mixin(TaskTools)
+class AssistantAgent {
+  @MainLoop({ strategy: 'react' })
+  async run() {}
+}
+```
+
+### Validation
+- **Zod is the single source of truth** — define schema once, get types + validation + OpenAPI
+- `@Body(zodSchema)` validates automatically, returns 422 on failure
+- Use `z.infer<typeof schema>` for TypeScript types
+
+### Error Handling
+- `throw new NotFoundException('...')` → 404
+- `throw new BadRequestException('...')` → 400
+- `@UseFilters(MyFilter)` for custom error format
+- 500 errors are scrubbed — raw messages never reach clients
+
+### Guards (Auth/RBAC)
+- `@UseGuards(AuthGuard)` on controller or agent
+- Guards apply to BOTH HTTP and agent routes (shared pipeline)
+- `canActivate(ctx: ExecutionContext): boolean`
+
+### Path Aliases
+- `@/*` → project root (configured in tsconfig.json)
+- `@/server/*` → `./server/*`
+
+## Commands
+
+```bash
+npm run dev          # Start dev server (tsx --watch)
+npm run build        # Build for production (tsup)
+npm run start        # Run production build
+npm run lint         # ESLint check
+npm run format       # Prettier format
+npm run typecheck    # TypeScript type check
+```
+
+## Don't
+
+- Don't use `any` — use Zod schemas + `z.infer<>`
+- Don't write raw `res.status().json()` — use decorators (`@HttpCode`, `@Header`)
+- Don't create separate auth middleware for agents — use `@UseGuards` (same as controllers)
+- Don't parse request body manually — use `@Body(zodSchema)`

package/templates/default/app/error.tsx

@@ -0,0 +1,11 @@
+export default function ErrorPage() {
+  return (
+    <div className="container" style={{ textAlign: 'center', paddingTop: '20vh' }}>
+      <h1 style={{ fontSize: '2rem', marginBottom: '12px' }}>Something went wrong</h1>
+      <p className="subtitle">An unexpected error occurred.</p>
+      <a href="/" style={{ color: 'var(--accent)', marginTop: '16px', display: 'inline-block' }}>
+        Go back home
+      </a>
+    </div>
+  )
+}

package/templates/default/app/layout.tsx

@@ -5,50 +5,11 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>TheoKit App</title>
-        <style dangerouslySetInnerHTML={{ __html: STYLES }} />
+        <meta name="description" content="Built with TheoKit — the app your agent lives in" />
+        <link rel="stylesheet" href="/globals.css" />
+        <link rel="icon" href="/favicon.svg" />
       </head>
       <body>{children}</body>
     </html>
   )
 }
-
-const STYLES = `
-  :root { --bg: #0a0a0a; --card: #141414; --border: #2a2a2a; --text: #e0e0e0; --muted: #888; --accent: #6366f1; --green: #22c55e; --red: #ef4444; --yellow: #eab308; }
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
-  #app { max-width: 1200px; margin: 0 auto; padding: 20px; }
-  header { margin-bottom: 24px; }
-  h1 { font-size: 1.6rem; } .accent { color: var(--accent); }
-  .subtitle { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
-  .role-bar { margin-top: 12px; }
-  .role-bar select { padding: 6px 12px; background: #1a1a1a; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.8rem; }
-  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media(max-width:768px){.grid{grid-template-columns:1fr;}}
-  .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
-  h2 { font-size: 1rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
-  .badge { font-size: 0.65rem; padding: 2px 8px; border-radius: 99px; background: #6366f122; color: var(--accent); }
-  .badge-ai { background: #eab30822; color: var(--yellow); }
-  table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
-  th { text-align: left; padding: 8px 4px; color: var(--muted); border-bottom: 1px solid var(--border); font-weight: 500; }
-  td { padding: 8px 4px; border-bottom: 1px solid var(--border); }
-  tr.done td { opacity: 0.5; text-decoration: line-through; }
-  .prio { font-size: 0.7rem; padding: 2px 8px; border-radius: 99px; }
-  .prio-high { background: #ef444422; color: var(--red); } .prio-med { background: #eab30822; color: var(--yellow); } .prio-low { background: #22c55e22; color: var(--green); }
-  .create-bar { display: flex; gap: 8px; margin-top: 14px; }
-  .create-bar input { flex: 1; padding: 8px 12px; background: #1a1a1a; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.85rem; }
-  .create-bar select { padding: 8px; background: #1a1a1a; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.8rem; }
-  .create-bar button { padding: 8px 16px; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
-  .error { color: var(--red); font-size: 0.8rem; margin-top: 4px; }
-  .chat-box { height: 400px; overflow-y: auto; padding: 12px; background: #0d0d0d; border-radius: 8px; margin-bottom: 10px; font-size: 0.85rem; line-height: 1.6; }
-  .msg { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; }
-  .msg.user { background: #6366f118; color: var(--accent); }
-  .msg.agent { background: #1a1a1a; }
-  .msg.tool { background: #eab30810; color: var(--yellow); font-size: 0.78rem; font-family: monospace; }
-  .msg.system { color: var(--muted); font-size: 0.78rem; font-style: italic; }
-  .msg.error { color: var(--red); font-size: 0.8rem; }
-  .chat-bar { display: flex; gap: 8px; }
-  .chat-bar input { flex: 1; padding: 10px 14px; background: #1a1a1a; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.9rem; outline: none; }
-  .chat-bar input:focus { border-color: var(--accent); }
-  .chat-bar button { padding: 10px 20px; background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }
-  .chat-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
-  .cost { color: var(--muted); font-size: 0.75rem; margin-top: 6px; text-align: right; }
-`

package/templates/default/app/loading.tsx

@@ -0,0 +1,10 @@
+export default function Loading() {
+  return (
+    <div
+      className="container"
+      style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '60vh' }}
+    >
+      <div className="loading-spinner" />
+    </div>
+  )
+}

package/templates/default/app/not-found.tsx

@@ -0,0 +1,13 @@
+export default function NotFound() {
+  return (
+    <div className="container" style={{ textAlign: 'center', paddingTop: '20vh' }}>
+      <h1 style={{ fontSize: '4rem', fontWeight: 700, color: 'var(--text-muted)' }}>404</h1>
+      <p className="subtitle" style={{ fontSize: '1.1rem' }}>
+        Page not found
+      </p>
+      <a href="/" style={{ color: 'var(--accent)', marginTop: '16px', display: 'inline-block' }}>
+        Go back home
+      </a>
+    </div>
+  )
+}

package/templates/default/app/page.tsx

@@ -1,20 +1,19 @@
-/**
- * Main page — Task Manager + AI Chat.
- *
- * Split layout: left side CRUD, right side AI agent chat.
- * SSE streaming renders token-by-token with tool call visualization.
- */
 export default function Page() {
   return (
-    <div id="app">
+    <div className="container">
       <header>
-        <h1><span className="accent">TheoKit</span> Task Manager</h1>
-        <p className="subtitle">HTTP Controllers + AI Agent — same pipeline, same guards</p>
+        <h1>
+          <span className="accent">TheoKit</span> Task Manager
+        </h1>
+        <p className="subtitle">
+          HTTP Controllers + AI Agent — same guards, distinct pipelines. Edit <code>server/</code>{' '}
+          to get started.
+        </p>
         <div className="role-bar">
-          <label>Role: </label>
-          <select id="role">
+          <label htmlFor="role">Role:</label>
+          <select id="role" defaultValue="user">
             <option value="">None (public only)</option>
-            <option value="user" selected>User</option>
+            <option value="user">User</option>
             <option value="admin">Admin</option>
           </select>
         </div>
@@ -23,10 +22,18 @@ export default function Page() {
       <main className="grid">
         {/* Left: CRUD Panel */}
         <section className="card">
-          <h2>📋 Tasks <span className="badge">@Controller</span></h2>
+          <h2>
+            Tasks <span className="badge">@Controller</span>
+          </h2>
           <table>
-            <thead><tr><th>Task</th><th>Priority</th><th>Status</th></tr></thead>
-            <tbody id="task-list"></tbody>
+            <thead>
+              <tr>
+                <th>Task</th>
+                <th>Priority</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody id="task-list" />
           </table>
           <form id="create-form" className="create-bar">
             <input id="new-title" placeholder="New task..." required minLength={3} />
@@ -37,147 +44,28 @@ export default function Page() {
             </select>
             <button type="submit">Add</button>
           </form>
-          <p id="form-error" className="error"></p>
+          <p id="form-error" className="error" />
         </section>
 
         {/* Right: AI Chat */}
         <section className="card">
-          <h2>🤖 AI Assistant <span className="badge badge-ai">@Agent + SSE</span></h2>
+          <h2>
+            AI Assistant <span className="badge badge-ai">@Agent + SSE</span>
+          </h2>
           <div id="chat" className="chat-box">
             <div className="msg system">Ask me to list, create, or complete tasks...</div>
           </div>
           <div className="chat-bar">
             <input id="chat-input" placeholder="Message the AI assistant..." />
-            <button id="chat-send" onClick={() => {}}>Send</button>
+            <button id="chat-send" type="button">
+              Send
+            </button>
           </div>
-          <p id="chat-cost" className="cost"></p>
+          <p id="chat-cost" className="cost" />
         </section>
       </main>
 
-      <ClientScript />
+      <script src="/client.js" defer />
     </div>
   )
 }
-
-function ClientScript() {
-  return (
-    <script dangerouslySetInnerHTML={{ __html: CLIENT_JS }} />
-  )
-}
-
-const CLIENT_JS = `
-const API = '';
-let sessionId = 'session-' + Date.now();
-const getRole = () => document.getElementById('role').value;
-const headers = () => {
-  const h = { 'Content-Type': 'application/json' };
-  const r = getRole();
-  if (r) h['x-role'] = r;
-  return h;
-};
-
-// ─── Tasks CRUD ─────────────────────────────────────
-
-async function loadTasks() {
-  const res = await fetch(API + '/api/tasks');
-  const tasks = await res.json();
-  document.getElementById('task-list').innerHTML = tasks.map(t => {
-    const statusClass = t.done ? 'done' : 'pending';
-    const prioClass = t.priority === 'high' ? 'prio-high' : t.priority === 'low' ? 'prio-low' : 'prio-med';
-    return '<tr class="' + statusClass + '"><td>' + (t.done ? '✅ ' : '○ ') + t.title + '</td><td><span class="prio ' + prioClass + '">' + t.priority + '</span></td><td>' + (t.done ? 'Done' : 'To do') + '</td></tr>';
-  }).join('');
-}
-
-document.getElementById('create-form').addEventListener('submit', async (e) => {
-  e.preventDefault();
-  const title = document.getElementById('new-title').value.trim();
-  const priority = document.getElementById('new-priority').value;
-  const err = document.getElementById('form-error');
-  err.textContent = '';
-  if (!title) return;
-  const res = await fetch(API + '/api/tasks', { method: 'POST', headers: headers(), body: JSON.stringify({ title, priority }) });
-  if (res.status === 403) { err.textContent = '403 — Need User role'; return; }
-  if (res.status === 422) { const e = await res.json(); err.textContent = e.error?.issues?.[0]?.message || 'Validation error'; return; }
-  if (!res.ok) { err.textContent = 'Error ' + res.status; return; }
-  document.getElementById('new-title').value = '';
-  loadTasks();
-});
-
-// ─── AI Chat (SSE) ──────────────────────────────────
-
-document.getElementById('chat-send').addEventListener('click', sendChat);
-document.getElementById('chat-input').addEventListener('keydown', (e) => { if (e.key === 'Enter') sendChat(); });
-
-async function sendChat() {
-  const input = document.getElementById('chat-input');
-  const msg = input.value.trim();
-  if (!msg) return;
-  input.value = '';
-
-  const chat = document.getElementById('chat');
-  chat.innerHTML += '<div class="msg user">You: ' + escapeHtml(msg) + '</div>';
-  document.getElementById('chat-send').disabled = true;
-
-  try {
-    const res = await fetch(API + '/api/agents/assistant/chat', {
-      method: 'POST', headers: headers(),
-      body: JSON.stringify({ message: msg, sessionId })
-    });
-
-    if (res.status === 403) {
-      chat.innerHTML += '<div class="msg system">403 — Need User role to chat</div>';
-      document.getElementById('chat-send').disabled = false;
-      return;
-    }
-
-    const reader = res.body.getReader();
-    const decoder = new TextDecoder();
-    let agentDiv = document.createElement('div');
-    agentDiv.className = 'msg agent';
-    agentDiv.textContent = '';
-    chat.appendChild(agentDiv);
-
-    let buffer = '';
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-      buffer += decoder.decode(value, { stream: true });
-      const lines = buffer.split('\\n');
-      buffer = lines.pop() || '';
-      for (const line of lines) {
-        if (!line.startsWith('data: ')) continue;
-        try {
-          const ev = JSON.parse(line.slice(6));
-          if (ev.type === 'text_delta') {
-            agentDiv.innerHTML += formatMarkdown(ev.content);
-          } else if (ev.type === 'tool_call') {
-            chat.insertBefore(toolMsg('🔧 Calling: ' + ev.toolName), agentDiv);
-          } else if (ev.type === 'tool_result') {
-            chat.insertBefore(toolMsg('✅ ' + (ev.output || '').substring(0, 80)), agentDiv);
-          } else if (ev.type === 'thinking') {
-            chat.insertBefore(sysMsg('💭 ' + ev.content), agentDiv);
-          } else if (ev.type === 'done') {
-            const cost = ev.cost ? ' · $' + ev.cost.toFixed(6) : '';
-            document.getElementById('chat-cost').textContent = ev.usage.totalTokens + ' tokens · ' + ev.durationMs + 'ms' + cost;
-          } else if (ev.type === 'error') {
-            chat.innerHTML += '<div class="msg error">' + ev.message + '</div>';
-          }
-        } catch {}
-      }
-      chat.scrollTop = chat.scrollHeight;
-    }
-    loadTasks(); // refresh after agent actions
-  } catch (e) {
-    chat.innerHTML += '<div class="msg error">Error: ' + e.message + '</div>';
-  }
-  document.getElementById('chat-send').disabled = false;
-  chat.scrollTop = chat.scrollHeight;
-}
-
-function toolMsg(text) { const d = document.createElement('div'); d.className = 'msg tool'; d.textContent = text; return d; }
-function sysMsg(text) { const d = document.createElement('div'); d.className = 'msg system'; d.textContent = text; return d; }
-function escapeHtml(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
-function formatMarkdown(s) { return escapeHtml(s).replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>').replace(/\\n/g, '<br>'); }
-
-loadTasks();
-`

package/templates/default/app.tsx

@@ -0,0 +1,30 @@
+/**
+ * TheoKit App — opinionated, React-first.
+ *
+ * React SSR renders app/page.tsx inside app/layout.tsx.
+ * Backend classes registered in server/index.ts.
+ * Routes inferred from class names. Zero manual wiring.
+ */
+import 'reflect-metadata'
+import { renderToString } from 'react-dom/server'
+import { TheoApp } from '@theokit/http/app'
+import { TasksController, AssistantAgent, TaskTools } from './server/index.js'
+import Layout from './app/layout.js'
+import Page from './app/page.js'
+
+const html =
+  '<!DOCTYPE html>' +
+  renderToString(
+    <Layout>
+      <Page />
+    </Layout>,
+  )
+
+const app = await TheoApp.create({
+  controllers: [TasksController],
+  agents: [AssistantAgent],
+  providers: [TaskTools],
+  html,
+})
+
+await app.listen(3000)

package/templates/default/eslint.config.mjs

@@ -0,0 +1,14 @@
+import tseslint from 'typescript-eslint'
+import prettierConfig from 'eslint-config-prettier'
+
+export default tseslint.config(
+  { ignores: ['dist/', 'node_modules/'] },
+  ...tseslint.configs.recommended,
+  prettierConfig,
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+)

package/templates/default/package.json.tmpl

@@ -4,18 +4,34 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "bun app.ts",
-    "dev:node": "npx tsx app.ts",
-    "test": "bun test"
+    "dev": "npx tsx --watch app.tsx",
+    "dev:bun": "bun --watch app.tsx",
+    "build": "npx tsup app.tsx --format esm --out-dir dist",
+    "start": "node dist/app.js",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@theokit/http-decorators": "^0.1.0",
-    "@theokit/agents": "^0.1.0",
+    "@theokit/http": "^0.5.0",
+    "@theokit/agents": "^0.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "reflect-metadata": "^0.2.0",
     "zod": "^4.0.0"
   },
   "devDependencies": {
+    "@swc/core": "^1.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^10.0.0",
+    "prettier": "^3.0.0",
+    "tsup": "^8.0.0",
+    "tsx": "^4.19.0",
     "typescript": "^5.5.0",
-    "@swc/core": "^1.3.0"
+    "typescript-eslint": "^8.0.0"
   }
 }

package/templates/default/public/client.js

@@ -0,0 +1,173 @@
+/**
+ * Client-side interactivity — loaded via <script src="/client.js" defer> in page.tsx.
+ *
+ * Handles: task CRUD via fetch, AI chat via SSE streaming.
+ * No build step required — runs directly in the browser.
+ */
+
+var getRole = function () {
+  return document.getElementById('role').value
+}
+var headers = function () {
+  var h = { 'Content-Type': 'application/json' }
+  var r = getRole()
+  if (r) h['x-role'] = r
+  return h
+}
+
+// ─── Tasks CRUD ─────────────────────────────────────
+
+async function loadTasks() {
+  var res = await fetch('/api/tasks')
+  var tasks = await res.json()
+  var tbody = document.getElementById('task-list')
+  tbody.innerHTML = tasks
+    .map(function (t) {
+      var cls = t.done ? 'done' : ''
+      var prio =
+        t.priority === 'high' ? 'prio-high' : t.priority === 'low' ? 'prio-low' : 'prio-med'
+      var icon = t.done ? '\u2705 ' : '\u25CB '
+      return (
+        '<tr class="' +
+        cls +
+        '"><td>' +
+        icon +
+        esc(t.title) +
+        '</td><td><span class="prio ' +
+        prio +
+        '">' +
+        t.priority +
+        '</span></td><td>' +
+        (t.done ? 'Done' : 'To do') +
+        '</td></tr>'
+      )
+    })
+    .join('')
+}
+
+document.getElementById('create-form').addEventListener('submit', async function (e) {
+  e.preventDefault()
+  var input = document.getElementById('new-title')
+  var select = document.getElementById('new-priority')
+  var err = document.getElementById('form-error')
+  err.textContent = ''
+  var title = input.value.trim()
+  if (!title) return
+  var res = await fetch('/api/tasks', {
+    method: 'POST',
+    headers: headers(),
+    body: JSON.stringify({ title: title, priority: select.value }),
+  })
+  if (res.status === 403) {
+    err.textContent = '403 \u2014 Need User role'
+    return
+  }
+  if (!res.ok) {
+    var data = await res.json()
+    err.textContent =
+      (data.error && data.error.issues && data.error.issues[0] && data.error.issues[0].message) ||
+      'Error ' + res.status
+    return
+  }
+  input.value = ''
+  loadTasks()
+})
+
+// ─── AI Chat (SSE) ──────────────────────────────────
+
+var sessionId = 'session-' + Date.now()
+var chatEl = document.getElementById('chat')
+var chatInput = document.getElementById('chat-input')
+var chatBtn = document.getElementById('chat-send')
+
+chatBtn.addEventListener('click', sendChat)
+chatInput.addEventListener('keydown', function (e) {
+  if (e.key === 'Enter') sendChat()
+})
+
+async function sendChat() {
+  var msg = chatInput.value.trim()
+  if (!msg) return
+  chatInput.value = ''
+  chatEl.innerHTML += '<div class="msg user">You: ' + esc(msg) + '</div>'
+  chatBtn.disabled = true
+
+  try {
+    var res = await fetch('/api/agents/assistant/chat', {
+      method: 'POST',
+      headers: headers(),
+      body: JSON.stringify({ message: msg, sessionId: sessionId }),
+    })
+    if (res.status === 403) {
+      chatEl.innerHTML += '<div class="msg system">403 \u2014 Need User role to chat</div>'
+      chatBtn.disabled = false
+      return
+    }
+
+    var reader = res.body.getReader()
+    var decoder = new TextDecoder()
+    var agentDiv = document.createElement('div')
+    agentDiv.className = 'msg agent'
+    chatEl.appendChild(agentDiv)
+
+    var buf = ''
+    while (true) {
+      var chunk = await reader.read()
+      if (chunk.done) break
+      buf += decoder.decode(chunk.value, { stream: true })
+      var lines = buf.split('\n')
+      buf = lines.pop() || ''
+      for (var i = 0; i < lines.length; i++) {
+        var line = lines[i]
+        if (!line.startsWith('data: ')) continue
+        try {
+          var ev = JSON.parse(line.slice(6))
+          if (ev.type === 'text_delta') agentDiv.innerHTML += fmtMd(ev.content)
+          else if (ev.type === 'tool_call')
+            chatEl.insertBefore(mkMsg('tool', '\uD83D\uDD27 ' + ev.toolName), agentDiv)
+          else if (ev.type === 'tool_result')
+            chatEl.insertBefore(
+              mkMsg('tool', '\u2705 ' + (ev.output || '').substring(0, 80)),
+              agentDiv,
+            )
+          else if (ev.type === 'thinking')
+            chatEl.insertBefore(mkMsg('system', '\uD83D\uDCAD ' + ev.content), agentDiv)
+          else if (ev.type === 'done')
+            document.getElementById('chat-cost').textContent =
+              ((ev.usage && ev.usage.totalTokens) || 0) +
+              ' tokens \u00B7 ' +
+              ev.durationMs +
+              'ms' +
+              (ev.cost ? ' \u00B7 $' + ev.cost.toFixed(6) : '')
+          else if (ev.type === 'error')
+            chatEl.innerHTML += '<div class="msg error">' + esc(ev.message) + '</div>'
+        } catch (_) {
+          /* partial JSON */
+        }
+      }
+      chatEl.scrollTop = chatEl.scrollHeight
+    }
+    loadTasks()
+  } catch (e) {
+    chatEl.innerHTML += '<div class="msg error">Error: ' + esc(e.message) + '</div>'
+  }
+  chatBtn.disabled = false
+  chatEl.scrollTop = chatEl.scrollHeight
+}
+
+function mkMsg(cls, text) {
+  var d = document.createElement('div')
+  d.className = 'msg ' + cls
+  d.textContent = text
+  return d
+}
+function esc(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+function fmtMd(s) {
+  return esc(s)
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\n/g, '<br>')
+}
+
+loadTasks()

package/templates/default/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#6366f1"/><text x="50%" y="55%" font-family="system-ui" font-size="20" font-weight="bold" fill="white" text-anchor="middle" dominant-baseline="middle">T</text></svg>