@pylonsync/create-pylon 0.3.273 → 0.3.275

package/templates/agency/app/auth-form.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  passwordLogin,
+  passwordRegister,
+  persistSession,
+  ApiError,
+} from "@pylonsync/client";
+
+// The owner's 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 + `callFn` authenticate AS THE
+// OWNER on the next load. This step matters here specifically: the landing page
+// mints an anonymous guest session (for the live slot counter), and without
+// persisting the real session that stale guest token would shadow the owner's
+// — so the owner-only `inquiriesForOwner` call would come back as a guest and
+// get rejected. We then do a full navigation to /dashboard so the SSR runtime
+// re-resolves auth from the HttpOnly cookie and renders server-side.
+//
+// A studio is single-tenant: there's no public sign-up, just the owner creating
+// their one account. Whoever signs in only sees data if their email matches
+// PYLON_OWNER_EMAIL — enforced by the inquiriesForOwner function.
+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("/dashboard");
+    } 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 the owner 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/agency/app/contact-form.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { db, callFn } from "@pylonsync/react";
+import { EnsureGuest } from "@pylonsync/client";
+import { siteConfig } from "@/lib/site.config";
+
+// The realtime pieces of the page, both driven by the public, PII-free Capacity
+// row via `db.useQuery("Capacity")` — so when the owner books a project from the
+// dashboard, the "N slots open" number drops live in every open tab. No refresh.
+//
+//   • <LiveSlots>   — the hero pill ("3 project slots open · Q3 2026").
+//   • <ContactForm> — the "start a project" form. submitInquiry is a public
+//                     mutation, so it works for anonymous visitors; the Inquiry
+//                     it writes is pure PII and can never be read back by a
+//                     client. The form only ever reads the slot count.
+//
+// Both are wrapped in <EnsureGuest>, which mints an anonymous guest session so
+// the sync connection (which powers the live count) is established. That session
+// holds no PII and can't read the Inquiry table.
+
+interface CapacityRow {
+  id: string;
+  label: string;
+  openSlots: number;
+  updatedAt: string;
+}
+
+function useSeedCapacity() {
+  // Create the Capacity row from config on first visit (idempotent server-side).
+  useEffect(() => {
+    void callFn("seedCapacity", {});
+  }, []);
+}
+
+/* ------------------------------ hero pill ------------------------------ */
+
+export function LiveSlots() {
+  return (
+    <EnsureGuest fallback={<SlotsPill loading />}>
+      <LiveSlotsInner />
+    </EnsureGuest>
+  );
+}
+
+function LiveSlotsInner() {
+  useSeedCapacity();
+  const { data, loading } = db.useQuery<CapacityRow>("Capacity");
+  const row = data[0];
+  return <SlotsPill openSlots={row?.openSlots} label={row?.label} live={!loading} />;
+}
+
+function SlotsPill({
+  openSlots,
+  label,
+  live,
+  loading,
+}: {
+  openSlots?: number;
+  label?: string;
+  live?: boolean;
+  loading?: boolean;
+}) {
+  const open = openSlots ?? siteConfig.capacity.openSlots;
+  const period = label || siteConfig.capacity.label;
+  const bookedOut = open <= 0;
+  return (
+    <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-3.5 py-1.5 text-[13px] font-medium text-zinc-700 shadow-sm">
+      {loading ? (
+        <span className="inline-flex size-2 rounded-full bg-zinc-300" />
+      ) : (
+        <span className="relative flex size-2">
+          {live && !bookedOut ? (
+            <span className="absolute inline-flex size-2 animate-ping rounded-full bg-green-500/60" />
+          ) : null}
+          <span
+            className={"relative inline-flex size-2 rounded-full " + (bookedOut ? "bg-zinc-400" : "bg-green-600")}
+          />
+        </span>
+      )}
+      {bookedOut ? (
+        <span>Booked through {period}</span>
+      ) : (
+        <span>
+          <span className="tabular-nums text-zinc-900">{open}</span>{" "}
+          {open === 1 ? "project slot" : "project slots"} open · {period}
+        </span>
+      )}
+    </span>
+  );
+}
+
+/* ----------------------------- contact form ---------------------------- */
+
+export function ContactForm() {
+  return (
+    <EnsureGuest fallback={<FormShell disabled />}>
+      <ContactFormInner />
+    </EnsureGuest>
+  );
+}
+
+function ContactFormInner() {
+  useSeedCapacity();
+  const { data } = db.useQuery<CapacityRow>("Capacity");
+  const row = data[0];
+  const bookedOut = (row?.openSlots ?? siteConfig.capacity.openSlots) <= 0;
+  return <FormShell bookedOut={bookedOut} period={row?.label} />;
+}
+
+function FormShell({
+  disabled,
+  bookedOut,
+  period,
+}: {
+  disabled?: boolean;
+  bookedOut?: boolean;
+  period?: string;
+}) {
+  const { contact } = siteConfig;
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    company: "",
+    projectType: "",
+    budget: "",
+    message: "",
+  });
+  const [status, setStatus] = useState<"idle" | "sending" | "done">("idle");
+  const [error, setError] = useState<string | null>(null);
+
+  const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) =>
+    setForm((f) => ({ ...f, [k]: e.target.value }));
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (status === "sending") return;
+    if (!form.name.trim() || !form.email.trim()) {
+      setError("Your name and email are required.");
+      return;
+    }
+    setStatus("sending");
+    setError(null);
+    try {
+      await callFn<{ ok: boolean }>("submitInquiry", {
+        name: form.name.trim(),
+        email: form.email.trim(),
+        company: form.company.trim() || undefined,
+        projectType: form.projectType || undefined,
+        budget: form.budget || undefined,
+        message: form.message.trim() || undefined,
+      });
+      setStatus("done");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setError(
+        /valid email|INVALID_ARGS/i.test(msg)
+          ? "Please enter a valid email address."
+          : "Something went wrong — try again in a moment.",
+      );
+      setStatus("idle");
+    }
+  }
+
+  if (status === "done") {
+    return (
+      <div className="rounded-2xl border border-brand/30 bg-brand-soft/50 px-6 py-8 text-center">
+        <div className="mx-auto flex size-10 items-center justify-center rounded-full bg-brand text-white">
+          <CheckIcon />
+        </div>
+        <p className="mt-3 text-[15px] font-semibold text-zinc-900">{contact.confirmationMessage}</p>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-7">
+      {bookedOut ? (
+        <p className="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-[13px] text-amber-700">
+          We&apos;re fully booked{period ? ` through ${period}` : ""} — send a note anyway and we&apos;ll reach out when a slot opens.
+        </p>
+      ) : null}
+      <div className="grid gap-3 sm:grid-cols-2">
+        <Field label="Name" required>
+          <input value={form.name} onChange={set("name")} autoComplete="name" aria-label="Name" className={inputCls} disabled={disabled} />
+        </Field>
+        <Field label="Email" required>
+          <input type="email" value={form.email} onChange={set("email")} autoComplete="email" aria-label="Email" className={inputCls} disabled={disabled} />
+        </Field>
+        <Field label="Company">
+          <input value={form.company} onChange={set("company")} autoComplete="organization" aria-label="Company" className={inputCls} disabled={disabled} />
+        </Field>
+        <Field label="Project type">
+          <select value={form.projectType} onChange={set("projectType")} aria-label="Project type" className={inputCls} disabled={disabled}>
+            <option value="">Select…</option>
+            {contact.projectTypes.map((t) => (
+              <option key={t} value={t}>{t}</option>
+            ))}
+          </select>
+        </Field>
+      </div>
+      <div className="mt-3">
+        <Field label="Budget">
+          <select value={form.budget} onChange={set("budget")} aria-label="Budget" className={inputCls} disabled={disabled}>
+            <option value="">Select…</option>
+            {contact.budgets.map((b) => (
+              <option key={b} value={b}>{b}</option>
+            ))}
+          </select>
+        </Field>
+      </div>
+      <div className="mt-3">
+        <Field label="What are you building?">
+          <textarea
+            value={form.message}
+            onChange={set("message")}
+            rows={4}
+            aria-label="Message"
+            placeholder="A sentence or two about the project, timeline, and what success looks like."
+            className={inputCls + " resize-none py-2.5"}
+            disabled={disabled}
+          />
+        </Field>
+      </div>
+      {error ? <p className="mt-3 text-[13px] text-red-600">{error}</p> : null}
+      <button
+        type="submit"
+        disabled={status === "sending" || disabled}
+        className="mt-5 inline-flex h-11 w-full items-center justify-center rounded-full bg-brand text-[15px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60 sm:w-auto sm:px-7"
+      >
+        {status === "sending" ? "Sending…" : "Send inquiry"}
+      </button>
+    </form>
+  );
+}
+
+function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
+  return (
+    <label className="block">
+      <span className="mb-1.5 block text-[12.5px] font-medium text-zinc-600">
+        {label}
+        {required ? <span className="text-brand"> *</span> : null}
+      </span>
+      {children}
+    </label>
+  );
+}
+
+const inputCls =
+  "h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-[14px] text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20 disabled:opacity-60";
+
+function CheckIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}

package/templates/agency/app/dashboard/dashboard-client.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { db, callFn } from "@pylonsync/react";
+import { useAuth } from "@pylonsync/client";
+import type { InquiryRow, OwnerInquiriesResult } from "@/lib/agency";
+
+interface CapacityRow {
+  id: string;
+  label: string;
+  openSlots: number;
+  updatedAt: string;
+}
+
+// The owner's live pipeline. Liveness rides the SAME public Capacity row the
+// landing page uses: `db.useQuery("Capacity")` re-renders the instant slots
+// change (cross-tab, via the replica). The leads themselves never sync — they
+// come from the owner-gated `inquiriesForOwner`, (re)fetched on mount and
+// whenever capacity changes (which is exactly when a lead is booked/released).
+// So the pipeline stays live, but PII only ever travels through the gated call.
+export function AgencyDashboard({ userEmail }: { userEmail: string }) {
+  const { data: caps } = db.useQuery<CapacityRow>("Capacity");
+  const cap = caps[0];
+  const liveKey = `${cap?.openSlots ?? "?"}:${cap?.label ?? ""}`;
+
+  const [inquiries, setInquiries] = useState<InquiryRow[] | null>(null);
+  const [denied, setDenied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  async function load() {
+    try {
+      const r = await callFn<OwnerInquiriesResult>("inquiriesForOwner", {});
+      if (!r.authorized) setDenied(true);
+      else {
+        setInquiries(r.inquiries);
+        setDenied(false);
+        setError(null);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }
+
+  useEffect(() => {
+    void load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [liveKey]);
+
+  async function act(id: string, fn: "bookInquiry" | "declineInquiry") {
+    setBusyId(id);
+    try {
+      await callFn(fn, { inquiryId: id });
+      await load();
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  if (denied) return <OwnerOnly email={userEmail} />;
+  if (error) {
+    return <div className="rounded-xl border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-700">{error}</div>;
+  }
+  if (!inquiries) return <Skeleton />;
+
+  const newCount = inquiries.filter((i) => i.status === "new").length;
+  const bookedCount = inquiries.filter((i) => i.status === "booked").length;
+  const active = inquiries.filter((i) => i.status !== "declined");
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight">Pipeline</h1>
+        <p className="mt-1 text-sm text-zinc-500">
+          Live — leads land here the moment they&apos;re sent. Booking one drops the open-slot count
+          on your site instantly.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Stat label="Open slots" value={String(cap?.openSlots ?? 0)} hint={cap?.label} />
+        <Stat label="New leads" value={String(newCount)} />
+        <Stat label="Booked" value={String(bookedCount)} />
+      </div>
+
+      <CapacityCard cap={cap} />
+
+      {/* Inquiries */}
+      <div className="rounded-xl border border-zinc-200 bg-white">
+        <div className="border-b border-zinc-100 px-4 py-3 text-sm font-semibold text-zinc-900">
+          Inquiries <span className="font-normal text-zinc-400">({active.length})</span>
+        </div>
+        {inquiries.length === 0 ? (
+          <p className="p-8 text-center text-sm text-zinc-500">No inquiries yet — share your site.</p>
+        ) : (
+          <ul className="divide-y divide-zinc-100">
+            {inquiries.map((i) => (
+              <li key={i.id} className="px-4 py-3.5">
+                <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
+                  <div className="min-w-0 flex-1">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="text-[14px] font-medium text-zinc-900">{i.name}</span>
+                      <StatusBadge status={i.status} />
+                    </div>
+                    <div className="mt-0.5 truncate text-[12.5px] text-zinc-500">
+                      {i.email}
+                      {i.company ? ` · ${i.company}` : ""}
+                      {i.projectType ? ` · ${i.projectType}` : ""}
+                      {i.budget ? ` · ${i.budget}` : ""}
+                    </div>
+                    {i.message ? (
+                      <p className="mt-1.5 line-clamp-2 text-[13px] leading-relaxed text-zinc-600">{i.message}</p>
+                    ) : null}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {i.status !== "booked" ? (
+                      <button
+                        type="button"
+                        disabled={busyId === i.id}
+                        onClick={() => act(i.id, "bookInquiry")}
+                        className="rounded-md bg-brand px-3 py-1.5 text-[12.5px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+                      >
+                        {busyId === i.id ? "…" : "Book"}
+                      </button>
+                    ) : null}
+                    {i.status !== "declined" ? (
+                      <button
+                        type="button"
+                        disabled={busyId === i.id}
+                        onClick={() => act(i.id, "declineInquiry")}
+                        className="rounded-md border border-zinc-300 px-3 py-1.5 text-[12.5px] font-medium text-zinc-600 transition-colors hover:border-red-300 hover:text-red-600 disabled:opacity-50"
+                      >
+                        {i.status === "booked" ? "Release" : "Decline"}
+                      </button>
+                    ) : null}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Editable capacity — the number the public hero shows live. Saving calls
+// setCapacity; the change syncs straight to every open landing page.
+function CapacityCard({ cap }: { cap?: CapacityRow }) {
+  const [label, setLabel] = useState(cap?.label ?? "");
+  const [slots, setSlots] = useState(String(cap?.openSlots ?? 0));
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  // Keep inputs in sync if the live row changes underneath us (e.g. a booking).
+  useEffect(() => {
+    setLabel(cap?.label ?? "");
+    setSlots(String(cap?.openSlots ?? 0));
+  }, [cap?.label, cap?.openSlots]);
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    setSaved(false);
+    try {
+      await callFn("setCapacity", { label: label.trim(), openSlots: Math.max(0, parseInt(slots, 10) || 0) });
+      setSaved(true);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <form onSubmit={save} className="rounded-xl border border-zinc-200 bg-white p-4">
+      <div className="text-sm font-semibold text-zinc-900">Availability</div>
+      <p className="mt-1 text-[13px] text-zinc-500">Shown live on your site as “N project slots open”.</p>
+      <div className="mt-4 flex flex-wrap items-end gap-3">
+        <label className="block">
+          <span className="mb-1 block text-[12px] font-medium text-zinc-600">Booking window</span>
+          <input
+            value={label}
+            onChange={(e) => { setLabel(e.target.value); setSaved(false); }}
+            placeholder="Q3 2026"
+            className="h-9 w-40 rounded-lg border border-zinc-300 px-3 text-[14px] outline-none focus:border-brand focus:ring-2 focus:ring-brand/20"
+          />
+        </label>
+        <label className="block">
+          <span className="mb-1 block text-[12px] font-medium text-zinc-600">Open slots</span>
+          <input
+            type="number"
+            min={0}
+            value={slots}
+            onChange={(e) => { setSlots(e.target.value); setSaved(false); }}
+            className="h-9 w-24 rounded-lg border border-zinc-300 px-3 text-[14px] tabular-nums outline-none focus:border-brand focus:ring-2 focus:ring-brand/20"
+          />
+        </label>
+        <button
+          type="submit"
+          disabled={saving}
+          className="h-9 rounded-lg bg-zinc-900 px-4 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-50"
+        >
+          {saving ? "Saving…" : saved ? "Saved ✓" : "Save"}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function Stat({ label, value, hint }: { label: string; value: string; hint?: string }) {
+  return (
+    <div className="rounded-xl border border-zinc-200 bg-white p-4">
+      <div className="text-[11px] font-medium uppercase tracking-wide text-zinc-400">{label}</div>
+      <div className="mt-1 text-2xl font-semibold tabular-nums text-zinc-900">{value}</div>
+      {hint ? <div className="mt-0.5 text-[12px] text-zinc-400">{hint}</div> : null}
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const tone =
+    status === "booked"
+      ? "bg-green-50 text-green-700"
+      : status === "declined"
+        ? "bg-zinc-100 text-zinc-400"
+        : "bg-amber-50 text-amber-700"; // new
+  const label = status === "new" ? "new lead" : status;
+  return <span className={"rounded-full px-2 py-0.5 text-[10px] font-medium capitalize " + tone}>{label}</span>;
+}
+
+function OwnerOnly({ email }: { email: string }) {
+  return (
+    <div className="rounded-xl border border-dashed border-zinc-300 px-6 py-12 text-center">
+      <h1 className="text-lg font-semibold">This dashboard is owner-only</h1>
+      <p className="mx-auto mt-2 max-w-md text-sm text-zinc-500">
+        You&apos;re signed in as <span className="font-medium text-zinc-700">{email || "this account"}</span>.
+        Only the studio owner can see inquiries. Set{" "}
+        <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">PYLON_OWNER_EMAIL={email || "you@studio.com"}</code>{" "}
+        in your <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">.env</code>, restart, and reload —
+        or sign in with the owner account.
+      </p>
+    </div>
+  );
+}
+
+export function UserMenu({ email }: { email: string }) {
+  const { signOut } = useAuth();
+  const initial = (email.trim()[0] || "?").toUpperCase();
+  async function onSignOut() {
+    await signOut();
+    window.location.assign("/");
+  }
+  return (
+    <details className="group relative">
+      <summary className="flex size-8 cursor-pointer select-none list-none items-center justify-center rounded-full bg-zinc-900 text-[12px] font-semibold text-white marker:hidden [&::-webkit-details-marker]:hidden">
+        {initial}
+      </summary>
+      <div className="absolute right-0 top-full z-40 mt-2 w-56 overflow-hidden rounded-xl border border-zinc-200 bg-white py-1 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.25)]">
+        <div className="border-b border-zinc-100 px-3 py-2">
+          <div className="truncate text-[13px] font-medium text-zinc-900">{email || "Signed in"}</div>
+        </div>
+        <button
+          type="button"
+          onClick={onSignOut}
+          className="flex w-full items-center px-3 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
+        >
+          Sign out
+        </button>
+      </div>
+    </details>
+  );
+}
+
+function Skeleton() {
+  return (
+    <div className="space-y-8">
+      <div className="h-6 w-28 animate-pulse rounded bg-zinc-100" />
+      <div className="grid gap-4 sm:grid-cols-3">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="h-20 animate-pulse rounded-xl bg-zinc-100" />
+        ))}
+      </div>
+      <div className="h-28 animate-pulse rounded-xl bg-zinc-100" />
+      <div className="h-48 animate-pulse rounded-xl bg-zinc-100" />
+    </div>
+  );
+}