@flaredev/cli 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flaredev/cli",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "The flare command-line tool: create, generate, migrate, and deploy Flare apps",
   "license": "MIT",
   "author": "Muke Johnbaptist",
@@ -41,7 +41,7 @@
     "jiti": "^2.7.0",
     "jsonc-parser": "^3.3.1",
     "picocolors": "^1.1.1",
-    "@flaredev/core": "0.4.0"
+    "@flaredev/core": "0.5.0"
   },
   "engines": {
     "node": ">=22"

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

@@ -10,7 +10,7 @@ import { getDb } from "@/db";
 import { savedView } from "@/db/flare-schema";
 import { toCsv } from "@/lib/csv";
 import { storage } from "@/lib/storage";
-import { can, storedFields, type PolicyAction } from "@flaredev/core";
+import { can, storedFields, type PolicyAction, type Resource } from "@flaredev/core";
 import { resourcePath, dashboardSession, dashboardStore, policyFor } from "@/lib/dashboard";
 
 export type ActionResult<T = unknown> =
@@ -26,6 +26,23 @@ async function allowed(resourceName: string, action: PolicyAction): Promise<Acti
   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;
@@ -34,6 +51,7 @@ export async function deleteRecordAction(resourceName: string, id: string): Prom
   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,
@@ -67,10 +85,15 @@ export async function deleteManyAction(resourceName: string, ids: string[]): Pro
   // 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++;
-    else failed++;
+    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 } });
@@ -233,7 +256,17 @@ export async function createUploadUrlAction(
  * 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): Promise<ActionResult<{ url: string }>> {
+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;
@@ -242,5 +275,5 @@ export async function createReadUrlAction(resourceName: string, fieldKey: string
   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 }) } };
+  return { ok: true, data: { url: await storage.createReadUrl({ key, downloadAs: downloadAs || undefined }) } };
 }

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

@@ -0,0 +1,93 @@
+import { DatabaseIcon, FilesIcon, HardDriveIcon, LayersIcon } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { CostEstimator } from "@/components/dashboard/cost-estimator";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { StatCards } from "@/components/dashboard/stat-card";
+import { compact, FREE, gb } from "@/lib/costs";
+import { requireDashboard, resourceStats, visibleResources } from "@/lib/dashboard";
+import { storedBytes } from "@/lib/usage";
+
+export const metadata = { title: "Costs" };
+
+/**
+ * What this app holds, and what it would cost to run.
+ *
+ * Two halves, and the difference between them matters. The top is measured: rows this
+ * app has stored, files it has put in R2. The bottom is modelled, because a Worker can
+ * see what it wrote but not how many requests it served — that lives in Cloudflare's
+ * analytics, behind an API token this app doesn't hold and shouldn't need.
+ */
+export default async function CostsPage() {
+  await requireDashboard("/dashboard/costs");
+  const resources = await visibleResources();
+
+  const [counts, stored] = await Promise.all([
+    Promise.all(resources.map(async (resource) => ({ resource, total: (await resourceStats(resource.name)).total }))),
+    storedBytes(),
+  ]);
+
+  const rows = counts.reduce((sum, entry) => sum + entry.total, 0);
+  const r2Gb = stored.bytes / 1024 ** 3;
+
+  return (
+    <>
+      <PageHeader
+        title="Costs"
+        description="What this app holds, and what it would cost to run."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Costs" }]}
+      />
+
+      <StatCards
+        stats={[
+          { label: "Rows stored", value: compact(rows), icon: DatabaseIcon, hint: `across ${resources.length} resources` },
+          { label: "Files in R2", value: compact(stored.files), icon: FilesIcon },
+          { label: "File storage", value: gb(r2Gb), icon: HardDriveIcon, hint: `${FREE.r2StorageGb} GB free` },
+          { label: "Resources", value: resources.length, icon: LayersIcon },
+        ]}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>What's in the database</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Resource</TableHead>
+                <TableHead className="text-right">Rows</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {counts.map(({ resource, total }) => (
+                <TableRow key={resource.name}>
+                  <TableCell>{resource.pluralLabel}</TableCell>
+                  <TableCell className="text-right tabular-nums">{total.toLocaleString()}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <CostEstimator storedGb={{ d1: 0, r2: r2Gb }} />
+
+      <Alert>
+        <AlertTitle>This is an estimate, not a bill</AlertTitle>
+        <AlertDescription>
+          A Worker can see what it stored; it can't see how many requests it served or how many rows it read. Those are in{" "}
+          <a href="https://dash.cloudflare.com" target="_blank" rel="noreferrer" className="underline">
+            your Cloudflare dashboard
+          </a>
+          . The assumptions behind the numbers above are in <code>lib/costs.ts</code>, and the reasoning is in the{" "}
+          <a href="https://flare-docs.codetotech.com/guides/costs/" target="_blank" rel="noreferrer" className="underline">
+            cost guide
+          </a>
+          .
+        </AlertDescription>
+      </Alert>
+    </>
+  );
+}

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

@@ -10,7 +10,7 @@ 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 { adminPermissions, resourcePath, resourceStats, trend, visibleResources } from "@/lib/dashboard";
 import { requireSession } from "@/lib/session";
 
 export const metadata = { title: "Dashboard" };
@@ -22,12 +22,9 @@ export default async function DashboardPage() {
 
   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 };
+      // 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 };
     }),
   );
 

package/templates/app/app/globals.css

@@ -1,11 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-/* One typeface per theme (self-hosted; only the active theme's font is downloaded). */
-@import "@fontsource-variable/inter";
-@import "@fontsource-variable/plus-jakarta-sans";
-@import "@fontsource-variable/noto-sans";
-@import "@fontsource-variable/geist";
-@import "@fontsource-variable/figtree";
 
 /*
  * Dark mode: the `dark` class on <html> (set from the theme cookie) or, with no

package/templates/app/app/layout.tsx

@@ -1,28 +1,37 @@
-import type { Metadata } from "next";
-import { site } from "@/lib/site";
-import { activeTheme } from "@/lib/theme";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: { default: site.name, template: `%s · ${site.name}` },
-  description: site.description,
-};
-
-/**
- * Applies the saved theme (the `flare-theme` cookie the admin's toggle writes) before
- * first paint. It runs in the browser rather than reading cookies() here: a layout
- * that reads cookies makes every page under it dynamic, and dynamic pages can never
- * be served from the CDN cache.
- */
-const themeScript = `(function(){try{var m=document.cookie.match(/(?:^|; )flare-theme=(light|dark)/);if(m)document.documentElement.classList.add(m[1]);}catch(e){}})();`;
-
-export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
-  return (
-    <html lang="en" data-theme={activeTheme} suppressHydrationWarning>
-      <head>
-        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
+import type { Metadata } from "next";
+import { site } from "@/lib/site";
+import { activeTheme } from "@/lib/theme";
+import "./globals.css";
+// One typeface per theme, self-hosted; the browser only downloads the one in use.
+// These are imported here rather than from globals.css because Tailwind inlines a CSS
+// @import, and the font files' relative URLs are then resolved against the wrong file
+// and never emitted — which shows up only in a build, as every font 404ing.
+import "@fontsource-variable/inter";
+import "@fontsource-variable/plus-jakarta-sans";
+import "@fontsource-variable/noto-sans";
+import "@fontsource-variable/geist";
+import "@fontsource-variable/figtree";
+
+export const metadata: Metadata = {
+  title: { default: site.name, template: `%s · ${site.name}` },
+  description: site.description,
+};
+
+/**
+ * Applies the saved theme (the `flare-theme` cookie the admin's toggle writes) before
+ * first paint. It runs in the browser rather than reading cookies() here: a layout
+ * that reads cookies makes every page under it dynamic, and dynamic pages can never
+ * be served from the CDN cache.
+ */
+const themeScript = `(function(){try{var m=document.cookie.match(/(?:^|; )flare-theme=(light|dark)/);if(m)document.documentElement.classList.add(m[1]);}catch(e){}})();`;
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" data-theme={activeTheme} suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/app/app/page.tsx

@@ -114,6 +114,16 @@ export default function Home() {
           <p>
             © {new Date().getFullYear()} {site.name}
           </p>
+          {/* Delete this line when the app is your own — it's here so whoever set the
+              project up can find what running it actually costs. */}
+          <a
+            href="https://flare-docs.codetotech.com/guides/costs/"
+            target="_blank"
+            rel="noreferrer"
+            className="hover:text-foreground"
+          >
+            Built with Flare · what it costs to run
+          </a>
           <nav aria-label="Footer" className="flex gap-6">
             <Link href={site.links.terms} className="hover:text-foreground">
               Terms

package/templates/app/components/dashboard/cost-estimator.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { compact, estimate, PER_VIEW, usd } from "@/lib/costs";
+import { groupDigits, ungroup } from "@/lib/number";
+
+/**
+ * What a month would cost at a traffic level you choose.
+ *
+ * The arithmetic is in lib/costs.ts along with the per-view assumptions it rests on.
+ * This is a model, not a bill — the app can see what it stores, not what it served.
+ */
+export function CostEstimator({ storedGb }: { storedGb: { d1: number; r2: number } }) {
+  const [views, setViews] = useState("50000");
+  const monthly = Math.max(0, Number(views) || 0);
+  const result = useMemo(() => estimate(monthly, storedGb), [monthly, storedGb]);
+
+  const rows = [
+    { label: "Requests", value: compact(result.requests), of: "10M included" },
+    { label: "D1 rows read", value: compact(result.d1RowsRead), of: "25B included" },
+    { label: "D1 rows written", value: compact(result.d1RowsWritten), of: "50M included" },
+    { label: "KV reads", value: compact(result.kvReads), of: "10M included" },
+    { label: "KV writes", value: compact(result.kvWrites), of: "1M included" },
+    { label: "CPU", value: `${compact(result.cpuMs)} ms`, of: "30M ms included" },
+  ];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Field className="max-w-xs">
+        <FieldLabel htmlFor="views">Page views a month</FieldLabel>
+        <Input
+          id="views"
+          inputMode="numeric"
+          className="tabular-nums"
+          value={groupDigits(views)}
+          onChange={(event) => setViews(ungroup(event.target.value, false))}
+        />
+        <FieldDescription>
+          At {PER_VIEW.d1RowsRead} rows read and {PER_VIEW.cpuMs} ms of CPU per view.
+        </FieldDescription>
+      </Field>
+
+      <Card>
+        <CardContent className="flex flex-col gap-4">
+          <div className="flex flex-wrap items-baseline justify-between gap-2">
+            <span className="text-sm text-muted-foreground">Estimated monthly cost</span>
+            <span className="text-3xl font-semibold tabular-nums">{usd(result.totalUsd)}</span>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {result.overageUsd < 0.005
+              ? "All of it the $5 Workers Paid subscription — this traffic is inside every included allowance."
+              : `$5 subscription plus ${usd(result.overageUsd)} of usage past what's included.`}
+          </p>
+
+          <div className="grid gap-x-6 gap-y-2 border-t pt-3 sm:grid-cols-2">
+            {rows.map((row) => (
+              <div key={row.label} className="flex items-baseline justify-between gap-3 text-sm">
+                <span className="text-muted-foreground">{row.label}</span>
+                <span className="tabular-nums">
+                  {row.value} <span className="text-xs text-muted-foreground">/ {row.of}</span>
+                </span>
+              </div>
+            ))}
+          </div>
+
+          <p className="border-t pt-3 text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">Free plan: </span>
+            {result.freePlanVerdict}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}