create-theokit 0.7.0 → 0.9.0

package/templates/default/public/globals.css

@@ -0,0 +1,206 @@
+/* TheoKit — global design tokens + reset */
+
+:root {
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
+  --bg: #ffffff;
+  --bg-secondary: #fafafa;
+  --card: #ffffff;
+  --border: #e5e5e5;
+  --text: #171717;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  --accent: #6366f1;
+  --accent-hover: #4f46e5;
+  --green: #22c55e;
+  --red: #ef4444;
+  --yellow: #eab308;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0a0a0a;
+    --bg-secondary: #111111;
+    --card: #141414;
+    --border: #2a2a2a;
+    --text: #ededed;
+    --text-secondary: #999999;
+    --text-muted: #666666;
+    --accent: #818cf8;
+    --accent-hover: #6366f1;
+    --green: #22c55e;
+    --red: #ef4444;
+    --yellow: #eab308;
+  }
+
+  html { color-scheme: dark; }
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code, pre { font-family: var(--font-mono); }
+
+a { color: inherit; text-decoration: none; }
+
+/* ─── Layout ────────────────────────────────────────── */
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  flex: 1;
+  width: 100%;
+}
+
+/* ─── Cards ─────────────────────────────────────────── */
+
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 24px;
+}
+
+/* ─── Grid ──────────────────────────────────────────── */
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+}
+
+@media (max-width: 768px) {
+  .grid { grid-template-columns: 1fr; }
+}
+
+/* ─── Typography ────────────────────────────────────── */
+
+h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
+h2 { font-size: 1rem; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
+
+.accent { color: var(--accent); }
+.subtitle { color: var(--text-secondary); font-size: 0.9rem; margin-top: 4px; line-height: 1.5; }
+
+/* ─── Badges ────────────────────────────────────────── */
+
+.badge {
+  font-size: 0.65rem;
+  padding: 2px 10px;
+  border-radius: 99px;
+  font-weight: 500;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--accent);
+}
+
+.badge-ai {
+  background: color-mix(in srgb, var(--yellow) 12%, transparent);
+  color: var(--yellow);
+}
+
+/* ─── Table ─────────────────────────────────────────── */
+
+table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
+th { text-align: left; padding: 10px 8px; color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
+td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
+tr.done td { opacity: 0.45; text-decoration: line-through; }
+
+.prio { font-size: 0.7rem; padding: 2px 10px; border-radius: 99px; font-weight: 500; }
+.prio-high { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
+.prio-med { background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--yellow); }
+.prio-low { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
+
+/* ─── Forms ─────────────────────────────────────────── */
+
+.create-bar { display: flex; gap: 8px; margin-top: 16px; }
+.create-bar input {
+  flex: 1; padding: 10px 14px;
+  background: var(--bg-secondary); border: 1px solid var(--border);
+  border-radius: 8px; color: var(--text); font-size: 0.85rem;
+  outline: none; transition: border-color 0.2s;
+}
+.create-bar input:focus { border-color: var(--accent); }
+.create-bar select {
+  padding: 10px 12px; background: var(--bg-secondary);
+  border: 1px solid var(--border); border-radius: 8px;
+  color: var(--text); font-size: 0.8rem;
+}
+.create-bar button, .chat-bar button {
+  padding: 10px 20px; background: var(--accent); color: white;
+  border: none; border-radius: 8px; cursor: pointer;
+  font-weight: 600; font-size: 0.85rem; transition: background 0.2s;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .create-bar button:hover, .chat-bar button:hover { background: var(--accent-hover); }
+}
+
+.create-bar button:disabled, .chat-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
+.error { color: var(--red); font-size: 0.8rem; margin-top: 4px; }
+
+/* ─── Role selector ─────────────────────────────────── */
+
+.role-bar { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
+.role-bar label { font-size: 0.8rem; color: var(--text-muted); }
+.role-bar select {
+  padding: 6px 12px; background: var(--bg-secondary);
+  border: 1px solid var(--border); border-radius: 6px;
+  color: var(--text); font-size: 0.8rem;
+}
+
+/* ─── Chat ──────────────────────────────────────────── */
+
+.chat-box {
+  height: 420px; overflow-y: auto; padding: 16px;
+  background: var(--bg-secondary); border: 1px solid var(--border);
+  border-radius: 10px; margin-bottom: 12px;
+  font-size: 0.85rem; line-height: 1.7;
+}
+
+.msg { margin-bottom: 10px; padding: 10px 14px; border-radius: 10px; }
+.msg.user { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
+.msg.agent { background: var(--card); border: 1px solid var(--border); }
+.msg.tool { background: color-mix(in srgb, var(--yellow) 8%, transparent); color: var(--yellow); font-size: 0.78rem; font-family: var(--font-mono); }
+.msg.system { color: var(--text-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: 12px 16px;
+  background: var(--bg-secondary); border: 1px solid var(--border);
+  border-radius: 10px; color: var(--text); font-size: 0.9rem;
+  outline: none; transition: border-color 0.2s;
+}
+.chat-bar input:focus { border-color: var(--accent); }
+
+.cost { color: var(--text-muted); font-size: 0.75rem; margin-top: 8px; text-align: right; }
+
+/* ─── Loading ───────────────────────────────────────── */
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}

package/templates/default/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/templates/default/server/agents/assistant.agent.ts

@@ -9,20 +9,17 @@ import {
   Agent, MainLoop, Mixin,
   Memory, Budget, Hook,
 } from '@theokit/agents'
-import { UseGuards, UseInterceptors } from '@theokit/http-decorators'
+import { UseGuards, UseInterceptors } from '@theokit/http'
 import { RolesGuard, Roles, Role } from '../guards/auth.guard.js'
 import { TimingInterceptor } from '../interceptors/timing.interceptor.js'
 import { TaskTools } from '../toolboxes/task.tools.js'
 
 @Agent({
-  name: 'assistant',
-  route: '/api/agents/assistant',
+  // Convention: AssistantAgent → name: 'assistant', route: /api/agents/assistant
   model: 'openai/gpt-4o-mini',
   systemPrompt: `You are a helpful task management assistant.
 Use the tasks.* tools to list, search, create, and complete tasks.
 Be concise and actionable.`,
-  stream: true,
-  maxIterations: 5,
 })
 @UseGuards(RolesGuard)
 @UseInterceptors(TimingInterceptor)

package/templates/default/server/controllers/tasks.controller.ts

@@ -12,7 +12,7 @@ import {
   Body, Param, Query, HttpCode,
   UseGuards, UseInterceptors, UseFilters,
   NotFoundException,
-} from '@theokit/http-decorators'
+} from '@theokit/http'
 import { RolesGuard, Roles, Role, IsPublic } from '../guards/auth.guard.js'
 import { TimingInterceptor } from '../interceptors/timing.interceptor.js'
 import { HttpErrorFilter } from '../filters/http-error.filter.js'
@@ -23,7 +23,7 @@ const zCreateTask = z.object({
   priority: z.enum(['low', 'medium', 'high']).default('medium'),
 })
 
-@Controller('api/tasks')
+@Controller()  // → /api/tasks (convention: inferred from TasksController)
 @UseGuards(RolesGuard)
 @UseInterceptors(TimingInterceptor)
 @UseFilters(HttpErrorFilter)

package/templates/default/server/filters/http-error.filter.ts

@@ -2,7 +2,7 @@
  * HttpErrorFilter — custom error response format.
  * Catches HttpException and returns structured JSON.
  */
-import { Catch, HttpException, type ExceptionFilter, type ArgumentsHost } from '@theokit/http-decorators'
+import { Catch, HttpException, type ExceptionFilter, type ArgumentsHost } from '@theokit/http'
 
 @Catch(HttpException)
 export class HttpErrorFilter implements ExceptionFilter {

package/templates/default/server/guards/auth.guard.ts

@@ -7,7 +7,7 @@
 import {
   createDecorator, Reflector,
   type CanActivate, type ExecutionContext,
-} from '@theokit/http-decorators'
+} from '@theokit/http'
 
 export enum Role {
   User = 'user',

package/templates/default/server/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Server module — auto-exports all controllers, agents, and providers.
+ *
+ * Convention: add your classes here. TheoApp.create() imports this one file.
+ * Like Rails' application.rb — single entry point for the backend.
+ *
+ * When you run `theokit generate controller/agent/toolbox`, the generated
+ * file is auto-added here.
+ */
+
+// Controllers — HTTP API
+export { TasksController } from './controllers/tasks.controller.js'
+
+// Agents — AI endpoints
+export { AssistantAgent } from './agents/assistant.agent.js'
+
+// Providers — DI (toolboxes, services)
+export { TaskTools } from './toolboxes/task.tools.js'

package/templates/default/server/interceptors/timing.interceptor.ts

@@ -2,7 +2,7 @@
  * TimingInterceptor — logs request duration.
  * Applied to both controllers and agents.
  */
-import type { Interceptor } from '@theokit/http-decorators'
+import type { Interceptor } from '@theokit/http'
 
 export class TimingInterceptor implements Interceptor {
   async intercept(_request: Request, next: () => Promise<unknown>): Promise<unknown> {

package/templates/default/server/middleware/logger.middleware.ts

@@ -1,7 +1,7 @@
 /**
  * LoggerMiddleware — logs every incoming request.
  */
-import type { NestMiddleware } from '@theokit/http-decorators'
+import type { NestMiddleware } from '@theokit/http'
 
 export class LoggerMiddleware implements NestMiddleware {
   use(request: Request, next: () => Promise<Response | null>): Promise<Response | null> {

package/templates/default/server/toolboxes/task.tools.ts

@@ -10,7 +10,7 @@ import { z } from 'zod'
 import { Toolbox, Tool, Trace, Audit } from '@theokit/agents'
 import { taskStore } from '../store.js'
 
-@Toolbox({ namespace: 'tasks' })
+@Toolbox()  // Convention: TaskTools → namespace: 'task'
 @Trace(true)
 export class TaskTools {
   @Tool({

package/templates/default/tsconfig.json

@@ -6,9 +6,16 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "strict": true,
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "dist"
+    "outDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "@/server/*": ["./server/*"],
+      "@/app/*": ["./app/*"]
+    }
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules", "dist"]

package/templates/default/app.ts

@@ -1,29 +0,0 @@
-/**
- * TheoKit App — entry point.
- *
- * That's it. No manual wiring. No plumbing.
- * TheoApp.create() handles everything:
- *   - Controller routes (HTTP CRUD)
- *   - Agent routes (SSE streaming + tool calling)
- *   - DI (providers injected into controllers + agents)
- *   - Shared pipeline (guards, interceptors, filters)
- */
-import 'reflect-metadata'
-import { readFileSync } from 'node:fs'
-import { TheoApp } from '@theokit/http-decorators/app'
-import { TasksController } from './server/controllers/tasks.controller.js'
-import { AssistantAgent } from './server/agents/assistant.agent.js'
-import { TaskTools } from './server/toolboxes/task.tools.js'
-
-// Frontend HTML (inline for alpha — upgrade to Vite plugin for React SSR)
-let html: string | undefined
-try { html = readFileSync(new URL('./public/index.html', import.meta.url), 'utf-8') } catch { /* no frontend */ }
-
-const app = await TheoApp.create({
-  controllers: [TasksController],
-  agents: [AssistantAgent],
-  providers: [TaskTools],
-  html,
-})
-
-await app.listen(3000)

package/templates/default/public/index.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>TheoKit App</title>
-<style>
-: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}h1{font-size:1.6rem}.accent{color:var(--accent)}.subtitle{color:var(--muted);font-size:.85rem;margin-top:2px}
-.role-bar{margin:12px 0}.role-bar select{padding:6px 12px;background:#1a1a1a;border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.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:.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:.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:.5;text-decoration:line-through}.prio{font-size:.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:.85rem}
-.create-bar select{padding:8px;background:#1a1a1a;border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.8rem}.create-bar button{padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600}
-.error{color:var(--red);font-size:.8rem;margin-top:4px}
-.chat-box{height:400px;overflow-y:auto;padding:12px;background:#0d0d0d;border-radius:8px;margin-bottom:10px;font-size:.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:.78rem;font-family:monospace}.msg.system{color:var(--muted);font-size:.78rem;font-style:italic}.msg.error{color:var(--red)}
-.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:.9rem;outline:none}.chat-bar input:focus{border-color:var(--accent)}
-.chat-bar button{padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600}.chat-bar button:disabled{opacity:.4;cursor:not-allowed}
-.cost{color:var(--muted);font-size:.75rem;margin-top:6px;text-align:right}
-</style>
-</head>
-<body>
-<div id="app">
-<header>
-<h1><span class="accent">TheoKit</span> App</h1>
-<p class="subtitle">Controllers + AI Agent — same pipeline</p>
-<div class="role-bar"><label>Role: </label><select id="role"><option value="">None</option><option value="user" selected>User</option><option value="admin">Admin</option></select></div>
-</header>
-<main class="grid">
-<section class="card">
-<h2>📋 Tasks <span class="badge">@Controller</span></h2>
-<table><thead><tr><th>Task</th><th>Priority</th><th>Status</th></tr></thead><tbody id="task-list"></tbody></table>
-<form id="create-form" class="create-bar"><input id="new-title" placeholder="New task..." required minlength="3"><select id="new-priority"><option value="medium">Medium</option><option value="high">High</option><option value="low">Low</option></select><button type="submit">Add</button></form>
-<p id="form-error" class="error"></p>
-</section>
-<section class="card">
-<h2>🤖 AI Assistant <span class="badge badge-ai">@Agent + SSE</span></h2>
-<div id="chat" class="chat-box"><div class="msg system">Ask me to list, create, or complete tasks...</div></div>
-<div class="chat-bar"><input id="chat-input" placeholder="Message the AI assistant..."><button id="chat-send">Send</button></div>
-<p id="chat-cost" class="cost"></p>
-</section>
-</main>
-</div>
-<script>
-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}
-let sessionId='s-'+Date.now()
-
-async function loadTasks(){const r=await fetch('/api/tasks');const t=await r.json();document.getElementById('task-list').innerHTML=t.map(t=>{const s=t.done?'done':'';const p=t.priority==='high'?'prio-high':t.priority==='low'?'prio-low':'prio-med';return'<tr class="'+s+'"><td>'+(t.done?'✅ ':'○ ')+t.title+'</td><td><span class="prio '+p+'">'+t.priority+'</span></td><td>'+(t.done?'Done':'To do')+'</td></tr>'}).join('')}
-
-document.getElementById('create-form').addEventListener('submit',async e=>{e.preventDefault();const t=document.getElementById('new-title').value.trim();const p=document.getElementById('new-priority').value;const err=document.getElementById('form-error');err.textContent='';if(!t)return;const r=await fetch('/api/tasks',{method:'POST',headers:headers(),body:JSON.stringify({title:t,priority:p})});if(r.status===403){err.textContent='403 — Need User role';return}if(r.status===422){const e=await r.json();err.textContent=e.error?.issues?.[0]?.message||'Validation error';return}if(!r.ok){err.textContent='Error '+r.status;return}document.getElementById('new-title').value='';loadTasks()})
-
-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: '+msg.replace(/</g,'&lt;')+'</div>';document.getElementById('chat-send').disabled=true
-try{const r=await fetch('/api/agents/assistant/chat',{method:'POST',headers:headers(),body:JSON.stringify({message:msg,sessionId})});if(r.status===403){chat.innerHTML+='<div class="msg system">403 — Need User role</div>';document.getElementById('chat-send').disabled=false;return}
-const reader=r.body.getReader();const dec=new TextDecoder();let div=document.createElement('div');div.className='msg agent';chat.appendChild(div);let buf=''
-while(true){const{done,value}=await reader.read();if(done)break;buf+=dec.decode(value,{stream:true});const lines=buf.split('\n');buf=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')div.innerHTML+=ev.content.replace(/</g,'&lt;').replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>').replace(/\n/g,'<br>');else if(ev.type==='tool_call'){const t=document.createElement('div');t.className='msg tool';t.textContent='🔧 '+ev.toolName;chat.insertBefore(t,div)}else if(ev.type==='tool_result'){const t=document.createElement('div');t.className='msg tool';t.textContent='✅ '+(ev.output||'').substring(0,80);chat.insertBefore(t,div)}else if(ev.type==='done'){document.getElementById('chat-cost').textContent=(ev.usage?.totalTokens||0)+' tokens · '+(ev.durationMs||0)+'ms'+(ev.cost?' · $'+ev.cost.toFixed(6):'')}else if(ev.type==='error'){chat.innerHTML+='<div class="msg error">'+ev.message+'</div>'}}catch{}}
-chat.scrollTop=chat.scrollHeight}loadTasks()}catch(e){chat.innerHTML+='<div class="msg error">'+e.message+'</div>'}document.getElementById('chat-send').disabled=false;chat.scrollTop=chat.scrollHeight}
-
-loadTasks()
-</script>
-</body>
-</html>