@myvillage/cli 1.6.3 → 1.7.1

package/src/utils/agentic-templates.js

@@ -0,0 +1,1654 @@
+import { mkdirSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+// MyVillage brand colors
+const BRAND = {
+  gold: '#FFD700',
+  brown: '#8B4513',
+  green: '#228B22',
+  primary: '#B07C00',
+  secondary: '#E4DCCB',
+  darkBrown: '#302017',
+  deepGreen: '#043922',
+  teal: '#799C9F',
+};
+
+// OAuth constants
+const OAUTH_BASE_URL = 'https://portal.myvillageproject.ai/api/oauth';
+const OAUTH_SCOPES = 'openid profile email villager offline_access';
+
+// MCP tool group definitions
+const TOOL_GROUPS = {
+  social: ['post_create', 'post_view', 'post_list', 'post_edit', 'post_delete', 'comment_create', 'comment_list', 'vote_cast'],
+  communities: ['community_list', 'community_view', 'community_create', 'community_join', 'community_leave', 'community_members', 'community_events_list', 'community_event_register', 'community_event_details', 'community_event_create'],
+  villages: ['village_list', 'village_view', 'village_create', 'village_update', 'village_leaders_list', 'my_villages'],
+  moments: ['moment_create', 'moment_list', 'moment_view', 'pulse_create', 'pulse_list', 'checkin_submit'],
+  villagers: ['my_profile', 'villager_search', 'affiliation_search', 'affiliation_add', 'agent_list_by_villager'],
+  meetings: ['recall_send_bot', 'recall_meeting_attendance'],
+};
+
+// ─── Agentic App Template ───────────────────────────────────────────────────
+
+export function createAgenticAppProject(targetDir, options) {
+  const {
+    name,
+    description,
+    authStrategy = 'oauth',
+    features = [],
+    includeMcp = true,
+    includeRestApi = true,
+    mcpToolGroups = [],
+    oauthCredentials = null,
+  } = options;
+
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+  const hasOAuth = authStrategy === 'oauth' || authStrategy === 'both';
+  const hasEmailPassword = authStrategy === 'email-password' || authStrategy === 'both';
+  const hasDashboard = features.includes('dashboard');
+  const hasSettings = features.includes('settings');
+  const hasUsers = features.includes('users');
+  const hasNotifications = features.includes('notifications');
+
+  // Create directory structure
+  const dirs = [
+    '',
+    'public',
+    'server',
+    'server/agent',
+    'src',
+    'src/components',
+    'src/pages',
+  ];
+
+  if (includeMcp) {
+    dirs.push('server/mcp');
+  }
+  if (hasOAuth || hasEmailPassword) {
+    dirs.push('src/auth');
+    dirs.push('server/auth');
+  }
+  if (includeRestApi) {
+    dirs.push('server/api');
+  }
+
+  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, '.gitignore'), generateGitignore());
+  writeFileSync(join(targetDir, '.env'), 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));
+
+  // 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));
+
+  if (includeMcp) {
+    writeFileSync(join(targetDir, 'server/mcp/client.js'), generateMcpClient(mcpToolGroups));
+  }
+  if (hasOAuth) {
+    writeFileSync(join(targetDir, 'server/auth/oauth.js'), generateOAuthModule());
+  }
+  if (includeRestApi) {
+    writeFileSync(join(targetDir, 'server/api/routes.js'), generateApiRoutes(hasOAuth));
+  }
+
+  // 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());
+
+  // 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());
+
+  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());
+  }
+
+  // Pages
+  if (hasDashboard) {
+    writeFileSync(join(targetDir, 'src/pages/Dashboard.jsx'), generateDashboardPage(includeMcp));
+  }
+  if (hasSettings) {
+    writeFileSync(join(targetDir, 'src/pages/Settings.jsx'), generateSettingsPage());
+  }
+  if (hasUsers) {
+    writeFileSync(join(targetDir, 'src/pages/Users.jsx'), generateUsersPage());
+  }
+  if (hasNotifications) {
+    writeFileSync(join(targetDir, 'src/pages/Notifications.jsx'), generateNotificationsPage());
+  }
+
+  writeFileSync(join(targetDir, 'src/pages/NotFound.jsx'), generateNotFoundPage());
+}
+
+// ─── Generator Functions ────────────────────────────────────────────────────
+
+function generatePackageJson(slug, description, includeMcp) {
+  const deps = {
+    'react': '^18.3.0',
+    'react-dom': '^18.3.0',
+    'react-router-dom': '^6.22.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) {
+    deps['@modelcontextprotocol/sdk'] = '^1.0.0';
+  }
+
+  const pkg = {
+    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',
+    },
+    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 generateGitignore() {
+  return `node_modules/
+dist/
+.DS_Store
+*.log
+.env
+`;
+}
+
+function generateEnv(oauthCredentials, hasOAuth, includeMcp) {
+  const lines = [];
+
+  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('MYVILLAGEOS_API_URL=https://portal.myvillageproject.ai');
+
+  if (includeMcp) {
+    lines.push('MYVILLAGEOS_MCP_URL=https://mcp.myvillageproject.ai');
+  }
+
+  lines.push('ANTHROPIC_API_KEY=');
+  lines.push('PORT=3000');
+
+  return lines.join('\n') + '\n';
+}
+
+function generateEnvExample(hasOAuth, includeMcp) {
+  const lines = [];
+
+  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('MYVILLAGEOS_API_URL=https://portal.myvillageproject.ai');
+
+  if (includeMcp) {
+    lines.push('MYVILLAGEOS_MCP_URL=https://mcp.myvillageproject.ai');
+  }
+
+  lines.push('ANTHROPIC_API_KEY=');
+  lines.push('PORT=3000');
+
+  return lines.join('\n') + '\n';
+}
+
+function generateReadme(name, description, hasOAuth, includeMcp, includeRestApi, features = []) {
+  let readme = `# ${name}
+
+${description || 'A MyVillageOS agentic application.'}
+
+## Getting Started
+
+1. Install dependencies:
+
+\`\`\`bash
+npm install
+\`\`\`
+
+2. Copy the environment file and fill in your credentials:
+
+\`\`\`bash
+cp .env.example .env
+\`\`\`
+
+3. Set your \`ANTHROPIC_API_KEY\` in \`.env\`.
+`;
+
+  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\`.
+`;
+  }
+
+  readme += `
+## 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)
+\`\`\`
+
+## 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
+`;
+  }
+
+  readme += `
+## Brand Colors
+
+| Color      | Hex       |
+|------------|-----------|
+| Gold       | ${BRAND.gold} |
+| Brown      | ${BRAND.brown} |
+| Green      | ${BRAND.green} |
+| Primary    | ${BRAND.primary} |
+| Secondary  | ${BRAND.secondary} |
+| Dark Brown | ${BRAND.darkBrown} |
+| Deep Green | ${BRAND.deepGreen} |
+| Teal       | ${BRAND.teal} |
+
+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';
+`;
+
+  if (includeRestApi) {
+    imports += `import { createApiRouter } from './api/routes.js';
+`;
+  }
+
+  if (hasOAuth) {
+    imports += `import { initiateOAuthLogin, handleOAuthCallback, getStoredTokens } from './auth/oauth.js';
+`;
+  }
+
+  let body = `
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+app.use(express.json());
+app.use(cors());
+
+// Health check
+app.get('/health', (req, res) => {
+  res.json({ status: 'ok', name: '${name}', timestamp: new Date().toISOString() });
+});
+`;
+
+  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 (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());
+`;
+    }
+  }
+
+  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' });
+    }
+`;
+
+  if (hasOAuth) {
+    body += `    const tokens = app.locals.tokens || null;
+    const result = await runAgent(message, { tokens });
+`;
+  } else {
+    body += `    const result = await runAgent(message);
+`;
+  }
+
+  body += `    res.json({ response: result });
+  } catch (err) {
+    console.error('[Agent] Error:', err.message);
+    res.status(500).json({ error: 'Agent processing failed' });
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(\`[Server] ${name} running on http://localhost:\${PORT}\`);
+  console.log('[Server] POST /agent/chat - Send messages to the AI agent');
+`;
+
+  if (hasOAuth) {
+    body += `  console.log('[Server] GET  /auth/login - Start OAuth login flow');
+`;
+  }
+
+  if (includeRestApi) {
+    body += `  console.log('[Server] /api/* - Platform API proxy routes');
+`;
+  }
+
+  body += `});
+`;
+
+  return imports + body;
+}
+
+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 += `
+/**
+ * Run the AI agent with the given user message.
+ * Uses Vercel AI SDK with Anthropic's Claude and optional MCP tools.
+ *
+ * @param {string} message - The user's input message
+ * @param {object} context - Optional context (tokens, etc.)
+ * @returns {string} The agent's text response
+ */
+export async function runAgent(message, context = {}) {
+  console.log('[Agent] Processing message:', message.substring(0, 80));
+
+`;
+
+  if (includeMcp) {
+    code += `  // Load MCP tools from MyVillageOS
+  let tools = {};
+  try {
+    tools = await getMcpTools();
+    console.log(\`[Agent] Loaded \${Object.keys(tools).length} MCP tools\`);
+  } catch (err) {
+    console.warn('[Agent] Failed to load MCP tools, running without tools:', err.message);
+  }
+
+`;
+  }
+
+  code += `  const systemPrompt = \`You are a helpful AI agent integrated with the MyVillageOS platform.
+You assist users with community management, social networking, and village coordination.
+Be concise, helpful, and action-oriented. When you have tools available, use them
+to fulfill the user's request rather than just describing what could be done.\`;
+
+  const result = await generateText({
+    model: anthropic('claude-sonnet-4-20250514'),
+    system: systemPrompt,
+    messages: [{ role: 'user', content: message }],
+`;
+
+  if (includeMcp) {
+    code += `    tools,
+    maxSteps: 10,
+`;
+  }
+
+  code += `  });
+
+  console.log('[Agent] Response generated, length:', result.text.length);
+  return result.text;
+}
+`;
+
+  return code;
+}
+
+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'],
+  communities: ['community_list', 'community_view', 'community_create', 'community_join', 'community_leave', 'community_members', 'community_events_list', 'community_event_register', 'community_event_details', 'community_event_create'],
+  villages: ['village_list', 'village_view', 'village_create', 'village_update', 'village_leaders_list', 'my_villages'],
+  moments: ['moment_create', 'moment_list', 'moment_view', 'pulse_create', 'pulse_list', 'checkin_submit'],
+  villagers: ['my_profile', 'villager_search', 'affiliation_search', 'affiliation_add', 'agent_list_by_villager'],
+  meetings: ['recall_send_bot', 'recall_meeting_attendance'],
+};
+
+// Tool groups selected during project creation
+const SELECTED_GROUPS = ${JSON.stringify(selectedGroups)};
+
+// Flatten selected groups into an allowlist of tool names
+const ALLOWED_TOOLS = new Set(
+  SELECTED_GROUPS.flatMap(group => TOOL_GROUPS[group] || [])
+);
+
+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;
+
+  const transport = new StdioClientTransport({
+    command: 'npx',
+    args: ['@myvillage/mcp-server'],
+    env: {
+      ...process.env,
+      MYVILLAGEOS_API_URL: process.env.MYVILLAGEOS_API_URL,
+      MYVILLAGEOS_MCP_URL: process.env.MYVILLAGEOS_MCP_URL,
+    },
+  });
+
+  mcpClient = new Client({ name: 'myvillage-agentic-app', version: '1.0.0' });
+  await mcpClient.connect(transport);
+  console.log('[MCP] Connected to MyVillageOS MCP server');
+
+  return mcpClient;
+}
+
+/**
+ * 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();
+  const { tools: mcpTools } = await client.listTools();
+
+  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;
+    }
+
+    aiTools[tool.name] = {
+      description: tool.description || tool.name,
+      parameters: jsonSchema(tool.inputSchema || { type: 'object', properties: {} }),
+      execute: async (args) => {
+        console.log(\`[MCP] Calling tool: \${tool.name}\`, JSON.stringify(args).substring(0, 200));
+        const result = await client.callTool({ name: tool.name, arguments: args });
+        return result.content;
+      },
+    };
+  }
+
+  return aiTools;
+}
+
+/**
+ * Get the list of available tool group names and their tool counts.
+ */
+export function getToolGroupInfo() {
+  return Object.entries(TOOL_GROUPS).map(([group, tools]) => ({
+    group,
+    tools: tools.length,
+    selected: SELECTED_GROUPS.includes(group),
+  }));
+}
+
+/**
+ * Disconnect the MCP client. Call this on shutdown.
+ */
+export async function disconnectMcp() {
+  if (mcpClient) {
+    await mcpClient.close();
+    mcpClient = null;
+    console.log('[MCP] Disconnected from MCP server');
+  }
+}
+`;
+
+  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}';
+
+// In-memory token store (replace with a database in production)
+let storedTokens = null;
+
+/**
+ * Generate a cryptographically random code verifier for PKCE.
+ */
+function generateCodeVerifier() {
+  return crypto.randomBytes(64).toString('base64url');
+}
+
+/**
+ * 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.');
+  }
+
+  // Refresh if token expires within 60 seconds
+  if (storedTokens.expiresAt - Date.now() < 60_000) {
+    await refreshAccessToken();
+  }
+
+  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.
+
+const API_BASE_URL = process.env.MYVILLAGEOS_API_URL || 'https://portal.myvillageproject.ai';
+
+`;
+
+  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,
+    });
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(\`API request failed: \${response.status} \${error}\`);
+    }
+
+    return response.json();
+  }
+`;
+  } else {
+    code += `/**
+ * Create the API router.
+ */
+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,
+    };
+
+    const url = \`\${API_BASE_URL}\${path}\`;
+    console.log(\`[API] \${options.method || 'GET'} \${url}\`);
+
+    const response = await fetch(url, {
+      ...options,
+      headers,
+    });
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(\`API request failed: \${response.status} \${error}\`);
+    }
+
+    return response.json();
+  }
+`;
+  }
+
+  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 ───────────────────────────────────────────────────────────────
+
+  // List villages
+  router.get('/villages', async (req, res) => {
+    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 });
+    }
+  });
+
+  // ─── Profile ────────────────────────────────────────────────────────────────
+
+  // 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 });
+    }
+  });
+
+  return router;
+}
+`;
+
+  return code;
+}
+
+// ─── Vite & HTML 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 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>
+`;
+}
+
+// ─── 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>
+);
+`;
+}
+
+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() {
+  return (
+    <div className="layout">
+      <Sidebar />
+      <div className="layout-main">
+        <Header />
+        <main className="layout-content">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+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 generateHeaderComponent(hasOAuth) {
+  if (hasOAuth) {
+    return `import { useAuth } from '../auth/AuthProvider.jsx';
+
+export default function Header() {
+  const { user, logout } = useAuth();
+
+  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>
+  );
+}
+`;
+  }
+
+  return `export default function Header() {
+  return (
+    <header className="header">
+      <span className="header-title">MyVillageOS App</span>
+    </header>
+  );
+}
+`;
+}
+
+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;
+}
+`;
+}
+
+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 generateLoginPage() {
+  return `import { useAuth } from '../auth/AuthProvider.jsx';
+
+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>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+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]);
+
+  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>
+      </div>
+    );
+  }
+
+  return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>Completing sign in...</div>;
+}
+`;
+}
+
+// ─── Page Generators ────────────────────────────────────────────────────────
+
+function generateDashboardPage(includeMcp) {
+  return `import AgentChat from '../components/AgentChat.jsx';
+
+export default function Dashboard() {
+  return (
+    <div>
+      <div className="page-header">
+        <h1>Dashboard</h1>
+        <p>Your application overview</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>
+        </div>
+      </div>
+      <AgentChat />
+    </div>
+  );
+}
+`;
+}
+
+function generateSettingsPage() {
+  return `export default function Settings() {
+  return (
+    <div>
+      <div className="page-header">
+        <h1>Settings</h1>
+        <p>Configure your application</p>
+      </div>
+      <div style={{ background: 'white', borderRadius: 8, padding: 24 }}>
+        <p>Settings page - customize as needed.</p>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateUsersPage() {
+  return `export default function Users() {
+  return (
+    <div>
+      <div className="page-header">
+        <h1>Users</h1>
+        <p>Manage users and permissions</p>
+      </div>
+      <div style={{ background: 'white', borderRadius: 8, padding: 24 }}>
+        <p>User management - customize as needed.</p>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateNotificationsPage() {
+  return `export default function Notifications() {
+  return (
+    <div>
+      <div className="page-header">
+        <h1>Notifications</h1>
+        <p>Stay updated on activity</p>
+      </div>
+      <div style={{ background: 'white', borderRadius: 8, padding: 24 }}>
+        <p>No new notifications.</p>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateNotFoundPage() {
+  return `export default function NotFound() {
+  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>
+    </div>
+  );
+}
+`;
+}