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/AGENTS.md

@@ -0,0 +1,9 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->

app/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

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

@@ -6,13 +6,13 @@ const nextConfig: NextConfig = {
   // needs into .next/standalone instead of shipping full node_modules.
   output: "standalone",
   serverExternalPackages: ["node:sqlite"],
-  // Codespaces, Cloudflare Tunnel, and other dev proxies serve the app
+  // Cloudflare Tunnel and other dev proxies serve the app
   // through a forwarded https:// URL rather than localhost. Next.js
   // Server Actions reject requests whose Origin doesn't match the host
   // 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/package.json

@@ -21,10 +21,11 @@
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
-    "typescript": "^5.7.2",
-    "vitest": "^4.1.11",
     "eslint": "^9.17.0",
-    "eslint-config-next": "^16.3.1"
+    "eslint-config-next": "^16.3.1",
+    "playwright": "^1.62.1",
+    "typescript": "^5.7.2",
+    "vitest": "^4.1.11"
   },
   "engines": {
     "node": ">=22.5.0"

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

@@ -1,12 +1,14 @@
 import type { Answer, Ask } from "@/lib/asks";
 import { AnswerForm } from "./AnswerForm";
 
+/** Formats an ISO date string as a short locale date for display in ask cards. */
 function formatDate(iso: string): string {
   const date = new Date(iso);
   if (Number.isNaN(date.getTime())) return iso;
   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,10 +87,12 @@ 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");
 
   setReachableForAsks(viewer.id, reachable);
   revalidatePath("/asks");
+  revalidatePath("/asks/mine");
 }

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/friends/[handle]/page.tsx

@@ -9,6 +9,7 @@ interface Props {
   params: Promise<{ handle: string }>;
 }
 
+/** Server page listing direct friends and one additional connection hop for *handle*, enforcing visibility and block rules. */
 export default async function ExploreFriendsPage({ params }: Props) {
   const { handle: rawHandle } = await params;
   const handle = rawHandle.trim().toLowerCase();

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,25 +5,26 @@ 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);
 
   return (
-    <form action={formAction} className="aim-composer">
+    <form action={formAction} className="msg-composer">
       {state.error && (
         <div className="error-banner" role="alert">
           {state.error}
         </div>
       )}
-      <div className="aim-composer-row">
-        <textarea
-          name="body"
-          rows={2}
-          maxLength={4000}
-          placeholder={`Message ${recipientHandle}...`}
-          required
-        />
+      <textarea
+        name="body"
+        rows={3}
+        maxLength={4000}
+        placeholder={`Message ${recipientHandle}...`}
+        required
+      />
+      <div className="msg-composer-actions">
         <button type="submit" className="btn" disabled={pending}>
           {pending ? "Sending…" : "Send"}
         </button>

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

@@ -11,10 +11,11 @@ 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();
-  if (!viewer) redirect(`/login?next=/messages`);
+  if (!viewer) redirect(`/login?next=${encodeURIComponent(`/messages/${rawParam}`)}`);
 
   const handle = parseHandleParam(rawParam);
   if (!handle) notFound();
@@ -35,36 +36,32 @@ export default async function MessageThreadPage({ params }: Props) {
   }
 
   return (
-    <main className="container aim-page">
-      <div className="aim-window">
-        <div className="aim-titlebar">
-          <Link href="/messages" className="aim-back">
-            ◂
-          </Link>
-          <span>{handle}</span>
-        </div>
-        <div className="aim-window-body">
-          {blocked ? (
-            <p className="aim-empty">You can&apos;t message this person.</p>
-          ) : (
-            <>
-              <div className="aim-thread">
-                {messages.length === 0 ? (
-                  <p className="aim-empty">No messages yet. Say hi.</p>
-                ) : (
-                  messages.map((m) => (
-                    <p key={m.id} className={m.senderId === viewer.id ? "aim-msg aim-msg-mine" : "aim-msg"}>
-                      <span className="aim-msg-from mono">{m.senderId === viewer.id ? viewer.handle : handle}:</span>{" "}
-                      {m.body}
-                    </p>
-                  ))
-                )}
-              </div>
-              <ThreadComposer recipientHandle={handle} />
-            </>
-          )}
-        </div>
+    <main className="container">
+      <div className="msg-thread-header">
+        <Link href="/messages" className="msg-back">
+          ← Back
+        </Link>
+        <h1>{handle}</h1>
       </div>
+      {blocked ? (
+        <p className="msg-empty">You can&apos;t message this person.</p>
+      ) : (
+        <>
+          <div className="msg-thread">
+            {messages.length === 0 ? (
+              <p className="msg-empty">No messages yet. Say hi.</p>
+            ) : (
+              messages.map((m) => (
+                <p key={m.id} className={m.senderId === viewer.id ? "msg-line msg-line-mine" : "msg-line"}>
+                  <span className="msg-sender">{m.senderId === viewer.id ? viewer.handle : handle}:</span>{" "}
+                  {m.body}
+                </p>
+              ))
+            )}
+          </div>
+          <ThreadComposer recipientHandle={handle} />
+        </>
+      )}
     </main>
   );
 }

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");