create-githat-app 1.6.0 → 1.8.0

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

@@ -0,0 +1,156 @@
+'use client';
+
+import { useAuth } from '@githat/nextjs';
+
+const DEMO_SERVERS = [
+  {
+    name: 'web-search',
+    description: 'Search the web and fetch pages',
+    tools: ['web.search', 'web.fetch'],
+    status: 'connected' as const,
+  },
+  {
+    name: 'arxiv',
+    description: 'Read and search arXiv papers',
+    tools: ['arxiv.read', 'arxiv.search'],
+    status: 'connected' as const,
+  },
+  {
+    name: 'github',
+    description: 'Read and write GitHub repos',
+    tools: ['github.read', 'github.push'],
+    status: 'disconnected' as const,
+  },
+];
+
+export default function McpAdminPage() {
+  const { isSignedIn, isLoading } = useAuth();
+
+  if (isLoading) return <div style=\{{ padding: 'var(--space-8)', color: 'var(--fg-muted)' }}>Loading…</div>;
+  if (!isSignedIn) return null;
+
+  return (
+    <div style=\{{ padding: 'var(--space-8) var(--space-6)', maxWidth: '52rem' }}>
+      <div style=\{{ marginBottom: 'var(--space-6)' }}>
+        <h1 style=\{{ fontSize: '1.5rem', fontWeight: 700, marginBottom: 'var(--space-2)' }}>MCP Servers</h1>
+        <p style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)' }}>
+          Model Context Protocol servers expose tools your agent can call. Connect servers
+          to grant your agent access to the tools they expose.
+        </p>
+      </div>
+
+      <div style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
+        {DEMO_SERVERS.map((server) => (
+          <div
+            key={server.name}
+            style=\{{
+              padding: 'var(--space-5)',
+              borderRadius: 'var(--radius-lg)',
+              border: '1px solid var(--border)',
+              background: 'var(--surface)',
+              display: 'flex',
+              alignItems: 'flex-start',
+              justifyContent: 'space-between',
+              gap: 'var(--space-4)',
+            }}
+          >
+            <div style=\{{ flex: 1 }}>
+              <div style=\{{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', marginBottom: 'var(--space-2)' }}>
+                <code style=\{{ fontFamily: 'var(--font-mono)', fontSize: '0.9375rem', fontWeight: 600 }}>
+                  {server.name}
+                </code>
+                <span style=\{{
+                  padding: '0.125rem var(--space-2)',
+                  borderRadius: 'var(--radius-full)',
+                  fontSize: '0.6875rem',
+                  fontWeight: 700,
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.04em',
+                  background: server.status === 'connected' ? 'var(--success)' : 'var(--border)',
+                  color: server.status === 'connected' ? '#fff' : 'var(--fg-muted)',
+                }}>
+                  {server.status}
+                </span>
+              </div>
+              <p style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)', marginBottom: 'var(--space-3)' }}>
+                {server.description}
+              </p>
+              <div style=\{{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)' }}>
+                {server.tools.map((tool) => (
+                  <span
+                    key={tool}
+                    style=\{{
+                      padding: 'var(--space-1) var(--space-2)',
+                      borderRadius: 'var(--radius-md)',
+                      border: '1px solid var(--border)',
+                      fontSize: '0.75rem',
+                      fontFamily: 'var(--font-mono)',
+                      color: 'var(--fg-muted)',
+                    }}
+                  >
+                    {tool}
+                  </span>
+                ))}
+              </div>
+            </div>
+            <button
+              style=\{{
+                flexShrink: 0,
+                padding: 'var(--space-2) var(--space-4)',
+                borderRadius: 'var(--radius-md)',
+                border: '1px solid var(--border)',
+                background: 'transparent',
+                color: server.status === 'connected' ? 'var(--danger)' : 'var(--primary)',
+                fontSize: '0.875rem',
+                fontWeight: 600,
+                cursor: 'pointer',
+              }}
+            >
+              {server.status === 'connected' ? 'Disconnect' : 'Connect'}
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <div style=\{{
+        marginTop: 'var(--space-8)',
+        padding: 'var(--space-5)',
+        borderRadius: 'var(--radius-lg)',
+        border: '1px dashed var(--border)',
+        textAlign: 'center',
+      }}>
+        <p style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)', marginBottom: 'var(--space-3)' }}>
+          Connect a custom MCP server by URL
+        </p>
+        <div style=\{{ display: 'flex', gap: 'var(--space-2)', maxWidth: '28rem', margin: '0 auto' }}>
+          <input
+            type="url"
+            placeholder="https://my-mcp-server.com/sse"
+            style=\{{
+              flex: 1,
+              padding: 'var(--space-2) var(--space-3)',
+              borderRadius: 'var(--radius-md)',
+              border: '1px solid var(--border)',
+              background: 'var(--bg)',
+              color: 'var(--fg)',
+              fontSize: '0.875rem',
+              fontFamily: 'var(--font-mono)',
+            }}
+          />
+          <button style=\{{
+            padding: 'var(--space-2) var(--space-4)',
+            borderRadius: 'var(--radius-md)',
+            border: 'none',
+            background: 'var(--primary)',
+            color: '#fff',
+            fontSize: '0.875rem',
+            fontWeight: 600,
+            cursor: 'pointer',
+          }}>
+            Add
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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,9 +19,15 @@ 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: '/',
+          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>
+  );
+}