create-githat-app 1.8.5 → 1.8.7

package/templates/marketplace/app/sell/page.tsx.hbs

@@ -3,10 +3,9 @@ import Link from 'next/link';
 /**
  * Seller pitch page — `/sell`.
  *
- * Bodega owners land here from the homepage CTA "Vende en
- * {{businessName}}." The job of this page is to convince a small
- * shop owner — often someone who's never used a SaaS — that the
- * platform is worth five minutes of their time.
+ * Sellers land here from the homepage CTA "Sell on {{businessName}}."
+ * The job of this page is to convince a shop owner that the platform
+ * is worth five minutes of their time.
  *
  * Three commitments worth making explicit:
  *  1. They keep 96% (we take 4% as the platform fee)
@@ -23,11 +22,11 @@ export default function SellPage() {
           lineHeight: 1.1,
           marginBottom: 'var(--space-3)',
         }}>
-          Tu colmado, online en 5 minutos.
+          Your store, online in 5 minutes.
         </h1>
         <p style=\{{ color: 'var(--fg-muted)', fontSize: '1.125rem', marginBottom: 'var(--space-6)' }}>
-          Take orders from your block, take payment to your bank. We handle
-          the website, the cart, the receipts. You handle the colmado.
+          Take orders from your customers, take payment to your bank. We handle
+          the website, the cart, the receipts. You handle the products.
         </p>
         <Link href="/sign-up?role=seller" style=\{{
           display: 'inline-block',
@@ -39,35 +38,35 @@ export default function SellPage() {
           fontSize: '1.125rem',
           textDecoration: 'none',
         }}>
-          Empieza gratis →
+          Start for free →
         </Link>
       </section>
 
       <section style=\{{ padding: 'var(--space-8) var(--space-4)', background: 'var(--surface-sub)' }}>
         <div style=\{{ maxWidth: '48rem', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 'var(--space-6)' }}>
-          <Promise emoji="💵" title="Te quedas con el 96%" body="We take a flat 4% on each order. No monthly fee on the free tier. No surprise charges." />
-          <Promise emoji="🏦" title="Pagos directo a tu cuenta" body="Sebastn pays you to your bank the next business day. You keep your existing bank account." />
-          <Promise emoji="🚪" title="Sin contratos" body="Cancel any time. Export your customers, your products, your orders. They're yours." />
+          <SellerProp emoji="💵" title="You keep 96%" body="We take a flat 4% on each order. No monthly fee on the free tier. No surprise charges." />
+          <SellerProp emoji="🏦" title="Direct bank payouts" body="Sebastn pays you to your bank the next business day. You keep your existing bank account." />
+          <SellerProp emoji="🚪" title="No lock-in" body="Cancel any time. Export your customers, your products, your orders. They're yours." />
         </div>
       </section>
 
       <section style=\{{ padding: 'var(--space-12) var(--space-4)', textAlign: 'center', maxWidth: '40rem', margin: '0 auto' }}>
         <h2 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.75rem', marginBottom: 'var(--space-3)' }}>
-          ¿Cómo funciona?
+          How it works
         </h2>
         <ol style=\{{ textAlign: 'left', color: 'var(--fg-muted)', lineHeight: 1.8, paddingLeft: 'var(--space-6)' }}>
-          <li>Te creas tu cuenta de {{businessName}} (es gratis).</li>
-          <li>Conectas tu banco (a través de Sebastn).</li>
-          <li>Subes tus productos — o los importas de un CSV.</li>
-          <li>Tu colmado vive en <code>{{businessName}}/tu-tienda</code>.</li>
-          <li>Los pedidos te llegan por email. Tú decides cómo entregar.</li>
+          <li>Create your {{businessName}} seller account (it's free).</li>
+          <li>Connect your bank via Sebastn.</li>
+          <li>Add your products — or import them from a CSV.</li>
+          <li>Your store lives at <code>{{businessName}}/your-store</code>.</li>
+          <li>Orders arrive by email. You decide how to fulfill them.</li>
         </ol>
       </section>
     </div>
   );
 }
 
-function Promise({ emoji, title, body }: { emoji: string; title: string; body: string }) {
+function SellerProp({ emoji, title, body }: { emoji: string; title: string; body: string }) {
   return (
     <div>
       <div style=\{{ fontSize: '2rem', marginBottom: 'var(--space-2)' }} aria-hidden>{emoji}</div>

package/templates/marketplace/src/data/products.ts.hbs

@@ -0,0 +1,64 @@
+/**
+ * Marketplace product catalog — edit this file to add your products.
+ *
+ * This is the ONLY place product data lives in the template. All pages
+ * (homepage, cart, admin) import from here. When you're ready to move
+ * products to a database (Postgres, DynamoDB, Sebastn), replace the
+ * PRODUCTS array with a fetch from your backend and keep the Product
+ * interface unchanged so your UI components don't break.
+ *
+ * Quick start:
+ *   1. Replace the sample entries below with your real products.
+ *   2. Add or remove fields on the Product interface as needed.
+ *   3. Run `npm run dev` — all pages update automatically.
+ */
+
+export interface Product {
+  id: string;
+  name: string;
+  description: string;
+  price: number;          // in your currency's base unit (e.g. USD)
+  category: string;       // must match a Category slug in categories.ts
+  inStock: boolean;
+  imageAlt?: string;      // describe the product for screen readers
+}
+
+export const PRODUCTS: Product[] = [
+  {
+    id: 'sample-1',
+    name: 'Sample product 1',
+    description: 'Replace this with your first product description.',
+    price: 9.99,
+    category: 'general',
+    inStock: true,
+    imageAlt: 'Sample product 1',
+  },
+  {
+    id: 'sample-2',
+    name: 'Sample product 2',
+    description: 'Replace this with your second product description.',
+    price: 14.99,
+    category: 'general',
+    inStock: true,
+    imageAlt: 'Sample product 2',
+  },
+  {
+    id: 'sample-3',
+    name: 'Sample product 3',
+    description: 'Replace this with your third product description.',
+    price: 4.99,
+    category: 'general',
+    inStock: false,
+    imageAlt: 'Sample product 3',
+  },
+];
+
+/** Convenience helper — returns only in-stock products. */
+export function getAvailableProducts(): Product[] {
+  return PRODUCTS.filter((p) => p.inStock);
+}
+
+/** Look up a single product by id. Returns undefined if not found. */
+export function getProductById(id: string): Product | undefined {
+  return PRODUCTS.find((p) => p.id === id);
+}

package/templates/marketplace/src/lib/categories.ts.hbs

@@ -1,35 +1,29 @@
 /**
- * Category seed for the marketplace template.
+ * Category definitions for the marketplace template.
  *
- * Default values are shaped for a Caribbean colmado (Dominican-flavored),
- * which is the {{businessName}} project's first audience. Replace as
- * needed for your region — see CULTURE.md for what's region-specific
- * vs universal.
+ * Edit this list to match your product taxonomy. Each entry needs:
+ *   - slug: used in URLs (/search?cat=<slug>)
+ *   - label: shown to shoppers
+ *   - emoji: visual icon (optional but helpful for quick scanning)
  *
- * Each category is bilingual on purpose: the Spanish term is what
- * the shopper actually says ("recargas," "víveres") and the English
- * gloss helps Anglophone shoppers navigate without hiding the
- * cultural identity.
+ * Add as many or as few categories as you need. Keep slugs URL-safe
+ * (lowercase, hyphens only — no spaces or special characters).
+ *
+ * If you add a second language, add a `labelEs` / `labelFr` field and
+ * update the category card in app/page.tsx to render it.
  */
 
 export interface Category {
   slug: string;
-  es: string;
-  en: string;
+  label: string;
   emoji: string;
 }
 
 export const CATEGORIES: Category[] = [
-  { slug: 'viveres',   es: 'Víveres',          en: 'Staples',         emoji: '🍚' },
-  { slug: 'frutas',    es: 'Frutas y verduras', en: 'Produce',        emoji: '🥑' },
-  { slug: 'carnes',    es: 'Carnes',            en: 'Meat',           emoji: '🥩' },
-  { slug: 'lacteos',   es: 'Lácteos y huevos',  en: 'Dairy & eggs',   emoji: '🥚' },
-  { slug: 'bebidas',   es: 'Bebidas',           en: 'Drinks',         emoji: '🍺' },
-  { slug: 'hielo',     es: 'Hielo',             en: 'Ice',            emoji: '🧊' },
-  { slug: 'pan',       es: 'Pan y galletas',    en: 'Bread & crackers', emoji: '🍞' },
-  { slug: 'recargas',  es: 'Recargas',          en: 'Phone top-ups',  emoji: '📱' },
-  { slug: 'limpieza',  es: 'Limpieza',          en: 'Cleaning',       emoji: '🧼' },
-  { slug: 'higiene',   es: 'Higiene personal',  en: 'Personal care',  emoji: '🪥' },
-  { slug: 'sazon',     es: 'Sazón',             en: 'Seasonings',     emoji: '🧂' },
-  { slug: 'fritura',   es: 'Frituras',          en: 'Hot snacks',     emoji: '🥟' },
+  { slug: 'general',     label: 'General',         emoji: '🏪' },
+  { slug: 'food',        label: 'Food & drinks',   emoji: '🍎' },
+  { slug: 'household',   label: 'Household',       emoji: '🧹' },
+  { slug: 'personal',    label: 'Personal care',   emoji: '🪥' },
+  { slug: 'electronics', label: 'Electronics',     emoji: '📱' },
+  { slug: 'clothing',    label: 'Clothing',        emoji: '👕' },
 ];

package/templates/nextjs/app/account/activity/page.tsx.hbs

@@ -0,0 +1,176 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useAuditLog } from '@githat/nextjs';
+import type { AuditEvent, AuditEventType } from '@githat/nextjs';
+
+const EVENT_ICONS: Record<string, string> = {
+  login_success: '✓',
+  login_failed: '✗',
+  mfa_enabled: '🔒',
+  mfa_disabled: '🔓',
+  mfa_challenge_failed: '⚠',
+  password_changed: '🔑',
+  email_verified: '✉',
+  passkey_added: '🔐',
+  passkey_removed: '🗑',
+  magic_link_requested: '✉',
+  session_revoked: '⊗',
+  account_locked: '⛔',
+  user_created: '★',
+};
+
+const EVENT_LABELS: Record<string, string> = {
+  login_success: 'Signed in',
+  login_failed: 'Failed sign-in attempt',
+  mfa_enabled: '2FA enabled',
+  mfa_disabled: '2FA disabled',
+  mfa_challenge_failed: '2FA challenge failed',
+  password_changed: 'Password changed',
+  email_verified: 'Email verified',
+  passkey_added: 'Passkey added',
+  passkey_removed: 'Passkey removed',
+  magic_link_requested: 'Magic link sent',
+  session_revoked: 'Session revoked',
+  account_locked: 'Account locked',
+  user_created: 'Account created',
+};
+
+/**
+ * /account/activity — Sign-in audit log for {{businessName}}.
+ *
+ * Immutable per-user record of auth events. Paginated table view
+ * with type icon, when, IP, user-agent, and country flag.
+ */
+export default function ActivityPage() {
+  const { list } = useAuditLog();
+  const [events, setEvents] = useState<AuditEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [cursor, setCursor] = useState<string | null>(null);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  async function load(append = false) {
+    if (append) setLoadingMore(true); else setLoading(true);
+    setError(null);
+    try {
+      const result = await list({ limit: 50, ...(append && cursor ? { cursor } : {}) });
+      setEvents((prev) => append ? [...prev, ...result.events] : result.events);
+      setCursor(result.nextCursor);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load activity');
+    } finally {
+      if (append) setLoadingMore(false); else setLoading(false);
+    }
+  }
+
+  useEffect(() => { load(); }, []);
+
+  return (
+    <main
+      style=\{{
+        maxWidth: '900px',
+        margin: '0 auto',
+        padding: 'var(--space-8, 2rem) var(--space-4, 1rem)',
+        color: 'var(--fg, #111)',
+      }}
+    >
+      <header style=\{{ marginBottom: '1.5rem' }}>
+        <div style=\{{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
+          <a href="/account/security" style=\{{ color: 'var(--fg-muted, #666)', textDecoration: 'none', fontSize: '0.875rem' }}>
+            Security
+          </a>
+          <span style=\{{ color: 'var(--fg-muted, #666)' }}>›</span>
+          <span style=\{{ fontSize: '0.875rem' }}>Activity</span>
+        </div>
+        <h1 style=\{{ fontSize: '1.875rem', fontWeight: 700, margin: 0 }}>Sign-in activity</h1>
+        <p style=\{{ color: 'var(--fg-muted, #666)', marginTop: '0.25rem' }}>
+          Immutable record of security events for your {{businessName}} account.
+        </p>
+      </header>
+
+      {error && (
+        <div style=\{{ padding: '0.75rem 1rem', background: '#fef2f2', border: '1px solid #fecaca', borderRadius: '6px', color: '#dc2626', marginBottom: '1rem' }}>
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <p style=\{{ color: 'var(--fg-muted, #666)' }}>Loading activity...</p>
+      ) : events.length === 0 ? (
+        <p style=\{{ color: 'var(--fg-muted, #666)' }}>No activity found.</p>
+      ) : (
+        <>
+          <div style=\{{ overflowX: 'auto' }}>
+            <table style=\{{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
+              <thead>
+                <tr style=\{{ borderBottom: '1px solid var(--border, #e5e7eb)', textAlign: 'left' }}>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600, color: 'var(--fg-muted, #666)', width: '2rem' }}></th>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600 }}>Event</th>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600 }}>When</th>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600 }}>IP</th>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600 }}>Country</th>
+                  <th style=\{{ padding: '0.5rem 0.75rem', fontWeight: 600 }}>Device</th>
+                </tr>
+              </thead>
+              <tbody>
+                {events.map((evt, i) => {
+                  const meta = evt.metadata as Record<string, string | undefined>;
+                  const ua = meta?.userAgent || '';
+                  const truncatedUa = ua.length > 50 ? ua.slice(0, 50) + '…' : ua;
+                  return (
+                    <tr
+                      key={evt.sk || i}
+                      style=\{{ borderBottom: '1px solid var(--border, #e5e7eb)' }}
+                    >
+                      <td style=\{{ padding: '0.6rem 0.75rem', textAlign: 'center', fontSize: '1rem' }}>
+                        {EVENT_ICONS[evt.action] || '•'}
+                      </td>
+                      <td style=\{{ padding: '0.6rem 0.75rem', fontWeight: 500 }}>
+                        {EVENT_LABELS[evt.action] || evt.action}
+                      </td>
+                      <td style=\{{ padding: '0.6rem 0.75rem', color: 'var(--fg-muted, #666)', whiteSpace: 'nowrap' }}>
+                        {new Date(evt.created_at).toLocaleString()}
+                      </td>
+                      <td style=\{{ padding: '0.6rem 0.75rem', color: 'var(--fg-muted, #666)', fontFamily: 'monospace' }}>
+                        {meta?.ipAddress || '—'}
+                      </td>
+                      <td style=\{{ padding: '0.6rem 0.75rem', color: 'var(--fg-muted, #666)' }}>
+                        {meta?.country || '—'}
+                      </td>
+                      <td
+                        style=\{{ padding: '0.6rem 0.75rem', color: 'var(--fg-muted, #666)', maxWidth: '280px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                        title={ua}
+                      >
+                        {truncatedUa || '—'}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {cursor && (
+            <div style=\{{ marginTop: '1.5rem', textAlign: 'center' }}>
+              <button
+                onClick={() => load(true)}
+                disabled={loadingMore}
+                style=\{{
+                  padding: '0.5rem 1.5rem',
+                  background: 'transparent',
+                  border: '1px solid var(--border, #e5e7eb)',
+                  borderRadius: '6px',
+                  cursor: loadingMore ? 'not-allowed' : 'pointer',
+                  fontSize: '0.875rem',
+                }}
+              >
+                {loadingMore ? 'Loading...' : 'Load more'}
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </main>
+  );
+}

package/templates/nextjs/app/account/files/page.tsx.hbs

@@ -0,0 +1,241 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useStorage, StorageDropzone } from '@githat/nextjs';
+import type { StorageObject } from '@githat/nextjs';
+
+/**
+ * /account/files — File storage for {{businessName}}.
+ *
+ * Lists uploaded files with download links. Uses <StorageDropzone/>
+ * for browser-direct uploads to S3 via the GitHat storage API.
+ * Works with Next.js static export — no server actions required.
+ */
+export default function FilesPage() {
+  const { list, getUrl, remove } = useStorage();
+  const [files, setFiles] = useState<StorageObject[]>([]);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  async function load(cursor?: string) {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await list({ limit: 20, cursor });
+      if (cursor) {
+        setFiles((prev) => [...prev, ...result.items]);
+      } else {
+        setFiles(result.items);
+      }
+      setNextCursor(result.nextCursor);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load files');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { load(); }, []);
+
+  async function handleDownload(objectId: string) {
+    try {
+      const obj = await getUrl(objectId);
+      if (obj.downloadUrl) {
+        window.open(obj.downloadUrl, '_blank', 'noopener,noreferrer');
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to get download URL');
+    }
+  }
+
+  async function handleDelete(objectId: string) {
+    if (!confirm('Delete this file? This cannot be undone.')) return;
+    setDeletingId(objectId);
+    try {
+      await remove(objectId);
+      setFiles((prev) => prev.filter((f) => f.objectId !== objectId));
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to delete file');
+    } finally {
+      setDeletingId(null);
+    }
+  }
+
+  function formatBytes(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  }
+
+  return (
+    <main
+      style=\{{
+        maxWidth: '720px',
+        margin: '0 auto',
+        padding: 'var(--space-8, 2rem) var(--space-4, 1rem)',
+        color: 'var(--fg, #111)',
+      }}
+    >
+      <header style=\{{ marginBottom: '1.5rem' }}>
+        <h1 style=\{{ fontSize: '1.875rem', fontWeight: 700, margin: 0 }}>Files</h1>
+        <p style=\{{ color: 'var(--fg-muted, #666)', marginTop: '0.25rem' }}>
+          Upload and manage files in your {{businessName}} account.
+        </p>
+      </header>
+
+      {/* Upload dropzone */}
+      <StorageDropzone
+        accept="image/*,application/pdf,text/*"
+        onUpload={() => load()}
+        onError={(err) => setError(err.message)}
+        uploadOptions=\{{ isPublic: false }}
+        style=\{{ marginBottom: '1.5rem' }}
+      />
+
+      {error && (
+        <div
+          style=\{{
+            padding: '0.75rem 1rem',
+            background: '#fef2f2',
+            border: '1px solid #fecaca',
+            borderRadius: '6px',
+            color: '#dc2626',
+            marginBottom: '1rem',
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {loading && files.length === 0 ? (
+        <p style=\{{ color: 'var(--fg-muted, #666)' }}>Loading files...</p>
+      ) : files.length === 0 ? (
+        <p style=\{{ color: 'var(--fg-muted, #666)', textAlign: 'center', padding: '2rem 0' }}>
+          No files uploaded yet. Drop a file above to get started.
+        </p>
+      ) : (
+        <div style=\{{ display: 'flex', flexDirection: 'column', gap: '0.625rem' }}>
+          {files.map((file) => (
+            <div
+              key={file.objectId}
+              style=\{{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.75rem',
+                padding: '0.875rem 1rem',
+                border: '1px solid var(--border, #e5e7eb)',
+                borderRadius: '8px',
+              }}
+            >
+              {/* File icon */}
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#9ca3af"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                style=\{{ flexShrink: 0 }}
+                aria-hidden
+              >
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                <polyline points="14 2 14 8 20 8" />
+              </svg>
+
+              {/* File info */}
+              <div style=\{{ flex: 1, minWidth: 0 }}>
+                <p
+                  style=\{{
+                    margin: 0,
+                    fontWeight: 500,
+                    fontSize: '0.9rem',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {file.objectKey}
+                </p>
+                <p style=\{{ margin: '0.125rem 0 0', fontSize: '0.78rem', color: 'var(--fg-muted, #666)' }}>
+                  {formatBytes(file.size)} · {file.contentType} ·{' '}
+                  {new Date(file.uploadedAt).toLocaleDateString()}
+                  {file.isPublic && (
+                    <span
+                      style=\{{
+                        marginLeft: '0.5rem',
+                        padding: '0.1rem 0.4rem',
+                        background: '#dcfce7',
+                        color: '#16a34a',
+                        borderRadius: '4px',
+                        fontSize: '0.7rem',
+                        fontWeight: 600,
+                      }}
+                    >
+                      Public
+                    </span>
+                  )}
+                </p>
+              </div>
+
+              {/* Actions */}
+              <div style=\{{ display: 'flex', gap: '0.5rem', flexShrink: 0 }}>
+                <button
+                  onClick={() => handleDownload(file.objectId)}
+                  style=\{{
+                    padding: '0.35rem 0.75rem',
+                    fontSize: '0.825rem',
+                    border: '1px solid var(--border, #e5e7eb)',
+                    borderRadius: '6px',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                  }}
+                  aria-label={`Download ${file.objectKey}`}
+                >
+                  Download
+                </button>
+                <button
+                  onClick={() => handleDelete(file.objectId)}
+                  disabled={deletingId === file.objectId}
+                  style=\{{
+                    padding: '0.35rem 0.75rem',
+                    fontSize: '0.825rem',
+                    border: '1px solid #fecaca',
+                    borderRadius: '6px',
+                    background: 'transparent',
+                    color: '#dc2626',
+                    cursor: deletingId === file.objectId ? 'not-allowed' : 'pointer',
+                  }}
+                  aria-label={`Delete ${file.objectKey}`}
+                >
+                  {deletingId === file.objectId ? '...' : 'Delete'}
+                </button>
+              </div>
+            </div>
+          ))}
+
+          {nextCursor && (
+            <button
+              onClick={() => load(nextCursor)}
+              disabled={loading}
+              style=\{{
+                padding: '0.6rem 1.25rem',
+                marginTop: '0.5rem',
+                border: '1px solid var(--border, #e5e7eb)',
+                borderRadius: '6px',
+                background: 'transparent',
+                cursor: loading ? 'not-allowed' : 'pointer',
+                fontSize: '0.875rem',
+              }}
+            >
+              {loading ? 'Loading...' : 'Load more'}
+            </button>
+          )}
+        </div>
+      )}
+    </main>
+  );
+}

package/templates/nextjs/app/account/security/page.tsx.hbs

@@ -26,7 +26,53 @@ export default function SecurityPage() {
           Manage two-factor authentication for your {{businessName}} account.
         </p>
       </header>
+
       <MfaManager />
+
+      <nav style=\{{ marginTop: '2.5rem', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+        <a
+          href="/account/sessions"
+          style=\{{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0.875rem 1.25rem',
+            border: '1px solid var(--border, #e5e7eb)',
+            borderRadius: '8px',
+            textDecoration: 'none',
+            color: 'var(--fg, #111)',
+          }}
+        >
+          <div>
+            <div style=\{{ fontWeight: 600, fontSize: '0.9rem' }}>Active sessions</div>
+            <div style=\{{ fontSize: '0.8rem', color: 'var(--fg-muted, #666)', marginTop: '0.125rem' }}>
+              See and revoke devices signed in to your account
+            </div>
+          </div>
+          <span style=\{{ color: 'var(--fg-muted, #666)' }}>›</span>
+        </a>
+        <a
+          href="/account/activity"
+          style=\{{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0.875rem 1.25rem',
+            border: '1px solid var(--border, #e5e7eb)',
+            borderRadius: '8px',
+            textDecoration: 'none',
+            color: 'var(--fg, #111)',
+          }}
+        >
+          <div>
+            <div style=\{{ fontWeight: 600, fontSize: '0.9rem' }}>Sign-in activity</div>
+            <div style=\{{ fontSize: '0.8rem', color: 'var(--fg-muted, #666)', marginTop: '0.125rem' }}>
+              Review your account&apos;s sign-in history
+            </div>
+          </div>
+          <span style=\{{ color: 'var(--fg-muted, #666)' }}>›</span>
+        </a>
+      </nav>
     </main>
   );
 }