UI overhaul: black/white graffiti theme, messenger redesign, logo + font

app/.dockerignore

@@ -5,7 +5,6 @@ out
 *.db-journal
 *.db-wal
 *.db-shm
-.env
-.env.local
+.env*
 coverage
 .git

app/Dockerfile

@@ -1,7 +1,7 @@
 # Multi-stage build for a small, self-contained production image.
 # Needs Node 22.5+ for node:sqlite (same requirement as local dev).
 
-FROM node:22-slim AS base
+FROM node:22.13-slim AS base
 
 FROM base AS deps
 WORKDIR /app

app/next.config.ts

@@ -12,7 +12,7 @@ const nextConfig: NextConfig = {
   // it's running on unless that origin is explicitly allowed here.
   experimental: {
     serverActions: {
-      allowedOrigins: ["localhost:3000", "*.app.github.dev", "*.trycloudflare.com"],
+      allowedOrigins: ["localhost:3000", "*.trycloudflare.com"],
     },
   },
 };

app/src/app/(platform)/asks/AnswerForm.tsx

@@ -5,6 +5,7 @@ import { answerAskAction, type AskActionState } from "./actions";
 
 const initialState: AskActionState = {};
 
+/** Form that lets the page owner submit an answer to a specific ask. */
 export function AnswerForm({ askId }: { askId: string }) {
   const boundAction = answerAskAction.bind(null, askId);
   const [state, formAction, pending] = useActionState(boundAction, initialState);

app/src/app/(platform)/asks/AskCard.tsx

@@ -7,6 +7,7 @@ function formatDate(iso: string): string {
   return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
 
+/** Renders a single ask with its answers and, for the page owner, an answer form. */
 export function AskCard({
   ask,
   answers,

app/src/app/(platform)/asks/AskForm.tsx

@@ -5,6 +5,7 @@ import { createAskAction, type AskActionState } from "./actions";
 
 const initialState: AskActionState = {};
 
+/** Form that lets a viewer submit a new ask to the current page owner. */
 export function AskForm() {
   const [state, formAction, pending] = useActionState(createAskAction, initialState);
 

app/src/app/(platform)/asks/actions.ts

@@ -17,12 +17,14 @@ export interface AskActionState {
   success?: string;
 }
 
+/** Maps AskError and RateLimitError to user-facing state; re-throws anything else. */
 function handleAskError(e: unknown): never | AskActionState {
   if (e instanceof AskError) return { error: e.message };
   if (e instanceof RateLimitError) return { error: e.message };
   throw e;
 }
 
+/** Server action: validate and submit a new ask for the signed-in viewer. */
 export async function createAskAction(
   _prevState: AskActionState,
   formData: FormData,
@@ -36,8 +38,6 @@ export async function createAskAction(
   const isSensitive = formData.get("sensitive") === "on";
 
   try {
-    const key = await rateLimitActorKey("ask-view", viewer.id);
-    checkRateLimit(key, 20);
     createAsk({ askerId: viewer.id, body, domain, isAnonymous, isSensitive });
   } catch (e) {
     return handleAskError(e);
@@ -48,6 +48,7 @@ export async function createAskAction(
   return { success: "Your ask is posted." };
 }
 
+/** Server action: submit an answer to *askId* from the signed-in viewer. */
 export async function answerAskAction(
   askId: string,
   _prevState: AskActionState,
@@ -70,6 +71,7 @@ export async function answerAskAction(
   return { success: "Your answer is posted." };
 }
 
+/** Server action: close *askId* — only the original asker may do this. */
 export async function closeAskAction(askId: string): Promise<void> {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/asks/mine");
@@ -85,6 +87,7 @@ export async function closeAskAction(askId: string): Promise<void> {
   revalidatePath("/asks/mine");
 }
 
+/** Server action: opt the signed-in viewer in or out of the ask pool. */
 export async function setReachableAction(reachable: boolean): Promise<void> {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/asks");

app/src/app/(platform)/asks/mine/page.tsx

@@ -4,6 +4,7 @@ import { listAnswers, listAsksByUser } from "@/lib/asks";
 import { getCurrentUser } from "@/lib/session";
 import { closeAskAction } from "../actions";
 
+/** Server page showing the signed-in user's own asks and their statuses. */
 export default async function MyAsksPage() {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/asks/mine");

app/src/app/(platform)/asks/page.tsx

@@ -6,6 +6,7 @@ import { setReachableAction } from "./actions";
 import { AskCard } from "./AskCard";
 import { AskForm } from "./AskForm";
 
+/** Server page rendering the public Ask Us pool, with the ask form for signed-in users. */
 export default async function AsksPage() {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/asks");

app/src/app/(platform)/explore/page.tsx

@@ -14,6 +14,7 @@ interface Props {
   searchParams: Promise<{ q?: string }>;
 }
 
+/** Server page for the public Explore/discovery feed, with tag and text search. */
 export default async function ExplorePage({ searchParams }: Props) {
   ensureSeedRings();
   ensureSeedCollections();

app/src/app/(platform)/make/actions.ts

@@ -18,6 +18,7 @@ export interface MakeState {
   error?: string;
 }
 
+/** Server action for the page-creation wizard. Validates template and display name, builds and saves the page document, then redirects to the new profile. */
 export async function makeFlowAction(_prevState: MakeState, formData: FormData): Promise<MakeState> {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/make");

app/src/app/(platform)/messages/[handle]/ThreadComposer.tsx

@@ -5,6 +5,7 @@ import { sendMessageAction, type SendMessageState } from "../actions";
 
 const initialState: SendMessageState = {};
 
+/** Message-composition form for a direct-message thread with *recipientHandle*. */
 export function ThreadComposer({ recipientHandle }: { recipientHandle: string }) {
   const boundAction = sendMessageAction.bind(null, recipientHandle);
   const [state, formAction, pending] = useActionState(boundAction, initialState);

app/src/app/(platform)/messages/[handle]/page.tsx

@@ -11,6 +11,7 @@ interface Props {
   params: Promise<{ handle: string }>;
 }
 
+/** Server page rendering the direct-message thread between the signed-in user and the profile at *handle*. */
 export default async function MessageThreadPage({ params }: Props) {
   const { handle: rawParam } = await params;
   const viewer = await getCurrentUser();

app/src/app/(platform)/messages/actions.ts

@@ -11,6 +11,7 @@ export interface SendMessageState {
   error?: string;
 }
 
+/** Server action: send a message to *recipientHandle* from the signed-in viewer. */
 export async function sendMessageAction(
   recipientHandle: string,
   _prevState: SendMessageState,
@@ -38,6 +39,7 @@ export async function sendMessageAction(
   return {};
 }
 
+/** Server action: mark all unread messages in *conversationId* as read for the viewer. */
 export async function markConversationReadAction(conversationId: string): Promise<void> {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/messages");

app/src/app/(platform)/messages/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { getCurrentUser } from "@/lib/session";
 import { listConversations } from "@/lib/messages";
 
+/** Server page listing all direct-message conversations for the signed-in user. */
 export default async function MessagesPage() {
   const viewer = await getCurrentUser();
   if (!viewer) redirect("/login?next=/messages");

app/src/app/(platform)/page.tsx

@@ -41,6 +41,7 @@ const STEPS = [
   { label: "Wander", desc: "Discover other pages, no feed required" },
 ];
 
+/** Server page rendering the platform landing page — signed-in users see their dashboard, visitors see the public feature overview. */
 export default async function HomePage() {
   const viewer = await getCurrentUser();
 

app/src/app/(platform)/studio/StudioClient.tsx

@@ -111,6 +111,7 @@ function defaultPixelArtPiece(): PixelArtPiece {
   };
 }
 
+/** Interactive client component for the page editor Studio, managing draft state, live preview, and all module editors. */
 export function StudioClient({
   initialDocument,
   publishedDocument,

app/src/app/[handle]/page.tsx

@@ -35,6 +35,7 @@ function resolveTopEight(handles: string[]): TopEightLink[] {
   return links;
 }
 
+/** Server page for a user's public profile at `/@handle`, enforcing visibility and block rules before rendering. */
 export default async function ProfilePage({ params, searchParams }: Props) {
   const { handle: rawParam } = await params;
   const { reader, preview } = await searchParams;

app/src/app/globals.css

@@ -2575,7 +2575,7 @@ select {
   margin: 0;
   font-size: 0.9rem;
   line-height: 1.4;
-  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .aim-msg-from {

app/src/components/PageRenderer.tsx

@@ -17,6 +17,7 @@ interface Props {
   topEightLinks: TopEightLink[];
 }
 
+/** Renders all enabled page modules for a user's profile page, applying the stored theme as inline CSS variables. */
 export function PageRenderer({
   document,
   friends,
@@ -35,13 +36,24 @@ export function PageRenderer({
         "--page-bg": document.theme.background,
         "--page-ink": ink,
         "--page-ink-soft": inkSoft,
-        ...(document.theme.backgroundImageUrl
-          ? {
-              "--page-bg-image": `url("${document.theme.backgroundImageUrl}")`,
-              "--page-bg-repeat": document.theme.backgroundTile ? "repeat" : "no-repeat",
-              "--page-bg-size": document.theme.backgroundTile ? "auto" : "cover",
-            }
-          : {}),
+        ...(() => {
+          const raw = document.theme.backgroundImageUrl;
+          if (!raw) return {};
+          let href: string;
+          try {
+            // Normalize through URL to strip any funny business, then
+            // encode backslashes so CSS hex-escape sequences in the href
+            // (e.g. \000022 → ") can't break out of the quoted url().
+            href = new URL(raw).href.replace(/\\/g, "%5C");
+          } catch {
+            return {};
+          }
+          return {
+            "--page-bg-image": `url("${href}")`,
+            "--page-bg-repeat": document.theme.backgroundTile ? "repeat" : "no-repeat",
+            "--page-bg-size": document.theme.backgroundTile ? "auto" : "cover",
+          };
+        })(),
       } as React.CSSProperties);
 
   const bodyClasses = [

app/src/components/SiteNav.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link";
 import { getCurrentUser } from "@/lib/session";
 import { isModerator } from "@/lib/moderation";
-import { listIncomingRequests } from "@/lib/friends";
-import { listPendingGuestbookEntries } from "@/lib/guestbook";
+import { countIncomingRequests } from "@/lib/friends";
+import { countPendingGuestbookEntries } from "@/lib/guestbook";
 import { countUnreadMessages } from "@/lib/messages";
 
 // Six screens, per the plan: Explore, Make, Ask Us, Messages, Studio,
@@ -21,11 +21,12 @@ import { countUnreadMessages } from "@/lib/messages";
 // until you happen to click in — confirmed as a real dead end during
 // live testing, not a hypothetical. These are count badges on existing
 // links, not a notification center.
+/** Server component that renders the site navigation bar with pending-activity badges for the signed-in user. */
 export async function SiteNav() {
   const viewer = await getCurrentUser();
   const moderator = viewer ? isModerator(viewer.id) : false;
   const pendingCount = viewer
-    ? listIncomingRequests(viewer.id).length + listPendingGuestbookEntries(viewer.id).length
+    ? countIncomingRequests(viewer.id) + countPendingGuestbookEntries(viewer.id)
     : 0;
   const unreadMessages = viewer ? countUnreadMessages(viewer.id) : 0;
 

app/src/lib/asks.ts

@@ -25,7 +25,7 @@ const POOL_SIZE = 8;
 
 export interface Ask {
   id: string;
-  askerId: string;
+  askerId: string | null; // null for anonymous asks when viewer is not the owner
   askerHandle: string | null; // null when anonymous — never leaked to non-owners
   body: string;
   domain: string | null;
@@ -54,7 +54,7 @@ function rowToAsk(row: AskRow, viewerId: string | null): Ask {
   const anonymous = row.is_anonymous === 1;
   return {
     id: row.id,
-    askerId: row.asker_id,
+    askerId: anonymous && !isOwner ? null : row.asker_id,
     askerHandle: anonymous && !isOwner ? null : row.asker_handle,
     body: row.body,
     domain: row.domain,
@@ -73,11 +73,20 @@ const SELECT_ASK = `
   FROM asks a JOIN users u ON u.id = a.asker_id
 `;
 
-/** Opt in or out of being reachable by strangers' asks. Off by default. */
+/** Opt in or out of being reachable by strangers' asks. Off by default.
+ *  When disabling, also closes the user's existing open non-sensitive asks
+ *  so they stop appearing in other members' pools immediately. */
 export function setReachableForAsks(userId: string, reachable: boolean): void {
-  getDb().prepare("UPDATE users SET reachable_for_asks = ? WHERE id = ?").run(reachable ? 1 : 0, userId);
+  const db = getDb();
+  db.prepare("UPDATE users SET reachable_for_asks = ? WHERE id = ?").run(reachable ? 1 : 0, userId);
+  if (!reachable) {
+    db.prepare(
+      "UPDATE asks SET status = 'closed', closed_at = ? WHERE asker_id = ? AND status = 'open' AND is_sensitive = 0",
+    ).run(new Date().toISOString(), userId);
+  }
 }
 
+/** Returns true if *userId* has opted in to receiving strangers' asks. */
 export function isReachableForAsks(userId: string): boolean {
   const row = getDb().prepare("SELECT reachable_for_asks FROM users WHERE id = ?").get(userId) as
     | { reachable_for_asks: number }
@@ -93,6 +102,7 @@ export interface CreateAskInput {
   isSensitive?: boolean;
 }
 
+/** Validate and persist a new ask. Throws AskError on validation failure, RateLimitError when the daily cap is reached. */
 export function createAsk(input: CreateAskInput): Ask {
   const body = input.body.trim();
   if (!body) throw new AskError("Your ask can't be empty.");
@@ -154,7 +164,7 @@ export function listAsksForViewer(viewerId: string, domain?: string): Ask[] {
     .map((row) => rowToAsk(row, viewerId));
 }
 
-/** All asks a member has posted, for their own "My asks" view. */
+/** All asks *askerId* has posted, for their own "My asks" view, newest first. */
 export function listAsksByUser(askerId: string): Ask[] {
   const db = getDb();
   const rows = db
@@ -163,6 +173,7 @@ export function listAsksByUser(askerId: string): Ask[] {
   return rows.map((row) => rowToAsk(row, askerId));
 }
 
+/** Fetch a single ask by id, applying the same anonymity rules as listAsksForViewer. Returns null when not found. */
 export function getAsk(askId: string, viewerId: string | null): Ask | null {
   const row = getDb().prepare(`${SELECT_ASK} WHERE a.id = ?`).get(askId) as unknown as AskRow | undefined;
   return row ? rowToAsk(row, viewerId) : null;
@@ -177,6 +188,7 @@ export interface Answer {
   createdAt: string;
 }
 
+/** All answers for *askId*, oldest first. */
 export function listAnswers(askId: string): Answer[] {
   const rows = getDb()
     .prepare(
@@ -196,6 +208,7 @@ export function listAnswers(askId: string): Answer[] {
   }));
 }
 
+/** Submit *answererId*'s answer to *askId*. Re-validates eligibility at write time. Throws AskError on auth/validation failure. */
 export function answerAsk(askId: string, answererId: string, body: string): Answer {
   const trimmed = body.trim();
   if (!trimmed) throw new AskError("Your answer can't be empty.");
@@ -204,8 +217,8 @@ export function answerAsk(askId: string, answererId: string, body: string): Answ
   }
 
   const db = getDb();
-  const ask = db.prepare("SELECT asker_id, status FROM asks WHERE id = ?").get(askId) as
-    | { asker_id: string; status: string }
+  const ask = db.prepare("SELECT asker_id, status, is_sensitive FROM asks WHERE id = ?").get(askId) as
+    | { asker_id: string; status: string; is_sensitive: number }
     | undefined;
   if (!ask) throw new AskError("This ask no longer exists.");
   if (ask.status !== "open") throw new AskError("This ask is closed.");
@@ -214,6 +227,27 @@ export function answerAsk(askId: string, answererId: string, body: string): Answ
     throw new AskError("You can't answer this ask.");
   }
 
+  // Re-check the same eligibility rules as listAsksForViewer on this write path.
+  // A user can submit a previously rendered form after their eligibility changes.
+  if (ask.is_sensitive === 0) {
+    const reachable = db.prepare("SELECT reachable_for_asks FROM users WHERE id = ?").get(answererId) as
+      | { reachable_for_asks: number }
+      | undefined;
+    if (!reachable || reachable.reachable_for_asks !== 1) {
+      throw new AskError("You can't answer this ask.");
+    }
+  } else {
+    const friendship = db
+      .prepare(
+        `SELECT 1 FROM friend_links WHERE status = 'accepted'
+         AND ((requester_id = ? AND addressee_id = ?) OR (addressee_id = ? AND requester_id = ?))`,
+      )
+      .get(ask.asker_id, answererId, ask.asker_id, answererId);
+    if (!friendship) {
+      throw new AskError("You can't answer this ask.");
+    }
+  }
+
   const existing = db
     .prepare("SELECT 1 FROM ask_answers WHERE ask_id = ? AND answerer_id = ?")
     .get(askId, answererId);
@@ -235,6 +269,7 @@ export function answerAsk(askId: string, answererId: string, body: string): Answ
   };
 }
 
+/** Close *askId* so it no longer appears in the pool. Only the original asker may do this. Idempotent. */
 export function closeAsk(askId: string, askerId: string): void {
   const db = getDb();
   const row = db.prepare("SELECT asker_id, status FROM asks WHERE id = ?").get(askId) as