create-githat-app 1.6.0 → 1.8.0

package/templates/agent/app/verify/agent/page.tsx.hbs

@@ -0,0 +1,124 @@
+'use client';
+
+/**
+ * Public agent verification page.
+ * Anyone can visit /verify/agent?wallet=<wallet> to confirm an agent's
+ * identity, check its current status, and review its capabilities.
+ *
+ * Wallet is a query param (not a path) so this is a single static page
+ * that handles any wallet — output: 'export' can't pre-render an unbounded
+ * dynamic-route param space.
+ */
+import { Suspense, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+const GITHAT_API = 'https://api.githat.io';
+
+{{#if typescript}}
+interface AgentVerify {
+  verified: boolean;
+  name: string;
+  wallet: string;
+  chainId: number;
+  status: 'active' | 'paused' | 'revoked' | 'pending';
+  verifiedSince: string;
+  lastActivity: string;
+  capabilities: string[];
+  actionsLast24h: number;
+  verificationUrl: string;
+}
+{{/if}}
+
+function VerifyAgentContent() {
+  const searchParams = useSearchParams();
+  const wallet = searchParams.get('wallet') ?? '';
+  const [agent, setAgent] = useState{{#if typescript}}<AgentVerify | null>{{/if}}(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!wallet) { setLoading(false); return; }
+    let cancelled = false;
+    fetch(`${GITHAT_API}/verify/agent/${wallet}`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data) => { if (!cancelled) setAgent(data); })
+      .catch(() => { if (!cancelled) setAgent(null); })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [wallet]);
+
+  if (loading) {
+    return (
+      <main style=\{{ minHeight: '100vh', background: '#0a0a0a', color: '#a1a1aa', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <p style=\{{ fontSize: '0.875rem' }}>Loading…</p>
+      </main>
+    );
+  }
+
+  if (!agent?.verified) {
+    return (
+      <main style=\{{ minHeight: '100vh', background: '#0a0a0a', color: '#fafafa', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '4rem 1rem' }}>
+        <div style=\{{ textAlign: 'center' }}>
+          <p style=\{{ fontSize: '1.125rem', color: '#a1a1aa', marginBottom: '0.5rem' }}>Agent not found</p>
+          <p style=\{{ fontSize: '0.875rem', color: '#52525b', fontFamily: "'JetBrains Mono', monospace", wordBreak: 'break-all' }}>{wallet || '(no wallet provided)'}</p>
+        </div>
+      </main>
+    );
+  }
+
+  const statusColor = ({
+    active:  '#16a34a',
+    paused:  '#d97706',
+    revoked: '#dc2626',
+    pending: '#6366f1',
+  }{{#if typescript}} as Record<string, string>{{/if}})[agent.status] ?? '#71717a';
+
+  return (
+    <main style=\{{ minHeight: '100vh', background: '#0a0a0a', color: '#fafafa', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '4rem 1rem' }}>
+      <div style=\{{ width: '100%', maxWidth: '36rem' }}>
+        <div style=\{{ marginBottom: '2rem', textAlign: 'center' }}>
+          <div style=\{{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', padding: '0.375rem 0.875rem', borderRadius: '9999px', background: statusColor + '22', border: `1px solid ${statusColor}44`, marginBottom: '1.5rem' }}>
+            <span style=\{{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', background: statusColor, display: 'inline-block' }} />
+            <span style=\{{ fontSize: '0.75rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: statusColor }}>{agent.status}</span>
+          </div>
+          <h1 style=\{{ fontSize: '1.75rem', fontWeight: 700, marginBottom: '0.5rem' }}>{agent.name}</h1>
+          <p style=\{{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.8125rem', color: '#71717a', wordBreak: 'break-all' }}>{agent.wallet}</p>
+        </div>
+
+        <div style=\{{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '1.5rem' }}>
+          {[
+            { label: 'Actions (24h)', value: agent.actionsLast24h },
+            { label: 'Verified since', value: new Date(agent.verifiedSince).toLocaleDateString() },
+          ].map(({ label, value }) => (
+            <div key={label} style=\{{ padding: '1.25rem', borderRadius: '0.75rem', border: '1px solid #27272a', background: '#18181b' }}>
+              <div style=\{{ fontSize: '0.75rem', color: '#71717a', marginBottom: '0.375rem' }}>{label}</div>
+              <div style=\{{ fontSize: '1.125rem', fontWeight: 600 }}>{value}</div>
+            </div>
+          ))}
+        </div>
+
+        {agent.capabilities.length > 0 && (
+          <div style=\{{ padding: '1.25rem', borderRadius: '0.75rem', border: '1px solid #27272a', background: '#18181b', marginBottom: '1.5rem' }}>
+            <h2 style=\{{ fontSize: '0.875rem', fontWeight: 600, color: '#a1a1aa', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '1rem' }}>Capabilities</h2>
+            <div style=\{{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+              {agent.capabilities.map((cap{{#if typescript}}: string{{/if}}) => (
+                <span key={cap} style=\{{ padding: '0.375rem 0.75rem', borderRadius: '0.375rem', border: '1px solid #3f3f46', fontSize: '0.8125rem', fontFamily: "'JetBrains Mono', monospace", color: '#a1a1aa' }}>{cap}</span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
+
+export default function VerifyAgentPage() {
+  return (
+    <Suspense fallback={
+      <main style=\{{ minHeight: '100vh', background: '#0a0a0a', color: '#a1a1aa', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <p style=\{{ fontSize: '0.875rem' }}>Loading…</p>
+      </main>
+    }>
+      <VerifyAgentContent />
+    </Suspense>
+  );
+}

package/templates/agent/next.config.ts.hbs

@@ -1,9 +1,8 @@
-{{#if typescript}}import type { NextConfig } from 'next';
-{{/if}}import { withGitHat } from '@githat/nextjs/server';
+import { withGitHat } from '@githat/nextjs/server';
 
-{{#if typescript}}const nextConfig: NextConfig = {
-{{else}}const nextConfig = {
-{{/if}}  output: 'standalone',
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
 };
 
 export default withGitHat(nextConfig);

package/templates/agent/public/HERO_IMAGE.md

@@ -0,0 +1,23 @@
+# Hero Image
+
+Drop your logo or hero image (`.png`, `.jpg`, `.webp`) in this folder.
+
+Then in `app/page.tsx`, replace `<HeroImagePlaceholder />` with:
+
+```tsx
+<Image
+  src="/your-image.png"
+  alt="{{businessName}}"
+  fill
+  style={{ objectFit: 'cover', borderRadius: '1rem' }}
+  priority
+/>
+```
+
+Wrap it in a `position: 'relative'` container with the same `aspectRatio: '4 / 3'` as the placeholder.
+
+The `Image` component from `next/image` is not yet imported — add it at the top of `page.tsx`:
+
+```tsx
+import Image from 'next/image';
+```

package/templates/base/githat/api/agents.ts.hbs

@@ -5,13 +5,13 @@ import type { AiAgent } from './types';
 {{/if}}
 
 export const agentsApi = {
-  register: (wallet{{#if typescript}}: string{{/if}}, chainId{{#if typescript}}: number{{/if}}, name{{#if typescript}}: string{{/if}}) =>
-    githatApi.post{{#if typescript}}<{ agent: AiAgent }>{{/if}}('/agent/register', { wallet, chainId, name }),
+  register: (walletAddress{{#if typescript}}: string{{/if}}, chainId{{#if typescript}}: number{{/if}}, name{{#if typescript}}: string{{/if}}) =>
+    githatApi.post{{#if typescript}}<{ agent: AiAgent }>{{/if}}('/agent/register', { walletAddress, chainId, name }),
 
-  challenge: (wallet{{#if typescript}}: string{{/if}}) =>
-    githatApi.post{{#if typescript}}<{ nonce: string }>{{/if}}('/agent/challenge', { wallet }),
+  challenge: (walletAddress{{#if typescript}}: string{{/if}}) =>
+    githatApi.post{{#if typescript}}<{ nonce: string }>{{/if}}('/agent/challenge', { walletAddress }),
 
-  getToken: (wallet{{#if typescript}}: string{{/if}}, signature{{#if typescript}}: string{{/if}}, nonce{{#if typescript}}: string{{/if}}) =>
-    githatApi.post{{#if typescript}}<{ accessToken: string }>{{/if}}('/agent/token', { wallet, signature, nonce }),
+  getToken: (walletAddress{{#if typescript}}: string{{/if}}, signature{{#if typescript}}: string{{/if}}, nonce{{#if typescript}}: string{{/if}}) =>
+    githatApi.post{{#if typescript}}<{ accessToken: string }>{{/if}}('/agent/token', { walletAddress, signature, nonce }),
 };
 {{/if}}

package/templates/base/githat/config.ts.hbs

@@ -1,8 +1,13 @@
 {{#if includeGithatFolder}}
 export const githatConfig = {
   appName: '{{businessName}}',
-  publishableKey: {{#ifEquals framework "nextjs"}}process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY{{else}}import.meta.env.VITE_GITHAT_PUBLISHABLE_KEY{{/ifEquals}} || '',
-  apiUrl: {{#ifEquals framework "nextjs"}}process.env.NEXT_PUBLIC_GITHAT_API_URL{{else}}import.meta.env.VITE_GITHAT_API_URL{{/ifEquals}} || '{{apiUrl}}',
+  publishableKey: {{#ifNext framework}}process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY{{else}}import.meta.env.VITE_GITHAT_PUBLISHABLE_KEY{{/ifNext}} || '',
+  // For Next.js-shaped frameworks we point at the same-origin proxy
+  // mounted at app/api/githat/[...path]/route.ts — that proxy forwards
+  // to api.githat.io and re-emits Set-Cookie on this app's domain so
+  // cookies are visible to proxy.ts and getAuth(). For react-vite we
+  // hit api.githat.io directly (browser-token flows only).
+  apiUrl: {{#ifNext framework}}process.env.NEXT_PUBLIC_GITHAT_API_URL || '/api/githat'{{else}}import.meta.env.VITE_GITHAT_API_URL || '{{apiUrl}}'{{/ifNext}},
   signInUrl: '/sign-in',
   signUpUrl: '/sign-up',
   afterSignInUrl: '/dashboard',

package/templates/base/githat/dashboard/overview.tsx.hbs

@@ -1,6 +1,7 @@
 {{#unless includeDashboard}}{{else}}
 'use client';
 
+import Link from 'next/link';
 import { useAuth } from '@githat/nextjs';
 
 export function DashboardOverview() {
@@ -8,29 +9,118 @@ export function DashboardOverview() {
 
   return (
     <div>
-      <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>
-        Welcome{user?.name ? `, ${user.name}` : ''}
-      </h1>
-      {org && (
-        <p style=\{{ color: '#a1a1aa', marginBottom: '2rem' }}>
-          Organization: <strong style=\{{ color: '#7c3aed' }}>{org.name}</strong> ({org.role})
-        </p>
-      )}
+      <div style=\{{ marginBottom: '2rem' }}>
+        <h1 style=\{{ fontSize: '1.5rem', fontWeight: 700, color: '#fafafa', marginBottom: '0.375rem' }}>
+          Welcome back{user?.name ? `, ${user.name}` : ''}
+        </h1>
+        {org && (
+          <p style=\{{ color: '#71717a', fontSize: '0.875rem' }}>
+            {org.name} · <span style=\{{ color: '#a1a1aa' }}>{org.role}</span>
+          </p>
+        )}
+      </div>
+
+      {/* Stats row */}
+      <div style=\{{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(14rem, 1fr))', gap: '1rem', marginBottom: '2.5rem' }}>
+        <StatCard label="Status"   value="Active"              sub="Account health" />
+        <StatCard label="Plan"     value={org?.tier ?? 'Free'} sub="Current tier" />
+        <StatCard label="Identity" value="GitHat"              sub="Auth provider" />
+        {{#if includeOrgManagement}}
+        <StatCard label="Members"  value={String(org?.memberCount ?? 1)} sub="Team size" />
+        {{/if}}
+      </div>
 
-      <div style=\{{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(16rem, 1fr))', gap: '1rem' }}>
-        <StatCard title="Status" value="Active" />
-        <StatCard title="Plan" value={org?.tier || 'Free'} />
-        <StatCard title="Identity" value="GitHat" />
+      {/* Quick actions */}
+      <div style=\{{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(20rem, 1fr))', gap: '1rem' }}>
+        {{#if includeOrgManagement}}
+        <ActionCard
+          title="Invite team members"
+          desc="Add your business partner, accountant, or employee to your org."
+          cta="Invite"
+          href="/dashboard/members"
+          accent="#6366f1"
+        />
+        <ActionCard
+          title="Organization settings"
+          desc="Update your org name, billing plan, and member permissions."
+          cta="Settings"
+          href="/dashboard/settings"
+          accent="#8b5cf6"
+        />
+        {{/if}}
+        {{#if includeMcpModule}}
+        <ActionCard
+          title="Connect an MCP server"
+          desc="Hook your data into any AI assistant via the Model Context Protocol."
+          cta="Connect"
+          href="/dashboard/mcp"
+          accent="#0ea5e9"
+        />
+        {{/if}}
+        {{#if includeAgentModule}}
+        <ActionCard
+          title="Deploy an AI agent"
+          desc="Register a wallet-bound autonomous agent with capability scoping and a kill switch."
+          cta="Deploy"
+          href="/dashboard/agents"
+          accent="#10b981"
+        />
+        {{/if}}
+        <ActionCard
+          title="Manage apps"
+          desc="View and rotate your publishable keys, configure allowed origins."
+          cta="View apps"
+          href="/dashboard/apps"
+          accent="#f59e0b"
+        />
       </div>
     </div>
   );
 }
 
-function StatCard({ title, value }{{#if typescript}}: { title: string; value: string }{{/if}}) {
+function StatCard({ label, value, sub }{{#if typescript}}: { label: string; value: string; sub: string }{{/if}}) {
+  return (
+    <div style=\{{
+      background: '#111113',
+      border: '1px solid #1e1e2e',
+      borderRadius: '0.75rem',
+      padding: '1.5rem',
+    }}>
+      <p style=\{{ fontSize: '0.8125rem', color: '#71717a', marginBottom: '0.375rem' }}>{label}</p>
+      <p style=\{{ fontSize: '1.5rem', fontWeight: 700, color: '#fafafa', marginBottom: '0.25rem' }}>{value}</p>
+      <p style=\{{ fontSize: '0.75rem', color: '#52525b' }}>{sub}</p>
+    </div>
+  );
+}
+
+function ActionCard({ title, desc, cta, href, accent }{{#if typescript}}: {
+  title: string; desc: string; cta: string; href: string; accent: string;
+}{{/if}}) {
   return (
-    <div style=\{{ padding: '1.5rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.5rem' }}>
-      <p style=\{{ fontSize: '0.875rem', color: '#71717a', marginBottom: '0.25rem' }}>{title}</p>
-      <p style=\{{ fontSize: '1.25rem', fontWeight: 600, color: '#fafafa' }}>{value}</p>
+    <div style=\{{
+      background: '#111113',
+      border: '1px solid #1e1e2e',
+      borderRadius: '0.75rem',
+      padding: '1.5rem',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.75rem',
+    }}>
+      <h3 style=\{{ fontSize: '0.9375rem', fontWeight: 600, color: '#fafafa' }}>{title}</h3>
+      <p style=\{{ fontSize: '0.875rem', color: '#71717a', lineHeight: 1.6, flex: 1 }}>{desc}</p>
+      <Link href={href} style=\{{
+        display: 'inline-block',
+        background: accent,
+        color: '#fff',
+        textDecoration: 'none',
+        padding: '0.5rem 1rem',
+        borderRadius: '0.375rem',
+        fontSize: '0.875rem',
+        fontWeight: 600,
+        alignSelf: 'flex-start',
+      }}>
+        {cta} →
+      </Link>
     </div>
   );
 }

package/templates/classroom/app/layout.tsx.hbs

@@ -19,6 +19,12 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
         */}
         <GitHatProvider config=\{{
           publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          apiUrl: 'https://api.githat.io',
+{{#if typescript}}
+          tokenStorage: 'localStorage' as const,
+{{else}}
+          tokenStorage: 'localStorage',
+{{/if}}
           signInUrl: '/sign-in',
           signUpUrl: '/sign-up',
           afterSignInUrl: '/',

package/templates/classroom/next.config.ts.hbs

@@ -1,9 +1,8 @@
-{{#if typescript}}import type { NextConfig } from 'next';
-{{/if}}import { withGitHat } from '@githat/nextjs/server';
+import { withGitHat } from '@githat/nextjs/server';
 
-{{#if typescript}}const nextConfig: NextConfig = {
-{{else}}const nextConfig = {
-{{/if}}  output: 'standalone',
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
 };
 
 export default withGitHat(nextConfig);

package/templates/content/app/layout.tsx.hbs

@@ -19,6 +19,12 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
         */}
         <GitHatProvider config=\{{
           publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          apiUrl: 'https://api.githat.io',
+{{#if typescript}}
+          tokenStorage: 'localStorage' as const,
+{{else}}
+          tokenStorage: 'localStorage',
+{{/if}}
           signInUrl: '/sign-in',
           signUpUrl: '/sign-up',
           afterSignInUrl: '/',

package/templates/content/next.config.ts.hbs

@@ -1,9 +1,8 @@
-{{#if typescript}}import type { NextConfig } from 'next';
-{{/if}}import { withGitHat } from '@githat/nextjs/server';
+import { withGitHat } from '@githat/nextjs/server';
 
-{{#if typescript}}const nextConfig: NextConfig = {
-{{else}}const nextConfig = {
-{{/if}}  output: 'standalone',
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
 };
 
 export default withGitHat(nextConfig);

package/templates/dashboard/app/admin/data/[entity]/page.tsx.hbs

@@ -6,8 +6,8 @@ import { listEntities } from '../../../../src/lib/db';
  *
  * Server component — runs `listEntities(entityName)` (which you
  * implement in src/lib/db.ts) and renders rows as a basic table.
- * Auth-gating is enforced by the middleware in proxy.ts; if you
- * need entity-level RBAC, check `verifyToken` claims here.
+ * Auth-gating happens client-side via `useAuth` in the static export;
+ * if you need entity-level RBAC, check `verifyToken` claims here.
  */
 export default async function EntityPage({
   params,

package/templates/dashboard/app/layout.tsx.hbs

@@ -19,6 +19,12 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
         */}
         <GitHatProvider config=\{{
           publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          apiUrl: 'https://api.githat.io',
+{{#if typescript}}
+          tokenStorage: 'localStorage' as const,
+{{else}}
+          tokenStorage: 'localStorage',
+{{/if}}
           signInUrl: '/sign-in',
           signUpUrl: '/sign-up',
           afterSignInUrl: '/',

package/templates/dashboard/next.config.ts.hbs

@@ -1,9 +1,8 @@
-{{#if typescript}}import type { NextConfig } from 'next';
-{{/if}}import { withGitHat } from '@githat/nextjs/server';
+import { withGitHat } from '@githat/nextjs/server';
 
-{{#if typescript}}const nextConfig: NextConfig = {
-{{else}}const nextConfig = {
-{{/if}}  output: 'standalone',
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
 };
 
 export default withGitHat(nextConfig);

package/templates/fullstack/apps-web-nextjs/app/layout.tsx.hbs

@@ -14,6 +14,12 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
       <body>
         <GitHatProvider config=\{{
           publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          apiUrl: 'https://api.githat.io',
+{{#if typescript}}
+          tokenStorage: 'localStorage' as const,
+{{else}}
+          tokenStorage: 'localStorage',
+{{/if}}
           signInUrl: '/sign-in',
           signUpUrl: '/sign-up',
           afterSignInUrl: '/dashboard',

package/templates/fullstack/apps-web-nextjs/next.config.ts.hbs

@@ -1,9 +1,9 @@
-{{#if typescript}}import type { NextConfig } from 'next';
-{{/if}}import { withGitHat } from '@githat/nextjs/server';
+import { withGitHat } from '@githat/nextjs/server';
 
-{{#if typescript}}const nextConfig: NextConfig = {
-{{else}}const nextConfig = {
-{{/if}}  // Proxy API calls to the backend in development
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
+  // Proxy API calls to the backend in development
   async rewrites() {
     return [
       {

package/templates/marketplace/app/layout.tsx.hbs

@@ -25,6 +25,12 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
       <body>
         <GitHatProvider config=\{{
           publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          apiUrl: 'https://api.githat.io',
+{{#if typescript}}
+          tokenStorage: 'localStorage' as const,
+{{else}}
+          tokenStorage: 'localStorage',
+{{/if}}
           signInUrl: '/sign-in',
           signUpUrl: '/sign-up',
           afterSignInUrl: '/',

package/templates/marketplace/next.config.ts.hbs

@@ -1,9 +1,8 @@
-{{#if typescript}}import type { NextConfig } from 'next';
-{{/if}}import { withGitHat } from '@githat/nextjs/server';
+import { withGitHat } from '@githat/nextjs/server';
 
-{{#if typescript}}const nextConfig: NextConfig = {
-{{else}}const nextConfig = {
-{{/if}}  output: 'standalone',
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
 };
 
 export default withGitHat(nextConfig);

package/templates/nextjs/app/(auth)/forgot-password/page.tsx.hbs

@@ -1,62 +1,10 @@
 {{#if includeForgotPassword}}
-'use client';
-
-import { useState } from 'react';
-{{#if includeGithatFolder}}
-import { authApi } from '../../../githat/api/auth{{#unless typescript}}.js{{/unless}}';
-{{/if}}
+import { ForgotPasswordForm } from '@githat/nextjs';
 
 export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState('');
-  const [sent, setSent] = useState(false);
-  const [error, setError] = useState('');
-
-  const handleSubmit = async (e{{#if typescript}}: React.FormEvent{{/if}}) => {
-    e.preventDefault();
-    setError('');
-    try {
-{{#if includeGithatFolder}}
-      await authApi.forgotPassword(email);
-{{else}}
-      await fetch('{{apiUrl}}/auth/forgot-password', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email }),
-      });
-{{/if}}
-      setSent(true);
-    } catch (err) {
-      setError('Something went wrong. Please try again.');
-    }
-  };
-
   return (
     <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
-      <div style=\{{ width: '100%', maxWidth: '24rem', padding: '2rem' }}>
-        <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Reset password</h1>
-        {sent ? (
-          <p style=\{{ color: '#a1a1aa' }}>Check your email for a reset link.</p>
-        ) : (
-          <form onSubmit={handleSubmit}>
-            <p style=\{{ color: '#a1a1aa', marginBottom: '1.5rem' }}>Enter your email to receive a reset link.</p>
-            {error && <p style=\{{ color: '#ef4444', marginBottom: '1rem', fontSize: '0.875rem' }}>{error}</p>}
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="you@example.com"
-              required
-              style=\{{ width: '100%', padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa', marginBottom: '1rem', outline: 'none' }}
-            />
-            <button
-              type="submit"
-              style=\{{ width: '100%', padding: '0.625rem', background: '#7c3aed', color: '#fff', border: 'none', borderRadius: '0.375rem', fontWeight: 600, cursor: 'pointer' }}
-            >
-              Send reset link
-            </button>
-          </form>
-        )}
-      </div>
+      <ForgotPasswordForm signInUrl="/sign-in" />
     </main>
   );
 }