@flaredev/cli 0.4.1 → 0.5.0

package/templates/next/app/dashboard/actions.ts

@@ -0,0 +1,277 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { createObjectKey, fileKeyPrefix, fileMaxBytes, matchesContentType, mimeTypesFor, type FileField } from "@flaredev/core";
+import type { FieldIssue } from "@flaredev/core/server";
+import { diffFields, recordAudit } from "@/lib/audit";
+import { listViews, MAX_VIEWS } from "@/lib/views";
+import { prisma } from "@/lib/db";
+import { toCsv } from "@/lib/csv";
+import { storage } from "@/lib/storage";
+import { can, storedFields, type PolicyAction, type Resource } from "@flaredev/core";
+import { resourcePath, dashboardSession, dashboardStore, policyFor } from "@/lib/dashboard";
+
+export type ActionResult<T = unknown> =
+  | { ok: true; data: T }
+  | { ok: false; status: number; error: string; issues?: FieldIssue[]; field?: string };
+
+const forbidden = (message = "You don't have access to this."): ActionResult<never> => ({ ok: false, status: 403, error: message });
+
+/** Session + policy check for one action on one resource. */
+async function allowed(resourceName: string, action: PolicyAction): Promise<ActionResult<never> | undefined> {
+  const { allowed: inAdmin, role } = await dashboardSession();
+  if (!inAdmin) return forbidden();
+  if (!can(policyFor(resourceName), role, action)) return forbidden(`Your role can't ${action} this record.`);
+}
+
+/**
+ * Take a deleted record's uploads out of storage.
+ *
+ * The row is gone, so nothing can point at those objects again, and an app that never
+ * removes them pays to keep files no one can reach. A failure here is swallowed on
+ * purpose: the record is already deleted, and a stray object is a smaller problem than
+ * an action that reports failure after having done the work.
+ */
+async function removeUploads(resource: Resource, record: Record<string, unknown> | null | undefined): Promise<void> {
+  if (!record) return;
+  for (const [key, def] of storedFields(resource)) {
+    if (def.kind !== "file") continue;
+    const value = record[key];
+    if (typeof value === "string" && value) await storage.delete(value).catch(() => undefined);
+  }
+}
+
+export async function deleteRecordAction(resourceName: string, id: string): Promise<ActionResult<{ id: string }>> {
+  const denied = await allowed(resourceName, "delete");
+  if (denied) return denied;
+
+  const store = dashboardStore(resourceName);
+  const existing = await store.get(id);
+  const result = await store.delete(id);
+  if (result.ok) {
+    await removeUploads(store.resource, existing.ok ? existing.data : null);
+    await recordAudit({
+      action: "delete",
+      resource: resourceName,
+      recordId: id,
+      recordLabel: existing.ok ? recordTitle(store.resource, existing.data) : null,
+    });
+    revalidatePath(resourcePath(store.resource));
+  }
+  return result;
+}
+
+/** What to call a record in the audit log: its title field, falling back to its id. */
+function recordTitle(resource: { titleField: string }, record: Record<string, unknown>): string {
+  const value = record[resource.titleField];
+  return typeof value === "string" && value ? value : String(record.id ?? "");
+}
+
+/** How many rows one export may fetch: enough for a spreadsheet, not enough to exhaust the Worker. */
+const EXPORT_LIMIT = 50_000;
+const EXPORT_PAGE = 500;
+
+export async function deleteManyAction(resourceName: string, ids: string[]): Promise<ActionResult<{ deleted: number; failed: number }>> {
+  const denied = await allowed(resourceName, "delete");
+  if (denied) return denied;
+  if (ids.length === 0) return { ok: true, data: { deleted: 0, failed: 0 } };
+  if (ids.length > 500) return { ok: false, status: 400, error: "That's more than 500 records. Delete them in smaller batches." };
+
+  const store = dashboardStore(resourceName);
+  // One at a time, through the store: deleting a record runs its policy, its hooks and
+  // its cache invalidation, and a row that refuses to go (a foreign key still pointing
+  // at it) shouldn't take the rest of the batch with it.
+  let deleted = 0;
+  let failed = 0;
+  const hasFiles = storedFields(store.resource).some(([, def]) => def.kind === "file");
+  for (const id of ids) {
+    // Only read the record first when there's an upload to clean up afterwards.
+    const existing = hasFiles ? await store.get(id) : null;
+    const result = await store.delete(id);
+    if (result.ok) {
+      deleted++;
+      if (existing?.ok) await removeUploads(store.resource, existing.data);
+    } else failed++;
+  }
+  if (deleted > 0) {
+    await recordAudit({ action: "bulk-delete", resource: resourceName, changes: { deleted, failed } });
+    revalidatePath(resourcePath(store.resource));
+  }
+  return { ok: true, data: { deleted, failed } };
+}
+
+/**
+ * Every record matching the current search and filters, as CSV.
+ *
+ * Read through the same store the table uses, so the export shows exactly what the
+ * person can see — their policy, their filters, their sort.
+ */
+export async function exportRecordsAction(resourceName: string, query: string): Promise<ActionResult<{ csv: string; rows: number; truncated: boolean }>> {
+  const denied = await allowed(resourceName, "read");
+  if (denied) return denied;
+
+  const store = dashboardStore(resourceName);
+  const fields = storedFields(store.resource).filter(([, def]) => def.kind !== "file");
+  const columns = [["id", "Id"] as const, ...fields.map(([key, def]) => [key, def.label] as const), ["createdAt", "Created"] as const];
+
+  const rows: Record<string, unknown>[] = [];
+  let truncated = false;
+  for (let page = 1; rows.length < EXPORT_LIMIT; page++) {
+    const params = new URLSearchParams(query);
+    params.set("page", String(page));
+    params.set("perPage", String(EXPORT_PAGE));
+    const result = await store.list(params);
+    if (!result.ok) return result;
+    rows.push(...result.data.data);
+    if (page >= result.data.meta.totalPages) break;
+    if (rows.length >= EXPORT_LIMIT) {
+      truncated = true;
+      break;
+    }
+  }
+
+  const csv = toCsv(rows, columns.map(([key, label]) => ({ key, label })));
+  return { ok: true, data: { csv, rows: rows.length, truncated } };
+}
+
+/** Keep the table's current query as a named view, for this person. */
+export async function saveViewAction(resourceName: string, name: string, query: string): Promise<ActionResult<{ id: string }>> {
+  const denied = await allowed(resourceName, "read");
+  if (denied) return denied;
+  const { session } = await dashboardSession();
+  if (!session) return { ok: false, status: 401, error: "Sign in to save a view." };
+
+  const label = name.trim().slice(0, 60);
+  if (!label) return { ok: false, status: 400, error: "Give the view a name." };
+  const existing = await listViews(resourceName);
+  if (existing.length >= MAX_VIEWS) {
+    return { ok: false, status: 400, error: `That's ${MAX_VIEWS} views for ${resourceName}. Delete one first.` };
+  }
+
+  const row = await prisma.savedView.create({
+    data: { userId: session.user.id, resource: resourceName, name: label, query: query.replace(/^\?/, "").slice(0, 2000) },
+    select: { id: true },
+  });
+  revalidatePath("/dashboard", "layout");
+  return { ok: true, data: { id: row.id } };
+}
+
+/** Views belong to the person who saved them, so only they can remove one. */
+export async function deleteViewAction(id: string): Promise<ActionResult<{ id: string }>> {
+  const { session } = await dashboardSession();
+  if (!session) return { ok: false, status: 401, error: "Sign in first." };
+  await prisma.savedView.deleteMany({ where: { id, userId: session.user.id } });
+  revalidatePath("/dashboard", "layout");
+  return { ok: true, data: { id } };
+}
+
+export async function createRecordAction(resourceName: string, input: unknown): Promise<ActionResult<Record<string, unknown>>> {
+  const denied = await allowed(resourceName, "create");
+  if (denied) return denied;
+
+  const store = dashboardStore(resourceName);
+  const result = await store.create(input);
+  if (result.ok) {
+    await recordAudit({
+      action: "create",
+      resource: resourceName,
+      recordId: String(result.data.id),
+      recordLabel: recordTitle(store.resource, result.data),
+      changes: diffFields(null, result.data),
+    });
+    revalidatePath(resourcePath(store.resource));
+  }
+  return result;
+}
+
+export async function updateRecordAction(resourceName: string, id: string, input: unknown): Promise<ActionResult<Record<string, unknown>>> {
+  const denied = await allowed(resourceName, "update");
+  if (denied) return denied;
+
+  const store = dashboardStore(resourceName);
+  const before = await store.get(id);
+  const result = await store.update(id, input);
+  if (result.ok) {
+    await recordAudit({
+      action: "update",
+      resource: resourceName,
+      recordId: id,
+      recordLabel: recordTitle(store.resource, result.data),
+      changes: diffFields(before.ok ? before.data : null, result.data),
+    });
+    revalidatePath(resourcePath(store.resource));
+  }
+  return result;
+}
+
+/** The file field `fieldKey` of a resource, or a failure when it doesn't exist. */
+function fileField(
+  resourceName: string,
+  fieldKey: string,
+): { failure: ActionResult<never> } | { field: FileField & { label: string }; prefix: string } {
+  const { resource } = dashboardStore(resourceName);
+  const field = resource.fields[fieldKey];
+  if (!field || field.kind !== "file") {
+    return { failure: { ok: false, status: 400, error: `${resourceName} has no file field "${fieldKey}".` } };
+  }
+  return { field, prefix: fileKeyPrefix(resource, fieldKey) };
+}
+
+/**
+ * A short-lived signed URL for uploading to a `file:[…]` field. The declared type and
+ * size are checked against the descriptor before signing, so a browser can't widen
+ * what the field accepts; the storage route then checks the bytes really are that type.
+ */
+export async function createUploadUrlAction(
+  resourceName: string,
+  fieldKey: string,
+  file: { name: string; type: string; size: number },
+): Promise<ActionResult<{ url: string; key: string }>> {
+  // Uploading is part of creating or editing a record, so either permission is enough.
+  const deniedCreate = await allowed(resourceName, "create");
+  const deniedUpdate = await allowed(resourceName, "update");
+  if (deniedCreate && deniedUpdate) return deniedUpdate;
+
+  const target = fileField(resourceName, fieldKey);
+  if ("failure" in target) return target.failure;
+  const { field, prefix } = target;
+
+  const contentTypes = mimeTypesFor(field.accept);
+  if (!matchesContentType(file.type || "application/octet-stream", contentTypes)) {
+    return { ok: false, status: 415, error: `${field.label} accepts ${field.accept.join(", ")} files.`, field: fieldKey };
+  }
+  const maxBytes = fileMaxBytes(field);
+  if (file.size > maxBytes) {
+    return { ok: false, status: 413, error: `${field.label} must be ${Math.round(maxBytes / 1024 / 1024)} MB or smaller.`, field: fieldKey };
+  }
+
+  const upload = await storage.createUploadUrl({ key: createObjectKey(file.name, prefix), contentTypes, maxBytes });
+  return { ok: true, data: { url: upload.url, key: upload.key } };
+}
+
+/**
+ * A short-lived URL for viewing a file stored in a `file:[…]` field. Only keys under that
+ * field's prefix are signed, and only for roles that can work with the resource, so a
+ * guessed or borrowed key can't be read through a resource the role can't see.
+ */
+export async function createReadUrlAction(
+  resourceName: string,
+  fieldKey: string,
+  key: string,
+  /**
+   * Serve the file as a download with this name instead of showing it in the tab. Object
+   * keys carry an id to keep them unique, so without this a download arrives called
+   * `3f1c…-invoice.pdf` — pass the name the record holds.
+   */
+  downloadAs?: string,
+): Promise<ActionResult<{ url: string }>> {
+  const denied = await allowed(resourceName, "read");
+  // Someone creating or editing a record can view what they just uploaded.
+  if (denied && (await allowed(resourceName, "create")) && (await allowed(resourceName, "update"))) return denied;
+
+  const target = fileField(resourceName, fieldKey);
+  if ("failure" in target) return target.failure;
+  if (!key.startsWith(target.prefix)) return { ok: false, status: 403, error: "That file doesn't belong to this field.", field: fieldKey };
+
+  return { ok: true, data: { url: await storage.createReadUrl({ key, downloadAs: downloadAs || undefined }) } };
+}

package/templates/next/app/dashboard/layout.tsx

@@ -0,0 +1,64 @@
+import { cookies } from "next/headers";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { Toaster } from "@/components/ui/sonner";
+import { DashboardHeader, type Notice, type Theme } from "@/components/dashboard/dashboard-header";
+import { DashboardSidebar } from "@/components/dashboard/dashboard-sidebar";
+import { prisma } from "@/lib/db";
+import { authConfig, twoFactorAvailable } from "@/lib/auth-config";
+import { dashboardLinks } from "@/lib/dashboard-nav";
+import { ADMIN_ROLES, visibleResources } from "@/lib/dashboard";
+import { requireSession } from "@/lib/session";
+import { listViews } from "@/lib/views";
+
+/**
+ * The frame around every signed-in page: the app's resources in the sidebar, the
+ * account menu in the header and in the sidebar's footer.
+ *
+ * Everyone signed in gets a dashboard. What's in it depends on the policies: the
+ * sidebar lists only the resources this person may read, and the sections that manage
+ * the app itself are for ADMIN_ROLES (lib/dashboard.ts).
+ */
+export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const { user } = await requireSession("/dashboard");
+  const jar = await cookies();
+  const theme = (jar.get("flare-theme")?.value ?? "system") as Theme;
+  const collapsed = jar.get("sidebar_state")?.value === "false";
+  const role = (user as { role?: string | null }).role ?? "";
+
+  const views = await listViews();
+  const resources = (await visibleResources()).map((resource) => ({
+    name: resource.name,
+    pluralLabel: resource.pluralLabel,
+    slug: resource.slug,
+    icon: resource.icon,
+    group: resource.group,
+    views: views.filter((view) => view.resource === resource.name).map(({ id, name, query }) => ({ id, name, query })),
+  }));
+
+  // What the bell has to say: the things about this account that aren't done yet.
+  const passkeys = await prisma.passkey.count({ where: { userId: user.id } });
+  const notices: Notice[] = [
+    ...(user.emailVerified
+      ? []
+      : [{ id: "verify-email", title: "Verify your email address", description: "We'll send a new link or code.", href: "/verify-email", tone: "warning" as const }]),
+    ...(twoFactorAvailable && !(user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled
+      ? [{ id: "two-factor", title: "Turn on two-factor authentication", description: "A second step after your password.", href: "/dashboard/account/security" }]
+      : []),
+    ...(authConfig.passkeys && passkeys === 0
+      ? [{ id: "passkey", title: "Add a passkey", description: "Sign in with Face ID, Touch ID or Windows Hello.", href: "/dashboard/account/security" }]
+      : []),
+  ];
+
+  const account = { name: user.name, email: user.email, image: (user as { image?: string | null }).image };
+
+  return (
+    <SidebarProvider defaultOpen={!collapsed}>
+      <DashboardSidebar appName="__APP_NAME__" resources={resources} links={dashboardLinks} isAdmin={ADMIN_ROLES.includes(role)} user={account} />
+      <SidebarInset>
+        <DashboardHeader user={account} initialTheme={theme} notices={notices} />
+        <main className="flex flex-1 flex-col gap-6 p-4 md:p-6 lg:p-8">{children}</main>
+      </SidebarInset>
+      <Toaster theme={theme} />
+    </SidebarProvider>
+  );
+}

package/templates/next/app/dashboard/page.tsx

@@ -0,0 +1,127 @@
+import Link from "next/link";
+import { ArrowRightIcon, CheckCircle2Icon, CircleIcon, PlusIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { resourceIcon } from "@/components/dashboard/resource-icon";
+import { StatCards, type Stat } from "@/components/dashboard/stat-card";
+import { prisma } from "@/lib/db";
+import { authConfig, twoFactorAvailable } from "@/lib/auth-config";
+import { adminPermissions, resourcePath, resourceStats, trend, visibleResources } from "@/lib/dashboard";
+import { requireSession } from "@/lib/session";
+
+export const metadata = { title: "Dashboard" };
+
+/** The first thing you see when you sign in: how much data there is, and what's left to set up. */
+export default async function DashboardPage() {
+  const { user } = await requireSession("/dashboard");
+  const resources = await visibleResources();
+
+  const cards = await Promise.all(
+    resources.map(async (resource) => {
+      // One query per resource for the count and the trend, not two.
+      const [stats, permissions] = await Promise.all([resourceStats(resource.name), adminPermissions(resource.name)]);
+      return { resource, total: stats.total, recent: stats, permissions };
+    }),
+  );
+
+  const stats: Stat[] = cards.slice(0, 4).map(({ resource, total, recent }) => ({
+    label: resource.pluralLabel,
+    value: total,
+    hint: recent.current > 0 ? `${recent.current.toLocaleString()} this week` : "none this week",
+    change: trend(recent.current, recent.previous),
+    icon: resourceIcon(resource.icon),
+    href: resourcePath(resource),
+  }));
+
+  const passkeys = await prisma.passkey.count({ where: { userId: user.id } });
+  const twoFactorOn = Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled);
+  const steps = [
+    { done: user.emailVerified, label: "Verify your email address", href: "/verify-email" },
+    ...(twoFactorAvailable ? [{ done: twoFactorOn, label: "Turn on two-factor authentication", href: "/dashboard/account/security" }] : []),
+    ...(authConfig.passkeys ? [{ done: passkeys > 0, label: "Add a passkey for one-tap sign-in", href: "/dashboard/account/security" }] : []),
+  ];
+  const remaining = steps.filter((step) => !step.done).length;
+
+  return (
+    <>
+      <PageHeader
+        title={`Welcome${user.name ? `, ${user.name.split(" ")[0]}` : ""}`}
+        description={resources.length > 0 ? "Everything in your app, and how it's moving." : "Your app is running. Add a resource to fill this page."}
+      />
+
+      <StatCards stats={stats} />
+
+      {resources.length === 0 && (
+        <Empty className="rounded-xl border border-dashed">
+          <EmptyHeader>
+            <EmptyTitle>No resources yet</EmptyTitle>
+            <EmptyDescription>
+              Generate one with <code>flare gen resource Contact --fields &quot;name:string, email:string&quot;</code>, then fill it with{" "}
+              <code>flare seed:resource Contact --count 1000</code>.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+        {cards.length > 0 && (
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Your data</CardTitle>
+              <CardDescription>Every resource you can see.</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col">
+              {cards.map(({ resource, total, permissions }) => {
+                const Icon = resourceIcon(resource.icon);
+                return (
+                  <div key={resource.name} className="flex items-center gap-3 border-b py-3 last:border-b-0 last:pb-0">
+                    <span className="grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground">
+                      <Icon className="size-4.5" />
+                    </span>
+                    <div className="flex min-w-0 flex-col">
+                      <Link href={resourcePath(resource)} className="truncate text-sm font-medium hover:underline">
+                        {resource.pluralLabel}
+                      </Link>
+                      <span className="text-xs text-muted-foreground">{total.toLocaleString()} records</span>
+                    </div>
+                    <div className="ml-auto flex items-center gap-1">
+                      {permissions.create && (
+                        <Button variant="ghost" size="icon" aria-label={`New ${resource.label.toLowerCase()}`} asChild>
+                          <Link href={resourcePath(resource, "new")}>
+                            <PlusIcon />
+                          </Link>
+                        </Button>
+                      )}
+                      <Button variant="ghost" size="icon" aria-label={`Open ${resource.pluralLabel.toLowerCase()}`} asChild>
+                        <Link href={resourcePath(resource)}>
+                          <ArrowRightIcon />
+                        </Link>
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </CardContent>
+          </Card>
+        )}
+
+        <Card className="h-fit">
+          <CardHeader>
+            <CardTitle className="text-base">Secure your account</CardTitle>
+            <CardDescription>{remaining === 0 ? "All done." : `${remaining} to go.`}</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col">
+            {steps.map((step) => (
+              <Link key={step.label} href={step.href} className="flex items-center gap-3 border-b py-3 text-sm last:border-b-0 last:pb-0 hover:text-primary">
+                {step.done ? <CheckCircle2Icon className="size-4.5 text-success" /> : <CircleIcon className="size-4.5 text-muted-foreground" />}
+                <span className={step.done ? "text-muted-foreground line-through" : "font-medium"}>{step.label}</span>
+              </Link>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </>
+  );
+}

package/templates/next/components/dashboard/resource-chart.tsx

@@ -0,0 +1,86 @@
+import type { Resource } from "@flaredev/core";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { prisma } from "@/lib/db";
+import { resourceTables } from "@/resources/server";
+import { cached, resourceTag, TTL } from "@/lib/cache";
+
+export interface DayCount {
+  /** "2026-09-23" */
+  date: string;
+  total: number;
+}
+
+/**
+ * How many records were created a day, grouped in SQL rather than by reading rows: one
+ * query over the created_at index, whatever the table's size.
+ */
+export function createdPerDay(name: string, days = 30): Promise<DayCount[]> {
+  const counts = cached(
+    async (resourceName: string, window: number) => {
+      const entry = (resourceTables as unknown as Record<string, { resource: { table: string; fields: object } } | undefined>)[resourceName];
+      if (!entry) return [];
+      const since = new Date(Date.now() - window * 86_400_000).toISOString();
+      // Grouped in Postgres rather than by reading rows: one pass over the created_at
+      // index whatever the table's size. The table name comes from the descriptor.
+      const rows = (await prisma.$queryRawUnsafe(
+        `select to_char("created_at", 'YYYY-MM-DD') as date, count(*)::int as total
+         from "${entry.resource.table}" where "created_at" >= '${since}' group by 1 order by 1`,
+      )) as DayCount[];
+      return rows.map((row) => ({ date: String(row.date), total: Number(row.total) }));
+    },
+    ["flare", "created-per-day"],
+    { tags: [resourceTag(name)], revalidate: TTL.short },
+  );
+  return counts(name, days);
+}
+
+/** Fill the gaps: a day with nothing created still needs a column. */
+function series(rows: DayCount[], days: number): DayCount[] {
+  const found = new Map(rows.map((row) => [row.date, row.total]));
+  return Array.from({ length: days }, (_, index) => {
+    const date = new Date(Date.now() - (days - 1 - index) * 86_400_000).toISOString().slice(0, 10);
+    return { date, total: found.get(date) ?? 0 };
+  });
+}
+
+/**
+ * New records a day for the last month, above the table.
+ *
+ * Drawn with CSS rather than a charting library: thirty numbers don't justify shipping
+ * one to the browser, and this renders on the server with the rest of the page.
+ */
+export async function ResourceChart({ resource, days = 30 }: { resource: Resource; days?: number }) {
+  const rows = series(await createdPerDay(resource.name, days), days);
+  const total = rows.reduce((sum, row) => sum + row.total, 0);
+  if (total === 0) return null;
+
+  const peak = Math.max(1, ...rows.map((row) => row.total));
+  const month = new Intl.DateTimeFormat(undefined, { day: "numeric", month: "short" });
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">New {resource.pluralLabel.toLowerCase()}</CardTitle>
+        <CardDescription>
+          {total.toLocaleString()} in the last {days} days.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex h-28 items-end gap-0.5" role="img" aria-label={`New ${resource.pluralLabel.toLowerCase()} a day for the last ${days} days`}>
+          {rows.map((row) => (
+            <div
+              key={row.date}
+              title={`${row.date}: ${row.total}`}
+              style={{ height: `${Math.max(2, Math.round((row.total / peak) * 100))}%` }}
+              className="flex-1 rounded-t-sm bg-primary/70 transition-colors hover:bg-primary"
+            />
+          ))}
+        </div>
+        <div className="mt-2 flex justify-between text-xs text-muted-foreground">
+          <span>{month.format(new Date(`${rows[0]!.date}T00:00:00Z`))}</span>
+          <span>{month.format(new Date(`${rows[rows.length - 1]!.date}T00:00:00Z`))}</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/next/lib/analytics.ts

@@ -0,0 +1,71 @@
+/**
+ * Traffic, errors and latency — on Vercel, not from here.
+ *
+ * The Cloudflare stack reads these from Cloudflare's GraphQL Analytics API. Vercel's
+ * equivalent needs a team token and a different shape of query, and an app shouldn't
+ * hold a token that can read the whole account, so this reports "unconfigured" and the
+ * observability page says where the numbers actually are.
+ *
+ * The types are kept identical so the page doesn't need two versions.
+ */
+
+export interface RequestPoint {
+  /** "2026-09-22" */
+  date: string;
+  requests: number;
+  errors: number;
+  /** Median CPU time in milliseconds. */
+  medianCpuMs: number;
+}
+
+export interface WorkerAnalytics {
+  points: RequestPoint[];
+  requests: number;
+  errors: number;
+  /** Errors as a percentage of requests. */
+  errorRate: number;
+  medianCpuMs: number;
+}
+
+/** Why there's nothing to show, when there's nothing to show. */
+export type AnalyticsResult = { ok: true; data: WorkerAnalytics } | { ok: false; reason: "unconfigured" | "failed"; message: string };
+
+interface GraphQlResponse {
+  data?: {
+    viewer?: {
+      accounts?: {
+        workersInvocationsAdaptive?: {
+          dimensions: { date: string };
+          sum: { requests: number; errors: number };
+          quantiles: { cpuTimeP50: number };
+        }[];
+      }[];
+    };
+  };
+  errors?: { message: string }[];
+}
+
+const QUERY = `query WorkerTraffic($accountTag: String!, $scriptName: String!, $since: Date!, $until: Date!) {
+  viewer {
+    accounts(filter: { accountTag: $accountTag }) {
+      workersInvocationsAdaptive(
+        limit: 100
+        filter: { scriptName: $scriptName, date_geq: $since, date_leq: $until }
+        orderBy: [date_ASC]
+      ) {
+        dimensions { date }
+        sum { requests errors }
+        quantiles { cpuTimeP50 }
+      }
+    }
+  }
+}`;
+
+/** Traffic for the last `days` days, a point per day. */
+export async function workerAnalytics(_scriptName: string, _days = 7): Promise<AnalyticsResult> {
+  return {
+    ok: false,
+    reason: "unconfigured",
+    message: "Traffic and error rates for this app are in your Vercel dashboard, under Observability.",
+  };
+}