create-githat-app 1.7.0 → 1.8.1

package/dist/cli.js

@@ -616,11 +616,11 @@ function getDefaults(projectName, publishableKey, typescript, fullstack, backend
     packageManager: detectPackageManager(),
     publishableKey: publishableKey || "",
     apiUrl: DEFAULT_API_URL,
-    authFeatures: isMinimal ? [] : ["forgot-password"],
+    authFeatures: template === "agent" ? ["forgot-password", "email-verification", "mcp-servers", "ai-agents"] : isMinimal ? [] : ["forgot-password"],
     databaseChoice: "none",
     useTailwind: true,
-    includeDashboard: !isMinimal,
-    includeGithatFolder: !isMinimal && projectType === "frontend",
+    includeDashboard: template === "agent" ? true : !isMinimal,
+    includeGithatFolder: template === "agent" ? true : !isMinimal && projectType === "frontend",
     initGit: true,
     installDeps: true
   };
@@ -770,6 +770,7 @@ var NEXT_LIKE2 = /* @__PURE__ */ new Set([
   "classroom"
 ]);
 var MINIMAL = /* @__PURE__ */ new Set([
+  "nextjs",
   "plain",
   "saas",
   "marketplace",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-githat-app",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "GitHat CLI — scaffold apps and manage the skills marketplace",
   "type": "module",
   "bin": {
@@ -24,7 +24,7 @@
     "figlet": "^1.8.0",
     "fs-extra": "^11.2.0",
     "gradient-string": "^3.0.0",
-    "handlebars": "^4.7.8",
+    "handlebars": "^4.7.9",
     "ora": "^9.3.0",
     "unzipper": "^0.12.3"
   },
@@ -61,6 +61,10 @@
     "type": "git",
     "url": "git+https://github.com/GitHat-IO/create-githat-app.git"
   },
+  "overrides": {
+    "picomatch": ">=4.0.4",
+    "rollup": ">=4.59.0"
+  },
   "engines": {
     "node": ">=20.10"
   }

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

@@ -0,0 +1,11 @@
+{{#if includeForgotPassword}}
+import { ForgotPasswordForm } from '@githat/nextjs';
+
+export default function ForgotPasswordPage() {
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--bg)' }}{{/if}}>
+      <ForgotPasswordForm signInUrl="/sign-in" />
+    </main>
+  );
+}
+{{/if}}

package/templates/agent/app/(auth)/reset-password/page.tsx.hbs

@@ -0,0 +1,39 @@
+{{#if includeForgotPassword}}
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { ResetPasswordForm } from '@githat/nextjs';
+
+function ResetPasswordContent() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get('token');
+
+  if (!token) {
+    return (
+      <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-4"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '1rem', background: 'var(--bg)' }}{{/if}}>
+        <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem' }}>No reset token found.</p>
+        <a href="/forgot-password" style=\{{ color: 'var(--primary)', fontSize: '0.875rem' }}>Request a new link →</a>
+      </main>
+    );
+  }
+
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--bg)' }}{{/if}}>
+      <ResetPasswordForm token={token} signInUrl="/sign-in" />
+    </main>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={
+      <div style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--bg)', color: 'var(--fg-muted)', fontSize: '0.875rem' }}>
+        Loading…
+      </div>
+    }>
+      <ResetPasswordContent />
+    </Suspense>
+  );
+}
+{{/if}}

package/templates/agent/app/(auth)/verify-email/page.tsx.hbs

@@ -0,0 +1,41 @@
+{{#if includeEmailVerification}}
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { VerifyEmailStatus } from '@githat/nextjs';
+
+function VerifyEmailContent() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get('token');
+
+  if (!token) {
+    return (
+      <main style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--bg)' }}>
+        <div style=\{{ textAlign: 'center' }}>
+          <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: 'var(--fg)', marginBottom: '0.5rem' }}>Invalid verification link</h1>
+          <p style=\{{ color: 'var(--fg-muted)' }}>The link may have expired. <a href="/sign-up" style=\{{ color: 'var(--primary)' }}>Try again</a>.</p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--bg)' }}{{/if}}>
+      <VerifyEmailStatus token={token} signInUrl="/sign-in" />
+    </main>
+  );
+}
+
+export default function VerifyEmailPage() {
+  return (
+    <Suspense fallback={
+      <div style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--bg)', color: 'var(--fg-muted)', fontSize: '0.875rem' }}>
+        Loading…
+      </div>
+    }>
+      <VerifyEmailContent />
+    </Suspense>
+  );
+}
+{{/if}}

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

@@ -1,86 +1,170 @@
 'use client';
 
+import { useState, useEffect, useCallback } from 'react';
 import Link from 'next/link';
 import { useAuth } from '@githat/nextjs';
+import { githatApi } from '../../../githat/api/client';
+{{#if typescript}}
+type AgentStatus = 'active' | 'paused' | 'revoked';
+
+interface Agent {
+  name: string;
+  walletAddress: string;
+  status: AgentStatus;
+  capabilities: string[];
+  actionsLast24h: number;
+  verifyUrl: string;
+}
+{{/if}}
+
+const STATUS_COLOR{{#if typescript}}: Record<string, string>{{/if}} = {
+  active:  'var(--success)',
+  paused:  'var(--warn)',
+  revoked: 'var(--danger)',
+};
 
-/**
- * Agent operator dashboard — control the agent you registered.
- *
- * Three core actions an operator does:
- *   1. See live status (active / paused / revoked)
- *   2. Adjust capabilities (which tools the agent can call)
- *   3. Hit the kill switch
- *
- * Real apps fetch the agent record from GitHat's
- * GET /agent/{walletAddress}. Stub below shows the data shape.
- */
 export default function AgentAdminPage() {
   const { isSignedIn, isLoading } = useAuth();
+  const [agent, setAgent] = useState{{#if typescript}}<Agent | null>{{/if}}(null);
+  const [fetching, setFetching] = useState(true);
+  const [killing, setKilling] = useState(false);
+
+  const fetchAgent = useCallback(async () => {
+    try {
+      const data = await githatApi.get{{#if typescript}}<{
+        agents: Array<{
+          name: string;
+          walletAddress: string;
+          status: string;
+          allowedScopes: string[];
+          requests: number;
+        }>;
+      }>{{/if}}('/agent/list');
+      const first = data.agents[0];
+      if (first) {
+        setAgent({
+          name: first.name,
+          walletAddress: first.walletAddress,
+          status: first.status{{#if typescript}} as AgentStatus{{/if}},
+          capabilities: first.allowedScopes,
+          actionsLast24h: first.requests,
+          verifyUrl: `/verify/agent/${first.walletAddress}`,
+        });
+      }
+    } catch {
+      // no agents registered yet
+    } finally {
+      setFetching(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isSignedIn) fetchAgent();
+    else if (!isLoading) setFetching(false);
+  }, [isSignedIn, isLoading, fetchAgent]);
+
+  const handleKillSwitch = async () => {
+    if (!agent || killing) return;
+    if (!confirm('Revoke this agent? All existing tokens stop working immediately.')) return;
+
+    setKilling(true);
+    try {
+      await githatApi.post(`/agent/${agent.walletAddress}/suspend`);
+      setAgent((prev) => prev ? { ...prev, status: 'revoked' } : prev);
+    } finally {
+      setKilling(false);
+    }
+  };
+
+  if (isLoading || fetching) {
+    return <div style=\{{ padding: 'var(--space-8)', color: 'var(--fg-muted)', fontSize: '0.875rem' }}>Loading…</div>;
+  }
 
-  if (isLoading) return <div style=\{{ padding: 'var(--space-8)', color: 'var(--fg-muted)' }}>Loading…</div>;
   if (!isSignedIn) {
     return (
       <div style=\{{ padding: 'var(--space-8)', textAlign: 'center' }}>
-        <Link href="/sign-in" style=\{{ color: 'var(--primary)' }}>Sign in →</Link>
+        <Link href="/sign-in" style=\{{ color: 'var(--primary)', fontWeight: 600 }}>Sign in →</Link>
       </div>
     );
   }
 
-  const agent = {
-    name: 'My research agent',
-    wallet: '0xAB12…CDEf',
-    status: 'active' as 'active' | 'paused' | 'revoked',
-    capabilities: ['web.search', 'web.fetch', 'arxiv.read'],
-    actionsLast24h: 47,
-    verifyUrl: 'https://githat.io/verify/agent/0xAB12...CDEf',
-  };
+  if (!agent) {
+    return (
+      <div style=\{{ padding: 'var(--space-8) var(--space-6)', maxWidth: '32rem' }}>
+        <h1 style=\{{ fontSize: '1.5rem', fontWeight: 700, marginBottom: 'var(--space-3)' }}>No agent registered</h1>
+        <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', marginBottom: 'var(--space-6)' }}>
+          Register a wallet-bound agent to get started. Each agent gets an Ethereum-style
+          key pair — it signs requests so clients can verify its identity on-chain.
+        </p>
+        <Link href="/sign-up" style=\{{
+          display: 'inline-block',
+          padding: 'var(--space-3) var(--space-5)',
+          borderRadius: 'var(--radius-md)',
+          background: 'var(--primary)',
+          color: '#fff',
+          fontWeight: 600,
+          textDecoration: 'none',
+          fontSize: '0.875rem',
+        }}>
+          Register agent →
+        </Link>
+      </div>
+    );
+  }
 
   return (
-    <div style=\{{ padding: 'var(--space-8) var(--space-4)', maxWidth: '48rem', margin: '0 auto' }}>
-      <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-2)' }}>
-        {agent.name}
-      </h1>
-      <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', marginBottom: 'var(--space-6)' }}>
-        Wallet: <code>{agent.wallet}</code>
-      </p>
+    <div style=\{{ padding: 'var(--space-8) var(--space-6)', maxWidth: '48rem' }}>
+      <div style=\{{ marginBottom: 'var(--space-6)' }}>
+        <h1 style=\{{ fontSize: '1.5rem', fontWeight: 700, marginBottom: 'var(--space-1)' }}>
+          {agent.name}
+        </h1>
+        <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.8125rem', fontFamily: 'var(--font-mono)' }}>
+          {agent.walletAddress}
+        </p>
+      </div>
 
+      {/* Status card */}
       <section style=\{{
         padding: 'var(--space-5)',
-        borderRadius: 'var(--radius-md, 0.5rem)',
+        borderRadius: 'var(--radius-lg)',
         border: '1px solid var(--border)',
         background: 'var(--surface)',
         marginBottom: 'var(--space-6)',
       }}>
-        <div style=\{{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-3)' }}>
+        <div style=\{{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-4)' }}>
           <span style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)' }}>Status</span>
           <span style=\{{
             padding: 'var(--space-1) var(--space-3)',
-            borderRadius: 'var(--radius-full, 9999px)',
-            background: agent.status === 'active' ? 'var(--success)' : agent.status === 'paused' ? 'var(--warn)' : 'var(--danger)',
-            color: 'var(--bg)',
-            fontSize: '0.75rem',
+            borderRadius: 'var(--radius-full)',
+            background: STATUS_COLOR[agent.status] ?? 'var(--border)',
+            color: '#fff',
+            fontSize: '0.6875rem',
             fontWeight: 700,
+            textTransform: 'uppercase',
+            letterSpacing: '0.06em',
           }}>
-            {agent.status.toUpperCase()}
+            {agent.status}
           </span>
         </div>
-        <div style=\{{ fontSize: '2rem', fontWeight: 600, marginBottom: 'var(--space-1)' }}>
+        <div style=\{{ fontSize: '2rem', fontWeight: 700, marginBottom: 'var(--space-1)' }}>
           {agent.actionsLast24h}
         </div>
         <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-subtle)' }}>actions in the last 24 hours</div>
       </section>
 
+      {/* Capabilities */}
       <section style=\{{ marginBottom: 'var(--space-6)' }}>
-        <h2 style=\{{ fontSize: '1.125rem', marginBottom: 'var(--space-3)' }}>Capabilities</h2>
+        <h2 style=\{{ fontSize: '1rem', fontWeight: 600, marginBottom: 'var(--space-3)' }}>Capabilities</h2>
         <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)' }}>
           {agent.capabilities.map((cap) => (
             <li key={cap} style=\{{
               padding: 'var(--space-2) var(--space-3)',
-              borderRadius: 'var(--radius-md, 0.5rem)',
+              borderRadius: 'var(--radius-md)',
               border: '1px solid var(--border)',
               background: 'var(--surface)',
-              fontSize: '0.875rem',
-              fontFamily: 'var(--font-mono, monospace)',
+              fontSize: '0.8125rem',
+              fontFamily: 'var(--font-mono)',
+              color: 'var(--fg-muted)',
             }}>
               {cap}
             </li>
@@ -88,39 +172,52 @@ export default function AgentAdminPage() {
         </ul>
       </section>
 
+      {/* Actions */}
       <section style=\{{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
-        <a href={agent.verifyUrl} target="_blank" rel="noopener noreferrer" style=\{{
-          padding: 'var(--space-3) var(--space-4)',
-          borderRadius: 'var(--radius-md, 0.5rem)',
-          border: '1px solid var(--border)',
-          color: 'var(--fg)',
-          textDecoration: 'none',
-        }}>
+        <a
+          href={agent.verifyUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          style=\{{
+            padding: 'var(--space-3) var(--space-4)',
+            borderRadius: 'var(--radius-md)',
+            border: '1px solid var(--border)',
+            color: 'var(--fg)',
+            textDecoration: 'none',
+            fontSize: '0.875rem',
+          }}
+        >
           Public verify URL ↗
         </a>
         <Link href="/admin/mcp" style=\{{
           padding: 'var(--space-3) var(--space-4)',
-          borderRadius: 'var(--radius-md, 0.5rem)',
+          borderRadius: 'var(--radius-md)',
           border: '1px solid var(--border)',
           color: 'var(--fg)',
           textDecoration: 'none',
+          fontSize: '0.875rem',
         }}>
           MCP servers
         </Link>
-        <button
-          onClick={() => { /* TODO: POST /api/agent/kill */ }}
-          style=\{{
-            padding: 'var(--space-3) var(--space-4)',
-            borderRadius: 'var(--radius-md, 0.5rem)',
-            border: '1px solid var(--danger)',
-            background: 'transparent',
-            color: 'var(--danger)',
-            fontWeight: 600,
-            cursor: 'pointer',
-          }}
-        >
-          Kill switch
-        </button>
+        {agent.status !== 'revoked' && (
+          <button
+            onClick={handleKillSwitch}
+            disabled={killing}
+            style=\{{
+              padding: 'var(--space-3) var(--space-4)',
+              borderRadius: 'var(--radius-md)',
+              border: '1px solid var(--danger)',
+              background: 'transparent',
+              color: 'var(--danger)',
+              fontWeight: 600,
+              fontSize: '0.875rem',
+              cursor: killing ? 'not-allowed' : 'pointer',
+              opacity: killing ? 0.6 : 1,
+            }}
+          >
+            {killing ? 'Revoking…' : 'Kill switch'}
+          </button>
+        )}
       </section>
     </div>
   );

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

@@ -0,0 +1,82 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useAuth, UserButton } from '@githat/nextjs';
+
+const navItems = [
+  { label: 'Agent', href: '/admin/agent' },
+  { label: 'MCP Servers', href: '/admin/mcp' },
+];
+
+export default function AdminLayout({ children }{{#if typescript}}: { children: React.ReactNode }{{/if}}) {
+  const pathname = usePathname();
+  const { isSignedIn, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--bg)' }}>
+        <span style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem' }}>Loading…</span>
+      </div>
+    );
+  }
+
+  if (!isSignedIn) {
+    return (
+      <div style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--bg)' }}>
+        <Link href="/sign-in" style=\{{ color: 'var(--primary)', fontWeight: 600 }}>Sign in to access the admin panel →</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div style=\{{ display: 'flex', minHeight: '100vh', background: 'var(--bg)' }}>
+      <aside style=\{{
+        width: '14rem',
+        borderRight: '1px solid var(--border)',
+        padding: 'var(--space-6) var(--space-4)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-2)',
+      }}>
+        <Link href="/" style=\{{
+          fontFamily: 'var(--font-wordmark)',
+          fontSize: '1.125rem',
+          fontWeight: 700,
+          color: 'var(--fg)',
+          marginBottom: 'var(--space-4)',
+          display: 'block',
+        }}>
+          {{businessName}}
+        </Link>
+        <nav style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              style=\{{
+                padding: 'var(--space-2) var(--space-3)',
+                borderRadius: 'var(--radius-md)',
+                color: pathname === item.href ? 'var(--fg)' : 'var(--fg-muted)',
+                background: pathname === item.href ? 'var(--surface)' : 'transparent',
+                textDecoration: 'none',
+                fontSize: '0.875rem',
+                fontWeight: pathname === item.href ? 600 : 400,
+                border: pathname === item.href ? '1px solid var(--border)' : '1px solid transparent',
+              }}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+        <div style=\{{ marginTop: 'auto' }}>
+          <UserButton />
+        </div>
+      </aside>
+
+      <main style=\{{ flex: 1, overflowY: 'auto' }}>
+        {children}
+      </main>
+    </div>
+  );
+}

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>
+  );
+}