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/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>
+    </>
   );
 }