@myvillage/cli 1.7.1 → 1.8.0

package/src/utils/agentic-templates.js

@@ -1,5 +1,6 @@
 import { mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
+import crypto from 'crypto';
 
 // MyVillage brand colors
 const BRAND = {
@@ -27,7 +28,7 @@ const TOOL_GROUPS = {
   meetings: ['recall_send_bot', 'recall_meeting_attendance'],
 };
 
-// ─── Agentic App Template ───────────────────────────────────────────────────
+// ─── Agentic App Template (Next.js) ─────────────────────────────────────────
 
 export function createAgenticAppProject(targetDir, options) {
   const {
@@ -53,100 +54,113 @@ export function createAgenticAppProject(targetDir, options) {
   const dirs = [
     '',
     'public',
-    'server',
-    'server/agent',
-    'src',
-    'src/components',
-    'src/pages',
+    'app',
+    'lib',
+    'components',
   ];
 
-  if (includeMcp) {
-    dirs.push('server/mcp');
-  }
-  if (hasOAuth || hasEmailPassword) {
-    dirs.push('src/auth');
-    dirs.push('server/auth');
+  if (hasOAuth) {
+    dirs.push(
+      'app/login',
+      'app/api/auth/login',
+      'app/api/auth/callback',
+      'app/api/auth/session',
+      'app/api/auth/logout',
+    );
   }
+
+  dirs.push('app/api/agent/chat');
+
   if (includeRestApi) {
-    dirs.push('server/api');
+    dirs.push('app/api/proxy/[...path]');
   }
 
+  if (hasDashboard) dirs.push('app/dashboard');
+  if (hasSettings) dirs.push('app/settings');
+  if (hasUsers) dirs.push('app/users');
+  if (hasNotifications) dirs.push('app/notifications');
+
   for (const dir of dirs) {
     mkdirSync(join(targetDir, dir), { recursive: true });
   }
 
   // Write root files
   writeFileSync(join(targetDir, 'package.json'), generatePackageJson(slug, description, includeMcp));
-  writeFileSync(join(targetDir, 'vite.config.js'), generateViteConfig());
+  writeFileSync(join(targetDir, 'next.config.js'), generateNextConfig());
   writeFileSync(join(targetDir, '.gitignore'), generateGitignore());
-  writeFileSync(join(targetDir, '.env'), generateEnv(oauthCredentials, hasOAuth, includeMcp));
+  writeFileSync(join(targetDir, '.env.local'), generateEnv(oauthCredentials, hasOAuth, includeMcp));
   writeFileSync(join(targetDir, '.env.example'), generateEnvExample(hasOAuth, includeMcp));
-  writeFileSync(join(targetDir, 'index.html'), generateIndexHtml(name));
   writeFileSync(join(targetDir, 'README.md'), generateReadme(name, description, hasOAuth, includeMcp, includeRestApi, features));
+  writeFileSync(join(targetDir, 'jsconfig.json'), generateJsConfig());
 
-  // Backend: Express server with agent + integrations
-  writeFileSync(join(targetDir, 'server/index.js'), generateEntrypoint(name, hasOAuth, hasEmailPassword, includeMcp, includeRestApi));
-  writeFileSync(join(targetDir, 'server/agent/index.js'), generateAgent(includeMcp));
+  // Lib: server-side modules
+  writeFileSync(join(targetDir, 'lib/agent.js'), generateAgent(includeMcp));
 
   if (includeMcp) {
-    writeFileSync(join(targetDir, 'server/mcp/client.js'), generateMcpClient(mcpToolGroups));
+    writeFileSync(join(targetDir, 'lib/mcp-client.js'), generateMcpClient(mcpToolGroups));
   }
   if (hasOAuth) {
-    writeFileSync(join(targetDir, 'server/auth/oauth.js'), generateOAuthModule());
+    writeFileSync(join(targetDir, 'lib/oauth.js'), generateOAuthLib());
+    writeFileSync(join(targetDir, 'lib/session.js'), generateSessionLib());
+    writeFileSync(join(targetDir, 'middleware.js'), generateMiddleware());
   }
-  if (includeRestApi) {
-    writeFileSync(join(targetDir, 'server/api/routes.js'), generateApiRoutes(hasOAuth));
+
+  // API routes
+  writeFileSync(join(targetDir, 'app/api/agent/chat/route.js'), generateAgentChatRoute(hasOAuth));
+
+  if (hasOAuth) {
+    writeFileSync(join(targetDir, 'app/api/auth/login/route.js'), generateAuthLoginRoute());
+    writeFileSync(join(targetDir, 'app/api/auth/callback/route.js'), generateAuthCallbackRoute());
+    writeFileSync(join(targetDir, 'app/api/auth/session/route.js'), generateAuthSessionRoute());
+    writeFileSync(join(targetDir, 'app/api/auth/logout/route.js'), generateAuthLogoutRoute());
   }
 
-  // Frontend: React + Vite
-  writeFileSync(join(targetDir, 'src/main.jsx'), generateMainJsx());
-  writeFileSync(join(targetDir, 'src/App.jsx'), generateAppJsx(features, hasOAuth));
-  writeFileSync(join(targetDir, 'src/App.css'), generateAppCss());
-  writeFileSync(join(targetDir, 'src/index.css'), generateIndexCss());
+  if (includeRestApi) {
+    writeFileSync(join(targetDir, 'app/api/proxy/[...path]/route.js'), generateProxyCatchAll(hasOAuth));
+  }
 
-  // Components
-  writeFileSync(join(targetDir, 'src/components/Layout.jsx'), generateLayoutComponent());
-  writeFileSync(join(targetDir, 'src/components/Sidebar.jsx'), generateSidebarComponent(features));
-  writeFileSync(join(targetDir, 'src/components/Header.jsx'), generateHeaderComponent(hasOAuth));
-  writeFileSync(join(targetDir, 'src/components/AgentChat.jsx'), generateAgentChatComponent());
+  // App: layout, pages, styles
+  writeFileSync(join(targetDir, 'app/layout.jsx'), generateRootLayout(name, hasOAuth, features));
+  writeFileSync(join(targetDir, 'app/globals.css'), generateGlobalsCss());
+  writeFileSync(join(targetDir, 'app/page.jsx'), generateHomePage(hasDashboard));
+  writeFileSync(join(targetDir, 'app/not-found.jsx'), generateNotFoundPage());
 
   if (hasOAuth) {
-    writeFileSync(join(targetDir, 'src/components/ProtectedRoute.jsx'), generateProtectedRoute());
-    writeFileSync(join(targetDir, 'src/auth/oauth.js'), generateBrowserOAuthModule());
-    writeFileSync(join(targetDir, 'src/auth/AuthProvider.jsx'), generateAuthProvider());
-    writeFileSync(join(targetDir, 'src/pages/Login.jsx'), generateLoginPage());
-    writeFileSync(join(targetDir, 'src/pages/Callback.jsx'), generateCallbackPage());
+    writeFileSync(join(targetDir, 'app/login/page.jsx'), generateLoginPage());
   }
-
-  // Pages
   if (hasDashboard) {
-    writeFileSync(join(targetDir, 'src/pages/Dashboard.jsx'), generateDashboardPage(includeMcp));
+    writeFileSync(join(targetDir, 'app/dashboard/page.jsx'), generateDashboardPage(includeMcp));
   }
   if (hasSettings) {
-    writeFileSync(join(targetDir, 'src/pages/Settings.jsx'), generateSettingsPage());
+    writeFileSync(join(targetDir, 'app/settings/page.jsx'), generateSettingsPage());
   }
   if (hasUsers) {
-    writeFileSync(join(targetDir, 'src/pages/Users.jsx'), generateUsersPage());
+    writeFileSync(join(targetDir, 'app/users/page.jsx'), generateUsersPage());
   }
   if (hasNotifications) {
-    writeFileSync(join(targetDir, 'src/pages/Notifications.jsx'), generateNotificationsPage());
+    writeFileSync(join(targetDir, 'app/notifications/page.jsx'), generateNotificationsPage());
   }
 
-  writeFileSync(join(targetDir, 'src/pages/NotFound.jsx'), generateNotFoundPage());
+  // Components
+  writeFileSync(join(targetDir, 'components/Sidebar.jsx'), generateSidebarComponent(features));
+  writeFileSync(join(targetDir, 'components/Header.jsx'), generateHeaderComponent(hasOAuth));
+  writeFileSync(join(targetDir, 'components/AgentChat.jsx'), generateAgentChatComponent());
+
+  if (hasOAuth) {
+    writeFileSync(join(targetDir, 'components/SignOutButton.jsx'), generateSignOutButton());
+  }
 }
 
-// ─── Generator Functions ────────────────────────────────────────────────────
+// ─── Root Config Generators ─────────────────────────────────────────────────
 
 function generatePackageJson(slug, description, includeMcp) {
   const deps = {
-    'react': '^18.3.0',
-    'react-dom': '^18.3.0',
-    'react-router-dom': '^6.22.0',
+    'next': '^15.0.0',
+    'react': '^19.0.0',
+    'react-dom': '^19.0.0',
+    'iron-session': '^8.0.0',
     'ai': '^4.0.0',
     '@ai-sdk/anthropic': '^1.0.0',
-    'express': '^4.21.0',
-    'cors': '^2.8.5',
-    'dotenv': '^16.4.0',
   };
 
   if (includeMcp) {
@@ -157,33 +171,46 @@ function generatePackageJson(slug, description, includeMcp) {
     name: slug,
     version: '0.1.0',
     description: description || 'MyVillageOS application',
-    type: 'module',
     private: true,
     scripts: {
-      dev: 'concurrently "vite" "node --watch server/index.js"',
-      'dev:client': 'vite',
-      'dev:server': 'node --watch server/index.js',
-      build: 'vite build',
-      start: 'node server/index.js',
-      preview: 'vite preview',
+      dev: 'next dev',
+      build: 'next build',
+      start: 'next start',
     },
     dependencies: deps,
-    devDependencies: {
-      'vite': '^5.0.0',
-      '@vitejs/plugin-react': '^4.2.0',
-      'concurrently': '^8.2.0',
-    },
   };
 
   return JSON.stringify(pkg, null, 2) + '\n';
 }
 
+function generateNextConfig() {
+  return `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;
+`;
+}
+
+function generateJsConfig() {
+  return `{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
+`;
+}
+
 function generateGitignore() {
   return `node_modules/
-dist/
+.next/
+out/
 .DS_Store
 *.log
-.env
+.env.local
 `;
 }
 
@@ -193,14 +220,11 @@ function generateEnv(oauthCredentials, hasOAuth, includeMcp) {
   if (hasOAuth) {
     const clientId = oauthCredentials?.clientId || '';
     const clientSecret = oauthCredentials?.clientSecret || '';
-    // Server-side OAuth credentials
     lines.push(`MYVILLAGEOS_CLIENT_ID=${clientId}`);
     lines.push(`MYVILLAGEOS_CLIENT_SECRET=${clientSecret}`);
-    // Browser-side OAuth credentials (Vite exposes VITE_ prefixed vars)
-    lines.push(`VITE_OAUTH_CLIENT_ID=${clientId}`);
-    lines.push(`VITE_OAUTH_CLIENT_SECRET=${clientSecret}`);
-    lines.push(`VITE_OAUTH_BASE_URL=${OAUTH_BASE_URL}`);
-    lines.push('VITE_OAUTH_REDIRECT_URI=http://localhost:5173/callback');
+    lines.push(`OAUTH_REDIRECT_URI=http://localhost:3000/api/auth/callback`);
+    // Generate a random session secret
+    lines.push(`SESSION_SECRET=${crypto.randomBytes(32).toString('hex')}`);
   }
 
   lines.push('MYVILLAGEOS_API_URL=https://portal.myvillageproject.ai');
@@ -210,7 +234,6 @@ function generateEnv(oauthCredentials, hasOAuth, includeMcp) {
   }
 
   lines.push('ANTHROPIC_API_KEY=');
-  lines.push('PORT=3000');
 
   return lines.join('\n') + '\n';
 }
@@ -221,10 +244,8 @@ function generateEnvExample(hasOAuth, includeMcp) {
   if (hasOAuth) {
     lines.push('MYVILLAGEOS_CLIENT_ID=');
     lines.push('MYVILLAGEOS_CLIENT_SECRET=');
-    lines.push(`VITE_OAUTH_CLIENT_ID=`);
-    lines.push(`VITE_OAUTH_CLIENT_SECRET=`);
-    lines.push(`VITE_OAUTH_BASE_URL=${OAUTH_BASE_URL}`);
-    lines.push('VITE_OAUTH_REDIRECT_URI=http://localhost:5173/callback');
+    lines.push('OAUTH_REDIRECT_URI=http://localhost:3000/api/auth/callback');
+    lines.push('SESSION_SECRET=');
   }
 
   lines.push('MYVILLAGEOS_API_URL=https://portal.myvillageproject.ai');
@@ -234,7 +255,6 @@ function generateEnvExample(hasOAuth, includeMcp) {
   }
 
   lines.push('ANTHROPIC_API_KEY=');
-  lines.push('PORT=3000');
 
   return lines.join('\n') + '\n';
 }
@@ -255,15 +275,15 @@ npm install
 2. Copy the environment file and fill in your credentials:
 
 \`\`\`bash
-cp .env.example .env
+cp .env.example .env.local
 \`\`\`
 
-3. Set your \`ANTHROPIC_API_KEY\` in \`.env\`.
+3. Set your \`ANTHROPIC_API_KEY\` in \`.env.local\`.
 `;
 
   if (hasOAuth) {
     readme += `
-4. Register an OAuth client at [portal.myvillageproject.ai](https://portal.myvillageproject.ai) and add your \`MYVILLAGEOS_CLIENT_ID\` and \`MYVILLAGEOS_CLIENT_SECRET\` to \`.env\`.
+4. Your OAuth credentials (\`MYVILLAGEOS_CLIENT_ID\` and \`MYVILLAGEOS_CLIENT_SECRET\`) should already be in \`.env.local\` if you created this project with the CLI. Otherwise, register an OAuth client at [portal.myvillageproject.ai](https://portal.myvillageproject.ai).
 `;
   }
 
@@ -271,50 +291,34 @@ cp .env.example .env
 ## Running
 
 \`\`\`bash
-# Development (React frontend + Express backend concurrently)
-npm run dev
-
-# Or run separately:
-npm run dev:client    # React frontend on http://localhost:5173
-npm run dev:server    # Express backend on http://localhost:3000
-
-# Production
-npm run build         # Build React frontend
-npm start             # Start Express server (serves built frontend)
+npm run dev       # Development server on http://localhost:3000
+npm run build     # Production build
+npm start         # Start production server
 \`\`\`
 
 ## Architecture
 
-### Frontend (React + Vite)
-- **src/App.jsx** - Root component with routing
-- **src/components/** - Layout, Sidebar, Header, AgentChat
-- **src/pages/** - Dashboard, Settings, etc.
-${hasOAuth ? '- **src/auth/** - Browser-side OAuth PKCE flow\n' : ''}
-### Backend (Express)
-- **server/index.js** - Express server with agent endpoint
-- **server/agent/index.js** - AI agent powered by Vercel AI SDK + Anthropic
-`;
-
-  if (includeMcp) {
-    readme += `- **server/mcp/client.js** - MCP client for MyVillageOS tools
-`;
-  }
-
-  if (hasOAuth) {
-    readme += `- **server/auth/oauth.js** - Server-side OAuth 2.0 + PKCE helpers
-`;
-  }
-
-  if (includeRestApi) {
-    readme += `- **server/api/routes.js** - REST API proxy routes for platform integration
-`;
-  }
+This is a **Next.js App Router** application with server-side OAuth and an AI agent backend.
+
+### App Routes
+- **app/layout.jsx** — Root layout with sidebar and header
+- **app/page.jsx** — Home page
+${hasOAuth ? '- **app/login/page.jsx** — Login page\n' : ''}${features.includes('dashboard') ? '- **app/dashboard/page.jsx** — Dashboard with AI agent chat\n' : ''}${features.includes('settings') ? '- **app/settings/page.jsx** — Settings\n' : ''}${features.includes('users') ? '- **app/users/page.jsx** — Users\n' : ''}${features.includes('notifications') ? '- **app/notifications/page.jsx** — Notifications\n' : ''}
+### API Routes
+- **app/api/agent/chat/** — AI agent endpoint (Vercel AI SDK + Anthropic)
+${hasOAuth ? '- **app/api/auth/** — OAuth login, callback, session, logout\n' : ''}${includeRestApi ? '- **app/api/proxy/** — Authenticated proxy to MyVillageOS platform API\n' : ''}
+### Server Libraries
+- **lib/agent.js** — AI agent powered by Vercel AI SDK + Anthropic
+${includeMcp ? '- **lib/mcp-client.js** — MCP client for MyVillageOS tools\n' : ''}${hasOAuth ? '- **lib/oauth.js** — Server-side OAuth 2.0 + PKCE helpers\n- **lib/session.js** — Encrypted session management (iron-session)\n' : ''}
+### Components
+- **components/Sidebar.jsx** — Navigation sidebar
+- **components/Header.jsx** — Top header with user info
+- **components/AgentChat.jsx** — Interactive AI agent chat widget
 
-  readme += `
 ## Brand Colors
 
 | Color      | Hex       |
-|------------|-----------|
+|------------|-----------||
 | Gold       | ${BRAND.gold} |
 | Brown      | ${BRAND.brown} |
 | Green      | ${BRAND.green} |
@@ -330,133 +334,350 @@ Built with [MyVillageOS](https://myvillageproject.ai)
   return readme;
 }
 
-function generateEntrypoint(name, hasOAuth, hasEmailPassword, includeMcp, includeRestApi) {
-  let imports = `import 'dotenv/config';
-import express from 'express';
-import cors from 'cors';
-import { runAgent } from './agent/index.js';
-`;
+// ─── Auth & Session Generators ──────────────────────────────────────────────
 
-  if (includeRestApi) {
-    imports += `import { createApiRouter } from './api/routes.js';
+function generateSessionLib() {
+  return `import { getIronSession } from 'iron-session';
+import { cookies } from 'next/headers';
+
+const sessionOptions = {
+  password: process.env.SESSION_SECRET,
+  cookieName: 'myvillage_session',
+  cookieOptions: {
+    secure: process.env.NODE_ENV === 'production',
+    httpOnly: true,
+    sameSite: 'lax',
+    maxAge: 60 * 60 * 24 * 7, // 7 days
+  },
+};
+
+/**
+ * Get the session from cookies (for use in Server Components and API routes).
+ */
+export async function getSession() {
+  const cookieStore = await cookies();
+  return getIronSession(cookieStore, sessionOptions);
+}
+
+/**
+ * Get session options (for use in middleware or route handlers that need raw options).
+ */
+export function getSessionOptions() {
+  return sessionOptions;
+}
 `;
+}
+
+function generateOAuthLib() {
+  return `import crypto from 'crypto';
+
+const OAUTH_BASE_URL = process.env.MYVILLAGEOS_API_URL
+  ? \`\${process.env.MYVILLAGEOS_API_URL}/api/oauth\`
+  : '${OAUTH_BASE_URL}';
+
+const CLIENT_ID = process.env.MYVILLAGEOS_CLIENT_ID;
+const CLIENT_SECRET = process.env.MYVILLAGEOS_CLIENT_SECRET;
+const REDIRECT_URI = process.env.OAUTH_REDIRECT_URI || 'http://localhost:3000/api/auth/callback';
+const SCOPES = '${OAUTH_SCOPES}';
+
+/**
+ * Generate a cryptographically random PKCE code verifier.
+ */
+export function generateCodeVerifier() {
+  return crypto.randomBytes(64).toString('base64url');
+}
+
+/**
+ * Generate the S256 code challenge from a verifier.
+ */
+export function generateCodeChallenge(verifier) {
+  return crypto.createHash('sha256').update(verifier).digest('base64url');
+}
+
+/**
+ * Build the authorization URL for initiating the OAuth login flow.
+ * Returns the URL and the code verifier (which must be stored for the callback).
+ */
+export function buildAuthorizationUrl() {
+  const codeVerifier = generateCodeVerifier();
+  const codeChallenge = generateCodeChallenge(codeVerifier);
+  const state = crypto.randomBytes(16).toString('hex');
+
+  const params = new URLSearchParams({
+    response_type: 'code',
+    client_id: CLIENT_ID,
+    redirect_uri: REDIRECT_URI,
+    scope: SCOPES,
+    state,
+    code_challenge: codeChallenge,
+    code_challenge_method: 'S256',
+  });
+
+  const url = \`\${OAUTH_BASE_URL}/authorize?\${params.toString()}\`;
+  return { url, codeVerifier, state };
+}
+
+/**
+ * Exchange an authorization code for tokens (server-side).
+ */
+export async function exchangeCodeForTokens(code, codeVerifier) {
+  const body = new URLSearchParams({
+    grant_type: 'authorization_code',
+    code,
+    redirect_uri: REDIRECT_URI,
+    client_id: CLIENT_ID,
+    client_secret: CLIENT_SECRET,
+    code_verifier: codeVerifier,
+  });
+
+  const response = await fetch(\`\${OAUTH_BASE_URL}/token\`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  });
+
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(\`Token exchange failed: \${response.status} \${error}\`);
   }
 
-  if (hasOAuth) {
-    imports += `import { initiateOAuthLogin, handleOAuthCallback, getStoredTokens } from './auth/oauth.js';
-`;
+  return response.json();
+}
+
+/**
+ * Fetch the authenticated user's profile from the userinfo endpoint.
+ */
+export async function fetchUserInfo(accessToken) {
+  const response = await fetch(\`\${OAUTH_BASE_URL}/userinfo\`, {
+    headers: { Authorization: \`Bearer \${accessToken}\` },
+  });
+
+  if (!response.ok) {
+    throw new Error(\`Userinfo request failed: \${response.status}\`);
   }
 
-  let body = `
-const app = express();
-const PORT = process.env.PORT || 3000;
+  return response.json();
+}
 
-app.use(express.json());
-app.use(cors());
+/**
+ * Refresh an access token using a refresh token.
+ */
+export async function refreshAccessToken(refreshToken) {
+  const body = new URLSearchParams({
+    grant_type: 'refresh_token',
+    refresh_token: refreshToken,
+    client_id: CLIENT_ID,
+    client_secret: CLIENT_SECRET,
+  });
 
-// Health check
-app.get('/health', (req, res) => {
-  res.json({ status: 'ok', name: '${name}', timestamp: new Date().toISOString() });
-});
-`;
+  const response = await fetch(\`\${OAUTH_BASE_URL}/token\`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  });
 
-  if (hasOAuth) {
-    body += `
-// OAuth login flow
-app.get('/auth/login', (req, res) => {
-  const { url, codeVerifier } = initiateOAuthLogin();
-  // Store codeVerifier in session or a temporary store for the callback
-  app.locals.pendingAuth = { codeVerifier };
-  res.redirect(url);
-});
-
-app.get('/auth/callback', async (req, res) => {
-  try {
-    const { code } = req.query;
-    const { codeVerifier } = app.locals.pendingAuth || {};
-    if (!code || !codeVerifier) {
-      return res.status(400).json({ error: 'Missing code or code verifier' });
-    }
-    const tokens = await handleOAuthCallback(code, codeVerifier);
-    app.locals.tokens = tokens;
-    delete app.locals.pendingAuth;
-    res.json({ message: 'Authenticated successfully' });
-  } catch (err) {
-    console.error('[Auth] OAuth callback error:', err.message);
-    res.status(500).json({ error: 'Authentication failed' });
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(\`Token refresh failed: \${response.status} \${error}\`);
   }
-});
+
+  return response.json();
+}
 `;
+}
+
+function generateMiddleware() {
+  return `import { NextResponse } from 'next/server';
+
+// Routes that don't require authentication
+const publicPaths = ['/login', '/api/auth/login', '/api/auth/callback', '/_next', '/favicon.ico'];
+
+export function middleware(request) {
+  const { pathname } = request.nextUrl;
+
+  // Allow public paths
+  if (publicPaths.some(path => pathname.startsWith(path))) {
+    return NextResponse.next();
   }
 
-  if (includeRestApi) {
-    if (hasOAuth) {
-      body += `
-// Mount API routes with token accessor
-app.use('/api', createApiRouter(() => app.locals.tokens));
-`;
-    } else {
-      body += `
-// Mount API routes
-app.use('/api', createApiRouter());
-`;
-    }
+  // Check for session cookie (actual validation happens in route handlers)
+  const sessionCookie = request.cookies.get('myvillage_session');
+  if (!sessionCookie) {
+    return NextResponse.redirect(new URL('/login', request.url));
   }
 
-  body += `
-// Agent endpoint - send a message to the AI agent
-app.post('/agent/chat', async (req, res) => {
-  try {
-    const { message } = req.body;
-    if (!message) {
-      return res.status(400).json({ error: 'Message is required' });
-    }
-`;
+  return NextResponse.next();
+}
 
-  if (hasOAuth) {
-    body += `    const tokens = app.locals.tokens || null;
-    const result = await runAgent(message, { tokens });
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
+};
 `;
-  } else {
-    body += `    const result = await runAgent(message);
+}
+
+// ─── Auth Route Generators ──────────────────────────────────────────────────
+
+function generateAuthLoginRoute() {
+  return `import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { buildAuthorizationUrl } from '@/lib/oauth';
+
+/**
+ * GET /api/auth/login
+ * Initiates the OAuth login flow. Generates PKCE verifier, stores it in a
+ * temporary cookie, and redirects to the MyVillageOS authorization page.
+ */
+export async function GET() {
+  const { url, codeVerifier, state } = buildAuthorizationUrl();
+
+  const cookieStore = await cookies();
+
+  // Store verifier and state in short-lived httpOnly cookies for the callback
+  cookieStore.set('oauth_verifier', codeVerifier, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    maxAge: 600, // 10 minutes
+    path: '/',
+  });
+
+  cookieStore.set('oauth_state', state, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    maxAge: 600,
+    path: '/',
+  });
+
+  return NextResponse.redirect(url);
+}
 `;
+}
+
+function generateAuthCallbackRoute() {
+  return `import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { exchangeCodeForTokens, fetchUserInfo } from '@/lib/oauth';
+import { getSession } from '@/lib/session';
+
+/**
+ * GET /api/auth/callback
+ * Handles the OAuth callback. Exchanges the authorization code for tokens
+ * server-side (no CORS issues), fetches user info, and stores everything
+ * in an encrypted session cookie.
+ */
+export async function GET(request) {
+  const { searchParams } = new URL(request.url);
+  const code = searchParams.get('code');
+  const state = searchParams.get('state');
+  const error = searchParams.get('error');
+
+  if (error) {
+    const errorDesc = searchParams.get('error_description') || 'Authorization failed';
+    console.error('[Auth Callback] OAuth error:', error, errorDesc);
+    return NextResponse.redirect(new URL(\`/login?error=\${encodeURIComponent(errorDesc)}\`, request.url));
   }
 
-  body += `    res.json({ response: result });
-  } catch (err) {
-    console.error('[Agent] Error:', err.message);
-    res.status(500).json({ error: 'Agent processing failed' });
+  if (!code) {
+    return NextResponse.redirect(new URL('/login?error=Missing+authorization+code', request.url));
   }
-});
 
-app.listen(PORT, () => {
-  console.log(\`[Server] ${name} running on http://localhost:\${PORT}\`);
-  console.log('[Server] POST /agent/chat - Send messages to the AI agent');
-`;
+  const cookieStore = await cookies();
+  const savedVerifier = cookieStore.get('oauth_verifier')?.value;
+  const savedState = cookieStore.get('oauth_state')?.value;
 
-  if (hasOAuth) {
-    body += `  console.log('[Server] GET  /auth/login - Start OAuth login flow');
-`;
+  if (!savedVerifier) {
+    return NextResponse.redirect(new URL('/login?error=Missing+code+verifier', request.url));
   }
 
-  if (includeRestApi) {
-    body += `  console.log('[Server] /api/* - Platform API proxy routes');
+  if (state && savedState && state !== savedState) {
+    return NextResponse.redirect(new URL('/login?error=State+mismatch', request.url));
+  }
+
+  try {
+    // Exchange code for tokens (server-to-server, no CORS)
+    const tokens = await exchangeCodeForTokens(code, savedVerifier);
+
+    // Fetch user profile
+    const user = await fetchUserInfo(tokens.access_token);
+
+    // Store in encrypted session
+    const session = await getSession();
+    session.accessToken = tokens.access_token;
+    session.refreshToken = tokens.refresh_token;
+    session.expiresAt = Date.now() + (tokens.expires_in * 1000);
+    session.user = {
+      id: user.sub || user.id,
+      name: user.name,
+      email: user.email,
+      villagerId: user.villager_id,
+    };
+    await session.save();
+
+    // Clean up temporary cookies
+    cookieStore.delete('oauth_verifier');
+    cookieStore.delete('oauth_state');
+
+    console.log('[Auth Callback] Login successful for', user.name || user.email);
+
+    return NextResponse.redirect(new URL('/', request.url));
+  } catch (err) {
+    console.error('[Auth Callback] Error:', err.message);
+    return NextResponse.redirect(new URL(\`/login?error=\${encodeURIComponent(err.message)}\`, request.url));
+  }
+}
 `;
+}
+
+function generateAuthSessionRoute() {
+  return `import { NextResponse } from 'next/server';
+import { getSession } from '@/lib/session';
+
+/**
+ * GET /api/auth/session
+ * Returns the current session user info (for client components).
+ */
+export async function GET() {
+  const session = await getSession();
+
+  if (!session.user) {
+    return NextResponse.json({ authenticated: false }, { status: 401 });
   }
 
-  body += `});
+  return NextResponse.json({
+    authenticated: true,
+    user: session.user,
+  });
+}
 `;
+}
+
+function generateAuthLogoutRoute() {
+  return `import { NextResponse } from 'next/server';
+import { getSession } from '@/lib/session';
 
-  return imports + body;
+/**
+ * POST /api/auth/logout
+ * Destroys the session and redirects to the login page.
+ */
+export async function POST() {
+  const session = await getSession();
+  session.destroy();
+
+  return NextResponse.redirect(new URL('/login', process.env.NEXTAUTH_URL || 'http://localhost:3000'));
+}
+`;
 }
 
+// ─── Agent & MCP Generators ─────────────────────────────────────────────────
+
 function generateAgent(includeMcp) {
   let code = `import { generateText } from 'ai';
 import { anthropic } from '@ai-sdk/anthropic';
 `;
 
   if (includeMcp) {
-    code += `import { getMcpTools } from '../mcp/client.js';
+    code += `import { getMcpTools } from './mcp-client.js';
 `;
   }
 
@@ -515,20 +736,11 @@ to fulfill the user's request rather than just describing what could be done.\`;
 }
 
 function generateMcpClient(selectedGroups) {
-  // Build the list of allowed tool names from selected groups
-  const allowedTools = [];
-  for (const group of selectedGroups) {
-    if (TOOL_GROUPS[group]) {
-      allowedTools.push(...TOOL_GROUPS[group]);
-    }
-  }
-
   const code = `import { Client } from '@modelcontextprotocol/sdk/client/index.js';
 import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
 import { jsonSchema } from 'ai';
 
 // ─── MCP Tool Group Definitions ─────────────────────────────────────────────
-// Each group maps to a set of MyVillageOS MCP tool names.
 
 const TOOL_GROUPS = {
   social: ['post_create', 'post_view', 'post_list', 'post_edit', 'post_delete', 'comment_create', 'comment_list', 'vote_cast'],
@@ -551,7 +763,6 @@ let mcpClient = null;
 
 /**
  * Initialize the MCP client by spawning the MyVillageOS MCP server as a child process.
- * Uses stdio transport for local communication.
  */
 async function getClient() {
   if (mcpClient) return mcpClient;
@@ -576,8 +787,6 @@ async function getClient() {
 /**
  * Convert MCP tools to Vercel AI SDK tool format.
  * Filters tools based on the selected tool groups.
- *
- * @returns {object} Tools object compatible with Vercel AI SDK generateText/streamText
  */
 export async function getMcpTools() {
   const client = await getClient();
@@ -586,7 +795,6 @@ export async function getMcpTools() {
   const aiTools = {};
 
   for (const tool of mcpTools) {
-    // Filter to only the tools in selected groups (if groups were specified)
     if (ALLOWED_TOOLS.size > 0 && !ALLOWED_TOOLS.has(tool.name)) {
       continue;
     }
@@ -631,890 +839,339 @@ export async function disconnectMcp() {
   return code;
 }
 
-function generateOAuthModule() {
-  return `import crypto from 'crypto';
-
-// ─── OAuth 2.0 + PKCE Helpers ───────────────────────────────────────────────
-// Server-side OAuth flow for authenticating with MyVillageOS.
-
-const OAUTH_BASE_URL = process.env.MYVILLAGEOS_API_URL
-  ? \`\${process.env.MYVILLAGEOS_API_URL}/api/oauth\`
-  : '${OAUTH_BASE_URL}';
-
-const CLIENT_ID = process.env.MYVILLAGEOS_CLIENT_ID;
-const CLIENT_SECRET = process.env.MYVILLAGEOS_CLIENT_SECRET;
-const REDIRECT_URI = 'http://localhost:' + (process.env.PORT || '3000') + '/auth/callback';
-const SCOPES = '${OAUTH_SCOPES}';
+function generateAgentChatRoute(hasOAuth) {
+  let code = `import { NextResponse } from 'next/server';
+import { runAgent } from '@/lib/agent';
+`;
 
-// In-memory token store (replace with a database in production)
-let storedTokens = null;
+  if (hasOAuth) {
+    code += `import { getSession } from '@/lib/session';
+`;
+  }
 
+  code += `
 /**
- * Generate a cryptographically random code verifier for PKCE.
+ * POST /api/agent/chat
+ * Send a message to the AI agent and get a response.
  */
-function generateCodeVerifier() {
-  return crypto.randomBytes(64).toString('base64url');
-}
+export async function POST(request) {
+  try {
+    const { message } = await request.json();
+    if (!message) {
+      return NextResponse.json({ error: 'Message is required' }, { status: 400 });
+    }
 
-/**
- * Generate the code challenge from a code verifier (S256 method).
- */
-function generateCodeChallenge(verifier) {
-  return crypto.createHash('sha256').update(verifier).digest('base64url');
-}
+`;
 
-/**
- * Initiate the OAuth login flow. Returns the authorization URL and code verifier.
- * The caller should store the codeVerifier and redirect the user to the URL.
- */
-export function initiateOAuthLogin() {
-  const codeVerifier = generateCodeVerifier();
-  const codeChallenge = generateCodeChallenge(codeVerifier);
-  const state = crypto.randomBytes(16).toString('hex');
-
-  const params = new URLSearchParams({
-    response_type: 'code',
-    client_id: CLIENT_ID,
-    redirect_uri: REDIRECT_URI,
-    scope: SCOPES,
-    state,
-    code_challenge: codeChallenge,
-    code_challenge_method: 'S256',
-  });
-
-  const url = \`\${OAUTH_BASE_URL}/authorize?\${params.toString()}\`;
-  console.log('[OAuth] Login URL generated');
-
-  return { url, codeVerifier, state };
-}
-
-/**
- * Exchange an authorization code for tokens.
- */
-export async function handleOAuthCallback(code, codeVerifier) {
-  const body = new URLSearchParams({
-    grant_type: 'authorization_code',
-    code,
-    redirect_uri: REDIRECT_URI,
-    client_id: CLIENT_ID,
-    client_secret: CLIENT_SECRET,
-    code_verifier: codeVerifier,
-  });
-
-  const response = await fetch(\`\${OAUTH_BASE_URL}/token\`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: body.toString(),
-  });
-
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(\`Token exchange failed: \${response.status} \${error}\`);
-  }
-
-  const tokens = await response.json();
-  storedTokens = {
-    accessToken: tokens.access_token,
-    refreshToken: tokens.refresh_token,
-    expiresAt: Date.now() + (tokens.expires_in * 1000),
-    idToken: tokens.id_token,
-  };
-
-  console.log('[OAuth] Tokens obtained successfully');
-  return storedTokens;
-}
-
-/**
- * Refresh the access token using the stored refresh token.
- */
-export async function refreshAccessToken() {
-  if (!storedTokens?.refreshToken) {
-    throw new Error('No refresh token available');
-  }
-
-  const body = new URLSearchParams({
-    grant_type: 'refresh_token',
-    refresh_token: storedTokens.refreshToken,
-    client_id: CLIENT_ID,
-    client_secret: CLIENT_SECRET,
-  });
-
-  const response = await fetch(\`\${OAUTH_BASE_URL}/token\`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: body.toString(),
-  });
-
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(\`Token refresh failed: \${response.status} \${error}\`);
-  }
-
-  const tokens = await response.json();
-  storedTokens = {
-    accessToken: tokens.access_token,
-    refreshToken: tokens.refresh_token || storedTokens.refreshToken,
-    expiresAt: Date.now() + (tokens.expires_in * 1000),
-    idToken: tokens.id_token,
-  };
-
-  console.log('[OAuth] Tokens refreshed successfully');
-  return storedTokens;
-}
-
-/**
- * Get a valid access token, refreshing if needed.
- */
-export async function getValidAccessToken() {
-  if (!storedTokens) {
-    throw new Error('Not authenticated. Visit /auth/login to authenticate.');
+  if (hasOAuth) {
+    code += `    const session = await getSession();
+    const tokens = session.accessToken ? { accessToken: session.accessToken } : null;
+    const result = await runAgent(message, { tokens });
+`;
+  } else {
+    code += `    const result = await runAgent(message);
+`;
   }
 
-  // Refresh if token expires within 60 seconds
-  if (storedTokens.expiresAt - Date.now() < 60_000) {
-    await refreshAccessToken();
+  code += `    return NextResponse.json({ response: result });
+  } catch (err) {
+    console.error('[Agent] Error:', err.message);
+    return NextResponse.json({ error: 'Agent processing failed' }, { status: 500 });
   }
-
-  return storedTokens.accessToken;
-}
-
-/**
- * Get the currently stored tokens (may be null if not authenticated).
- */
-export function getStoredTokens() {
-  return storedTokens;
 }
 `;
-}
 
-function generateApiRoutes(hasOAuth) {
-  let code = `import { Router } from 'express';
-
-// ─── Platform API Routes ────────────────────────────────────────────────────
-// Express router with helpers for making authenticated API calls to MyVillageOS.
+  return code;
+}
 
-const API_BASE_URL = process.env.MYVILLAGEOS_API_URL || 'https://portal.myvillageproject.ai';
+// ─── API Proxy Generator ────────────────────────────────────────────────────
 
+function generateProxyCatchAll(hasOAuth) {
+  let code = `import { NextResponse } from 'next/server';
 `;
 
   if (hasOAuth) {
-    code += `/**
- * Create the API router.
- * @param {Function} getTokens - Function that returns the current OAuth tokens
- */
-export function createApiRouter(getTokens) {
-  const router = Router();
-
-  /**
-   * Make an authenticated request to the MyVillageOS platform API.
-   */
-  async function apiRequest(path, options = {}) {
-    const tokens = getTokens?.();
-    const headers = {
-      'Content-Type': 'application/json',
-      ...options.headers,
-    };
-
-    if (tokens?.accessToken) {
-      headers['Authorization'] = \`Bearer \${tokens.accessToken}\`;
-    }
-
-    const url = \`\${API_BASE_URL}\${path}\`;
-    console.log(\`[API] \${options.method || 'GET'} \${url}\`);
-
-    const response = await fetch(url, {
-      ...options,
-      headers,
-    });
+    code += `import { getSession } from '@/lib/session';
+`;
+  }
 
-    if (!response.ok) {
-      const error = await response.text();
-      throw new Error(\`API request failed: \${response.status} \${error}\`);
-    }
+  code += `
+const API_BASE_URL = process.env.MYVILLAGEOS_API_URL || 'https://portal.myvillageproject.ai';
 
-    return response.json();
-  }
-`;
-  } else {
-    code += `/**
- * Create the API router.
+/**
+ * Catch-all proxy to the MyVillageOS platform API.
+ * Forwards requests with authentication headers.
+ *
+ * Usage: /api/proxy/network/posts → GET https://portal.myvillageproject.ai/api/network/posts
  */
-export function createApiRouter() {
-  const router = Router();
-
-  /**
-   * Make a request to the MyVillageOS platform API.
-   */
-  async function apiRequest(path, options = {}) {
-    const headers = {
-      'Content-Type': 'application/json',
-      ...options.headers,
-    };
+async function proxyRequest(request, { params }) {
+  const { path } = await params;
+  const apiPath = '/api/' + path.join('/');
+  const url = new URL(apiPath, API_BASE_URL);
 
-    const url = \`\${API_BASE_URL}\${path}\`;
-    console.log(\`[API] \${options.method || 'GET'} \${url}\`);
+  // Forward query parameters
+  const { searchParams } = new URL(request.url);
+  searchParams.forEach((value, key) => url.searchParams.set(key, value));
 
-    const response = await fetch(url, {
-      ...options,
-      headers,
-    });
+  const headers = {
+    'Content-Type': 'application/json',
+  };
 
-    if (!response.ok) {
-      const error = await response.text();
-      throw new Error(\`API request failed: \${response.status} \${error}\`);
-    }
+`;
 
-    return response.json();
+  if (hasOAuth) {
+    code += `  const session = await getSession();
+  if (session.accessToken) {
+    headers['Authorization'] = \`Bearer \${session.accessToken}\`;
   }
 `;
   }
 
   code += `
-  // ─── Network / Social ──────────────────────────────────────────────────────
-
-  // List posts from the MAN network
-  router.get('/network/posts', async (req, res) => {
-    try {
-      const data = await apiRequest('/api/network/posts');
-      res.json(data);
-    } catch (err) {
-      console.error('[API] Error fetching posts:', err.message);
-      res.status(500).json({ error: err.message });
-    }
-  });
-
-  // Create a new post
-  router.post('/network/posts', async (req, res) => {
-    try {
-      const data = await apiRequest('/api/network/posts', {
-        method: 'POST',
-        body: JSON.stringify(req.body),
-      });
-      res.json(data);
-    } catch (err) {
-      console.error('[API] Error creating post:', err.message);
-      res.status(500).json({ error: err.message });
-    }
-  });
-
-  // ─── Communities ────────────────────────────────────────────────────────────
-
-  // List communities
-  router.get('/communities', async (req, res) => {
-    try {
-      const data = await apiRequest('/api/network/communities');
-      res.json(data);
-    } catch (err) {
-      console.error('[API] Error fetching communities:', err.message);
-      res.status(500).json({ error: err.message });
-    }
-  });
-
-  // ─── Villages ───────────────────────────────────────────────────────────────
+  const fetchOptions = {
+    method: request.method,
+    headers,
+  };
 
-  // List villages
-  router.get('/villages', async (req, res) => {
+  if (request.method !== 'GET' && request.method !== 'HEAD') {
     try {
-      const data = await apiRequest('/api/network/villages');
-      res.json(data);
-    } catch (err) {
-      console.error('[API] Error fetching villages:', err.message);
-      res.status(500).json({ error: err.message });
+      fetchOptions.body = await request.text();
+    } catch {
+      // No body
     }
-  });
+  }
 
-  // ─── Profile ────────────────────────────────────────────────────────────────
+  console.log(\`[Proxy] \${request.method} \${url}\`);
 
-  // Get current user profile
-  router.get('/profile', async (req, res) => {
-    try {
-      const data = await apiRequest('/api/oauth/userinfo');
-      res.json(data);
-    } catch (err) {
-      console.error('[API] Error fetching profile:', err.message);
-      res.status(500).json({ error: err.message });
-    }
-  });
+  try {
+    const response = await fetch(url.toString(), fetchOptions);
+    const data = await response.text();
 
-  return router;
+    return new NextResponse(data, {
+      status: response.status,
+      headers: { 'Content-Type': response.headers.get('Content-Type') || 'application/json' },
+    });
+  } catch (err) {
+    console.error('[Proxy] Error:', err.message);
+    return NextResponse.json({ error: err.message }, { status: 502 });
+  }
 }
+
+export const GET = proxyRequest;
+export const POST = proxyRequest;
+export const PUT = proxyRequest;
+export const DELETE = proxyRequest;
+export const PATCH = proxyRequest;
 `;
 
   return code;
 }
 
-// ─── Vite & HTML Generators ─────────────────────────────────────────────────
+// ─── App Layout & Page Generators ───────────────────────────────────────────
 
-function generateViteConfig() {
-  return `import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 5173,
-    open: true,
-    proxy: {
-      '/api': 'http://localhost:3000',
-      '/agent': 'http://localhost:3000',
-      '/auth': 'http://localhost:3000',
-      '/health': 'http://localhost:3000',
-    },
-  },
-  build: { outDir: 'dist' },
-});
-`;
-}
+function generateRootLayout(name, hasOAuth, features) {
+  let code = `import './globals.css';
+import Sidebar from '@/components/Sidebar';
+import Header from '@/components/Header';
 
-function generateIndexHtml(name) {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${name} - MyVillageOS</title>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
-</html>
-`;
-}
+export const metadata = {
+  title: '${name} - MyVillageOS',
+  description: 'A MyVillageOS agentic application',
+};
 
-// ─── Frontend Generators ────────────────────────────────────────────────────
-// NOTE: These functions return string literals that will be written to files.
-// Template expressions like ${} are JS interpolation, not output.
-// Backticks, $, and { that appear in output JSX are safe in regular strings.
-
-function generateMainJsx() {
-  return `import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import App from './App.jsx';
-import './index.css';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>
-);
-`;
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+      </body>
+    </html>
+  );
 }
 
-function generateAppJsx(features, hasOAuth) {
-  const hasDashboard = features.includes('dashboard');
-  const hasSettings = features.includes('settings');
-  const hasUsers = features.includes('users');
-  const hasNotifications = features.includes('notifications');
-
-  const imports = ["import { Routes, Route } from 'react-router-dom';"];
-  imports.push("import Layout from './components/Layout.jsx';");
-  imports.push("import NotFound from './pages/NotFound.jsx';");
-  imports.push("import './App.css';");
-
-  if (hasOAuth) {
-    imports.push("import { AuthProvider } from './auth/AuthProvider.jsx';");
-    imports.push("import ProtectedRoute from './components/ProtectedRoute.jsx';");
-    imports.push("import Login from './pages/Login.jsx';");
-    imports.push("import Callback from './pages/Callback.jsx';");
-  }
-  if (hasDashboard) imports.push("import Dashboard from './pages/Dashboard.jsx';");
-  if (hasSettings) imports.push("import Settings from './pages/Settings.jsx';");
-  if (hasUsers) imports.push("import Users from './pages/Users.jsx';");
-  if (hasNotifications) imports.push("import Notifications from './pages/Notifications.jsx';");
-
-  const routes = [];
-  const homeElement = hasDashboard ? '<Dashboard />' : '<div className="welcome"><h1>Welcome</h1><p>Select a page from the sidebar to get started.</p></div>';
-
-  if (hasOAuth) {
-    routes.push('          <Route path="/" element={<ProtectedRoute><Layout /></ProtectedRoute>}>');
-  } else {
-    routes.push('          <Route path="/" element={<Layout />}>');
-  }
-
-  routes.push('            <Route index element={' + homeElement + '} />');
-  if (hasDashboard) routes.push('            <Route path="dashboard" element={<Dashboard />} />');
-  if (hasSettings) routes.push('            <Route path="settings" element={<Settings />} />');
-  if (hasUsers) routes.push('            <Route path="users" element={<Users />} />');
-  if (hasNotifications) routes.push('            <Route path="notifications" element={<Notifications />} />');
-  routes.push('            <Route path="*" element={<NotFound />} />');
-  routes.push('          </Route>');
-
-  if (hasOAuth) {
-    routes.push('          <Route path="/login" element={<Login />} />');
-    routes.push('          <Route path="/callback" element={<Callback />} />');
-  }
-
-  let body;
-  if (hasOAuth) {
-    body = '    <AuthProvider>\n      <Routes>\n' + routes.join('\n') + '\n      </Routes>\n    </AuthProvider>';
-  } else {
-    body = '    <Routes>\n' + routes.join('\n') + '\n    </Routes>';
-  }
-
-  return imports.join('\n') + '\n\nexport default function App() {\n  return (\n' + body + '\n  );\n}\n';
-}
-
-function generateAppCss() {
-  return ':root {\n' +
-    '  --brand-gold: ' + BRAND.gold + ';\n' +
-    '  --brand-brown: ' + BRAND.brown + ';\n' +
-    '  --brand-green: ' + BRAND.green + ';\n' +
-    '  --brand-primary: ' + BRAND.primary + ';\n' +
-    '  --brand-secondary: ' + BRAND.secondary + ';\n' +
-    '  --brand-dark-brown: ' + BRAND.darkBrown + ';\n' +
-    '  --brand-deep-green: ' + BRAND.deepGreen + ';\n' +
-    '  --brand-teal: ' + BRAND.teal + ';\n' +
-    '  --sidebar-width: 240px;\n' +
-    '  --header-height: 56px;\n' +
-    '}\n' +
-    '\n' +
-    '.layout { display: flex; height: 100vh; }\n' +
-    '.layout-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }\n' +
-    '.layout-content { flex: 1; overflow-y: auto; padding: 24px; background: #f5f3ef; }\n' +
-    '\n' +
-    '.sidebar {\n' +
-    '  width: var(--sidebar-width);\n' +
-    '  background: var(--brand-dark-brown);\n' +
-    '  color: var(--brand-secondary);\n' +
-    '  display: flex;\n' +
-    '  flex-direction: column;\n' +
-    '}\n' +
-    '.sidebar-brand { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }\n' +
-    '.sidebar-brand h2 { color: var(--brand-gold); font-size: 18px; margin: 0; }\n' +
-    '.sidebar-nav { flex: 1; padding: 12px 0; list-style: none; }\n' +
-    '.sidebar-nav a {\n' +
-    '  display: block; padding: 10px 20px; color: var(--brand-secondary);\n' +
-    '  text-decoration: none; font-size: 14px; transition: background 0.2s;\n' +
-    '}\n' +
-    '.sidebar-nav a:hover, .sidebar-nav a.active {\n' +
-    '  background: rgba(255,215,0,0.1); color: var(--brand-gold);\n' +
-    '}\n' +
-    '\n' +
-    '.header {\n' +
-    '  height: var(--header-height); background: white; border-bottom: 1px solid #e0ddd7;\n' +
-    '  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;\n' +
-    '}\n' +
-    '.header-title { font-size: 16px; font-weight: 600; color: var(--brand-dark-brown); }\n' +
-    '.header-user { display: flex; align-items: center; gap: 12px; }\n' +
-    '.header-user button {\n' +
-    '  padding: 6px 14px; background: var(--brand-primary); color: white;\n' +
-    '  border: none; border-radius: 6px; font-size: 13px; cursor: pointer;\n' +
-    '}\n' +
-    '\n' +
-    '.login-page {\n' +
-    '  display: flex; justify-content: center; align-items: center; height: 100vh;\n' +
-    '  background: var(--brand-secondary);\n' +
-    '}\n' +
-    '.login-card {\n' +
-    '  text-align: center; padding: 48px; background: white;\n' +
-    '  border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n' +
-    '}\n' +
-    '.login-btn {\n' +
-    '  margin-top: 20px; padding: 12px 32px; background: var(--brand-primary);\n' +
-    '  color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer;\n' +
-    '}\n' +
-    '.login-btn:hover { background: var(--brand-gold); color: var(--brand-dark-brown); }\n' +
-    '\n' +
-    '.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }\n' +
-    '.stat-card {\n' +
-    '  background: white; border-radius: 8px; padding: 20px;\n' +
-    '  box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n' +
-    '}\n' +
-    '.stat-card h3 { font-size: 13px; color: var(--brand-teal); margin-bottom: 8px; }\n' +
-    '.stat-card .value { font-size: 28px; font-weight: 700; color: var(--brand-dark-brown); }\n' +
-    '\n' +
-    '.agent-chat {\n' +
-    '  background: white; border-radius: 8px; padding: 20px;\n' +
-    '  box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-top: 24px;\n' +
-    '}\n' +
-    '.agent-chat h3 { margin-bottom: 12px; color: var(--brand-dark-brown); }\n' +
-    '.agent-chat-messages {\n' +
-    '  max-height: 300px; overflow-y: auto; margin-bottom: 12px;\n' +
-    '  border: 1px solid #e0ddd7; border-radius: 6px; padding: 12px;\n' +
-    '}\n' +
-    '.agent-chat-input { display: flex; gap: 8px; }\n' +
-    '.agent-chat-input input {\n' +
-    '  flex: 1; padding: 10px 14px; border: 1px solid #e0ddd7;\n' +
-    '  border-radius: 6px; font-size: 14px;\n' +
-    '}\n' +
-    '.agent-chat-input button {\n' +
-    '  padding: 10px 20px; background: var(--brand-primary); color: white;\n' +
-    '  border: none; border-radius: 6px; font-size: 14px; cursor: pointer;\n' +
-    '}\n' +
-    '.message { margin-bottom: 8px; }\n' +
-    '.message.user { color: var(--brand-primary); }\n' +
-    '.message.agent { color: var(--brand-deep-green); }\n' +
-    '\n' +
-    '.page-header { margin-bottom: 24px; }\n' +
-    '.page-header h1 { font-size: 24px; color: var(--brand-dark-brown); }\n' +
-    '.page-header p { color: var(--brand-teal); margin-top: 4px; }\n';
-}
-
-function generateIndexCss() {
-  return '*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n' +
-    'html, body {\n' +
-    '  height: 100%;\n' +
-    "  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n" +
-    '  background: ' + BRAND.secondary + ';\n' +
-    '  color: ' + BRAND.darkBrown + ';\n' +
-    '  line-height: 1.6;\n' +
-    '}\n' +
-    '#root { height: 100%; }\n' +
-    'a { color: ' + BRAND.primary + '; text-decoration: none; }\n' +
-    'a:hover { text-decoration: underline; }\n' +
-    'button { cursor: pointer; font-family: inherit; }\n';
-}
-
-// ─── React Components ───────────────────────────────────────────────────────
-
-function generateLayoutComponent() {
-  return `import { Outlet } from 'react-router-dom';
-import Sidebar from './Sidebar.jsx';
-import Header from './Header.jsx';
-
-export default function Layout() {
+/**
+ * Shared layout for authenticated pages with sidebar and header.
+ * Import and use this in page layouts that need the app shell.
+ */
+export function AppShell({ children, user }) {
   return (
     <div className="layout">
       <Sidebar />
       <div className="layout-main">
-        <Header />
+        <Header user={user} />
         <main className="layout-content">
-          <Outlet />
+          {children}
         </main>
       </div>
     </div>
   );
 }
 `;
+
+  return code;
 }
 
-function generateSidebarComponent(features) {
-  const links = ['    <li><a href="/">Home</a></li>'];
-  if (features.includes('dashboard')) links.push('    <li><a href="/dashboard">Dashboard</a></li>');
-  if (features.includes('settings')) links.push('    <li><a href="/settings">Settings</a></li>');
-  if (features.includes('users')) links.push('    <li><a href="/users">Users</a></li>');
-  if (features.includes('notifications')) links.push('    <li><a href="/notifications">Notifications</a></li>');
-
-  return 'export default function Sidebar() {\n' +
-    '  return (\n' +
-    '    <aside className="sidebar">\n' +
-    '      <div className="sidebar-brand">\n' +
-    '        <h2>MyVillageOS</h2>\n' +
-    '      </div>\n' +
-    '      <ul className="sidebar-nav">\n' +
-    links.join('\n') + '\n' +
-    '      </ul>\n' +
-    '    </aside>\n' +
-    '  );\n' +
-    '}\n';
+function generateGlobalsCss() {
+  return `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body {
+  height: 100%;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: ${BRAND.secondary};
+  color: ${BRAND.darkBrown};
+  line-height: 1.6;
+}
+#__next { height: 100%; }
+a { color: ${BRAND.primary}; text-decoration: none; }
+a:hover { text-decoration: underline; }
+button { cursor: pointer; font-family: inherit; }
+
+:root {
+  --brand-gold: ${BRAND.gold};
+  --brand-brown: ${BRAND.brown};
+  --brand-green: ${BRAND.green};
+  --brand-primary: ${BRAND.primary};
+  --brand-secondary: ${BRAND.secondary};
+  --brand-dark-brown: ${BRAND.darkBrown};
+  --brand-deep-green: ${BRAND.deepGreen};
+  --brand-teal: ${BRAND.teal};
+  --sidebar-width: 240px;
+  --header-height: 56px;
 }
 
-function generateHeaderComponent(hasOAuth) {
-  if (hasOAuth) {
-    return `import { useAuth } from '../auth/AuthProvider.jsx';
+.layout { display: flex; height: 100vh; }
+.layout-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.layout-content { flex: 1; overflow-y: auto; padding: 24px; background: #f5f3ef; }
 
-export default function Header() {
-  const { user, logout } = useAuth();
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--brand-dark-brown);
+  color: var(--brand-secondary);
+  display: flex;
+  flex-direction: column;
+}
+.sidebar-brand { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
+.sidebar-brand h2 { color: var(--brand-gold); font-size: 18px; margin: 0; }
+.sidebar-nav { flex: 1; padding: 12px 0; list-style: none; }
+.sidebar-nav a {
+  display: block; padding: 10px 20px; color: var(--brand-secondary);
+  text-decoration: none; font-size: 14px; transition: background 0.2s;
+}
+.sidebar-nav a:hover, .sidebar-nav a.active {
+  background: rgba(255,215,0,0.1); color: var(--brand-gold);
+}
 
-  return (
-    <header className="header">
-      <span className="header-title">MyVillageOS App</span>
-      <div className="header-user">
-        {user && <span>{user.name || user.email}</span>}
-        {user && <button onClick={logout}>Sign out</button>}
-      </div>
-    </header>
-  );
+.header {
+  height: var(--header-height); background: white; border-bottom: 1px solid #e0ddd7;
+  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
+}
+.header-title { font-size: 16px; font-weight: 600; color: var(--brand-dark-brown); }
+.header-user { display: flex; align-items: center; gap: 12px; }
+.header-user button {
+  padding: 6px 14px; background: var(--brand-primary); color: white;
+  border: none; border-radius: 6px; font-size: 13px; cursor: pointer;
 }
-`;
-  }
 
-  return `export default function Header() {
-  return (
-    <header className="header">
-      <span className="header-title">MyVillageOS App</span>
-    </header>
-  );
+.login-page {
+  display: flex; justify-content: center; align-items: center; height: 100vh;
+  background: var(--brand-secondary);
 }
-`;
+.login-card {
+  text-align: center; padding: 48px; background: white;
+  border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);
 }
+.login-btn {
+  margin-top: 20px; padding: 12px 32px; background: var(--brand-primary);
+  color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer;
+}
+.login-btn:hover { background: var(--brand-gold); color: var(--brand-dark-brown); }
 
-function generateAgentChatComponent() {
-  return "import { useState } from 'react';\n" +
-    '\n' +
-    'export default function AgentChat() {\n' +
-    '  const [messages, setMessages] = useState([]);\n' +
-    "  const [input, setInput] = useState('');\n" +
-    '  const [loading, setLoading] = useState(false);\n' +
-    '\n' +
-    '  const sendMessage = async () => {\n' +
-    '    if (!input.trim() || loading) return;\n' +
-    '\n' +
-    '    const userMsg = input.trim();\n' +
-    "    setMessages(prev => [...prev, { role: 'user', text: userMsg }]);\n" +
-    "    setInput('');\n" +
-    '    setLoading(true);\n' +
-    '\n' +
-    '    try {\n' +
-    "      const res = await fetch('/agent/chat', {\n" +
-    "        method: 'POST',\n" +
-    "        headers: { 'Content-Type': 'application/json' },\n" +
-    '        body: JSON.stringify({ message: userMsg }),\n' +
-    '      });\n' +
-    '      const data = await res.json();\n' +
-    "      setMessages(prev => [...prev, { role: 'agent', text: data.response || data.error }]);\n" +
-    '    } catch (err) {\n' +
-    "      setMessages(prev => [...prev, { role: 'agent', text: 'Error: ' + err.message }]);\n" +
-    '    } finally {\n' +
-    '      setLoading(false);\n' +
-    '    }\n' +
-    '  };\n' +
-    '\n' +
-    '  return (\n' +
-    '    <div className="agent-chat">\n' +
-    '      <h3>AI Agent</h3>\n' +
-    '      <div className="agent-chat-messages">\n' +
-    "        {messages.length === 0 && <p style={{ color: '#999' }}>Ask the agent anything about your village...</p>}\n" +
-    '        {messages.map((msg, i) => (\n' +
-    '          <div key={i} className={`message ${msg.role}`}>\n' +
-    "            <strong>{msg.role === 'user' ? 'You' : 'Agent'}:</strong> {msg.text}\n" +
-    '          </div>\n' +
-    '        ))}\n' +
-    '        {loading && <div className="message agent"><em>Thinking...</em></div>}\n' +
-    '      </div>\n' +
-    '      <div className="agent-chat-input">\n' +
-    '        <input\n' +
-    '          value={input}\n' +
-    '          onChange={e => setInput(e.target.value)}\n' +
-    "          onKeyDown={e => e.key === 'Enter' && sendMessage()}\n" +
-    '          placeholder="Ask the AI agent..."\n' +
-    '          disabled={loading}\n' +
-    '        />\n' +
-    '        <button onClick={sendMessage} disabled={loading}>Send</button>\n' +
-    '      </div>\n' +
-    '    </div>\n' +
-    '  );\n' +
-    '}\n';
-}
-
-function generateProtectedRoute() {
-  return `import { Navigate } from 'react-router-dom';
-import { useAuth } from '../auth/AuthProvider.jsx';
-
-export default function ProtectedRoute({ children }) {
-  const { isAuthenticated, isLoading } = useAuth();
-  if (isLoading) return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>Loading...</div>;
-  if (!isAuthenticated) return <Navigate to="/login" replace />;
-  return children;
+.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
+.stat-card {
+  background: white; border-radius: 8px; padding: 20px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 }
+.stat-card h3 { font-size: 13px; color: var(--brand-teal); margin-bottom: 8px; }
+.stat-card .value { font-size: 28px; font-weight: 700; color: var(--brand-dark-brown); }
+
+.agent-chat {
+  background: white; border-radius: 8px; padding: 20px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-top: 24px;
+}
+.agent-chat h3 { margin-bottom: 12px; color: var(--brand-dark-brown); }
+.agent-chat-messages {
+  max-height: 300px; overflow-y: auto; margin-bottom: 12px;
+  border: 1px solid #e0ddd7; border-radius: 6px; padding: 12px;
+}
+.agent-chat-input { display: flex; gap: 8px; }
+.agent-chat-input input {
+  flex: 1; padding: 10px 14px; border: 1px solid #e0ddd7;
+  border-radius: 6px; font-size: 14px;
+}
+.agent-chat-input button {
+  padding: 10px 20px; background: var(--brand-primary); color: white;
+  border: none; border-radius: 6px; font-size: 14px; cursor: pointer;
+}
+.message { margin-bottom: 8px; }
+.message.user { color: var(--brand-primary); }
+.message.agent { color: var(--brand-deep-green); }
+
+.page-header { margin-bottom: 24px; }
+.page-header h1 { font-size: 24px; color: var(--brand-dark-brown); }
+.page-header p { color: var(--brand-teal); margin-top: 4px; }
+
+.welcome { padding: 40px; text-align: center; }
+.welcome h1 { color: var(--brand-dark-brown); margin-bottom: 8px; }
+.welcome p { color: var(--brand-teal); }
 `;
 }
 
-function generateBrowserOAuthModule() {
-  return '// Browser-side OAuth 2.0 + PKCE implementation\n' +
-    '\n' +
-    'function base64UrlEncode(buffer) {\n' +
-    '  const bytes = new Uint8Array(buffer);\n' +
-    "  let str = '';\n" +
-    "  for (const b of bytes) str += String.fromCharCode(b);\n" +
-    "  return btoa(str).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=+$/, '');\n" +
-    '}\n' +
-    '\n' +
-    'export function generateCodeVerifier() {\n' +
-    '  const array = new Uint8Array(64);\n' +
-    '  crypto.getRandomValues(array);\n' +
-    '  return base64UrlEncode(array);\n' +
-    '}\n' +
-    '\n' +
-    'export async function generateCodeChallenge(verifier) {\n' +
-    '  const encoder = new TextEncoder();\n' +
-    '  const data = encoder.encode(verifier);\n' +
-    "  const digest = await crypto.subtle.digest('SHA-256', data);\n" +
-    '  return base64UrlEncode(digest);\n' +
-    '}\n' +
-    '\n' +
-    'export async function startLogin() {\n' +
-    '  const verifier = generateCodeVerifier();\n' +
-    '  const challenge = await generateCodeChallenge(verifier);\n' +
-    '  const state = base64UrlEncode(crypto.getRandomValues(new Uint8Array(32)));\n' +
-    '\n' +
-    "  sessionStorage.setItem('oauth_verifier', verifier);\n" +
-    "  sessionStorage.setItem('oauth_state', state);\n" +
-    '\n' +
-    '  const baseUrl = import.meta.env.VITE_OAUTH_BASE_URL;\n' +
-    '  const clientId = import.meta.env.VITE_OAUTH_CLIENT_ID;\n' +
-    '  const redirectUri = import.meta.env.VITE_OAUTH_REDIRECT_URI;\n' +
-    '\n' +
-    '  const params = new URLSearchParams({\n' +
-    '    client_id: clientId,\n' +
-    '    redirect_uri: redirectUri,\n' +
-    "    response_type: 'code',\n" +
-    "    scope: 'openid profile email villager offline_access',\n" +
-    '    state,\n' +
-    '    code_challenge: challenge,\n' +
-    "    code_challenge_method: 'S256',\n" +
-    '  });\n' +
-    '\n' +
-    '  window.location.href = `${baseUrl}/authorize?${params.toString()}`;\n' +
-    '}\n' +
-    '\n' +
-    'export async function handleCallback(code, state) {\n' +
-    "  const savedState = sessionStorage.getItem('oauth_state');\n" +
-    "  const verifier = sessionStorage.getItem('oauth_verifier');\n" +
-    "  if (state !== savedState) throw new Error('OAuth state mismatch');\n" +
-    '\n' +
-    '  const baseUrl = import.meta.env.VITE_OAUTH_BASE_URL;\n' +
-    '  const clientId = import.meta.env.VITE_OAUTH_CLIENT_ID;\n' +
-    '  const clientSecret = import.meta.env.VITE_OAUTH_CLIENT_SECRET;\n' +
-    '  const redirectUri = import.meta.env.VITE_OAUTH_REDIRECT_URI;\n' +
-    '\n' +
-    '  const body = new URLSearchParams({\n' +
-    "    grant_type: 'authorization_code',\n" +
-    '    code,\n' +
-    '    redirect_uri: redirectUri,\n' +
-    '    client_id: clientId,\n' +
-    '    client_secret: clientSecret,\n' +
-    '    code_verifier: verifier,\n' +
-    '  });\n' +
-    '\n' +
-    '  const response = await fetch(`${baseUrl}/token`, {\n' +
-    "    method: 'POST',\n" +
-    "    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n" +
-    '    body: body.toString(),\n' +
-    '  });\n' +
-    '\n' +
-    "  if (!response.ok) throw new Error('Token exchange failed');\n" +
-    '\n' +
-    '  const tokens = await response.json();\n' +
-    '  storeTokens(tokens);\n' +
-    "  sessionStorage.removeItem('oauth_verifier');\n" +
-    "  sessionStorage.removeItem('oauth_state');\n" +
-    '  return tokens;\n' +
-    '}\n' +
-    '\n' +
-    'export async function refreshToken(token) {\n' +
-    '  const baseUrl = import.meta.env.VITE_OAUTH_BASE_URL;\n' +
-    '  const clientId = import.meta.env.VITE_OAUTH_CLIENT_ID;\n' +
-    '  const clientSecret = import.meta.env.VITE_OAUTH_CLIENT_SECRET;\n' +
-    '\n' +
-    '  const body = new URLSearchParams({\n' +
-    "    grant_type: 'refresh_token',\n" +
-    '    refresh_token: token,\n' +
-    '    client_id: clientId,\n' +
-    '    client_secret: clientSecret,\n' +
-    '  });\n' +
-    '\n' +
-    '  const response = await fetch(`${baseUrl}/token`, {\n' +
-    "    method: 'POST',\n" +
-    "    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n" +
-    '    body: body.toString(),\n' +
-    '  });\n' +
-    '\n' +
-    "  if (!response.ok) throw new Error('Token refresh failed');\n" +
-    '\n' +
-    '  const tokens = await response.json();\n' +
-    '  storeTokens(tokens);\n' +
-    '  return tokens;\n' +
-    '}\n' +
-    '\n' +
-    'export function getStoredTokens() {\n' +
-    "  const raw = localStorage.getItem('myvillage_tokens');\n" +
-    '  return raw ? JSON.parse(raw) : null;\n' +
-    '}\n' +
-    '\n' +
-    'export function storeTokens(tokens) {\n' +
-    "  localStorage.setItem('myvillage_tokens', JSON.stringify(tokens));\n" +
-    '}\n' +
-    '\n' +
-    'export function clearTokens() {\n' +
-    "  localStorage.removeItem('myvillage_tokens');\n" +
-    '}\n';
-}
-
-function generateAuthProvider() {
-  return "import { createContext, useContext, useState, useEffect, useCallback } from 'react';\n" +
-    "import { useNavigate } from 'react-router-dom';\n" +
-    "import { startLogin, getStoredTokens, clearTokens, refreshToken } from './oauth.js';\n" +
-    '\n' +
-    'const AuthContext = createContext(null);\n' +
-    '\n' +
-    'export function useAuth() {\n' +
-    '  const ctx = useContext(AuthContext);\n' +
-    "  if (!ctx) throw new Error('useAuth must be used within AuthProvider');\n" +
-    '  return ctx;\n' +
-    '}\n' +
-    '\n' +
-    'export function AuthProvider({ children }) {\n' +
-    '  const [user, setUser] = useState(null);\n' +
-    '  const [isLoading, setIsLoading] = useState(true);\n' +
-    '  const navigate = useNavigate();\n' +
-    '\n' +
-    '  const fetchUser = useCallback(async (accessToken) => {\n' +
-    '    const baseUrl = import.meta.env.VITE_OAUTH_BASE_URL;\n' +
-    '    const res = await fetch(`${baseUrl}/userinfo`, {\n' +
-    '      headers: { Authorization: `Bearer ${accessToken}` },\n' +
-    '    });\n' +
-    '    if (res.ok) {\n' +
-    '      setUser(await res.json());\n' +
-    '    } else {\n' +
-    '      clearTokens();\n' +
-    '      setUser(null);\n' +
-    '    }\n' +
-    '  }, []);\n' +
-    '\n' +
-    '  useEffect(() => {\n' +
-    '    const tokens = getStoredTokens();\n' +
-    '    if (tokens?.access_token) {\n' +
-    '      fetchUser(tokens.access_token).finally(() => setIsLoading(false));\n' +
-    '    } else {\n' +
-    '      setIsLoading(false);\n' +
-    '    }\n' +
-    '  }, [fetchUser]);\n' +
-    '\n' +
-    '  useEffect(() => {\n' +
-    '    const tokens = getStoredTokens();\n' +
-    '    if (!tokens?.expires_in || !tokens?.refresh_token) return;\n' +
-    '    const refreshMs = (tokens.expires_in - 60) * 1000;\n' +
-    '    if (refreshMs <= 0) return;\n' +
-    '    const timer = setTimeout(async () => {\n' +
-    '      try {\n' +
-    '        const newTokens = await refreshToken(tokens.refresh_token);\n' +
-    '        await fetchUser(newTokens.access_token);\n' +
-    '      } catch {\n' +
-    '        clearTokens();\n' +
-    '        setUser(null);\n' +
-    '      }\n' +
-    '    }, refreshMs);\n' +
-    '    return () => clearTimeout(timer);\n' +
-    '  }, [user, fetchUser]);\n' +
-    '\n' +
-    '  const login = () => startLogin();\n' +
-    "  const logout = () => { clearTokens(); setUser(null); navigate('/login'); };\n" +
-    '  const isAuthenticated = !!user;\n' +
-    '\n' +
-    '  return (\n' +
-    '    <AuthContext.Provider value={{ user, login, logout, isAuthenticated, isLoading }}>\n' +
-    '      {children}\n' +
-    '    </AuthContext.Provider>\n' +
-    '  );\n' +
-    '}\n';
+function generateHomePage(hasDashboard) {
+  if (hasDashboard) {
+    return `import { redirect } from 'next/navigation';
+
+export default function Home() {
+  redirect('/dashboard');
+}
+`;
+  }
+
+  return `import { AppShell } from './layout';
+import { getSession } from '@/lib/session';
+
+export default async function Home() {
+  const session = await getSession();
+
+  return (
+    <AppShell user={session.user}>
+      <div className="welcome">
+        <h1>Welcome</h1>
+        <p>Select a page from the sidebar to get started.</p>
+      </div>
+    </AppShell>
+  );
+}
+`;
 }
 
 function generateLoginPage() {
-  return `import { useAuth } from '../auth/AuthProvider.jsx';
+  return `export default function LoginPage({ searchParams }) {
+  const error = searchParams?.error;
 
-export default function Login() {
-  const { login } = useAuth();
   return (
     <div className="login-page">
       <div className="login-card">
-        <h1>MyVillageOS</h1>
-        <p>Sign in to access your application</p>
-        <button className="login-btn" onClick={login}>Sign in with MyVillageOS</button>
+        <h1 style={{ color: 'var(--brand-dark-brown)', marginBottom: '8px' }}>Welcome</h1>
+        <p style={{ color: 'var(--brand-teal)', marginBottom: '24px' }}>
+          Sign in with your MyVillageOS account to continue.
+        </p>
+        {error && (
+          <p style={{ color: '#dc2626', marginBottom: '16px', fontSize: '14px' }}>
+            {decodeURIComponent(error)}
+          </p>
+        )}
+        <a href="/api/auth/login" className="login-btn" style={{ textDecoration: 'none' }}>
+          Sign in with MyVillageOS
+        </a>
       </div>
     </div>
   );
@@ -1522,131 +1179,241 @@ export default function Login() {
 `;
 }
 
-function generateCallbackPage() {
-  return `import { useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { handleCallback } from '../auth/oauth.js';
-
-export default function Callback() {
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const code = searchParams.get('code');
-    const state = searchParams.get('state');
-    if (!code || !state) { setError('Missing authorization code or state'); return; }
-    handleCallback(code, state)
-      .then(() => navigate('/', { replace: true }))
-      .catch((err) => setError(err.message));
-  }, [searchParams, navigate]);
+function generateNotFoundPage() {
+  return `import Link from 'next/link';
 
-  if (error) {
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', flexDirection: 'column' }}>
-        <h2>Authentication Error</h2>
-        <p>{error}</p>
-        <a href="/login">Try again</a>
+export default function NotFound() {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+      <div style={{ textAlign: 'center' }}>
+        <h1 style={{ fontSize: '48px', color: 'var(--brand-dark-brown)' }}>404</h1>
+        <p style={{ color: 'var(--brand-teal)', marginBottom: '16px' }}>Page not found</p>
+        <Link href="/" style={{ color: 'var(--brand-primary)' }}>Go home</Link>
       </div>
-    );
-  }
-
-  return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>Completing sign in...</div>;
+    </div>
+  );
 }
 `;
 }
 
-// ─── Page Generators ────────────────────────────────────────────────────────
-
 function generateDashboardPage(includeMcp) {
-  return `import AgentChat from '../components/AgentChat.jsx';
+  return `import { AppShell } from '../layout';
+import { getSession } from '@/lib/session';
+import AgentChat from '@/components/AgentChat';
+
+export default async function DashboardPage() {
+  const session = await getSession();
 
-export default function Dashboard() {
   return (
-    <div>
+    <AppShell user={session.user}>
       <div className="page-header">
         <h1>Dashboard</h1>
-        <p>Your application overview</p>
+        <p>Welcome back${includeMcp ? '. Your AI agent is ready to help.' : '.'}</p>
       </div>
       <div className="stat-cards">
         <div className="stat-card">
-          <h3>Communities</h3>
-          <div className="value">--</div>
-        </div>
-        <div className="stat-card">
-          <h3>Posts</h3>
-          <div className="value">--</div>
-        </div>
-        <div className="stat-card">
-          <h3>Members</h3>
-          <div className="value">--</div>
+          <h3>Status</h3>
+          <div className="value" style={{ color: 'var(--brand-green)' }}>Active</div>
         </div>
       </div>
       <AgentChat />
-    </div>
+    </AppShell>
   );
 }
 `;
 }
 
 function generateSettingsPage() {
-  return `export default function Settings() {
+  return `import { AppShell } from '../layout';
+import { getSession } from '@/lib/session';
+
+export default async function SettingsPage() {
+  const session = await getSession();
+
   return (
-    <div>
+    <AppShell user={session.user}>
       <div className="page-header">
         <h1>Settings</h1>
-        <p>Configure your application</p>
+        <p>Manage your application settings.</p>
       </div>
-      <div style={{ background: 'white', borderRadius: 8, padding: 24 }}>
-        <p>Settings page - customize as needed.</p>
+      <div style={{ background: 'white', borderRadius: '8px', padding: '24px', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}>
+        <p style={{ color: 'var(--brand-teal)' }}>Settings page \u2014 customize this for your application.</p>
       </div>
-    </div>
+    </AppShell>
   );
 }
 `;
 }
 
 function generateUsersPage() {
-  return `export default function Users() {
+  return `import { AppShell } from '../layout';
+import { getSession } from '@/lib/session';
+
+export default async function UsersPage() {
+  const session = await getSession();
+
   return (
-    <div>
+    <AppShell user={session.user}>
       <div className="page-header">
         <h1>Users</h1>
-        <p>Manage users and permissions</p>
+        <p>Manage users and permissions.</p>
       </div>
-      <div style={{ background: 'white', borderRadius: 8, padding: 24 }}>
-        <p>User management - customize as needed.</p>
+      <div style={{ background: 'white', borderRadius: '8px', padding: '24px', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}>
+        <p style={{ color: 'var(--brand-teal)' }}>Users page \u2014 customize this for your application.</p>
       </div>
-    </div>
+    </AppShell>
   );
 }
 `;
 }
 
 function generateNotificationsPage() {
-  return `export default function Notifications() {
+  return `import { AppShell } from '../layout';
+import { getSession } from '@/lib/session';
+
+export default async function NotificationsPage() {
+  const session = await getSession();
+
   return (
-    <div>
+    <AppShell user={session.user}>
       <div className="page-header">
         <h1>Notifications</h1>
-        <p>Stay updated on activity</p>
+        <p>View your latest notifications.</p>
       </div>
-      <div style={{ background: 'white', borderRadius: 8, padding: 24 }}>
-        <p>No new notifications.</p>
+      <div style={{ background: 'white', borderRadius: '8px', padding: '24px', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}>
+        <p style={{ color: 'var(--brand-teal)' }}>Notifications page \u2014 customize this for your application.</p>
       </div>
-    </div>
+    </AppShell>
   );
 }
 `;
 }
 
-function generateNotFoundPage() {
-  return `export default function NotFound() {
+// ─── Component Generators ───────────────────────────────────────────────────
+
+function generateSidebarComponent(features) {
+  const links = ["    <li><a href=\"/\">Home</a></li>"];
+  if (features.includes('dashboard')) links.push("    <li><a href=\"/dashboard\">Dashboard</a></li>");
+  if (features.includes('settings')) links.push("    <li><a href=\"/settings\">Settings</a></li>");
+  if (features.includes('users')) links.push("    <li><a href=\"/users\">Users</a></li>");
+  if (features.includes('notifications')) links.push("    <li><a href=\"/notifications\">Notifications</a></li>");
+
+  return `import Link from 'next/link';
+
+export default function Sidebar() {
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-brand">
+        <h2>MyVillageOS</h2>
+      </div>
+      <ul className="sidebar-nav">
+${links.map(l => l.replace(/<a href="/g, '<Link href="').replace(/<\/a>/g, '</Link>')).join('\n')}
+      </ul>
+    </aside>
+  );
+}
+`;
+}
+
+function generateHeaderComponent(hasOAuth) {
+  if (hasOAuth) {
+    return `import SignOutButton from './SignOutButton';
+
+export default function Header({ user }) {
+  return (
+    <header className="header">
+      <span className="header-title">MyVillageOS App</span>
+      <div className="header-user">
+        {user && <span>{user.name || user.email}</span>}
+        {user && <SignOutButton />}
+      </div>
+    </header>
+  );
+}
+`;
+  }
+
+  return `export default function Header() {
+  return (
+    <header className="header">
+      <span className="header-title">MyVillageOS App</span>
+    </header>
+  );
+}
+`;
+}
+
+function generateSignOutButton() {
+  return `'use client';
+
+export default function SignOutButton() {
+  const handleSignOut = async () => {
+    await fetch('/api/auth/logout', { method: 'POST' });
+    window.location.href = '/login';
+  };
+
   return (
-    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh', flexDirection: 'column' }}>
-      <h1>404</h1>
-      <p>Page not found</p>
-      <a href="/">Go home</a>
+    <button onClick={handleSignOut}>Sign out</button>
+  );
+}
+`;
+}
+
+function generateAgentChatComponent() {
+  return `'use client';
+
+import { useState } from 'react';
+
+export default function AgentChat() {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const sendMessage = async () => {
+    if (!input.trim() || loading) return;
+
+    const userMsg = input.trim();
+    setMessages(prev => [...prev, { role: 'user', text: userMsg }]);
+    setInput('');
+    setLoading(true);
+
+    try {
+      const res = await fetch('/api/agent/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: userMsg }),
+      });
+      const data = await res.json();
+      setMessages(prev => [...prev, { role: 'agent', text: data.response || data.error }]);
+    } catch (err) {
+      setMessages(prev => [...prev, { role: 'agent', text: 'Error: ' + err.message }]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="agent-chat">
+      <h3>AI Agent</h3>
+      <div className="agent-chat-messages">
+        {messages.length === 0 && <p style={{ color: '#999' }}>Ask the agent anything about your village...</p>}
+        {messages.map((msg, i) => (
+          <div key={i} className={\`message \${msg.role}\`}>
+            <strong>{msg.role === 'user' ? 'You' : 'Agent'}:</strong> {msg.text}
+          </div>
+        ))}
+        {loading && <div className="message agent"><em>Thinking...</em></div>}
+      </div>
+      <div className="agent-chat-input">
+        <input
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && sendMessage()}
+          placeholder="Ask the AI agent..."
+          disabled={loading}
+        />
+        <button onClick={sendMessage} disabled={loading}>Send</button>
+      </div>
     </div>
   );
 }