Add site footer and switch display font to Sora, bump to 0.5.0

Adds a Footer component (credit line, repo/buttplug.io links) below main
content on all app pages, with the layout shell now flex-column so it
sticks to the bottom on short pages. Also swaps the display font from
Space Grotesk to Sora (after trying Fraunces, a serif, which didn't fit).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/(app)/layout.tsx

@@ -1,10 +1,16 @@
 import { NavBar } from "@/components/layout/NavBar";
+import { Breadcrumbs } from "@/components/layout/Breadcrumbs";
+import { Footer } from "@/components/layout/Footer";
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-dvh">
+    <div className="flex min-h-dvh flex-col">
       <NavBar />
-      <main className="mx-auto max-w-6xl px-4 py-8">{children}</main>
+      <main className="mx-auto w-full max-w-6xl flex-1 px-4 py-8">
+        <Breadcrumbs />
+        {children}
+      </main>
+      <Footer />
     </div>
   );
 }

app/(app)/page.tsx

@@ -24,8 +24,8 @@ export default async function DashboardPage() {
     <div className="flex flex-col gap-8">
       <Card className="bp-glass overflow-hidden">
         <CardContent className="flex flex-col items-start gap-4 py-8">
-          <BrandMark size={40} className="bp-pulse rounded-[9px]" />
+          <BrandMark size={48} animated className="rounded-[9px]" />
-          <h1 className="font-heading bp-gradient-text text-3xl font-semibold">Welcome back</h1>
+          <h1 className="font-heading text-3xl font-semibold">Welcome back</h1>
           <p className="max-w-xl text-sm text-muted-foreground">
             Scan for nearby devices, take control, and record sessions to replay later - all running
             directly from your browser over Web Bluetooth.

app/(app)/stats/page.tsx

@@ -27,7 +27,7 @@ export default async function StatsPage() {
       </div>
 
       <Tabs defaultValue="sessions">
-        <TabsList>
+        <TabsList className="bp-glass">
           <TabsTrigger value="sessions">Sessions</TabsTrigger>
           <TabsTrigger value="devices">Devices</TabsTrigger>
           <TabsTrigger value="recordings">Recordings</TabsTrigger>

app/api/auth/login/route.ts

@@ -3,21 +3,26 @@ import { z } from "zod";
 import { getEnv } from "@/lib/env";
 import { timingSafeStringEqual } from "@/lib/auth/timing-safe-compare";
 import { createSessionToken, sessionCookieOptions } from "@/lib/auth/session";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
+import { createLogger } from "@/lib/logger";
 
+const log = createLogger("auth");
 const bodySchema = z.object({ secret: z.string().min(1) });
 
-export async function POST(req: Request) {
+export const POST = withRouteLogging("auth.login", async (req: Request) => {
   const parsed = bodySchema.safeParse(await req.json().catch(() => null));
   if (!parsed.success) {
     return NextResponse.json({ error: "secret is required" }, { status: 400 });
   }
 
   if (!timingSafeStringEqual(parsed.data.secret, getEnv().ACCESS_PASSWORD)) {
+    log.warn("login attempt with invalid secret");
     return NextResponse.json({ error: "invalid secret" }, { status: 401 });
   }
 
+  log.info("login succeeded");
   const token = await createSessionToken();
   const res = NextResponse.json({ ok: true });
   res.cookies.set({ ...sessionCookieOptions, value: token });
   return res;
-}
+});

app/api/auth/logout/route.ts

@@ -1,8 +1,9 @@
 import { NextResponse } from "next/server";
 import { SESSION_COOKIE_NAME } from "@/lib/auth/session";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
-export async function POST() {
+export const POST = withRouteLogging("auth.logout", async () => {
   const res = NextResponse.json({ ok: true });
   res.cookies.delete(SESSION_COOKIE_NAME);
   return res;
-}
+});

app/api/devices/[id]/route.ts

@@ -1,16 +1,20 @@
 import { NextResponse } from "next/server";
 import { z } from "zod";
 import { renameDevice } from "@/lib/db/queries/devices";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
 const bodySchema = z.object({ displayName: z.string().min(1).max(120) });
 
-export async function PATCH(req: Request, { params }: { params: Promise<{ id: string }> }) {
+export const PATCH = withRouteLogging(
-  const { id } = await params;
+  "devices.rename",
-  const parsed = bodySchema.safeParse(await req.json().catch(() => null));
+  async (req: Request, { params }: { params: Promise<{ id: string }> }) => {
-  if (!parsed.success) {
+    const { id } = await params;
-    return NextResponse.json({ error: "displayName is required" }, { status: 400 });
+    const parsed = bodySchema.safeParse(await req.json().catch(() => null));
-  }
+    if (!parsed.success) {
-  const updated = await renameDevice(Number(id), parsed.data.displayName);
+      return NextResponse.json({ error: "displayName is required" }, { status: 400 });
-  if (!updated) return NextResponse.json({ error: "not found" }, { status: 404 });
+    }
-  return NextResponse.json({ device: updated });
+    const updated = await renameDevice(Number(id), parsed.data.displayName);
-}
+    if (!updated) return NextResponse.json({ error: "not found" }, { status: 404 });
+    return NextResponse.json({ device: updated });
+  },
+);

app/api/devices/route.ts

@@ -1,7 +1,8 @@
 import { NextResponse } from "next/server";
 import { listDevices } from "@/lib/db/queries/devices";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
-export async function GET() {
+export const GET = withRouteLogging("devices.list", async () => {
   const rows = await listDevices();
   return NextResponse.json({ devices: rows });
-}
+});

app/api/health/route.ts

@@ -1,11 +1,16 @@
 import { NextResponse } from "next/server";
 import { sqlite } from "@/lib/db/client";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
+import { createLogger } from "@/lib/logger";
 
-export async function GET() {
+const log = createLogger("health");
+
+export const GET = withRouteLogging("health.check", async () => {
   try {
     sqlite.prepare("select 1").get();
     return NextResponse.json({ status: "ok" });
-  } catch {
+  } catch (err) {
+    log.error("health check failed", { error: err instanceof Error ? err.message : String(err) });
     return NextResponse.json({ status: "error" }, { status: 500 });
   }
-}
+});

app/api/play-sessions/[id]/events/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { z } from "zod";
 import { insertEvents } from "@/lib/db/queries/session-events";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
 const eventSchema = z.object({
   sessionDeviceId: z.number().int().positive(),
@@ -13,12 +14,15 @@ const eventSchema = z.object({
 
 const bodySchema = z.object({ events: z.array(eventSchema).max(2000) });
 
-export async function POST(req: Request, { params }: { params: Promise<{ id: string }> }) {
+export const POST = withRouteLogging(
-  const { id } = await params;
+  "play-sessions.events.append",
-  const parsed = bodySchema.safeParse(await req.json().catch(() => null));
+  async (req: Request, { params }: { params: Promise<{ id: string }> }) => {
-  if (!parsed.success) {
+    const { id } = await params;
-    return NextResponse.json({ error: parsed.error.message }, { status: 400 });
+    const parsed = bodySchema.safeParse(await req.json().catch(() => null));
-  }
+    if (!parsed.success) {
-  await insertEvents(Number(id), parsed.data.events);
+      return NextResponse.json({ error: parsed.error.message }, { status: 400 });
-  return NextResponse.json({ inserted: parsed.data.events.length });
+    }
-}
+    await insertEvents(Number(id), parsed.data.events);
+    return NextResponse.json({ inserted: parsed.data.events.length });
+  },
+);

app/api/play-sessions/[id]/route.ts

@@ -2,42 +2,55 @@ import { NextResponse } from "next/server";
 import { z } from "zod";
 import { deletePlaySession, endPlaySession, getPlaySessionDetail } from "@/lib/db/queries/play-sessions";
 import { getRecordingsForSession } from "@/lib/db/queries/recordings";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
+import { createLogger } from "@/lib/logger";
 
+const log = createLogger("play-sessions");
 const patchSchema = z.object({ status: z.enum(["completed", "aborted"]) });
 
-export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+export const GET = withRouteLogging(
-  const { id } = await params;
+  "play-sessions.get",
-  const detail = await getPlaySessionDetail(Number(id));
+  async (_req: Request, { params }: { params: Promise<{ id: string }> }) => {
-  if (!detail) return NextResponse.json({ error: "not found" }, { status: 404 });
+    const { id } = await params;
-  return NextResponse.json(detail);
+    const detail = await getPlaySessionDetail(Number(id));
-}
+    if (!detail) return NextResponse.json({ error: "not found" }, { status: 404 });
+    return NextResponse.json(detail);
+  },
+);
 
-export async function PATCH(req: Request, { params }: { params: Promise<{ id: string }> }) {
+export const PATCH = withRouteLogging(
-  const { id } = await params;
+  "play-sessions.end",
-  const parsed = patchSchema.safeParse(await req.json().catch(() => null));
+  async (req: Request, { params }: { params: Promise<{ id: string }> }) => {
-  if (!parsed.success) {
+    const { id } = await params;
-    return NextResponse.json({ error: "status must be completed or aborted" }, { status: 400 });
+    const parsed = patchSchema.safeParse(await req.json().catch(() => null));
-  }
+    if (!parsed.success) {
-  const updated = await endPlaySession(Number(id), parsed.data);
+      return NextResponse.json({ error: "status must be completed or aborted" }, { status: 400 });
-  if (!updated) return NextResponse.json({ error: "not found" }, { status: 404 });
-  return NextResponse.json({ playSession: updated });
-}
-
-export async function DELETE(req: Request, { params }: { params: Promise<{ id: string }> }) {
-  const { id } = await params;
-  const cascade = new URL(req.url).searchParams.get("cascade") === "true";
-  try {
-    await deletePlaySession(Number(id), { cascade });
-    return NextResponse.json({ ok: true });
-  } catch (err) {
-    const message = err instanceof Error ? err.message : String(err);
-    if (message.includes("FOREIGN KEY") || message.includes("SQLITE_CONSTRAINT")) {
-      const blockingRecordings = await getRecordingsForSession(Number(id));
-      return NextResponse.json(
-        { error: "cannot delete a session that a saved recording still references", recordings: blockingRecordings },
-        { status: 409 },
-      );
     }
-    throw err;
+    const updated = await endPlaySession(Number(id), parsed.data);
-  }
+    if (!updated) return NextResponse.json({ error: "not found" }, { status: 404 });
-}
+    return NextResponse.json({ playSession: updated });
+  },
+);
+
+export const DELETE = withRouteLogging(
+  "play-sessions.delete",
+  async (req: Request, { params }: { params: Promise<{ id: string }> }) => {
+    const { id } = await params;
+    const cascade = new URL(req.url).searchParams.get("cascade") === "true";
+    try {
+      await deletePlaySession(Number(id), { cascade });
+      return NextResponse.json({ ok: true });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      if (message.includes("FOREIGN KEY") || message.includes("SQLITE_CONSTRAINT")) {
+        log.warn("blocked session delete due to referencing recording", { sessionId: id, cascade });
+        const blockingRecordings = await getRecordingsForSession(Number(id));
+        return NextResponse.json(
+          { error: "cannot delete a session that a saved recording still references", recordings: blockingRecordings },
+          { status: 409 },
+        );
+      }
+      throw err;
+    }
+  },
+);

app/api/play-sessions/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { z } from "zod";
 import { listPlaySessions, startPlaySession } from "@/lib/db/queries/play-sessions";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
 const deviceInputSchema = z.object({
   slotLabel: z.string().min(1),
@@ -16,16 +17,16 @@ const bodySchema = z.object({
   devices: z.array(deviceInputSchema).min(1),
 });
 
-export async function GET() {
+export const GET = withRouteLogging("play-sessions.list", async () => {
   const rows = await listPlaySessions();
   return NextResponse.json({ playSessions: rows });
-}
+});
 
-export async function POST(req: Request) {
+export const POST = withRouteLogging("play-sessions.start", async (req: Request) => {
   const parsed = bodySchema.safeParse(await req.json().catch(() => null));
   if (!parsed.success) {
     return NextResponse.json({ error: parsed.error.message }, { status: 400 });
   }
   const result = await startPlaySession(parsed.data);
   return NextResponse.json(result, { status: 201 });
-}
+});

app/api/recordings/[id]/route.ts

@@ -1,32 +1,42 @@
 import { NextResponse } from "next/server";
 import { z } from "zod";
 import { deleteRecording, getRecording, renameRecording } from "@/lib/db/queries/recordings";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
 const patchSchema = z.object({
   name: z.string().min(1).max(160).optional(),
   description: z.string().max(2000).optional(),
 });
 
-export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+export const GET = withRouteLogging(
-  const { id } = await params;
+  "recordings.get",
-  const result = await getRecording(Number(id));
+  async (_req: Request, { params }: { params: Promise<{ id: string }> }) => {
-  if (!result) return NextResponse.json({ error: "not found" }, { status: 404 });
+    const { id } = await params;
-  return NextResponse.json(result);
+    const result = await getRecording(Number(id));
-}
+    if (!result) return NextResponse.json({ error: "not found" }, { status: 404 });
+    return NextResponse.json(result);
+  },
+);
 
-export async function PATCH(req: Request, { params }: { params: Promise<{ id: string }> }) {
+export const PATCH = withRouteLogging(
-  const { id } = await params;
+  "recordings.update",
-  const parsed = patchSchema.safeParse(await req.json().catch(() => null));
+  async (req: Request, { params }: { params: Promise<{ id: string }> }) => {
-  if (!parsed.success) {
+    const { id } = await params;
-    return NextResponse.json({ error: "invalid body" }, { status: 400 });
+    const parsed = patchSchema.safeParse(await req.json().catch(() => null));
-  }
+    if (!parsed.success) {
-  const updated = await renameRecording(Number(id), parsed.data);
+      return NextResponse.json({ error: "invalid body" }, { status: 400 });
-  if (!updated) return NextResponse.json({ error: "not found" }, { status: 404 });
+    }
-  return NextResponse.json({ recording: updated });
+    const updated = await renameRecording(Number(id), parsed.data);
-}
+    if (!updated) return NextResponse.json({ error: "not found" }, { status: 404 });
+    return NextResponse.json({ recording: updated });
+  },
+);
 
-export async function DELETE(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+export const DELETE = withRouteLogging(
-  const { id } = await params;
+  "recordings.delete",
-  await deleteRecording(Number(id));
+  async (_req: Request, { params }: { params: Promise<{ id: string }> }) => {
-  return NextResponse.json({ ok: true });
+    const { id } = await params;
-}
+    await deleteRecording(Number(id));
+    return NextResponse.json({ ok: true });
+  },
+);

app/api/recordings/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { z } from "zod";
 import { createRecording, listRecordings } from "@/lib/db/queries/recordings";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
 const bodySchema = z.object({
   sourcePlaySessionId: z.number().int().positive(),
@@ -8,16 +9,16 @@ const bodySchema = z.object({
   description: z.string().max(2000).optional(),
 });
 
-export async function GET() {
+export const GET = withRouteLogging("recordings.list", async () => {
   const rows = await listRecordings();
   return NextResponse.json({ recordings: rows });
-}
+});
 
-export async function POST(req: Request) {
+export const POST = withRouteLogging("recordings.create", async (req: Request) => {
   const parsed = bodySchema.safeParse(await req.json().catch(() => null));
   if (!parsed.success) {
     return NextResponse.json({ error: parsed.error.message }, { status: 400 });
   }
   const recording = await createRecording(parsed.data);
   return NextResponse.json({ recording }, { status: 201 });
-}
+});

app/api/stats/devices/route.ts

@@ -1,9 +1,10 @@
 import { NextResponse } from "next/server";
 import { getDeviceCommandCounts, getDeviceUsageStats } from "@/lib/db/queries/stats";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
-export async function GET() {
+export const GET = withRouteLogging("stats.devices", async () => {
   const [usage, commandCounts] = await Promise.all([getDeviceUsageStats(), getDeviceCommandCounts()]);
   const commandCountByDevice = new Map(commandCounts.map((c) => [c.deviceId, c.commandCount]));
   const devices = usage.map((d) => ({ ...d, commandCount: commandCountByDevice.get(d.deviceId) ?? 0 }));
   return NextResponse.json({ devices });
-}
+});

app/api/stats/recordings/route.ts

@@ -1,7 +1,8 @@
 import { NextResponse } from "next/server";
 import { getRecordingLibraryStats } from "@/lib/db/queries/stats";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
-export async function GET() {
+export const GET = withRouteLogging("stats.recordings", async () => {
   const stats = await getRecordingLibraryStats();
   return NextResponse.json(stats);
-}
+});

app/api/stats/sessions/[id]/timeline/route.ts

@@ -1,9 +1,13 @@
 import { NextResponse } from "next/server";
 import { getSessionTimeline } from "@/lib/db/queries/stats";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
-export async function GET(req: Request, { params }: { params: Promise<{ id: string }> }) {
+export const GET = withRouteLogging(
-  const { id } = await params;
+  "stats.session-timeline",
-  const bucketMs = Number(new URL(req.url).searchParams.get("bucketMs") ?? 1000);
+  async (req: Request, { params }: { params: Promise<{ id: string }> }) => {
-  const timeline = await getSessionTimeline(Number(id), bucketMs);
+    const { id } = await params;
-  return NextResponse.json({ timeline });
+    const bucketMs = Number(new URL(req.url).searchParams.get("bucketMs") ?? 1000);
-}
+    const timeline = await getSessionTimeline(Number(id), bucketMs);
+    return NextResponse.json({ timeline });
+  },
+);

app/api/stats/sessions/route.ts

@@ -1,7 +1,8 @@
 import { NextResponse } from "next/server";
 import { getSessionsSummary } from "@/lib/db/queries/stats";
+import { withRouteLogging } from "@/lib/api/with-route-logging";
 
-export async function GET() {
+export const GET = withRouteLogging("stats.sessions", async () => {
   const summary = await getSessionsSummary();
   return NextResponse.json(summary);
-}
+});

app/globals.css

@@ -127,13 +127,46 @@
     @apply border-border outline-ring/50;
     }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
     }
   html {
     @apply font-sans;
     }
 }
 
+/* Animated signature-sweep background - sits behind everything; cards use
+   .bp-glass (translucent + blurred) so it shines through instead of being
+   fully hidden behind an opaque card surface. */
+body {
+  background-color: var(--background);
+  background-image:
+    radial-gradient(ellipse 80% 60% at 15% 10%, color-mix(in srgb, #ff6fb0 32%, transparent), transparent 60%),
+    radial-gradient(ellipse 70% 60% at 85% 25%, color-mix(in srgb, #4f7fe0 28%, transparent), transparent 60%),
+    radial-gradient(ellipse 75% 65% at 50% 100%, color-mix(in srgb, #b34bde 30%, transparent), transparent 60%);
+  background-repeat: no-repeat;
+  background-size: 140% 140%;
+  background-attachment: fixed;
+  animation: bp-bg-drift 24s ease-in-out infinite;
+}
+
+@keyframes bp-bg-drift {
+  0% {
+    background-position: 0% 0%, 100% 0%, 50% 100%;
+  }
+  50% {
+    background-position: 20% 20%, 80% 30%, 60% 80%;
+  }
+  100% {
+    background-position: 0% 0%, 100% 0%, 50% 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body {
+    animation: none;
+  }
+}
+
 /* Signature pink -> purple -> blue sweep (matches app/icon.svg), used for
    the wordmark and one hero moment - not smeared across every surface. */
 .bp-gradient-text {
@@ -147,17 +180,20 @@
   background: linear-gradient(135deg, #ff6fb0, #b34bde 50%, #4f7fe0);
 }
 
-/* Console-module surface: hairline border + a soft inset top highlight,
+/* Console-module surface: translucent + blurred so the animated background
-   standing in for backdrop-blur glassmorphism. */
+   sweep shines through, with a hairline border and soft inset top highlight. */
 .bp-glass {
-  background: var(--card);
+  background: color-mix(in srgb, var(--card) 55%, transparent);
+  backdrop-filter: blur(20px) saturate(150%);
   border: 1px solid var(--border);
   box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 8%, transparent);
   transition:
     border-color 0.2s ease,
-    box-shadow 0.2s ease;
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
 }
 .bp-glass:hover {
+  background: color-mix(in srgb, var(--card) 62%, transparent);
   border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
   box-shadow:
     inset 0 1px 0 color-mix(in srgb, var(--foreground) 10%, transparent),
@@ -201,6 +237,47 @@
   letter-spacing: 0.01em;
 }
 
+/* BrandMark's animated variant (dashboard hero): the heart glyph beats, the
+   EKG-style curve glows in the primary accent instead of plain white. */
+@keyframes bp-mark-heartbeat {
+  0%,
+  100% {
+    opacity: 0.22;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.75;
+    transform: scale(1.1);
+  }
+}
+.bp-mark-heart {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: bp-mark-heartbeat 1.8s ease-in-out infinite;
+}
+@keyframes bp-mark-curve-glow {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 1px color-mix(in srgb, var(--primary) 50%, transparent));
+  }
+  50% {
+    filter:
+      drop-shadow(0 0 5px color-mix(in srgb, var(--primary) 100%, transparent))
+      drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 70%, transparent));
+  }
+}
+.bp-mark-curve {
+  stroke: #fff;
+  animation: bp-mark-curve-glow 1.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bp-mark-heart,
+  .bp-mark-curve {
+    animation: none;
+  }
+}
+
 @keyframes bp-pulse-glow {
   0%,
   100% {

app/icon.svg

@@ -7,16 +7,18 @@
     </linearGradient>
   </defs>
   <rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGrad)" />
-  <path
+  <g transform="translate(0 0.7)">
-    d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
+    <path
-    fill="rgba(255,255,255,0.22)"
+      d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
-  />
+      fill="rgba(255,255,255,0.22)"
-  <polyline
+    />
-    points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
+    <polyline
-    fill="none"
+      points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
-    stroke="#ffffff"
+      fill="none"
-    stroke-width="1.7"
+      stroke="#ffffff"
-    stroke-linecap="round"
+      stroke-width="1.7"
-    stroke-linejoin="round"
+      stroke-linecap="round"
-  />
+      stroke-linejoin="round"
+    />
+  </g>
 </svg>

app/layout.tsx

@@ -1,12 +1,12 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Inter, Space_Grotesk, JetBrains_Mono } from "next/font/google";
+import { Inter, Sora, JetBrains_Mono } from "next/font/google";
 import { cn } from "@/lib/utils";
 import { ThemeProvider } from "@/components/layout/ThemeProvider";
 import { Toaster } from "@/components/ui/sonner";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
-const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-display" });
+const sora = Sora({ subsets: ["latin"], variable: "--font-display" });
 const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" });
 
 export const metadata: Metadata = {
@@ -19,7 +19,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html
       lang="en"
       suppressHydrationWarning
-      className={cn("font-sans", inter.variable, spaceGrotesk.variable, jetbrainsMono.variable)}
+      className={cn("font-sans", inter.variable, sora.variable, jetbrainsMono.variable)}
     >
       <body>
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>

app/login/page.tsx

@@ -13,7 +13,7 @@ export default function LoginPage() {
         <CardHeader>
           <div className="flex items-center gap-2">
             <BrandMark size={32} />
-            <CardTitle className="font-heading bp-gradient-text text-2xl">Sexy</CardTitle>
+            <CardTitle className="font-heading text-2xl">Sexy</CardTitle>
           </div>
           <CardDescription>Enter the shared access secret to continue.</CardDescription>
         </CardHeader>

app/not-found.tsx

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { BrandMark } from "@/components/layout/BrandMark";
+
+export const metadata: Metadata = { title: "Not found" };
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-dvh items-center justify-center p-4">
+      <Card className="bp-glass w-full max-w-sm">
+        <CardContent className="flex flex-col items-center gap-4 py-4 text-center">
+          <BrandMark size={32} />
+          <div className="space-y-1">
+            <p className="bp-readout bp-gradient-text text-4xl font-semibold">404</p>
+            <p className="text-sm text-muted-foreground">This page doesn&apos;t exist.</p>
+          </div>
+          <Button asChild size="sm">
+            <Link href="/">Back to dashboard</Link>
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

components/control/RecordControls.tsx

@@ -28,7 +28,7 @@ export function RecordControls({ active, elapsedLabel, disabled, busy, onStart,
   }
 
   return (
-    <Button onClick={onStart} disabled={disabled || busy} size="sm">
+    <Button onClick={onStart} disabled={disabled || busy}>
       <Circle className="size-3.5" /> Start session
     </Button>
   );

components/layout/BrandMark.tsx

@@ -3,10 +3,12 @@ import { cn } from "@/lib/utils";
 interface BrandMarkProps {
   size?: number;
   className?: string;
+  /** Beats the heart glyph and makes the curve glow - used for the dashboard hero mark. */
+  animated?: boolean;
 }
 
 /** Inline twin of app/icon.svg (the favicon) - kept as markup, not an <img>, so it can be sized/animated with CSS. */
-export function BrandMark({ size = 28, className }: BrandMarkProps) {
+export function BrandMark({ size = 28, className, animated = false }: BrandMarkProps) {
   return (
     <svg
       width={size}
@@ -25,18 +27,22 @@ export function BrandMark({ size = 28, className }: BrandMarkProps) {
         </linearGradient>
       </defs>
       <rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGradMark)" />
-      <path
+      <g transform="translate(0 0.7)">
-        d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
+        <path
-        fill="rgba(255,255,255,0.22)"
+          d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
-      />
+          fill="rgba(255,255,255,0.22)"
-      <polyline
+          className={cn(animated && "bp-mark-heart")}
-        points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
+        />
-        fill="none"
+        <polyline
-        stroke="#ffffff"
+          points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
-        strokeWidth={1.7}
+          fill="none"
-        strokeLinecap="round"
+          stroke="#ffffff"
-        strokeLinejoin="round"
+          strokeWidth={1.7}
-      />
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn(animated && "bp-mark-curve")}
+        />
+      </g>
     </svg>
   );
 }

components/layout/Breadcrumbs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronRight, House } from "lucide-react";
+
+const SECTION_LABELS: Record<string, string> = {
+  control: "Control",
+  recordings: "Recordings",
+  sessions: "Sessions",
+  stats: "Stats",
+  devices: "Devices",
+};
+
+const LEAF_LABELS: Record<string, string> = {
+  replay: "Replay",
+};
+
+export function Breadcrumbs() {
+  const pathname = usePathname();
+  const segments = pathname.split("/").filter(Boolean);
+
+  if (segments.length === 0) {
+    return null;
+  }
+
+  const crumbs = segments.reduce<{ label: string; href: string }[]>((acc, segment) => {
+    const href = `${acc.at(-1)?.href ?? ""}/${segment}`;
+    const label = /^\d+$/.test(segment) ? `#${segment}` : (LEAF_LABELS[segment] ?? SECTION_LABELS[segment] ?? segment);
+    return [...acc, { label, href }];
+  }, []);
+
+  return (
+    <nav aria-label="Breadcrumb" className="bp-glass mb-6 flex w-fit items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-muted-foreground">
+      <Link href="/" className="flex items-center hover:text-foreground" aria-label="Dashboard">
+        <House className="size-3.5" />
+      </Link>
+      {crumbs.map((crumb, i) => {
+        const isLast = i === crumbs.length - 1;
+        return (
+          <span key={crumb.href} className="flex items-center gap-1.5">
+            <ChevronRight className="size-3.5 text-muted-foreground/50" />
+            {isLast ? (
+              <span className="font-medium text-foreground">{crumb.label}</span>
+            ) : (
+              <Link href={crumb.href} className="hover:text-foreground">
+                {crumb.label}
+              </Link>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

components/layout/Footer.tsx

@@ -0,0 +1,32 @@
+export function Footer() {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="mx-auto w-full max-w-6xl px-4 py-6">
+      <div className="flex flex-col items-center gap-1 text-center text-xs text-muted-foreground">
+        <p>
+          Made with <span aria-hidden="true">💜</span> by{" "}
+          <a
+            href="https://dev.pivoine.art/valknar/sexy"
+            target="_blank"
+            rel="noreferrer noopener"
+            className="underline underline-offset-2 hover:text-foreground"
+          >
+            Valknar
+          </a>
+        </p>
+        <p>
+          &copy; {year} Sexy · Powered by{" "}
+          <a
+            href="https://buttplug.io/"
+            target="_blank"
+            rel="noreferrer noopener"
+            className="underline underline-offset-2 hover:text-foreground"
+          >
+            Buttplug.io
+          </a>
+        </p>
+      </div>
+    </footer>
+  );
+}

components/layout/NavBar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
@@ -45,6 +46,7 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
 export function NavBar() {
   const { theme, setTheme } = useTheme();
   const router = useRouter();
+  const [menuOpen, setMenuOpen] = useState(false);
 
   async function handleLogout() {
     await fetch("/api/auth/logout", { method: "POST" });
@@ -57,7 +59,7 @@ export function NavBar() {
       <div className="mx-auto flex h-14 max-w-6xl items-center gap-3 px-4">
         <Link href="/" className="mr-2 flex items-center gap-2">
           <BrandMark size={26} />
-          <span className="font-heading bp-gradient-text text-lg font-semibold">Sexy</span>
+          <span className="font-heading text-lg font-semibold">Sexy</span>
         </Link>
 
         <nav className="hidden items-center gap-1 md:flex">
@@ -79,7 +81,7 @@ export function NavBar() {
             <LogOut className="size-4" />
           </Button>
 
-          <Sheet>
+          <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
             <SheetTrigger asChild>
               <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open menu">
                 <Menu className="size-4" />
@@ -88,7 +90,7 @@ export function NavBar() {
             <SheetContent side="right" className="w-64">
               <SheetTitle className="px-4 pt-4">Menu</SheetTitle>
               <nav className="flex flex-col gap-1 p-4">
-                <NavLinks />
+                <NavLinks onNavigate={() => setMenuOpen(false)} />
               </nav>
             </SheetContent>
           </Sheet>

components/recordings/ReplayPlayer.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -32,7 +31,6 @@ function formatTime(ms: number): string {
 }
 
 export function ReplayPlayer({ recordingId }: { recordingId: number }) {
-  const router = useRouter();
   const scanning = useButtplugStore((s) => s.scanning);
   const devices = useButtplugStore((s) => s.devices);
   const setActuatorValue = useButtplugStore((s) => s.setActuatorValue);
@@ -289,10 +287,6 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
         onCancel={() => setShowRemap(false)}
         onConfirm={(mapping) => void handleConfirmRemap(mapping)}
       />
-
-      <Button variant="ghost" size="sm" onClick={() => router.push("/recordings")}>
-        Back to recordings
-      </Button>
     </div>
   );
 }

components/stats/DeviceUsageTable.tsx

@@ -1,3 +1,4 @@
+import { Card, CardContent } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 
 export interface DeviceUsageRow {
@@ -12,33 +13,41 @@ export interface DeviceUsageRow {
 
 export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
   if (devices.length === 0) {
-    return <p className="text-sm text-muted-foreground">No device activity yet.</p>;
+    return (
+      <Card className="bp-glass">
+        <CardContent className="py-6 text-sm text-muted-foreground">No device activity yet.</CardContent>
+      </Card>
+    );
   }
 
   return (
-    <Table>
+    <Card className="bp-glass">
-      <TableHeader>
+      <CardContent>
-        <TableRow>
+        <Table>
-          <TableHead>Device</TableHead>
+          <TableHeader>
-          <TableHead>Sessions</TableHead>
+            <TableRow>
-          <TableHead>Active time</TableHead>
+              <TableHead>Device</TableHead>
-          <TableHead>Commands</TableHead>
+              <TableHead>Sessions</TableHead>
-          <TableHead>Last used</TableHead>
+              <TableHead>Active time</TableHead>
-        </TableRow>
+              <TableHead>Commands</TableHead>
-      </TableHeader>
+              <TableHead>Last used</TableHead>
-      <TableBody>
+            </TableRow>
-        {devices.map((d) => (
+          </TableHeader>
-          <TableRow key={d.deviceId}>
+          <TableBody>
-            <TableCell className="font-medium">{d.displayName ?? d.bleName}</TableCell>
+            {devices.map((d) => (
-            <TableCell className="bp-readout">{d.sessionCount}</TableCell>
+              <TableRow key={d.deviceId}>
-            <TableCell className="bp-readout">{(d.totalActiveMs / 60_000).toFixed(1)}m</TableCell>
+                <TableCell className="font-medium">{d.displayName ?? d.bleName}</TableCell>
-            <TableCell className="bp-readout">{d.commandCount}</TableCell>
+                <TableCell className="bp-readout">{d.sessionCount}</TableCell>
-            <TableCell className="bp-readout text-muted-foreground">
+                <TableCell className="bp-readout">{(d.totalActiveMs / 60_000).toFixed(1)}m</TableCell>
-              {d.lastUsedAt ? new Date(d.lastUsedAt).toLocaleString() : "Never"}
+                <TableCell className="bp-readout">{d.commandCount}</TableCell>
-            </TableCell>
+                <TableCell className="bp-readout text-muted-foreground">
-          </TableRow>
+                  {d.lastUsedAt ? new Date(d.lastUsedAt).toLocaleString() : "Never"}
-        ))}
+                </TableCell>
-      </TableBody>
+              </TableRow>
-    </Table>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
   );
 }

components/stats/RecordingLibraryStats.tsx

@@ -35,26 +35,30 @@ export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummar
       </div>
 
       {stats.list.length > 0 && (
-        <Table>
+        <Card className="bp-glass">
-          <TableHeader>
+          <CardContent>
-            <TableRow>
+            <Table>
-              <TableHead>Recording</TableHead>
+              <TableHeader>
-              <TableHead>Plays</TableHead>
+                <TableRow>
-              <TableHead>Last played</TableHead>
+                  <TableHead>Recording</TableHead>
-            </TableRow>
+                  <TableHead>Plays</TableHead>
-          </TableHeader>
+                  <TableHead>Last played</TableHead>
-          <TableBody>
+                </TableRow>
-            {stats.list.map((r) => (
+              </TableHeader>
-              <TableRow key={r.id}>
+              <TableBody>
-                <TableCell className="font-medium">{r.name}</TableCell>
+                {stats.list.map((r) => (
-                <TableCell className="bp-readout">{r.playCount}</TableCell>
+                  <TableRow key={r.id}>
-                <TableCell className="bp-readout text-muted-foreground">
+                    <TableCell className="font-medium">{r.name}</TableCell>
-                  {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
+                    <TableCell className="bp-readout">{r.playCount}</TableCell>
-                </TableCell>
+                    <TableCell className="bp-readout text-muted-foreground">
-              </TableRow>
+                      {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
-            ))}
+                    </TableCell>
-          </TableBody>
+                  </TableRow>
-        </Table>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
       )}
     </div>
   );

components/stats/SessionsSummaryCards.tsx

@@ -40,9 +40,11 @@ export function SessionsSummaryCards({ summary }: { summary: SessionsSummary })
           </CardContent>
         </Card>
       </div>
-      <p className="text-sm text-muted-foreground">
+      <Card className="bp-glass">
-        {liveCount} live · {replayCount} replay
+        <CardContent className="py-3 text-sm text-muted-foreground">
-      </p>
+          {liveCount} live · {replayCount} replay
+        </CardContent>
+      </Card>
       {summary.durationPerDevice.length > 0 && (
         <Card className="bp-glass">
           <CardHeader>

instrumentation.ts

@@ -1,3 +1,5 @@
+import { createLogger } from "@/lib/logger";
+
 export async function register() {
   // Only the Node.js server runtime touches better-sqlite3; the Edge
   // middleware runtime must never import this module.
@@ -6,3 +8,26 @@ export async function register() {
     runMigrations();
   }
 }
+
+export async function onRequestError(
+  error: unknown,
+  request: { path: string; method: string; headers: Record<string, string | string[]> },
+  context: { routerKind: string; routePath: string; routeType: string },
+) {
+  const log = createLogger("uncaught");
+
+  // Safety net for errors that escape a route handler's own try/catch (e.g. a
+  // bug in code that never reaches withRouteLogging, or a rendering error) -
+  // route handlers wrapped in withRouteLogging already log and convert their
+  // own errors to a JSON 500, so this rarely double-logs the same failure.
+  const digest = typeof error === "object" && error !== null && "digest" in error ? String(error.digest) : undefined;
+  log.error("unhandled error", {
+    message: error instanceof Error ? error.message : String(error),
+    digest,
+    stack: error instanceof Error ? error.stack : undefined,
+    path: request.path,
+    method: request.method,
+    routePath: context.routePath,
+    routeType: context.routeType,
+  });
+}

lib/api/with-route-logging.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+import { randomUUID } from "node:crypto";
+import { createLogger } from "@/lib/logger";
+
+const log = createLogger("api");
+
+type RouteHandler<Ctx> = (req: Request, ctx: Ctx) => Promise<Response> | Response;
+
+/**
+ * Wraps an App Router route handler with consistent request/response logging:
+ * a reqId (also echoed as `x-request-id`), method/path, status, and duration on
+ * every call, plus a logged stack trace and JSON 500 for anything the handler
+ * doesn't catch itself. Every export in app/api/** goes through this so log
+ * shape and error handling stay uniform across routes instead of being
+ * reimplemented per file.
+ */
+export function withRouteLogging<Ctx = unknown>(routeName: string, handler: RouteHandler<Ctx>): RouteHandler<Ctx> {
+  return async (req, ctx) => {
+    const reqId = randomUUID();
+    const start = performance.now();
+    const { pathname, search } = new URL(req.url);
+    const reqLog = log.child({ reqId, route: routeName, method: req.method });
+
+    reqLog.debug("request start", { path: pathname + search });
+
+    try {
+      const res = await handler(req, ctx);
+      const durationMs = Math.round(performance.now() - start);
+      const level = res.status >= 500 ? "error" : res.status >= 400 ? "warn" : "info";
+      reqLog[level]("request end", { status: res.status, durationMs });
+      res.headers.set("x-request-id", reqId);
+      return res;
+    } catch (err) {
+      const durationMs = Math.round(performance.now() - start);
+      reqLog.error("request failed", {
+        durationMs,
+        error: err instanceof Error ? err.message : String(err),
+        stack: err instanceof Error ? err.stack : undefined,
+      });
+      return NextResponse.json({ error: "internal error", reqId }, { status: 500 });
+    }
+  };
+}

lib/logger.ts

@@ -34,14 +34,21 @@ export interface Logger {
   info(message: string, fields?: LogFields): void;
   warn(message: string, fields?: LogFields): void;
   error(message: string, fields?: LogFields): void;
+  /** Returns a logger that merges `bindings` into every call's fields - for attaching
+   * per-request context (reqId, route) without threading it through every log call. */
+  child(bindings: LogFields): Logger;
 }
 
 /** Scoped logger. `scope` is the bracketed tag, e.g. createLogger("api") -> "[api]". */
-export function createLogger(scope: string): Logger {
+export function createLogger(scope: string, bindings?: LogFields): Logger {
+  const log = (level: LogLevel, message: string, fields?: LogFields) =>
+    write(level, scope, message, bindings || fields ? { ...bindings, ...fields } : undefined);
+
   return {
-    debug: (message, fields) => write("debug", scope, message, fields),
+    debug: (message, fields) => log("debug", message, fields),
-    info: (message, fields) => write("info", scope, message, fields),
+    info: (message, fields) => log("info", message, fields),
-    warn: (message, fields) => write("warn", scope, message, fields),
+    warn: (message, fields) => log("warn", message, fields),
-    error: (message, fields) => write("error", scope, message, fields),
+    error: (message, fields) => log("error", message, fields),
+    child: (extra) => createLogger(scope, { ...bindings, ...extra }),
   };
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sexy",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

proxy.ts

@@ -1,5 +1,8 @@
 import { NextRequest, NextResponse } from "next/server";
 import { SESSION_COOKIE_NAME, verifySessionToken } from "@/lib/auth/session";
+import { createLogger } from "@/lib/logger";
+
+const log = createLogger("auth");
 
 export default async function proxy(req: NextRequest) {
   const { pathname } = req.nextUrl;
@@ -13,9 +16,11 @@ export default async function proxy(req: NextRequest) {
   }
 
   if (pathname.startsWith("/api/")) {
+    log.warn("rejected unauthenticated request", { path: pathname, method: req.method });
     return NextResponse.json({ error: "unauthorized" }, { status: 401 });
   }
 
+  log.warn("redirecting unauthenticated request to login", { path: pathname });
   const loginUrl = new URL("/login", req.url);
   loginUrl.searchParams.set("from", pathname);
   return NextResponse.redirect(loginUrl);