@pylonsync/create-pylon 0.3.273 → 0.3.275

package/templates/ai-studio/app/auth-form.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  passwordLogin,
+  passwordRegister,
+  persistSession,
+  ApiError,
+} from "@pylonsync/client";
+
+// The email/password form — one form, two modes. It calls the built-in auth API
+// directly (`passwordLogin` / `passwordRegister` POST to `/api/auth/password/*`),
+// then `persistSession` writes the freshly-minted token to local storage so the
+// sync engine authenticates as the real account on the next load. We then do a
+// full navigation to "/" so the SSR runtime re-resolves auth from the HttpOnly
+// cookie and renders the studio.
+//
+// Sign-in is REQUIRED to use the studio: generations are owner-scoped to your
+// account, so the home page redirects unauthenticated visitors here.
+export function AuthForm() {
+  const [mode, setMode] = useState<"login" | "register">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      const session =
+        mode === "login"
+          ? await passwordLogin({ email, password })
+          : await passwordRegister({ email, password });
+      // Make this session authoritative, replacing any anonymous guest token.
+      persistSession(session);
+      window.location.assign("/");
+    } catch (err) {
+      setError(messageFor(err));
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <form onSubmit={onSubmit} className="space-y-4">
+        <label className="block">
+          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Email</span>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            autoComplete="email"
+            placeholder="you@yourbusiness.com"
+            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+          />
+        </label>
+        <label className="block">
+          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Password</span>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
+            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+          />
+        </label>
+        {error ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
+            {error}
+          </p>
+        ) : null}
+        <button
+          type="submit"
+          disabled={pending}
+          className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
+        >
+          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+        </button>
+      </form>
+
+      <p className="text-center text-[13px] text-zinc-500">
+        {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "register" : "login");
+            setError(null);
+          }}
+          className="font-medium text-zinc-900 underline underline-offset-2"
+        >
+          {mode === "login" ? "Create an account" : "Sign in"}
+        </button>
+      </p>
+    </div>
+  );
+}
+
+// Map the framework's auth error codes to friendly copy. `ApiError` carries a
+// stable `.code` so you branch on the code, not the message.
+function messageFor(err: unknown): string {
+  if (err instanceof ApiError) {
+    switch (err.code) {
+      case "INVALID_CREDENTIALS":
+        return "Wrong email or password.";
+      case "USER_EXISTS":
+        return "That email is already registered — sign in instead.";
+      case "WEAK_PASSWORD":
+        return "Pick a longer password — at least 10 characters.";
+      case "PWNED_PASSWORD":
+        return "That password has appeared in a known data breach. Choose a different one.";
+      case "RATE_LIMITED":
+        return "Too many attempts — try again in a minute.";
+      default:
+        return err.message;
+    }
+  }
+  if (err instanceof Error) return err.message;
+  return "Something went wrong. Try again.";
+}

package/templates/ai-studio/app/error.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { type ErrorBoundaryProps } from "@pylonsync/react";
+
+// `app/error.tsx` → the error boundary for this segment. Hydrated + interactive:
+// `reset()` re-attempts the route. The thrown error reaches the client as
+// `{ message, digest }` only — the stack stays in the dev overlay / server logs.
+export default function Error({ error, reset }: ErrorBoundaryProps) {
+  return (
+    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
+      <h1 className="text-2xl font-semibold tracking-tight">Something went wrong</h1>
+      <p className="mt-2 text-zinc-500">{error.message}</p>
+      {error.digest ? (
+        <p className="mt-1 text-xs text-zinc-400">
+          Reference: <code>{error.digest}</code>
+        </p>
+      ) : null}
+      <button
+        type="button"
+        onClick={reset}
+        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/templates/ai-studio/app/globals.css

@@ -0,0 +1,148 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Tailwind v4 scans these globs for class names. Add more @source lines if you
+   put markup elsewhere. The @pylonsync/client line lets its components
+   (EnsureGuest, auth helpers) keep any classes they ship. */
+@source "../app/**/*.{tsx,ts,jsx,js}";
+@source "../components/**/*.{tsx,ts,jsx,js}";
+@source "../lib/**/*.{tsx,ts,jsx,js}";
+@source "../node_modules/@pylonsync/client/**/*.{tsx,ts,jsx,js}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* shadcn/ui design tokens (new-york / zinc) + the marketing brand accent. The
+   three brand vars are defaults — app/layout.tsx overrides them from
+   lib/site.config.ts on <html>, so re-theming the whole page is one edit there. */
+:root {
+  --radius: 0.625rem;
+  --brand: #4f46e5;
+  --brand-soft: #eef2ff;
+  --paper: #fafafa;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-brand: var(--brand);
+  --color-brand-soft: var(--brand-soft);
+  --color-paper: var(--paper);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+    outline-color: var(--color-ring);
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  button {
+    cursor: pointer;
+  }
+}

package/templates/ai-studio/app/layout.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { Link, type PageAuth } from "@pylonsync/react";
+import { siteConfig } from "@/lib/site.config";
+
+// App shell: a slim top bar over a full-height chat. `auth.user_id` is resolved
+// server-side from the session cookie before any HTML is sent, so the bar shows
+// the account / "Sign in" with no flash. The chat page fills the rest of the
+// viewport (h-[calc(100vh-3.5rem)] in chat-client.tsx — keep the header at h-14).
+interface LayoutProps {
+  children: React.ReactNode;
+  url: string;
+  auth: PageAuth;
+}
+
+export default function RootLayout({ children, url, auth }: LayoutProps) {
+  // Resolved server-side from the session cookie. The app requires sign-in, so
+  // this is set on every in-app page; the header reflects it with no flash.
+  const signedIn = Boolean(auth?.user_id);
+  const { brand, colors } = siteConfig;
+
+  // The auth screen brings its own chrome → render it bare.
+  const path = (url ?? "").split("?")[0];
+  const isBare = path === "/login" || path.startsWith("/login/");
+
+  return (
+    <html
+      lang="en"
+      style={
+        {
+          "--brand": colors.brand,
+          "--brand-soft": colors.brandSoft,
+          "--paper": colors.paper,
+        } as React.CSSProperties
+      }
+    >
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+        />
+      </head>
+      <body className="bg-background text-foreground antialiased">
+        {isBare ? (
+          children
+        ) : (
+          <>
+            <header className="flex h-14 items-center justify-between border-b border-zinc-200 bg-white px-4">
+              <Link href="/" className="flex items-center gap-2">
+                <span className="flex size-6 items-center justify-center rounded-[7px] bg-brand text-[13px] font-bold text-white">
+                  {brand.letter}
+                </span>
+                <span className="text-[15px] font-semibold tracking-tight text-zinc-900">{brand.name}</span>
+              </Link>
+              {signedIn ? (
+                <span className="text-[13px] text-zinc-400">Signed in</span>
+              ) : (
+                <Link
+                  href="/login"
+                  className="rounded-full border border-zinc-300 px-3.5 py-1.5 text-[13px] font-medium text-zinc-700 transition-colors hover:bg-zinc-50"
+                >
+                  Sign in
+                </Link>
+              )}
+            </header>
+            {children}
+          </>
+        )}
+      </body>
+    </html>
+  );
+}

package/templates/ai-studio/app/login/page.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { AuthForm } from "../auth-form";
+import { siteConfig } from "@/lib/site.config";
+
+export const metadata: Metadata = {
+  title: `Sign in — ${siteConfig.brand.name}`,
+  robots: "noindex",
+};
+
+// `app/login/page.tsx` → `/login`. Sign-in is required to use the studio
+// (generations are tied to your account). Rendered bare. Already signed in? Skip
+// back to the studio — `response.redirect` in the synchronous shell render is a
+// real 307 before any HTML is sent.
+export default function LoginPage({ auth, response }: PageProps) {
+  // Already signed in (a real account, not an anonymous guest)? Skip the form.
+  if (auth.user_id && !auth.user_id.startsWith("guest_")) response.redirect("/");
+  const { brand } = siteConfig;
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-white px-6 py-12">
+      <div className="w-full max-w-[400px] rounded-2xl border border-zinc-200/70 p-8">
+        <Link href="/" className="inline-flex">
+          <span className="flex size-9 items-center justify-center rounded-xl bg-zinc-900 text-base font-bold text-white">
+            {brand.letter}
+          </span>
+        </Link>
+        <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
+          Sign in to {brand.name}
+        </h1>
+        <p className="mt-1 text-[13px] text-zinc-500">
+          Create an account or sign in to start generating.
+        </p>
+        <div className="mt-6">
+          <AuthForm />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/ai-studio/app/not-found.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link, type NotFoundProps } from "@pylonsync/react";
+
+// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when a
+// page calls `response.notFound()`). Hydrated, so the link is a client nav.
+export default function NotFound(_props: NotFoundProps) {
+  return (
+    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
+      <h1 className="text-3xl font-semibold tracking-tight">404</h1>
+      <p className="mt-2 text-zinc-500">We couldn&apos;t find that page.</p>
+      <Link
+        href="/"
+        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+      >
+        Back home
+      </Link>
+    </div>
+  );
+}

package/templates/ai-studio/app/page.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { Studio } from "./studio-client";
+import { siteConfig } from "@/lib/site.config";
+
+export const metadata: Metadata = {
+  title: siteConfig.seo.title,
+  description: siteConfig.seo.description,
+  openGraph: { title: siteConfig.seo.title, description: siteConfig.seo.description, type: "website" },
+};
+
+// `app/page.tsx` → `/`. A small header over the studio island: a prompt bar +
+// kind selector + a live gallery that fills in as generations finish. Sign-in is
+// REQUIRED — generations are tied to your account — so an unauthenticated
+// visitor is redirected to /login (a real 307 from the synchronous shell render).
+export default function Home({ auth, response }: PageProps) {
+  // Real account required — reject anonymous + guest (guest_…) sessions.
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const { studio } = siteConfig;
+  return (
+    <div className="min-h-[calc(100vh-3.5rem)] bg-white">
+      <div className="mx-auto max-w-5xl px-4 pt-8 text-center sm:pt-12">
+        <h1 className="text-balance text-3xl font-semibold tracking-[-0.02em] text-zinc-900 sm:text-4xl">
+          {studio.headline}
+        </h1>
+        <p className="mx-auto mt-3 max-w-xl text-[15px] leading-relaxed text-zinc-500">{studio.subcopy}</p>
+      </div>
+      <Studio />
+    </div>
+  );
+}

package/templates/ai-studio/app/studio-client.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import React, { useState } from "react";
+import { db, callFn } from "@pylonsync/react";
+import { siteConfig } from "@/lib/site.config";
+import type { GenerationKind, GenerationRow } from "@/lib/studio";
+
+// The studio — a client island, rendered only for a SIGNED-IN user (the page
+// redirects anyone else to /login). `Generation` is an owner-scoped entity read
+// with `db.useQuery`, so your gallery is private to your account and updates
+// live: the generate mutation inserts a "pending" row (it appears instantly), a
+// background job runs the provider call, then flips the row to the finished
+// result — and that change syncs to every open tab. The API token stays on the
+// server.
+
+export function Studio() {
+  return <StudioInner />;
+}
+
+function StudioInner() {
+  const { studio } = siteConfig;
+  const { data: generations } = db.useQuery<GenerationRow>("Generation", {
+    orderBy: { createdAt: "desc" },
+  });
+  const [prompt, setPrompt] = useState("");
+  const [kind, setKind] = useState<GenerationKind>("image");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function generate() {
+    const p = prompt.trim();
+    if (!p || busy) return;
+    setBusy(true);
+    setError(null);
+    setPrompt("");
+    // Fire the action: the pending card shows up live via useQuery while it runs;
+    // we only await to surface input errors + re-enable the button.
+    try {
+      await callFn("generate", { kind, prompt: p });
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Couldn't start the generation.";
+      setError(/INVALID_ARGS/.test(msg) ? "Enter a prompt (up to 1000 characters)." : msg);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-5xl px-4 py-8">
+      {/* Prompt bar */}
+      <div className="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm">
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+              e.preventDefault();
+              generate();
+            }
+          }}
+          rows={2}
+          placeholder={studio.inputPlaceholder}
+          aria-label="Prompt"
+          className="w-full resize-none bg-transparent text-[15px] text-zinc-900 outline-none placeholder:text-zinc-400"
+        />
+        <div className="mt-2 flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-1 rounded-full bg-zinc-100 p-1">
+            {studio.kinds.map((k) => (
+              <button
+                key={k.id}
+                type="button"
+                onClick={() => setKind(k.id)}
+                className={
+                  "rounded-full px-3 py-1.5 text-[13px] font-medium transition-colors " +
+                  (kind === k.id ? "bg-white text-zinc-900 shadow-sm" : "text-zinc-500 hover:text-zinc-800")
+                }
+              >
+                {k.label}
+                {!k.wired ? <span className="ml-1 text-[10px] text-zinc-400">stub</span> : null}
+              </button>
+            ))}
+          </div>
+          <button
+            type="button"
+            onClick={generate}
+            disabled={busy || !prompt.trim()}
+            className="inline-flex h-9 items-center gap-1.5 rounded-full bg-brand px-5 text-[13.5px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-40"
+          >
+            {busy ? "Generating…" : "Generate"}
+          </button>
+        </div>
+      </div>
+
+      {error ? <p className="mt-3 text-[13px] text-red-600">{error}</p> : null}
+
+      {/* Examples (only before anything's been made) */}
+      {generations.length === 0 ? (
+        <div className="mt-5 flex flex-wrap gap-2">
+          {studio.examples.map((ex) => (
+            <button
+              key={ex}
+              type="button"
+              onClick={() => setPrompt(ex)}
+              className="rounded-full border border-zinc-200 bg-white px-3 py-1.5 text-[12.5px] text-zinc-500 transition-colors hover:border-brand hover:text-zinc-800"
+            >
+              {ex}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {/* Gallery */}
+      <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {generations.map((g) => (
+          <GenerationCard key={g.id} g={g} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function GenerationCard({ g }: { g: GenerationRow }) {
+  return (
+    <div className="overflow-hidden rounded-2xl border border-zinc-200 bg-white">
+      <div className="relative grid aspect-square place-items-center bg-paper">
+        <Media g={g} />
+        {g.demo && g.status === "done" ? (
+          <span className="absolute left-2 top-2 rounded-full border border-dashed border-zinc-300 bg-white/80 px-2 py-0.5 text-[10px] font-medium text-zinc-500">
+            demo
+          </span>
+        ) : null}
+        <span className="absolute right-2 top-2 rounded-full bg-white/85 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-zinc-500 backdrop-blur">
+          {g.kind}
+        </span>
+      </div>
+      <div className="p-3">
+        <p className="line-clamp-2 text-[13px] leading-snug text-zinc-600">{g.prompt}</p>
+      </div>
+    </div>
+  );
+}
+
+function Media({ g }: { g: GenerationRow }) {
+  if (g.status === "pending" || g.status === "processing") {
+    return (
+      <div className="flex flex-col items-center gap-2 text-zinc-400">
+        <Spinner />
+        <span className="text-[12px]">{g.status === "processing" ? "Generating…" : "Queued…"}</span>
+      </div>
+    );
+  }
+  if (g.status === "failed") {
+    return (
+      <div className="px-5 text-center text-[12px] text-red-500">
+        {g.error || "Generation failed."}
+      </div>
+    );
+  }
+  // done
+  if (g.kind === "image" && g.resultUrl) {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={g.resultUrl} alt={g.prompt} className="size-full object-cover" />;
+  }
+  if (g.kind === "audio") {
+    return g.resultUrl ? (
+      <div className="w-full px-4">
+        <AudioWave />
+        <audio controls src={g.resultUrl} className="mt-3 w-full" />
+      </div>
+    ) : (
+      <DemoNote text="Add REPLICATE_API_TOKEN to generate real audio." />
+    );
+  }
+  if (g.kind === "video") {
+    return g.resultUrl ? (
+      <video controls src={g.resultUrl} className="size-full object-cover" />
+    ) : (
+      <DemoNote text="Add REPLICATE_API_TOKEN to generate real video." />
+    );
+  }
+  return <DemoNote text="No result." />;
+}
+
+function DemoNote({ text }: { text: string }) {
+  return (
+    <div className="flex flex-col items-center gap-2 px-5 text-center text-zinc-400">
+      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
+        <rect x="3" y="3" width="18" height="18" rx="2" />
+        <path d="M3 9h18M9 21V9" />
+      </svg>
+      <span className="text-[12px] leading-snug">{text}</span>
+    </div>
+  );
+}
+
+function AudioWave() {
+  return (
+    <div className="flex items-end justify-center gap-1">
+      {[10, 22, 14, 28, 18, 26, 12].map((h, i) => (
+        <span key={i} className="w-1.5 rounded-full bg-brand/60" style={{ height: h }} />
+      ))}
+    </div>
+  );
+}
+
+function Spinner() {
+  return (
+    <svg className="size-6 animate-spin text-brand" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="3" opacity="0.2" />
+      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+    </svg>
+  );
+}
+