@flaredev/cli 0.2.0 → 0.4.0

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

@@ -1,39 +1,66 @@
-import Link from "next/link";
-import { BrandMark } from "@/components/auth/auth-shell";
-import { DashboardNav } from "@/components/dashboard/dashboard-nav";
-import { SignOutButton } from "@/components/sign-out-button";
-import { ADMIN_ROLES } from "@/lib/admin";
-import { requireSession } from "@/lib/session";
-import { site } from "@/lib/site";
-
-/** The frame around every signed-in page: the app's mark, its sections and the account menu. */
-export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
-  const { user } = await requireSession("/dashboard");
-  const role = (user as { role?: string | null }).role ?? "";
-  const links = [
-    { href: "/dashboard", label: "Overview" },
-    { href: "/dashboard/account", label: "Account" },
-    ...(ADMIN_ROLES.includes(role) ? [{ href: "/admin", label: "Admin" }] : []),
-  ];
-
-  return (
-    <div className="min-h-dvh bg-surface-muted/40">
-      <header className="border-b border-border bg-surface">
-        <div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-6 pt-4">
-          <Link href="/dashboard" className="flex items-center gap-3">
-            <BrandMark link={false} />
-            <span className="font-semibold">{site.name}</span>
-          </Link>
-          <div className="flex items-center gap-3">
-            <span className="hidden text-sm text-foreground-muted sm:inline">{user.email}</span>
-            <SignOutButton />
-          </div>
-        </div>
-        <div className="mx-auto max-w-5xl px-3">
-          <DashboardNav links={links} />
-        </div>
-      </header>
-      <main className="mx-auto flex max-w-5xl flex-col gap-8 px-6 py-10">{children}</main>
-    </div>
-  );
-}
+import { cookies } from "next/headers";
+import { count, eq } from "drizzle-orm";
+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 { getDb } from "@/db";
+import { passkey } from "@/db/auth-schema";
+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 } = { passkeys: 0 }] = await getDb().select({ passkeys: count() }).from(passkey).where(eq(passkey.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/app/app/dashboard/observability/page.tsx

@@ -0,0 +1,175 @@
+import Link from "next/link";
+import { ActivityIcon, AlertTriangleIcon, DatabaseIcon, GaugeIcon, HistoryIcon } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { LocalTime } from "@/components/dashboard/local-time";
+import { StatCards, type Stat } from "@/components/dashboard/stat-card";
+import { TrafficChart } from "@/components/dashboard/traffic-chart";
+import { auditCount, recentAudit } from "@/lib/audit";
+import { workerAnalytics } from "@/lib/analytics";
+import { recordCount, requireDashboard, resourcePath, visibleResources } from "@/lib/dashboard";
+import { site } from "@/lib/site";
+
+export const metadata = { title: "Observability" };
+
+const ACTION_TONE: Record<string, "secondary" | "destructive" | "outline"> = {
+  create: "secondary",
+  update: "outline",
+  delete: "destructive",
+  "bulk-delete": "destructive",
+  import: "secondary",
+};
+
+/** How the app is behaving: traffic from Cloudflare, size from the database, and who changed what. */
+export default async function ObservabilityPage() {
+  await requireDashboard("/dashboard/observability");
+
+  const [analytics, resources, changes, audit] = await Promise.all([
+    workerAnalytics(site.name.toLowerCase().replace(/[^a-z0-9-]+/g, "-")),
+    visibleResources(),
+    auditCount(7),
+    recentAudit(20),
+  ]);
+
+  const tables = await Promise.all(resources.map(async (resource) => ({ resource, total: await recordCount(resource.name) })));
+  const records = tables.reduce((total, table) => total + table.total, 0);
+
+  const stats: Stat[] = [
+    analytics.ok
+      ? { label: "Requests (7 days)", value: analytics.data.requests, icon: ActivityIcon }
+      : { label: "Requests (7 days)", value: "—", hint: "not connected", icon: ActivityIcon },
+    analytics.ok
+      ? {
+          label: "Errors",
+          value: analytics.data.errors,
+          hint: `${analytics.data.errorRate.toFixed(2)}% of requests`,
+          goodDirection: "down",
+          icon: AlertTriangleIcon,
+        }
+      : { label: "Errors", value: "—", hint: "not connected", icon: AlertTriangleIcon },
+    analytics.ok
+      ? { label: "Median CPU time", value: `${analytics.data.medianCpuMs} ms`, hint: "per request", icon: GaugeIcon }
+      : { label: "Median CPU time", value: "—", hint: "not connected", icon: GaugeIcon },
+    { label: "Changes this week", value: changes, hint: "creates, edits and deletes", icon: HistoryIcon },
+  ];
+
+  return (
+    <>
+      <PageHeader
+        title="Observability"
+        description="Traffic, database and the record of who changed what."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Observability" }]}
+      />
+
+      <StatCards stats={stats} />
+
+      {!analytics.ok && (
+        <Alert>
+          <AlertTitle>{analytics.reason === "unconfigured" ? "Traffic isn't connected yet" : "Couldn't read traffic from Cloudflare"}</AlertTitle>
+          <AlertDescription>
+            <p>
+              {analytics.message}
+              {analytics.reason === "unconfigured" &&
+                " Create a token with Account Analytics: Read, then set it with `wrangler secret put CLOUDFLARE_API_TOKEN` and `wrangler secret put CLOUDFLARE_ACCOUNT_ID`."}
+            </p>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {analytics.ok && analytics.data.points.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Requests a day</CardTitle>
+            <CardDescription>The last seven days, errors marked in red.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TrafficChart points={analytics.data.points} />
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.6fr)]">
+        <Card className="h-fit">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <DatabaseIcon className="size-4" />
+              Database
+            </CardTitle>
+            <CardDescription>{records.toLocaleString()} records across {tables.length} {tables.length === 1 ? "table" : "tables"}.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col">
+            {tables.length === 0 && <p className="text-sm text-muted-foreground">No resources yet.</p>}
+            {tables.map(({ resource, total }) => (
+              <div key={resource.name} className="flex items-center justify-between gap-3 border-b py-2.5 text-sm last:border-b-0 last:pb-0">
+                <Link href={resourcePath(resource)} className="hover:underline">
+                  {resource.pluralLabel}
+                </Link>
+                <span className="tabular-nums text-muted-foreground">{total.toLocaleString()}</span>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <HistoryIcon className="size-4" />
+              Recent changes
+            </CardTitle>
+            <CardDescription>Every write through the dashboard, newest first.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {audit.length === 0 ? (
+              <Empty>
+                <EmptyHeader>
+                  <EmptyTitle>Nothing yet</EmptyTitle>
+                  <EmptyDescription>Creates, edits, deletes and imports show up here as they happen.</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              <div className="overflow-x-auto">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>What</TableHead>
+                      <TableHead>Record</TableHead>
+                      <TableHead>Who</TableHead>
+                      <TableHead className="text-right">When</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {audit.map((entry) => (
+                      <TableRow key={entry.id}>
+                        <TableCell>
+                          <Badge variant={ACTION_TONE[entry.action] ?? "secondary"}>{entry.action}</Badge>
+                          <span className="ml-2 text-muted-foreground">{entry.resource}</span>
+                        </TableCell>
+                        <TableCell className="max-w-56 truncate">{entry.recordLabel ?? describeBulk(entry.changes)}</TableCell>
+                        <TableCell className="max-w-48 truncate text-muted-foreground">{entry.userEmail ?? "—"}</TableCell>
+                        <TableCell className="text-right whitespace-nowrap text-muted-foreground tabular-nums">
+                          <LocalTime value={entry.createdAt} />
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </>
+  );
+}
+
+/** Bulk actions have no single record, so say how many they touched. */
+function describeBulk(changes: Record<string, unknown> | null): string {
+  if (!changes) return "—";
+  if (typeof changes.deleted === "number") return `${changes.deleted} deleted`;
+  if (typeof changes.created === "number") return `${changes.created} imported`;
+  return "—";
+}

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

@@ -1,51 +1,132 @@
 import Link from "next/link";
 import { count, eq } from "drizzle-orm";
-import { CheckCircle2Icon, CircleIcon } from "lucide-react";
+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 { getDb } from "@/db";
 import { passkey } from "@/db/auth-schema";
 import { authConfig, twoFactorAvailable } from "@/lib/auth-config";
+import { adminPermissions, recentCounts, recordCount, resourcePath, trend, visibleResources } from "@/lib/dashboard";
 import { requireSession } from "@/lib/session";
-import { site } from "@/lib/site";
 
 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) => {
+      const [total, recent, permissions] = await Promise.all([
+        recordCount(resource.name),
+        recentCounts(resource.name),
+        adminPermissions(resource.name),
+      ]);
+      return { resource, total, recent, 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 } = { passkeys: 0 }] = await getDb().select({ passkeys: count() }).from(passkey).where(eq(passkey.userId, user.id));
   const twoFactorOn = Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled);
-
   const steps = [
-    { done: user.emailVerified, label: "Verify your email address", href: "/dashboard/account#profile" },
-    ...(twoFactorAvailable ? [{ done: twoFactorOn, label: "Turn on two-factor authentication", href: "/dashboard/account#two-factor" }] : []),
-    ...(authConfig.passkeys ? [{ done: passkeys > 0, label: "Add a passkey for one-tap sign-in", href: "/dashboard/account#passkeys" }] : []),
+    { 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 (
     <>
-      <div className="flex flex-col gap-1">
-        <h1 className="text-3xl">Welcome{user.name ? `, ${user.name.split(" ")[0]}` : ""}</h1>
-        <p className="text-foreground-muted">This is your {site.name} dashboard.</p>
-      </div>
+      <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>
+      )}
 
-      <section aria-labelledby="security" className="rounded-[calc(var(--radius)+4px)] border border-border bg-surface">
-        <div className="flex items-center justify-between gap-4 border-b border-border px-6 py-4">
-          <h2 id="security" className="text-base">
-            Secure your account
-          </h2>
-          <span className="text-sm text-foreground-muted">{remaining === 0 ? "All done" : `${remaining} to go`}</span>
-        </div>
-        <ul>
-          {steps.map((step) => (
-            <li key={step.label} className="border-b border-border last:border-b-0">
-              <Link href={step.href} className="flex items-center gap-3 px-6 py-4 text-sm hover:bg-surface-muted">
-                {step.done ? <CheckCircle2Icon className="size-5 text-success" /> : <CircleIcon className="size-5 text-foreground-muted" />}
-                <span className={step.done ? "text-foreground-muted line-through" : "font-medium"}>{step.label}</span>
+      <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>
-            </li>
-          ))}
-        </ul>
-      </section>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
     </>
   );
 }

package/templates/app/app/verify-email/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { VerifyEmailForm } from "@/components/auth/verify-email-form";
+import { authConfig } from "@/lib/auth-config";
+import { getSession, safeRedirectPath } from "@/lib/session";
+
+export const metadata = { title: "Verify your email" };
+
+/**
+ * Confirm an email address: by the code in the message, or by asking for a fresh link
+ * when the one they have has expired.
+ */
+export default async function VerifyEmailPage({ searchParams }: { searchParams: Promise<{ email?: string; next?: string }> }) {
+  const { email, next } = await searchParams;
+  const session = await getSession();
+  const to = safeRedirectPath(next, "/dashboard/account");
+  if (session?.user.emailVerified) redirect(to);
+
+  return (
+    <AuthShell
+      title="Verify your email"
+      subtitle="One step, so we know we can reach you."
+      footer={
+        <Link href={session ? "/dashboard" : "/sign-in"} className="font-medium text-link hover:underline">
+          {session ? "Back to the dashboard" : "Back to sign in"}
+        </Link>
+      }
+    >
+      <VerifyEmailForm initialEmail={session?.user.email ?? email ?? ""} codes={authConfig.emailOtp} next={to} />
+    </AuthShell>
+  );
+}

package/templates/app/components/account/account-nav.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+export interface AccountLink {
+  href: string;
+  label: string;
+}
+
+/**
+ * The account's own navigation. Each part of an account is its own page: a single page
+ * of everything means scrolling past two-factor to reach your devices, and no way to
+ * send someone straight to the part that needs their attention.
+ */
+export function AccountNav({ links }: { links: AccountLink[] }) {
+  const pathname = usePathname();
+  return (
+    <nav aria-label="Account" className="-mb-px flex gap-1 overflow-x-auto border-b">
+      {links.map((link) => {
+        const current = pathname === link.href;
+        return (
+          <Link
+            key={link.href}
+            href={link.href}
+            aria-current={current ? "page" : undefined}
+            className={cn(
+              "border-b-2 px-3 py-2.5 text-sm font-medium whitespace-nowrap transition-colors",
+              current ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {link.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}