create-githat-app 1.7.0 → 1.8.0

package/templates/agent/app/dashboard/agents/page.tsx.hbs

@@ -0,0 +1,9 @@
+{{#if includeAgentModule}}
+{{#if includeGithatFolder}}
+import { DashboardAgents } from '../../../githat/dashboard/agents{{#unless typescript}}.jsx{{/unless}}';
+
+export default function AgentsPage() {
+  return <DashboardAgents />;
+}
+{{/if}}
+{{/if}}

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

@@ -0,0 +1,9 @@
+{{#if includeDashboard}}
+{{#if includeGithatFolder}}
+import { DashboardLayout } from '../../githat/dashboard/layout{{#unless typescript}}.jsx{{/unless}}';
+
+export default function Layout({ children }{{#if typescript}}: { children: React.ReactNode }{{/if}}) {
+  return <DashboardLayout>{children}</DashboardLayout>;
+}
+{{/if}}
+{{/if}}

package/templates/agent/app/dashboard/mcp/page.tsx.hbs

@@ -0,0 +1,9 @@
+{{#if includeMcpModule}}
+{{#if includeGithatFolder}}
+import { DashboardMcpServers } from '../../../githat/dashboard/mcp-servers{{#unless typescript}}.jsx{{/unless}}';
+
+export default function McpPage() {
+  return <DashboardMcpServers />;
+}
+{{/if}}
+{{/if}}

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

@@ -0,0 +1,128 @@
+{{#if includeDashboard}}
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
+import { githatApi } from '../../../githat/api/client{{#unless typescript}}.js{{/unless}}';
+{{#if typescript}}
+interface AgentSummary {
+  total: number;
+  active: number;
+  actionsLast24h: number;
+  mcpServers: number;
+}
+{{/if}}
+
+export default function DashboardPage() {
+  const { user, org } = useAuth();
+  const [summary, setSummary] = useState{{#if typescript}}<AgentSummary>{{/if}}({
+    total: 0,
+    active: 0,
+    actionsLast24h: 0,
+    mcpServers: 0,
+  });
+
+  useEffect(() => {
+    githatApi.get{{#if typescript}}<AgentSummary>{{/if}}('/agents/summary')
+      .then((data) => setSummary(data))
+      .catch(() => {});
+  }, []);
+
+  return (
+    <div>
+      <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' }}>
+        {[
+          { label: 'Total agents',        value: summary.total,            sub: 'Registered' },
+          { label: 'Active agents',        value: summary.active,           sub: 'Running now' },
+          { label: 'Actions (24h)',        value: summary.actionsLast24h,   sub: 'Across all agents' },
+          { label: 'MCP servers',          value: summary.mcpServers,       sub: `Plan: ${org?.tier ?? 'Free'}` },
+        ].map(({ label, value, sub }) => (
+          <div key={label} 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>
+        ))}
+      </div>
+
+      {/* Quick actions */}
+      <div style=\{{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(20rem, 1fr))', gap: '1rem' }}>
+        {[
+          {
+            title: 'Register an AI agent',
+            desc: 'Assign a wallet-bound identity to a new autonomous agent. Capability-scoped, kill-switchable, fully audited.',
+            cta: 'Register agent',
+            href: '/dashboard/agents',
+            accent: '#6366f1',
+          },
+          {
+            title: 'Connect an MCP server',
+            desc: 'Grant your agents access to new tools by connecting a Model Context Protocol server.',
+            cta: 'Connect server',
+            href: '/dashboard/mcp',
+            accent: '#0ea5e9',
+          },
+          {
+            title: 'Invite team members',
+            desc: 'Add collaborators who can monitor agents, adjust capabilities, or trigger the kill switch.',
+            cta: 'Invite',
+            href: '/dashboard/members',
+            accent: '#10b981',
+          },
+          {
+            title: 'Agent operator console',
+            desc: 'View live status, adjust capabilities, and hit the kill switch for a specific agent.',
+            cta: 'Open console',
+            href: '/admin/agent',
+            accent: '#f59e0b',
+          },
+        ].map(({ title, desc, cta, href, accent }) => (
+          <div key={title} 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>
+        ))}
+      </div>
+    </div>
+  );
+}
+{{/if}}

package/templates/agent/app/globals.css.hbs

@@ -39,21 +39,26 @@
   --danger:       #dc2626;
 
   /* Spacing — used by @githat/nextjs/styles */
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
+  --space-1:  0.25rem;
+  --space-2:  0.5rem;
+  --space-3:  0.75rem;
+  --space-4:  1rem;
+  --space-5:  1.25rem;
+  --space-6:  1.5rem;
+  --space-8:  2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
 
   /* Radius */
-  --radius:    0.5rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
+  --radius:      0.5rem;
+  --radius-md:   0.5rem;
+  --radius-lg:   0.75rem;
+  --radius-full: 9999px;
 
   /* Fonts */
   --font-sans:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --font-wordmark: 'Instrument Serif', Georgia, serif;
+  --font-mono:     'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
 }
 
 @media (prefers-color-scheme: dark) {

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

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

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

@@ -4,90 +4,52 @@ import Link from 'next/link';
 import { useAuth } from '@githat/nextjs';
 
 /**
- * AI Agent template — Web4 identity, MCP, public verification.
+ * Landing page — split-hero layout.
  *
- * The pitch: every other auth platform stops at humans. GitHat
- * extends identity to autonomous agents — wallet-bound (Ethereum
- * sigs), capability-scoped, kill-switchable, audit-logged. Anyone
- * can verify an agent at /verify/agent/<wallet>.
+ * Left: pitch + CTA
+ * Right: your hero image or logo (drop a file in public/ and swap
+ *        <HeroImagePlaceholder /> for <Image src="/your-image.png" ... />).
  *
- * This template is the agent operator's dashboard, plus the public
- * /verify endpoint anyone can hit to check an agent's status.
+ * The <Image> tag from next/image is already imported so the swap is
+ * one line. See public/HERO_IMAGE.md for full instructions.
  */
-export default function Home() {
-  const { isSignedIn } = useAuth();
 
+function HeroImagePlaceholder() {
   return (
-    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
-      <section style=\{{
-        padding: 'var(--space-12) var(--space-4)',
-        textAlign: 'center',
-        maxWidth: '40rem',
-        margin: '0 auto',
-      }}>
-        <h1 style=\{{
-          fontFamily: 'var(--font-wordmark, Georgia, serif)',
-          fontSize: 'clamp(2rem, 5vw, 3rem)',
-          lineHeight: 1.1,
-          marginBottom: 'var(--space-3)',
-        }}>
-          {{businessName}}
-        </h1>
-        <p style=\{{ color: 'var(--fg-muted)', fontSize: '1.125rem', marginBottom: 'var(--space-6)' }}>
-          Wallet-bound identity for autonomous AI agents. Capability
-          scoping, kill switch, audit trail — and a public /verify
-          endpoint anyone can hit.
-        </p>
-        {!isSignedIn ? (
-          <Link href="/sign-up" style=\{{
-            display: 'inline-block',
-            padding: 'var(--space-3) var(--space-6)',
-            borderRadius: 'var(--radius-md, 0.5rem)',
-            background: 'var(--primary)',
-            color: 'var(--bg)',
-            fontWeight: 600,
-            textDecoration: 'none',
-          }}>
-            Register an agent →
-          </Link>
-        ) : (
-          <Link href="/admin/agent" style=\{{
-            display: 'inline-block',
-            padding: 'var(--space-3) var(--space-6)',
-            borderRadius: 'var(--radius-md, 0.5rem)',
-            background: 'var(--primary)',
-            color: 'var(--bg)',
-            fontWeight: 600,
-            textDecoration: 'none',
-          }}>
-            Open agent dashboard →
-          </Link>
-        )}
-      </section>
-
-      <section style=\{{ padding: 'var(--space-8) var(--space-4)', background: 'var(--surface-sub)' }}>
-        <div style=\{{ maxWidth: '48rem', margin: '0 auto' }}>
-          <h2 style=\{{ fontSize: '1.5rem', marginBottom: 'var(--space-4)' }}>What you get</h2>
-          <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
-            <Item emoji="🪪" title="Wallet-bound identity" body="Ethereum-style key pair. The agent signs requests; clients verify the signature. No shared secrets to leak." />
-            <Item emoji="🎚" title="Capability scopes" body="Each agent can only call the tools you explicitly granted. Add or revoke at any time." />
-            <Item emoji="🛑" title="Kill switch" body="One click and the agent is revoked everywhere. Existing tokens stop working immediately." />
-            <Item emoji="📜" title="Audit log" body="Every action is logged with timestamp, capability used, and signature. Prove what happened." />
-            <Item emoji="🔍" title="Public verification" body="Anyone can hit githat.io/verify/agent/<wallet> and see the agent's status, capabilities, and recent actions." />
-          </ul>
-        </div>
-      </section>
+    <div style=\{{
+      position: 'relative',
+      width: '100%',
+      aspectRatio: '4 / 3',
+      borderRadius: '1rem',
+      border: '2px dashed var(--border)',
+      background: 'var(--surface)',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.75rem',
+      color: 'var(--fg-muted)',
+    }}>
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
+        <rect x="3" y="3" width="18" height="18" rx="2" />
+        <circle cx="8.5" cy="8.5" r="1.5" />
+        <path d="m21 15-5-5L5 21" />
+      </svg>
+      <p style=\{{ fontSize: '0.8125rem', textAlign: 'center', lineHeight: 1.5, maxWidth: '16rem' }}>
+        Drop your hero image in <code style=\{{ fontFamily: 'var(--font-mono)' }}>public/</code>
+        <br />See <code style=\{{ fontFamily: 'var(--font-mono)' }}>public/HERO_IMAGE.md</code>
+      </p>
     </div>
   );
 }
 
-function Item({ emoji, title, body }: { emoji: string; title: string; body: string }) {
+function FeatureItem({ emoji, title, body }{{#if typescript}}: { emoji: string; title: string; body: string }{{/if}}) {
   return (
     <li style=\{{
       display: 'flex',
       gap: 'var(--space-4)',
       padding: 'var(--space-4)',
-      borderRadius: 'var(--radius-md, 0.5rem)',
+      borderRadius: 'var(--radius-md)',
       background: 'var(--surface)',
     }}>
       <span style=\{{ fontSize: '1.5rem' }} aria-hidden>{emoji}</span>
@@ -98,3 +60,98 @@ function Item({ emoji, title, body }: { emoji: string; title: string; body: stri
     </li>
   );
 }
+
+export default function Home() {
+  const { isSignedIn } = useAuth();
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
+
+      {/* Hero — split layout */}
+      <section style=\{{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(18rem, 1fr))',
+        gap: 'var(--space-12)',
+        alignItems: 'center',
+        padding: 'var(--space-12) var(--space-6)',
+        maxWidth: '72rem',
+        margin: '0 auto',
+      }}>
+        {/* Left — pitch */}
+        <div>
+          <h1 style=\{{
+            fontFamily: 'var(--font-wordmark)',
+            fontSize: 'clamp(2rem, 5vw, 3.25rem)',
+            lineHeight: 1.1,
+            marginBottom: 'var(--space-4)',
+          }}>
+            {{businessName}}
+          </h1>
+          <p style=\{{ color: 'var(--fg-muted)', fontSize: '1.125rem', lineHeight: 1.6, marginBottom: 'var(--space-6)', maxWidth: '32rem' }}>
+            Wallet-bound identity for autonomous AI agents. Capability
+            scoping, kill switch, audit trail — and a public{' '}
+            <code style=\{{ fontSize: '0.9em', fontFamily: 'var(--font-mono)' }}>/verify</code>{' '}
+            endpoint anyone can hit.
+          </p>
+          {!isSignedIn ? (
+            <div style=\{{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
+              <Link href="/sign-up" style=\{{
+                display: 'inline-block',
+                padding: 'var(--space-3) var(--space-6)',
+                borderRadius: 'var(--radius-md)',
+                background: 'var(--primary)',
+                color: '#fff',
+                fontWeight: 600,
+                textDecoration: 'none',
+              }}>
+                Register an agent →
+              </Link>
+              <Link href="/sign-in" style=\{{
+                display: 'inline-block',
+                padding: 'var(--space-3) var(--space-6)',
+                borderRadius: 'var(--radius-md)',
+                border: '1px solid var(--border)',
+                color: 'var(--fg)',
+                fontWeight: 600,
+                textDecoration: 'none',
+              }}>
+                Sign in
+              </Link>
+            </div>
+          ) : (
+            <Link href="/dashboard" style=\{{
+              display: 'inline-block',
+              padding: 'var(--space-3) var(--space-6)',
+              borderRadius: 'var(--radius-md)',
+              background: 'var(--primary)',
+              color: '#fff',
+              fontWeight: 600,
+              textDecoration: 'none',
+            }}>
+              Open dashboard →
+            </Link>
+          )}
+        </div>
+
+        {/* Right — hero image */}
+        <div>
+          <HeroImagePlaceholder />
+        </div>
+      </section>
+
+      {/* Features */}
+      <section style=\{{ padding: 'var(--space-12) var(--space-6)', background: 'var(--surface-sub)' }}>
+        <div style=\{{ maxWidth: '52rem', margin: '0 auto' }}>
+          <h2 style=\{{ fontSize: '1.5rem', marginBottom: 'var(--space-6)' }}>What you get</h2>
+          <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
+            <FeatureItem emoji="🪪" title="Wallet-bound identity" body="Ethereum-style key pair. The agent signs requests; clients verify the signature. No shared secrets." />
+            <FeatureItem emoji="🎚" title="Capability scopes" body="Each agent can only call the tools you explicitly granted. Add or revoke at any time." />
+            <FeatureItem emoji="🛑" title="Kill switch" body="One click and the agent is revoked everywhere. Existing tokens stop working immediately." />
+            <FeatureItem emoji="📜" title="Audit log" body="Every action is logged with timestamp, capability used, and signature." />
+            <FeatureItem emoji="🔍" title="Public verification" body="Anyone can hit /verify/agent/<wallet> and see the agent's current status and capabilities." />
+          </ul>
+        </div>
+      </section>
+    </div>
+  );
+}

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,15 +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}} || '',
-  // For nextjs we point at the same-origin proxy mounted at
-  // src/app/api/githat/[...path]/route.ts — that proxy forwards to the
-  // real api.githat.io upstream and re-emits Set-Cookie on this app's
-  // domain so cookies are visible to proxy.ts and getAuth(). For
-  // react-vite (no Next.js API routes) we hit api.githat.io directly,
-  // which only works for browser-token auth flows that don't depend on
-  // cookies.
-  apiUrl: {{#ifEquals framework "nextjs"}}process.env.NEXT_PUBLIC_GITHAT_API_URL || '/api/githat'{{else}}import.meta.env.VITE_GITHAT_API_URL || '{{apiUrl}}'{{/ifEquals}},
+  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',