create-githat-app 1.0.0

package/templates/base/githat/dashboard/mcp-servers.tsx.hbs

@@ -0,0 +1,111 @@
+{{#if includeMcpModule}}
+'use client';
+
+import { useState, useEffect } from 'react';
+import { githatApi } from '../api/client{{#unless typescript}}.js{{/unless}}';
+{{#if typescript}}
+import type { McpServer } from '../api/types';
+{{/if}}
+
+export function DashboardMcpServers() {
+  const [servers, setServers] = useState{{#if typescript}}<McpServer[]>{{/if}}([]);
+  const [loading, setLoading] = useState(true);
+  const [domain, setDomain] = useState('');
+  const [registering, setRegistering] = useState(false);
+  const [error, setError] = useState('');
+
+  const loadServers = () => {
+    setLoading(true);
+    githatApi.get{{#if typescript}}<{ servers: McpServer[] }>{{/if}}('/mcp/servers')
+      .then((data) => setServers(data.servers || []))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => { loadServers(); }, []);
+
+  const handleRegister = async (e{{#if typescript}}: React.FormEvent{{/if}}) => {
+    e.preventDefault();
+    if (!domain.trim()) return;
+    setRegistering(true);
+    setError('');
+    try {
+      await githatApi.post('/mcp/servers', { domain: domain.trim() });
+      setDomain('');
+      loadServers();
+    } catch {
+      setError('Failed to register server. Check your domain and try again.');
+    } finally {
+      setRegistering(false);
+    }
+  };
+
+  const handleDelete = async (id{{#if typescript}}: string{{/if}}) => {
+    if (!confirm('Remove this MCP server?')) return;
+    try {
+      await githatApi.del(`/mcp/servers/${id}`);
+      loadServers();
+    } catch {
+      setError('Failed to remove server.');
+    }
+  };
+
+  if (loading) {
+    return <p style=\{{ color: '#71717a' }}>Loading MCP servers...</p>;
+  }
+
+  return (
+    <div>
+      <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '1.5rem' }}>MCP Servers</h1>
+
+      <form onSubmit={handleRegister} style=\{{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem' }}>
+        <input
+          type="text"
+          value={domain}
+          onChange={(e) => setDomain(e.target.value)}
+          placeholder="mcp.yourcompany.com"
+          required
+          style=\{{ flex: 1, padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa', outline: 'none' }}
+        />
+        <button
+          type="submit"
+          disabled={registering}
+          style=\{{ padding: '0.625rem 1.25rem', background: '#7c3aed', color: '#fff', border: 'none', borderRadius: '0.375rem', fontWeight: 600, cursor: 'pointer', opacity: registering ? 0.6 : 1 }}
+        >
+          {registering ? 'Registering...' : 'Register'}
+        </button>
+      </form>
+
+      {error && <p style=\{{ color: '#ef4444', fontSize: '0.875rem', marginBottom: '1rem' }}>{error}</p>}
+
+      {servers.length === 0 ? (
+        <div style=\{{ padding: '3rem', textAlign: 'center', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.5rem' }}>
+          <p style=\{{ color: '#71717a' }}>No MCP servers registered yet.</p>
+        </div>
+      ) : (
+        <div style=\{{ display: 'grid', gap: '0.5rem' }}>
+          {servers.map((server) => (
+            <div key={server.id} style=\{{ padding: '1rem 1.5rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <div>
+                <p style=\{{ fontWeight: 600, color: '#fafafa' }}>{server.domain}</p>
+                <p style=\{{ fontSize: '0.875rem', color: '#71717a' }}>Client ID: {server.clientId}</p>
+              </div>
+              <div style=\{{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                <span style=\{{ fontSize: '0.75rem', padding: '0.25rem 0.75rem', borderRadius: '9999px', background: server.verified ? '#064e3b' : '#451a03', color: server.verified ? '#34d399' : '#f59e0b' }}>
+                  {server.verified ? 'Verified' : 'Pending'}
+                </span>
+                <button
+                  onClick={() => handleDelete(server.id)}
+                  style=\{{ fontSize: '0.75rem', padding: '0.25rem 0.5rem', background: 'transparent', border: '1px solid #3f3f46', borderRadius: '0.25rem', color: '#ef4444', cursor: 'pointer' }}
+                >
+                  Remove
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+{{/if}}

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

@@ -0,0 +1,123 @@
+{{#if includeOrgManagement}}
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useAuth } from '@githat/nextjs';
+import { orgsApi } from '../api/orgs{{#unless typescript}}.js{{/unless}}';
+{{#if typescript}}
+import type { ApiOrgMember } from '../api/types';
+{{/if}}
+
+export function DashboardMembers() {
+  const { org } = useAuth();
+  const [members, setMembers] = useState{{#if typescript}}<ApiOrgMember[]>{{/if}}([]);
+  const [loading, setLoading] = useState(true);
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteRole, setInviteRole] = useState{{#if typescript}}<'admin' | 'member'>{{/if}}('member');
+  const [inviting, setInviting] = useState(false);
+  const [error, setError] = useState('');
+
+  const loadMembers = () => {
+    if (!org) return;
+    setLoading(true);
+    orgsApi.listMembers(org.id)
+      .then((data) => setMembers(data.members || []))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => { loadMembers(); }, [org]);
+
+  const handleInvite = async (e{{#if typescript}}: React.FormEvent{{/if}}) => {
+    e.preventDefault();
+    if (!org || !inviteEmail.trim()) return;
+    setInviting(true);
+    setError('');
+    try {
+      await orgsApi.inviteMember(org.id, inviteEmail.trim(), inviteRole);
+      setInviteEmail('');
+      loadMembers();
+    } catch {
+      setError('Failed to send invite. Please try again.');
+    } finally {
+      setInviting(false);
+    }
+  };
+
+  const handleRemove = async (userId{{#if typescript}}: string{{/if}}) => {
+    if (!org || !confirm('Remove this member?')) return;
+    try {
+      await orgsApi.removeMember(org.id, userId);
+      loadMembers();
+    } catch {
+      setError('Failed to remove member.');
+    }
+  };
+
+  if (!org) {
+    return <p style=\{{ color: '#71717a' }}>Select an organization to manage members.</p>;
+  }
+
+  if (loading) {
+    return <p style=\{{ color: '#71717a' }}>Loading members...</p>;
+  }
+
+  return (
+    <div>
+      <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '1.5rem' }}>Members</h1>
+
+      <form onSubmit={handleInvite} style=\{{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+        <input
+          type="email"
+          value={inviteEmail}
+          onChange={(e) => setInviteEmail(e.target.value)}
+          placeholder="colleague@company.com"
+          required
+          style=\{{ flex: 1, minWidth: '12rem', padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa', outline: 'none' }}
+        />
+        <select
+          value={inviteRole}
+          onChange={(e) => setInviteRole(e.target.value{{#if typescript}} as 'admin' | 'member'{{/if}})}
+          style=\{{ padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa' }}
+        >
+          <option value="member">Member</option>
+          <option value="admin">Admin</option>
+        </select>
+        <button
+          type="submit"
+          disabled={inviting}
+          style=\{{ padding: '0.625rem 1.25rem', background: '#7c3aed', color: '#fff', border: 'none', borderRadius: '0.375rem', fontWeight: 600, cursor: 'pointer', opacity: inviting ? 0.6 : 1 }}
+        >
+          {inviting ? 'Inviting...' : 'Invite'}
+        </button>
+      </form>
+
+      {error && <p style=\{{ color: '#ef4444', fontSize: '0.875rem', marginBottom: '1rem' }}>{error}</p>}
+
+      <div style=\{{ display: 'grid', gap: '0.5rem' }}>
+        {members.map((member) => (
+          <div key={member.userId} style=\{{ padding: '1rem 1.5rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <div>
+              <p style=\{{ fontWeight: 600, color: '#fafafa' }}>{member.name}</p>
+              <p style=\{{ fontSize: '0.875rem', color: '#71717a' }}>{member.email}</p>
+            </div>
+            <div style=\{{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+              <span style=\{{ fontSize: '0.75rem', padding: '0.25rem 0.75rem', borderRadius: '9999px', background: '#1e1e2e', color: member.role === 'owner' ? '#7c3aed' : '#a1a1aa' }}>
+                {member.role}
+              </span>
+              {member.role !== 'owner' && (
+                <button
+                  onClick={() => handleRemove(member.userId)}
+                  style=\{{ fontSize: '0.75rem', padding: '0.25rem 0.5rem', background: 'transparent', border: '1px solid #3f3f46', borderRadius: '0.25rem', color: '#ef4444', cursor: 'pointer' }}
+                >
+                  Remove
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+{{/if}}

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

@@ -0,0 +1,37 @@
+{{#unless includeDashboard}}{{else}}
+'use client';
+
+import { useAuth } from '@githat/nextjs';
+
+export function DashboardOverview() {
+  const { user, org } = useAuth();
+
+  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=\{{ 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" />
+      </div>
+    </div>
+  );
+}
+
+function StatCard({ title, value }{{#if typescript}}: { title: string; value: 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>
+  );
+}
+{{/unless}}

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

@@ -0,0 +1,87 @@
+{{#if includeOrgManagement}}
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '@githat/nextjs';
+import { orgsApi } from '../api/orgs{{#unless typescript}}.js{{/unless}}';
+
+export function DashboardSettings() {
+  const { org } = useAuth();
+  const [name, setName] = useState(org?.name || '');
+  const [brandColor, setBrandColor] = useState(org?.brandColor || '#7c3aed');
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState('');
+
+  if (!org) {
+    return <p style=\{{ color: '#71717a' }}>Select an organization to view settings.</p>;
+  }
+
+  const handleSave = async (e{{#if typescript}}: React.FormEvent{{/if}}) => {
+    e.preventDefault();
+    setSaving(true);
+    setError('');
+    setSaved(false);
+    try {
+      await orgsApi.update(org.id, { name, brandColor });
+      setSaved(true);
+    } catch {
+      setError('Failed to save settings.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div>
+      <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '1.5rem' }}>Settings</h1>
+      <form onSubmit={handleSave} style=\{{ maxWidth: '32rem', display: 'grid', gap: '1.5rem' }}>
+        <div>
+          <label style=\{{ fontSize: '0.875rem', color: '#71717a', display: 'block', marginBottom: '0.375rem' }}>Organization Name</label>
+          <input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            style=\{{ width: '100%', padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa', outline: 'none' }}
+          />
+        </div>
+        <SettingField label="Slug" value={org.slug} />
+        <SettingField label="Tier" value={org.tier} />
+        <div>
+          <label style=\{{ fontSize: '0.875rem', color: '#71717a', display: 'block', marginBottom: '0.375rem' }}>Brand Color</label>
+          <div style=\{{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+            <input
+              type="color"
+              value={brandColor}
+              onChange={(e) => setBrandColor(e.target.value)}
+              style=\{{ width: '2.5rem', height: '2.5rem', border: '1px solid #1e1e2e', borderRadius: '0.375rem', background: 'transparent', cursor: 'pointer' }}
+            />
+            <span style=\{{ color: '#a1a1aa', fontSize: '0.875rem', fontFamily: 'monospace' }}>{brandColor}</span>
+          </div>
+        </div>
+
+        {error && <p style=\{{ color: '#ef4444', fontSize: '0.875rem' }}>{error}</p>}
+        {saved && <p style=\{{ color: '#34d399', fontSize: '0.875rem' }}>Settings saved.</p>}
+
+        <button
+          type="submit"
+          disabled={saving}
+          style=\{{ padding: '0.625rem 1.25rem', background: '#7c3aed', color: '#fff', border: 'none', borderRadius: '0.375rem', fontWeight: 600, cursor: 'pointer', opacity: saving ? 0.6 : 1, justifySelf: 'start' }}
+        >
+          {saving ? 'Saving...' : 'Save changes'}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+function SettingField({ label, value }{{#if typescript}}: { label: string; value: string }{{/if}}) {
+  return (
+    <div>
+      <label style=\{{ fontSize: '0.875rem', color: '#71717a', display: 'block', marginBottom: '0.375rem' }}>{label}</label>
+      <div style=\{{ padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa' }}>
+        {value}
+      </div>
+    </div>
+  );
+}
+{{/if}}

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

@@ -0,0 +1,63 @@
+{{#if includeForgotPassword}}
+'use client';
+
+import { useState } from 'react';
+{{#if includeGithatFolder}}
+import { authApi } from '../../../githat/api/auth{{#unless typescript}}.js{{/unless}}';
+{{/if}}
+
+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>
+    </main>
+  );
+}
+{{/if}}

package/templates/nextjs/app/(auth)/sign-in/page.tsx.hbs

@@ -0,0 +1,9 @@
+import { SignInForm } from '@githat/nextjs';
+
+export default function SignInPage() {
+  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}}>
+      <SignInForm signUpUrl="/sign-up" {{#if includeForgotPassword}}forgotPasswordUrl="/forgot-password"{{/if}} />
+    </main>
+  );
+}

package/templates/nextjs/app/(auth)/sign-up/page.tsx.hbs

@@ -0,0 +1,9 @@
+import { SignUpForm } from '@githat/nextjs';
+
+export default function SignUpPage() {
+  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}}>
+      <SignUpForm signInUrl="/sign-in" />
+    </main>
+  );
+}

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

@@ -0,0 +1,58 @@
+{{#if includeEmailVerification}}
+'use client';
+
+import { useEffect, useState } from 'react';
+{{#if includeGithatFolder}}
+import { authApi } from '../../../githat/api/auth{{#unless typescript}}.js{{/unless}}';
+{{/if}}
+
+export default function VerifyEmailPage() {
+  const [status, setStatus] = useState{{#if typescript}}<'loading' | 'success' | 'error'>{{/if}}('loading');
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get('token');
+    if (!token) {
+      setStatus('error');
+      return;
+    }
+
+    (async () => {
+      try {
+{{#if includeGithatFolder}}
+        await authApi.verifyEmail(token);
+{{else}}
+        await fetch('{{apiUrl}}/auth/verify-email', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token }),
+        });
+{{/if}}
+        setStatus('success');
+      } catch {
+        setStatus('error');
+      }
+    })();
+  }, []);
+
+  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=\{{ textAlign: 'center' }}>
+        {status === 'loading' && <p style=\{{ color: '#a1a1aa' }}>Verifying your email...</p>}
+        {status === 'success' && (
+          <>
+            <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Email verified!</h1>
+            <p style=\{{ color: '#a1a1aa' }}>You can now <a href="/sign-in" style=\{{ color: '#7c3aed' }}>sign in</a>.</p>
+          </>
+        )}
+        {status === 'error' && (
+          <>
+            <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Verification failed</h1>
+            <p style=\{{ color: '#a1a1aa' }}>The link may have expired. <a href="/sign-up" style=\{{ color: '#7c3aed' }}>Try again</a>.</p>
+          </>
+        )}
+      </div>
+    </main>
+  );
+}
+{{/if}}

package/templates/nextjs/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/nextjs/app/dashboard/apps/page.tsx.hbs

@@ -0,0 +1,9 @@
+{{#if includeDashboard}}
+{{#if includeGithatFolder}}
+import { DashboardApps } from '../../../githat/dashboard/apps{{#unless typescript}}.jsx{{/unless}}';
+
+export default function AppsPage() {
+  return <DashboardApps />;
+}
+{{/if}}
+{{/if}}

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

@@ -0,0 +1,28 @@
+{{#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>;
+}
+{{else}}
+import { ProtectedRoute, UserButton, OrgSwitcher } from '@githat/nextjs';
+
+export default function DashboardLayout({ children }{{#if typescript}}: { children: React.ReactNode }{{/if}}) {
+  return (
+    <ProtectedRoute>
+      <div style=\{{ minHeight: '100vh', background: '#09090b' }}>
+        <header style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '1rem 2rem', borderBottom: '1px solid #1e1e2e' }}>
+          <h2 style=\{{ fontSize: '1.125rem', fontWeight: 600, color: '#fafafa' }}>{{businessName}}</h2>
+          <div style=\{{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <OrgSwitcher />
+            <UserButton />
+          </div>
+        </header>
+        <main style=\{{ padding: '2rem' }}>{children}</main>
+      </div>
+    </ProtectedRoute>
+  );
+}
+{{/if}}
+{{/if}}

package/templates/nextjs/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/nextjs/app/dashboard/members/page.tsx.hbs

@@ -0,0 +1,9 @@
+{{#if includeOrgManagement}}
+{{#if includeGithatFolder}}
+import { DashboardMembers } from '../../../githat/dashboard/members{{#unless typescript}}.jsx{{/unless}}';
+
+export default function MembersPage() {
+  return <DashboardMembers />;
+}
+{{/if}}
+{{/if}}

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

@@ -0,0 +1,30 @@
+{{#if includeDashboard}}
+{{#if includeGithatFolder}}
+import { DashboardOverview } from '../../githat/dashboard/overview{{#unless typescript}}.jsx{{/unless}}';
+
+export default function DashboardPage() {
+  return <DashboardOverview />;
+}
+{{else}}
+'use client';
+
+import { useAuth } from '@githat/nextjs';
+
+export default function DashboardPage() {
+  const { user, org } = useAuth();
+
+  return (
+    <div>
+      <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '1rem' }}>
+        Welcome{user?.name ? `, ${user.name}` : ''}
+      </h1>
+      {org && (
+        <p style=\{{ color: '#a1a1aa' }}>
+          Organization: <strong style=\{{ color: '#7c3aed' }}>{org.name}</strong> ({org.role})
+        </p>
+      )}
+    </div>
+  );
+}
+{{/if}}
+{{/if}}

package/templates/nextjs/app/dashboard/settings/page.tsx.hbs

@@ -0,0 +1,9 @@
+{{#if includeOrgManagement}}
+{{#if includeGithatFolder}}
+import { DashboardSettings } from '../../../githat/dashboard/settings{{#unless typescript}}.jsx{{/unless}}';
+
+export default function SettingsPage() {
+  return <DashboardSettings />;
+}
+{{/if}}
+{{/if}}

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

@@ -0,0 +1,20 @@
+{{#if useTailwind}}
+@import "tailwindcss";
+{{/if}}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #09090b;
+  color: #fafafa;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}