create-githat-app 0.1.1

package/src/scaffold.js

@@ -0,0 +1,529 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const nextjsTemplates = require('./templates');
+const reactTemplates = require('./templates/react');
+const pageTemplates = require('./templates/pages');
+const componentTemplates = require('./templates/components');
+
+// ANSI helpers
+const c = {
+  reset: '\x1b[0m', bold: '\x1b[1m', dim: '\x1b[2m',
+  green: '\x1b[32m', cyan: '\x1b[36m', magenta: '\x1b[35m', red: '\x1b[31m',
+};
+
+const ok = (msg) => console.log(`  ${c.green}✓${c.reset} ${msg}`);
+const info = (msg) => console.log(`  ${c.cyan}◐${c.reset} ${msg}`);
+
+async function scaffold(options) {
+  const { projectName, framework, typescript, packageManager, publishableKey, features } = options;
+  const root = path.resolve(process.cwd(), projectName);
+
+  if (fs.existsSync(root)) {
+    console.error(`\n  ${c.red}✗${c.reset} Directory "${projectName}" already exists.\n`);
+    process.exit(1);
+  }
+
+  console.log();
+  fs.mkdirSync(root, { recursive: true });
+
+  if (framework === 'react') {
+    scaffoldReact(root, options);
+  } else {
+    scaffoldNextjs(root, options);
+  }
+
+  // Install dependencies
+  const installCmd = { npm: 'npm install', pnpm: 'pnpm install', yarn: 'yarn' }[packageManager] || 'npm install';
+  info(`Installing dependencies with ${packageManager}...`);
+  try {
+    execSync(installCmd, { cwd: root, stdio: 'ignore' });
+    ok('Installed dependencies');
+  } catch {
+    console.log(`  ${c.red}⚠${c.reset}  Could not auto-install. Run ${c.cyan}${installCmd}${c.reset} manually.`);
+  }
+
+  const devCmd = packageManager === 'npm' ? 'npm run dev' : `${packageManager} dev`;
+  const port = framework === 'react' ? '5173' : '3000';
+
+  // Build routes list for the banner
+  const routes = [
+    '  /sign-up    Create account  ',
+    '  /sign-in    Sign in         ',
+  ];
+  if (features.forgotPassword) routes.push('  /forgot-pw  Reset password  ');
+  if (features.dashboard) routes.push('  /dashboard  Protected page  ');
+  if (features.settings) routes.push('  /settings   Profile & prefs ');
+  if (features.team) routes.push('  /team       Org members     ');
+  if (features.apps) routes.push('  /apps       API keys        ');
+
+  const routeLines = routes.map((r) =>
+    `  ${c.magenta}│${c.reset} ${c.dim}${r}${c.reset} ${c.magenta}│${c.reset}`
+  ).join('\n');
+
+  console.log(`
+  ${c.magenta}┌─────────────────────────────────────┐${c.reset}
+  ${c.magenta}│${c.reset}                                     ${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}   ${c.green}${c.bold}✓ Ready!${c.reset}                          ${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}                                     ${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}   ${c.cyan}cd ${projectName}${c.reset}${pad(25 - projectName.length)}${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}   ${c.cyan}${devCmd}${c.reset}${pad(33 - devCmd.length)}${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}                                     ${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}   ${c.dim}→ http://localhost:${port}${c.reset}${pad(port.length === 4 ? 8 : 9)}${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}                                     ${c.magenta}│${c.reset}
+${routeLines}
+  ${c.magenta}│${c.reset}                                     ${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}   ${c.dim}Docs: https://githat.io/docs/sdk${c.reset}  ${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}                                     ${c.magenta}│${c.reset}
+  ${c.magenta}└─────────────────────────────────────┘${c.reset}
+
+  ${c.bold}Next steps:${c.reset}
+  ${c.dim}1.${c.reset} Get your publishable key at ${c.cyan}https://githat.io/dashboard/apps${c.reset}
+  ${c.dim}2.${c.reset} Add it to ${c.cyan}.env.local${c.reset} (or ${c.cyan}.env${c.reset} for Vite)
+  ${c.dim}3.${c.reset} Run ${c.cyan}${devCmd}${c.reset} and open ${c.cyan}http://localhost:${port}${c.reset}
+`);
+}
+
+function pad(n) { return ' '.repeat(Math.max(0, n)); }
+
+// ─── Next.js (App Router) ────────────────────────────────────────────
+
+function scaffoldNextjs(root, options) {
+  const { projectName, typescript, publishableKey, features } = options;
+  const ext = typescript ? 'tsx' : 'jsx';
+  const hasSidebar = features.settings || features.team || features.apps;
+
+  const pkg = {
+    name: projectName, version: '0.1.0', private: true,
+    scripts: { dev: 'next dev', build: 'next build', start: 'next start', lint: 'next lint' },
+    dependencies: { next: '^14.0.0', react: '^18.0.0', 'react-dom': '^18.0.0', '@githat/nextjs': '^0.2.0' },
+    devDependencies: {},
+  };
+  if (typescript) {
+    Object.assign(pkg.devDependencies, {
+      typescript: '^5.0.0', '@types/react': '^18.0.0', '@types/react-dom': '^18.0.0', '@types/node': '^20.0.0',
+    });
+  }
+  writeFile(root, 'package.json', JSON.stringify(pkg, null, 2));
+
+  writeFile(root, 'next.config.mjs',
+    `/** @type {import('next').NextConfig} */\nconst nextConfig = {};\nexport default nextConfig;\n`);
+
+  if (typescript) {
+    writeFile(root, 'tsconfig.json', JSON.stringify({
+      compilerOptions: {
+        target: 'ES2017', lib: ['dom', 'dom.iterable', 'esnext'], allowJs: true, skipLibCheck: true,
+        strict: true, noEmit: true, esModuleInterop: true, module: 'esnext', moduleResolution: 'bundler',
+        resolveJsonModule: true, isolatedModules: true, jsx: 'preserve', incremental: true,
+        plugins: [{ name: 'next' }], paths: { '@/*': ['./*'] },
+      },
+      include: ['next-env.d.ts', '**/*.ts', '**/*.tsx', '.next/types/**/*.ts'],
+      exclude: ['node_modules'],
+    }, null, 2));
+  }
+
+  // Public routes for middleware
+  const publicRoutes = ['/', '/sign-in', '/sign-up'];
+  if (features.forgotPassword) publicRoutes.push('/forgot-password', '/reset-password');
+
+  writeFile(root, '.env.local', `NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY=${publishableKey}\n`);
+  writeFile(root, '.env.example', `# Get your publishable key at https://githat.io/dashboard/apps\nNEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY=pk_live_your_key_here\n`);
+  writeFile(root, '.gitignore', 'node_modules\n.next\n.env*.local\nout\n');
+  writeFile(root, `middleware.${typescript ? 'ts' : 'js'}`, nextjsMiddleware(publicRoutes));
+
+  fs.mkdirSync(path.join(root, 'app'), { recursive: true });
+  writeFile(root, `app/layout.${ext}`, nextjsTemplates.layout(typescript));
+  writeFile(root, `app/page.${ext}`, nextjsTemplates.page());
+  writeFile(root, 'app/globals.css', nextjsTemplates.globalsCss());
+  ok('Created project structure');
+
+  // Auth pages
+  fs.mkdirSync(path.join(root, 'app', '(auth)', 'sign-in'), { recursive: true });
+  fs.mkdirSync(path.join(root, 'app', '(auth)', 'sign-up'), { recursive: true });
+  writeFile(root, `app/(auth)/sign-in/page.${ext}`, nextjsTemplates.signInPage());
+  writeFile(root, `app/(auth)/sign-up/page.${ext}`, nextjsTemplates.signUpPage());
+  ok('Generated auth pages (sign-in, sign-up)');
+
+  // Forgot / Reset password
+  if (features.forgotPassword) {
+    fs.mkdirSync(path.join(root, 'app', '(auth)', 'forgot-password'), { recursive: true });
+    fs.mkdirSync(path.join(root, 'app', '(auth)', 'reset-password'), { recursive: true });
+    writeFile(root, `app/(auth)/forgot-password/page.${ext}`, pageTemplates.forgotPasswordPage());
+    writeFile(root, `app/(auth)/reset-password/page.${ext}`, pageTemplates.resetPasswordPage());
+    ok('Added forgot/reset password flow');
+  }
+
+  // Dashboard + sub-pages
+  if (features.dashboard) {
+    fs.mkdirSync(path.join(root, 'app', 'dashboard'), { recursive: true });
+    writeFile(root, `app/dashboard/layout.${ext}`, nextjsDashboardLayout(features));
+    writeFile(root, `app/dashboard/page.${ext}`, nextjsTemplates.dashboardPage());
+
+    // Verify email banner component
+    fs.mkdirSync(path.join(root, 'app', 'components'), { recursive: true });
+    writeFile(root, `app/components/VerifyEmailBanner.${ext}`, componentTemplates.verifyEmailBanner());
+
+    if (hasSidebar) {
+      writeFile(root, `app/components/Sidebar.${ext}`, componentTemplates.sidebar(features));
+    }
+
+    ok('Added protected dashboard');
+
+    if (features.settings) {
+      fs.mkdirSync(path.join(root, 'app', 'dashboard', 'settings'), { recursive: true });
+      writeFile(root, `app/dashboard/settings/page.${ext}`, pageTemplates.settingsPage());
+      ok('Added settings page');
+    }
+    if (features.team) {
+      fs.mkdirSync(path.join(root, 'app', 'dashboard', 'team'), { recursive: true });
+      writeFile(root, `app/dashboard/team/page.${ext}`, pageTemplates.teamPage());
+      ok('Added team management page');
+    }
+    if (features.apps) {
+      fs.mkdirSync(path.join(root, 'app', 'dashboard', 'apps'), { recursive: true });
+      writeFile(root, `app/dashboard/apps/page.${ext}`, pageTemplates.appsPage());
+      ok('Added API keys page');
+    }
+  }
+
+  // README
+  writeFile(root, 'README.md', generateReadme(projectName, 'nextjs', features));
+  ok('Generated README.md');
+
+  ok('Configured middleware');
+}
+
+function nextjsMiddleware(publicRoutes) {
+  const routesStr = publicRoutes.map((r) => `'${r}'`).join(', ');
+  return `import { authMiddleware } from '@githat/nextjs/middleware';
+
+export default authMiddleware({
+  publicRoutes: [${routesStr}],
+  signInUrl: '/sign-in',
+});
+
+export const config = {
+  matcher: ['/((?!_next|api|.*\\\\..*).*)'],
+};
+`;
+}
+
+function nextjsDashboardLayout(features) {
+  const hasSidebar = features.settings || features.team || features.apps;
+  const sidebarImport = hasSidebar ? `\nimport Sidebar from '../components/Sidebar';` : '';
+  const bannerImport = `\nimport VerifyEmailBanner from '../components/VerifyEmailBanner';`;
+  const sidebarJsx = hasSidebar
+    ? `\n          <Sidebar />\n          <main style={{ flex: 1, padding: '2rem', overflow: 'auto' }}>`
+    : `\n          <main style={{ padding: '2rem' }}>`;
+
+  return `import { ProtectedRoute, UserButton, OrgSwitcher } from '@githat/nextjs';${sidebarImport}${bannerImport}
+
+export default function DashboardLayout({ children }) {
+  return (
+    <ProtectedRoute>
+      <div style={{ minHeight: '100vh', background: '#09090b', display: 'flex', flexDirection: 'column' }}>
+        <VerifyEmailBanner />
+        <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '1rem 2rem', borderBottom: '1px solid #1e1e2e' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <h2 style={{ fontSize: '1.125rem', fontWeight: 600, color: '#fafafa' }}>Dashboard</h2>
+            <OrgSwitcher />
+          </div>
+          <UserButton />
+        </header>
+        <div style={{ display: 'flex', flex: 1 }}>${sidebarJsx}
+            {children}
+          </main>
+        </div>
+      </div>
+    </ProtectedRoute>
+  );
+}
+`;
+}
+
+// ─── React (Vite) ────────────────────────────────────────────────────
+
+function scaffoldReact(root, options) {
+  const { projectName, typescript, publishableKey, features } = options;
+  const ext = typescript ? 'tsx' : 'jsx';
+  const hasSidebar = features.settings || features.team || features.apps;
+
+  const pkg = {
+    name: projectName, version: '0.1.0', private: true, type: 'module',
+    scripts: { dev: 'vite', build: 'vite build', preview: 'vite preview' },
+    dependencies: {
+      react: '^18.0.0', 'react-dom': '^18.0.0', 'react-router-dom': '^6.0.0', '@githat/nextjs': '^0.2.0',
+    },
+    devDependencies: { vite: '^5.0.0', '@vitejs/plugin-react': '^4.0.0' },
+  };
+  if (typescript) {
+    Object.assign(pkg.devDependencies, {
+      typescript: '^5.0.0', '@types/react': '^18.0.0', '@types/react-dom': '^18.0.0',
+    });
+  }
+  writeFile(root, 'package.json', JSON.stringify(pkg, null, 2));
+
+  writeFile(root, typescript ? 'vite.config.ts' : 'vite.config.js', reactTemplates.viteConfig());
+
+  if (typescript) {
+    writeFile(root, 'tsconfig.json', JSON.stringify({
+      compilerOptions: {
+        target: 'ES2020', lib: ['ES2020', 'DOM', 'DOM.Iterable'], module: 'ESNext', skipLibCheck: true,
+        moduleResolution: 'bundler', allowImportingTsExtensions: true, isolatedModules: true,
+        moduleDetection: 'force', noEmit: true, jsx: 'react-jsx', strict: true,
+      },
+      include: ['src'],
+    }, null, 2));
+  }
+
+  writeFile(root, '.env', `VITE_GITHAT_PUBLISHABLE_KEY=${publishableKey}\n`);
+  writeFile(root, '.env.example', `# Get your publishable key at https://githat.io/dashboard/apps\nVITE_GITHAT_PUBLISHABLE_KEY=pk_live_your_key_here\n`);
+  writeFile(root, '.gitignore', 'node_modules\ndist\n.env*.local\n');
+  writeFile(root, 'index.html', reactTemplates.indexHtml(projectName, typescript));
+  ok('Created project structure');
+
+  fs.mkdirSync(path.join(root, 'src', 'pages'), { recursive: true });
+  fs.mkdirSync(path.join(root, 'src', 'components'), { recursive: true });
+  writeFile(root, `src/main.${ext}`, reactTemplates.mainEntry());
+  writeFile(root, `src/App.${ext}`, reactAppRoutes(features));
+  writeFile(root, 'src/index.css', reactTemplates.indexCss());
+
+  // Core pages
+  writeFile(root, `src/pages/Home.${ext}`, reactTemplates.homePage());
+  writeFile(root, `src/pages/SignIn.${ext}`, reactTemplates.signInPage());
+  writeFile(root, `src/pages/SignUp.${ext}`, reactTemplates.signUpPage());
+  ok('Generated auth pages (sign-in, sign-up)');
+
+  // Forgot / Reset password
+  if (features.forgotPassword) {
+    writeFile(root, `src/pages/ForgotPassword.${ext}`, pageTemplates.forgotPasswordPage());
+    writeFile(root, `src/pages/ResetPassword.${ext}`, pageTemplates.resetPasswordPage());
+    ok('Added forgot/reset password flow');
+  }
+
+  // Dashboard + sub-pages
+  if (features.dashboard) {
+    writeFile(root, `src/pages/Dashboard.${ext}`, reactTemplates.dashboardPage());
+    writeFile(root, `src/components/VerifyEmailBanner.${ext}`, componentTemplates.verifyEmailBanner());
+
+    if (hasSidebar) {
+      writeFile(root, `src/components/Sidebar.${ext}`, componentTemplates.sidebar(features));
+    }
+
+    writeFile(root, `src/pages/DashboardLayout.${ext}`, reactDashboardLayout(features));
+    ok('Added protected dashboard');
+
+    if (features.settings) {
+      writeFile(root, `src/pages/Settings.${ext}`, pageTemplates.settingsPage());
+      ok('Added settings page');
+    }
+    if (features.team) {
+      writeFile(root, `src/pages/Team.${ext}`, pageTemplates.teamPage());
+      ok('Added team management page');
+    }
+    if (features.apps) {
+      writeFile(root, `src/pages/Apps.${ext}`, pageTemplates.appsPage());
+      ok('Added API keys page');
+    }
+  }
+
+  // README
+  writeFile(root, 'README.md', generateReadme(projectName, 'react', features));
+  ok('Generated README.md');
+}
+
+function reactAppRoutes(features) {
+  const imports = [
+    `import { Routes, Route } from 'react-router-dom';`,
+    `import Home from './pages/Home';`,
+    `import SignIn from './pages/SignIn';`,
+    `import SignUp from './pages/SignUp';`,
+  ];
+  const routes = [
+    `      <Route path="/" element={<Home />} />`,
+    `      <Route path="/sign-in" element={<SignIn />} />`,
+    `      <Route path="/sign-up" element={<SignUp />} />`,
+  ];
+
+  if (features.forgotPassword) {
+    imports.push(`import ForgotPassword from './pages/ForgotPassword';`);
+    imports.push(`import ResetPassword from './pages/ResetPassword';`);
+    routes.push(`      <Route path="/forgot-password" element={<ForgotPassword />} />`);
+    routes.push(`      <Route path="/reset-password" element={<ResetPassword />} />`);
+  }
+
+  if (features.dashboard) {
+    imports.push(`import DashboardLayout from './pages/DashboardLayout';`);
+    imports.push(`import Dashboard from './pages/Dashboard';`);
+
+    const subRoutes = [`        <Route index element={<Dashboard />} />`];
+    if (features.settings) {
+      imports.push(`import Settings from './pages/Settings';`);
+      subRoutes.push(`        <Route path="settings" element={<Settings />} />`);
+    }
+    if (features.team) {
+      imports.push(`import Team from './pages/Team';`);
+      subRoutes.push(`        <Route path="team" element={<Team />} />`);
+    }
+    if (features.apps) {
+      imports.push(`import Apps from './pages/Apps';`);
+      subRoutes.push(`        <Route path="apps" element={<Apps />} />`);
+    }
+
+    routes.push(`      <Route path="/dashboard" element={<DashboardLayout />}>`);
+    routes.push(...subRoutes);
+    routes.push(`      </Route>`);
+  }
+
+  return `${imports.join('\n')}
+
+export default function App() {
+  return (
+    <Routes>
+${routes.join('\n')}
+    </Routes>
+  );
+}
+`;
+}
+
+function reactDashboardLayout(features) {
+  const hasSidebar = features.settings || features.team || features.apps;
+  const sidebarImport = hasSidebar ? `\nimport Sidebar from '../components/Sidebar';` : '';
+  const sidebarJsx = hasSidebar
+    ? `\n          <Sidebar />\n          <main style={{ flex: 1, padding: '2rem', overflow: 'auto' }}>`
+    : `\n          <main style={{ padding: '2rem' }}>`;
+
+  return `import { Outlet } from 'react-router-dom';
+import { ProtectedRoute, UserButton, OrgSwitcher } from '@githat/nextjs';
+import VerifyEmailBanner from '../components/VerifyEmailBanner';${sidebarImport}
+
+export default function DashboardLayout() {
+  return (
+    <ProtectedRoute>
+      <div style={{ minHeight: '100vh', background: '#09090b', display: 'flex', flexDirection: 'column' }}>
+        <VerifyEmailBanner />
+        <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '1rem 2rem', borderBottom: '1px solid #1e1e2e' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <h2 style={{ fontSize: '1.125rem', fontWeight: 600, color: '#fafafa' }}>Dashboard</h2>
+            <OrgSwitcher />
+          </div>
+          <UserButton />
+        </header>
+        <div style={{ display: 'flex', flex: 1 }}>${sidebarJsx}
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    </ProtectedRoute>
+  );
+}
+`;
+}
+
+// ─── README Generator ────────────────────────────────────────────────
+
+function generateReadme(projectName, framework, features) {
+  const isNext = framework !== 'react';
+  const port = isNext ? '3000' : '5173';
+  const devCmd = isNext ? 'npm run dev' : 'npm run dev';
+  const envFile = isNext ? '.env.local' : '.env';
+  const envVar = isNext ? 'NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY' : 'VITE_GITHAT_PUBLISHABLE_KEY';
+
+  const routes = ['- `/sign-in` — Sign in', '- `/sign-up` — Create account'];
+  if (features.forgotPassword) routes.push('- `/forgot-password` — Password recovery');
+  if (features.dashboard) routes.push('- `/dashboard` — Protected dashboard');
+  if (features.settings) routes.push('- `/dashboard/settings` — Profile, avatar, password');
+  if (features.team) routes.push('- `/dashboard/team` — Invite members, manage roles');
+  if (features.apps) routes.push('- `/dashboard/apps` — Create apps, manage API keys');
+
+  return `# ${projectName}
+
+Built with [GitHat](https://githat.io) — authentication, teams, and API keys out of the box.
+
+## Getting Started
+
+1. Install dependencies:
+
+\`\`\`bash
+npm install
+\`\`\`
+
+2. Add your GitHat publishable key to \`${envFile}\`:
+
+\`\`\`env
+${envVar}=pk_live_your_key_here
+\`\`\`
+
+Get your key at [https://githat.io/dashboard/apps](https://githat.io/dashboard/apps).
+
+3. Start the dev server:
+
+\`\`\`bash
+${devCmd}
+\`\`\`
+
+4. Open [http://localhost:${port}](http://localhost:${port})
+
+## Pages
+
+${routes.join('\n')}
+
+## GitHat SDK
+
+This project uses [\`@githat/nextjs\`](https://www.npmjs.com/package/@githat/nextjs) for authentication. Key imports:
+
+\`\`\`tsx
+import { useAuth, UserButton, OrgSwitcher } from '@githat/nextjs';
+
+const { user, org, signIn, signUp, signOut } = useAuth();
+\`\`\`
+
+See the [SDK docs](https://www.npmjs.com/package/@githat/nextjs) for the full API.
+
+## Deploy
+
+${isNext ? `### Vercel (recommended)
+
+\`\`\`bash
+npx vercel
+\`\`\`
+
+Add \`${envVar}\` to your Vercel project environment variables.` : `### Vercel
+
+\`\`\`bash
+npx vercel
+\`\`\`
+
+### Netlify
+
+\`\`\`bash
+npx netlify deploy
+\`\`\`
+
+Add \`${envVar}\` to your hosting provider's environment variables.`}
+
+## Learn More
+
+- [GitHat Documentation](https://githat.io/docs)
+- [SDK Reference](https://www.npmjs.com/package/@githat/nextjs)
+- [API Reference](https://githat.io/docs/api)
+`;
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────
+
+function writeFile(root, relativePath, content) {
+  const fullPath = path.join(root, relativePath);
+  const dir = path.dirname(fullPath);
+  try {
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+    fs.writeFileSync(fullPath, content, 'utf-8');
+  } catch (err) {
+    console.error(`\n  ${c.red}✗${c.reset} Failed to write ${relativePath}: ${err.message}\n`);
+    process.exit(1);
+  }
+}
+
+module.exports = { scaffold };

package/src/templates/components.js

@@ -0,0 +1,97 @@
+// Shared component templates used by both Next.js and React scaffolds.
+
+function verifyEmailBanner() {
+  return `'use client';
+
+import { useState } from 'react';
+import { useAuth, useGitHat } from '@githat/nextjs';
+
+export default function VerifyEmailBanner() {
+  const { user } = useAuth();
+  const { fetch: apiFetch } = useGitHat();
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  if (!user || user.emailVerified || dismissed) return null;
+
+  const resend = async () => {
+    setSending(true);
+    try {
+      await apiFetch('/auth/resend-verification', {
+        method: 'POST',
+        body: JSON.stringify({ email: user.email }),
+      });
+      setSent(true);
+    } catch {}
+    setSending(false);
+  };
+
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+      padding: '0.75rem 2rem', background: '#1e1b4b', borderBottom: '1px solid #312e81',
+      fontSize: '0.875rem', color: '#c7d2fe',
+    }}>
+      <span>
+        Please verify your email <strong style={{ color: '#fafafa' }}>{user.email}</strong>
+        {sent
+          ? <span style={{ marginLeft: '0.5rem', color: '#34d399' }}>— Check your inbox!</span>
+          : <button type="button" onClick={resend} disabled={sending} style={{
+              marginLeft: '0.5rem', background: 'none', border: 'none', color: '#818cf8',
+              cursor: 'pointer', textDecoration: 'underline', fontSize: '0.875rem',
+            }}>{sending ? 'Sending...' : 'Resend'}</button>
+        }
+      </span>
+      <button type="button" onClick={() => setDismissed(true)} style={{
+        background: 'none', border: 'none', color: '#6366f1', cursor: 'pointer', fontSize: '1rem',
+      }}>×</button>
+    </div>
+  );
+}
+`;
+}
+
+function sidebar(features) {
+  const links = [{ href: '/dashboard', label: 'Dashboard', icon: 'home' }];
+  if (features.settings) links.push({ href: '/dashboard/settings', label: 'Settings', icon: 'settings' });
+  if (features.team) links.push({ href: '/dashboard/team', label: 'Team', icon: 'team' });
+  if (features.apps) links.push({ href: '/dashboard/apps', label: 'Apps', icon: 'apps' });
+
+  const icons = {
+    home: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>`,
+    settings: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`,
+    team: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`,
+    apps: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>`,
+  };
+
+  const linkItems = links.map((l) => {
+    return `      <a href="${l.href}" style={{
+        display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0.75rem',
+        borderRadius: '0.375rem', color: '#a1a1aa', fontSize: '0.875rem', textDecoration: 'none',
+        transition: 'background 0.15s',
+      }} onMouseEnter={(e) => { e.currentTarget.style.background = '#27272a'; e.currentTarget.style.color = '#fafafa'; }}
+         onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#a1a1aa'; }}>
+        ${icons[l.icon]}
+        ${l.label}
+      </a>`;
+  }).join('\n');
+
+  return `export default function Sidebar() {
+  return (
+    <nav style={{
+      width: '14rem', padding: '1rem 0.75rem',
+      borderRight: '1px solid #27272a', background: '#0f0f14',
+      display: 'flex', flexDirection: 'column', gap: '0.25rem',
+    }}>
+${linkItems}
+    </nav>
+  );
+}
+`;
+}
+
+module.exports = {
+  verifyEmailBanner,
+  sidebar,
+};