@kozojs/cli 0.1.30 → 0.1.32

package/lib/index.js

@@ -31,231 +31,13 @@ var p = __toESM(require("@clack/prompts"));
 var import_picocolors2 = __toESM(require("picocolors"));
 var import_execa = require("execa");
 
-// src/utils/scaffold.ts
+// src/utils/scaffold/index.ts
+var import_fs_extra5 = __toESM(require("fs-extra"));
+var import_node_path5 = __toESM(require("path"));
+
+// src/utils/scaffold/template-complete.ts
 var import_fs_extra = __toESM(require("fs-extra"));
 var import_node_path = __toESM(require("path"));
-async function scaffoldProject(options) {
-  const { projectName, runtime, database, dbPort, auth, packageSource, template, frontend, extras } = options;
-  const projectDir = import_node_path.default.resolve(process.cwd(), projectName);
-  const kozoCoreDep = packageSource === "local" ? "workspace:*" : "^0.3.7";
-  if (frontend !== "none") {
-    await scaffoldFullstackProject(projectDir, projectName, kozoCoreDep, runtime, database, dbPort, auth, frontend, extras, template);
-    return;
-  }
-  if (template === "complete") {
-    await scaffoldCompleteTemplate(projectDir, projectName, kozoCoreDep, runtime, database, dbPort, auth);
-    if (database !== "none" && database !== "sqlite") await createDockerCompose(projectDir, projectName, database, dbPort);
-    if (extras.includes("docker")) await createDockerfile(projectDir, runtime);
-    if (extras.includes("github-actions")) await createGitHubActions(projectDir);
-    return;
-  }
-  if (template === "api-only") {
-    await scaffoldApiOnlyTemplate(projectDir, projectName, kozoCoreDep, runtime);
-    if (extras.includes("docker")) await createDockerfile(projectDir, runtime);
-    if (extras.includes("github-actions")) await createGitHubActions(projectDir);
-    return;
-  }
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "src", "routes"));
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "src", "db"));
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "src", "services"));
-  const packageJson = {
-    name: projectName,
-    version: "0.1.0",
-    type: "module",
-    scripts: {
-      dev: "tsx watch src/index.ts",
-      build: "tsc",
-      start: "node dist/index.js",
-      "db:generate": "drizzle-kit generate",
-      "db:push": "drizzle-kit push",
-      "db:studio": "drizzle-kit studio"
-    },
-    dependencies: {
-      "@kozojs/core": kozoCoreDep,
-      "uWebSockets.js": "github:uNetworking/uWebSockets.js#6609a88ffa9a16ac5158046761356ce03250a0df",
-      hono: "^4.12.5",
-      zod: "^4.0.0",
-      "drizzle-orm": "^0.36.0",
-      ...database === "postgresql" && { postgres: "^3.4.8" },
-      ...database === "mysql" && { mysql2: "^3.11.0" },
-      ...database === "sqlite" && { "better-sqlite3": "^11.0.0" }
-    },
-    devDependencies: {
-      "@types/node": "^22.0.0",
-      tsx: "^4.21.0",
-      typescript: "^5.6.0",
-      "drizzle-kit": "^0.28.0",
-      ...database === "sqlite" && { "@types/better-sqlite3": "^7.6.0" }
-    }
-  };
-  await import_fs_extra.default.writeJSON(import_node_path.default.join(projectDir, "package.json"), packageJson, { spaces: 2 });
-  const tsconfig = {
-    compilerOptions: {
-      target: "ES2022",
-      module: "ESNext",
-      moduleResolution: "bundler",
-      strict: true,
-      esModuleInterop: true,
-      skipLibCheck: true,
-      outDir: "dist",
-      rootDir: "src",
-      declaration: true
-    },
-    include: ["src/**/*"],
-    exclude: ["node_modules", "dist"]
-  };
-  await import_fs_extra.default.writeJSON(import_node_path.default.join(projectDir, "tsconfig.json"), tsconfig, { spaces: 2 });
-  const drizzleConfig = `import { defineConfig } from 'drizzle-kit';
-
-export default defineConfig({
-  schema: './src/db/schema.ts',
-  out: './drizzle',
-  dialect: '${database === "postgresql" ? "postgresql" : database === "mysql" ? "mysql" : "sqlite"}',
-  dbCredentials: {
-    ${database === "sqlite" ? "url: './data.db'" : "url: process.env.DATABASE_URL!"}
-  }
-});
-`;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "drizzle.config.ts"), drizzleConfig);
-  const envExample = `# Database
-${database === "sqlite" ? "# SQLite uses local file, no URL needed" : "DATABASE_URL="}
-
-# Server
-PORT=3000
-`;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, ".env.example"), envExample);
-  const gitignore = `node_modules/
-dist/
-.env
-*.db
-.turbo/
-`;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, ".gitignore"), gitignore);
-  const indexTs = `import { createKozo } from '@kozojs/core';
-import { services } from './services/index.js';
-
-const app = createKozo({
-  services,
-  port: Number(process.env.PORT) || 3000,
-  openapi: {
-    info: {
-      title: '${projectName} API',
-      version: '1.0.0',
-      description: 'API documentation for ${projectName}'
-    },
-    servers: [
-      {
-        url: 'http://localhost:3000',
-        description: 'Development server'
-      }
-    ]
-  }
-});
-
-await app.nativeListen();
-`;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "src", "index.ts"), indexTs);
-  const servicesTs = `import { db } from '../db/index.js';
-
-export const services = {
-  db
-};
-
-// Type augmentation for autocomplete
-declare module '@kozojs/core' {
-  interface Services {
-    db: typeof db;
-  }
-}
-`;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "src", "services", "index.ts"), servicesTs);
-  const schemaTs = getDatabaseSchema(database);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "src", "db", "schema.ts"), schemaTs);
-  const dbIndexTs = getDatabaseIndex(database);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "src", "db", "index.ts"), dbIndexTs);
-  if (database === "sqlite") {
-    const seedTs = getSQLiteSeed();
-    await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "src", "db", "seed.ts"), seedTs);
-  }
-  await createExampleRoutes(projectDir);
-  const readme = `# ${projectName}
-
-Built with \u{1F525} **Kozo Framework**
-
-## Getting Started
-
-\`\`\`bash
-# Install dependencies
-pnpm install
-
-# Start development server
-pnpm dev
-\`\`\`
-
-The server will start at http://localhost:3000
-
-## Try the API
-
-\`\`\`bash
-# Get all users
-curl http://localhost:3000/users
-
-# Create a new user
-curl -X POST http://localhost:3000/users \\
-  -H "Content-Type: application/json" \\
-  -d '{"name":"Alice","email":"alice@example.com"}'
-
-# Health check
-curl http://localhost:3000
-
-# Open Swagger UI
-open http://localhost:3000/swagger
-\`\`\`
-
-## API Documentation
-
-Once the server is running, visit:
-- **Swagger UI**: http://localhost:3000/swagger
-- **OpenAPI JSON**: http://localhost:3000/doc
-
-## Project Structure
-
-\`\`\`
-src/
-\u251C\u2500\u2500 db/
-\u2502   \u251C\u2500\u2500 schema.ts    # Drizzle schema
-\u2502   \u251C\u2500\u2500 seed.ts      # Database initialization${database === "sqlite" ? " (SQLite)" : ""}
-\u2502   \u2514\u2500\u2500 index.ts     # Database client
-\u251C\u2500\u2500 routes/
-\u2502   \u251C\u2500\u2500 index.ts     # GET /
-\u2502   \u2514\u2500\u2500 users/
-\u2502       \u251C\u2500\u2500 get.ts   # GET /users
-\u2502       \u2514\u2500\u2500 post.ts  # POST /users
-\u251C\u2500\u2500 services/
-\u2502   \u2514\u2500\u2500 index.ts     # Service definitions
-\u2514\u2500\u2500 index.ts         # Entry point
-\`\`\`
-
-## Database Commands
-
-\`\`\`bash
-pnpm db:generate  # Generate migrations
-pnpm db:push      # Push schema to database
-pnpm db:studio    # Open Drizzle Studio
-\`\`\`
-
-${database === "sqlite" ? "## SQLite Notes\n\nThe database is automatically initialized with example data on first run.\nDatabase file: `./data.db`\n" : ""}
-## Documentation
-
-- [Kozo Docs](https://kozo-docs.vercel.app)
-- [Drizzle ORM](https://orm.drizzle.team)
-- [Hono](https://hono.dev)
-`;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "README.md"), readme);
-  if (database !== "none" && database !== "sqlite") await createDockerCompose(projectDir, projectName, database, dbPort);
-  if (extras.includes("docker")) await createDockerfile(projectDir, runtime);
-  if (extras.includes("github-actions")) await createGitHubActions(projectDir);
-}
 function getDatabaseSchema(database) {
   if (database === "postgresql") {
     return `import { pgTable, uuid, varchar, timestamp } from 'drizzle-orm/pg-core';
@@ -552,7 +334,17 @@ const RATE_LIMIT_MAX = Number(process.env.RATE_LIMIT_MAX) || 100;
 const RATE_LIMIT_WINDOW = Number(process.env.RATE_LIMIT_WINDOW) || 60_000;
 
 // \u2500\u2500\u2500 App \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-const app = createKozo({ port: PORT });
+const app = createKozo({
+  port: PORT,
+  openapi: {
+    info: {
+      title: '${projectName} API',
+      version: '1.0.0',
+      description: 'API documentation for ${projectName}',
+    },
+    servers: [{ url: \`http://localhost:\${PORT}\`, description: 'Development server' }],
+  },
+});
 
 // \u2500\u2500\u2500 Middleware (Hono layer) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 app.getApp().use('*', logger());
@@ -1178,8 +970,12 @@ export function registerPostRoutes(app: Kozo) {
 `;
   await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "src", "routes", "posts", "index.ts"), postRoutes);
 }
+
+// src/utils/scaffold/template-api-only.ts
+var import_fs_extra2 = __toESM(require("fs-extra"));
+var import_node_path2 = __toESM(require("path"));
 async function scaffoldApiOnlyTemplate(projectDir, projectName, kozoCoreDep, runtime) {
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "src"));
+  await import_fs_extra2.default.ensureDir(import_node_path2.default.join(projectDir, "src"));
   const packageJson = {
     name: projectName,
     version: "1.0.0",
@@ -1202,7 +998,7 @@ async function scaffoldApiOnlyTemplate(projectDir, projectName, kozoCoreDep, run
       typescript: "^5.6.0"
     }
   };
-  await import_fs_extra.default.writeJSON(import_node_path.default.join(projectDir, "package.json"), packageJson, { spaces: 2 });
+  await import_fs_extra2.default.writeJSON(import_node_path2.default.join(projectDir, "package.json"), packageJson, { spaces: 2 });
   const tsconfig = {
     compilerOptions: {
       target: "ES2022",
@@ -1217,7 +1013,7 @@ async function scaffoldApiOnlyTemplate(projectDir, projectName, kozoCoreDep, run
     include: ["src/**/*"],
     exclude: ["node_modules", "dist"]
   };
-  await import_fs_extra.default.writeJSON(import_node_path.default.join(projectDir, "tsconfig.json"), tsconfig, { spaces: 2 });
+  await import_fs_extra2.default.writeJSON(import_node_path2.default.join(projectDir, "tsconfig.json"), tsconfig, { spaces: 2 });
   const indexTs = `import { createKozo } from '@kozojs/core';
 import { z } from 'zod';
 
@@ -1240,8 +1036,8 @@ app.get('/hello/:name', {
 console.log('\u{1F525} Kozo running on http://localhost:3000');
 await app.nativeListen();
 `;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "src", "index.ts"), indexTs);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, ".gitignore"), "node_modules/\ndist/\n.env\n");
+  await import_fs_extra2.default.writeFile(import_node_path2.default.join(projectDir, "src", "index.ts"), indexTs);
+  await import_fs_extra2.default.writeFile(import_node_path2.default.join(projectDir, ".gitignore"), "node_modules/\ndist/\n.env\n");
 }
 async function createDockerCompose(dir, projectName, database, dbPort, includeApiService = false, runtime = "node") {
   if (database === "none" || database === "sqlite") return;
@@ -1322,7 +1118,7 @@ async function createDockerCompose(dir, projectName, database, dbPort, includeAp
   const volumes = database === "postgresql" ? "\nvolumes:\n  postgres_data:\n" : database === "mysql" ? "\nvolumes:\n  mysql_data:\n" : "";
   const compose = `services:
 ${services}${volumes}`;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(dir, "docker-compose.yml"), compose);
+  await import_fs_extra2.default.writeFile(import_node_path2.default.join(dir, "docker-compose.yml"), compose);
 }
 async function createDockerfile(projectDir, runtime) {
   const dockerfile = runtime === "bun" ? `FROM oven/bun:1 AS builder
@@ -1353,11 +1149,11 @@ RUN npm ci --omit=dev
 EXPOSE 3000
 CMD ["node", "dist/index.js"]
 `;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "Dockerfile"), dockerfile);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, ".dockerignore"), "node_modules\ndist\n.git\n.env\n");
+  await import_fs_extra2.default.writeFile(import_node_path2.default.join(projectDir, "Dockerfile"), dockerfile);
+  await import_fs_extra2.default.writeFile(import_node_path2.default.join(projectDir, ".dockerignore"), "node_modules\ndist\n.git\n.env\n");
 }
 async function createGitHubActions(projectDir) {
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, ".github", "workflows"));
+  await import_fs_extra2.default.ensureDir(import_node_path2.default.join(projectDir, ".github", "workflows"));
   const workflow = `name: CI
 
 on:
@@ -1379,1571 +1175,2506 @@ jobs:
       - run: npm run build
       - run: npm test --if-present
 `;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, ".github", "workflows", "ci.yml"), workflow);
-}
-async function scaffoldFullstackProject(projectDir, projectName, kozoCoreDep, runtime, database, dbPort, auth, frontend, extras, template) {
-  const hasDb = database !== "none";
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "apps", "api", "src", "routes"));
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "apps", "api", "src", "data"));
-  if (hasDb) await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "apps", "api", "src", "db"));
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "apps", "web", "src", "lib"));
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, ".vscode"));
-  const rootPackageJson = {
-    name: projectName,
-    private: true,
-    scripts: {
-      dev: "pnpm run --parallel dev",
-      build: "pnpm run --recursive build"
-    }
-  };
-  await import_fs_extra.default.writeJSON(import_node_path.default.join(projectDir, "package.json"), rootPackageJson, { spaces: 2 });
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "pnpm-workspace.yaml"), `packages:
-  - 'apps/*'
-`);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, ".gitignore"), "node_modules/\ndist/\n.env\n*.log\n");
-  await scaffoldFullstackApi(projectDir, projectName, kozoCoreDep, runtime, database, dbPort, auth);
-  await scaffoldFullstackWeb(projectDir, projectName, frontend, auth);
-  await scaffoldFullstackReadme(projectDir, projectName);
-  if (database !== "none" && database !== "sqlite") await createDockerCompose(projectDir, projectName, database, dbPort);
-  if (extras.includes("docker")) await createDockerfile(import_node_path.default.join(projectDir, "apps", "api"), runtime);
-  if (extras.includes("github-actions")) await createGitHubActions(projectDir);
+  await import_fs_extra2.default.writeFile(import_node_path2.default.join(projectDir, ".github", "workflows", "ci.yml"), workflow);
 }
-async function scaffoldFullstackApi(projectDir, projectName, kozoCoreDep, runtime, database = "none", dbPort, auth = true) {
-  const apiDir = import_node_path.default.join(projectDir, "apps", "api");
-  const hasDb = database !== "none";
-  if (hasDb) {
-    await import_fs_extra.default.ensureDir(import_node_path.default.join(apiDir, "src", "db"));
-    await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "db", "schema.ts"), getDatabaseSchema(database));
-    await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "db", "index.ts"), getDatabaseIndex(database));
-    if (database === "sqlite") {
-      await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "db", "seed.ts"), getSQLiteSeed());
-    }
-    const dialect = database === "postgresql" ? "postgresql" : database === "mysql" ? "mysql" : "sqlite";
-    const pgPort = dbPort ?? 5436;
-    const dbUrl = database === "postgresql" ? `postgresql://postgres:postgres@localhost:${pgPort}/${projectName}` : database === "mysql" ? `mysql://root:root@localhost:3306/${projectName}` : void 0;
-    await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "drizzle.config.ts"), `import { defineConfig } from 'drizzle-kit';
-import 'dotenv/config';
 
-export default defineConfig({
-  schema: './src/db/schema.ts',
-  out: './drizzle',
-  dialect: '${dialect}',
-  dbCredentials: {
-    ${database === "sqlite" ? "url: './data.db'" : "url: process.env.DATABASE_URL!"}
-  },
-});
-`);
-    const envContent = `PORT=3000
-NODE_ENV=development
-${dbUrl ? `DATABASE_URL=${dbUrl}
-` : ""}${auth ? "JWT_SECRET=change-me-to-a-random-secret-at-least-32-chars\n" : ""}`;
-    await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, ".env"), envContent);
-    await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, ".env.example"), envContent);
-  } else {
-    const envContent = `PORT=3000
-NODE_ENV=development
-${auth ? "JWT_SECRET=change-me-to-a-random-secret-at-least-32-chars\n" : ""}`;
-    await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, ".env"), envContent);
-    await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, ".env.example"), envContent);
-  }
-  const apiPackageJson = {
-    name: `@${projectName}/api`,
-    version: "1.0.0",
-    type: "module",
-    scripts: {
-      dev: runtime === "bun" ? "bun --watch src/index.ts" : "tsx watch src/index.ts",
-      build: "tsc",
-      ...hasDb && {
-        "db:generate": "drizzle-kit generate",
-        "db:push": "drizzle-kit push",
-        "db:studio": "drizzle-kit studio"
-      }
-    },
-    dependencies: {
-      "@kozojs/core": kozoCoreDep,
-      ...auth && { "@kozojs/auth": kozoCoreDep === "workspace:*" ? "workspace:*" : "^0.1.0" },
-      hono: "^4.12.5",
-      zod: "^4.0.0",
-      dotenv: "^16.4.0",
-      ...runtime === "node" && { "@hono/node-server": "^1.19.10" },
-      ...runtime === "node" && { "uWebSockets.js": "github:uNetworking/uWebSockets.js#6609a88ffa9a16ac5158046761356ce03250a0df" },
-      ...hasDb && { "drizzle-orm": "^0.36.0" },
-      ...database === "postgresql" && { postgres: "^3.4.8" },
-      ...database === "mysql" && { mysql2: "^3.11.0" },
-      ...database === "sqlite" && { "better-sqlite3": "^11.0.0" }
-    },
-    devDependencies: {
-      "@types/node": "^22.0.0",
-      ...runtime !== "bun" && { tsx: "^4.21.0" },
-      typescript: "^5.6.0",
-      ...hasDb && { "drizzle-kit": "^0.28.0" },
-      ...database === "sqlite" && { "@types/better-sqlite3": "^7.6.0" }
-    }
-  };
-  await import_fs_extra.default.writeJSON(import_node_path.default.join(apiDir, "package.json"), apiPackageJson, { spaces: 2 });
-  const tsconfig = {
-    compilerOptions: {
-      target: "ES2022",
-      module: "ESNext",
-      moduleResolution: "bundler",
-      strict: true,
-      esModuleInterop: true,
-      skipLibCheck: true,
-      outDir: "dist",
-      rootDir: "src"
-    },
-    include: ["src/**/*"],
-    exclude: ["node_modules", "dist"]
-  };
-  await import_fs_extra.default.writeJSON(import_node_path.default.join(apiDir, "tsconfig.json"), tsconfig, { spaces: 2 });
-  const authImport = auth ? `import { authenticateJWT } from '@kozojs/auth';
-` : "";
-  const authMiddleware = auth ? `
-// JWT protects all /api/* routes except public ones
-const JWT_SECRET = process.env.JWT_SECRET || 'change-me';
-const _jwt = authenticateJWT(JWT_SECRET, { prefix: '' });
-const publicPaths = ['/api/auth/', '/api/health', '/api/stats'];
-app.getApp().use('/api/*', (c, next) => {
-  if (publicPaths.some(p => c.req.path.startsWith(p))) return next();
-  return _jwt(c, next);
-});
-` : "";
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "index.ts"), `import 'dotenv/config';
-import { createKozo } from '@kozojs/core';
-${authImport}import { fileURLToPath } from 'node:url';
-import { dirname, join } from 'node:path';
+// src/utils/scaffold/fullstack-api.ts
+var import_fs_extra4 = __toESM(require("fs-extra"));
+var import_node_path4 = __toESM(require("path"));
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const PORT = Number(process.env.PORT) || 3000;
-const app = createKozo({ port: PORT });
-${authMiddleware}await app.loadRoutes(join(__dirname, 'routes'));
+// src/utils/scaffold/fullstack-web.ts
+var import_fs_extra3 = __toESM(require("fs-extra"));
+var import_node_path3 = __toESM(require("path"));
 
-export type AppType = typeof app;
+// src/utils/scaffold/generators/pages.ts
+function generateAppTsx(projectName, auth) {
+  return `import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { LayoutDashboard, Users, FileText, CheckSquare, Server, Sun, Moon${auth ? ", LogOut" : ""} } from 'lucide-react';
+import { Toaster } from 'sonner';
+${auth ? "import { getToken, clearToken } from '@/lib/api';" : ""}
+import { useUIStore } from '@/store/ui';
+import { useThemeStore } from '@/store/theme';
+import PreloadSpinner from '@/components/PreloadSpinner';
+${auth ? "import Login from './pages/Login';" : ""}
+import Dashboard from './pages/Dashboard';
+import UsersPage from './pages/Users';
+import PostsPage from './pages/Posts';
+import TasksPage from './pages/Tasks';
 
-console.log(\`\u{1F525} ${projectName} API on http://localhost:\${PORT}\`);
-${runtime === "node" ? "await app.nativeListen();" : "await app.listen();"}
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "schemas", "index.ts"), `import { z } from 'zod';
+// \u2500\u2500 Routing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+type AppPage = 'dashboard' | 'users' | 'posts' | 'tasks';
+const APP_PAGES: AppPage[] = ['dashboard', 'users', 'posts', 'tasks'];
+const NAV_SPINNER_MS = 300;
 
-export const UserSchema = z.object({
-  id: z.string(),
-  name: z.string(),
-  email: z.string().email(),
-  role: z.enum(['admin', 'user']),
-  createdAt: z.string().optional(),
-});
+function parseRoute(pathname: string): AppPage {
+  const clean = pathname.replace(/\\/+$/, '') || '/';
+  if (clean.startsWith('/app/')) {
+    const seg = clean.replace('/app/', '') as AppPage;
+    return APP_PAGES.includes(seg) ? seg : 'dashboard';
+  }
+  return 'dashboard';
+}
 
-export const CreateUserBody = z.object({
-  name: z.string().min(1),
-  email: z.string().email(),
-  role: z.enum(['admin', 'user']).optional(),
-});
+function buildUrl(page: AppPage): string {
+  return page === 'dashboard' ? '/app' : \`/app/\${page}\`;
+}
 
-export const UpdateUserBody = z.object({
-  name: z.string().optional(),
-  email: z.string().email().optional(),
-  role: z.enum(['admin', 'user']).optional(),
-});
+const PAGE_TITLES: Record<AppPage, string> = {
+  dashboard: 'Dashboard',
+  users: 'Users',
+  posts: 'Posts',
+  tasks: 'Tasks',
+};
 
-export const PostSchema = z.object({
-  id: z.string(),
-  title: z.string(),
-  content: z.string(),
-  authorId: z.string(),
-  published: z.boolean(),
-  createdAt: z.string().optional(),
-});
+export default function App({ initialPath = '/' }: { initialPath?: string }) {
+  const initial = useMemo(() => {
+    const pathname = typeof window !== 'undefined' ? window.location.pathname : initialPath;
+    return parseRoute(pathname);
+  }, [initialPath]);
 
-export const CreatePostBody = z.object({
-  title: z.string().min(1),
-  content: z.string().optional(),
-  authorId: z.string().optional(),
-  published: z.boolean().optional(),
-});
+  const [page, setPage] = useState<AppPage>(initial);
+${auth ? `  const [token, setToken] = useState<string | null>(() => getToken());` : ""}
+  const queryClient = useQueryClient();
+  const sidebarOpen   = useUIStore((s) => s.sidebarOpen);
+  const toggleSidebar = useUIStore((s) => s.toggleSidebar);
+  const setSidebarOpen = useUIStore((s) => s.setSidebarOpen);
+  const setGlobalLoading = useUIStore((s) => s.setGlobalLoading);
+  const theme = useThemeStore((s) => s.theme);
+  const toggleTheme = useThemeStore((s) => s.toggleTheme);
+
+  // All hooks must be declared before any early return
+  const navigate = useCallback((p: AppPage) => {
+    if (p === page) return;
+    if (typeof window !== 'undefined') window.history.pushState(null, '', buildUrl(p));
+    setGlobalLoading(true);
+    setTimeout(() => { setPage(p); setGlobalLoading(false); }, NAV_SPINNER_MS);
+  }, [page, setGlobalLoading]);
+
+  // Sync browser back/forward
+  useEffect(() => {
+    const onPop = () => setPage(parseRoute(window.location.pathname));
+    window.addEventListener('popstate', onPop);
+    return () => window.removeEventListener('popstate', onPop);
+  }, []);
+
+  // Close sidebar on wider screens
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 768px)');
+    if (mq.matches) setSidebarOpen(false);
+    const onChange = (e: MediaQueryListEvent) => { if (e.matches) setSidebarOpen(false); };
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  }, [setSidebarOpen]);
+
+  // Update <title>
+  useEffect(() => { document.title = \`\${PAGE_TITLES[page]} | ${projectName}\`; }, [page]);
+${auth ? `
+  const handleLogin = (t: string) => setToken(t);
+  const handleLogout = () => {
+    clearToken();
+    setToken(null);
+    queryClient.clear();
+  };
 
-export const UpdatePostBody = z.object({
-  title: z.string().optional(),
-  content: z.string().optional(),
-  published: z.boolean().optional(),
-});
+  if (!token) return <Login onLogin={handleLogin} />;
+` : ""}
 
-export const TaskSchema = z.object({
-  id: z.string(),
-  title: z.string(),
-  completed: z.boolean(),
-  priority: z.enum(['low', 'medium', 'high']),
-  createdAt: z.string(),
-});
+  const nav = [
+    { id: 'dashboard' as AppPage, label: 'Dashboard', icon: LayoutDashboard },
+    { id: 'users' as AppPage, label: 'Users',     icon: Users },
+    { id: 'posts' as AppPage, label: 'Posts',     icon: FileText },
+    { id: 'tasks' as AppPage, label: 'Tasks',     icon: CheckSquare },
+  ];
 
-export const CreateTaskBody = z.object({
-  title: z.string().min(1),
-  priority: z.enum(['low', 'medium', 'high']).optional(),
-});
+  const sidebar = (
+    <aside
+      className={\`flex flex-col h-full transition-transform md:translate-x-0 \${
+        sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+      }\`}
+      style={{ background: 'var(--sidebar-bg)', borderRight: '1px solid var(--border)', width: '224px' }}
+    >
+      <div className="flex items-center gap-2 p-5 pb-4">
+        <Server className="w-5 h-5" style={{ color: 'var(--accent)' }} />
+        <span className="font-bold text-sm tracking-wide" style={{ color: 'var(--fg)' }}>${projectName}</span>
+      </div>
+      <nav className="flex-1 px-3 space-y-0.5">
+        {nav.map(({ id, label, icon: Icon }) => (
+          <button
+            key={id}
+            onClick={() => { navigate(id); setSidebarOpen(false); }}
+            className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors"
+            style={page === id
+              ? { background: 'var(--sidebar-active-bg)', color: 'var(--sidebar-active-fg)' }
+              : { color: 'var(--sidebar-fg)' }
+            }
+          >
+            <Icon className="w-4 h-4 flex-shrink-0" />
+            {label}
+          </button>
+        ))}
+      </nav>
+      <div className="p-3 border-t space-y-1" style={{ borderColor: 'var(--border)' }}>
+        <button
+          onClick={toggleTheme}
+          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors"
+          style={{ color: 'var(--sidebar-fg)' }}
+        >
+          {theme === 'dark'
+            ? <Sun className="w-4 h-4" />
+            : <Moon className="w-4 h-4" />
+          }
+          {theme === 'dark' ? 'Light mode' : 'Dark mode'}
+        </button>
+${auth ? `        <button
+          onClick={handleLogout}
+          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors hover:text-red-400"
+          style={{ color: 'var(--sidebar-fg)' }}
+        >
+          <LogOut className="w-4 h-4" />
+          Sign out
+        </button>
+` : ""}      </div>
+    </aside>
+  );
 
-export const UpdateTaskBody = z.object({
-  title: z.string().optional(),
-  completed: z.boolean().optional(),
-  priority: z.enum(['low', 'medium', 'high']).optional(),
-});
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "data", "index.ts"), `export const users = [
-  { id: '1', name: 'Alice', email: 'alice@example.com', role: 'admin' as const, createdAt: new Date().toISOString() },
-  { id: '2', name: 'Bob', email: 'bob@example.com', role: 'user' as const, createdAt: new Date().toISOString() },
-];
+  return (
+    <div className="flex min-h-screen overflow-hidden" style={{ background: 'var(--bg)' }}>
+      <PreloadSpinner />
+      <Toaster position="bottom-right" richColors />
+
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 md:hidden"
+          style={{ background: 'rgba(0,0,0,0.6)' }}
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
 
-export const posts = [
-  { id: '1', title: 'Hello World', content: 'First post!', authorId: '1', published: true, createdAt: new Date().toISOString() },
-  { id: '2', title: 'Draft', content: 'Work in progress', authorId: '2', published: false, createdAt: new Date().toISOString() },
-];
+      {/* Sidebar \u2014 fixed on mobile, static on desktop */}
+      <div className="hidden md:flex flex-col" style={{ width: '224px', flexShrink: 0 }}>
+        {sidebar}
+      </div>
+      <div
+        className={\`fixed inset-y-0 left-0 z-50 flex flex-col md:hidden transition-transform \${
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+        }\`}
+      >
+        {sidebar}
+      </div>
 
-export const tasks = [
-  { id: '1', title: 'Setup project', completed: true, priority: 'high' as const, createdAt: new Date().toISOString() },
-  { id: '2', title: 'Write tests', completed: false, priority: 'medium' as const, createdAt: new Date().toISOString() },
-  { id: '3', title: 'Deploy', completed: false, priority: 'low' as const, createdAt: new Date().toISOString() },
-];
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "health", "get.ts"), `import { z } from 'zod';
+      {/* Main */}
+      <div className="flex flex-col flex-1 min-w-0">
+        {/* Mobile topbar */}
+        <header className="flex md:hidden items-center gap-3 px-4 h-14 border-b"
+          style={{ borderColor: 'var(--border)', background: 'var(--sidebar-bg)' }}>
+          <button onClick={toggleSidebar} className="p-1.5 rounded-md"
+            style={{ color: 'var(--fg-muted)' }}>
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          <span className="font-semibold text-sm" style={{ color: 'var(--fg)' }}>
+            {PAGE_TITLES[page]}
+          </span>
+        </header>
+        <main className="flex-1 overflow-auto p-6 sm:p-8">
+          {page === 'dashboard' && <Dashboard />}
+          {page === 'users'     && <UsersPage />}
+          {page === 'posts'     && <PostsPage />}
+          {page === 'tasks'     && <TasksPage />}
+        </main>
+      </div>
+    </div>
+  );
+}
+`;
+}
+function generateLoginPage() {
+  return `import { useState, FormEvent } from 'react';
+import { Server, Loader2 } from 'lucide-react';
+import { apiFetch, setToken } from '@/lib/api';
 
-export const schema = {
-  response: z.object({
-    status: z.string(),
-    timestamp: z.string(),
-    version: z.string(),
-    uptime: z.number(),
-  }),
-};
+interface Props {
+  onLogin: (token: string) => void;
+}
 
-export default async () => ({
-  status: 'ok',
-  timestamp: new Date().toISOString(),
-  version: '1.0.0',
-  uptime: process.uptime(),
-});
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "stats", "get.ts"), `import { z } from 'zod';
-import { users, posts, tasks } from '../../../data/index.js';
+export default function Login({ onLogin }: Props) {
+  const [email, setEmail] = useState('admin@demo.com');
+  const [password, setPassword] = useState('admin123');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
 
-export const schema = {
-  response: z.object({
-    users: z.number(),
-    posts: z.number(),
-    tasks: z.number(),
-    publishedPosts: z.number(),
-    completedTasks: z.number(),
-  }),
-};
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      const res = await apiFetch<{ token: string }>('/api/auth/login', {
+        method: 'POST',
+        body: JSON.stringify({ email, password }),
+      });
+      if (res.status === 200 && res.data.token) {
+        setToken(res.data.token);
+        onLogin(res.data.token);
+      } else {
+        setError('Invalid credentials');
+      }
+    } catch {
+      setError('Connection failed \u2014 is the API running?');
+    } finally {
+      setLoading(false);
+    }
+  };
 
-export default async () => ({
-  users: users.length,
-  posts: posts.length,
-  tasks: tasks.length,
-  publishedPosts: posts.filter(p => p.published).length,
-  completedTasks: tasks.filter(t => t.completed).length,
-});
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "echo", "get.ts"), `import { z } from 'zod';
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--bg)' }}>
+      <div className="w-full max-w-sm">
+        <div className="flex flex-col items-center mb-8">
+          <div className="w-14 h-14 rounded-2xl flex items-center justify-center mb-4"
+            style={{ background: 'var(--accent)', color: 'var(--accent-fg)' }}>
+            <Server className="w-7 h-7" />
+          </div>
+          <h1 className="text-2xl font-bold" style={{ color: 'var(--fg)' }}>Sign in</h1>
+          <p className="text-sm mt-1" style={{ color: 'var(--fg-muted)' }}>to your kozo dashboard</p>
+        </div>
 
-export const schema = {
-  query: z.object({ message: z.string() }),
-  response: z.object({
-    echo: z.string(),
-    timestamp: z.string(),
-  }),
-};
+        <form onSubmit={submit} className="card space-y-4">
+          <div>
+            <label className="block text-xs font-medium mb-1.5" style={{ color: 'var(--fg-muted)' }}>Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              className="w-full px-3 py-2.5 rounded-lg text-sm focus:outline-none"
+              style={{ background: 'var(--input-bg)', border: '1px solid var(--input-border)', color: 'var(--fg)' }}
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium mb-1.5" style={{ color: 'var(--fg-muted)' }}>Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              className="w-full px-3 py-2.5 rounded-lg text-sm focus:outline-none"
+              style={{ background: 'var(--input-bg)', border: '1px solid var(--input-border)', color: 'var(--fg)' }}
+              required
+            />
+          </div>
+          {error && <p className="text-xs" style={{ color: 'var(--destructive)' }}>{error}</p>}
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-2.5 rounded-lg text-sm font-semibold transition flex items-center justify-center gap-2 disabled:opacity-50"
+            style={{ background: 'var(--accent)', color: 'var(--accent-fg)' }}
+          >
+            {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+            Sign in
+          </button>
+        </form>
+        <p className="text-center text-xs mt-4" style={{ color: 'var(--fg-subtle)' }}>
+          Demo: admin@demo.com / admin123
+        </p>
+      </div>
+    </div>
+  );
+}
+`;
+}
+function generateDashboardPage() {
+  return `import { useQuery } from '@tanstack/react-query';
+import { healthQuery, statsQuery } from '@/lib/queries';
+import { Users, FileText, CheckSquare, Zap } from 'lucide-react';
+import { Skeleton } from '@/components/Skeleton';
 
-export default async ({ query }: { query: { message: string } }) => ({
-  echo: query.message,
-  timestamp: new Date().toISOString(),
-});
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "validate", "post.ts"), `import { z } from 'zod';
+function StatCard({ label, value, sub, icon: Icon, accent }: {
+  label: string; value: string | number; sub?: string;
+  icon: React.ElementType; accent: string;
+}) {
+  return (
+    <div className="card">
+      <div className="flex items-start justify-between">
+        <div className="flex-1 min-w-0">
+          <p className="text-xs font-medium uppercase tracking-wider mb-1" style={{ color: 'var(--fg-muted)' }}>{label}</p>
+          <p className="text-3xl font-bold" style={{ color: 'var(--fg)' }}>{value}</p>
+          {sub && <p className="text-xs mt-1" style={{ color: 'var(--fg-subtle)' }}>{sub}</p>}
+        </div>
+        <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
+          style={{ background: accent + '22', color: accent }}>
+          <Icon className="w-5 h-5" />
+        </div>
+      </div>
+    </div>
+  );
+}
 
-export const schema = {
-  body: z.object({
-    email: z.string().email(),
-    age: z.number().min(0).max(150),
-  }),
-  response: z.object({
-    valid: z.boolean(),
-    data: z.object({ email: z.string(), age: z.number() }),
-  }),
-};
+function DashboardSkeleton() {
+  return (
+    <div>
+      <div className="mb-6">
+        <Skeleton className="h-8 w-40 mb-2" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+      <div className="grid grid-cols-2 gap-3 sm:gap-4 mb-8">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="card">
+            <div className="flex items-start justify-between">
+              <div><Skeleton className="h-3 w-16 mb-3" /><Skeleton className="h-9 w-20 mb-2" /></div>
+              <Skeleton className="w-10 h-10 rounded-xl" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
 
-export default async ({ body }: { body: { email: string; age: number } }) => ({
-  valid: true,
-  data: body,
-});
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "users", "get.ts"), `import { z } from 'zod';
-import { users } from '../../../data/index.js';
-import { UserSchema } from '../../../schemas/index.js';
+export default function Dashboard() {
+  const { data: health } = useQuery(healthQuery);
+  const { data: stats, isLoading } = useQuery(statsQuery);
 
-export const schema = {
-  response: z.array(UserSchema),
-};
+  const uptime = health?.uptime;
+  const uptimeStr = uptime !== undefined
+    ? uptime > 3600 ? \`\${Math.floor(uptime / 3600)}h \${Math.floor((uptime % 3600) / 60)}m\`
+    : uptime > 60 ? \`\${Math.floor(uptime / 60)}m \${Math.floor(uptime % 60)}s\`
+    : \`\${Math.floor(uptime)}s\`
+    : '\u2014';
 
-export default async () => users;
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "users", "post.ts"), `import { users } from '../../../data/index.js';
-import { UserSchema, CreateUserBody } from '../../../schemas/index.js';
+  if (isLoading) return <DashboardSkeleton />;
 
-export const schema = {
-  body: CreateUserBody,
-  response: UserSchema,
-};
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl sm:text-3xl font-bold tracking-tight" style={{ color: 'var(--fg)' }}>Dashboard</h1>
+        <p className="text-sm mt-1" style={{ color: 'var(--fg-muted)' }}>Server overview and statistics</p>
+      </div>
 
-export default async ({ body }: { body: { name: string; email: string; role?: 'admin' | 'user' } }) => {
-  const newUser = {
-    id: String(Date.now()),
-    name: body.name,
-    email: body.email,
-    role: body.role ?? ('user' as const),
-    createdAt: new Date().toISOString(),
-  };
-  users.push(newUser);
-  return newUser;
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "users", "[id]", "get.ts"), `import { z } from 'zod';
-import { KozoError } from '@kozojs/core';
-import { users } from '../../../../data/index.js';
-import { UserSchema } from '../../../../schemas/index.js';
+      <div className="grid grid-cols-2 gap-3 sm:gap-4 mb-8">
+        <StatCard label="Users"  value={stats?.users ?? '\u2014'} icon={Users}       accent="var(--accent-2)" />
+        <StatCard label="Posts"  value={stats?.posts ?? '\u2014'}
+          sub={stats ? \`\${stats.publishedPosts} published\` : undefined}
+          icon={FileText}    accent="#c084fc" />
+        <StatCard label="Tasks"  value={stats?.tasks ?? '\u2014'}
+          sub={stats ? \`\${stats.completedTasks} completed\` : undefined}
+          icon={CheckSquare} accent="#34d399" />
+        <StatCard label="Uptime" value={uptimeStr}
+          sub={health?.version ? \`v\${health.version}\` : undefined}
+          icon={Zap}         accent="#fbbf24" />
+      </div>
 
-export const schema = {
-  params: z.object({ id: z.string() }),
-  response: UserSchema,
-};
+      <div className="card">
+        <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--fg)' }}>API Status</h3>
+        <div className="flex items-center gap-3">
+          <code className="flex-1 px-3 py-2 rounded-lg text-xs" style={{ background: 'var(--bg-subtle)', color: 'var(--fg-muted)' }}>
+            GET /api/health
+          </code>
+          <span className="px-2 py-0.5 rounded text-xs font-semibold"
+            style={health?.status === 'ok'
+              ? { background: 'rgba(52,211,153,0.15)', color: '#34d399' }
+              : { background: 'var(--bg-subtle)', color: 'var(--fg-muted)' }
+            }>
+            {health?.status ?? 'pending'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+}
+function generateUsersPage() {
+  return `import { useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { usersQuery, type User } from '@/lib/queries';
+import { apiFetch } from '@/lib/api';
+import { useUIStore } from '@/store/ui';
+import { Plus, Trash2, Loader2 } from 'lucide-react';
+import { Skeleton } from '@/components/Skeleton';
 
-export default async ({ params }: { params: { id: string } }) => {
-  const user = users.find(u => u.id === params.id);
-  if (!user) throw new KozoError('User not found', 404, 'NOT_FOUND');
-  return user;
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "users", "[id]", "put.ts"), `import { z } from 'zod';
-import { KozoError } from '@kozojs/core';
-import { users } from '../../../../data/index.js';
-import { UserSchema, UpdateUserBody } from '../../../../schemas/index.js';
+function UsersSkeleton() {
+  return (
+    <div>
+      <div className="mb-6"><Skeleton className="h-8 w-32 mb-2" /><Skeleton className="h-4 w-24" /></div>
+      <div className="card mb-4"><Skeleton className="h-5 w-28 mb-3" /><div className="flex gap-3"><Skeleton className="h-10 flex-1" /><Skeleton className="h-10 flex-1" /><Skeleton className="h-10 w-20" /></div></div>
+      <div className="card">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-4 py-3 border-b last:border-0" style={{ borderColor: 'var(--border)' }}>
+            <Skeleton className="h-4 flex-1" /><Skeleton className="h-4 flex-1" /><Skeleton className="h-5 w-14 rounded-full" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
 
-export const schema = {
-  params: z.object({ id: z.string() }),
-  body: UpdateUserBody,
-  response: UserSchema,
-};
+export default function UsersPage() {
+  const queryClient = useQueryClient();
+  const notify = useUIStore((s) => s.notify);
+  const [form, setForm] = useState({ name: '', email: '' });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
 
-export default async ({
-  params,
-  body,
-}: {
-  params: { id: string };
-  body: { name?: string; email?: string; role?: 'admin' | 'user' };
-}) => {
-  const idx = users.findIndex(u => u.id === params.id);
-  if (idx === -1) throw new KozoError('User not found', 404, 'NOT_FOUND');
-  users[idx] = { ...users[idx], ...body };
-  return users[idx];
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "users", "[id]", "delete.ts"), `import { z } from 'zod';
-import { KozoError } from '@kozojs/core';
-import { users } from '../../../../data/index.js';
+  const { data: users = [], isLoading } = useQuery(usersQuery);
 
-export const schema = {
-  params: z.object({ id: z.string() }),
-  response: z.object({ success: z.boolean(), message: z.string() }),
-};
+  const createUser = async () => {
+    if (!form.name || !form.email) { setError('Name and email required'); return; }
+    setLoading(true); setError('');
+    try {
+      const res = await apiFetch('/api/users', { method: 'POST', body: JSON.stringify(form) });
+      if (res.status >= 400) throw new Error('Failed');
+      setForm({ name: '', email: '' });
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+      notify('success', 'User created');
+    } catch { setError('Failed to create user'); notify('error', 'Failed to create user'); }
+    finally { setLoading(false); }
+  };
 
-export default async ({ params }: { params: { id: string } }) => {
-  const idx = users.findIndex(u => u.id === params.id);
-  if (idx === -1) throw new KozoError('User not found', 404, 'NOT_FOUND');
-  users.splice(idx, 1);
-  return { success: true, message: 'User deleted' };
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "posts", "get.ts"), `import { z } from 'zod';
-import { posts } from '../../../data/index.js';
-import { PostSchema } from '../../../schemas/index.js';
+  const deleteUser = async (id: string | number) => {
+    await apiFetch(\`/api/users/\${id}\`, { method: 'DELETE' });
+    queryClient.invalidateQueries({ queryKey: ['users'] });
+    notify('success', 'User deleted');
+  };
 
-export const schema = {
-  query: z.object({ published: z.coerce.boolean().optional() }),
-  response: z.array(PostSchema),
-};
+  if (isLoading) return <UsersSkeleton />;
 
-export default async ({ query }: { query: { published?: boolean } }) => {
-  if (query.published !== undefined) {
-    return posts.filter(p => p.published === query.published);
-  }
-  return posts;
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "posts", "post.ts"), `import { posts, users } from '../../../data/index.js';
-import { PostSchema, CreatePostBody } from '../../../schemas/index.js';
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl sm:text-3xl font-bold tracking-tight" style={{ color: 'var(--fg)' }}>Users</h1>
+        <p className="text-sm mt-1" style={{ color: 'var(--fg-muted)' }}>{users.length} total</p>
+      </div>
 
-export const schema = {
-  body: CreatePostBody,
-  response: PostSchema,
-};
+      <div className="card mb-4">
+        <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--fg)' }}>Add User</h3>
+        <div className="flex gap-3">
+          <input
+            placeholder="Full name"
+            value={form.name}
+            onChange={e => setForm({ ...form, name: e.target.value })}
+            className="flex-1 px-3 py-2.5 rounded-lg text-sm focus:outline-none"
+            style={{ background: 'var(--input-bg)', border: '1px solid var(--input-border)', color: 'var(--fg)' }}
+          />
+          <input
+            placeholder="email@example.com"
+            type="email"
+            value={form.email}
+            onChange={e => setForm({ ...form, email: e.target.value })}
+            className="flex-1 px-3 py-2.5 rounded-lg text-sm focus:outline-none"
+            style={{ background: 'var(--input-bg)', border: '1px solid var(--input-border)', color: 'var(--fg)' }}
+          />
+          <button onClick={() => void createUser()} disabled={loading}
+            className="px-4 py-2 rounded-lg text-sm font-semibold transition flex items-center gap-2 disabled:opacity-50"
+            style={{ background: 'var(--accent)', color: 'var(--accent-fg)' }}>
+            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
+            Add
+          </button>
+        </div>
+        {error && <p className="text-xs mt-2" style={{ color: 'var(--destructive)' }}>{error}</p>}
+      </div>
 
-export default async ({
-  body,
-}: {
-  body: { title: string; content?: string; authorId?: string; published?: boolean };
-}) => {
-  const authorId = body.authorId ?? users[0]?.id ?? 'unknown';
-  const newPost = {
-    id: String(Date.now()),
-    title: body.title,
-    content: body.content ?? '',
-    authorId,
-    published: body.published ?? false,
-    createdAt: new Date().toISOString(),
-  };
-  posts.push(newPost);
-  return newPost;
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "posts", "[id]", "get.ts"), `import { z } from 'zod';
-import { KozoError } from '@kozojs/core';
-import { posts } from '../../../../data/index.js';
-import { PostSchema } from '../../../../schemas/index.js';
+      <div className="card overflow-hidden">
+        {users.length === 0 ? (
+          <div className="py-8 text-center text-sm" style={{ color: 'var(--fg-muted)' }}>No users yet. Add one above.</div>
+        ) : (
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ borderBottom: '1px solid var(--border)' }}>
+                <th className="text-left px-4 py-3 text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--fg-muted)' }}>Name</th>
+                <th className="text-left px-4 py-3 text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--fg-muted)' }}>Email</th>
+                <th className="text-left px-4 py-3 text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--fg-muted)' }}>Role</th>
+                <th className="px-4 py-3"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((user) => (
+                <tr key={user.id} style={{ borderBottom: '1px solid var(--border)' }}>
+                  <td className="px-4 py-3 font-medium" style={{ color: 'var(--fg)' }}>{user.name}</td>
+                  <td className="px-4 py-3" style={{ color: 'var(--fg-muted)' }}>{user.email}</td>
+                  <td className="px-4 py-3">
+                    {user.role && (
+                      <span className="px-2 py-0.5 rounded-full text-xs font-semibold"
+                        style={user.role === 'admin'
+                          ? { background: 'rgba(251,191,36,0.15)', color: '#fbbf24' }
+                          : { background: 'var(--bg-subtle)', color: 'var(--fg-muted)' }}>
+                        {user.role}
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <button onClick={() => void deleteUser(user.id)}
+                      className="p-1.5 rounded transition-colors"
+                      style={{ color: 'var(--fg-subtle)' }}>
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}
+`;
+}
+function generatePostsPage() {
+  return `import { useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { postsQuery, type Post } from '@/lib/queries';
+import { apiFetch } from '@/lib/api';
+import { useUIStore } from '@/store/ui';
+import { Plus, Trash2, Loader2, Globe, Lock } from 'lucide-react';
+import { Skeleton } from '@/components/Skeleton';
 
-export const schema = {
-  params: z.object({ id: z.string() }),
-  response: PostSchema,
-};
+function PostsSkeleton() {
+  return (
+    <div>
+      <div className="mb-6"><Skeleton className="h-8 w-28 mb-2" /><Skeleton className="h-4 w-20" /></div>
+      <div className="card mb-4"><Skeleton className="h-5 w-24 mb-3" /><Skeleton className="h-10 w-full mb-2" /><Skeleton className="h-20 w-full" /></div>
+      {Array.from({ length: 2 }).map((_, i) => (
+        <div key={i} className="card mb-3"><Skeleton className="h-5 w-3/4 mb-2" /><Skeleton className="h-4 w-full" /></div>
+      ))}
+    </div>
+  );
+}
 
-export default async ({ params }: { params: { id: string } }) => {
-  const post = posts.find(p => p.id === params.id);
-  if (!post) throw new KozoError('Post not found', 404, 'NOT_FOUND');
-  return post;
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "posts", "[id]", "put.ts"), `import { z } from 'zod';
-import { KozoError } from '@kozojs/core';
-import { posts } from '../../../../data/index.js';
-import { PostSchema, UpdatePostBody } from '../../../../schemas/index.js';
+export default function PostsPage() {
+  const queryClient = useQueryClient();
+  const notify = useUIStore((s) => s.notify);
+  const [form, setForm] = useState({ title: '', content: '', published: false });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
 
-export const schema = {
-  params: z.object({ id: z.string() }),
-  body: UpdatePostBody,
-  response: PostSchema,
-};
+  const { data: posts = [], isLoading } = useQuery(postsQuery);
 
-export default async ({
-  params,
-  body,
-}: {
-  params: { id: string };
-  body: { title?: string; content?: string; published?: boolean };
-}) => {
-  const idx = posts.findIndex(p => p.id === params.id);
-  if (idx === -1) throw new KozoError('Post not found', 404, 'NOT_FOUND');
-  posts[idx] = { ...posts[idx], ...body };
-  return posts[idx];
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "posts", "[id]", "delete.ts"), `import { z } from 'zod';
-import { KozoError } from '@kozojs/core';
-import { posts } from '../../../../data/index.js';
+  const createPost = async () => {
+    if (!form.title) { setError('Title required'); return; }
+    setLoading(true); setError('');
+    try {
+      const res = await apiFetch('/api/posts', { method: 'POST', body: JSON.stringify(form) });
+      if (res.status >= 400) throw new Error('Failed');
+      setForm({ title: '', content: '', published: false });
+      queryClient.invalidateQueries({ queryKey: ['posts'] });
+      notify('success', 'Post created');
+    } catch { setError('Failed to create post'); notify('error', 'Failed to create post'); }
+    finally { setLoading(false); }
+  };
 
-export const schema = {
-  params: z.object({ id: z.string() }),
-  response: z.object({ success: z.boolean(), message: z.string() }),
-};
+  const deletePost = async (id: string | number) => {
+    await apiFetch(\`/api/posts/\${id}\`, { method: 'DELETE' });
+    queryClient.invalidateQueries({ queryKey: ['posts'] });
+    notify('success', 'Post deleted');
+  };
 
-export default async ({ params }: { params: { id: string } }) => {
-  const idx = posts.findIndex(p => p.id === params.id);
-  if (idx === -1) throw new KozoError('Post not found', 404, 'NOT_FOUND');
-  posts.splice(idx, 1);
-  return { success: true, message: 'Post deleted' };
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "tasks", "get.ts"), `import { z } from 'zod';
-import { tasks } from '../../../data/index.js';
-import { TaskSchema } from '../../../schemas/index.js';
+  if (isLoading) return <PostsSkeleton />;
 
-export const schema = {
-  query: z.object({
-    completed: z.coerce.boolean().optional(),
-    priority: z.enum(['low', 'medium', 'high']).optional(),
-  }),
-  response: z.array(TaskSchema),
-};
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl sm:text-3xl font-bold tracking-tight" style={{ color: 'var(--fg)' }}>Posts</h1>
+        <p className="text-sm mt-1" style={{ color: 'var(--fg-muted)' }}>{posts.length} total</p>
+      </div>
 
-export default async ({
-  query,
-}: {
-  query: { completed?: boolean; priority?: 'low' | 'medium' | 'high' };
-}) => {
-  let result = [...tasks];
-  if (query.completed !== undefined) {
-    result = result.filter(t => t.completed === query.completed);
-  }
-  if (query.priority) {
-    result = result.filter(t => t.priority === query.priority);
-  }
-  return result;
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "tasks", "post.ts"), `import { tasks } from '../../../data/index.js';
-import { TaskSchema, CreateTaskBody } from '../../../schemas/index.js';
+      <div className="card mb-4">
+        <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--fg)' }}>New Post</h3>
+        <div className="space-y-3">
+          <input
+            placeholder="Post title"
+            value={form.title}
+            onChange={e => setForm({ ...form, title: e.target.value })}
+            className="w-full px-3 py-2.5 rounded-lg text-sm focus:outline-none"
+            style={{ background: 'var(--input-bg)', border: '1px solid var(--input-border)', color: 'var(--fg)' }}
+          />
+          <textarea
+            placeholder="Content (optional)"
+            value={form.content}
+            onChange={e => setForm({ ...form, content: e.target.value })}
+            rows={2}
+            className="w-full px-3 py-2.5 rounded-lg text-sm focus:outline-none resize-none"
+            style={{ background: 'var(--input-bg)', border: '1px solid var(--input-border)', color: 'var(--fg)' }}
+          />
+          <div className="flex items-center justify-between">
+            <label className="flex items-center gap-2 text-sm cursor-pointer" style={{ color: 'var(--fg-muted)' }}>
+              <input type="checkbox" checked={form.published}
+                onChange={e => setForm({ ...form, published: e.target.checked })} />
+              Publish immediately
+            </label>
+            <button onClick={() => void createPost()} disabled={loading}
+              className="px-4 py-2 rounded-lg text-sm font-semibold transition flex items-center gap-2 disabled:opacity-50"
+              style={{ background: 'var(--accent)', color: 'var(--accent-fg)' }}>
+              {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
+              Create
+            </button>
+          </div>
+        </div>
+        {error && <p className="text-xs mt-2" style={{ color: 'var(--destructive)' }}>{error}</p>}
+      </div>
 
-export const schema = {
-  body: CreateTaskBody,
-  response: TaskSchema,
-};
+      <div className="space-y-3">
+        {posts.length === 0 ? (
+          <div className="text-center text-sm py-8" style={{ color: 'var(--fg-muted)' }}>No posts yet. Create one above.</div>
+        ) : (
+          posts.map((post) => (
+            <div key={post.id} className="card flex items-start justify-between">
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  {post.published
+                    ? <Globe className="w-3.5 h-3.5 flex-shrink-0" style={{ color: '#34d399' }} />
+                    : <Lock className="w-3.5 h-3.5 flex-shrink-0" style={{ color: 'var(--fg-subtle)' }} />
+                  }
+                  <h3 className="font-semibold truncate text-sm" style={{ color: 'var(--fg)' }}>{post.title}</h3>
+                </div>
+                {post.content && (
+                  <p className="text-sm line-clamp-2 mt-0.5" style={{ color: 'var(--fg-muted)' }}>{post.content}</p>
+                )}
+              </div>
+              <button onClick={() => void deletePost(post.id)}
+                className="ml-3 p-1.5 rounded transition-colors flex-shrink-0"
+                style={{ color: 'var(--fg-subtle)' }}>
+                <Trash2 className="w-4 h-4" />
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+`;
+}
+function generateTasksPage() {
+  return `import { useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { tasksQuery, type Task } from '@/lib/queries';
+import { apiFetch } from '@/lib/api';
+import { useUIStore } from '@/store/ui';
+import { Plus, Trash2, Loader2, CheckCircle2, Circle } from 'lucide-react';
+import { Skeleton } from '@/components/Skeleton';
 
-export default async ({
-  body,
-}: {
-  body: { title: string; priority?: 'low' | 'medium' | 'high' };
-}) => {
-  const newTask = {
-    id: String(Date.now()),
-    title: body.title,
-    completed: false,
-    priority: body.priority ?? ('medium' as const),
-    createdAt: new Date().toISOString(),
-  };
-  tasks.push(newTask);
-  return newTask;
+const PRIORITY_STYLE: Record<string, { background: string; color: string }> = {
+  high:   { background: 'rgba(239,68,68,0.15)',  color: '#f87171' },
+  medium: { background: 'rgba(251,191,36,0.15)', color: '#fbbf24' },
+  low:    { background: 'var(--bg-subtle)',       color: 'var(--fg-muted)' },
 };
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "tasks", "[id]", "get.ts"), `import { z } from 'zod';
-import { KozoError } from '@kozojs/core';
-import { tasks } from '../../../../data/index.js';
-import { TaskSchema } from '../../../../schemas/index.js';
 
-export const schema = {
-  params: z.object({ id: z.string() }),
-  response: TaskSchema,
-};
+function TasksSkeleton() {
+  return (
+    <div>
+      <div className="mb-6"><Skeleton className="h-8 w-28 mb-2" /><Skeleton className="h-4 w-24" /></div>
+      <div className="card mb-4"><Skeleton className="h-5 w-24 mb-3" /><div className="flex gap-3"><Skeleton className="h-10 flex-1" /><Skeleton className="h-10 w-28" /><Skeleton className="h-10 w-20" /></div></div>
+      {Array.from({ length: 3 }).map((_, i) => (
+        <div key={i} className="card flex items-center gap-3 mb-2">
+          <Skeleton className="w-5 h-5 rounded-full" /><Skeleton className="h-4 flex-1" /><Skeleton className="h-5 w-14 rounded-full" />
+        </div>
+      ))}
+    </div>
+  );
+}
 
-export default async ({ params }: { params: { id: string } }) => {
-  const task = tasks.find(t => t.id === params.id);
-  if (!task) throw new KozoError('Task not found', 404, 'NOT_FOUND');
-  return task;
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "tasks", "[id]", "put.ts"), `import { z } from 'zod';
-import { KozoError } from '@kozojs/core';
-import { tasks } from '../../../../data/index.js';
-import { TaskSchema, UpdateTaskBody } from '../../../../schemas/index.js';
+export default function TasksPage() {
+  const queryClient = useQueryClient();
+  const notify = useUIStore((s) => s.notify);
+  const [form, setForm] = useState({ title: '', priority: 'medium' as 'low' | 'medium' | 'high' });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
 
-export const schema = {
-  params: z.object({ id: z.string() }),
-  body: UpdateTaskBody,
-  response: TaskSchema,
-};
+  const { data: tasks = [], isLoading } = useQuery(tasksQuery);
 
-export default async ({
-  params,
-  body,
-}: {
-  params: { id: string };
-  body: { title?: string; completed?: boolean; priority?: 'low' | 'medium' | 'high' };
-}) => {
-  const idx = tasks.findIndex(t => t.id === params.id);
-  if (idx === -1) throw new KozoError('Task not found', 404, 'NOT_FOUND');
-  tasks[idx] = { ...tasks[idx], ...body };
-  return tasks[idx];
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "tasks", "[id]", "delete.ts"), `import { z } from 'zod';
-import { KozoError } from '@kozojs/core';
-import { tasks } from '../../../../data/index.js';
-
-export const schema = {
-  params: z.object({ id: z.string() }),
-  response: z.object({ success: z.boolean(), message: z.string() }),
-};
+  const createTask = async () => {
+    if (!form.title) { setError('Title required'); return; }
+    setLoading(true); setError('');
+    try {
+      const res = await apiFetch('/api/tasks', { method: 'POST', body: JSON.stringify(form) });
+      if (res.status >= 400) throw new Error('Failed');
+      setForm({ title: '', priority: 'medium' });
+      queryClient.invalidateQueries({ queryKey: ['tasks'] });
+      notify('success', 'Task created');
+    } catch { setError('Failed to create task'); notify('error', 'Failed to create task'); }
+    finally { setLoading(false); }
+  };
 
-export default async ({ params }: { params: { id: string } }) => {
-  const idx = tasks.findIndex(t => t.id === params.id);
-  if (idx === -1) throw new KozoError('Task not found', 404, 'NOT_FOUND');
-  tasks.splice(idx, 1);
-  return { success: true, message: 'Task deleted' };
-};
-`);
-  await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "tasks", "[id]", "toggle", "patch.ts"), `import { z } from 'zod';
-import { KozoError } from '@kozojs/core';
-import { tasks } from '../../../../../data/index.js';
-import { TaskSchema } from '../../../../../schemas/index.js';
+  const toggleTask = async (id: string | number) => {
+    await apiFetch(\`/api/tasks/\${id}/toggle\`, { method: 'PATCH' });
+    queryClient.invalidateQueries({ queryKey: ['tasks'] });
+  };
 
-export const schema = {
-  params: z.object({ id: z.string() }),
-  response: TaskSchema,
-};
+  const deleteTask = async (id: string | number) => {
+    await apiFetch(\`/api/tasks/\${id}\`, { method: 'DELETE' });
+    queryClient.invalidateQueries({ queryKey: ['tasks'] });
+    notify('success', 'Task deleted');
+  };
 
-export default async ({ params }: { params: { id: string } }) => {
-  const idx = tasks.findIndex(t => t.id === params.id);
-  if (idx === -1) throw new KozoError('Task not found', 404, 'NOT_FOUND');
-  tasks[idx].completed = !tasks[idx].completed;
-  return tasks[idx];
-};
-`);
-  if (auth) {
-    await import_fs_extra.default.outputFile(import_node_path.default.join(apiDir, "src", "routes", "api", "auth", "login", "post.ts"), `import { z } from 'zod';
-import { createJWT, UnauthorizedError } from '@kozojs/auth';
+  const done = tasks.filter(t => t.completed).length;
 
-const JWT_SECRET = process.env.JWT_SECRET || 'change-me';
+  if (isLoading) return <TasksSkeleton />;
 
-const DEMO_USERS = [
-  { email: 'admin@demo.com', password: 'admin123', role: 'admin', name: 'Admin' },
-  { email: 'user@demo.com', password: 'user123', role: 'user', name: 'User' },
-];
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-2xl sm:text-3xl font-bold tracking-tight" style={{ color: 'var(--fg)' }}>Tasks</h1>
+        <p className="text-sm mt-1" style={{ color: 'var(--fg-muted)' }}>{done}/{tasks.length} completed</p>
+      </div>
 
-export const schema = {
-  body: z.object({
-    email: z.string().email(),
-    password: z.string(),
-  }),
-  response: z.object({
-    token: z.string(),
-    user: z.object({
-      email: z.string(),
-      role: z.string(),
-      name: z.string(),
-    }),
-  }),
-};
+      <div className="card mb-4">
+        <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--fg)' }}>New Task</h3>
+        <div className="flex gap-3">
+          <input
+            placeholder="Task title"
+            value={form.title}
+            onChange={e => setForm({ ...form, title: e.target.value })}
+            onKeyDown={e => { if (e.key === 'Enter') void createTask(); }}
+            className="flex-1 px-3 py-2.5 rounded-lg text-sm focus:outline-none"
+            style={{ background: 'var(--input-bg)', border: '1px solid var(--input-border)', color: 'var(--fg)' }}
+          />
+          <select
+            value={form.priority}
+            onChange={e => setForm({ ...form, priority: e.target.value as 'low' | 'medium' | 'high' })}
+            className="px-3 py-2.5 rounded-lg text-sm focus:outline-none"
+            style={{ background: 'var(--input-bg)', border: '1px solid var(--input-border)', color: 'var(--fg)' }}
+          >
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+          </select>
+          <button onClick={() => void createTask()} disabled={loading}
+            className="px-4 py-2 rounded-lg text-sm font-semibold transition flex items-center gap-2 disabled:opacity-50"
+            style={{ background: 'var(--accent)', color: 'var(--accent-fg)' }}>
+            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
+            Add
+          </button>
+        </div>
+        {error && <p className="text-xs mt-2" style={{ color: 'var(--destructive)' }}>{error}</p>}
+      </div>
 
-export default async ({ body }: { body: { email: string; password: string } }) => {
-  const user = DEMO_USERS.find(u => u.email === body.email && u.password === body.password);
-  if (!user) throw new UnauthorizedError('Invalid credentials');
-  const token = await createJWT(
-    { email: user.email, role: user.role, name: user.name },
-    JWT_SECRET,
-    { expiresIn: '24h' },
+      <div className="space-y-2">
+        {tasks.length === 0 ? (
+          <div className="text-center text-sm py-8" style={{ color: 'var(--fg-muted)' }}>No tasks yet. Add one above.</div>
+        ) : (
+          tasks.map((task) => (
+            <div key={task.id} className="card flex items-center justify-between py-3"
+              style={{ opacity: task.completed ? 0.65 : 1 }}>
+              <div className="flex items-center gap-3 flex-1 min-w-0">
+                <button onClick={() => void toggleTask(task.id)}
+                  className="flex-shrink-0 transition-colors"
+                  style={{ color: task.completed ? '#34d399' : 'var(--fg-subtle)' }}>
+                  {task.completed
+                    ? <CheckCircle2 className="w-5 h-5" />
+                    : <Circle className="w-5 h-5" />
+                  }
+                </button>
+                <span className={\`text-sm font-medium truncate \${task.completed ? 'line-through' : ''}\`}
+                  style={{ color: task.completed ? 'var(--fg-subtle)' : 'var(--fg)' }}>
+                  {task.title}
+                </span>
+                <span className="flex-shrink-0 px-2 py-0.5 rounded-full text-xs font-semibold"
+                  style={PRIORITY_STYLE[task.priority] ?? PRIORITY_STYLE.low}>
+                  {task.priority}
+                </span>
+              </div>
+              <button onClick={() => void deleteTask(task.id)}
+                className="ml-3 p-1.5 rounded transition-colors flex-shrink-0"
+                style={{ color: 'var(--fg-subtle)' }}>
+                <Trash2 className="w-4 h-4" />
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
   );
-  return { token, user: { email: user.email, role: user.role, name: user.name } };
-};
-`);
-  }
 }
-async function scaffoldFullstackWeb(projectDir, projectName, frontend, auth = false) {
-  const webDir = import_node_path.default.join(projectDir, "apps", "web");
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(webDir, "src", "lib"));
-  await import_fs_extra.default.ensureDir(import_node_path.default.join(webDir, "src", "pages"));
-  const packageJson = {
-    name: `@${projectName}/web`,
-    version: "1.0.0",
-    type: "module",
-    scripts: { dev: "vite", build: "vite build", preview: "vite preview" },
-    dependencies: {
-      react: "^18.2.0",
-      "react-dom": "^18.2.0",
-      "@tanstack/react-query": "^5.0.0",
-      "lucide-react": "^0.460.0"
-    },
-    devDependencies: {
-      "@types/react": "^18.2.0",
-      "@types/react-dom": "^18.2.0",
-      "@vitejs/plugin-react": "^4.2.0",
-      typescript: "^5.6.0",
-      vite: "^5.0.0",
-      "@tailwindcss/vite": "^4.0.0",
-      tailwindcss: "^4.0.0"
+`;
+}
+
+// src/utils/scaffold/generators/assets.ts
+function generateSsrServer() {
+  return `import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createServer as createViteServer } from 'vite';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const isProduction = process.env.NODE_ENV === 'production';
+const PORT = Number(process.env.PORT ?? 5173);
+
+async function createServer() {
+  const app = (await import('express')).default();
+
+  let vite: Awaited<ReturnType<typeof createViteServer>> | null = null;
+
+  if (!isProduction) {
+    vite = await createViteServer({
+      server: { middlewareMode: true },
+      appType: 'custom',
+    });
+    app.use(vite.middlewares);
+  } else {
+    const { default: sirv } = await import('sirv');
+    app.use(sirv(path.join(__dirname, 'client'), { gzip: true }));
+  }
+
+  app.use('*', async (req, res, next) => {
+    if (req.originalUrl.startsWith('/api')) return next();
+    try {
+      const url = req.originalUrl;
+      let template: string;
+      let render: (url: string) => Promise<{ html: string; helmet?: { title?: string; description?: string } }>;
+
+      if (!isProduction && vite) {
+        template = fs.readFileSync(path.join(process.cwd(), 'index.html'), 'utf-8');
+        template = await vite.transformIndexHtml(url, template);
+        render = (await vite.ssrLoadModule('/src/entry-server.tsx')).render;
+      } else {
+        template = fs.readFileSync(path.join(__dirname, 'client', 'index.html'), 'utf-8');
+        render = (await import('./server/entry-server.js')).render;
+      }
+
+      const { html: appHtml, helmet = {} } = await render(url);
+      const { title = 'App', description = '' } = helmet;
+
+      const finalHtml = template
+        .replace('<title>App</title>', \`<title>\${title}</title>\`)
+        .replace('<!--description-->', description ? \`<meta name="description" content="\${description}" />\` : '')
+        .replace('<!--app-html-->', appHtml);
+
+      res.status(200).set({ 'Content-Type': 'text/html' }).end(finalHtml);
+    } catch (e) {
+      vite?.ssrFixStacktrace(e as Error);
+      next(e);
     }
-  };
-  await import_fs_extra.default.writeJSON(import_node_path.default.join(webDir, "package.json"), packageJson, { spaces: 2 });
-  await import_fs_extra.default.writeJSON(import_node_path.default.join(webDir, "tsconfig.json"), {
-    compilerOptions: {
-      target: "ES2020",
-      lib: ["ES2020", "DOM", "DOM.Iterable"],
-      module: "ESNext",
-      skipLibCheck: true,
-      moduleResolution: "bundler",
-      allowImportingTsExtensions: true,
-      resolveJsonModule: true,
-      isolatedModules: true,
-      noEmit: true,
-      jsx: "react-jsx",
-      strict: true,
-      noUnusedLocals: true,
-      noUnusedParameters: true
-    },
-    include: ["src"]
-  }, { spaces: 2 });
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "vite.config.ts"), `import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite';
+  });
 
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  server: {
-    port: 5173,
-    proxy: {
-      '/api': { target: 'http://localhost:3000', changeOrigin: true },
-    },
-  },
-});
-`);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "index.html"), `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${projectName}</title>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-</html>
-`);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "index.css"), `@import "tailwindcss";
+  app.listen(PORT, () => {
+    console.log(\`\${isProduction ? 'Production' : 'Dev'} server running at http://localhost:\${PORT}\`);
+  });
+}
 
-body { background-color: rgb(15 23 42); color: rgb(241 245 249); font-family: ui-sans-serif, system-ui, sans-serif; }
-* { box-sizing: border-box; }
-`);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "lib", "api.ts"), `const API_BASE = '';
+createServer();
+`;
+}
+function generateIndexCss(_projectName) {
+  return `@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --bg: #0f0f10;
+  --bg-subtle: #1a1a1e;
+  --card: #18181c;
+  --card-border: #2a2a30;
+  --sidebar-bg: #111114;
+  --fg: #e8e8ec;
+  --fg-muted: #888893;
+  --fg-subtle: #555560;
+  --border: #27272e;
+  --input-bg: #1e1e22;
+  --input-border: #32323a;
+  --accent: #ABF43F;
+  --accent-hover: #c0ff55;
+  --accent-fg: #0a0f00;
+  --accent-subtle: rgba(171,244,63,0.12);
+  --accent-border: rgba(171,244,63,0.3);
+  --destructive: #f87171;
+  --radius: 0.75rem;
+}
 
-${auth ? `export function getToken(): string | null {
-  return localStorage.getItem('kozo_token');
+.light {
+  --bg: #f8f8fa;
+  --bg-subtle: #ededf0;
+  --card: #ffffff;
+  --card-border: #e0e0e6;
+  --sidebar-bg: #f0f0f3;
+  --fg: #121214;
+  --fg-muted: #555560;
+  --fg-subtle: #9999a8;
+  --border: #e2e2e8;
+  --input-bg: #ffffff;
+  --input-border: #d0d0d8;
+  --accent: #4d7c00;
+  --accent-hover: #3d6300;
+  --accent-fg: #ffffff;
+  --accent-subtle: rgba(77,124,0,0.1);
+  --accent-border: rgba(77,124,0,0.3);
+  --destructive: #dc2626;
+  --radius: 0.75rem;
 }
 
-export function setToken(token: string): void {
-  localStorage.setItem('kozo_token', token);
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border-color: var(--border);
 }
 
-export function clearToken(): void {
-  localStorage.removeItem('kozo_token');
+html {
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  font-size: 16px;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
 }
-` : ""}
-export interface ApiResult<T = unknown> {
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  min-height: 100dvh;
+}
+
+#root {
+  min-height: 100dvh;
+}
+
+.card {
+  background: var(--card);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius);
+  padding: 1rem;
+}
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); }
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: calc(var(--radius) / 2);
+}
+`;
+}
+function generateApiLib(auth) {
+  const tokenHelpers = auth ? `
+const TOKEN_KEY = 'token';
+export const getToken = (): string | null => localStorage.getItem(TOKEN_KEY);
+export const setToken = (t: string): void => { localStorage.setItem(TOKEN_KEY, t); };
+export const clearToken = (): void => { localStorage.removeItem(TOKEN_KEY); };
+` : "";
+  return `export class ApiError extends Error {
+  constructor(
+    public readonly status: number,
+    message: string,
+    public readonly data?: unknown
+  ) {
+    super(message);
+    this.name = 'ApiError';
+  }
+}
+
+export const NO_BODY = new Set(['GET', 'HEAD', 'DELETE', 'OPTIONS']);
+${tokenHelpers}
+export interface ApiResponse<T = unknown> {
   data: T;
   status: number;
-  ms: number;
+  ok: boolean;
 }
 
 export async function apiFetch<T = unknown>(
-  path: string,
-  options: RequestInit = {},
-): Promise<ApiResult<T>> {
-  const start = performance.now();
+  url: string,
+  options: RequestInit = {}
+): Promise<ApiResponse<T>> {
   const headers: Record<string, string> = {
-    'Content-Type': 'application/json',
     ...(options.headers as Record<string, string> ?? {}),
   };
-${auth ? `  const token = getToken();
+
+  if (!NO_BODY.has((options.method ?? 'GET').toUpperCase())) {
+    headers['Content-Type'] ??= 'application/json';
+  }
+${auth ? `
+  const token = getToken();
   if (token) headers['Authorization'] = \`Bearer \${token}\`;
 ` : ""}
-  const res = await fetch(\`\${API_BASE}\${path}\`, { ...options, headers });
-  const data = await res.json() as T;
-  return { data, status: res.status, ms: Math.round(performance.now() - start) };
-}
-`);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "main.tsx"), `import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import App from './App';
-import './index.css';
+  const res = await fetch(url, { ...options, headers });
 
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1 } },
-});
+  if (res.status === 401) {
+    window.dispatchEvent(new Event('auth:401'));
+  }
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  </React.StrictMode>
-);
-`);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "pages", "Dashboard.tsx"), generateDashboardPage());
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "pages", "Users.tsx"), generateUsersPage());
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "pages", "Posts.tsx"), generatePostsPage());
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "pages", "Tasks.tsx"), generateTasksPage());
-  if (auth) {
-    await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "pages", "Login.tsx"), generateLoginPage());
+  let data: T;
+  const ct = res.headers.get('content-type') ?? '';
+  if (ct.includes('application/json')) {
+    data = await res.json() as T;
+  } else {
+    data = (await res.text()) as unknown as T;
   }
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "App.tsx"), generateAppTsx(projectName, auth));
-}
-function generateAppTsx(projectName, auth) {
-  const authImports = auth ? `import { getToken, clearToken } from './lib/api';` : "";
-  const loginImport = auth ? `import Login from './pages/Login';` : "";
-  const queryClientImport = auth ? `import { useQueryClient } from '@tanstack/react-query';` : "";
-  return `import { useState${auth ? ", useEffect" : ""} } from 'react';
-${queryClientImport}
-import { LayoutDashboard, Users, FileText, CheckSquare, Server${auth ? ", LogOut" : ""} } from 'lucide-react';
-${authImports}
-${loginImport}
-import Dashboard from './pages/Dashboard';
-import UsersPage from './pages/Users';
-import PostsPage from './pages/Posts';
-import TasksPage from './pages/Tasks';
 
-type Page = 'dashboard' | 'users' | 'posts' | 'tasks';
+  if (!res.ok) {
+    throw new ApiError(res.status, \`HTTP \${res.status}\`, data);
+  }
 
-export default function App() {
-  const [page, setPage] = useState<Page>('dashboard');
-${auth ? `  const [token, setToken] = useState<string | null>(() => getToken());
-  const queryClient = useQueryClient();
+  return { data, status: res.status, ok: res.ok };
+}
+`;
+}
+function generateQueriesLib() {
+  return `import { queryOptions } from '@tanstack/react-query';
+import { apiFetch } from '@/lib/api';
 
-  useEffect(() => { if (token) { /* token refreshed */ } }, [token]);
+export interface User {
+  id: string | number;
+  name: string;
+  email: string;
+  role?: 'admin' | 'user' | string;
+  createdAt?: string;
+}
 
-  const handleLogin = (t: string) => setToken(t);
-  const handleLogout = () => {
-    clearToken();
-    setToken(null);
-    queryClient.clear();
-  };
-
-  if (!token) return <Login onLogin={handleLogin} />;
-` : ""}
-  const nav = [
-    { id: 'dashboard' as Page, label: 'Dashboard', icon: LayoutDashboard },
-    { id: 'users' as Page, label: 'Users', icon: Users },
-    { id: 'posts' as Page, label: 'Posts', icon: FileText },
-    { id: 'tasks' as Page, label: 'Tasks', icon: CheckSquare },
-  ];
-
-  return (
-    <div className="flex min-h-screen">
-      {/* Sidebar */}
-      <aside className="w-56 bg-slate-900 border-r border-slate-800 flex flex-col p-4">
-        <div className="flex items-center gap-2 mb-8 px-2">
-          <Server className="w-5 h-5 text-blue-400" />
-          <span className="font-bold text-slate-200">${projectName}</span>
-        </div>
-        <nav className="flex-1 space-y-1">
-          {nav.map(({ id, label, icon: Icon }) => (
-            <button
-              key={id}
-              onClick={() => setPage(id)}
-              className={\`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition \${
-                page === id
-                  ? 'bg-blue-600 text-white'
-                  : 'text-slate-400 hover:bg-slate-800 hover:text-white'
-              }\`}
-            >
-              <Icon className="w-4 h-4" />
-              {label}
-            </button>
-          ))}
-        </nav>
-${auth ? `        <button
-          onClick={handleLogout}
-          className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-red-400 transition"
-        >
-          <LogOut className="w-4 h-4" /> Logout
-        </button>
-` : ""}      </aside>
-
-      {/* Main content */}
-      <main className="flex-1 p-8 overflow-auto">
-        {page === 'dashboard' && <Dashboard />}
-        {page === 'users' && <UsersPage />}
-        {page === 'posts' && <PostsPage />}
-        {page === 'tasks' && <TasksPage />}
-      </main>
-    </div>
-  );
-}
-`;
-}
-function generateLoginPage() {
-  return `import { useState, FormEvent } from 'react';
-import { Server, Loader2 } from 'lucide-react';
-import { apiFetch, setToken } from '../lib/api';
-
-interface Props {
-  onLogin: (token: string) => void;
+export interface Post {
+  id: string | number;
+  title: string;
+  content?: string;
+  published?: boolean;
+  authorId?: string | number;
+  createdAt?: string;
 }
 
-export default function Login({ onLogin }: Props) {
-  const [email, setEmail] = useState('admin@demo.com');
-  const [password, setPassword] = useState('admin123');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const submit = async (e: FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setLoading(true);
-    try {
-      const res = await apiFetch<{ token: string }>('/api/auth/login', {
-        method: 'POST',
-        body: JSON.stringify({ email, password }),
-      });
-      if (res.status === 200 && res.data.token) {
-        setToken(res.data.token);
-        onLogin(res.data.token);
-      } else {
-        setError('Invalid credentials');
-      }
-    } catch {
-      setError('Connection failed \u2014 is the API running?');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center p-4">
-      <div className="w-full max-w-sm">
-        <div className="flex flex-col items-center mb-8">
-          <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center mb-4">
-            <Server className="w-6 h-6 text-white" />
-          </div>
-          <h1 className="text-2xl font-bold text-slate-200">Sign in</h1>
-          <p className="text-slate-400 text-sm mt-1">to your kozo dashboard</p>
-        </div>
-
-        <form onSubmit={submit} className="bg-slate-800 rounded-xl border border-slate-700 p-6 space-y-4">
-          <div>
-            <label className="block text-xs font-medium text-slate-400 mb-1">Email</label>
-            <input
-              type="email"
-              value={email}
-              onChange={e => setEmail(e.target.value)}
-              className="w-full px-3 py-2 bg-slate-900 border border-slate-600 rounded-lg text-sm focus:border-blue-500 focus:outline-none"
-              required
-            />
-          </div>
-          <div>
-            <label className="block text-xs font-medium text-slate-400 mb-1">Password</label>
-            <input
-              type="password"
-              value={password}
-              onChange={e => setPassword(e.target.value)}
-              className="w-full px-3 py-2 bg-slate-900 border border-slate-600 rounded-lg text-sm focus:border-blue-500 focus:outline-none"
-              required
-            />
-          </div>
-          {error && <p className="text-red-400 text-xs">{error}</p>}
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
-          >
-            {loading && <Loader2 className="w-4 h-4 animate-spin" />}
-            Sign in
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}
-`;
+export interface Task {
+  id: string | number;
+  title: string;
+  completed: boolean;
+  priority: 'low' | 'medium' | 'high';
+  createdAt?: string;
 }
-function generateDashboardPage() {
-  return `import { useQuery } from '@tanstack/react-query';
-import { apiFetch } from '../lib/api';
-import { Users, FileText, CheckSquare, Zap } from 'lucide-react';
 
-interface Health { status: string; uptime: number; version: string; }
-interface Stats {
+export interface Stats {
   users: number;
   posts: number;
   tasks: number;
-  publishedPosts: number;
   completedTasks: number;
 }
 
-function StatCard({ label, value, sub, icon: Icon, color }: {
-  label: string; value: string | number; sub?: string;
-  icon: React.ElementType; color: string;
-}) {
-  return (
-    <div className="bg-slate-800 rounded-xl border border-slate-700 p-5">
-      <div className="flex items-start justify-between">
-        <div>
-          <p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">{label}</p>
-          <p className="text-3xl font-bold text-slate-100">{value}</p>
-          {sub && <p className="text-xs text-slate-500 mt-1">{sub}</p>}
-        </div>
-        <div className={\`w-10 h-10 rounded-lg flex items-center justify-center \${color}\`}>
-          <Icon className="w-5 h-5 text-white" />
-        </div>
-      </div>
-    </div>
-  );
+async function fetchList<T>(url: string): Promise<T[]> {
+  const res = await apiFetch<T[] | { data: T[]; items: T[] }>(url);
+  if (Array.isArray(res.data)) return res.data;
+  return (res.data as { data?: T[]; items?: T[] }).data
+    ?? (res.data as { data?: T[]; items?: T[] }).items
+    ?? [];
 }
 
-export default function Dashboard() {
-  const { data: health } = useQuery({
-    queryKey: ['health'],
-    queryFn: () => apiFetch<Health>('/api/health').then(r => r.data),
-  });
+export const healthQuery = queryOptions({
+  queryKey: ['health'],
+  queryFn: async () => {
+    const res = await apiFetch<{ status: string; uptime?: number }>('/api/health');
+    return res.data;
+  },
+  staleTime: 30_000,
+});
 
-  const { data: stats, isLoading } = useQuery({
-    queryKey: ['stats'],
-    queryFn: () => apiFetch<Stats>('/api/stats').then(r => r.data),
-  });
+export const statsQuery = queryOptions({
+  queryKey: ['stats'],
+  queryFn: async () => {
+    const res = await apiFetch<Stats>('/api/stats');
+    return res.data;
+  },
+});
 
-  const uptime = health?.uptime;
-  const uptimeStr = uptime !== undefined
-    ? uptime > 3600 ? \`\${Math.floor(uptime / 3600)}h \${Math.floor((uptime % 3600) / 60)}m\`
-    : uptime > 60 ? \`\${Math.floor(uptime / 60)}m \${Math.floor(uptime % 60)}s\`
-    : \`\${Math.floor(uptime)}s\`
-    : '\u2014';
+export const usersQuery = queryOptions({
+  queryKey: ['users'],
+  queryFn: () => fetchList<User>('/api/users'),
+});
 
-  return (
-    <div>
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-slate-100">Dashboard</h1>
-        <p className="text-slate-400 text-sm mt-1">Server overview and statistics</p>
-      </div>
+export const postsQuery = queryOptions({
+  queryKey: ['posts'],
+  queryFn: () => fetchList<Post>('/api/posts'),
+});
 
-      {isLoading ? (
-        <div className="text-slate-400">Loading stats...</div>
-      ) : (
-        <div className="grid grid-cols-2 gap-4 mb-8">
-          <StatCard
-            label="Users"
-            value={stats?.users ?? '\u2014'}
-            icon={Users} color="bg-blue-600"
-          />
-          <StatCard
-            label="Posts"
-            value={stats?.posts ?? '\u2014'}
-            sub={stats ? \`\${stats.publishedPosts} published\` : undefined}
-            icon={FileText} color="bg-purple-600"
-          />
-          <StatCard
-            label="Tasks"
-            value={stats?.tasks ?? '\u2014'}
-            sub={stats ? \`\${stats.completedTasks} completed\` : undefined}
-            icon={CheckSquare} color="bg-emerald-600"
-          />
-          <StatCard
-            label="Uptime"
-            value={uptimeStr}
-            sub={health?.version ? \`v\${health.version}\` : undefined}
-            icon={Zap} color="bg-amber-600"
-          />
-        </div>
-      )}
+export const tasksQuery = queryOptions({
+  queryKey: ['tasks'],
+  queryFn: () => fetchList<Task>('/api/tasks'),
+});
+`;
+}
+function generateSkeletonComponent() {
+  return `import { cn } from '@/lib/utils';
 
-      <div className="bg-slate-800 rounded-xl border border-slate-700 p-4">
-        <h3 className="text-sm font-medium text-slate-300 mb-3">API Status</h3>
-        <div className="flex items-center gap-2">
-          <div className="flex-1 px-3 py-2 bg-slate-900 rounded-lg text-sm text-slate-400 font-mono">
-            GET /api/health
-          </div>
-          <span className={\`px-2 py-0.5 rounded text-xs font-medium \${
-            health?.status === 'ok' ? 'bg-emerald-900 text-emerald-300' : 'bg-slate-700 text-slate-400'
-          }\`}>
-            {health?.status ?? 'pending'}
-          </span>
-        </div>
-      </div>
-    </div>
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md', className)}
+      style={{ background: 'var(--bg-subtle)' }}
+    />
   );
 }
 `;
 }
-function generateUsersPage() {
-  return `import { useState } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { apiFetch } from '../lib/api';
-import { Plus, Trash2, Loader2 } from 'lucide-react';
+function generateEntryClient(projectName, auth) {
+  return `import React from 'react';
+import { hydrateRoot, createRoot } from 'react-dom/client';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { createQueryClient } from './lib/queryClient';
+import App from './App';
+import './index.css';
 
-interface User {
-  id: string | number;
-  name: string;
-  email: string;
-  role?: string;
-  createdAt?: string;
+function revealRoot() {
+  const el = document.getElementById('root');
+  if (el) el.style.visibility = 'visible';
 }
 
-export default function UsersPage() {
-  const queryClient = useQueryClient();
-  const [form, setForm] = useState({ name: '', email: '' });
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
+// Apply saved theme before first paint to avoid flash
+const savedTheme = localStorage.getItem('theme-storage');
+try {
+  const { state } = JSON.parse(savedTheme ?? '{}') as { state?: { theme?: string } };
+  if (state?.theme === 'light') {
+    document.documentElement.classList.add('light');
+  }
+} catch { /* ignore */ }
 
-  const { data: users = [], isLoading } = useQuery({
-    queryKey: ['users'],
-    queryFn: async () => {
-      const res = await apiFetch<User[] | { users: User[] }>('/api/users');
-      return Array.isArray(res.data) ? res.data : res.data.users ?? [];
-    },
-  });
+const queryClient = createQueryClient();
+const rootEl = document.getElementById('root')!;
 
-  const createUser = async () => {
-    if (!form.name || !form.email) { setError('Name and email required'); return; }
-    setLoading(true); setError('');
-    try {
-      const res = await apiFetch('/api/users', { method: 'POST', body: JSON.stringify(form) });
-      if (res.status >= 400) throw new Error('Failed');
-      setForm({ name: '', email: '' });
-      queryClient.invalidateQueries({ queryKey: ['users'] });
-    } catch { setError('Failed to create user'); }
-    finally { setLoading(false); }
-  };
+if (rootEl.childNodes.length > 0) {
+  hydrateRoot(rootEl, <React.StrictMode><QueryClientProvider client={queryClient}><App /></QueryClientProvider></React.StrictMode>);
+} else {
+  createRoot(rootEl).render(<React.StrictMode><QueryClientProvider client={queryClient}><App /></QueryClientProvider></React.StrictMode>);
+}
 
-  const deleteUser = async (id: string | number) => {
-    setLoading(true);
-    await apiFetch(\`/api/users/\${id}\`, { method: 'DELETE' });
-    queryClient.invalidateQueries({ queryKey: ['users'] });
-    setLoading(false);
-  };
+revealRoot();
+`;
+}
+function generateEntryServer(projectName) {
+  return `import React from 'react';
+import { renderToString } from 'react-dom/server';
+import App from './App';
 
-  return (
-    <div>
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-slate-100">Users</h1>
-        <p className="text-slate-400 text-sm mt-1">{users.length} total</p>
-      </div>
+export interface PageMeta {
+  title: string;
+  description: string;
+}
 
-      {/* Create form */}
-      <div className="bg-slate-800 rounded-xl border border-slate-700 p-4 mb-6">
-        <h3 className="text-sm font-medium text-slate-300 mb-3">Add User</h3>
-        <div className="flex gap-3">
-          <input
-            placeholder="Full name"
-            value={form.name}
-            onChange={e => setForm({ ...form, name: e.target.value })}
-            className="flex-1 px-3 py-2 bg-slate-900 border border-slate-600 rounded-lg text-sm focus:border-blue-500 focus:outline-none"
-          />
-          <input
-            placeholder="email@example.com"
-            type="email"
-            value={form.email}
-            onChange={e => setForm({ ...form, email: e.target.value })}
-            className="flex-1 px-3 py-2 bg-slate-900 border border-slate-600 rounded-lg text-sm focus:border-blue-500 focus:outline-none"
-          />
-          <button
-            onClick={createUser}
-            disabled={loading}
-            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg text-sm font-medium transition flex items-center gap-2"
-          >
-            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
-            Add
-          </button>
-        </div>
-        {error && <p className="text-red-400 text-xs mt-2">{error}</p>}
-      </div>
+const PAGE_META: Record<string, PageMeta> = {
+  '/':       { title: '${projectName}',         description: 'Dashboard' },
+  '/users':  { title: '${projectName} \u2014 Users',  description: 'Manage users' },
+  '/posts':  { title: '${projectName} \u2014 Posts',  description: 'Manage posts' },
+  '/tasks':  { title: '${projectName} \u2014 Tasks',  description: 'Manage tasks' },
+};
 
-      {/* Users table */}
-      <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
-        {isLoading ? (
-          <div className="p-8 text-center text-slate-400 text-sm">Loading users...</div>
-        ) : users.length === 0 ? (
-          <div className="p-8 text-center text-slate-400 text-sm">No users yet. Add one above.</div>
-        ) : (
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-slate-700">
-                <th className="text-left px-4 py-3 text-xs font-medium text-slate-400 uppercase">Name</th>
-                <th className="text-left px-4 py-3 text-xs font-medium text-slate-400 uppercase">Email</th>
-                <th className="text-left px-4 py-3 text-xs font-medium text-slate-400 uppercase">Role</th>
-                <th className="px-4 py-3"></th>
-              </tr>
-            </thead>
-            <tbody>
-              {users.map((user) => (
-                <tr key={user.id} className="border-b border-slate-700/50 hover:bg-slate-700/30">
-                  <td className="px-4 py-3 text-sm font-medium text-slate-200">{user.name}</td>
-                  <td className="px-4 py-3 text-sm text-slate-400">{user.email}</td>
-                  <td className="px-4 py-3">
-                    {user.role && (
-                      <span className={\`px-2 py-0.5 rounded-full text-xs font-medium \${
-                        user.role === 'admin' ? 'bg-amber-900 text-amber-300' : 'bg-slate-700 text-slate-300'
-                      }\`}>
-                        {user.role}
-                      </span>
-                    )}
-                  </td>
-                  <td className="px-4 py-3 text-right">
-                    <button
-                      onClick={() => deleteUser(user.id)}
-                      className="p-1.5 text-slate-500 hover:text-red-400 transition rounded"
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )}
-      </div>
-    </div>
+export async function render(url: string): Promise<{ html: string; helmet: PageMeta }> {
+  const html = renderToString(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
   );
+  const meta = PAGE_META[url] ?? PAGE_META['/'];
+  return { html, helmet: meta };
 }
 `;
 }
-function generatePostsPage() {
-  return `import { useState } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { apiFetch } from '../lib/api';
-import { Plus, Trash2, Loader2, Globe, Lock } from 'lucide-react';
+function generateAppTest() {
+  return `import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import App from '../App';
 
-interface Post {
-  id: string | number;
-  title: string;
-  content?: string;
-  published?: boolean;
-  authorId?: string | number;
-  tags?: string[];
-  createdAt?: string;
+function wrapper({ children }: { children: React.ReactNode }) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
 }
 
-export default function PostsPage() {
-  const queryClient = useQueryClient();
-  const [form, setForm] = useState({ title: '', content: '', published: false });
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
+describe('App', () => {
+  it('renders without crashing', () => {
+    render(<App />, { wrapper });
+    expect(document.body).toBeDefined();
+  });
+});
+`;
+}
+
+// src/utils/scaffold/fullstack-web.ts
+async function scaffoldFullstackWeb(projectDir, projectName, frontend, auth = false) {
+  const webDir = import_node_path3.default.join(projectDir, "apps", "web");
+  await import_fs_extra3.default.ensureDir(import_node_path3.default.join(webDir, "src", "lib"));
+  await import_fs_extra3.default.ensureDir(import_node_path3.default.join(webDir, "src", "pages"));
+  await import_fs_extra3.default.ensureDir(import_node_path3.default.join(webDir, "src", "store"));
+  await import_fs_extra3.default.ensureDir(import_node_path3.default.join(webDir, "src", "components"));
+  await import_fs_extra3.default.ensureDir(import_node_path3.default.join(webDir, "src", "hooks"));
+  await import_fs_extra3.default.ensureDir(import_node_path3.default.join(webDir, "src", "__tests__"));
+  const packageJson = {
+    name: `@${projectName}/web`,
+    version: "1.0.0",
+    type: "module",
+    scripts: {
+      dev: "vite",
+      build: "vite build && vite build --ssr src/entry-server.tsx --outDir dist/server",
+      preview: "cross-env NODE_ENV=production tsx server.ts",
+      test: "vitest run",
+      "test:watch": "vitest",
+      "type-check": "tsc --noEmit"
+    },
+    dependencies: {
+      react: "^18.2.0",
+      "react-dom": "^18.2.0",
+      "@tanstack/react-query": "^5.0.0",
+      "lucide-react": "^0.460.0",
+      sonner: "^2.0.7",
+      zustand: "^5.0.11",
+      clsx: "^2.1.1",
+      "tailwind-merge": "^3.5.0",
+      zod: "^4.0.0",
+      ...auth && { "react-hook-form": "^7.71.2", "@hookform/resolvers": "^5.2.2" }
+    },
+    devDependencies: {
+      "@types/react": "^18.2.0",
+      "@types/react-dom": "^18.2.0",
+      "@vitejs/plugin-react": "^4.7.0",
+      "@tailwindcss/vite": "^4.0.0",
+      tailwindcss: "^4.0.0",
+      "tw-animate-css": "^1.4.0",
+      typescript: "^5.6.0",
+      vite: "^5.0.0",
+      tsx: "^4.21.0",
+      "cross-env": "^7.0.3",
+      vitest: "^4.0.18",
+      jsdom: "^28.1.0",
+      "@testing-library/react": "^16.3.2",
+      "@testing-library/jest-dom": "^6.9.1",
+      "@testing-library/user-event": "^14.6.1"
+    }
+  };
+  await import_fs_extra3.default.writeJSON(import_node_path3.default.join(webDir, "package.json"), packageJson, { spaces: 2 });
+  await import_fs_extra3.default.writeJSON(import_node_path3.default.join(webDir, "tsconfig.json"), {
+    compilerOptions: {
+      target: "ES2020",
+      lib: ["ES2020", "DOM", "DOM.Iterable"],
+      module: "ESNext",
+      skipLibCheck: true,
+      moduleResolution: "bundler",
+      allowImportingTsExtensions: true,
+      resolveJsonModule: true,
+      isolatedModules: true,
+      noEmit: true,
+      jsx: "react-jsx",
+      strict: true,
+      noUnusedLocals: true,
+      noUnusedParameters: true,
+      paths: { "@/*": ["./src/*"] }
+    },
+    include: ["src"]
+  }, { spaces: 2 });
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "vite.config.ts"), `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    host: true,
+    proxy: {
+      '/api': { target: 'http://localhost:3000', changeOrigin: true },
+    },
+  },
+  build: {
+    outDir: 'dist/client',
+    rollupOptions: {
+      input: 'index.html',
+    },
+  },
+});
+`);
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "index.html"), `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${projectName}</title>
+</head>
+<body>
+  <div id="root" style="visibility:hidden"></div>
+  <script type="module" src="/src/entry-client.tsx"></script>
+</body>
+</html>
+`);
+  await import_fs_extra3.default.writeJSON(import_node_path3.default.join(webDir, "components.json"), {
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: "new-york",
+    rsc: false,
+    tsx: true,
+    tailwind: {
+      config: "",
+      css: "src/index.css",
+      baseColor: "neutral",
+      cssVariables: true,
+      prefix: ""
+    },
+    iconLibrary: "lucide",
+    rtl: false,
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks"
+    },
+    registries: {}
+  }, { spaces: 2 });
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "vitest.config.ts"), `import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});
+`);
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "vitest.setup.ts"), `import '@testing-library/jest-dom/vitest';
+`);
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "server.ts"), generateSsrServer());
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "index.css"), generateIndexCss(projectName));
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "lib", "api.ts"), generateApiLib(auth));
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "lib", "utils.ts"), `import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`);
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "lib", "queryClient.ts"), `import { QueryClient } from '@tanstack/react-query';
+import { ApiError } from './api.js';
+
+/** Never retry on auth errors \u2014 user must re-authenticate. */
+function shouldRetry(failureCount: number, error: unknown): boolean {
+  if (error instanceof ApiError && (error.status === 401 || error.status === 403)) return false;
+  return failureCount < 1;
+}
 
-  const { data: posts = [], isLoading } = useQuery({
-    queryKey: ['posts'],
-    queryFn: async () => {
-      const res = await apiFetch<Post[] | { posts: Post[] }>('/api/posts');
-      return Array.isArray(res.data) ? res.data : res.data.posts ?? [];
+export function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: { refetchOnWindowFocus: false, retry: shouldRetry },
     },
   });
+}
+`);
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "lib", "queries.ts"), generateQueriesLib());
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "store", "ui.ts"), `import { create } from 'zustand';
+import { toast } from 'sonner';
+
+interface UIState {
+  globalLoading: boolean;
+  setGlobalLoading: (v: boolean) => void;
+  notify: (type: 'success' | 'error' | 'info', message: string) => void;
+  sidebarOpen: boolean;
+  toggleSidebar: () => void;
+  setSidebarOpen: (v: boolean) => void;
+}
 
-  const createPost = async () => {
-    if (!form.title) { setError('Title required'); return; }
-    setLoading(true); setError('');
-    try {
-      const res = await apiFetch('/api/posts', { method: 'POST', body: JSON.stringify(form) });
-      if (res.status >= 400) throw new Error('Failed');
-      setForm({ title: '', content: '', published: false });
-      queryClient.invalidateQueries({ queryKey: ['posts'] });
-    } catch { setError('Failed to create post'); }
-    finally { setLoading(false); }
-  };
+export const useUIStore = create<UIState>(() => ({
+  globalLoading: false,
+  setGlobalLoading: (v) => useUIStore.setState({ globalLoading: v }),
+  notify: (type, message) => {
+    if (type === 'success') toast.success(message);
+    else if (type === 'error') toast.error(message);
+    else toast.info(message);
+  },
+  sidebarOpen: false,
+  toggleSidebar: () => useUIStore.setState((s) => ({ sidebarOpen: !s.sidebarOpen })),
+  setSidebarOpen: (v) => useUIStore.setState({ sidebarOpen: v }),
+}));
+`);
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "store", "theme.ts"), `import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
-  const deletePost = async (id: string | number) => {
-    setLoading(true);
-    await apiFetch(\`/api/posts/\${id}\`, { method: 'DELETE' });
-    queryClient.invalidateQueries({ queryKey: ['posts'] });
-    setLoading(false);
-  };
+export type Theme = 'light' | 'dark';
 
-  return (
-    <div>
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-slate-100">Posts</h1>
-        <p className="text-slate-400 text-sm mt-1">{posts.length} total</p>
-      </div>
+interface ThemeState {
+  theme: Theme;
+  setTheme: (t: Theme) => void;
+  toggleTheme: () => void;
+}
 
-      {/* Create form */}
-      <div className="bg-slate-800 rounded-xl border border-slate-700 p-4 mb-6">
-        <h3 className="text-sm font-medium text-slate-300 mb-3">New Post</h3>
-        <div className="space-y-3">
-          <input
-            placeholder="Post title"
-            value={form.title}
-            onChange={e => setForm({ ...form, title: e.target.value })}
-            className="w-full px-3 py-2 bg-slate-900 border border-slate-600 rounded-lg text-sm focus:border-blue-500 focus:outline-none"
-          />
-          <textarea
-            placeholder="Content (optional)"
-            value={form.content}
-            onChange={e => setForm({ ...form, content: e.target.value })}
-            rows={2}
-            className="w-full px-3 py-2 bg-slate-900 border border-slate-600 rounded-lg text-sm focus:border-blue-500 focus:outline-none resize-none"
-          />
-          <div className="flex items-center justify-between">
-            <label className="flex items-center gap-2 text-sm text-slate-400 cursor-pointer">
-              <input
-                type="checkbox"
-                checked={form.published}
-                onChange={e => setForm({ ...form, published: e.target.checked })}
-                className="rounded"
-              />
-              Publish immediately
-            </label>
-            <button
-              onClick={createPost}
-              disabled={loading}
-              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg text-sm font-medium transition flex items-center gap-2"
-            >
-              {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
-              Create
-            </button>
-          </div>
-        </div>
-        {error && <p className="text-red-400 text-xs mt-2">{error}</p>}
-      </div>
+/** Persisted theme store \u2014 applies .dark class to <html> for Tailwind v4. */
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set, get) => ({
+      theme: 'dark',
+      setTheme: (theme) => { applyThemeClass(theme); set({ theme }); },
+      toggleTheme: () => {
+        const next = get().theme === 'dark' ? 'light' : 'dark';
+        applyThemeClass(next);
+        set({ theme: next });
+      },
+    }),
+    {
+      name: '${projectName}_theme',
+      onRehydrateStorage: () => (state) => { if (state) applyThemeClass(state.theme); },
+    },
+  ),
+);
 
-      {/* Posts list */}
-      <div className="space-y-3">
-        {isLoading ? (
-          <div className="text-center text-slate-400 text-sm py-8">Loading posts...</div>
-        ) : posts.length === 0 ? (
-          <div className="text-center text-slate-400 text-sm py-8">No posts yet. Create one above.</div>
-        ) : (
-          posts.map((post) => (
-            <div key={post.id} className="bg-slate-800 rounded-xl border border-slate-700 p-4 flex items-start justify-between">
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2 mb-1">
-                  {post.published
-                    ? <Globe className="w-3.5 h-3.5 text-emerald-400 flex-shrink-0" />
-                    : <Lock className="w-3.5 h-3.5 text-slate-500 flex-shrink-0" />
-                  }
-                  <h3 className="font-medium text-slate-200 truncate">{post.title}</h3>
-                </div>
-                {post.content && (
-                  <p className="text-sm text-slate-400 line-clamp-2">{post.content}</p>
-                )}
-                {post.tags && post.tags.length > 0 && (
-                  <div className="flex gap-1.5 mt-2">
-                    {post.tags.map(tag => (
-                      <span key={tag} className="px-2 py-0.5 bg-slate-700 rounded text-xs text-slate-300">{tag}</span>
-                    ))}
-                  </div>
-                )}
-              </div>
-              <button
-                onClick={() => deletePost(post.id)}
-                className="ml-3 p-1.5 text-slate-500 hover:text-red-400 transition rounded flex-shrink-0"
-              >
-                <Trash2 className="w-4 h-4" />
-              </button>
-            </div>
-          ))
-        )}
-      </div>
+function applyThemeClass(theme: Theme) {
+  if (typeof document === 'undefined') return;
+  document.documentElement.classList.toggle('dark', theme === 'dark');
+  document.documentElement.classList.toggle('light', theme === 'light');
+}
+`);
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "components", "Skeleton.tsx"), generateSkeletonComponent());
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "components", "PreloadSpinner.tsx"), `import { useUIStore } from '@/store/ui';
+
+/** Full-viewport spinner overlay shown while globalLoading is true. */
+export default function PreloadSpinner() {
+  const loading = useUIStore((s) => s.globalLoading);
+  if (!loading) return null;
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 9999,
+      display: 'flex', flexDirection: 'column', alignItems: 'center',
+      justifyContent: 'center', gap: '12px',
+      background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
+    }}>
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none"
+        style={{ animation: 'spin 0.8s linear infinite' }}>
+        <circle cx="20" cy="20" r="16" stroke="rgba(255,255,255,0.2)" strokeWidth="4" />
+        <path d="M20 4 A16 16 0 0 1 36 20" stroke="var(--accent)" strokeWidth="4" strokeLinecap="round" />
+        <style>{\`@keyframes spin { to { transform: rotate(360deg); } }\`}</style>
+      </svg>
+      <span style={{ fontSize: '13px', color: 'rgba(255,255,255,0.6)', letterSpacing: '0.02em' }}>
+        Loading\u2026
+      </span>
     </div>
   );
 }
+`);
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "entry-client.tsx"), generateEntryClient(projectName, auth));
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "entry-server.tsx"), generateEntryServer(projectName));
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "main.tsx"), `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClientProvider } from '@tanstack/react-query';
+import App from './App';
+import { createQueryClient } from './lib/queryClient';
+import './index.css';
+
+const queryClient = createQueryClient();
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </React.StrictMode>,
+);
+`);
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "__tests__", "App.test.tsx"), generateAppTest());
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "pages", "Dashboard.tsx"), generateDashboardPage());
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "pages", "Users.tsx"), generateUsersPage());
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "pages", "Posts.tsx"), generatePostsPage());
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "pages", "Tasks.tsx"), generateTasksPage());
+  if (auth) {
+    await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "pages", "Login.tsx"), generateLoginPage());
+  }
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(webDir, "src", "App.tsx"), generateAppTsx(projectName, auth));
+}
+async function scaffoldFullstackReadme(projectDir, projectName) {
+  const readme = `# ${projectName}
+
+Full-stack application built with **[Kozo](https://github.com/kozojs/kozo)** \u2014 React + Vite frontend with SSR support and a Kozo/Hono API backend.
+
+## Stack
+
+| Layer | Tech |
+|-------|------|
+| Frontend | React 18, Vite 5, TailwindCSS v4, TanStack Query v5 |
+| State | Zustand (UI store + persisted theme) |
+| Toasts | Sonner |
+| Icons | Lucide React |
+| Backend | Kozo (Hono-based), TypeScript, Zod |
+| Build | tsup, pnpm workspaces |
+
+## Project Structure
+
+\`\`\`
+apps/
+\u251C\u2500\u2500 api/                       # Backend
+\u2502   \u2514\u2500\u2500 src/
+\u2502       \u251C\u2500\u2500 routes/            # File-system routes
+\u2502       \u2502   \u251C\u2500\u2500 api/health.ts
+\u2502       \u2502   \u251C\u2500\u2500 api/users/
+\u2502       \u2502   \u251C\u2500\u2500 api/posts/
+\u2502       \u2502   \u2514\u2500\u2500 api/tasks/
+\u2502       \u2514\u2500\u2500 index.ts
+\u2514\u2500\u2500 web/                       # Frontend
+    \u251C\u2500\u2500 server.ts              # SSR dev/prod server
+    \u2514\u2500\u2500 src/
+        \u251C\u2500\u2500 App.tsx            # Router + layout
+        \u251C\u2500\u2500 entry-client.tsx   # SSR-aware hydration
+        \u251C\u2500\u2500 entry-server.tsx   # renderToString
+        \u251C\u2500\u2500 index.css          # Design system (CSS vars)
+        \u251C\u2500\u2500 lib/
+        \u2502   \u251C\u2500\u2500 api.ts         # apiFetch + ApiError
+        \u2502   \u251C\u2500\u2500 queries.ts     # TanStack Query registry
+        \u2502   \u251C\u2500\u2500 queryClient.ts
+        \u2502   \u2514\u2500\u2500 utils.ts       # cn() utility
+        \u251C\u2500\u2500 store/
+        \u2502   \u251C\u2500\u2500 ui.ts          # Sidebar + notify + loading
+        \u2502   \u2514\u2500\u2500 theme.ts       # Persisted dark/light
+        \u251C\u2500\u2500 components/
+        \u2502   \u251C\u2500\u2500 Skeleton.tsx
+        \u2502   \u2514\u2500\u2500 PreloadSpinner.tsx
+        \u2514\u2500\u2500 pages/
+            \u251C\u2500\u2500 DashboardPage.tsx
+            \u251C\u2500\u2500 UsersPage.tsx
+            \u251C\u2500\u2500 PostsPage.tsx
+            \u2514\u2500\u2500 TasksPage.tsx
+\`\`\`
+
+## Getting Started
+
+\`\`\`bash
+pnpm install
+pnpm dev            # starts both API (3000) and web (5173)
+\`\`\`
+
+## Environment Variables
+
+\`\`\`
+# apps/api/.env
+PORT=3000
+DATABASE_URL=postgresql://...   # if using DB
+
+# apps/web/.env
+VITE_API_URL=http://localhost:3000
+\`\`\`
+
+## API Endpoints
+
+### Health
+- \`GET /api/health\` \u2014 health check
+- \`GET /api/stats\`  \u2014 aggregate statistics
+
+### Users
+- \`GET /api/users\`        \u2014 list
+- \`POST /api/users\`       \u2014 create \`{ name, email }\`
+- \`DELETE /api/users/:id\` \u2014 delete
+
+### Posts
+- \`GET /api/posts\`        \u2014 list (query: \`?published=true\`)
+- \`POST /api/posts\`       \u2014 create \`{ title, content?, published? }\`
+- \`DELETE /api/posts/:id\` \u2014 delete
+
+### Tasks
+- \`GET /api/tasks\`           \u2014 list (query: \`?completed=true\`)
+- \`POST /api/tasks\`          \u2014 create \`{ title, priority? }\`
+- \`PATCH /api/tasks/:id/toggle\` \u2014 toggle completion
+- \`DELETE /api/tasks/:id\`    \u2014 delete
+
+## Design System
+
+The app uses CSS custom properties for theming (dark by default, light class-based):
+
+| Variable | Purpose |
+|----------|---------|
+| \`--bg\`, \`--bg-subtle\` | backgrounds |
+| \`--card\`, \`--card-border\` | card surfaces |
+| \`--fg\`, \`--fg-muted\` | text |
+| \`--accent\` (#ABF43F / #4d7c00) | primary CTA |
+| \`--destructive\` | delete/error |
+
+## Build
+
+\`\`\`bash
+pnpm build          # build all packages
+pnpm preview        # preview SSR production build
+pnpm test           # run vitest
+\`\`\`
 `;
+  await import_fs_extra3.default.writeFile(import_node_path3.default.join(projectDir, "README.md"), readme);
 }
-function generateTasksPage() {
-  return `import { useState } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { apiFetch } from '../lib/api';
-import { Plus, Trash2, Loader2, CheckCircle2, Circle } from 'lucide-react';
 
-interface Task {
-  id: string | number;
-  title: string;
-  completed: boolean;
-  priority: 'low' | 'medium' | 'high';
-  createdAt?: string;
-}
+// src/utils/scaffold/fullstack-api.ts
+async function scaffoldFullstackProject(projectDir, projectName, kozoCoreDep, runtime, database, dbPort, auth, frontend, extras, template) {
+  const hasDb = database !== "none";
+  await import_fs_extra4.default.ensureDir(import_node_path4.default.join(projectDir, "apps", "api", "src", "routes"));
+  await import_fs_extra4.default.ensureDir(import_node_path4.default.join(projectDir, "apps", "api", "src", "data"));
+  if (hasDb) await import_fs_extra4.default.ensureDir(import_node_path4.default.join(projectDir, "apps", "api", "src", "db"));
+  await import_fs_extra4.default.ensureDir(import_node_path4.default.join(projectDir, "apps", "web", "src", "lib"));
+  await import_fs_extra4.default.ensureDir(import_node_path4.default.join(projectDir, ".vscode"));
+  const rootPackageJson = {
+    name: projectName,
+    private: true,
+    scripts: {
+      dev: "pnpm run --parallel dev",
+      build: "pnpm run --recursive build"
+    }
+  };
+  await import_fs_extra4.default.writeJSON(import_node_path4.default.join(projectDir, "package.json"), rootPackageJson, { spaces: 2 });
+  await import_fs_extra4.default.writeFile(import_node_path4.default.join(projectDir, "pnpm-workspace.yaml"), `packages:
+  - 'apps/*'
+`);
+  await import_fs_extra4.default.writeFile(import_node_path4.default.join(projectDir, ".gitignore"), "node_modules/\ndist/\n.env\n*.log\n");
+  await scaffoldFullstackApi(projectDir, projectName, kozoCoreDep, runtime, database, dbPort, auth);
+  await scaffoldFullstackWeb(projectDir, projectName, frontend, auth);
+  await scaffoldFullstackReadme(projectDir, projectName);
+  if (database !== "none" && database !== "sqlite") await createDockerCompose(projectDir, projectName, database, dbPort);
+  if (extras.includes("docker")) await createDockerfile(import_node_path4.default.join(projectDir, "apps", "api"), runtime);
+  if (extras.includes("github-actions")) await createGitHubActions(projectDir);
+}
+async function scaffoldFullstackApi(projectDir, projectName, kozoCoreDep, runtime, database = "none", dbPort, auth = true) {
+  const apiDir = import_node_path4.default.join(projectDir, "apps", "api");
+  const hasDb = database !== "none";
+  if (hasDb) {
+    await import_fs_extra4.default.ensureDir(import_node_path4.default.join(apiDir, "src", "db"));
+    await import_fs_extra4.default.writeFile(import_node_path4.default.join(apiDir, "src", "db", "schema.ts"), getDatabaseSchema(database));
+    await import_fs_extra4.default.writeFile(import_node_path4.default.join(apiDir, "src", "db", "index.ts"), getDatabaseIndex(database));
+    if (database === "sqlite") {
+      await import_fs_extra4.default.writeFile(import_node_path4.default.join(apiDir, "src", "db", "seed.ts"), getSQLiteSeed());
+    }
+    const dialect = database === "postgresql" ? "postgresql" : database === "mysql" ? "mysql" : "sqlite";
+    const pgPort = dbPort ?? 5436;
+    const dbUrl = database === "postgresql" ? `postgresql://postgres:postgres@localhost:${pgPort}/${projectName}` : database === "mysql" ? `mysql://root:root@localhost:3306/${projectName}` : void 0;
+    await import_fs_extra4.default.writeFile(import_node_path4.default.join(apiDir, "drizzle.config.ts"), `import { defineConfig } from 'drizzle-kit';
+import 'dotenv/config';
+
+export default defineConfig({
+  schema: './src/db/schema.ts',
+  out: './drizzle',
+  dialect: '${dialect}',
+  dbCredentials: {
+    ${database === "sqlite" ? "url: './data.db'" : "url: process.env.DATABASE_URL!"}
+  },
+});
+`);
+    const envContent = `PORT=3000
+NODE_ENV=development
+${dbUrl ? `DATABASE_URL=${dbUrl}
+` : ""}${auth ? "JWT_SECRET=change-me-to-a-random-secret-at-least-32-chars\n" : ""}`;
+    await import_fs_extra4.default.writeFile(import_node_path4.default.join(apiDir, ".env"), envContent);
+    await import_fs_extra4.default.writeFile(import_node_path4.default.join(apiDir, ".env.example"), envContent);
+  } else {
+    const envContent = `PORT=3000
+NODE_ENV=development
+${auth ? "JWT_SECRET=change-me-to-a-random-secret-at-least-32-chars\n" : ""}`;
+    await import_fs_extra4.default.writeFile(import_node_path4.default.join(apiDir, ".env"), envContent);
+    await import_fs_extra4.default.writeFile(import_node_path4.default.join(apiDir, ".env.example"), envContent);
+  }
+  const apiPackageJson = {
+    name: `@${projectName}/api`,
+    version: "1.0.0",
+    type: "module",
+    scripts: {
+      dev: runtime === "bun" ? "bun --watch src/index.ts" : "tsx watch src/index.ts",
+      build: "tsc",
+      ...hasDb && {
+        "db:generate": "drizzle-kit generate",
+        "db:push": "drizzle-kit push",
+        "db:studio": "drizzle-kit studio"
+      }
+    },
+    dependencies: {
+      "@kozojs/core": kozoCoreDep,
+      ...auth && { "@kozojs/auth": kozoCoreDep === "workspace:*" ? "workspace:*" : "^0.1.0" },
+      hono: "^4.12.5",
+      zod: "^4.0.0",
+      dotenv: "^16.4.0",
+      ...runtime === "node" && { "@hono/node-server": "^1.19.10" },
+      ...runtime === "node" && { "uWebSockets.js": "github:uNetworking/uWebSockets.js#6609a88ffa9a16ac5158046761356ce03250a0df" },
+      ...hasDb && { "drizzle-orm": "^0.36.0" },
+      ...database === "postgresql" && { postgres: "^3.4.8" },
+      ...database === "mysql" && { mysql2: "^3.11.0" },
+      ...database === "sqlite" && { "better-sqlite3": "^11.0.0" }
+    },
+    devDependencies: {
+      "@types/node": "^22.0.0",
+      ...runtime !== "bun" && { tsx: "^4.21.0" },
+      typescript: "^5.6.0",
+      ...hasDb && { "drizzle-kit": "^0.28.0" },
+      ...database === "sqlite" && { "@types/better-sqlite3": "^7.6.0" }
+    }
+  };
+  await import_fs_extra4.default.writeJSON(import_node_path4.default.join(apiDir, "package.json"), apiPackageJson, { spaces: 2 });
+  const tsconfig = {
+    compilerOptions: {
+      target: "ES2022",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      outDir: "dist",
+      rootDir: "src"
+    },
+    include: ["src/**/*"],
+    exclude: ["node_modules", "dist"]
+  };
+  await import_fs_extra4.default.writeJSON(import_node_path4.default.join(apiDir, "tsconfig.json"), tsconfig, { spaces: 2 });
+  const authImport = auth ? `import { authenticateJWT } from '@kozojs/auth';
+` : "";
+  const authMiddleware = auth ? `
+// JWT protects all /api/* routes except public ones
+const JWT_SECRET = process.env.JWT_SECRET || 'change-me';
+const _jwt = authenticateJWT(JWT_SECRET, { prefix: '' });
+const publicPaths = ['/api/auth/', '/api/health', '/api/stats'];
+app.getApp().use('/api/*', (c, next) => {
+  if (publicPaths.some(p => c.req.path.startsWith(p))) return next();
+  return _jwt(c, next);
+});
+` : "";
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "index.ts"), `import 'dotenv/config';
+import { createKozo } from '@kozojs/core';
+${authImport}import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PORT = Number(process.env.PORT) || 3000;
+const app = createKozo({
+  port: PORT,
+  openapi: {
+    info: {
+      title: '${projectName} API',
+      version: '1.0.0',
+      description: 'API documentation for ${projectName}',
+    },
+    servers: [{ url: \`http://localhost:\${PORT}\`, description: 'Development server' }],
+  },
+});
+${authMiddleware}await app.loadRoutes(join(__dirname, 'routes'));
+
+export type AppType = typeof app;
+
+console.log(\`\u{1F525} ${projectName} API on http://localhost:\${PORT}\`);
+${runtime === "node" ? "await app.nativeListen();" : "await app.listen();"}
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "schemas", "index.ts"), `import { z } from 'zod';
+
+export const UserSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  email: z.string().email(),
+  role: z.enum(['admin', 'user']),
+  createdAt: z.string().optional(),
+});
+
+export const CreateUserBody = z.object({
+  name: z.string().min(1),
+  email: z.string().email(),
+  role: z.enum(['admin', 'user']).optional(),
+});
+
+export const UpdateUserBody = z.object({
+  name: z.string().optional(),
+  email: z.string().email().optional(),
+  role: z.enum(['admin', 'user']).optional(),
+});
+
+export const PostSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  content: z.string(),
+  authorId: z.string(),
+  published: z.boolean(),
+  createdAt: z.string().optional(),
+});
+
+export const CreatePostBody = z.object({
+  title: z.string().min(1),
+  content: z.string().optional(),
+  authorId: z.string().optional(),
+  published: z.boolean().optional(),
+});
+
+export const UpdatePostBody = z.object({
+  title: z.string().optional(),
+  content: z.string().optional(),
+  published: z.boolean().optional(),
+});
+
+export const TaskSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  completed: z.boolean(),
+  priority: z.enum(['low', 'medium', 'high']),
+  createdAt: z.string(),
+});
+
+export const CreateTaskBody = z.object({
+  title: z.string().min(1),
+  priority: z.enum(['low', 'medium', 'high']).optional(),
+});
+
+export const UpdateTaskBody = z.object({
+  title: z.string().optional(),
+  completed: z.boolean().optional(),
+  priority: z.enum(['low', 'medium', 'high']).optional(),
+});
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "data", "index.ts"), `export const users = [
+  { id: '1', name: 'Alice', email: 'alice@example.com', role: 'admin' as const, createdAt: new Date().toISOString() },
+  { id: '2', name: 'Bob', email: 'bob@example.com', role: 'user' as const, createdAt: new Date().toISOString() },
+];
+
+export const posts = [
+  { id: '1', title: 'Hello World', content: 'First post!', authorId: '1', published: true, createdAt: new Date().toISOString() },
+  { id: '2', title: 'Draft', content: 'Work in progress', authorId: '2', published: false, createdAt: new Date().toISOString() },
+];
+
+export const tasks = [
+  { id: '1', title: 'Setup project', completed: true, priority: 'high' as const, createdAt: new Date().toISOString() },
+  { id: '2', title: 'Write tests', completed: false, priority: 'medium' as const, createdAt: new Date().toISOString() },
+  { id: '3', title: 'Deploy', completed: false, priority: 'low' as const, createdAt: new Date().toISOString() },
+];
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "health", "get.ts"), `import { z } from 'zod';
+
+export const schema = {
+  response: z.object({
+    status: z.string(),
+    timestamp: z.string(),
+    version: z.string(),
+    uptime: z.number(),
+  }),
+};
+
+export default async () => ({
+  status: 'ok',
+  timestamp: new Date().toISOString(),
+  version: '1.0.0',
+  uptime: process.uptime(),
+});
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "stats", "get.ts"), `import { z } from 'zod';
+import { users, posts, tasks } from '../../../data/index.js';
+
+export const schema = {
+  response: z.object({
+    users: z.number(),
+    posts: z.number(),
+    tasks: z.number(),
+    publishedPosts: z.number(),
+    completedTasks: z.number(),
+  }),
+};
+
+export default async () => ({
+  users: users.length,
+  posts: posts.length,
+  tasks: tasks.length,
+  publishedPosts: posts.filter(p => p.published).length,
+  completedTasks: tasks.filter(t => t.completed).length,
+});
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "echo", "get.ts"), `import { z } from 'zod';
+
+export const schema = {
+  query: z.object({ message: z.string() }),
+  response: z.object({
+    echo: z.string(),
+    timestamp: z.string(),
+  }),
+};
+
+export default async ({ query }: { query: { message: string } }) => ({
+  echo: query.message,
+  timestamp: new Date().toISOString(),
+});
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "validate", "post.ts"), `import { z } from 'zod';
+
+export const schema = {
+  body: z.object({
+    email: z.string().email(),
+    age: z.number().min(0).max(150),
+  }),
+  response: z.object({
+    valid: z.boolean(),
+    data: z.object({ email: z.string(), age: z.number() }),
+  }),
+};
+
+export default async ({ body }: { body: { email: string; age: number } }) => ({
+  valid: true,
+  data: body,
+});
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "users", "get.ts"), `import { z } from 'zod';
+import { users } from '../../../data/index.js';
+import { UserSchema } from '../../../schemas/index.js';
+
+export const schema = {
+  response: z.array(UserSchema),
+};
+
+export default async () => users;
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "users", "post.ts"), `import { users } from '../../../data/index.js';
+import { UserSchema, CreateUserBody } from '../../../schemas/index.js';
+
+export const schema = {
+  body: CreateUserBody,
+  response: UserSchema,
+};
+
+export default async ({ body }: { body: { name: string; email: string; role?: 'admin' | 'user' } }) => {
+  const newUser = {
+    id: String(Date.now()),
+    name: body.name,
+    email: body.email,
+    role: body.role ?? ('user' as const),
+    createdAt: new Date().toISOString(),
+  };
+  users.push(newUser);
+  return newUser;
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "users", "[id]", "get.ts"), `import { z } from 'zod';
+import { KozoError } from '@kozojs/core';
+import { users } from '../../../../data/index.js';
+import { UserSchema } from '../../../../schemas/index.js';
+
+export const schema = {
+  params: z.object({ id: z.string() }),
+  response: UserSchema,
+};
+
+export default async ({ params }: { params: { id: string } }) => {
+  const user = users.find(u => u.id === params.id);
+  if (!user) throw new KozoError('User not found', 404, 'NOT_FOUND');
+  return user;
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "users", "[id]", "put.ts"), `import { z } from 'zod';
+import { KozoError } from '@kozojs/core';
+import { users } from '../../../../data/index.js';
+import { UserSchema, UpdateUserBody } from '../../../../schemas/index.js';
+
+export const schema = {
+  params: z.object({ id: z.string() }),
+  body: UpdateUserBody,
+  response: UserSchema,
+};
+
+export default async ({
+  params,
+  body,
+}: {
+  params: { id: string };
+  body: { name?: string; email?: string; role?: 'admin' | 'user' };
+}) => {
+  const idx = users.findIndex(u => u.id === params.id);
+  if (idx === -1) throw new KozoError('User not found', 404, 'NOT_FOUND');
+  users[idx] = { ...users[idx], ...body };
+  return users[idx];
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "users", "[id]", "delete.ts"), `import { z } from 'zod';
+import { KozoError } from '@kozojs/core';
+import { users } from '../../../../data/index.js';
+
+export const schema = {
+  params: z.object({ id: z.string() }),
+  response: z.object({ success: z.boolean(), message: z.string() }),
+};
+
+export default async ({ params }: { params: { id: string } }) => {
+  const idx = users.findIndex(u => u.id === params.id);
+  if (idx === -1) throw new KozoError('User not found', 404, 'NOT_FOUND');
+  users.splice(idx, 1);
+  return { success: true, message: 'User deleted' };
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "posts", "get.ts"), `import { z } from 'zod';
+import { posts } from '../../../data/index.js';
+import { PostSchema } from '../../../schemas/index.js';
+
+export const schema = {
+  query: z.object({ published: z.coerce.boolean().optional() }),
+  response: z.array(PostSchema),
+};
+
+export default async ({ query }: { query: { published?: boolean } }) => {
+  if (query.published !== undefined) {
+    return posts.filter(p => p.published === query.published);
+  }
+  return posts;
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "posts", "post.ts"), `import { posts, users } from '../../../data/index.js';
+import { PostSchema, CreatePostBody } from '../../../schemas/index.js';
+
+export const schema = {
+  body: CreatePostBody,
+  response: PostSchema,
+};
+
+export default async ({
+  body,
+}: {
+  body: { title: string; content?: string; authorId?: string; published?: boolean };
+}) => {
+  const authorId = body.authorId ?? users[0]?.id ?? 'unknown';
+  const newPost = {
+    id: String(Date.now()),
+    title: body.title,
+    content: body.content ?? '',
+    authorId,
+    published: body.published ?? false,
+    createdAt: new Date().toISOString(),
+  };
+  posts.push(newPost);
+  return newPost;
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "posts", "[id]", "get.ts"), `import { z } from 'zod';
+import { KozoError } from '@kozojs/core';
+import { posts } from '../../../../data/index.js';
+import { PostSchema } from '../../../../schemas/index.js';
+
+export const schema = {
+  params: z.object({ id: z.string() }),
+  response: PostSchema,
+};
+
+export default async ({ params }: { params: { id: string } }) => {
+  const post = posts.find(p => p.id === params.id);
+  if (!post) throw new KozoError('Post not found', 404, 'NOT_FOUND');
+  return post;
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "posts", "[id]", "put.ts"), `import { z } from 'zod';
+import { KozoError } from '@kozojs/core';
+import { posts } from '../../../../data/index.js';
+import { PostSchema, UpdatePostBody } from '../../../../schemas/index.js';
+
+export const schema = {
+  params: z.object({ id: z.string() }),
+  body: UpdatePostBody,
+  response: PostSchema,
+};
+
+export default async ({
+  params,
+  body,
+}: {
+  params: { id: string };
+  body: { title?: string; content?: string; published?: boolean };
+}) => {
+  const idx = posts.findIndex(p => p.id === params.id);
+  if (idx === -1) throw new KozoError('Post not found', 404, 'NOT_FOUND');
+  posts[idx] = { ...posts[idx], ...body };
+  return posts[idx];
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "posts", "[id]", "delete.ts"), `import { z } from 'zod';
+import { KozoError } from '@kozojs/core';
+import { posts } from '../../../../data/index.js';
+
+export const schema = {
+  params: z.object({ id: z.string() }),
+  response: z.object({ success: z.boolean(), message: z.string() }),
+};
+
+export default async ({ params }: { params: { id: string } }) => {
+  const idx = posts.findIndex(p => p.id === params.id);
+  if (idx === -1) throw new KozoError('Post not found', 404, 'NOT_FOUND');
+  posts.splice(idx, 1);
+  return { success: true, message: 'Post deleted' };
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "tasks", "get.ts"), `import { z } from 'zod';
+import { tasks } from '../../../data/index.js';
+import { TaskSchema } from '../../../schemas/index.js';
+
+export const schema = {
+  query: z.object({
+    completed: z.coerce.boolean().optional(),
+    priority: z.enum(['low', 'medium', 'high']).optional(),
+  }),
+  response: z.array(TaskSchema),
+};
+
+export default async ({
+  query,
+}: {
+  query: { completed?: boolean; priority?: 'low' | 'medium' | 'high' };
+}) => {
+  let result = [...tasks];
+  if (query.completed !== undefined) {
+    result = result.filter(t => t.completed === query.completed);
+  }
+  if (query.priority) {
+    result = result.filter(t => t.priority === query.priority);
+  }
+  return result;
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "tasks", "post.ts"), `import { tasks } from '../../../data/index.js';
+import { TaskSchema, CreateTaskBody } from '../../../schemas/index.js';
+
+export const schema = {
+  body: CreateTaskBody,
+  response: TaskSchema,
+};
+
+export default async ({
+  body,
+}: {
+  body: { title: string; priority?: 'low' | 'medium' | 'high' };
+}) => {
+  const newTask = {
+    id: String(Date.now()),
+    title: body.title,
+    completed: false,
+    priority: body.priority ?? ('medium' as const),
+    createdAt: new Date().toISOString(),
+  };
+  tasks.push(newTask);
+  return newTask;
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "tasks", "[id]", "get.ts"), `import { z } from 'zod';
+import { KozoError } from '@kozojs/core';
+import { tasks } from '../../../../data/index.js';
+import { TaskSchema } from '../../../../schemas/index.js';
+
+export const schema = {
+  params: z.object({ id: z.string() }),
+  response: TaskSchema,
+};
+
+export default async ({ params }: { params: { id: string } }) => {
+  const task = tasks.find(t => t.id === params.id);
+  if (!task) throw new KozoError('Task not found', 404, 'NOT_FOUND');
+  return task;
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "tasks", "[id]", "put.ts"), `import { z } from 'zod';
+import { KozoError } from '@kozojs/core';
+import { tasks } from '../../../../data/index.js';
+import { TaskSchema, UpdateTaskBody } from '../../../../schemas/index.js';
+
+export const schema = {
+  params: z.object({ id: z.string() }),
+  body: UpdateTaskBody,
+  response: TaskSchema,
+};
+
+export default async ({
+  params,
+  body,
+}: {
+  params: { id: string };
+  body: { title?: string; completed?: boolean; priority?: 'low' | 'medium' | 'high' };
+}) => {
+  const idx = tasks.findIndex(t => t.id === params.id);
+  if (idx === -1) throw new KozoError('Task not found', 404, 'NOT_FOUND');
+  tasks[idx] = { ...tasks[idx], ...body };
+  return tasks[idx];
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "tasks", "[id]", "delete.ts"), `import { z } from 'zod';
+import { KozoError } from '@kozojs/core';
+import { tasks } from '../../../../data/index.js';
+
+export const schema = {
+  params: z.object({ id: z.string() }),
+  response: z.object({ success: z.boolean(), message: z.string() }),
+};
+
+export default async ({ params }: { params: { id: string } }) => {
+  const idx = tasks.findIndex(t => t.id === params.id);
+  if (idx === -1) throw new KozoError('Task not found', 404, 'NOT_FOUND');
+  tasks.splice(idx, 1);
+  return { success: true, message: 'Task deleted' };
+};
+`);
+  await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "tasks", "[id]", "toggle", "patch.ts"), `import { z } from 'zod';
+import { KozoError } from '@kozojs/core';
+import { tasks } from '../../../../../data/index.js';
+import { TaskSchema } from '../../../../../schemas/index.js';
+
+export const schema = {
+  params: z.object({ id: z.string() }),
+  response: TaskSchema,
+};
+
+export default async ({ params }: { params: { id: string } }) => {
+  const idx = tasks.findIndex(t => t.id === params.id);
+  if (idx === -1) throw new KozoError('Task not found', 404, 'NOT_FOUND');
+  tasks[idx].completed = !tasks[idx].completed;
+  return tasks[idx];
+};
+`);
+  if (auth) {
+    await import_fs_extra4.default.outputFile(import_node_path4.default.join(apiDir, "src", "routes", "api", "auth", "login", "post.ts"), `import { z } from 'zod';
+import { createJWT, UnauthorizedError } from '@kozojs/auth';
+
+const JWT_SECRET = process.env.JWT_SECRET || 'change-me';
+
+const DEMO_USERS = [
+  { email: 'admin@demo.com', password: 'admin123', role: 'admin', name: 'Admin' },
+  { email: 'user@demo.com', password: 'user123', role: 'user', name: 'User' },
+];
+
+export const schema = {
+  body: z.object({
+    email: z.string().email(),
+    password: z.string(),
+  }),
+  response: z.object({
+    token: z.string(),
+    user: z.object({
+      email: z.string(),
+      role: z.string(),
+      name: z.string(),
+    }),
+  }),
+};
+
+export default async ({ body }: { body: { email: string; password: string } }) => {
+  const user = DEMO_USERS.find(u => u.email === body.email && u.password === body.password);
+  if (!user) throw new UnauthorizedError('Invalid credentials');
+  const token = await createJWT(
+    { email: user.email, role: user.role, name: user.name },
+    JWT_SECRET,
+    { expiresIn: '24h' },
+  );
+  return { token, user: { email: user.email, role: user.role, name: user.name } };
+};
+`);
+  }
+}
+
+// src/utils/scaffold/index.ts
+async function scaffoldProject(options) {
+  const { projectName, runtime, database, dbPort, auth, packageSource, template, frontend, extras } = options;
+  const projectDir = import_node_path5.default.resolve(process.cwd(), projectName);
+  const kozoCoreDep = packageSource === "local" ? "workspace:*" : "^0.3.7";
+  if (frontend !== "none") {
+    await scaffoldFullstackProject(projectDir, projectName, kozoCoreDep, runtime, database, dbPort, auth, frontend, extras, template);
+    return;
+  }
+  if (template === "complete") {
+    await scaffoldCompleteTemplate(projectDir, projectName, kozoCoreDep, runtime, database, dbPort, auth);
+    if (database !== "none" && database !== "sqlite") await createDockerCompose(projectDir, projectName, database, dbPort);
+    if (extras.includes("docker")) await createDockerfile(projectDir, runtime);
+    if (extras.includes("github-actions")) await createGitHubActions(projectDir);
+    return;
+  }
+  if (template === "api-only") {
+    await scaffoldApiOnlyTemplate(projectDir, projectName, kozoCoreDep, runtime);
+    if (extras.includes("docker")) await createDockerfile(projectDir, runtime);
+    if (extras.includes("github-actions")) await createGitHubActions(projectDir);
+    return;
+  }
+  await import_fs_extra5.default.ensureDir(import_node_path5.default.join(projectDir, "src", "routes"));
+  await import_fs_extra5.default.ensureDir(import_node_path5.default.join(projectDir, "src", "db"));
+  await import_fs_extra5.default.ensureDir(import_node_path5.default.join(projectDir, "src", "services"));
+  const packageJson = {
+    name: projectName,
+    version: "0.1.0",
+    type: "module",
+    scripts: {
+      dev: "tsx watch src/index.ts",
+      build: "tsc",
+      start: "node dist/index.js",
+      "db:generate": "drizzle-kit generate",
+      "db:push": "drizzle-kit push",
+      "db:studio": "drizzle-kit studio"
+    },
+    dependencies: {
+      "@kozojs/core": kozoCoreDep,
+      "uWebSockets.js": "github:uNetworking/uWebSockets.js#6609a88ffa9a16ac5158046761356ce03250a0df",
+      hono: "^4.12.5",
+      zod: "^4.0.0",
+      "drizzle-orm": "^0.36.0",
+      ...database === "postgresql" && { postgres: "^3.4.8" },
+      ...database === "mysql" && { mysql2: "^3.11.0" },
+      ...database === "sqlite" && { "better-sqlite3": "^11.0.0" }
+    },
+    devDependencies: {
+      "@types/node": "^22.0.0",
+      tsx: "^4.21.0",
+      typescript: "^5.6.0",
+      "drizzle-kit": "^0.28.0",
+      ...database === "sqlite" && { "@types/better-sqlite3": "^7.6.0" }
+    }
+  };
+  await import_fs_extra5.default.writeJSON(import_node_path5.default.join(projectDir, "package.json"), packageJson, { spaces: 2 });
+  const tsconfig = {
+    compilerOptions: {
+      target: "ES2022",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      outDir: "dist",
+      rootDir: "src",
+      declaration: true
+    },
+    include: ["src/**/*"],
+    exclude: ["node_modules", "dist"]
+  };
+  await import_fs_extra5.default.writeJSON(import_node_path5.default.join(projectDir, "tsconfig.json"), tsconfig, { spaces: 2 });
+  const drizzleConfig = `import { defineConfig } from 'drizzle-kit';
+
+export default defineConfig({
+  schema: './src/db/schema.ts',
+  out: './drizzle',
+  dialect: '${database === "postgresql" ? "postgresql" : database === "mysql" ? "mysql" : "sqlite"}',
+  dbCredentials: {
+    ${database === "sqlite" ? "url: './data.db'" : "url: process.env.DATABASE_URL!"}
+  }
+});
+`;
+  await import_fs_extra5.default.writeFile(import_node_path5.default.join(projectDir, "drizzle.config.ts"), drizzleConfig);
+  const envExample = `# Database
+${database === "sqlite" ? "# SQLite uses local file, no URL needed" : "DATABASE_URL="}
+
+# Server
+PORT=3000
+`;
+  await import_fs_extra5.default.writeFile(import_node_path5.default.join(projectDir, ".env.example"), envExample);
+  const gitignore = `node_modules/
+dist/
+.env
+*.db
+.turbo/
+`;
+  await import_fs_extra5.default.writeFile(import_node_path5.default.join(projectDir, ".gitignore"), gitignore);
+  const indexTs = `import { createKozo } from '@kozojs/core';
+import { services } from './services/index.js';
+
+const app = createKozo({
+  services,
+  port: Number(process.env.PORT) || 3000,
+  openapi: {
+    info: {
+      title: '${projectName} API',
+      version: '1.0.0',
+      description: 'API documentation for ${projectName}'
+    },
+    servers: [
+      {
+        url: 'http://localhost:3000',
+        description: 'Development server'
+      }
+    ]
+  }
+});
+
+await app.nativeListen();
+`;
+  await import_fs_extra5.default.writeFile(import_node_path5.default.join(projectDir, "src", "index.ts"), indexTs);
+  const servicesTs = `import { db } from '../db/index.js';
 
-const priorityColor: Record<string, string> = {
-  high: 'bg-red-900 text-red-300',
-  medium: 'bg-amber-900 text-amber-300',
-  low: 'bg-slate-700 text-slate-300',
+export const services = {
+  db
 };
 
-export default function TasksPage() {
-  const queryClient = useQueryClient();
-  const [form, setForm] = useState({ title: '', priority: 'medium' as 'low' | 'medium' | 'high' });
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  const { data: tasks = [], isLoading } = useQuery({
-    queryKey: ['tasks'],
-    queryFn: async () => {
-      const res = await apiFetch<Task[] | { tasks: Task[] }>('/api/tasks');
-      return Array.isArray(res.data) ? res.data : res.data.tasks ?? [];
-    },
-  });
+// Type augmentation for autocomplete
+declare module '@kozojs/core' {
+  interface Services {
+    db: typeof db;
+  }
+}
+`;
+  await import_fs_extra5.default.writeFile(import_node_path5.default.join(projectDir, "src", "services", "index.ts"), servicesTs);
+  const schemaTs = getDatabaseSchema(database);
+  await import_fs_extra5.default.writeFile(import_node_path5.default.join(projectDir, "src", "db", "schema.ts"), schemaTs);
+  const dbIndexTs = getDatabaseIndex(database);
+  await import_fs_extra5.default.writeFile(import_node_path5.default.join(projectDir, "src", "db", "index.ts"), dbIndexTs);
+  if (database === "sqlite") {
+    const seedTs = getSQLiteSeed();
+    await import_fs_extra5.default.writeFile(import_node_path5.default.join(projectDir, "src", "db", "seed.ts"), seedTs);
+  }
+  await createExampleRoutes(projectDir);
+  const readme = `# ${projectName}
 
-  const createTask = async () => {
-    if (!form.title) { setError('Title required'); return; }
-    setLoading(true); setError('');
-    try {
-      const res = await apiFetch('/api/tasks', { method: 'POST', body: JSON.stringify(form) });
-      if (res.status >= 400) throw new Error('Failed');
-      setForm({ title: '', priority: 'medium' });
-      queryClient.invalidateQueries({ queryKey: ['tasks'] });
-    } catch { setError('Failed to create task'); }
-    finally { setLoading(false); }
-  };
+Built with \u{1F525} **Kozo Framework**
 
-  const toggleTask = async (id: string | number) => {
-    await apiFetch(\`/api/tasks/\${id}/toggle\`, { method: 'PATCH' });
-    queryClient.invalidateQueries({ queryKey: ['tasks'] });
-  };
+## Getting Started
 
-  const deleteTask = async (id: string | number) => {
-    setLoading(true);
-    await apiFetch(\`/api/tasks/\${id}\`, { method: 'DELETE' });
-    queryClient.invalidateQueries({ queryKey: ['tasks'] });
-    setLoading(false);
-  };
+\`\`\`bash
+# Install dependencies
+pnpm install
 
-  const done = tasks.filter(t => t.completed).length;
+# Start development server
+pnpm dev
+\`\`\`
 
-  return (
-    <div>
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-slate-100">Tasks</h1>
-        <p className="text-slate-400 text-sm mt-1">{done}/{tasks.length} completed</p>
-      </div>
+The server will start at http://localhost:3000
 
-      {/* Create form */}
-      <div className="bg-slate-800 rounded-xl border border-slate-700 p-4 mb-6">
-        <h3 className="text-sm font-medium text-slate-300 mb-3">New Task</h3>
-        <div className="flex gap-3">
-          <input
-            placeholder="Task title"
-            value={form.title}
-            onChange={e => setForm({ ...form, title: e.target.value })}
-            onKeyDown={e => { if (e.key === 'Enter') { void createTask(); } }}
-            className="flex-1 px-3 py-2 bg-slate-900 border border-slate-600 rounded-lg text-sm focus:border-blue-500 focus:outline-none"
-          />
-          <select
-            value={form.priority}
-            onChange={e => setForm({ ...form, priority: e.target.value as 'low' | 'medium' | 'high' })}
-            className="px-3 py-2 bg-slate-900 border border-slate-600 rounded-lg text-sm focus:border-blue-500 focus:outline-none"
-          >
-            <option value="low">Low</option>
-            <option value="medium">Medium</option>
-            <option value="high">High</option>
-          </select>
-          <button
-            onClick={() => { void createTask(); }}
-            disabled={loading}
-            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg text-sm font-medium transition flex items-center gap-2"
-          >
-            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
-            Add
-          </button>
-        </div>
-        {error && <p className="text-red-400 text-xs mt-2">{error}</p>}
-      </div>
+## Try the API
 
-      {/* Tasks list */}
-      <div className="space-y-2">
-        {isLoading ? (
-          <div className="text-center text-slate-400 text-sm py-8">Loading tasks...</div>
-        ) : tasks.length === 0 ? (
-          <div className="text-center text-slate-400 text-sm py-8">No tasks yet. Add one above.</div>
-        ) : (
-          tasks.map((task) => (
-            <div
-              key={task.id}
-              className={\`flex items-center justify-between p-3 rounded-xl border transition \${
-                task.completed ? 'bg-slate-800/50 border-slate-700/50' : 'bg-slate-800 border-slate-700'
-              }\`}
-            >
-              <div className="flex items-center gap-3 flex-1 min-w-0">
-                <button
-                  onClick={() => { void toggleTask(task.id); }}
-                  className="flex-shrink-0 text-slate-400 hover:text-blue-400 transition"
-                >
-                  {task.completed
-                    ? <CheckCircle2 className="w-5 h-5 text-emerald-400" />
-                    : <Circle className="w-5 h-5" />
-                  }
-                </button>
-                <span className={\`text-sm font-medium truncate \${task.completed ? 'line-through text-slate-500' : 'text-slate-200'}\`}>
-                  {task.title}
-                </span>
-                <span className={\`flex-shrink-0 px-2 py-0.5 rounded-full text-xs font-medium \${priorityColor[task.priority] ?? ''}\`}>
-                  {task.priority}
-                </span>
-              </div>
-              <button
-                onClick={() => { void deleteTask(task.id); }}
-                className="ml-3 p-1.5 text-slate-500 hover:text-red-400 transition rounded flex-shrink-0"
-              >
-                <Trash2 className="w-4 h-4" />
-              </button>
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  );
-}
-`;
-}
-async function scaffoldFullstackReadme(projectDir, projectName) {
-  const readme = `# ${projectName}
+\`\`\`bash
+# Get all users
+curl http://localhost:3000/users
 
-Full-stack application built with **Kozo** framework and React.
+# Create a new user
+curl -X POST http://localhost:3000/users \\
+  -H "Content-Type: application/json" \\
+  -d '{"name":"Alice","email":"alice@example.com"}'
 
-## Project Structure
+# Health check
+curl http://localhost:3000
 
-\`\`\`
-apps/
-\u251C\u2500\u2500 api/                    # Backend Kozo
-\u2502   \u2514\u2500\u2500 src/
-\u2502       \u251C\u2500\u2500 data/          # Schemas e dati in-memory
-\u2502       \u2502   \u2514\u2500\u2500 index.ts
-\u2502       \u251C\u2500\u2500 routes/        # Routes organizzate per risorsa
-\u2502       \u2502   \u251C\u2500\u2500 health.ts  # Health check e stats
-\u2502       \u2502   \u251C\u2500\u2500 users.ts   # CRUD Users
-\u2502       \u2502   \u251C\u2500\u2500 posts.ts   # CRUD Posts
-\u2502       \u2502   \u251C\u2500\u2500 tasks.ts   # CRUD Tasks
-\u2502       \u2502   \u251C\u2500\u2500 tools.ts   # Utility endpoints
-\u2502       \u2502   \u2514\u2500\u2500 index.ts   # Route registration
-\u2502       \u2514\u2500\u2500 index.ts       # Entry point
-\u2514\u2500\u2500 web/                   # Frontend React
-    \u2514\u2500\u2500 src/
-        \u251C\u2500\u2500 App.tsx        # UI principale con tabs
-        \u251C\u2500\u2500 main.tsx       # Entry point
-        \u2514\u2500\u2500 index.css      # TailwindCSS v4
+# Open Swagger UI
+open http://localhost:3000/swagger
 \`\`\`
 
-## Technologies
+## API Documentation
 
-- **Backend**: Kozo (Hono-based), TypeScript, Zod
-- **Frontend**: React 18, TanStack Query, TailwindCSS v4, Lucide Icons
-- **Build**: Vite, pnpm workspace
+Once the server is running, visit:
+- **Swagger UI**: http://localhost:3000/swagger
+- **OpenAPI JSON**: http://localhost:3000/doc
 
-## Installation
+## Project Structure
 
-\`\`\`bash
-pnpm install
+\`\`\`
+src/
+\u251C\u2500\u2500 db/
+\u2502   \u251C\u2500\u2500 schema.ts    # Drizzle schema
+\u2502   \u251C\u2500\u2500 seed.ts      # Database initialization${database === "sqlite" ? " (SQLite)" : ""}
+\u2502   \u2514\u2500\u2500 index.ts     # Database client
+\u251C\u2500\u2500 routes/
+\u2502   \u251C\u2500\u2500 index.ts     # GET /
+\u2502   \u2514\u2500\u2500 users/
+\u2502       \u251C\u2500\u2500 get.ts   # GET /users
+\u2502       \u2514\u2500\u2500 post.ts  # POST /users
+\u251C\u2500\u2500 services/
+\u2502   \u2514\u2500\u2500 index.ts     # Service definitions
+\u2514\u2500\u2500 index.ts         # Entry point
 \`\`\`
 
-## Development
+## Database Commands
 
 \`\`\`bash
-# Start API and Web in parallel
-pnpm dev
-
-# Or separately:
-pnpm --filter @${projectName}/api dev    # API on http://localhost:3000
-pnpm --filter @${projectName}/web dev    # Web on http://localhost:5173
+pnpm db:generate  # Generate migrations
+pnpm db:push      # Push schema to database
+pnpm db:studio    # Open Drizzle Studio
 \`\`\`
 
-## API Endpoints
+${database === "sqlite" ? "## SQLite Notes\n\nThe database is automatically initialized with example data on first run.\nDatabase file: `./data.db`\n" : ""}
+## Documentation
 
-### Health & Stats
-- \`GET /api/health\` - Health check with uptime
-- \`GET /api/stats\` - Global statistics
-
-### Users (Full CRUD)
-- \`GET /api/users\` - List all users
-- \`GET /api/users/:id\` - Get user by ID
-- \`POST /api/users\` - Create user
-- \`PUT /api/users/:id\` - Update user
-- \`DELETE /api/users/:id\` - Delete user
-
-### Posts (Full CRUD)
-- \`GET /api/posts?published=true\` - List posts (optional filter)
-- \`GET /api/posts/:id\` - Get post by ID
-- \`POST /api/posts\` - Create post
-- \`PUT /api/posts/:id\` - Update post
-- \`DELETE /api/posts/:id\` - Delete post
-
-### Tasks (Full CRUD)
-- \`GET /api/tasks?completed=true&priority=high\` - List tasks (optional filters)
-- \`GET /api/tasks/:id\` - Get task by ID
-- \`POST /api/tasks\` - Create task
-- \`PUT /api/tasks/:id\` - Update task
-- \`PATCH /api/tasks/:id/toggle\` - Toggle completion
-- \`DELETE /api/tasks/:id\` - Delete task
-
-### Tools
-- \`GET /api/echo?message=hello\` - Echo test
-- \`POST /api/validate\` - Zod validation (email + age)
-
-## Type Safety
-
-The frontend uses Hono RPC client for type-safe API calls:
-\`\`\`typescript
-const res = await client.api.users.$get();
-const users = await res.json(); // Fully typed!
-\`\`\`
+- [Kozo Docs](https://kozo-docs.vercel.app)
+- [Drizzle ORM](https://orm.drizzle.team)
+- [Hono](https://hono.dev)
 `;
-  await import_fs_extra.default.writeFile(import_node_path.default.join(projectDir, "README.md"), readme);
+  await import_fs_extra5.default.writeFile(import_node_path5.default.join(projectDir, "README.md"), readme);
+  if (database !== "none" && database !== "sqlite") await createDockerCompose(projectDir, projectName, database, dbPort);
+  if (extras.includes("docker")) await createDockerfile(projectDir, runtime);
+  if (extras.includes("github-actions")) await createGitHubActions(projectDir);
 }
 
 // src/utils/ascii-art.ts
@@ -3114,18 +3845,18 @@ ${import_picocolors2.default.dim("Documentation:")} ${import_picocolors2.default
 // src/commands/build.ts
 var import_execa2 = require("execa");
 var import_picocolors3 = __toESM(require("picocolors"));
-var import_fs_extra2 = __toESM(require("fs-extra"));
-var import_node_path4 = __toESM(require("path"));
+var import_fs_extra6 = __toESM(require("fs-extra"));
+var import_node_path8 = __toESM(require("path"));
 
 // src/routing/manifest.ts
 var import_node_crypto = require("crypto");
 var import_node_fs2 = require("fs");
-var import_node_path3 = require("path");
+var import_node_path7 = require("path");
 var import_glob2 = require("glob");
 
 // src/routing/scan.ts
 var import_glob = require("glob");
-var import_node_path2 = require("path");
+var import_node_path6 = require("path");
 var import_node_fs = require("fs");
 var HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
 function fileToRoute(filePath) {
@@ -3149,8 +3880,8 @@ function fileToRoute(filePath) {
     if (seg.startsWith("[") && seg.endsWith("]")) return ":" + seg.slice(1, -1);
     return seg;
   });
-  const path3 = "/" + urlSegments.join("/");
-  return { path: path3, method };
+  const path9 = "/" + urlSegments.join("/");
+  return { path: path9, method };
 }
 function extractParams(urlPath) {
   return urlPath.split("/").filter((seg) => seg.startsWith(":")).map((seg) => seg.slice(1));
@@ -3194,7 +3925,7 @@ async function scanRoutes(options) {
     if (!isRouteFile(file)) continue;
     const parsed = fileToRoute(file);
     if (!parsed) continue;
-    const absolutePath = (0, import_node_path2.join)(routesDir, file);
+    const absolutePath = (0, import_node_path6.join)(routesDir, file);
     const { hasBodySchema, hasQuerySchema } = detectSchemas(absolutePath);
     const params = extractParams(parsed.path);
     routes.push({
@@ -3229,7 +3960,7 @@ async function hashRouteFiles(routesDir) {
   for (const file of files) {
     hash.update(file);
     try {
-      const content = (0, import_node_fs2.readFileSync)((0, import_node_path3.join)(routesDir, file));
+      const content = (0, import_node_fs2.readFileSync)((0, import_node_path7.join)(routesDir, file));
       hash.update(content);
     } catch {
     }
@@ -3249,7 +3980,7 @@ async function generateManifest(options) {
   const {
     routesDir,
     projectRoot,
-    outputPath = (0, import_node_path3.join)(projectRoot, "routes-manifest.json"),
+    outputPath = (0, import_node_path7.join)(projectRoot, "routes-manifest.json"),
     cache = true,
     verbose = false
   } = options;
@@ -3282,7 +4013,7 @@ async function generateManifest(options) {
     contentHash,
     routes: entries
   };
-  const dir = (0, import_node_path3.dirname)(outputPath);
+  const dir = (0, import_node_path7.dirname)(outputPath);
   if (!(0, import_node_fs2.existsSync)(dir)) {
     (0, import_node_fs2.mkdirSync)(dir, { recursive: true });
   }
@@ -3325,11 +4056,11 @@ async function buildCommand(options = {}) {
   let currentStep = 0;
   currentStep++;
   step(currentStep, TOTAL_STEPS, "Checking project structure\u2026");
-  if (!import_fs_extra2.default.existsSync(import_node_path4.default.join(cwd, "package.json"))) {
+  if (!import_fs_extra6.default.existsSync(import_node_path8.default.join(cwd, "package.json"))) {
     fail("No package.json found. Run this command inside a Kozo project.");
     process.exit(1);
   }
-  if (!import_fs_extra2.default.existsSync(import_node_path4.default.join(cwd, "node_modules"))) {
+  if (!import_fs_extra6.default.existsSync(import_node_path8.default.join(cwd, "node_modules"))) {
     fail("Dependencies not installed. Run `npm install` first.");
     process.exit(1);
   }
@@ -3337,7 +4068,7 @@ async function buildCommand(options = {}) {
   currentStep++;
   step(currentStep, TOTAL_STEPS, "Cleaning previous build\u2026");
   try {
-    await import_fs_extra2.default.remove(import_node_path4.default.join(cwd, "dist"));
+    await import_fs_extra6.default.remove(import_node_path8.default.join(cwd, "dist"));
     ok("dist/ cleaned");
   } catch (err) {
     fail("Failed to clean dist/", err);
@@ -3347,12 +4078,12 @@ async function buildCommand(options = {}) {
     currentStep++;
     step(currentStep, TOTAL_STEPS, "Generating routes manifest\u2026");
     const routesDirRel = options.routesDir ?? "src/routes";
-    const routesDirAbs = import_node_path4.default.join(cwd, routesDirRel);
-    if (!import_fs_extra2.default.existsSync(routesDirAbs)) {
+    const routesDirAbs = import_node_path8.default.join(cwd, routesDirRel);
+    if (!import_fs_extra6.default.existsSync(routesDirAbs)) {
       console.log(import_picocolors3.default.dim(`  \u26A0  Routes directory not found (${routesDirRel}), skipping manifest.`));
     } else {
       try {
-        const manifestOutAbs = options.manifestOut ? import_node_path4.default.join(cwd, options.manifestOut) : import_node_path4.default.join(cwd, "routes-manifest.json");
+        const manifestOutAbs = options.manifestOut ? import_node_path8.default.join(cwd, options.manifestOut) : import_node_path8.default.join(cwd, "routes-manifest.json");
         const manifest = await generateManifest({
           routesDir: routesDirAbs,
           projectRoot: cwd,
@@ -3386,6 +4117,285 @@ async function buildCommand(options = {}) {
   console.log();
 }
 
+// src/commands/dev.ts
+var import_child_process = require("child_process");
+var import_chokidar = __toESM(require("chokidar"));
+var import_picocolors4 = __toESM(require("picocolors"));
+var import_fs_extra7 = __toESM(require("fs-extra"));
+var import_path = __toESM(require("path"));
+async function devCommand() {
+  console.clear();
+  printBox2("Kozo Development Server");
+  await runStep(1, 4, "Checking project structure...", async () => {
+    if (!import_fs_extra7.default.existsSync(import_path.default.join(process.cwd(), "package.json"))) {
+      throw new Error("No package.json found. Run this command in a Kozo project.");
+    }
+  });
+  await runStep(2, 4, "Checking dependencies...", async () => {
+    if (!import_fs_extra7.default.existsSync(import_path.default.join(process.cwd(), "node_modules"))) {
+      throw new Error("Dependencies not installed. Run: pnpm install");
+    }
+    await sleep(300);
+  });
+  const routesDir = resolveRoutesDir(process.cwd());
+  await runStep(3, 4, "Scanning routes...", async () => {
+    if (routesDir) {
+      await generateManifest({ routesDir, useCache: false, verbose: false });
+    }
+    await sleep(300);
+  });
+  await runStep(4, 4, "Starting server on port 3000...", async () => {
+    await sleep(200);
+  });
+  console.log(import_picocolors4.default.gray("\n\u2139  \u{1F440} Watching for file changes... (Ctrl+C to stop)\n"));
+  console.log(import_picocolors4.default.dim("\u2500".repeat(50)) + "\n");
+  const child = (0, import_child_process.spawn)("npx", ["tsx", "watch", "src/index.ts"], {
+    stdio: "inherit",
+    shell: true,
+    cwd: process.cwd(),
+    env: { ...process.env, FORCE_COLOR: "1" }
+  });
+  child.on("error", (err) => {
+    console.error(import_picocolors4.default.red("\n\u274C Failed to start server"));
+    console.error(err);
+    process.exit(1);
+  });
+  child.on("close", (code) => {
+    if (code === 0 || code === null) {
+      console.log("\n" + import_picocolors4.default.dim("Server stopped"));
+    }
+    process.exit(code ?? 0);
+  });
+  if (routesDir) {
+    startRouteWatcher(routesDir);
+  }
+  process.on("SIGINT", () => {
+    console.log("\n" + import_picocolors4.default.yellow("\u23F9  Stopping Kozo dev server..."));
+    child.kill("SIGTERM");
+    process.exit(0);
+  });
+}
+function startRouteWatcher(routesDir) {
+  let debounceTimer = null;
+  const watcher = import_chokidar.default.watch(routesDir, {
+    ignored: /(^|[/\\])\..|(\.test\.[tj]s$)|(\.spec\.[tj]s$)/,
+    persistent: true,
+    ignoreInitial: true,
+    // don't fire for files already present at startup
+    awaitWriteFinish: {
+      stabilityThreshold: 80,
+      pollInterval: 50
+    }
+  });
+  const handleChange = (eventType, filePath) => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(async () => {
+      try {
+        const manifest = await generateManifest({
+          routesDir,
+          useCache: false,
+          // always regenerate on file change
+          verbose: false
+        });
+        const count = manifest.routes.length;
+        console.log(
+          import_picocolors4.default.cyan("[Kozo]") + " \u2728 Routes updated " + import_picocolors4.default.dim(`(${count} found)`) + import_picocolors4.default.dim(` \u2014 ${import_path.default.relative(process.cwd(), filePath)}`)
+        );
+      } catch (err) {
+        console.error(
+          import_picocolors4.default.red("[Kozo] \u274C Failed to regenerate routes manifest:"),
+          err.message
+        );
+      }
+    }, 120);
+  };
+  watcher.on("add", (p3) => handleChange("add", p3)).on("change", (p3) => handleChange("change", p3)).on("unlink", (p3) => handleChange("unlink", p3)).on("error", (err) => console.error(import_picocolors4.default.red("[Kozo] Watcher error:"), err));
+  return watcher;
+}
+function resolveRoutesDir(cwd) {
+  const candidates = [
+    import_path.default.join(cwd, "src", "routes"),
+    import_path.default.join(cwd, "routes"),
+    import_path.default.join(cwd, "src", "app", "routes"),
+    import_path.default.join(cwd, "app", "routes")
+  ];
+  for (const candidate of candidates) {
+    if (import_fs_extra7.default.existsSync(candidate) && import_fs_extra7.default.statSync(candidate).isDirectory()) {
+      return candidate;
+    }
+  }
+  return null;
+}
+function printBox2(title) {
+  const width = 50;
+  const pad = Math.floor((width - title.length) / 2);
+  const line = "\u2500".repeat(width);
+  console.log(import_picocolors4.default.cyan("\u250C" + line + "\u2510"));
+  console.log(import_picocolors4.default.cyan("\u2502") + " ".repeat(pad) + import_picocolors4.default.bold(title) + " ".repeat(width - pad - title.length) + import_picocolors4.default.cyan("\u2502"));
+  console.log(import_picocolors4.default.cyan("\u2514" + line + "\u2518"));
+  console.log();
+}
+async function runStep(step2, total, label, fn) {
+  const prefix = import_picocolors4.default.dim(`[${step2}/${total}]`);
+  process.stdout.write(`${prefix} ${label}`);
+  try {
+    await fn();
+    process.stdout.write(" " + import_picocolors4.default.green("\u2713") + "\n");
+  } catch (err) {
+    process.stdout.write(" " + import_picocolors4.default.red("\u2717") + "\n");
+    console.error(import_picocolors4.default.red(`
+  Error: ${err.message}`));
+    process.exit(1);
+  }
+}
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// src/commands/generate.ts
+var p2 = __toESM(require("@clack/prompts"));
+var import_picocolors5 = __toESM(require("picocolors"));
+var import_fs_extra8 = __toESM(require("fs-extra"));
+var import_node_path9 = __toESM(require("path"));
+var ROUTE_TEMPLATE = `import { z } from 'zod';
+import type { HandlerContext } from '@kozo/core';
+
+// Validation schema (optional)
+export const schema = {
+  body: z.object({
+    // Define your schema here
+  })
+};
+
+type Body = z.infer<typeof schema.body>;
+
+export default async ({ body, services }: HandlerContext<Body>) => {
+  // TODO: Implement handler
+  return { message: 'Not implemented' };
+};
+`;
+var GET_ROUTE_TEMPLATE = `import type { HandlerContext } from '@kozo/core';
+
+export default async ({ params, services }: HandlerContext) => {
+  // TODO: Implement handler
+  return { message: 'Not implemented' };
+};
+`;
+var MIDDLEWARE_TEMPLATE = `import type { Context, Next } from 'hono';
+
+export async function {{name}}(c: Context, next: Next) {
+  // Before handler
+  console.log('{{name}} middleware - before');
+  
+  await next();
+  
+  // After handler
+  console.log('{{name}} middleware - after');
+}
+`;
+async function generateCommand(type, name) {
+  if (!type) {
+    p2.log.error("Please specify what to generate: route, middleware");
+    process.exit(1);
+  }
+  switch (type.toLowerCase()) {
+    case "route":
+    case "r":
+      await generateRoute(name);
+      break;
+    case "middleware":
+    case "mw":
+      await generateMiddleware(name);
+      break;
+    default:
+      p2.log.error(`Unknown generator: ${type}`);
+      p2.log.info("Available: route, middleware");
+      process.exit(1);
+  }
+}
+async function generateRoute(routePath) {
+  let targetPath = routePath;
+  if (!targetPath) {
+    const result = await p2.text({
+      message: "Route path (e.g., users/profile)",
+      placeholder: "users/[id]",
+      validate: (v) => !v ? "Path is required" : void 0
+    });
+    if (p2.isCancel(result)) {
+      p2.cancel("Cancelled");
+      process.exit(0);
+    }
+    targetPath = result;
+  }
+  const method = await p2.select({
+    message: "HTTP method",
+    options: [
+      { value: "get", label: "GET" },
+      { value: "post", label: "POST" },
+      { value: "put", label: "PUT" },
+      { value: "patch", label: "PATCH" },
+      { value: "delete", label: "DELETE" }
+    ]
+  });
+  if (p2.isCancel(method)) {
+    p2.cancel("Cancelled");
+    process.exit(0);
+  }
+  const routesDir = import_node_path9.default.join(process.cwd(), "src", "routes");
+  const filePath = import_node_path9.default.join(routesDir, targetPath, `${method}.ts`);
+  if (await import_fs_extra8.default.pathExists(filePath)) {
+    const overwrite = await p2.confirm({
+      message: `File ${filePath} already exists. Overwrite?`,
+      initialValue: false
+    });
+    if (p2.isCancel(overwrite) || !overwrite) {
+      p2.cancel("Cancelled");
+      process.exit(0);
+    }
+  }
+  await import_fs_extra8.default.ensureDir(import_node_path9.default.dirname(filePath));
+  const template = method === "get" ? GET_ROUTE_TEMPLATE : ROUTE_TEMPLATE;
+  await import_fs_extra8.default.writeFile(filePath, template);
+  const relativePath = import_node_path9.default.relative(process.cwd(), filePath);
+  p2.log.success(`Created ${import_picocolors5.default.cyan(relativePath)}`);
+  const urlPath = "/" + targetPath.replace(/\[([^\]]+)\]/g, ":$1");
+  console.log(`
+  ${import_picocolors5.default.bold(String(method).toUpperCase())} ${import_picocolors5.default.green(urlPath)}
+`);
+}
+async function generateMiddleware(middlewareName) {
+  let name = middlewareName;
+  if (!name) {
+    const result = await p2.text({
+      message: "Middleware name",
+      placeholder: "auth",
+      validate: (v) => !v ? "Name is required" : void 0
+    });
+    if (p2.isCancel(result)) {
+      p2.cancel("Cancelled");
+      process.exit(0);
+    }
+    name = result;
+  }
+  const middlewareDir = import_node_path9.default.join(process.cwd(), "src", "middleware");
+  const filePath = import_node_path9.default.join(middlewareDir, `${name}.ts`);
+  if (await import_fs_extra8.default.pathExists(filePath)) {
+    const overwrite = await p2.confirm({
+      message: `File ${filePath} already exists. Overwrite?`,
+      initialValue: false
+    });
+    if (p2.isCancel(overwrite) || !overwrite) {
+      p2.cancel("Cancelled");
+      process.exit(0);
+    }
+  }
+  await import_fs_extra8.default.ensureDir(middlewareDir);
+  const content = MIDDLEWARE_TEMPLATE.replace(/\{\{name\}\}/g, name);
+  await import_fs_extra8.default.writeFile(filePath, content);
+  const relativePath = import_node_path9.default.relative(process.cwd(), filePath);
+  p2.log.success(`Created ${import_picocolors5.default.cyan(relativePath)}`);
+}
+
 // src/index.ts
 var program = new import_commander.Command();
 program.name("kozo").description("CLI to scaffold new Kozo Framework projects").version("0.2.6");
@@ -3402,4 +4412,10 @@ program.command("build").description("Build the project (generates routes manife
     tsupArgs
   });
 });
+program.command("dev").description("Start development server with hot reload and route watcher").action(async () => {
+  await devCommand();
+});
+program.command("generate [type] [name]").alias("g").description("Generate scaffolding: route, middleware").action(async (type, name) => {
+  await generateCommand(type ?? "", name);
+});
 program.parse();