@kozojs/cli 0.1.16 → 0.1.18

package/lib/index.js

@@ -1495,20 +1495,19 @@ ${auth ? "JWT_SECRET=change-me-to-a-random-secret-at-least-32-chars\n" : ""}`;
     exclude: ["node_modules", "dist"]
   };
   await import_fs_extra.default.writeJSON(import_node_path.default.join(apiDir, "tsconfig.json"), tsconfig, { spaces: 2 });
-  const dbImport = hasDb ? `import { createDb } from './db/index.js';
-` : "";
   const authImport = auth ? `import { authenticateJWT } from '@kozojs/auth';
 ` : "";
-  const servicesSetup = hasDb ? `
-const db = await createDb();
-const services = { db };
-` : "\nconst services = {};\n";
+  const servicesSetup = "\nconst services = {};\n";
   const authMiddleware = auth ? `
-app.use('*', authenticateJWT({ secret: process.env.JWT_SECRET || 'change-me' }));
+// Protect resource routes with JWT (auth login route remains public)
+const JWT_SECRET = process.env.JWT_SECRET || 'change-me';
+app.use('*', authenticateJWT(JWT_SECRET, { prefix: '/api/users' }));
+app.use('*', authenticateJWT(JWT_SECRET, { prefix: '/api/posts' }));
+app.use('*', authenticateJWT(JWT_SECRET, { prefix: '/api/tasks' }));
 ` : "";
   await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "index.ts"), `import 'dotenv/config';
 import { createKozo } from '@kozojs/core';
-${dbImport}${authImport}import { registerRoutes } from './routes/index.js';
+${authImport}import { registerRoutes } from './routes/index.js';
 ${servicesSetup}
 const app = createKozo({ port: 3000, services });
 ${authMiddleware}
@@ -1563,15 +1562,19 @@ export const tasks: z.infer<typeof TaskSchema>[] = [
   { id: '3', title: 'Deploy', completed: false, priority: 'low', createdAt: new Date().toISOString() },
 ];
 `);
+  const authRoutesImport = auth ? `import { registerAuthRoutes } from './auth';
+` : "";
+  const authRoutesCall = auth ? `  registerAuthRoutes(app); // Public auth endpoint must register before JWT middleware
+` : "";
   await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "routes", "index.ts"), `import type { Kozo } from '@kozojs/core';
 import { registerHealthRoutes } from './health';
 import { registerUserRoutes } from './users';
 import { registerPostRoutes } from './posts';
 import { registerTaskRoutes } from './tasks';
 import { registerToolRoutes } from './tools';
-
+${authRoutesImport}
 export function registerRoutes(app: Kozo) {
-  registerHealthRoutes(app);
+${authRoutesCall}  registerHealthRoutes(app);
   registerUserRoutes(app);
   registerPostRoutes(app);
   registerTaskRoutes(app);
@@ -1836,6 +1839,35 @@ export function registerToolRoutes(app: Kozo) {
   }));
 }
 `);
+  if (auth) {
+    await import_fs_extra.default.writeFile(import_node_path.default.join(apiDir, "src", "routes", "auth.ts"), `import type { Kozo } from '@kozojs/core';
+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 function registerAuthRoutes(app: Kozo) {
+  app.post('/api/auth/login', {
+    body: z.object({ email: z.string().email(), password: z.string() }),
+  }, async (c) => {
+    const { email, password } = c.body;
+    const user = DEMO_USERS.find(u => u.email === email && u.password === 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 } };
+  });
+}
+`);
+  }
 }
 async function scaffoldFullstackWeb(projectDir, projectName, frontend, auth = false) {
   const webDir = import_node_path.default.join(projectDir, "apps", "web");
@@ -1891,11 +1923,6 @@ export default defineConfig({
     port: 5173,
     proxy: {
       '/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 },
     },
   },
 });
@@ -1976,6 +2003,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   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());
   }
@@ -1984,16 +2012,18 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 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';
-import { useQueryClient } from '@tanstack/react-query';
-import { LayoutDashboard, Users, FileText, Server, LogOut } from 'lucide-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';
+type Page = 'dashboard' | 'users' | 'posts' | 'tasks';
 
 export default function App() {
   const [page, setPage] = useState<Page>('dashboard');
@@ -2010,12 +2040,12 @@ ${auth ? `  const [token, setToken] = useState<string | null>(() => getToken());
   };
 
   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 },
+    { id: 'tasks' as Page, label: 'Tasks', icon: CheckSquare },
   ];
 
   return (
@@ -2055,6 +2085,7 @@ ${auth ? `        <button
         {page === 'dashboard' && <Dashboard />}
         {page === 'users' && <UsersPage />}
         {page === 'posts' && <PostsPage />}
+        {page === 'tasks' && <TasksPage />}
       </main>
     </div>
   );
@@ -2071,8 +2102,8 @@ interface Props {
 }
 
 export default function Login({ onLogin }: Props) {
-  const [email, setEmail] = useState('admin@kozo.app');
-  const [password, setPassword] = useState('password123');
+  const [email, setEmail] = useState('admin@demo.com');
+  const [password, setPassword] = useState('admin123');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
 
@@ -2081,7 +2112,7 @@ export default function Login({ onLogin }: Props) {
     setError('');
     setLoading(true);
     try {
-      const res = await apiFetch<{ token: string }>('/auth/login', {
+      const res = await apiFetch<{ token: string }>('/api/auth/login', {
         method: 'POST',
         body: JSON.stringify({ email, password }),
       });
@@ -2149,15 +2180,15 @@ export default function Login({ onLogin }: Props) {
 function generateDashboardPage() {
   return `import { useQuery } from '@tanstack/react-query';
 import { apiFetch } from '../lib/api';
-import { Users, FileText, Activity, Zap } from 'lucide-react';
+import { Users, FileText, CheckSquare, Zap } from 'lucide-react';
 
+interface Health { status: string; uptime: number; version: string; }
 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;
+  users: number;
+  posts: number;
+  tasks: number;
+  publishedPosts: number;
+  completedTasks: number;
 }
 
 function StatCard({ label, value, sub, icon: Icon, color }: {
@@ -2183,15 +2214,15 @@ function StatCard({ label, value, sub, icon: Icon, color }: {
 export default function Dashboard() {
   const { data: health } = useQuery({
     queryKey: ['health'],
-    queryFn: () => apiFetch<{ status: string; uptime: number; version: string }>('/health').then(r => r.data),
+    queryFn: () => apiFetch<Health>('/api/health').then(r => r.data),
   });
 
   const { data: stats, isLoading } = useQuery({
     queryKey: ['stats'],
-    queryFn: () => apiFetch<Stats>('/stats').then(r => r.data),
+    queryFn: () => apiFetch<Stats>('/api/stats').then(r => r.data),
   });
 
-  const uptime = health?.uptime ?? stats?.performance?.uptime;
+  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\`
@@ -2211,24 +2242,24 @@ export default function Dashboard() {
         <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}
+            value={stats?.users ?? '\u2014'}
             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}
+            value={stats?.posts ?? '\u2014'}
+            sub={stats ? \`\${stats.publishedPosts} published\` : undefined}
             icon={FileText} color="bg-purple-600"
           />
           <StatCard
-            label="Uptime"
-            value={uptimeStr}
-            icon={Activity} color="bg-emerald-600"
+            label="Tasks"
+            value={stats?.tasks ?? '\u2014'}
+            sub={stats ? \`\${stats.completedTasks} completed\` : undefined}
+            icon={CheckSquare} color="bg-emerald-600"
           />
           <StatCard
-            label="API Status"
-            value={health?.status === 'ok' ? '\u2713 Online' : '? Unknown'}
+            label="Uptime"
+            value={uptimeStr}
             sub={health?.version ? \`v\${health.version}\` : undefined}
             icon={Zap} color="bg-amber-600"
           />
@@ -2236,10 +2267,10 @@ export default function Dashboard() {
       )}
 
       <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>
+        <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 /health
+            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'
@@ -2276,7 +2307,7 @@ export default function UsersPage() {
   const { data: users = [], isLoading } = useQuery({
     queryKey: ['users'],
     queryFn: async () => {
-      const res = await apiFetch<User[] | { users: User[] }>('/users');
+      const res = await apiFetch<User[] | { users: User[] }>('/api/users');
       return Array.isArray(res.data) ? res.data : res.data.users ?? [];
     },
   });
@@ -2285,7 +2316,7 @@ export default function UsersPage() {
     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) });
+      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'] });
@@ -2295,7 +2326,7 @@ export default function UsersPage() {
 
   const deleteUser = async (id: string | number) => {
     setLoading(true);
-    await apiFetch(\`/users/\${id}\`, { method: 'DELETE' });
+    await apiFetch(\`/api/users/\${id}\`, { method: 'DELETE' });
     queryClient.invalidateQueries({ queryKey: ['users'] });
     setLoading(false);
   };
@@ -2410,7 +2441,7 @@ export default function PostsPage() {
   const { data: posts = [], isLoading } = useQuery({
     queryKey: ['posts'],
     queryFn: async () => {
-      const res = await apiFetch<Post[] | { posts: Post[] }>('/posts');
+      const res = await apiFetch<Post[] | { posts: Post[] }>('/api/posts');
       return Array.isArray(res.data) ? res.data : res.data.posts ?? [];
     },
   });
@@ -2419,7 +2450,7 @@ export default function PostsPage() {
     if (!form.title) { setError('Title required'); return; }
     setLoading(true); setError('');
     try {
-      const res = await apiFetch('/posts', { method: 'POST', body: JSON.stringify(form) });
+      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'] });
@@ -2429,7 +2460,7 @@ export default function PostsPage() {
 
   const deletePost = async (id: string | number) => {
     setLoading(true);
-    await apiFetch(\`/posts/\${id}\`, { method: 'DELETE' });
+    await apiFetch(\`/api/posts/\${id}\`, { method: 'DELETE' });
     queryClient.invalidateQueries({ queryKey: ['posts'] });
     setLoading(false);
   };
@@ -2524,6 +2555,151 @@ export default function PostsPage() {
 }
 `;
 }
+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;
+}
+
+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 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 ?? [];
+    },
+  });
+
+  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); }
+  };
+
+  const toggleTask = async (id: string | number) => {
+    await apiFetch(\`/api/tasks/\${id}/toggle\`, { method: 'PATCH' });
+    queryClient.invalidateQueries({ queryKey: ['tasks'] });
+  };
+
+  const deleteTask = async (id: string | number) => {
+    setLoading(true);
+    await apiFetch(\`/api/tasks/\${id}\`, { method: 'DELETE' });
+    queryClient.invalidateQueries({ queryKey: ['tasks'] });
+    setLoading(false);
+  };
+
+  const done = tasks.filter(t => t.completed).length;
+
+  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>
+
+      {/* 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>
+
+      {/* 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}
 

package/package.json

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