@flaredev/cli 0.4.1 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flaredev/cli",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "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.1"
+    "@flaredev/core": "0.5.1"
   },
   "engines": {
     "node": ">=22"

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/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>
+  );
+}