Fix device/replay/session UX issues, add pagination, bump to 0.3.0

- Fix device rename input collapsing on mobile (fixed width vs w-full
  inside an auto-layout table column).
- Add cascade-delete confirmation for sessions with a saved recording.
- Fix header connection LED: derive state from scanning/device-count/
  recording instead of the Buttplug client's raw connected flag; drop
  the label text and hide the indicator entirely when idle.
- Add a per-device disconnect button (stop + remove from store, the
  closest equivalent Buttplug's protocol allows per device).
- Fix replay ending early: duration now comes from the recording's
  actual durationMs, not the last event's timestamp.
- Replay robustness: show which devices are being replayed to, reset
  actuators to zero on start/play/pause, fully disconnect devices and
  the whole client on stop/unmount, surface command failures via toast.
- Stop flagging the header LED red during replay - recording is only
  for live sessions.
- Add page-number pagination to recordings/sessions/devices lists.
- Wordmark SEXY -> Sexy; add proper per-page <title>s including
  dynamic titles for recording/session detail and replay pages.

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

components/control/ButtplugConsole.tsx

@@ -45,6 +45,8 @@ export function ButtplugConsole() {
   const setActuatorValue = useButtplugStore((s) => s.setActuatorValue);
   const batteryLevels = useButtplugStore((s) => s.batteryLevels);
   const setBatteryLevel = useButtplugStore((s) => s.setBatteryLevel);
+  const removeDevice = useButtplugStore((s) => s.removeDevice);
+  const setRecording = useButtplugStore((s) => s.setRecording);
   const storeError = useButtplugStore((s) => s.error);
 
   const [activeSession, setActiveSession] = useState<ActivePlaySession | null>(null);
@@ -136,6 +138,7 @@ export function ButtplugConsole() {
         sessionDeviceIdByDeviceIndex,
       });
       setElapsedMs(0);
+      setRecording(true);
     } catch {
       toast.error("Could not start session.");
     } finally {
@@ -147,6 +150,7 @@ export function ButtplugConsole() {
     if (!activeSession) return;
     setSessionBusy(true);
     eventBuffer.stop();
+    setRecording(false);
     await fetch(`/api/play-sessions/${activeSession.id}`, {
       method: "PATCH",
       headers: { "Content-Type": "application/json" },
@@ -197,6 +201,17 @@ export function ButtplugConsole() {
     device.actuators.forEach((a) => setActuatorValue(device.index, a.featureIndex, 0));
   }
 
+  async function handleDisconnectDevice(device: ConnectedDeviceInfo) {
+    // Buttplug's protocol has no per-device disconnect message - only a
+    // whole-client disconnect() and stop() (halts actuators). Stopping it and
+    // removing it from local state is the closest equivalent: the card
+    // disappears and it stops receiving commands, though the underlying BLE
+    // link may persist until the whole client disconnects.
+    const liveDevice = await getDevice(device.index);
+    await liveDevice?.stop().catch(() => {});
+    removeDevice(device.index);
+  }
+
   if (!supported) {
     return (
       <Card className="bp-glass">
@@ -249,6 +264,7 @@ export function ButtplugConsole() {
               }
               onActuatorChange={(featureIndex, value) => void handleActuatorChange(device, featureIndex, value)}
               onStop={() => void handleStopDevice(device)}
+              onDisconnect={() => void handleDisconnectDevice(device)}
             />
           ))}
         </div>

components/control/DeviceCard.tsx

@@ -4,7 +4,7 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { ActuatorSlider } from "./ActuatorSlider";
 import type { ConnectedDeviceInfo } from "@/lib/buttplug/types";
-import { Battery, BatteryFull, BatteryLow, BatteryMedium, BatteryWarning } from "lucide-react";
+import { Battery, BatteryFull, BatteryLow, BatteryMedium, BatteryWarning, Unlink } from "lucide-react";
 
 interface DeviceCardProps {
   device: ConnectedDeviceInfo;
@@ -13,6 +13,7 @@ interface DeviceCardProps {
   transmittingFeatureIndex: number | null;
   onActuatorChange: (featureIndex: number, value: number) => void;
   onStop: () => void;
+  onDisconnect: () => void;
 }
 
 function BatteryIndicator({ level }: { level: number }) {
@@ -32,6 +33,7 @@ export function DeviceCard({
   transmittingFeatureIndex,
   onActuatorChange,
   onStop,
+  onDisconnect,
 }: DeviceCardProps) {
   return (
     <Card className="bp-glass">
@@ -47,6 +49,9 @@ export function DeviceCard({
           <Button variant="outline" size="sm" onClick={onStop}>
             Stop
           </Button>
+          <Button variant="ghost" size="icon-sm" onClick={onDisconnect} aria-label="Disconnect device">
+            <Unlink className="size-3.5" />
+          </Button>
         </div>
       </CardHeader>
       <div className="bp-hairline mx-4" />

components/devices/DevicesTable.tsx

@@ -38,8 +38,8 @@ function DeviceNameCell({ device }: { device: DeviceRow }) {
 
   return (
     <div className="flex items-center gap-2">
-      <Input value={value} onChange={(e) => setValue(e.target.value)} className="h-8 max-w-48" />
-      <Button size="sm" variant="outline" onClick={handleSave} disabled={saving}>
+      <Input value={value} onChange={(e) => setValue(e.target.value)} className="h-8 w-40 min-w-40" />
+      <Button size="sm" variant="outline" onClick={handleSave} disabled={saving} className="shrink-0">
         Save
       </Button>
     </div>

components/layout/ConnectionStatus.tsx

@@ -1,18 +1,28 @@
 "use client";
 
 import { useButtplugStore } from "@/lib/buttplug/store";
-import { cn } from "@/lib/utils";
+
+type IndicatorState = "scanning" | "connected" | "recording";
 
 export function ConnectionStatus() {
-  const connected = useButtplugStore((s) => s.connected);
+  const scanning = useButtplugStore((s) => s.scanning);
+  const recording = useButtplugStore((s) => s.recording);
   const deviceCount = useButtplugStore((s) => Object.keys(s.devices).length);
 
-  return (
-    <div className="flex items-center gap-2 rounded-md border border-border bg-card/60 px-3 py-1 text-xs">
-      <span className={cn("bp-led", connected && "bp-pulse")} data-on={connected} aria-hidden />
-      <span className="bp-readout text-muted-foreground">
-        {connected ? `${deviceCount} device${deviceCount === 1 ? "" : "s"} connected` : "not connected"}
-      </span>
-    </div>
-  );
+  // Priority: an active recording is the most important thing to surface,
+  // then whether toys are actually connected, then a bare scan-in-progress -
+  // this is deliberately independent of the Buttplug client's own `connected`
+  // flag, which goes true as soon as the embedded server initializes (i.e. as
+  // soon as scanning starts), not when a device is actually paired.
+  const state: IndicatorState | null = recording
+    ? "recording"
+    : deviceCount > 0
+      ? "connected"
+      : scanning
+        ? "scanning"
+        : null;
+
+  if (!state) return null;
+
+  return <span className="bp-led bp-pulse" data-state={state} aria-hidden />;
 }

components/layout/NavBar.tsx

@@ -57,7 +57,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 bp-gradient-text text-lg font-semibold">Sexy</span>
         </Link>
 
         <nav className="hidden items-center gap-1 md:flex">

components/recordings/ReplayPlayer.tsx

@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
 import { DeviceScanPanel } from "@/components/control/DeviceScanPanel";
 import { DeviceRemapDialog } from "./DeviceRemapDialog";
-import { getButtplugClientHandle, startScanning, stopScanning } from "@/lib/buttplug/client";
+import { disconnectAll, getButtplugClientHandle, getDevice, startScanning, stopScanning } from "@/lib/buttplug/client";
 import { eventBuffer } from "@/lib/buttplug/event-buffer";
 import { RecordingPlayer, type RecordingEventRow } from "@/lib/buttplug/player";
 import { useButtplugStore } from "@/lib/buttplug/store";
@@ -35,13 +35,19 @@ 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);
+  const removeDevice = useButtplugStore((s) => s.removeDevice);
   const connectedDevices = useMemo(() => Object.values(devices), [devices]);
 
   const [data, setData] = useState<RecordingResponse | null>(null);
   const [showRemap, setShowRemap] = useState(false);
+  const [starting, setStarting] = useState(false);
   const [player, setPlayer] = useState<RecordingPlayer | null>(null);
   const [playing, setPlaying] = useState(false);
   const [elapsedMs, setElapsedMs] = useState(0);
+  const [replayTargets, setReplayTargets] = useState<{ slotLabel: string; deviceName: string }[]>([]);
+  const [replayDeviceIndexes, setReplayDeviceIndexes] = useState<number[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<number | null>(null);
 
   useEffect(() => {
     fetch(`/api/recordings/${recordingId}`)
@@ -50,69 +56,111 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
       .catch(() => toast.error("Could not load recording"));
   }, [recordingId]);
 
+  useEffect(() => {
+    return () => {
+      void disconnectAll();
+    };
+  }, []);
+
+  async function resetReplayDevices() {
+    await Promise.all(
+      replayDeviceIndexes.map(async (deviceIndex) => {
+        const liveDevice = await getDevice(deviceIndex);
+        await liveDevice?.stop().catch(() => {});
+        devices[deviceIndex]?.actuators.forEach((a) => setActuatorValue(deviceIndex, a.featureIndex, 0));
+      }),
+    );
+  }
+
   async function handleConfirmRemap(mapping: Map<number, number>) {
     if (!data) return;
     setShowRemap(false);
+    setStarting(true);
 
-    const orderedSlots = data.recording.deviceSlots.filter((s) => mapping.has(s.sourceSessionDeviceId));
-    const body = {
-      kind: "replay" as const,
-      replayedRecordingId: data.recording.id,
-      devices: orderedSlots.map((slot) => {
+    try {
+      const orderedSlots = data.recording.deviceSlots.filter((s) => mapping.has(s.sourceSessionDeviceId));
+      const targets = orderedSlots.map((slot) => {
         const deviceIndex = mapping.get(slot.sourceSessionDeviceId)!;
         const device = connectedDevices.find((d) => d.index === deviceIndex)!;
-        return { slotLabel: slot.slotLabel, bleName: device.name };
-      }),
-    };
+        return { slotLabel: slot.slotLabel, deviceName: device.displayName ?? device.name };
+      });
 
-    const res = await fetch("/api/play-sessions", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
-    });
-    if (!res.ok) {
-      toast.error("Could not start replay session");
-      return;
-    }
-    const result: { session: { id: number; startedAt: number }; sessionDevices: { id: number }[] } =
-      await res.json();
+      const body = {
+        kind: "replay" as const,
+        replayedRecordingId: data.recording.id,
+        devices: orderedSlots.map((slot, i) => ({ slotLabel: slot.slotLabel, bleName: targets[i].deviceName })),
+      };
 
-    eventBuffer.start(result.session.id, result.session.startedAt);
-    const sessionDeviceIdToDeviceIndex = new Map<number, number>();
-    orderedSlots.forEach((slot, i) => {
-      const deviceIndex = mapping.get(slot.sourceSessionDeviceId)!;
-      const newSessionDeviceId = result.sessionDevices[i]?.id;
-      if (newSessionDeviceId !== undefined) {
-        eventBuffer.registerSessionDevice(deviceIndex, newSessionDeviceId);
-        sessionDeviceIdToDeviceIndex.set(slot.sourceSessionDeviceId, deviceIndex);
+      const res = await fetch("/api/play-sessions", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) {
+        toast.error("Could not start replay session");
+        return;
       }
-    });
+      const result: { session: { id: number; startedAt: number }; sessionDevices: { id: number }[] } =
+        await res.json();
 
-    const actuatorsByDeviceIndex = new Map<number, ActuatorInfo[]>(
-      connectedDevices.map((d) => [d.index, d.actuators]),
-    );
+      eventBuffer.start(result.session.id, result.session.startedAt);
+      const sessionDeviceIdToDeviceIndex = new Map<number, number>();
+      orderedSlots.forEach((slot, i) => {
+        const deviceIndex = mapping.get(slot.sourceSessionDeviceId)!;
+        const newSessionDeviceId = result.sessionDevices[i]?.id;
+        if (newSessionDeviceId !== undefined) {
+          eventBuffer.registerSessionDevice(deviceIndex, newSessionDeviceId);
+          sessionDeviceIdToDeviceIndex.set(slot.sourceSessionDeviceId, deviceIndex);
+        }
+      });
 
-    const { runtime } = await getButtplugClientHandle();
-    const instance = new RecordingPlayer({
-      events: data.events,
-      sessionDeviceIdToDeviceIndex,
-      actuatorsByDeviceIndex,
-      runtime,
-      onProgress: (elapsed) => setElapsedMs(elapsed),
-      onComplete: async () => {
-        setPlaying(false);
-        eventBuffer.stop();
-        await fetch(`/api/play-sessions/${result.session.id}`, {
-          method: "PATCH",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ status: "completed" }),
-        });
-        toast.success("Replay finished");
-      },
-    });
-    setPlayer(instance);
-    instance.play();
-    setPlaying(true);
+      const actuatorsByDeviceIndex = new Map<number, ActuatorInfo[]>(
+        connectedDevices.map((d) => [d.index, d.actuators]),
+      );
+
+      // Reset every actuator on every device that will take part in this replay before
+      // the first scheduled event fires, so playback always starts from a known-zero
+      // state rather than whatever intensity was left over from manual control.
+      const deviceIndexes = new Set(sessionDeviceIdToDeviceIndex.values());
+      await Promise.all(
+        [...deviceIndexes].map(async (deviceIndex) => {
+          const liveDevice = await getDevice(deviceIndex);
+          await liveDevice?.stop().catch(() => {});
+          actuatorsByDeviceIndex.get(deviceIndex)?.forEach((a) => setActuatorValue(deviceIndex, a.featureIndex, 0));
+        }),
+      );
+
+      const { runtime } = await getButtplugClientHandle();
+      const instance = new RecordingPlayer({
+        events: data.events,
+        durationMs: data.recording.durationMs,
+        sessionDeviceIdToDeviceIndex,
+        actuatorsByDeviceIndex,
+        runtime,
+        onProgress: (elapsed) => setElapsedMs(elapsed),
+        onError: (message) => toast.error(`Replay command failed: ${message}`),
+        onComplete: async () => {
+          setPlaying(false);
+          eventBuffer.stop();
+          await fetch(`/api/play-sessions/${result.session.id}`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ status: "completed" }),
+          }).catch(() => {});
+          toast.success("Replay finished");
+        },
+      });
+      setReplayTargets(targets);
+      setReplayDeviceIndexes([...deviceIndexes]);
+      setActiveSessionId(result.session.id);
+      setPlayer(instance);
+      instance.play();
+      setPlaying(true);
+    } catch {
+      toast.error("Could not start replay");
+    } finally {
+      setStarting(false);
+    }
   }
 
   if (!data) {
@@ -136,41 +184,98 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
                 <DeviceScanPanel scanning={scanning} onScan={() => void startScanning()} onStopScan={() => void stopScanning()} />
                 <Button
                   onClick={async () => {
-                    await getButtplugClientHandle();
-                    setShowRemap(true);
+                    try {
+                      await getButtplugClientHandle();
+                      setShowRemap(true);
+                    } catch {
+                      toast.error("Could not connect to Buttplug client");
+                    }
                   }}
-                  disabled={connectedDevices.length === 0}
+                  disabled={connectedDevices.length === 0 || starting}
                 >
-                  Match devices & replay
+                  {starting ? "Starting..." : "Match devices & replay"}
                 </Button>
               </div>
             </>
           ) : (
             <div className="flex flex-col gap-3">
+              {replayTargets.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {replayTargets.map((t) => (
+                    <span
+                      key={t.slotLabel}
+                      className="bp-readout rounded-md border border-border bg-card/60 px-2 py-1 text-xs text-muted-foreground"
+                    >
+                      {t.slotLabel} → {t.deviceName}
+                    </span>
+                  ))}
+                </div>
+              )}
               <Slider
                 value={[elapsedMs]}
                 max={data.recording.durationMs}
                 onValueChange={([v]) => player.seek(v)}
               />
               <div className="flex items-center justify-between">
-                <span className="text-xs text-muted-foreground">
+                <span className="bp-readout text-xs text-muted-foreground">
                   {formatTime(elapsedMs)} / {formatTime(data.recording.durationMs)}
                 </span>
-                <Button
-                  size="icon"
-                  variant="outline"
-                  onClick={() => {
-                    if (playing) {
-                      player.pause();
+                <div className="flex items-center gap-2">
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    onClick={async () => {
+                      if (playing) {
+                        player.pause();
+                        setPlaying(false);
+                      } else {
+                        player.play();
+                        setPlaying(true);
+                      }
+                      // Toggling either way leaves the toy holding whatever intensity was
+                      // last sent - zero it out so pause always actually stops the device,
+                      // and resume always starts from a clean, known state.
+                      await resetReplayDevices();
+                    }}
+                    aria-label={playing ? "Pause" : "Play"}
+                  >
+                    {playing ? <Pause className="size-4" /> : <Play className="size-4" />}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={async () => {
+                      player.stop();
                       setPlaying(false);
-                    } else {
-                      player.play();
-                      setPlaying(true);
-                    }
-                  }}
-                >
-                  {playing ? <Pause className="size-4" /> : <Play className="size-4" />}
-                </Button>
+                      setElapsedMs(0);
+                      eventBuffer.stop();
+                      if (activeSessionId !== null) {
+                        await fetch(`/api/play-sessions/${activeSessionId}`, {
+                          method: "PATCH",
+                          headers: { "Content-Type": "application/json" },
+                          body: JSON.stringify({ status: "aborted" }),
+                        }).catch(() => {});
+                      }
+                      // Fully disconnect every device that took part in this replay,
+                      // not just stop the player - see handleDisconnectDevice in
+                      // ButtplugConsole for why "stop + remove from store" is the
+                      // closest equivalent Buttplug's protocol allows per-device.
+                      await Promise.all(
+                        replayDeviceIndexes.map(async (deviceIndex) => {
+                          const liveDevice = await getDevice(deviceIndex);
+                          await liveDevice?.stop().catch(() => {});
+                          removeDevice(deviceIndex);
+                        }),
+                      );
+                      setPlayer(null);
+                      setReplayTargets([]);
+                      setReplayDeviceIndexes([]);
+                      setActiveSessionId(null);
+                    }}
+                  >
+                    Stop
+                  </Button>
+                </div>
               </div>
             </div>
           )}

components/sessions/SessionsTable.tsx

@@ -1,13 +1,27 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
+interface BlockingRecording {
+  id: number;
+  name: string;
+}
+
 export interface SessionRow {
   id: number;
   name: string | null;
@@ -27,6 +41,8 @@ function formatDuration(ms: number | null): string {
 
 export function SessionsTable({ sessions }: { sessions: SessionRow[] }) {
   const router = useRouter();
+  const [conflict, setConflict] = useState<{ id: number; recordings: BlockingRecording[] } | null>(null);
+  const [deleting, setDeleting] = useState(false);
 
   async function handleDelete(id: number) {
     const res = await fetch(`/api/play-sessions/${id}`, { method: "DELETE" });
@@ -34,7 +50,22 @@ export function SessionsTable({ sessions }: { sessions: SessionRow[] }) {
       toast.success("Session deleted");
       router.refresh();
     } else if (res.status === 409) {
-      toast.error("A saved recording still references this session");
+      const body: { recordings?: BlockingRecording[] } = await res.json().catch(() => ({}));
+      setConflict({ id, recordings: body.recordings ?? [] });
+    } else {
+      toast.error("Could not delete session");
+    }
+  }
+
+  async function handleCascadeDelete() {
+    if (!conflict) return;
+    setDeleting(true);
+    const res = await fetch(`/api/play-sessions/${conflict.id}?cascade=true`, { method: "DELETE" });
+    setDeleting(false);
+    if (res.ok) {
+      toast.success("Session and recording deleted");
+      setConflict(null);
+      router.refresh();
     } else {
       toast.error("Could not delete session");
     }
@@ -45,41 +76,66 @@ export function SessionsTable({ sessions }: { sessions: SessionRow[] }) {
   }
 
   return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Session</TableHead>
-          <TableHead>Kind</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Started</TableHead>
-          <TableHead>Duration</TableHead>
-          <TableHead className="text-right">Actions</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {sessions.map((s) => (
-          <TableRow key={s.id}>
-            <TableCell className="font-medium">
-              <Link href={`/sessions/${s.id}`} className="hover:underline">
-                {s.name ?? `Session #${s.id}`}
-              </Link>
-            </TableCell>
-            <TableCell>
-              <Badge variant={s.kind === "live" ? "default" : "secondary"}>{s.kind}</Badge>
-            </TableCell>
-            <TableCell className="text-muted-foreground">{s.status}</TableCell>
-            <TableCell className="bp-readout text-muted-foreground">
-              {new Date(s.startedAt).toLocaleString()}
-            </TableCell>
-            <TableCell className="bp-readout">{formatDuration(s.durationMs)}</TableCell>
-            <TableCell className="text-right">
-              <Button variant="ghost" size="icon-sm" onClick={() => void handleDelete(s.id)} aria-label="Delete">
-                <Trash2 className="size-3.5" />
-              </Button>
-            </TableCell>
+    <>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Session</TableHead>
+            <TableHead>Kind</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Started</TableHead>
+            <TableHead>Duration</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
           </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+        </TableHeader>
+        <TableBody>
+          {sessions.map((s) => (
+            <TableRow key={s.id}>
+              <TableCell className="font-medium">
+                <Link href={`/sessions/${s.id}`} className="hover:underline">
+                  {s.name ?? `Session #${s.id}`}
+                </Link>
+              </TableCell>
+              <TableCell>
+                <Badge variant={s.kind === "live" ? "default" : "secondary"}>{s.kind}</Badge>
+              </TableCell>
+              <TableCell className="text-muted-foreground">{s.status}</TableCell>
+              <TableCell className="bp-readout text-muted-foreground">
+                {new Date(s.startedAt).toLocaleString()}
+              </TableCell>
+              <TableCell className="bp-readout">{formatDuration(s.durationMs)}</TableCell>
+              <TableCell className="text-right">
+                <Button variant="ghost" size="icon-sm" onClick={() => void handleDelete(s.id)} aria-label="Delete">
+                  <Trash2 className="size-3.5" />
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      <Dialog open={conflict !== null} onOpenChange={(open) => !open && setConflict(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete session and recording?</DialogTitle>
+            <DialogDescription>
+              This session has a saved recording
+              {conflict && conflict.recordings.length > 0
+                ? ` (${conflict.recordings.map((r) => r.name).join(", ")})`
+                : ""}{" "}
+              that still points to it. Deleting the session will also delete that recording.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setConflict(null)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={() => void handleCascadeDelete()} disabled={deleting}>
+              {deleting ? "Deleting..." : "Delete both"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

components/shared/PageNav.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface PageNavProps {
+  basePath: string;
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export function PageNav({ basePath, page, pageSize, total }: PageNavProps) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  if (totalPages <= 1) return null;
+
+  const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, total);
+
+  return (
+    <div className="flex items-center justify-between gap-4 pt-2">
+      <span className="bp-readout text-xs text-muted-foreground">
+        {from}-{to} of {total}
+      </span>
+      <div className="flex items-center gap-2">
+        {page > 1 ? (
+          <Button asChild variant="outline" size="icon-sm">
+            <Link href={`${basePath}?page=${page - 1}`} aria-label="Previous page">
+              <ChevronLeft className="size-3.5" />
+            </Link>
+          </Button>
+        ) : (
+          <Button variant="outline" size="icon-sm" disabled aria-label="Previous page">
+            <ChevronLeft className="size-3.5" />
+          </Button>
+        )}
+        <span className="bp-readout text-xs text-muted-foreground">
+          {page} / {totalPages}
+        </span>
+        {page < totalPages ? (
+          <Button asChild variant="outline" size="icon-sm">
+            <Link href={`${basePath}?page=${page + 1}`} aria-label="Next page">
+              <ChevronRight className="size-3.5" />
+            </Link>
+          </Button>
+        ) : (
+          <Button variant="outline" size="icon-sm" disabled aria-label="Next page">
+            <ChevronRight className="size-3.5" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}