@kozojs/cli 0.1.14 → 0.1.16

package/lib/index.js

@@ -456,6 +456,7 @@ async function scaffoldCompleteTemplate(projectDir, projectName, kozoCoreDep, ru
       "@hono/node-server": "^1.13.0",
       hono: "^4.6.0",
       zod: "^3.23.0",
+      dotenv: "^16.4.0",
       ...hasDb && { "drizzle-orm": "^0.36.0" },
       ...database === "postgresql" && { postgres: "^3.4.0" },
       ...database === "mysql" && { mysql2: "^3.11.0" },
@@ -1383,7 +1384,7 @@ jobs:
 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"));
-  if (!hasDb) await import_fs_extra.default.ensureDir(import_node_path.default.join(projectDir, "apps", "api", "src", "data"));
+  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"));
@@ -1401,7 +1402,7 @@ async function scaffoldFullstackProject(projectDir, projectName, kozoCoreDep, ru
 `);
   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);
+  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);
@@ -1836,22 +1837,19 @@ export function registerToolRoutes(app: Kozo) {
 }
 `);
 }
-async function scaffoldFullstackWeb(projectDir, projectName, frontend) {
+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"
-    },
+    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",
-      hono: "^4.6.0",
       "lucide-react": "^0.460.0"
     },
     devDependencies: {
@@ -1865,6 +1863,24 @@ async function scaffoldFullstackWeb(projectDir, projectName, frontend) {
     }
   };
   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';
@@ -1872,8 +1888,14 @@ import tailwindcss from '@tailwindcss/vite';
 export default defineConfig({
   plugins: [react(), tailwindcss()],
   server: {
+    port: 5173,
     proxy: {
-      '/api': 'http://localhost:3000',
+      '/api': { target: 'http://localhost:3000', changeOrigin: true },
+      '/health': { target: 'http://localhost:3000', changeOrigin: true },
+      '/auth': { target: 'http://localhost:3000', changeOrigin: true },
+      '/users': { target: 'http://localhost:3000', changeOrigin: true },
+      '/posts': { target: 'http://localhost:3000', changeOrigin: true },
+      '/stats': { target: 'http://localhost:3000', changeOrigin: true },
     },
   },
 });
@@ -1893,21 +1915,45 @@ export default defineConfig({
 `);
   await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "index.css"), `@import "tailwindcss";
 
-body {
-  background-color: rgb(15 23 42);
-  color: rgb(241 245 249);
-}
+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", "client.ts"), `import { hc } from 'hono/client';
-import type { AppType } from '@${projectName}/api';
+  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "lib", "api.ts"), `const API_BASE = '';
 
-// Type-safe RPC client - changes in API break frontend at compile time!
-export const client = hc<AppType>('/');
+${auth ? `export function getToken(): string | null {
+  return localStorage.getItem('kozo_token');
+}
 
-/* Usage:
-const res = await client.api.users.$get();
-const users = await res.json(); // Fully typed!
-*/
+export function setToken(token: string): void {
+  localStorage.setItem('kozo_token', token);
+}
+
+export function clearToken(): void {
+  localStorage.removeItem('kozo_token');
+}
+` : ""}
+export interface ApiResult<T = unknown> {
+  data: T;
+  status: number;
+  ms: number;
+}
+
+export async function apiFetch<T = unknown>(
+  path: string,
+  options: RequestInit = {},
+): Promise<ApiResult<T>> {
+  const start = performance.now();
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...(options.headers as Record<string, string> ?? {}),
+  };
+${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';
@@ -1916,12 +1962,7 @@ import App from './App';
 import './index.css';
 
 const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: 1,
-    },
-  },
+  defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1 } },
 });
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
@@ -1932,417 +1973,551 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   </React.StrictMode>
 );
 `);
-  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "App.tsx"), generateFullReactApp(projectName));
+  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());
+  if (auth) {
+    await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "pages", "Login.tsx"), generateLoginPage());
+  }
+  await import_fs_extra.default.writeFile(import_node_path.default.join(webDir, "src", "App.tsx"), generateAppTsx(projectName, auth));
 }
-function generateFullReactApp(projectName) {
-  return `import { useState } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { 
-  Activity, Users, FileText, CheckSquare, Send, Trash2, Edit2, 
-  Plus, Server, Zap, Heart
-} from 'lucide-react';
+function generateAppTsx(projectName, auth) {
+  const authImports = auth ? `import { getToken, clearToken } from './lib/api';` : "";
+  const loginImport = auth ? `import Login from './pages/Login';` : "";
+  return `import { useState${auth ? ", useEffect" : ""} } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { LayoutDashboard, Users, FileText, Server, LogOut } from 'lucide-react';
+${authImports}
+${loginImport}
+import Dashboard from './pages/Dashboard';
+import UsersPage from './pages/Users';
+import PostsPage from './pages/Posts';
+
+type Page = 'dashboard' | 'users' | 'posts';
 
-const API_BASE = '/api';
+export default function App() {
+  const [page, setPage] = useState<Page>('dashboard');
+${auth ? `  const [token, setToken] = useState<string | null>(() => getToken());
+  const queryClient = useQueryClient();
 
-type Tab = 'health' | 'users' | 'posts' | 'tasks' | 'tools';
+  useEffect(() => { if (token) { /* token refreshed */ } }, [token]);
 
-interface ApiResponse {
-  status: number;
-  data: unknown;
-  time: number;
+  const handleLogin = (t: string) => setToken(t);
+  const handleLogout = () => {
+    clearToken();
+    setToken(null);
+    queryClient.clear();
+  };
+
+  if (!token) return <Login onLogin={handleLogin} />;
+` : `  const queryClient = useQueryClient();
+`}
+  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 },
+  ];
+
+  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 />}
+      </main>
+    </div>
+  );
 }
+`;
+}
+function generateLoginPage() {
+  return `import { useState, FormEvent } from 'react';
+import { Server, Loader2 } from 'lucide-react';
+import { apiFetch, setToken } from '../lib/api';
 
-async function fetchApi(endpoint: string, options?: RequestInit): Promise<ApiResponse> {
-  const start = performance.now();
-  const res = await fetch(\`\${API_BASE}\${endpoint}\`, {
-    headers: { 'Content-Type': 'application/json' },
-    ...options,
-  });
-  const time = Math.round(performance.now() - start);
-  const data = await res.json();
-  return { status: res.status, data, time };
+interface Props {
+  onLogin: (token: string) => void;
 }
 
-function Badge({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'success' | 'warning' | 'error' }) {
-  const colors = {
-    default: 'bg-slate-700 text-slate-200',
-    success: 'bg-emerald-900 text-emerald-300',
-    warning: 'bg-amber-900 text-amber-300',
-    error: 'bg-red-900 text-red-300',
+export default function Login({ onLogin }: Props) {
+  const [email, setEmail] = useState('admin@kozo.app');
+  const [password, setPassword] = useState('password123');
+  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 }>('/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 <span className={\`px-2 py-0.5 rounded text-xs font-medium \${colors[variant]}\`}>{children}</span>;
-}
 
-function Card({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
   return (
-    <div className="bg-slate-800 rounded-lg border border-slate-700 overflow-hidden">
-      <div className="px-4 py-3 border-b border-slate-700 flex items-center gap-2">
-        <Icon className="w-4 h-4 text-blue-400" />
-        <h3 className="font-medium text-slate-200">{title}</h3>
+    <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 className="p-4">{children}</div>
     </div>
   );
 }
+`;
+}
+function generateDashboardPage() {
+  return `import { useQuery } from '@tanstack/react-query';
+import { apiFetch } from '../lib/api';
+import { Users, FileText, Activity, Zap } from 'lucide-react';
+
+interface Stats {
+  users?: { total: number; admins?: number; regular?: number };
+  posts?: { total: number; published?: number; drafts?: number };
+  performance?: { uptime: number; memoryUsage?: { heapUsed: number } };
+  // fullstack format
+  timestamp?: string;
+  version?: string;
+}
 
-function ResponseDisplay({ response, loading }: { response: ApiResponse | null; loading: boolean }) {
-  if (loading) return <div className="text-slate-400 text-sm">Loading...</div>;
-  if (!response) return null;
-  
-  const isSuccess = response.status >= 200 && response.status < 300;
+function StatCard({ label, value, sub, icon: Icon, color }: {
+  label: string; value: string | number; sub?: string;
+  icon: React.ElementType; color: string;
+}) {
   return (
-    <div className="mt-3 p-3 bg-slate-900 rounded border border-slate-700">
-      <div className="flex items-center gap-2 mb-2">
-        <Badge variant={isSuccess ? 'success' : 'error'}>{response.status}</Badge>
-        <span className="text-xs text-slate-500">{response.time}ms</span>
+    <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>
-      <pre className="text-xs text-slate-300 overflow-auto max-h-48">
-        {JSON.stringify(response.data, null, 2)}
-      </pre>
     </div>
   );
 }
 
-function HealthPanel() {
-  const [response, setResponse] = useState<ApiResponse | null>(null);
-  const [loading, setLoading] = useState(false);
+export default function Dashboard() {
+  const { data: health } = useQuery({
+    queryKey: ['health'],
+    queryFn: () => apiFetch<{ status: string; uptime: number; version: string }>('/health').then(r => r.data),
+  });
 
-  const checkHealth = async () => {
-    setLoading(true);
-    const res = await fetchApi('/health');
-    setResponse(res);
-    setLoading(false);
-  };
+  const { data: stats, isLoading } = useQuery({
+    queryKey: ['stats'],
+    queryFn: () => apiFetch<Stats>('/stats').then(r => r.data),
+  });
 
-  const checkStats = async () => {
-    setLoading(true);
-    const res = await fetchApi('/stats');
-    setResponse(res);
-    setLoading(false);
-  };
+  const uptime = health?.uptime ?? stats?.performance?.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';
 
   return (
-    <Card title="Health & Stats" icon={Heart}>
-      <div className="flex gap-2 mb-3">
-        <button onClick={checkHealth} className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 rounded text-sm font-medium transition">
-          Check Health
-        </button>
-        <button onClick={checkStats} className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium transition">
-          Get Stats
-        </button>
+    <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>
+
+      {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?.total ?? '\u2014'}
+            sub={stats?.users ? \`\${stats.users.admins ?? 0} admins \xB7 \${stats.users.regular ?? 0} regular\` : undefined}
+            icon={Users} color="bg-blue-600"
+          />
+          <StatCard
+            label="Posts"
+            value={stats?.posts?.total ?? '\u2014'}
+            sub={stats?.posts ? \`\${stats.posts.published ?? 0} published \xB7 \${stats.posts.drafts ?? 0} drafts\` : undefined}
+            icon={FileText} color="bg-purple-600"
+          />
+          <StatCard
+            label="Uptime"
+            value={uptimeStr}
+            icon={Activity} color="bg-emerald-600"
+          />
+          <StatCard
+            label="API Status"
+            value={health?.status === 'ok' ? '\u2713 Online' : '? Unknown'}
+            sub={health?.version ? \`v\${health.version}\` : undefined}
+            icon={Zap} color="bg-amber-600"
+          />
+        </div>
+      )}
+
+      <div className="bg-slate-800 rounded-xl border border-slate-700 p-4">
+        <h3 className="text-sm font-medium text-slate-300 mb-3">Quick API Test</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 /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>
-      <ResponseDisplay response={response} loading={loading} />
-    </Card>
+    </div>
   );
 }
+`;
+}
+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';
+
+interface User {
+  id: string | number;
+  name: string;
+  email: string;
+  role?: string;
+  createdAt?: string;
+}
 
-function UsersPanel() {
+export default function UsersPage() {
   const queryClient = useQueryClient();
-  const [response, setResponse] = useState<ApiResponse | null>(null);
+  const [form, setForm] = useState({ name: '', email: '' });
   const [loading, setLoading] = useState(false);
-  const [newUser, setNewUser] = useState({ name: '', email: '', role: 'user' as const });
+  const [error, setError] = useState('');
 
-  const { data: users, isLoading } = useQuery({
+  const { data: users = [], isLoading } = useQuery({
     queryKey: ['users'],
     queryFn: async () => {
-      const res = await fetchApi('/users');
-      return res.data as Array<{ id: string; name: string; email: string; role: string }>;
+      const res = await apiFetch<User[] | { users: User[] }>('/users');
+      return Array.isArray(res.data) ? res.data : res.data.users ?? [];
     },
   });
 
   const createUser = async () => {
-    if (!newUser.name || !newUser.email) return;
-    setLoading(true);
-    const res = await fetchApi('/users', {
-      method: 'POST',
-      body: JSON.stringify(newUser),
-    });
-    setResponse(res);
-    setLoading(false);
-    setNewUser({ name: '', email: '', role: 'user' });
-    queryClient.invalidateQueries({ queryKey: ['users'] });
+    if (!form.name || !form.email) { setError('Name and email required'); return; }
+    setLoading(true); setError('');
+    try {
+      const res = await apiFetch('/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); }
   };
 
-  const deleteUser = async (id: string) => {
+  const deleteUser = async (id: string | number) => {
     setLoading(true);
-    const res = await fetchApi(\`/users/\${id}\`, { method: 'DELETE' });
-    setResponse(res);
-    setLoading(false);
+    await apiFetch(\`/users/\${id}\`, { method: 'DELETE' });
     queryClient.invalidateQueries({ queryKey: ['users'] });
+    setLoading(false);
   };
 
   return (
-    <Card title="Users" icon={Users}>
-      <div className="space-y-4">
-        <div className="grid grid-cols-3 gap-2">
+    <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>
+
+      {/* 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="Name"
-            value={newUser.name}
-            onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
-            className="px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
+            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"
-            value={newUser.email}
-            onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
-            className="px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
+            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-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 rounded text-sm font-medium transition flex items-center justify-center gap-1">
-            <Plus className="w-4 h-4" /> Add User
+          <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>
 
-        <div className="space-y-2">
-          {isLoading ? (
-            <div className="text-slate-400 text-sm">Loading users...</div>
-          ) : (
-            users?.map((user) => (
-              <div key={user.id} className="flex items-center justify-between p-2 bg-slate-900 rounded border border-slate-700">
-                <div>
-                  <span className="font-medium">{user.name}</span>
-                  <span className="text-slate-400 text-sm ml-2">{user.email}</span>
-                  <Badge variant={user.role === 'admin' ? 'warning' : 'default'}>{user.role}</Badge>
-                </div>
-                <button onClick={() => deleteUser(user.id)} className="p-1 text-red-400 hover:text-red-300 transition">
-                  <Trash2 className="w-4 h-4" />
-                </button>
-              </div>
-            ))
-          )}
-        </div>
-
-        <ResponseDisplay response={response} loading={loading} />
+      {/* 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>
-    </Card>
+    </div>
   );
 }
+`;
+}
+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';
+
+interface Post {
+  id: string | number;
+  title: string;
+  content?: string;
+  published?: boolean;
+  authorId?: string | number;
+  tags?: string[];
+  createdAt?: string;
+}
 
-function TasksPanel() {
+export default function PostsPage() {
   const queryClient = useQueryClient();
-  const [response, setResponse] = useState<ApiResponse | null>(null);
+  const [form, setForm] = useState({ title: '', content: '', published: false });
   const [loading, setLoading] = useState(false);
-  const [newTask, setNewTask] = useState({ title: '', priority: 'medium' as const });
+  const [error, setError] = useState('');
 
-  const { data: tasks, isLoading } = useQuery({
-    queryKey: ['tasks'],
+  const { data: posts = [], isLoading } = useQuery({
+    queryKey: ['posts'],
     queryFn: async () => {
-      const res = await fetchApi('/tasks');
-      return res.data as Array<{ id: string; title: string; completed: boolean; priority: string }>;
+      const res = await apiFetch<Post[] | { posts: Post[] }>('/posts');
+      return Array.isArray(res.data) ? res.data : res.data.posts ?? [];
     },
   });
 
-  const createTask = async () => {
-    if (!newTask.title) return;
-    setLoading(true);
-    const res = await fetchApi('/tasks', {
-      method: 'POST',
-      body: JSON.stringify(newTask),
-    });
-    setResponse(res);
-    setLoading(false);
-    setNewTask({ title: '', priority: 'medium' });
-    queryClient.invalidateQueries({ queryKey: ['tasks'] });
-  };
-
-  const toggleTask = async (id: string) => {
-    setLoading(true);
-    const res = await fetchApi(\`/tasks/\${id}/toggle\`, { method: 'PATCH' });
-    setResponse(res);
-    setLoading(false);
-    queryClient.invalidateQueries({ queryKey: ['tasks'] });
+  const createPost = async () => {
+    if (!form.title) { setError('Title required'); return; }
+    setLoading(true); setError('');
+    try {
+      const res = await apiFetch('/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); }
   };
 
-  const deleteTask = async (id: string) => {
+  const deletePost = async (id: string | number) => {
     setLoading(true);
-    const res = await fetchApi(\`/tasks/\${id}\`, { method: 'DELETE' });
-    setResponse(res);
+    await apiFetch(\`/posts/\${id}\`, { method: 'DELETE' });
+    queryClient.invalidateQueries({ queryKey: ['posts'] });
     setLoading(false);
-    queryClient.invalidateQueries({ queryKey: ['tasks'] });
-  };
-
-  const priorityColor = (p: string) => {
-    switch (p) {
-      case 'high': return 'error';
-      case 'medium': return 'warning';
-      default: return 'default';
-    }
   };
 
   return (
-    <Card title="Tasks" icon={CheckSquare}>
-      <div className="space-y-4">
-        <div className="grid grid-cols-3 gap-2">
-          <input
-            placeholder="Task title"
-            value={newTask.title}
-            onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
-            className="px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
-          />
-          <select
-            value={newTask.priority}
-            onChange={(e) => setNewTask({ ...newTask, priority: e.target.value as 'low' | 'medium' | 'high' })}
-            className="px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
-          >
-            <option value="low">Low</option>
-            <option value="medium">Medium</option>
-            <option value="high">High</option>
-          </select>
-          <button onClick={createTask} disabled={loading} className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 rounded text-sm font-medium transition flex items-center justify-center gap-1">
-            <Plus className="w-4 h-4" /> Add Task
-          </button>
-        </div>
-
-        <div className="space-y-2">
-          {isLoading ? (
-            <div className="text-slate-400 text-sm">Loading tasks...</div>
-          ) : (
-            tasks?.map((task) => (
-              <div key={task.id} className="flex items-center justify-between p-2 bg-slate-900 rounded border border-slate-700">
-                <div className="flex items-center gap-2">
-                  <input
-                    type="checkbox"
-                    checked={task.completed}
-                    onChange={() => toggleTask(task.id)}
-                    className="rounded"
-                  />
-                  <span className={task.completed ? 'line-through text-slate-500' : ''}>{task.title}</span>
-                  <Badge variant={priorityColor(task.priority) as 'default' | 'success' | 'warning' | 'error'}>{task.priority}</Badge>
-                </div>
-                <button onClick={() => deleteTask(task.id)} className="p-1 text-red-400 hover:text-red-300 transition">
-                  <Trash2 className="w-4 h-4" />
-                </button>
-              </div>
-            ))
-          )}
-        </div>
-
-        <ResponseDisplay response={response} loading={loading} />
+    <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>
-    </Card>
-  );
-}
-
-function ToolsPanel() {
-  const [echoMessage, setEchoMessage] = useState('');
-  const [validateData, setValidateData] = useState({ email: '', age: '' });
-  const [response, setResponse] = useState<ApiResponse | null>(null);
-  const [loading, setLoading] = useState(false);
 
-  const testEcho = async () => {
-    if (!echoMessage) return;
-    setLoading(true);
-    const res = await fetchApi(\`/echo?message=\${encodeURIComponent(echoMessage)}\`);
-    setResponse(res);
-    setLoading(false);
-  };
-
-  const testValidate = async () => {
-    setLoading(true);
-    const res = await fetchApi('/validate', {
-      method: 'POST',
-      body: JSON.stringify({
-        email: validateData.email,
-        age: parseInt(validateData.age) || 0,
-      }),
-    });
-    setResponse(res);
-    setLoading(false);
-  };
-
-  return (
-    <Card title="Test Tools" icon={Zap}>
-      <div className="space-y-6">
-        <div>
-          <h4 className="text-sm font-medium text-slate-300 mb-2">Echo Endpoint</h4>
-          <div className="flex gap-2">
-            <input
-              placeholder="Message to echo"
-              value={echoMessage}
-              onChange={(e) => setEchoMessage(e.target.value)}
-              className="flex-1 px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
-            />
-            <button onClick={testEcho} className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium transition flex items-center gap-1">
-              <Send className="w-4 h-4" /> Echo
-            </button>
-          </div>
-        </div>
-
-        <div>
-          <h4 className="text-sm font-medium text-slate-300 mb-2">Validation Endpoint</h4>
-          <div className="flex gap-2">
-            <input
-              placeholder="Email"
-              value={validateData.email}
-              onChange={(e) => setValidateData({ ...validateData, email: e.target.value })}
-              className="flex-1 px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
-            />
-            <input
-              placeholder="Age"
-              type="number"
-              value={validateData.age}
-              onChange={(e) => setValidateData({ ...validateData, age: e.target.value })}
-              className="w-24 px-3 py-1.5 bg-slate-900 border border-slate-600 rounded text-sm focus:border-blue-500 outline-none"
-            />
-            <button onClick={testValidate} className="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 rounded text-sm font-medium transition flex items-center gap-1">
-              <CheckSquare className="w-4 h-4" /> Validate
+      {/* 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>
-
-        <ResponseDisplay response={response} loading={loading} />
+        {error && <p className="text-red-400 text-xs mt-2">{error}</p>}
       </div>
-    </Card>
-  );
-}
-
-export default function App() {
-  const [activeTab, setActiveTab] = useState<Tab>('health');
-
-  const tabs: { id: Tab; label: string; icon: React.ElementType }[] = [
-    { id: 'health', label: 'Health', icon: Activity },
-    { id: 'users', label: 'Users', icon: Users },
-    { id: 'tasks', label: 'Tasks', icon: CheckSquare },
-    { id: 'tools', label: 'Tools', icon: Zap },
-  ];
-
-  return (
-    <div className="min-h-screen p-6">
-      <div className="max-w-4xl mx-auto">
-        <header className="mb-8">
-          <div className="flex items-center gap-3 mb-2">
-            <Server className="w-8 h-8 text-blue-400" />
-            <h1 className="text-3xl font-bold">Kozo API Tester</h1>
-          </div>
-          <p className="text-slate-400">Test the ${projectName} API endpoints with this interactive UI</p>
-        </header>
-
-        <nav className="flex gap-1 mb-6 bg-slate-800 p-1 rounded-lg">
-          {tabs.map(({ id, label, icon: Icon }) => (
-            <button
-              key={id}
-              onClick={() => setActiveTab(id)}
-              className={\`flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition \${
-                activeTab === id
-                  ? 'bg-blue-600 text-white'
-                  : 'text-slate-400 hover:text-white hover:bg-slate-700'
-              }\`}
-            >
-              <Icon className="w-4 h-4" />
-              {label}
-            </button>
-          ))}
-        </nav>
 
-        <main>
-          {activeTab === 'health' && <HealthPanel />}
-          {activeTab === 'users' && <UsersPanel />}
-          {activeTab === 'tasks' && <TasksPanel />}
-          {activeTab === 'tools' && <ToolsPanel />}
-        </main>
-
-        <footer className="mt-8 pt-6 border-t border-slate-800 text-center text-slate-500 text-sm">
-          Built with Kozo + React + TailwindCSS
-        </footer>
+      {/* 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>
     </div>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kozojs/cli",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "CLI to scaffold new Kozo Framework projects - The next-gen TypeScript Backend Framework",
   "bin": {
     "create-kozo": "./lib/index.js",