create-githat-app 1.7.0 → 1.8.1

package/templates/base/githat/auth/guard.tsx.hbs

@@ -2,11 +2,11 @@
 'use client';
 
 import { useAuth } from '@githat/nextjs';
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
 import { useRouter } from 'next/navigation';
 {{else}}
 import { useNavigate } from 'react-router-dom';
-{{/ifEquals}}
+{{/ifNext}}
 import { githatConfig } from '../config{{#unless typescript}}.js{{/unless}}';
 
 export function AuthGuard({ children, requiredRole }{{#if typescript}}: {
@@ -14,11 +14,11 @@ export function AuthGuard({ children, requiredRole }{{#if typescript}}: {
   requiredRole?: 'owner' | 'admin' | 'member';
 }{{/if}}) {
   const { isSignedIn, isLoading, org } = useAuth();
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
   const router = useRouter();
 {{else}}
   const navigate = useNavigate();
-{{/ifEquals}}
+{{/ifNext}}
 
   if (isLoading) {
     return (
@@ -29,11 +29,11 @@ export function AuthGuard({ children, requiredRole }{{#if typescript}}: {
   }
 
   if (!isSignedIn) {
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
     router.push(githatConfig.signInUrl);
 {{else}}
     navigate(githatConfig.signInUrl);
-{{/ifEquals}}
+{{/ifNext}}
     return null;
   }
 

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',

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

@@ -4,12 +4,12 @@
 import { UserButton, OrgSwitcher } from '@githat/nextjs';
 import { AuthGuard } from '../auth/guard{{#unless typescript}}.jsx{{/unless}}';
 import { githatConfig } from '../config{{#unless typescript}}.js{{/unless}}';
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 {{else}}
 import { Link, useLocation } from 'react-router-dom';
-{{/ifEquals}}
+{{/ifNext}}
 
 const navItems = [
   { label: 'Overview', href: '/dashboard' },
@@ -27,11 +27,11 @@ const navItems = [
 ];
 
 export function DashboardLayout({ children }{{#if typescript}}: { children: React.ReactNode }{{/if}}) {
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
   const pathname = usePathname();
 {{else}}
   const { pathname } = useLocation();
-{{/ifEquals}}
+{{/ifNext}}
 
   return (
     <AuthGuard>
@@ -45,11 +45,11 @@ export function DashboardLayout({ children }{{#if typescript}}: { children: Reac
             {navItems.map((item) => (
               <Link
                 key={item.href}
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
                 href={item.href}
 {{else}}
                 to={item.href}
-{{/ifEquals}}
+{{/ifNext}}
                 style=\{{
                   padding: '0.5rem 0.75rem',
                   borderRadius: '0.375rem',

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

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

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

@@ -19,7 +19,12 @@ 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: '/',

package/templates/classroom/app/projects/[id]/feedback/feedback-content.tsx.hbs

@@ -0,0 +1,153 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+{{#if typescript}}
+interface FeedbackContentProps {
+  id: string;
+}
+{{/if}}
+
+export default function FeedbackContent({ id }{{#if typescript}}: FeedbackContentProps{{/if}}) {
+  const [submitted, setSubmitted] = useState(false);
+  const [oneThing, setOneThing] = useState('');
+  const [stuck, setStuck] = useState('');
+  const [scale, setScale] = useState(7);
+
+  if (submitted) {
+    return (
+      <div style=\{{
+        background: 'var(--bg)',
+        color: 'var(--fg)',
+        minHeight: 'calc(100vh - 64px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 'var(--space-4)',
+      }}>
+        <div style=\{{ maxWidth: '32rem', textAlign: 'center' }}>
+          <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-3)' }}>
+            ¡Gracias!
+          </h1>
+          <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)' }}>
+            The presenter sees your feedback live on their screen.
+            You can submit again with a new thought any time.
+          </p>
+          <button
+            onClick={() => { setSubmitted(false); setOneThing(''); setStuck(''); setScale(7); }}
+            style=\{{
+              padding: 'var(--space-3) var(--space-5)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              background: 'var(--primary)',
+              color: 'var(--bg)',
+              border: 'none',
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            Add another thought
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)', padding: 'var(--space-8) var(--space-4)' }}>
+      <div style=\{{ maxWidth: '32rem', margin: '0 auto' }}>
+        <Link href={`/projects/${id}`} style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
+          ← Project
+        </Link>
+        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.75rem', marginBottom: 'var(--space-2)' }}>
+          Tell them what you think
+        </h1>
+        <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
+          No account, no email. Just three quick questions while
+          they're presenting.
+        </p>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            /* TODO: POST /api/projects/[id]/feedback { oneThing, stuck, scale } */
+            setSubmitted(true);
+          }}
+          style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}
+        >
+          <Field label="One thing that landed for you">
+            <input
+              type="text"
+              required
+              value={oneThing}
+              onChange={(e) => setOneThing(e.target.value)}
+              placeholder="The thing you'll remember tomorrow"
+              style=\{{
+                width: '100%',
+                padding: 'var(--space-3)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: '1px solid var(--border)',
+                background: 'var(--surface)',
+                color: 'var(--fg)',
+                fontSize: '1rem',
+              }}
+            />
+          </Field>
+
+          <Field label="One thing you'd want them to dig into more">
+            <textarea
+              value={stuck}
+              onChange={(e) => setStuck(e.target.value)}
+              rows={3}
+              placeholder="A question, a doubt, a what-if"
+              style=\{{
+                width: '100%',
+                padding: 'var(--space-3)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: '1px solid var(--border)',
+                background: 'var(--surface)',
+                color: 'var(--fg)',
+                fontSize: '1rem',
+                fontFamily: 'inherit',
+                resize: 'vertical',
+              }}
+            />
+          </Field>
+
+          <Field label={`How likely are you to share this with someone? (${scale}/10)`}>
+            <input
+              type="range"
+              min={1}
+              max={10}
+              value={scale}
+              onChange={(e) => setScale(Number(e.target.value))}
+              style=\{{ width: '100%' }}
+            />
+          </Field>
+
+          <button type="submit" style=\{{
+            padding: 'var(--space-3) var(--space-5)',
+            borderRadius: 'var(--radius-md, 0.5rem)',
+            background: 'var(--primary)',
+            color: 'var(--bg)',
+            border: 'none',
+            fontWeight: 600,
+            fontSize: '1rem',
+            cursor: 'pointer',
+          }}>
+            Send feedback
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, children }{{#if typescript}}: { label: string; children: React.ReactNode }{{/if}}) {
+  return (
+    <label style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
+      <span style=\{{ fontSize: '0.875rem', fontWeight: 600 }}>{label}</span>
+      {children}
+    </label>
+  );
+}

package/templates/classroom/app/projects/[id]/feedback/page.tsx.hbs

@@ -1,159 +1,20 @@
-'use client';
-
-import { use, useState } from 'react';
-import Link from 'next/link';
+import FeedbackContent from './feedback-content{{#unless typescript}}.jsx{{/unless}}';
 
 /**
  * Audience feedback form — `/projects/[id]/feedback`.
  *
- * Anyone with the link can fill this out. NO sign-in required —
- * that's the whole point. Anonymous responses go to a queue the
- * presenter watches in real time on /present.
- *
- * The form questions are deliberately short — long forms kill
- * response rates and the value of this template is volume of
- * feedback over time, not depth per response.
+ * generateStaticParams tells Next.js which ids to pre-render at build
+ * time (required for `output: "export"`). FeedbackContent is a client
+ * component that renders the form with React state.
  */
-export default function FeedbackPage({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = use(params);
-  const [submitted, setSubmitted] = useState(false);
-  const [oneThing, setOneThing] = useState('');
-  const [stuck, setStuck] = useState('');
-  const [scale, setScale] = useState(7);
-
-  if (submitted) {
-    return (
-      <div style=\{{
-        background: 'var(--bg)',
-        color: 'var(--fg)',
-        minHeight: 'calc(100vh - 64px)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 'var(--space-4)',
-      }}>
-        <div style=\{{ maxWidth: '32rem', textAlign: 'center' }}>
-          <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-3)' }}>
-            ¡Gracias!
-          </h1>
-          <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)' }}>
-            The presenter sees your feedback live on their screen.
-            You can submit again with a new thought any time.
-          </p>
-          <button
-            onClick={() => { setSubmitted(false); setOneThing(''); setStuck(''); setScale(7); }}
-            style=\{{
-              padding: 'var(--space-3) var(--space-5)',
-              borderRadius: 'var(--radius-md, 0.5rem)',
-              background: 'var(--primary)',
-              color: 'var(--bg)',
-              border: 'none',
-              fontWeight: 600,
-              cursor: 'pointer',
-            }}
-          >
-            Add another thought
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)', padding: 'var(--space-8) var(--space-4)' }}>
-      <div style=\{{ maxWidth: '32rem', margin: '0 auto' }}>
-        <Link href={`/projects/${id}`} style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
-          ← Project
-        </Link>
-        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.75rem', marginBottom: 'var(--space-2)' }}>
-          Tell them what you think
-        </h1>
-        <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
-          No account, no email. Just three quick questions while
-          they're presenting.
-        </p>
-
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            /* TODO: POST /api/projects/[id]/feedback { oneThing, stuck, scale } */
-            setSubmitted(true);
-          }}
-          style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}
-        >
-          <Field label="One thing that landed for you">
-            <input
-              type="text"
-              required
-              value={oneThing}
-              onChange={(e) => setOneThing(e.target.value)}
-              placeholder="The thing you'll remember tomorrow"
-              style=\{{
-                width: '100%',
-                padding: 'var(--space-3)',
-                borderRadius: 'var(--radius-md, 0.5rem)',
-                border: '1px solid var(--border)',
-                background: 'var(--surface)',
-                color: 'var(--fg)',
-                fontSize: '1rem',
-              }}
-            />
-          </Field>
-
-          <Field label="One thing you'd want them to dig into more">
-            <textarea
-              value={stuck}
-              onChange={(e) => setStuck(e.target.value)}
-              rows={3}
-              placeholder="A question, a doubt, a what-if"
-              style=\{{
-                width: '100%',
-                padding: 'var(--space-3)',
-                borderRadius: 'var(--radius-md, 0.5rem)',
-                border: '1px solid var(--border)',
-                background: 'var(--surface)',
-                color: 'var(--fg)',
-                fontSize: '1rem',
-                fontFamily: 'inherit',
-                resize: 'vertical',
-              }}
-            />
-          </Field>
 
-          <Field label={`How likely are you to share this with someone? (${scale}/10)`}>
-            <input
-              type="range"
-              min={1}
-              max={10}
-              value={scale}
-              onChange={(e) => setScale(Number(e.target.value))}
-              style=\{{ width: '100%' }}
-            />
-          </Field>
+const SAMPLE_PROJECT_IDS = ['sustainable-bodega', 'after-school-tutor', 'community-fridge'];
 
-          <button type="submit" style=\{{
-            padding: 'var(--space-3) var(--space-5)',
-            borderRadius: 'var(--radius-md, 0.5rem)',
-            background: 'var(--primary)',
-            color: 'var(--bg)',
-            border: 'none',
-            fontWeight: 600,
-            fontSize: '1rem',
-            cursor: 'pointer',
-          }}>
-            Send feedback
-          </button>
-        </form>
-      </div>
-    </div>
-  );
+export function generateStaticParams() {
+  return SAMPLE_PROJECT_IDS.map((id) => ({ id }));
 }
 
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <label style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
-      <span style=\{{ fontSize: '0.875rem', fontWeight: 600 }}>{label}</span>
-      {children}
-    </label>
-  );
+export default async function FeedbackPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <FeedbackContent id={id} />;
 }