implement paywall (#161)

* implement core foundation

* inject deps

* fix incorrect migration

* tail migration

* use transaction for migration

* fix: inject deps for tests

* cleanup billing management for admin

* upgrade stripe sdk to v85

* set price env variables

* cleanup billing management

* allow multiple dev windows

* fix: settings scroll

* feat: show nice video thumbnail in listview

* feat: implement freemium restrictions

* remove unnecessary comments

* refactor

* docs

* format

* tweak network settings better hierarchy

js/src/features/compose/compose-overlay.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
 import { toast } from "sonner";
 import { useAuthStore } from "@/stores/auth-store";
-import { useCreateParticle, useCreateStreamParticle } from "@/hooks/use-create-particle";
+import { QuotaExceededError, useCreateParticle, useCreateStreamParticle } from "@/hooks/use-create-particle";
+import { isUsageExhausted, useInvalidateNetworkUsage, useNetworkUsage } from "@/hooks/use-network-usage";
 import { useRecorder } from "@/features/compose/use-recorder";
 import { useScreenRecorder } from "@/features/compose/use-screen-recorder";
 import { particlePath, parseParticlePath } from "@/lib/particle-path";
@@ -70,12 +71,17 @@ export function ComposeOverlay({
   const userId = useAuthStore((s) => s.user?.id);
   const createParticle = useCreateParticle();
   const createStream = useCreateStreamParticle();
+  const { data: usage } = useNetworkUsage(networkId);
+  const invalidateUsage = useInvalidateNetworkUsage();
+  const quotaExhausted = isUsageExhausted(usage);
 
   // Refs for synchronous reads in keyboard handlers
   const stepRef = useRef(step);
   const recordStartRef = useRef(0);
   const disabledRef = useRef(disabled);
   disabledRef.current = disabled;
+  const quotaExhaustedRef = useRef(quotaExhausted);
+  quotaExhaustedRef.current = quotaExhausted;
   const recordingSourceRef = useRef(recordingSource);
   recordingSourceRef.current = recordingSource;
 
@@ -88,7 +94,12 @@ export function ComposeOverlay({
   useEffect(() => {
     onActiveChange?.(step !== "idle");
     onStepChange?.(step);
-  }, [step, onActiveChange, onStepChange]);
+    // Refresh quota when the overlay activates — user is about to send, so
+    // we want the most accurate count before the client-side gate kicks in.
+    if (step !== "idle") {
+      void invalidateUsage(networkId);
+    }
+  }, [step, onActiveChange, onStepChange, invalidateUsage, networkId]);
 
   const revokeAttachmentThumbnails = useCallback((items: PendingAttachment[]) => {
     for (const a of items) {
@@ -334,12 +345,25 @@ export function ComposeOverlay({
     ],
   );
 
+  const handleQuotaError = useCallback((err: unknown): boolean => {
+    if (err instanceof QuotaExceededError) {
+      toast.error("Daily message limit reached. Upgrade to Pro to keep sending.");
+      cancel();
+      return true;
+    }
+    return false;
+  }, [cancel]);
+
   // Reply mode: create particle directly under targetPath
   const onSubmitReply = useEffectEvent(async () => {
     if (!targetPath || !userId || stepRef.current === "submitting") return;
     setStepSync("submitting");
-    await createChildParticle(targetPath);
-    cancel();
+    try {
+      await createChildParticle(targetPath);
+      cancel();
+    } catch (err) {
+      if (!handleQuotaError(err)) throw err;
+    }
   });
 
   // New stream mode: create stream + first child
@@ -348,21 +372,25 @@ export function ComposeOverlay({
       if (!userId || stepRef.current === "submitting") return;
       setStepSync("submitting");
 
-      const streamId = await createStream.mutateAsync({
-        networkId,
-        properties: {
-          name: streamName,
-        },
-        createdByHumanId: userId,
-        visibleTo,
-      });
+      try {
+        const streamId = await createStream.mutateAsync({
+          networkId,
+          properties: {
+            name: streamName,
+          },
+          createdByHumanId: userId,
+          visibleTo,
+        });
 
-      const streamChildrenPath = particlePath(networkId, [streamId]);
-      await createChildParticle(streamChildrenPath);
+        const streamChildrenPath = particlePath(networkId, [streamId]);
+        await createChildParticle(streamChildrenPath);
 
-      cancel();
+        cancel();
+      } catch (err) {
+        if (!handleQuotaError(err)) throw err;
+      }
     },
-    [networkId, userId, createParticle, createChildParticle, cancel],
+    [networkId, userId, createStream, createChildParticle, cancel, handleQuotaError],
   );
 
   // --- Keyboard handling ---
@@ -397,6 +425,13 @@ export function ComposeOverlay({
             }
             break;
           }
+          if (quotaExhaustedRef.current) {
+            if ((e.key === "`" && !e.repeat) || e.key === "t" || e.key === "T" || e.key === "s" || e.key === "S") {
+              e.preventDefault();
+              toast.info("Daily message limit reached. Upgrade to Pro to keep sending.");
+            }
+            break;
+          }
           if (e.key === "`" && !e.repeat) {
             e.preventDefault();
             recordStartRef.current = Date.now();

js/src/features/compose/compose-quota-indicator.tsx

@@ -0,0 +1,94 @@
+import { useNavigate } from "react-router-dom";
+import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+import { useNetworkUsage } from "@/hooks/use-network-usage";
+import { useIsNetworkAdmin, useNetwork } from "@/hooks/use-networks";
+
+interface ComposeQuotaIndicatorProps {
+  networkId: string;
+}
+
+const SHOW_PROGRESS_AT_FRACTION = 0.7;
+
+/**
+ * Surfaces freemium quota state near compose:
+ *   - Nothing below 70% used (avoid nagging).
+ *   - A subtle progress pill between 70% and the limit.
+ *   - A locked banner with an upgrade CTA once the limit is hit.
+ *
+ * Pro networks and any network still loading usage render nothing.
+ */
+export function ComposeQuotaIndicator({ networkId }: ComposeQuotaIndicatorProps) {
+  const navigate = useNavigate();
+  const { data: usage } = useNetworkUsage(networkId);
+  const isAdmin = useIsNetworkAdmin(networkId);
+  const network = useNetwork(networkId);
+
+  if (!usage || usage.limit == null) return null;
+
+  const fraction = usage.used / usage.limit;
+  const exhausted = usage.used >= usage.limit;
+
+  if (exhausted) {
+    return (
+      <div className="pointer-events-auto flex max-w-md flex-col items-center gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 text-center shadow-lg backdrop-blur">
+        <div className="text-sm font-medium">
+          {isAdmin
+            ? `You've reached today's ${usage.limit}-message limit`
+            : `This network reached today's ${usage.limit}-message limit`}
+        </div>
+        <div className="text-xs text-muted-foreground">
+          Resets {formatResetRelative(usage.reset_at)} ({formatResetAbsolute(usage.reset_at)})
+        </div>
+        {isAdmin ? (
+          <Button
+            size="sm"
+            onClick={() => navigate(`/${networkId}/settings?section=billing`)}
+          >
+            Upgrade to Pro
+          </Button>
+        ) : (
+          <div className="text-xs text-muted-foreground">
+            Ask{" "}
+            <span className="font-medium text-foreground">
+              {network?.admin_human.email_prefix ?? "your admin"}
+            </span>{" "}
+            to upgrade to Pro
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (fraction < SHOW_PROGRESS_AT_FRACTION) return null;
+
+  return (
+    <div
+      className="pointer-events-auto flex items-center gap-3 rounded-full border border-border bg-background/90 px-3 py-1.5 text-xs text-muted-foreground shadow-sm backdrop-blur"
+      title={`Resets ${formatResetRelative(usage.reset_at)} at ${formatResetAbsolute(usage.reset_at)}`}
+    >
+      <span className="tabular-nums">
+        {usage.used}/{usage.limit} today
+      </span>
+      <Progress value={fraction * 100} className="h-1 w-24" />
+    </div>
+  );
+}
+
+function formatResetRelative(resetAt: Date): string {
+  const now = new Date();
+  const diffMs = resetAt.getTime() - now.getTime();
+  const hours = Math.max(0, Math.round(diffMs / (60 * 60 * 1000)));
+  if (hours < 1) return "soon";
+  if (hours === 1) return "in 1 hour";
+  return `in ${hours} hours`;
+}
+
+function formatResetAbsolute(resetAt: Date): string {
+  // Shows the user their local wall-clock time for the UTC-midnight reset,
+  // so a user in UTC-8 sees "4:00 PM" instead of a relative hint alone.
+  return resetAt.toLocaleTimeString(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}