@myvillage/cli 1.3.0 → 1.5.0

package/src/utils/app-templates.js

@@ -0,0 +1,2983 @@
+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_REDIRECT_URI = 'http://localhost:5173/callback';
+const OAUTH_SCOPES = 'openid profile email villager';
+
+// ─── Portal App Template ────────────────────────────────────────────────────
+
+export function createPortalProject(targetDir, options) {
+  const { name, description, features, oauthCredentials } = options;
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+  const hasAuth = features.includes('auth');
+  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',
+    'src',
+    'src/components',
+    'src/pages',
+  ];
+
+  if (hasAuth) {
+    dirs.push('src/auth');
+  }
+
+  for (const dir of dirs) {
+    mkdirSync(join(targetDir, dir), { recursive: true });
+  }
+
+  // Write root files
+  writeFileSync(join(targetDir, 'package.json'), generatePortalPackageJson(slug, description, features, oauthCredentials));
+  writeFileSync(join(targetDir, 'vite.config.js'), generateViteConfig());
+  writeFileSync(join(targetDir, 'index.html'), generatePortalIndexHtml(name));
+  writeFileSync(join(targetDir, '.gitignore'), generateGitignore());
+  writeFileSync(join(targetDir, 'README.md'), generatePortalReadme(name, description, features));
+
+  // Env files
+  if (hasAuth) {
+    writeFileSync(join(targetDir, '.env'), generateEnv(oauthCredentials));
+    writeFileSync(join(targetDir, '.env.example'), generateEnvExample());
+  }
+
+  // Source files
+  writeFileSync(join(targetDir, 'src/main.jsx'), generateMainJsx());
+  writeFileSync(join(targetDir, 'src/App.jsx'), generatePortalApp(features));
+  writeFileSync(join(targetDir, 'src/App.css'), generatePortalAppCss());
+  writeFileSync(join(targetDir, 'src/index.css'), generateIndexCss());
+
+  // Components
+  writeFileSync(join(targetDir, 'src/components/Layout.jsx'), generatePortalLayout());
+  writeFileSync(join(targetDir, 'src/components/Sidebar.jsx'), generatePortalSidebar(features));
+  writeFileSync(join(targetDir, 'src/components/Header.jsx'), generatePortalHeader(hasAuth));
+
+  if (hasAuth) {
+    writeFileSync(join(targetDir, 'src/components/ProtectedRoute.jsx'), generateProtectedRoute());
+    writeFileSync(join(targetDir, 'src/auth/oauth.js'), generateOAuthModule());
+    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());
+  }
+  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());
+}
+
+// ─── Data Labeling Template ─────────────────────────────────────────────────
+
+export function createDataLabelingProject(targetDir, options) {
+  const { name, description, dataTypes, includeAuth, oauthCredentials } = options;
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+
+  // Create directory structure
+  const dirs = [
+    '',
+    'public',
+    'src',
+    'src/components',
+    'src/labelers',
+    'src/context',
+    'src/pages',
+    'src/utils',
+  ];
+
+  if (includeAuth) {
+    dirs.push('src/auth');
+  }
+
+  for (const dir of dirs) {
+    mkdirSync(join(targetDir, dir), { recursive: true });
+  }
+
+  // Write root files
+  writeFileSync(join(targetDir, 'package.json'), generateLabelingPackageJson(slug, description, dataTypes, oauthCredentials));
+  writeFileSync(join(targetDir, 'vite.config.js'), generateViteConfig());
+  writeFileSync(join(targetDir, 'index.html'), generateLabelingIndexHtml(name));
+  writeFileSync(join(targetDir, '.gitignore'), generateGitignore());
+  writeFileSync(join(targetDir, 'README.md'), generateLabelingReadme(name, description, dataTypes));
+
+  // Env files
+  if (includeAuth) {
+    writeFileSync(join(targetDir, '.env'), generateEnv(oauthCredentials));
+    writeFileSync(join(targetDir, '.env.example'), generateEnvExample());
+  }
+
+  // Source files
+  writeFileSync(join(targetDir, 'src/main.jsx'), generateMainJsx());
+  writeFileSync(join(targetDir, 'src/App.jsx'), generateLabelingApp(dataTypes, includeAuth));
+  writeFileSync(join(targetDir, 'src/App.css'), generateLabelingAppCss());
+  writeFileSync(join(targetDir, 'src/index.css'), generateIndexCss());
+
+  // Components
+  writeFileSync(join(targetDir, 'src/components/Layout.jsx'), generateLabelingLayout());
+  writeFileSync(join(targetDir, 'src/components/Toolbar.jsx'), generateToolbar());
+  writeFileSync(join(targetDir, 'src/components/DataTypeSelector.jsx'), generateDataTypeSelector(dataTypes));
+  writeFileSync(join(targetDir, 'src/components/ProgressBar.jsx'), generateProgressBar());
+  writeFileSync(join(targetDir, 'src/components/KeyboardShortcuts.jsx'), generateKeyboardShortcuts());
+
+  if (includeAuth) {
+    writeFileSync(join(targetDir, 'src/components/ProtectedRoute.jsx'), generateProtectedRoute());
+    writeFileSync(join(targetDir, 'src/auth/oauth.js'), generateOAuthModule());
+    writeFileSync(join(targetDir, 'src/auth/AuthProvider.jsx'), generateAuthProvider());
+    writeFileSync(join(targetDir, 'src/pages/Login.jsx'), generateLoginPage());
+    writeFileSync(join(targetDir, 'src/pages/Callback.jsx'), generateCallbackPage());
+  }
+
+  // Context
+  writeFileSync(join(targetDir, 'src/context/ProjectContext.jsx'), generateProjectContext());
+
+  // Labelers (conditional per data type)
+  if (dataTypes.includes('image')) {
+    writeFileSync(join(targetDir, 'src/labelers/ImageLabeler.jsx'), generateImageLabeler());
+  }
+  if (dataTypes.includes('text')) {
+    writeFileSync(join(targetDir, 'src/labelers/TextLabeler.jsx'), generateTextLabeler());
+  }
+  if (dataTypes.includes('audio')) {
+    writeFileSync(join(targetDir, 'src/labelers/AudioLabeler.jsx'), generateAudioLabeler());
+  }
+  if (dataTypes.includes('video')) {
+    writeFileSync(join(targetDir, 'src/labelers/VideoLabeler.jsx'), generateVideoLabeler());
+  }
+
+  // Pages
+  writeFileSync(join(targetDir, 'src/pages/Workspace.jsx'), generateWorkspacePage(dataTypes));
+  writeFileSync(join(targetDir, 'src/pages/DatasetManager.jsx'), generateDatasetManagerPage());
+  writeFileSync(join(targetDir, 'src/pages/LabelSchema.jsx'), generateLabelSchemaPage());
+  writeFileSync(join(targetDir, 'src/pages/Export.jsx'), generateExportPage());
+
+  // Utils
+  writeFileSync(join(targetDir, 'src/utils/shortcuts.js'), generateShortcuts(dataTypes));
+  writeFileSync(join(targetDir, 'src/utils/labelFormats.js'), generateLabelFormats());
+}
+
+// ─── Shared Helpers ─────────────────────────────────────────────────────────
+
+function generateViteConfig() {
+  return `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173, open: true },
+  build: { outDir: 'dist' },
+});
+`;
+}
+
+function generateGitignore() {
+  return `node_modules/
+dist/
+.DS_Store
+*.log
+.env
+`;
+}
+
+function generateEnv(oauthCredentials) {
+  const clientId = oauthCredentials?.clientId || '';
+  const clientSecret = oauthCredentials?.clientSecret || '';
+  return `VITE_OAUTH_CLIENT_ID=${clientId}
+VITE_OAUTH_CLIENT_SECRET=${clientSecret}
+VITE_OAUTH_BASE_URL=${OAUTH_BASE_URL}
+VITE_OAUTH_REDIRECT_URI=${OAUTH_REDIRECT_URI}
+`;
+}
+
+function generateEnvExample() {
+  return `VITE_OAUTH_CLIENT_ID=
+VITE_OAUTH_CLIENT_SECRET=
+VITE_OAUTH_BASE_URL=${OAUTH_BASE_URL}
+VITE_OAUTH_REDIRECT_URI=${OAUTH_REDIRECT_URI}
+`;
+}
+
+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 generateIndexCss() {
+  return `/* Reset and base styles */
+*,
+*::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;
+}
+
+#root {
+  height: 100%;
+}
+
+a {
+  color: ${BRAND.primary};
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+}
+`;
+}
+
+// ─── Shared OAuth Modules ───────────────────────────────────────────────────
+
+function generateOAuthModule() {
+  return `// Browser-side OAuth 2.0 + PKCE implementation
+
+function base64UrlEncode(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let str = '';
+  for (const b of bytes) str += String.fromCharCode(b);
+  return btoa(str).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=+$/, '');
+}
+
+export function generateCodeVerifier() {
+  const array = new Uint8Array(64);
+  crypto.getRandomValues(array);
+  return base64UrlEncode(array);
+}
+
+export async function generateCodeChallenge(verifier) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(verifier);
+  const digest = await crypto.subtle.digest('SHA-256', data);
+  return base64UrlEncode(digest);
+}
+
+export async function startLogin() {
+  const verifier = generateCodeVerifier();
+  const challenge = await generateCodeChallenge(verifier);
+  const state = base64UrlEncode(crypto.getRandomValues(new Uint8Array(32)));
+
+  sessionStorage.setItem('oauth_verifier', verifier);
+  sessionStorage.setItem('oauth_state', state);
+
+  const baseUrl = import.meta.env.VITE_OAUTH_BASE_URL;
+  const clientId = import.meta.env.VITE_OAUTH_CLIENT_ID;
+  const redirectUri = import.meta.env.VITE_OAUTH_REDIRECT_URI;
+
+  const params = new URLSearchParams({
+    client_id: clientId,
+    redirect_uri: redirectUri,
+    response_type: 'code',
+    scope: '${OAUTH_SCOPES}',
+    state,
+    code_challenge: challenge,
+    code_challenge_method: 'S256',
+  });
+
+  window.location.href = \`\${baseUrl}/authorize?\${params.toString()}\`;
+}
+
+export async function handleCallback(code, state) {
+  const savedState = sessionStorage.getItem('oauth_state');
+  const verifier = sessionStorage.getItem('oauth_verifier');
+
+  if (state !== savedState) {
+    throw new Error('OAuth state mismatch');
+  }
+
+  const baseUrl = import.meta.env.VITE_OAUTH_BASE_URL;
+  const clientId = import.meta.env.VITE_OAUTH_CLIENT_ID;
+  const clientSecret = import.meta.env.VITE_OAUTH_CLIENT_SECRET;
+  const redirectUri = import.meta.env.VITE_OAUTH_REDIRECT_URI;
+
+  const body = new URLSearchParams({
+    grant_type: 'authorization_code',
+    code,
+    redirect_uri: redirectUri,
+    client_id: clientId,
+    client_secret: clientSecret,
+    code_verifier: verifier,
+  });
+
+  const response = await fetch(\`\${baseUrl}/token\`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  });
+
+  if (!response.ok) {
+    throw new Error('Token exchange failed');
+  }
+
+  const tokens = await response.json();
+  storeTokens(tokens);
+
+  sessionStorage.removeItem('oauth_verifier');
+  sessionStorage.removeItem('oauth_state');
+
+  return tokens;
+}
+
+export async function refreshToken(token) {
+  const baseUrl = import.meta.env.VITE_OAUTH_BASE_URL;
+  const clientId = import.meta.env.VITE_OAUTH_CLIENT_ID;
+  const clientSecret = import.meta.env.VITE_OAUTH_CLIENT_SECRET;
+
+  const body = new URLSearchParams({
+    grant_type: 'refresh_token',
+    refresh_token: token,
+    client_id: clientId,
+    client_secret: clientSecret,
+  });
+
+  const response = await fetch(\`\${baseUrl}/token\`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  });
+
+  if (!response.ok) {
+    throw new Error('Token refresh failed');
+  }
+
+  const tokens = await response.json();
+  storeTokens(tokens);
+  return tokens;
+}
+
+export function getStoredTokens() {
+  const raw = localStorage.getItem('myvillage_tokens');
+  return raw ? JSON.parse(raw) : null;
+}
+
+export function storeTokens(tokens) {
+  localStorage.setItem('myvillage_tokens', JSON.stringify(tokens));
+}
+
+export function clearTokens() {
+  localStorage.removeItem('myvillage_tokens');
+}
+`;
+}
+
+function generateAuthProvider() {
+  return `import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { startLogin, getStoredTokens, clearTokens, refreshToken } from './oauth.js';
+
+const AuthContext = createContext(null);
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
+  return ctx;
+}
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
+
+  const fetchUser = useCallback(async (accessToken) => {
+    const baseUrl = import.meta.env.VITE_OAUTH_BASE_URL;
+    const res = await fetch(\`\${baseUrl}/userinfo\`, {
+      headers: { Authorization: \`Bearer \${accessToken}\` },
+    });
+    if (res.ok) {
+      const data = await res.json();
+      setUser(data);
+    } else {
+      clearTokens();
+      setUser(null);
+    }
+  }, []);
+
+  useEffect(() => {
+    const tokens = getStoredTokens();
+    if (tokens?.access_token) {
+      fetchUser(tokens.access_token).finally(() => setIsLoading(false));
+    } else {
+      setIsLoading(false);
+    }
+  }, [fetchUser]);
+
+  // Auto-refresh before expiry
+  useEffect(() => {
+    const tokens = getStoredTokens();
+    if (!tokens?.expires_in || !tokens?.refresh_token) return;
+
+    const refreshMs = (tokens.expires_in - 60) * 1000;
+    if (refreshMs <= 0) return;
+
+    const timer = setTimeout(async () => {
+      try {
+        const newTokens = await refreshToken(tokens.refresh_token);
+        await fetchUser(newTokens.access_token);
+      } catch {
+        clearTokens();
+        setUser(null);
+      }
+    }, refreshMs);
+
+    return () => clearTimeout(timer);
+  }, [user, fetchUser]);
+
+  const login = () => startLogin();
+
+  const logout = () => {
+    clearTokens();
+    setUser(null);
+    navigate('/login');
+  };
+
+  const isAuthenticated = !!user;
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout, isAuthenticated, isLoading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+`;
+}
+
+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 generateLoginPage() {
+  return `import { useAuth } from '../auth/AuthProvider.jsx';
+
+export default function Login() {
+  const { login } = useAuth();
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <div className="login-logo">
+          <h1>MyVillageOS</h1>
+        </div>
+        <p>Sign in to access your portal</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' }}>
+      <p>Completing sign in...</p>
+    </div>
+  );
+}
+`;
+}
+
+// ─── Portal-Specific Generators ─────────────────────────────────────────────
+
+function generatePortalPackageJson(slug, description, features, oauthCredentials) {
+  return JSON.stringify({
+    name: slug,
+    version: '1.0.0',
+    description,
+    private: true,
+    type: 'module',
+    scripts: {
+      dev: 'vite',
+      build: 'vite build',
+      preview: 'vite preview',
+    },
+    dependencies: {
+      'react': '^18.3.0',
+      'react-dom': '^18.3.0',
+      'react-router-dom': '^6.22.0',
+    },
+    devDependencies: {
+      'vite': '^5.0.0',
+      '@vitejs/plugin-react': '^4.2.0',
+    },
+    myvillage: {
+      appType: 'portal',
+      features,
+      oauthClientId: oauthCredentials?.clientId || null,
+      createdAt: new Date().toISOString(),
+    },
+  }, null, 2) + '\n';
+}
+
+function generatePortalIndexHtml(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>
+`;
+}
+
+function generatePortalReadme(name, description, features) {
+  return `# ${name}
+
+${description}
+
+- **App Type**: Portal
+- **Features**: ${features.join(', ')}
+- **Built with**: MyVillageOS CLI
+
+## Getting Started
+
+\`\`\`bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+src/
+  App.jsx             - Root component with routing
+  components/
+    Layout.jsx        - App shell with sidebar and header
+    Sidebar.jsx       - Navigation sidebar
+    Header.jsx        - Top header bar
+  pages/              - Route page components
+  auth/               - OAuth PKCE authentication (if enabled)
+\`\`\`
+
+## Learn More
+
+- [React Documentation](https://react.dev/)
+- [Vite Documentation](https://vitejs.dev/)
+- [MyVillageOS Developer Guide](https://portal.myvillageproject.ai)
+`;
+}
+
+function generatePortalApp(features) {
+  const hasAuth = features.includes('auth');
+  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 (hasAuth) {
+    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';`);
+  }
+
+  // Build route elements
+  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 (hasAuth) {
+    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 (hasAuth) {
+    routes.push(`          <Route path="/login" element={<Login />} />`);
+    routes.push(`          <Route path="/callback" element={<Callback />} />`);
+  }
+
+  let body;
+  if (hasAuth) {
+    body = `    <AuthProvider>
+      <Routes>
+${routes.join('\n')}
+      </Routes>
+    </AuthProvider>`;
+  } else {
+    body = `    <Routes>
+${routes.join('\n')}
+    </Routes>`;
+  }
+
+  return `${imports.join('\n')}
+
+export default function App() {
+  return (
+${body}
+  );
+}
+`;
+}
+
+function generatePortalAppCss() {
+  return `/* CSS Variables - MyVillage Brand */
+: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;
+}
+
+/* Layout */
+.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;
+}
+
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--brand-dark-brown);
+  color: var(--brand-secondary);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s;
+}
+
+.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);
+}
+
+/* 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;
+}
+
+/* Cards */
+.stat-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.stat-card h3 {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 8px;
+}
+
+.stat-card .value {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--brand-dark-brown);
+}
+
+/* Tables */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.data-table th,
+.data-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+
+.data-table th {
+  background: #fafaf8;
+  font-size: 12px;
+  text-transform: uppercase;
+  color: #888;
+  font-weight: 600;
+}
+
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.badge-admin {
+  background: rgba(176, 124, 0, 0.1);
+  color: var(--brand-primary);
+}
+
+.badge-member {
+  background: rgba(34, 139, 34, 0.1);
+  color: var(--brand-green);
+}
+
+/* Forms */
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #555;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.btn {
+  padding: 8px 20px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: var(--brand-primary);
+  color: white;
+}
+
+.btn-secondary {
+  background: #eee;
+  color: #333;
+}
+
+/* Login */
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: var(--brand-dark-brown);
+}
+
+.login-card {
+  background: white;
+  padding: 40px;
+  border-radius: 16px;
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+}
+
+.login-logo h1 {
+  color: var(--brand-primary);
+  margin-bottom: 8px;
+}
+
+.login-card p {
+  color: #666;
+  margin-bottom: 24px;
+}
+
+.login-btn {
+  width: 100%;
+  padding: 12px;
+  background: var(--brand-primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+/* Welcome */
+.welcome {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 60vh;
+  text-align: center;
+  color: #888;
+}
+
+.welcome h1 {
+  color: var(--brand-dark-brown);
+  margin-bottom: 8px;
+}
+
+/* Notifications */
+.notification-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.notification-item {
+  background: white;
+  padding: 16px;
+  border-radius: 8px;
+  border-left: 3px solid var(--brand-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.notification-item.unread {
+  border-left-color: var(--brand-gold);
+  background: #fffdf5;
+}
+
+.notification-filters {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.notification-filters button {
+  padding: 6px 14px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: white;
+  font-size: 13px;
+}
+
+.notification-filters button.active {
+  background: var(--brand-primary);
+  color: white;
+  border-color: var(--brand-primary);
+}
+
+/* Toggle switches */
+.toggle-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.toggle-switch {
+  width: 44px;
+  height: 24px;
+  background: #ccc;
+  border-radius: 12px;
+  position: relative;
+  cursor: pointer;
+  border: none;
+  transition: background 0.2s;
+}
+
+.toggle-switch.on {
+  background: var(--brand-green);
+}
+
+.toggle-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+.toggle-switch.on::after {
+  transform: translateX(20px);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    z-index: 100;
+    height: 100vh;
+    transform: translateX(-100%);
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .header-hamburger {
+    display: block;
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: var(--brand-dark-brown);
+  }
+
+  .stat-cards {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 769px) {
+  .header-hamburger {
+    display: none;
+  }
+}
+`;
+}
+
+function generatePortalLayout() {
+  return `import { useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import Sidebar from './Sidebar.jsx';
+import Header from './Header.jsx';
+
+export default function Layout() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div className="layout">
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+      <div className="layout-main">
+        <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
+        <main className="layout-content">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generatePortalSidebar(features) {
+  const hasAuth = features.includes('auth');
+  const hasDashboard = features.includes('dashboard');
+  const hasSettings = features.includes('settings');
+  const hasUsers = features.includes('users');
+  const hasNotifications = features.includes('notifications');
+
+  const links = [`        <li><NavLink to="/" end>Home</NavLink></li>`];
+  if (hasDashboard) {
+    links.push(`        <li><NavLink to="/dashboard">Dashboard</NavLink></li>`);
+  }
+  if (hasUsers) {
+    links.push(`        <li><NavLink to="/users">Users</NavLink></li>`);
+  }
+  if (hasNotifications) {
+    links.push(`        <li><NavLink to="/notifications">Notifications</NavLink></li>`);
+  }
+  if (hasSettings) {
+    links.push(`        <li><NavLink to="/settings">Settings</NavLink></li>`);
+  }
+
+  return `import { NavLink } from 'react-router-dom';
+
+export default function Sidebar({ isOpen, onClose }) {
+  return (
+    <aside className={\`sidebar\${isOpen ? ' open' : ''}\`}>
+      <div className="sidebar-brand">
+        <h2>MyVillageOS</h2>
+      </div>
+      <ul className="sidebar-nav">
+${links.join('\n')}
+      </ul>
+    </aside>
+  );
+}
+`;
+}
+
+function generatePortalHeader(hasAuth) {
+  if (hasAuth) {
+    return `import { useAuth } from '../auth/AuthProvider.jsx';
+
+export default function Header({ onMenuClick }) {
+  const { user, logout } = useAuth();
+
+  return (
+    <header className="header">
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        <button className="header-hamburger" onClick={onMenuClick}>&#9776;</button>
+        <span className="header-title">Portal</span>
+      </div>
+      <div className="header-user">
+        {user && <span>{user.name || user.email}</span>}
+        <button onClick={logout}>Logout</button>
+      </div>
+    </header>
+  );
+}
+`;
+  }
+
+  return `export default function Header({ onMenuClick }) {
+  return (
+    <header className="header">
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        <button className="header-hamburger" onClick={onMenuClick}>&#9776;</button>
+        <span className="header-title">Portal</span>
+      </div>
+    </header>
+  );
+}
+`;
+}
+
+function generateDashboardPage() {
+  return `export default function Dashboard() {
+  return (
+    <div>
+      <h2 style={{ marginBottom: '20px' }}>Dashboard</h2>
+
+      <div className="stat-cards">
+        <div className="stat-card">
+          <h3>Total Users</h3>
+          <div className="value">1,248</div>
+        </div>
+        <div className="stat-card">
+          <h3>Active Projects</h3>
+          <div className="value">36</div>
+        </div>
+        <div className="stat-card">
+          <h3>Revenue</h3>
+          <div className="value">$12,480</div>
+        </div>
+        <div className="stat-card">
+          <h3>Growth</h3>
+          <div className="value">+24%</div>
+        </div>
+      </div>
+
+      <div style={{ background: 'white', borderRadius: '12px', padding: '20px', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}>
+        <h3 style={{ marginBottom: '16px' }}>Recent Activity</h3>
+        <ul style={{ listStyle: 'none', padding: 0 }}>
+          <li style={{ padding: '10px 0', borderBottom: '1px solid #eee' }}>New user registered - 2 minutes ago</li>
+          <li style={{ padding: '10px 0', borderBottom: '1px solid #eee' }}>Project "Alpha" deployed - 15 minutes ago</li>
+          <li style={{ padding: '10px 0', borderBottom: '1px solid #eee' }}>Settings updated - 1 hour ago</li>
+          <li style={{ padding: '10px 0' }}>New community created - 3 hours ago</li>
+        </ul>
+      </div>
+
+      <div style={{ marginTop: '24px' }}>
+        <h3 style={{ marginBottom: '12px' }}>Quick Actions</h3>
+        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+          <button className="btn btn-primary">Create Project</button>
+          <button className="btn btn-secondary">Invite User</button>
+          <button className="btn btn-secondary">View Reports</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateSettingsPage() {
+  return `import { useState } from 'react';
+
+export default function Settings() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [bio, setBio] = useState('');
+  const [emailNotifs, setEmailNotifs] = useState(true);
+  const [pushNotifs, setPushNotifs] = useState(false);
+
+  const handleSave = (e) => {
+    e.preventDefault();
+    alert('Settings saved (placeholder)');
+  };
+
+  return (
+    <div>
+      <h2 style={{ marginBottom: '20px' }}>Settings</h2>
+
+      <div style={{ background: 'white', borderRadius: '12px', padding: '24px', marginBottom: '24px', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}>
+        <h3 style={{ marginBottom: '16px' }}>Profile</h3>
+        <form onSubmit={handleSave}>
+          <div className="form-group">
+            <label>Name</label>
+            <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
+          </div>
+          <div className="form-group">
+            <label>Email</label>
+            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" />
+          </div>
+          <div className="form-group">
+            <label>Bio</label>
+            <textarea value={bio} onChange={(e) => setBio(e.target.value)} placeholder="Tell us about yourself" />
+          </div>
+          <button className="btn btn-primary" type="submit">Save Changes</button>
+        </form>
+      </div>
+
+      <div style={{ background: 'white', borderRadius: '12px', padding: '24px', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}>
+        <h3 style={{ marginBottom: '16px' }}>Notification Preferences</h3>
+        <div className="toggle-row">
+          <span>Email notifications</span>
+          <button className={\`toggle-switch\${emailNotifs ? ' on' : ''}\`} onClick={() => setEmailNotifs(!emailNotifs)} />
+        </div>
+        <div className="toggle-row">
+          <span>Push notifications</span>
+          <button className={\`toggle-switch\${pushNotifs ? ' on' : ''}\`} onClick={() => setPushNotifs(!pushNotifs)} />
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateUsersPage() {
+  return `import { useState } from 'react';
+
+const SAMPLE_USERS = [
+  { id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'admin', status: 'Active' },
+  { id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'member', status: 'Active' },
+  { id: 3, name: 'Carol Williams', email: 'carol@example.com', role: 'member', status: 'Active' },
+  { id: 4, name: 'Dave Brown', email: 'dave@example.com', role: 'member', status: 'Inactive' },
+];
+
+export default function Users() {
+  const [search, setSearch] = useState('');
+  const filtered = SAMPLE_USERS.filter(
+    (u) => u.name.toLowerCase().includes(search.toLowerCase()) || u.email.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+        <h2>Users</h2>
+        <button className="btn btn-primary">Invite User</button>
+      </div>
+
+      <div style={{ marginBottom: '16px' }}>
+        <input
+          type="text"
+          placeholder="Search users..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          style={{ padding: '8px 12px', border: '1px solid #ddd', borderRadius: '6px', width: '300px', fontSize: '14px' }}
+        />
+      </div>
+
+      <table className="data-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {filtered.map((user) => (
+            <tr key={user.id}>
+              <td>{user.name}</td>
+              <td>{user.email}</td>
+              <td><span className={\`badge badge-\${user.role}\`}>{user.role}</span></td>
+              <td>{user.status}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+`;
+}
+
+function generateNotificationsPage() {
+  return `import { useState } from 'react';
+
+const SAMPLE_NOTIFICATIONS = [
+  { id: 1, type: 'mentions', message: 'Alice mentioned you in a comment', time: '2 minutes ago', read: false },
+  { id: 2, type: 'updates', message: 'Project "Beta" was deployed successfully', time: '1 hour ago', read: false },
+  { id: 3, type: 'alerts', message: 'API rate limit reached 80%', time: '3 hours ago', read: true },
+  { id: 4, type: 'mentions', message: 'Bob replied to your post', time: '1 day ago', read: true },
+];
+
+export default function Notifications() {
+  const [filter, setFilter] = useState('all');
+  const [notifications, setNotifications] = useState(SAMPLE_NOTIFICATIONS);
+
+  const filtered = filter === 'all' ? notifications : notifications.filter((n) => n.type === filter);
+
+  const markAsRead = (id) => {
+    setNotifications(notifications.map((n) => (n.id === id ? { ...n, read: true } : n)));
+  };
+
+  return (
+    <div>
+      <h2 style={{ marginBottom: '20px' }}>Notifications</h2>
+
+      <div className="notification-filters">
+        {['all', 'mentions', 'updates', 'alerts'].map((type) => (
+          <button
+            key={type}
+            className={filter === type ? 'active' : ''}
+            onClick={() => setFilter(type)}
+          >
+            {type.charAt(0).toUpperCase() + type.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      <div className="notification-list">
+        {filtered.map((n) => (
+          <div key={n.id} className={\`notification-item\${n.read ? '' : ' unread'}\`}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
+              <div>
+                <p style={{ fontWeight: n.read ? 'normal' : '600' }}>{n.message}</p>
+                <small style={{ color: '#888' }}>{n.time}</small>
+              </div>
+              {!n.read && (
+                <button className="btn btn-secondary" style={{ fontSize: '12px', padding: '4px 10px' }} onClick={() => markAsRead(n.id)}>
+                  Mark as read
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateNotFoundPage() {
+  return `import { Link } from 'react-router-dom';
+
+export default function NotFound() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '60vh', textAlign: 'center' }}>
+      <h1 style={{ fontSize: '64px', color: '#ccc', marginBottom: '8px' }}>404</h1>
+      <p style={{ fontSize: '18px', color: '#888', marginBottom: '24px' }}>Page not found</p>
+      <Link to="/" className="btn btn-primary" style={{ textDecoration: 'none', padding: '10px 24px', background: '#B07C00', color: 'white', borderRadius: '8px' }}>
+        Go Home
+      </Link>
+    </div>
+  );
+}
+`;
+}
+
+// ─── Data Labeling Generators ───────────────────────────────────────────────
+
+function generateLabelingPackageJson(slug, description, dataTypes, oauthCredentials) {
+  return JSON.stringify({
+    name: slug,
+    version: '1.0.0',
+    description,
+    private: true,
+    type: 'module',
+    scripts: {
+      dev: 'vite',
+      build: 'vite build',
+      preview: 'vite preview',
+    },
+    dependencies: {
+      'react': '^18.3.0',
+      'react-dom': '^18.3.0',
+      'react-router-dom': '^6.22.0',
+    },
+    devDependencies: {
+      'vite': '^5.0.0',
+      '@vitejs/plugin-react': '^4.2.0',
+    },
+    myvillage: {
+      appType: 'data-labeling',
+      dataTypes,
+      oauthClientId: oauthCredentials?.clientId || null,
+      createdAt: new Date().toISOString(),
+    },
+  }, null, 2) + '\n';
+}
+
+function generateLabelingIndexHtml(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>
+`;
+}
+
+function generateLabelingReadme(name, description, dataTypes) {
+  return `# ${name}
+
+${description}
+
+- **App Type**: Data Labeling
+- **Data Types**: ${dataTypes.join(', ')}
+- **Built with**: MyVillageOS CLI
+
+## Getting Started
+
+\`\`\`bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+src/
+  App.jsx                - Root component with routing
+  components/
+    Layout.jsx           - App shell with toolbar
+    Toolbar.jsx          - Tool selection bar
+    DataTypeSelector.jsx - Switch between data types
+    ProgressBar.jsx      - Labeling progress indicator
+  labelers/              - Data-type-specific annotation components
+  context/
+    ProjectContext.jsx   - Project state management
+  pages/                 - Route page components
+  utils/                 - Keyboard shortcuts and export formats
+\`\`\`
+
+## Learn More
+
+- [React Documentation](https://react.dev/)
+- [Vite Documentation](https://vitejs.dev/)
+- [MyVillageOS Developer Guide](https://portal.myvillageproject.ai)
+`;
+}
+
+function generateLabelingApp(dataTypes, includeAuth) {
+  const imports = [`import { Routes, Route } from 'react-router-dom';`];
+  imports.push(`import { ProjectProvider } from './context/ProjectContext.jsx';`);
+  imports.push(`import Layout from './components/Layout.jsx';`);
+  imports.push(`import Workspace from './pages/Workspace.jsx';`);
+  imports.push(`import DatasetManager from './pages/DatasetManager.jsx';`);
+  imports.push(`import LabelSchema from './pages/LabelSchema.jsx';`);
+  imports.push(`import Export from './pages/Export.jsx';`);
+  imports.push(`import './App.css';`);
+
+  if (includeAuth) {
+    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';`);
+  }
+
+  const layoutRoute = includeAuth
+    ? `          <Route path="/" element={<ProtectedRoute><Layout /></ProtectedRoute>}>`
+    : `          <Route path="/" element={<Layout />}>`;
+
+  const authRoutes = includeAuth
+    ? `\n          <Route path="/login" element={<Login />} />\n          <Route path="/callback" element={<Callback />} />`
+    : '';
+
+  const wrapStart = includeAuth ? `    <AuthProvider>\n      <ProjectProvider>` : `    <ProjectProvider>`;
+  const wrapEnd = includeAuth ? `      </ProjectProvider>\n    </AuthProvider>` : `    </ProjectProvider>`;
+
+  return `${imports.join('\n')}
+
+export default function App() {
+  return (
+${wrapStart}
+      <Routes>
+${layoutRoute}
+            <Route index element={<Workspace />} />
+            <Route path="datasets" element={<DatasetManager />} />
+            <Route path="schema" element={<LabelSchema />} />
+            <Route path="export" element={<Export />} />
+          </Route>${authRoutes}
+      </Routes>
+${wrapEnd}
+  );
+}
+`;
+}
+
+function generateLabelingAppCss() {
+  return `/* CSS Variables - MyVillage Brand */
+: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};
+
+  --toolbar-height: 48px;
+  --nav-height: 44px;
+}
+
+/* Layout */
+.labeling-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.labeling-nav {
+  height: var(--nav-height);
+  background: var(--brand-dark-brown);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 8px;
+}
+
+.labeling-nav a {
+  color: var(--brand-secondary);
+  text-decoration: none;
+  padding: 6px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  transition: background 0.2s;
+}
+
+.labeling-nav a:hover,
+.labeling-nav a.active {
+  background: rgba(255, 215, 0, 0.15);
+  color: var(--brand-gold);
+}
+
+.labeling-nav .nav-brand {
+  color: var(--brand-gold);
+  font-weight: 700;
+  font-size: 14px;
+  margin-right: 16px;
+}
+
+.labeling-content {
+  flex: 1;
+  overflow-y: auto;
+  background: #f5f3ef;
+}
+
+/* Toolbar */
+.toolbar {
+  height: var(--toolbar-height);
+  background: white;
+  border-bottom: 1px solid #e0ddd7;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 4px;
+}
+
+.toolbar-btn {
+  padding: 6px 12px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #555;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.toolbar-btn:hover {
+  background: #f0eee8;
+}
+
+.toolbar-btn.active {
+  background: var(--brand-primary);
+  color: white;
+  border-color: var(--brand-primary);
+}
+
+.toolbar-separator {
+  width: 1px;
+  height: 24px;
+  background: #ddd;
+  margin: 0 8px;
+}
+
+/* Data type selector */
+.data-type-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 8px 16px;
+  background: white;
+  border-bottom: 1px solid #e0ddd7;
+}
+
+.data-type-tab {
+  padding: 6px 16px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: white;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.data-type-tab.active {
+  background: var(--brand-deep-green);
+  color: white;
+  border-color: var(--brand-deep-green);
+}
+
+/* Progress bar */
+.progress-bar-container {
+  padding: 8px 16px;
+  background: white;
+  border-top: 1px solid #e0ddd7;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.progress-track {
+  flex: 1;
+  height: 6px;
+  background: #e0ddd7;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--brand-green);
+  border-radius: 3px;
+  transition: width 0.3s;
+}
+
+.progress-text {
+  font-size: 12px;
+  color: #888;
+  white-space: nowrap;
+}
+
+/* Workspace */
+.workspace {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.workspace-main {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+}
+
+/* Labeler areas */
+.labeler-canvas {
+  background: white;
+  border: 2px dashed #ddd;
+  border-radius: 8px;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+  position: relative;
+}
+
+.labeler-sidebar {
+  width: 240px;
+  background: white;
+  border-left: 1px solid #e0ddd7;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+/* Dataset manager */
+.upload-zone {
+  border: 2px dashed #ccc;
+  border-radius: 12px;
+  padding: 40px;
+  text-align: center;
+  color: #888;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.upload-zone:hover {
+  border-color: var(--brand-primary);
+  color: var(--brand-primary);
+}
+
+.dataset-list {
+  margin-top: 24px;
+}
+
+.dataset-item {
+  background: white;
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* Label schema */
+.schema-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.schema-item {
+  background: white;
+  padding: 12px 16px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.schema-color {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+.schema-shortcut {
+  font-size: 12px;
+  background: #f0eee8;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+/* Export */
+.export-options {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.export-option {
+  flex: 1;
+  background: white;
+  padding: 20px;
+  border-radius: 12px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  text-align: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: border-color 0.2s;
+}
+
+.export-option.selected {
+  border-color: var(--brand-primary);
+}
+
+.export-option h3 {
+  margin-bottom: 4px;
+}
+
+.export-option p {
+  font-size: 13px;
+  color: #888;
+}
+
+/* Keyboard shortcuts overlay */
+.shortcuts-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.shortcuts-panel {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  max-width: 480px;
+  width: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.shortcut-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.shortcut-key {
+  font-family: monospace;
+  background: #f0eee8;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+/* Login (shared) */
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: var(--brand-dark-brown);
+}
+
+.login-card {
+  background: white;
+  padding: 40px;
+  border-radius: 16px;
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+}
+
+.login-logo h1 {
+  color: var(--brand-primary);
+  margin-bottom: 8px;
+}
+
+.login-card p {
+  color: #666;
+  margin-bottom: 24px;
+}
+
+.login-btn {
+  width: 100%;
+  padding: 12px;
+  background: var(--brand-primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+/* Buttons shared */
+.btn {
+  padding: 8px 20px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: var(--brand-primary);
+  color: white;
+}
+
+.btn-secondary {
+  background: #eee;
+  color: #333;
+}
+`;
+}
+
+function generateLabelingLayout() {
+  return `import { NavLink, Outlet } from 'react-router-dom';
+
+export default function Layout() {
+  return (
+    <div className="labeling-layout">
+      <nav className="labeling-nav">
+        <span className="nav-brand">MyVillageOS</span>
+        <NavLink to="/" end>Workspace</NavLink>
+        <NavLink to="/datasets">Datasets</NavLink>
+        <NavLink to="/schema">Label Schema</NavLink>
+        <NavLink to="/export">Export</NavLink>
+      </nav>
+      <div className="labeling-content">
+        <Outlet />
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateToolbar() {
+  return `import { useState } from 'react';
+
+const TOOLS = [
+  { id: 'select', label: 'Select' },
+  { id: 'zoom', label: 'Zoom' },
+  { id: 'pan', label: 'Pan' },
+];
+
+export default function Toolbar({ extraTools = [], activeTool, onToolChange }) {
+  const allTools = [...TOOLS, ...extraTools];
+
+  return (
+    <div className="toolbar">
+      {allTools.map((tool, i) => (
+        <span key={tool.id}>
+          {i > 0 && tool.id === extraTools[0]?.id && <span className="toolbar-separator" />}
+          <button
+            className={\`toolbar-btn\${activeTool === tool.id ? ' active' : ''}\`}
+            onClick={() => onToolChange(tool.id)}
+          >
+            {tool.label}
+          </button>
+        </span>
+      ))}
+    </div>
+  );
+}
+`;
+}
+
+function generateDataTypeSelector(dataTypes) {
+  const tabsArray = dataTypes.map((dt) => `'${dt}'`).join(', ');
+
+  return `const DATA_TYPES = [${tabsArray}];
+
+export default function DataTypeSelector({ activeType, onTypeChange }) {
+  return (
+    <div className="data-type-tabs">
+      {DATA_TYPES.map((type) => (
+        <button
+          key={type}
+          className={\`data-type-tab\${activeType === type ? ' active' : ''}\`}
+          onClick={() => onTypeChange(type)}
+        >
+          {type.charAt(0).toUpperCase() + type.slice(1)}
+        </button>
+      ))}
+    </div>
+  );
+}
+`;
+}
+
+function generateProgressBar() {
+  return `export default function ProgressBar({ labeled, total }) {
+  const pct = total > 0 ? Math.round((labeled / total) * 100) : 0;
+
+  return (
+    <div className="progress-bar-container">
+      <div className="progress-track">
+        <div className="progress-fill" style={{ width: \`\${pct}%\` }} />
+      </div>
+      <span className="progress-text">{labeled} / {total} labeled ({pct}%)</span>
+    </div>
+  );
+}
+`;
+}
+
+function generateKeyboardShortcuts() {
+  return `import { useEffect } from 'react';
+
+export default function KeyboardShortcuts({ shortcuts, isOpen, onClose }) {
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (isOpen) window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="shortcuts-overlay" onClick={onClose}>
+      <div className="shortcuts-panel" onClick={(e) => e.stopPropagation()}>
+        <h2 style={{ marginBottom: '16px' }}>Keyboard Shortcuts</h2>
+        {shortcuts.map((s) => (
+          <div className="shortcut-row" key={s.key}>
+            <span>{s.description}</span>
+            <span className="shortcut-key">{s.key}</span>
+          </div>
+        ))}
+        <p style={{ marginTop: '16px', fontSize: '13px', color: '#888', textAlign: 'center' }}>
+          Press <strong>?</strong> to toggle this panel
+        </p>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateProjectContext() {
+  return `import { createContext, useContext, useReducer } from 'react';
+
+const ProjectContext = createContext(null);
+
+const initialState = {
+  dataset: [],
+  currentIndex: 0,
+  labels: {},
+  schema: [
+    { id: '1', name: 'Object', color: '#FFD700', shortcut: '1' },
+    { id: '2', name: 'Background', color: '#228B22', shortcut: '2' },
+  ],
+  progress: { labeled: 0, total: 0 },
+};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'NEXT_ITEM':
+      return { ...state, currentIndex: Math.min(state.currentIndex + 1, state.dataset.length - 1) };
+    case 'PREV_ITEM':
+      return { ...state, currentIndex: Math.max(state.currentIndex - 1, 0) };
+    case 'ADD_LABEL': {
+      const itemId = state.dataset[state.currentIndex]?.id;
+      if (!itemId) return state;
+      const existing = state.labels[itemId] || [];
+      return {
+        ...state,
+        labels: { ...state.labels, [itemId]: [...existing, action.label] },
+        progress: { ...state.progress, labeled: Object.keys({ ...state.labels, [itemId]: true }).length },
+      };
+    }
+    case 'REMOVE_LABEL': {
+      const id = state.dataset[state.currentIndex]?.id;
+      if (!id) return state;
+      const items = (state.labels[id] || []).filter((_, i) => i !== action.index);
+      return { ...state, labels: { ...state.labels, [id]: items } };
+    }
+    case 'UPDATE_SCHEMA':
+      return { ...state, schema: action.schema };
+    case 'SET_DATASET':
+      return { ...state, dataset: action.dataset, currentIndex: 0, progress: { labeled: 0, total: action.dataset.length } };
+    default:
+      return state;
+  }
+}
+
+export function ProjectProvider({ children }) {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const actions = {
+    nextItem: () => dispatch({ type: 'NEXT_ITEM' }),
+    prevItem: () => dispatch({ type: 'PREV_ITEM' }),
+    addLabel: (label) => dispatch({ type: 'ADD_LABEL', label }),
+    removeLabel: (index) => dispatch({ type: 'REMOVE_LABEL', index }),
+    updateSchema: (schema) => dispatch({ type: 'UPDATE_SCHEMA', schema }),
+    setDataset: (dataset) => dispatch({ type: 'SET_DATASET', dataset }),
+  };
+
+  return (
+    <ProjectContext.Provider value={{ ...state, ...actions }}>
+      {children}
+    </ProjectContext.Provider>
+  );
+}
+
+export function useProject() {
+  const ctx = useContext(ProjectContext);
+  if (!ctx) throw new Error('useProject must be used within ProjectProvider');
+  return ctx;
+}
+`;
+}
+
+// ─── Labelers ───────────────────────────────────────────────────────────────
+
+function generateImageLabeler() {
+  return `import { useRef, useState, useEffect } from 'react';
+
+export default function ImageLabeler({ item, labels, schema, onAddLabel }) {
+  const canvasRef = useRef(null);
+  const [drawing, setDrawing] = useState(false);
+  const [startPos, setStartPos] = useState(null);
+  const [activeClass, setActiveClass] = useState(schema[0]?.id || null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw placeholder background
+    ctx.fillStyle = '#f5f3ef';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = '#ccc';
+    ctx.font = '16px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(item?.name || 'No image loaded', canvas.width / 2, canvas.height / 2);
+
+    // Draw existing labels as rectangles
+    if (labels) {
+      labels.forEach((label) => {
+        const schemaItem = schema.find((s) => s.id === label.classId);
+        ctx.strokeStyle = schemaItem?.color || '#FFD700';
+        ctx.lineWidth = 2;
+        ctx.strokeRect(label.x, label.y, label.width, label.height);
+      });
+    }
+  }, [item, labels, schema]);
+
+  const handleMouseDown = (e) => {
+    const rect = canvasRef.current.getBoundingClientRect();
+    setStartPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    setDrawing(true);
+  };
+
+  const handleMouseUp = (e) => {
+    if (!drawing || !startPos) return;
+    const rect = canvasRef.current.getBoundingClientRect();
+    const endX = e.clientX - rect.left;
+    const endY = e.clientY - rect.top;
+
+    const box = {
+      classId: activeClass,
+      x: Math.min(startPos.x, endX),
+      y: Math.min(startPos.y, endY),
+      width: Math.abs(endX - startPos.x),
+      height: Math.abs(endY - startPos.y),
+    };
+
+    if (box.width > 5 && box.height > 5) {
+      onAddLabel(box);
+    }
+
+    setDrawing(false);
+    setStartPos(null);
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      <div style={{ flex: 1 }}>
+        <canvas
+          ref={canvasRef}
+          width={640}
+          height={480}
+          style={{ border: '1px solid #ddd', borderRadius: '8px', cursor: 'crosshair', maxWidth: '100%' }}
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
+        />
+      </div>
+      <div className="labeler-sidebar">
+        <h3 style={{ marginBottom: '12px', fontSize: '14px' }}>Label Classes</h3>
+        {schema.map((cls) => (
+          <button
+            key={cls.id}
+            onClick={() => setActiveClass(cls.id)}
+            style={{
+              display: 'flex', alignItems: 'center', gap: '8px', width: '100%',
+              padding: '8px', marginBottom: '4px', border: activeClass === cls.id ? '2px solid #333' : '1px solid #ddd',
+              borderRadius: '6px', background: 'white', cursor: 'pointer',
+            }}
+          >
+            <span style={{ width: '16px', height: '16px', borderRadius: '3px', background: cls.color }} />
+            {cls.name}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateTextLabeler() {
+  return `import { useState } from 'react';
+
+export default function TextLabeler({ item, labels, schema, onAddLabel }) {
+  const [activeClass, setActiveClass] = useState(schema[0]?.id || null);
+  const text = item?.content || 'No text loaded. Upload a dataset to get started.';
+
+  const handleTextSelect = () => {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed) return;
+
+    const range = selection.getRangeAt(0);
+    const start = range.startOffset;
+    const end = range.endOffset;
+    const selectedText = selection.toString();
+
+    if (selectedText.trim()) {
+      onAddLabel({
+        classId: activeClass,
+        start,
+        end,
+        text: selectedText,
+      });
+      selection.removeAllRanges();
+    }
+  };
+
+  // Build highlighted text
+  const renderText = () => {
+    if (!labels || labels.length === 0) return text;
+
+    const sorted = [...labels].sort((a, b) => a.start - b.start);
+    const parts = [];
+    let lastEnd = 0;
+
+    sorted.forEach((label, i) => {
+      if (label.start > lastEnd) {
+        parts.push(<span key={\`t-\${i}\`}>{text.slice(lastEnd, label.start)}</span>);
+      }
+      const cls = schema.find((s) => s.id === label.classId);
+      parts.push(
+        <span key={\`l-\${i}\`} style={{ background: cls?.color + '40', borderBottom: \`2px solid \${cls?.color || '#FFD700'}\`, padding: '0 2px' }}>
+          {text.slice(label.start, label.end)}
+        </span>
+      );
+      lastEnd = label.end;
+    });
+
+    if (lastEnd < text.length) {
+      parts.push(<span key="end">{text.slice(lastEnd)}</span>);
+    }
+
+    return parts;
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      <div style={{ flex: 1 }}>
+        <div
+          onMouseUp={handleTextSelect}
+          style={{
+            background: 'white', padding: '24px', borderRadius: '8px', border: '1px solid #ddd',
+            lineHeight: '1.8', fontSize: '15px', minHeight: '300px', cursor: 'text', userSelect: 'text',
+          }}
+        >
+          {renderText()}
+        </div>
+      </div>
+      <div className="labeler-sidebar">
+        <h3 style={{ marginBottom: '12px', fontSize: '14px' }}>Entity Types</h3>
+        {schema.map((cls) => (
+          <button
+            key={cls.id}
+            onClick={() => setActiveClass(cls.id)}
+            style={{
+              display: 'flex', alignItems: 'center', gap: '8px', width: '100%',
+              padding: '8px', marginBottom: '4px', border: activeClass === cls.id ? '2px solid #333' : '1px solid #ddd',
+              borderRadius: '6px', background: 'white', cursor: 'pointer',
+            }}
+          >
+            <span style={{ width: '16px', height: '16px', borderRadius: '3px', background: cls.color }} />
+            {cls.name}
+          </button>
+        ))}
+        <p style={{ marginTop: '12px', fontSize: '12px', color: '#888' }}>
+          Select text to create an annotation
+        </p>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateAudioLabeler() {
+  return `import { useState } from 'react';
+
+export default function AudioLabeler({ item, labels, schema, onAddLabel }) {
+  const [activeClass, setActiveClass] = useState(schema[0]?.id || null);
+  const [transcription, setTranscription] = useState('');
+
+  const addSegment = () => {
+    onAddLabel({
+      classId: activeClass,
+      start: 0,
+      end: 5,
+      transcription,
+    });
+    setTranscription('');
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      <div style={{ flex: 1 }}>
+        <div className="labeler-canvas">
+          <div style={{ textAlign: 'center' }}>
+            <p style={{ marginBottom: '8px' }}>Waveform Display</p>
+            <div style={{
+              width: '100%', maxWidth: '600px', height: '120px', background: '#f0eee8',
+              borderRadius: '8px', margin: '0 auto 16px',
+              display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#aaa',
+            }}>
+              {item?.name || 'No audio loaded'}
+            </div>
+            <div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
+              <button className="btn btn-secondary">&#9664;&#9664;</button>
+              <button className="btn btn-primary">&#9654; Play</button>
+              <button className="btn btn-secondary">&#9654;&#9654;</button>
+            </div>
+          </div>
+        </div>
+
+        <div style={{ marginTop: '16px' }}>
+          <h3 style={{ fontSize: '14px', marginBottom: '8px' }}>Transcription</h3>
+          <textarea
+            value={transcription}
+            onChange={(e) => setTranscription(e.target.value)}
+            placeholder="Type transcription for the current segment..."
+            style={{ width: '100%', minHeight: '80px', padding: '12px', border: '1px solid #ddd', borderRadius: '8px', fontSize: '14px', resize: 'vertical' }}
+          />
+          <button className="btn btn-primary" style={{ marginTop: '8px' }} onClick={addSegment}>
+            Add Segment
+          </button>
+        </div>
+      </div>
+      <div className="labeler-sidebar">
+        <h3 style={{ marginBottom: '12px', fontSize: '14px' }}>Segment Labels</h3>
+        {schema.map((cls) => (
+          <button
+            key={cls.id}
+            onClick={() => setActiveClass(cls.id)}
+            style={{
+              display: 'flex', alignItems: 'center', gap: '8px', width: '100%',
+              padding: '8px', marginBottom: '4px', border: activeClass === cls.id ? '2px solid #333' : '1px solid #ddd',
+              borderRadius: '6px', background: 'white', cursor: 'pointer',
+            }}
+          >
+            <span style={{ width: '16px', height: '16px', borderRadius: '3px', background: cls.color }} />
+            {cls.name}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateVideoLabeler() {
+  return `import { useState } from 'react';
+
+export default function VideoLabeler({ item, labels, schema, onAddLabel }) {
+  const [activeClass, setActiveClass] = useState(schema[0]?.id || null);
+  const [currentFrame, setCurrentFrame] = useState(0);
+  const totalFrames = 300;
+
+  const addAnnotation = () => {
+    onAddLabel({
+      classId: activeClass,
+      frame: currentFrame,
+      type: 'frame-label',
+    });
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      <div style={{ flex: 1 }}>
+        <div className="labeler-canvas">
+          <div style={{ textAlign: 'center' }}>
+            <p>{item?.name || 'No video loaded'}</p>
+            <p style={{ fontSize: '13px', marginTop: '4px' }}>Frame {currentFrame} / {totalFrames}</p>
+          </div>
+        </div>
+
+        <div style={{ marginTop: '12px', display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <button className="btn btn-secondary" onClick={() => setCurrentFrame(Math.max(0, currentFrame - 1))}>
+            &#9664; Prev
+          </button>
+          <input
+            type="range"
+            min="0"
+            max={totalFrames}
+            value={currentFrame}
+            onChange={(e) => setCurrentFrame(Number(e.target.value))}
+            style={{ flex: 1 }}
+          />
+          <button className="btn btn-secondary" onClick={() => setCurrentFrame(Math.min(totalFrames, currentFrame + 1))}>
+            Next &#9654;
+          </button>
+        </div>
+
+        <div style={{ marginTop: '12px', display: 'flex', gap: '8px' }}>
+          <button className="btn btn-primary" onClick={addAnnotation}>Label Frame</button>
+        </div>
+
+        <div style={{ marginTop: '16px', background: 'white', borderRadius: '8px', padding: '12px', border: '1px solid #ddd' }}>
+          <h4 style={{ fontSize: '13px', marginBottom: '8px' }}>Timeline</h4>
+          <div style={{ height: '32px', background: '#f0eee8', borderRadius: '4px', position: 'relative' }}>
+            {labels && labels.map((label, i) => {
+              const cls = schema.find((s) => s.id === label.classId);
+              const left = (label.frame / totalFrames) * 100;
+              return (
+                <div
+                  key={i}
+                  style={{
+                    position: 'absolute', left: \`\${left}%\`, top: '4px',
+                    width: '4px', height: '24px', background: cls?.color || '#FFD700',
+                    borderRadius: '2px',
+                  }}
+                />
+              );
+            })}
+            <div
+              style={{
+                position: 'absolute', left: \`\${(currentFrame / totalFrames) * 100}%\`, top: 0,
+                width: '2px', height: '100%', background: '#333',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="labeler-sidebar">
+        <h3 style={{ marginBottom: '12px', fontSize: '14px' }}>Frame Labels</h3>
+        {schema.map((cls) => (
+          <button
+            key={cls.id}
+            onClick={() => setActiveClass(cls.id)}
+            style={{
+              display: 'flex', alignItems: 'center', gap: '8px', width: '100%',
+              padding: '8px', marginBottom: '4px', border: activeClass === cls.id ? '2px solid #333' : '1px solid #ddd',
+              borderRadius: '6px', background: 'white', cursor: 'pointer',
+            }}
+          >
+            <span style={{ width: '16px', height: '16px', borderRadius: '3px', background: cls.color }} />
+            {cls.name}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+// ─── Data Labeling Pages ────────────────────────────────────────────────────
+
+function generateWorkspacePage(dataTypes) {
+  const labelerImports = [];
+  const labelerCases = [];
+
+  if (dataTypes.includes('image')) {
+    labelerImports.push(`import ImageLabeler from '../labelers/ImageLabeler.jsx';`);
+    labelerCases.push(`      case 'image': return <ImageLabeler item={currentItem} labels={currentLabels} schema={schema} onAddLabel={addLabel} />;`);
+  }
+  if (dataTypes.includes('text')) {
+    labelerImports.push(`import TextLabeler from '../labelers/TextLabeler.jsx';`);
+    labelerCases.push(`      case 'text': return <TextLabeler item={currentItem} labels={currentLabels} schema={schema} onAddLabel={addLabel} />;`);
+  }
+  if (dataTypes.includes('audio')) {
+    labelerImports.push(`import AudioLabeler from '../labelers/AudioLabeler.jsx';`);
+    labelerCases.push(`      case 'audio': return <AudioLabeler item={currentItem} labels={currentLabels} schema={schema} onAddLabel={addLabel} />;`);
+  }
+  if (dataTypes.includes('video')) {
+    labelerImports.push(`import VideoLabeler from '../labelers/VideoLabeler.jsx';`);
+    labelerCases.push(`      case 'video': return <VideoLabeler item={currentItem} labels={currentLabels} schema={schema} onAddLabel={addLabel} />;`);
+  }
+
+  const defaultType = dataTypes[0];
+
+  return `import { useState, useEffect, useCallback } from 'react';
+import { useProject } from '../context/ProjectContext.jsx';
+import Toolbar from '../components/Toolbar.jsx';
+import DataTypeSelector from '../components/DataTypeSelector.jsx';
+import ProgressBar from '../components/ProgressBar.jsx';
+import KeyboardShortcuts from '../components/KeyboardShortcuts.jsx';
+import { getShortcuts } from '../utils/shortcuts.js';
+${labelerImports.join('\n')}
+
+export default function Workspace() {
+  const { dataset, currentIndex, labels, schema, progress, addLabel, nextItem, prevItem } = useProject();
+  const [activeType, setActiveType] = useState('${defaultType}');
+  const [activeTool, setActiveTool] = useState('select');
+  const [showShortcuts, setShowShortcuts] = useState(false);
+
+  const currentItem = dataset[currentIndex] || null;
+  const currentLabels = currentItem ? (labels[currentItem.id] || []) : [];
+  const shortcuts = getShortcuts(activeType);
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === '?') setShowShortcuts((v) => !v);
+      if (e.key === 'ArrowRight') nextItem();
+      if (e.key === 'ArrowLeft') prevItem();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [nextItem, prevItem]);
+
+  const renderLabeler = () => {
+    switch (activeType) {
+${labelerCases.join('\n')}
+      default: return <div className="labeler-canvas"><p>Select a data type</p></div>;
+    }
+  };
+
+  return (
+    <div className="workspace">
+      <DataTypeSelector activeType={activeType} onTypeChange={setActiveType} />
+      <Toolbar activeTool={activeTool} onToolChange={setActiveTool} />
+      <div className="workspace-main">
+        {renderLabeler()}
+      </div>
+      <ProgressBar labeled={progress.labeled} total={progress.total} />
+      <KeyboardShortcuts shortcuts={shortcuts} isOpen={showShortcuts} onClose={() => setShowShortcuts(false)} />
+    </div>
+  );
+}
+`;
+}
+
+function generateDatasetManagerPage() {
+  return `import { useState } from 'react';
+import { useProject } from '../context/ProjectContext.jsx';
+
+export default function DatasetManager() {
+  const { dataset, setDataset } = useProject();
+  const [dragOver, setDragOver] = useState(false);
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+    const files = Array.from(e.dataTransfer.files);
+    const items = files.map((f, i) => ({
+      id: \`item-\${Date.now()}-\${i}\`,
+      name: f.name,
+      type: f.type,
+      size: f.size,
+    }));
+    setDataset([...dataset, ...items]);
+  };
+
+  const handleDelete = (id) => {
+    setDataset(dataset.filter((d) => d.id !== id));
+  };
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <h2 style={{ marginBottom: '20px' }}>Dataset Manager</h2>
+
+      <div
+        className="upload-zone"
+        style={{ borderColor: dragOver ? '#B07C00' : undefined }}
+        onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={handleDrop}
+      >
+        <p style={{ fontSize: '18px', marginBottom: '8px' }}>Drop files here to upload</p>
+        <p>or click to browse</p>
+      </div>
+
+      <div className="dataset-list">
+        <h3 style={{ margin: '16px 0' }}>Items ({dataset.length})</h3>
+        {dataset.length === 0 && <p style={{ color: '#888' }}>No items in dataset. Upload files to get started.</p>}
+        {dataset.map((item) => (
+          <div className="dataset-item" key={item.id}>
+            <div>
+              <strong>{item.name}</strong>
+              <span style={{ marginLeft: '12px', color: '#888', fontSize: '13px' }}>
+                {item.type} - {(item.size / 1024).toFixed(1)} KB
+              </span>
+            </div>
+            <button className="btn btn-secondary" style={{ fontSize: '12px', padding: '4px 10px' }} onClick={() => handleDelete(item.id)}>
+              Delete
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateLabelSchemaPage() {
+  return `import { useState } from 'react';
+import { useProject } from '../context/ProjectContext.jsx';
+
+export default function LabelSchema() {
+  const { schema, updateSchema } = useProject();
+  const [newName, setNewName] = useState('');
+  const [newColor, setNewColor] = useState('#FFD700');
+  const [newShortcut, setNewShortcut] = useState('');
+
+  const addClass = () => {
+    if (!newName.trim()) return;
+    const item = {
+      id: String(Date.now()),
+      name: newName.trim(),
+      color: newColor,
+      shortcut: newShortcut || null,
+    };
+    updateSchema([...schema, item]);
+    setNewName('');
+    setNewShortcut('');
+  };
+
+  const removeClass = (id) => {
+    updateSchema(schema.filter((s) => s.id !== id));
+  };
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <h2 style={{ marginBottom: '20px' }}>Label Schema</h2>
+
+      <div className="schema-list">
+        {schema.map((item) => (
+          <div className="schema-item" key={item.id}>
+            <span className="schema-color" style={{ background: item.color }} />
+            <span style={{ flex: 1 }}>{item.name}</span>
+            {item.shortcut && <span className="schema-shortcut">{item.shortcut}</span>}
+            <button className="btn btn-secondary" style={{ fontSize: '12px', padding: '4px 10px' }} onClick={() => removeClass(item.id)}>
+              Remove
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <div style={{ marginTop: '24px', background: 'white', borderRadius: '12px', padding: '20px', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}>
+        <h3 style={{ marginBottom: '12px' }}>Add Label Class</h3>
+        <div style={{ display: 'flex', gap: '12px', alignItems: 'end', flexWrap: 'wrap' }}>
+          <div className="form-group" style={{ marginBottom: 0 }}>
+            <label>Name</label>
+            <input type="text" value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="e.g. Person" />
+          </div>
+          <div className="form-group" style={{ marginBottom: 0 }}>
+            <label>Color</label>
+            <input type="color" value={newColor} onChange={(e) => setNewColor(e.target.value)} style={{ width: '48px', height: '36px', padding: '2px' }} />
+          </div>
+          <div className="form-group" style={{ marginBottom: 0 }}>
+            <label>Shortcut</label>
+            <input type="text" value={newShortcut} onChange={(e) => setNewShortcut(e.target.value)} placeholder="e.g. 3" maxLength={1} style={{ width: '60px' }} />
+          </div>
+          <button className="btn btn-primary" onClick={addClass}>Add</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateExportPage() {
+  return `import { useState } from 'react';
+import { useProject } from '../context/ProjectContext.jsx';
+import { exportAsJSON, exportAsCSV, exportAsCOCO } from '../utils/labelFormats.js';
+
+const FORMATS = [
+  { id: 'json', name: 'JSON', description: 'Standard JSON format' },
+  { id: 'csv', name: 'CSV', description: 'Comma-separated values' },
+  { id: 'coco', name: 'COCO', description: 'COCO annotation format' },
+];
+
+export default function Export() {
+  const { dataset, labels, schema } = useProject();
+  const [selectedFormat, setSelectedFormat] = useState('json');
+
+  const handleExport = () => {
+    let content;
+    let filename;
+    let type;
+
+    switch (selectedFormat) {
+      case 'csv':
+        content = exportAsCSV(dataset, labels, schema);
+        filename = 'labels.csv';
+        type = 'text/csv';
+        break;
+      case 'coco':
+        content = exportAsCOCO(dataset, labels, schema);
+        filename = 'annotations.json';
+        type = 'application/json';
+        break;
+      default:
+        content = exportAsJSON(dataset, labels, schema);
+        filename = 'labels.json';
+        type = 'application/json';
+    }
+
+    const blob = new Blob([content], { type });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const labeledCount = Object.keys(labels).length;
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <h2 style={{ marginBottom: '20px' }}>Export Labels</h2>
+
+      <p style={{ marginBottom: '16px', color: '#666' }}>
+        {labeledCount} of {dataset.length} items labeled
+      </p>
+
+      <div className="export-options">
+        {FORMATS.map((fmt) => (
+          <div
+            key={fmt.id}
+            className={\`export-option\${selectedFormat === fmt.id ? ' selected' : ''}\`}
+            onClick={() => setSelectedFormat(fmt.id)}
+          >
+            <h3>{fmt.name}</h3>
+            <p>{fmt.description}</p>
+          </div>
+        ))}
+      </div>
+
+      <button className="btn btn-primary" onClick={handleExport} style={{ fontSize: '16px', padding: '12px 32px' }}>
+        Download {selectedFormat.toUpperCase()}
+      </button>
+    </div>
+  );
+}
+`;
+}
+
+// ─── Utils ──────────────────────────────────────────────────────────────────
+
+function generateShortcuts(dataTypes) {
+  const sections = [];
+  sections.push(`  const common = [
+    { key: '?', description: 'Toggle keyboard shortcuts' },
+    { key: '\\u2192', description: 'Next item' },
+    { key: '\\u2190', description: 'Previous item' },
+  ];`);
+
+  if (dataTypes.includes('image')) {
+    sections.push(`  const image = [
+    { key: 'B', description: 'Bounding box tool' },
+    { key: 'P', description: 'Polygon tool' },
+    { key: 'V', description: 'Select tool' },
+    { key: 'Z', description: 'Zoom tool' },
+  ];`);
+  }
+  if (dataTypes.includes('text')) {
+    sections.push(`  const text = [
+    { key: 'Enter', description: 'Confirm selection' },
+    { key: 'Escape', description: 'Clear selection' },
+  ];`);
+  }
+  if (dataTypes.includes('audio')) {
+    sections.push(`  const audio = [
+    { key: 'Space', description: 'Play / Pause' },
+    { key: 'S', description: 'Add segment marker' },
+  ];`);
+  }
+  if (dataTypes.includes('video')) {
+    sections.push(`  const video = [
+    { key: 'Space', description: 'Play / Pause' },
+    { key: ',', description: 'Previous frame' },
+    { key: '.', description: 'Next frame' },
+    { key: 'L', description: 'Label current frame' },
+  ];`);
+  }
+
+  const switchCases = [];
+  if (dataTypes.includes('image')) switchCases.push(`    case 'image': return [...common, ...image];`);
+  if (dataTypes.includes('text')) switchCases.push(`    case 'text': return [...common, ...text];`);
+  if (dataTypes.includes('audio')) switchCases.push(`    case 'audio': return [...common, ...audio];`);
+  if (dataTypes.includes('video')) switchCases.push(`    case 'video': return [...common, ...video];`);
+
+  return `export function getShortcuts(dataType) {
+${sections.join('\n\n')}
+
+  switch (dataType) {
+${switchCases.join('\n')}
+    default: return common;
+  }
+}
+`;
+}
+
+function generateLabelFormats() {
+  return `export function exportAsJSON(dataset, labels, schema) {
+  const output = {
+    schema: schema.map((s) => ({ id: s.id, name: s.name, color: s.color })),
+    items: dataset.map((item) => ({
+      id: item.id,
+      name: item.name,
+      labels: labels[item.id] || [],
+    })),
+  };
+  return JSON.stringify(output, null, 2);
+}
+
+export function exportAsCSV(dataset, labels, schema) {
+  const rows = ['item_id,item_name,label_class,label_data'];
+
+  dataset.forEach((item) => {
+    const itemLabels = labels[item.id] || [];
+    if (itemLabels.length === 0) {
+      rows.push(\`\${item.id},\${item.name},,\`);
+    } else {
+      itemLabels.forEach((label) => {
+        const cls = schema.find((s) => s.id === label.classId);
+        const data = JSON.stringify(label).replace(/"/g, '""');
+        rows.push(\`\${item.id},\${item.name},\${cls?.name || ''},"\${data}"\`);
+      });
+    }
+  });
+
+  return rows.join('\\n');
+}
+
+export function exportAsCOCO(dataset, labels, schema) {
+  const output = {
+    info: { description: 'MyVillageOS Data Labeling Export', version: '1.0' },
+    categories: schema.map((s, i) => ({ id: i + 1, name: s.name })),
+    images: dataset.map((item, i) => ({ id: i + 1, file_name: item.name })),
+    annotations: [],
+  };
+
+  let annId = 1;
+  dataset.forEach((item, itemIdx) => {
+    const itemLabels = labels[item.id] || [];
+    itemLabels.forEach((label) => {
+      const catIdx = schema.findIndex((s) => s.id === label.classId);
+      output.annotations.push({
+        id: annId++,
+        image_id: itemIdx + 1,
+        category_id: catIdx + 1,
+        bbox: label.x != null ? [label.x, label.y, label.width, label.height] : [],
+      });
+    });
+  });
+
+  return JSON.stringify(output, null, 2);
+}
+`;
+}