Remove recordings feature, replay sessions directly, bump to 0.6.0

Recordings were just a thin named pointer over an already-captured
session's events, so the whole separate feature (recordings table, API
routes, pages, UI) is gone: any completed session can now be named and
replayed directly. Replaying no longer creates a session or duplicates
events of its own - it just bumps the source session's playCount/lastPlayedAt.

Also renames play_sessions/playSession(s) to sessions/session(s) throughout
the schema, queries, API routes, and UI for consistency, and updates the
README to match the new flow.

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

components/control/ButtplugConsole.tsx

@@ -20,10 +20,10 @@ import type { ConnectedDeviceInfo } from "@/lib/buttplug/types";
 import { DeviceScanPanel } from "./DeviceScanPanel";
 import { DeviceCard } from "./DeviceCard";
 import { RecordControls } from "./RecordControls";
-import { SaveRecordingDialog } from "@/components/recordings/SaveRecordingDialog";
+import { NameSessionDialog } from "./NameSessionDialog";
 import { Card, CardContent } from "@/components/ui/card";
 
-interface ActivePlaySession {
+interface ActiveSession {
   id: number;
   startedAt: number;
   sessionDeviceIdByDeviceIndex: Map<number, number>;
@@ -49,7 +49,7 @@ export function ButtplugConsole() {
   const setRecording = useButtplugStore((s) => s.setRecording);
   const storeError = useButtplugStore((s) => s.error);
 
-  const [activeSession, setActiveSession] = useState<ActivePlaySession | null>(null);
+  const [activeSession, setActiveSession] = useState<ActiveSession | null>(null);
   const [elapsedMs, setElapsedMs] = useState(0);
   const [sessionBusy, setSessionBusy] = useState(false);
   const [savePromptSessionId, setSavePromptSessionId] = useState<number | null>(null);
@@ -105,14 +105,13 @@ export function ButtplugConsole() {
     try {
       const deviceList = Object.values(devices);
       const body = {
-        kind: "live" as const,
         devices: deviceList.map((d) => ({
           slotLabel: d.displayName ?? d.name,
           bleName: d.name,
           capabilities: { outputs: [...new Set(d.actuators.map((a) => a.outputType))], featureCount: d.actuators.length },
         })),
       };
-      const res = await fetch("/api/play-sessions", {
+      const res = await fetch("/api/sessions", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(body),
@@ -151,7 +150,7 @@ export function ButtplugConsole() {
     setSessionBusy(true);
     eventBuffer.stop();
     setRecording(false);
-    await fetch(`/api/play-sessions/${activeSession.id}`, {
+    await fetch(`/api/sessions/${activeSession.id}`, {
       method: "PATCH",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ status: "completed" }),
@@ -270,8 +269,8 @@ export function ButtplugConsole() {
         </div>
       )}
 
-      <SaveRecordingDialog
-        playSessionId={savePromptSessionId}
+      <NameSessionDialog
+        sessionId={savePromptSessionId}
         onClose={() => setSavePromptSessionId(null)}
         onSaved={() => setSavePromptSessionId(null)}
       />

components/control/NameSessionDialog.tsx

@@ -14,50 +14,50 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
 
-interface SaveRecordingDialogProps {
-  playSessionId: number | null;
+interface NameSessionDialogProps {
+  sessionId: number | null;
   onClose: () => void;
   onSaved: () => void;
 }
 
-export function SaveRecordingDialog({ playSessionId, onClose, onSaved }: SaveRecordingDialogProps) {
+export function NameSessionDialog({ sessionId, onClose, onSaved }: NameSessionDialogProps) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [saving, setSaving] = useState(false);
 
   async function handleSave() {
-    if (!playSessionId || name.trim().length === 0) return;
+    if (!sessionId || name.trim().length === 0) return;
     setSaving(true);
-    const res = await fetch("/api/recordings", {
-      method: "POST",
+    const res = await fetch(`/api/sessions/${sessionId}`, {
+      method: "PATCH",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ sourcePlaySessionId: playSessionId, name: name.trim(), description }),
+      body: JSON.stringify({ name: name.trim(), description }),
     });
     setSaving(false);
     if (res.ok) {
-      toast.success("Recording saved");
+      toast.success("Session named");
       onSaved();
     } else {
-      toast.error("Could not save recording");
+      toast.error("Could not name session");
     }
   }
 
   return (
-    <Dialog open={playSessionId !== null} onOpenChange={(open) => !open && onClose()}>
+    <Dialog open={sessionId !== null} onOpenChange={(open) => !open && onClose()}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Save session as a recording</DialogTitle>
+          <DialogTitle>Name this session</DialogTitle>
           <DialogDescription>Give it a name so you can find and replay it later.</DialogDescription>
         </DialogHeader>
         <div className="flex flex-col gap-3">
           <div className="flex flex-col gap-1.5">
-            <Label htmlFor="recording-name">Name</Label>
-            <Input id="recording-name" value={name} onChange={(e) => setName(e.target.value)} autoFocus />
+            <Label htmlFor="session-name">Name</Label>
+            <Input id="session-name" value={name} onChange={(e) => setName(e.target.value)} autoFocus />
           </div>
           <div className="flex flex-col gap-1.5">
-            <Label htmlFor="recording-description">Description (optional)</Label>
+            <Label htmlFor="session-description">Description (optional)</Label>
             <Input
-              id="recording-description"
+              id="session-description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
             />
@@ -68,7 +68,7 @@ export function SaveRecordingDialog({ playSessionId, onClose, onSaved }: SaveRec
             Skip
           </Button>
           <Button onClick={handleSave} disabled={saving || name.trim().length === 0}>
-            {saving ? "Saving..." : "Save recording"}
+            {saving ? "Saving..." : "Save name"}
           </Button>
         </DialogFooter>
       </DialogContent>

components/control/RecordControls.tsx

@@ -20,7 +20,7 @@ export function RecordControls({ active, elapsedLabel, disabled, busy, onStart,
           <Circle className="bp-pulse size-2.5 fill-destructive text-destructive" />
           Session live · {elapsedLabel}
         </span>
-        <Button variant="outline" size="sm" onClick={onEnd} disabled={busy}>
+        <Button variant="outline" onClick={onEnd} disabled={busy}>
           <Square className="size-3.5" /> End session
         </Button>
       </div>

components/layout/Breadcrumbs.tsx

@@ -6,7 +6,6 @@ import { ChevronRight, House } from "lucide-react";
 
 const SECTION_LABELS: Record<string, string> = {
   control: "Control",
-  recordings: "Recordings",
   sessions: "Sessions",
   stats: "Stats",
   devices: "Devices",

components/layout/NavBar.tsx

@@ -14,7 +14,6 @@ import { cn } from "@/lib/utils";
 const LINKS = [
   { href: "/", label: "Dashboard" },
   { href: "/control", label: "Control" },
-  { href: "/recordings", label: "Recordings" },
   { href: "/sessions", label: "Sessions" },
   { href: "/stats", label: "Stats" },
   { href: "/devices", label: "Devices" },

components/recordings/RecordingsTable.tsx

@@ -1,91 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Play, Trash2 } from "lucide-react";
-import { toast } from "sonner";
-
-export interface RecordingRow {
-  id: number;
-  name: string;
-  durationMs: number;
-  playCount: number;
-  lastPlayedAt: number | null;
-  createdAt: number;
-}
-
-function formatDuration(ms: number): string {
-  const totalSeconds = Math.round(ms / 1000);
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
-}
-
-export function RecordingsTable({ recordings }: { recordings: RecordingRow[] }) {
-  const router = useRouter();
-
-  async function handleDelete(id: number) {
-    const res = await fetch(`/api/recordings/${id}`, { method: "DELETE" });
-    if (res.ok) {
-      toast.success("Recording deleted");
-      router.refresh();
-    } else {
-      toast.error("Could not delete recording");
-    }
-  }
-
-  if (recordings.length === 0) {
-    return (
-      <p className="text-sm text-muted-foreground">
-        No recordings yet - start a session on the Control page and save it when you&apos;re done.
-      </p>
-    );
-  }
-
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Duration</TableHead>
-          <TableHead>Plays</TableHead>
-          <TableHead>Last played</TableHead>
-          <TableHead className="text-right">Actions</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {recordings.map((r) => (
-          <TableRow key={r.id}>
-            <TableCell className="font-medium">
-              <Link href={`/recordings/${r.id}`} className="hover:underline">
-                {r.name}
-              </Link>
-            </TableCell>
-            <TableCell className="bp-readout">{formatDuration(r.durationMs)}</TableCell>
-            <TableCell>
-              <Badge variant="secondary" className="bp-readout">
-                {r.playCount}
-              </Badge>
-            </TableCell>
-            <TableCell className="bp-readout text-muted-foreground">
-              {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
-            </TableCell>
-            <TableCell className="flex justify-end gap-1">
-              <Button asChild variant="ghost" size="icon-sm">
-                <Link href={`/recordings/${r.id}/replay`} aria-label="Replay">
-                  <Play className="size-3.5" />
-                </Link>
-              </Button>
-              <Button variant="ghost" size="icon-sm" onClick={() => void handleDelete(r.id)} aria-label="Delete">
-                <Trash2 className="size-3.5" />
-              </Button>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-}

components/sessions/DeviceRemapDialog.tsx

@@ -12,12 +12,11 @@ import {
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { autoMapDeviceSlots } from "@/lib/buttplug/device-remap";
-import type { RecordingDeviceSlot } from "@/lib/db/schema";
-import type { ConnectedDeviceInfo } from "@/lib/buttplug/types";
+import type { ReplayDeviceSlot, ConnectedDeviceInfo } from "@/lib/buttplug/types";
 
 interface DeviceRemapDialogProps {
   open: boolean;
-  deviceSlots: RecordingDeviceSlot[];
+  deviceSlots: ReplayDeviceSlot[];
   connectedDevices: ConnectedDeviceInfo[];
   onCancel: () => void;
   onConfirm: (mapping: Map<number, number>) => void;

components/sessions/ReplayPlayer.tsx

@@ -8,21 +8,19 @@ import { Slider } from "@/components/ui/slider";
 import { DeviceScanPanel } from "@/components/control/DeviceScanPanel";
 import { DeviceRemapDialog } from "./DeviceRemapDialog";
 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 { SessionPlayer, type SessionEventRow } from "@/lib/buttplug/player";
 import { useButtplugStore } from "@/lib/buttplug/store";
-import type { ActuatorInfo } from "@/lib/buttplug/types";
-import type { RecordingDeviceSlot } from "@/lib/db/schema";
+import type { ActuatorInfo, ReplayDeviceSlot } from "@/lib/buttplug/types";
 import { Pause, Play } from "lucide-react";
 
-interface RecordingResponse {
-  recording: {
+interface ReplayDataResponse {
+  session: {
     id: number;
-    name: string;
+    name: string | null;
     durationMs: number;
-    deviceSlots: RecordingDeviceSlot[];
   };
-  events: RecordingEventRow[];
+  deviceSlots: ReplayDeviceSlot[];
+  events: SessionEventRow[];
 }
 
 function formatTime(ms: number): string {
@@ -30,29 +28,28 @@ function formatTime(ms: number): string {
   return `${Math.floor(totalSeconds / 60)}:${(totalSeconds % 60).toString().padStart(2, "0")}`;
 }
 
-export function ReplayPlayer({ recordingId }: { recordingId: number }) {
+export function ReplayPlayer({ sessionId }: { sessionId: number }) {
   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 [data, setData] = useState<ReplayDataResponse | null>(null);
   const [showRemap, setShowRemap] = useState(false);
   const [starting, setStarting] = useState(false);
-  const [player, setPlayer] = useState<RecordingPlayer | null>(null);
+  const [player, setPlayer] = useState<SessionPlayer | 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}`)
+    fetch(`/api/sessions/${sessionId}/replay`)
       .then((r) => r.json())
       .then(setData)
-      .catch(() => toast.error("Could not load recording"));
-  }, [recordingId]);
+      .catch(() => toast.error("Could not load session"));
+  }, [sessionId]);
 
   useEffect(() => {
     return () => {
@@ -76,41 +73,21 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
     setStarting(true);
 
     try {
-      const orderedSlots = data.recording.deviceSlots.filter((s) => mapping.has(s.sourceSessionDeviceId));
+      const orderedSlots = data.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, deviceName: device.displayName ?? device.name };
       });
 
-      const body = {
-        kind: "replay" as const,
-        replayedRecordingId: data.recording.id,
-        devices: orderedSlots.map((slot, i) => ({ slotLabel: slot.slotLabel, bleName: targets[i].deviceName })),
-      };
+      // Replaying creates no session or events of its own - it just plays this
+      // session's already-recorded events back onto the mapped devices, and
+      // marks it as replayed (playCount/lastPlayedAt).
+      void fetch(`/api/sessions/${data.session.id}/replay`, { method: "POST" }).catch(() => {});
 
-      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();
-
-      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);
-        }
-      });
+      // `mapping` is already keyed by the source session's session_device id
+      // (see DeviceRemapDialog), exactly what SessionPlayer needs.
+      const sessionDeviceIdToDeviceIndex = mapping;
 
       const actuatorsByDeviceIndex = new Map<number, ActuatorInfo[]>(
         connectedDevices.map((d) => [d.index, d.actuators]),
@@ -129,28 +106,21 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
       );
 
       const { runtime } = await getButtplugClientHandle();
-      const instance = new RecordingPlayer({
+      const instance = new SessionPlayer({
         events: data.events,
-        durationMs: data.recording.durationMs,
+        durationMs: data.session.durationMs,
         sessionDeviceIdToDeviceIndex,
         actuatorsByDeviceIndex,
         runtime,
         onProgress: (elapsed) => setElapsedMs(elapsed),
         onError: (message) => toast.error(`Replay command failed: ${message}`),
-        onComplete: async () => {
+        onComplete: () => {
           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);
@@ -162,20 +132,20 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
   }
 
   if (!data) {
-    return <p className="text-sm text-muted-foreground">Loading recording...</p>;
+    return <p className="text-sm text-muted-foreground">Loading session...</p>;
   }
 
   return (
     <div className="flex flex-col gap-6">
       <Card className="bp-glass">
         <CardHeader>
-          <CardTitle>{data.recording.name}</CardTitle>
+          <CardTitle>{data.session.name ?? `Session #${data.session.id}`}</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-4">
           {!player ? (
             <>
               <p className="text-sm text-muted-foreground">
-                Connect the devices you want to replay onto, then match them to the recording&apos;s
+                Connect the devices you want to replay onto, then match them to the session&apos;s
                 original device slots.
               </p>
               <div className="flex items-center gap-3">
@@ -211,12 +181,12 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
               )}
               <Slider
                 value={[elapsedMs]}
-                max={data.recording.durationMs}
+                max={data.session.durationMs}
                 onValueChange={([v]) => player.seek(v)}
               />
               <div className="flex items-center justify-between">
                 <span className="bp-readout text-xs text-muted-foreground">
-                  {formatTime(elapsedMs)} / {formatTime(data.recording.durationMs)}
+                  {formatTime(elapsedMs)} / {formatTime(data.session.durationMs)}
                 </span>
                 <div className="flex items-center gap-2">
                   <Button
@@ -246,14 +216,6 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
                       player.stop();
                       setPlaying(false);
                       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
@@ -268,7 +230,6 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
                       setPlayer(null);
                       setReplayTargets([]);
                       setReplayDeviceIndexes([]);
-                      setActiveSessionId(null);
                     }}
                   >
                     Stop
@@ -282,7 +243,7 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
 
       <DeviceRemapDialog
         open={showRemap}
-        deviceSlots={data.recording.deviceSlots}
+        deviceSlots={data.deviceSlots}
         connectedDevices={connectedDevices}
         onCancel={() => setShowRemap(false)}
         onConfirm={(mapping) => void handleConfirmRemap(mapping)}

components/sessions/ReplayPlayerLoader.tsx

@@ -8,6 +8,6 @@ const ReplayPlayer = dynamic(() => import("./ReplayPlayer").then((m) => m.Replay
   loading: () => <Skeleton className="h-64 w-full" />,
 });
 
-export function ReplayPlayerLoader({ recordingId }: { recordingId: number }) {
-  return <ReplayPlayer recordingId={recordingId} />;
+export function ReplayPlayerLoader({ sessionId }: { sessionId: number }) {
+  return <ReplayPlayer sessionId={sessionId} />;
 }

components/sessions/SessionsTable.tsx

@@ -14,23 +14,23 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Trash2 } from "lucide-react";
+import { Play, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
-interface BlockingRecording {
-  id: number;
-  name: string;
-}
-
 export interface SessionRow {
   id: number;
   name: string | null;
-  kind: "live" | "replay";
   status: "active" | "completed" | "aborted";
   startedAt: number;
   durationMs: number | null;
 }
 
+const STATUS_VARIANT = {
+  active: "default",
+  completed: "secondary",
+  aborted: "destructive",
+} as const;
+
 function formatDuration(ms: number | null): string {
   if (ms === null) return "-";
   const totalSeconds = Math.round(ms / 1000);
@@ -41,30 +41,17 @@ 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 [pendingDelete, setPendingDelete] = useState<SessionRow | null>(null);
   const [deleting, setDeleting] = useState(false);
 
-  async function handleDelete(id: number) {
-    const res = await fetch(`/api/play-sessions/${id}`, { method: "DELETE" });
-    if (res.ok) {
-      toast.success("Session deleted");
-      router.refresh();
-    } else if (res.status === 409) {
-      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;
+  async function handleDelete() {
+    if (!pendingDelete) return;
     setDeleting(true);
-    const res = await fetch(`/api/play-sessions/${conflict.id}?cascade=true`, { method: "DELETE" });
+    const res = await fetch(`/api/sessions/${pendingDelete.id}`, { method: "DELETE" });
     setDeleting(false);
     if (res.ok) {
-      toast.success("Session and recording deleted");
-      setConflict(null);
+      toast.success("Session deleted");
+      setPendingDelete(null);
       router.refresh();
     } else {
       toast.error("Could not delete session");
@@ -81,7 +68,6 @@ export function SessionsTable({ sessions }: { sessions: SessionRow[] }) {
         <TableHeader>
           <TableRow>
             <TableHead>Session</TableHead>
-            <TableHead>Kind</TableHead>
             <TableHead>Status</TableHead>
             <TableHead>Started</TableHead>
             <TableHead>Duration</TableHead>
@@ -97,15 +83,21 @@ export function SessionsTable({ sessions }: { sessions: SessionRow[] }) {
                 </Link>
               </TableCell>
               <TableCell>
-                <Badge variant={s.kind === "live" ? "default" : "secondary"}>{s.kind}</Badge>
+                <Badge variant={STATUS_VARIANT[s.status]}>{s.status}</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">
+              <TableCell className="flex justify-end gap-1">
+                {s.status === "completed" && s.durationMs !== null && (
+                  <Button asChild variant="ghost" size="icon-sm">
+                    <Link href={`/sessions/${s.id}/replay`} aria-label="Replay">
+                      <Play className="size-3.5" />
+                    </Link>
+                  </Button>
+                )}
+                <Button variant="ghost" size="icon-sm" onClick={() => setPendingDelete(s)} aria-label="Delete">
                   <Trash2 className="size-3.5" />
                 </Button>
               </TableCell>
@@ -114,24 +106,24 @@ export function SessionsTable({ sessions }: { sessions: SessionRow[] }) {
         </TableBody>
       </Table>
 
-      <Dialog open={conflict !== null} onOpenChange={(open) => !open && setConflict(null)}>
+      <Dialog open={pendingDelete !== null} onOpenChange={(open) => !open && setPendingDelete(null)}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Delete session and recording?</DialogTitle>
+            <DialogTitle>Delete session?</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.
+              This permanently deletes{" "}
+              <span className="font-medium text-foreground">
+                {pendingDelete?.name ?? `Session #${pendingDelete?.id}`}
+              </span>{" "}
+              and all of its recorded events. This can&apos;t be undone.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button variant="ghost" onClick={() => setConflict(null)}>
+            <Button variant="ghost" onClick={() => setPendingDelete(null)}>
               Cancel
             </Button>
-            <Button variant="destructive" onClick={() => void handleCascadeDelete()} disabled={deleting}>
-              {deleting ? "Deleting..." : "Delete both"}
+            <Button variant="destructive" onClick={() => void handleDelete()} disabled={deleting}>
+              {deleting ? "Deleting..." : "Delete"}
             </Button>
           </DialogFooter>
         </DialogContent>

components/stats/RecordingLibraryStats.tsx

@@ -1,65 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-
-export interface RecordingLibrarySummary {
-  count: number;
-  avgDurationMs: number;
-  totalPlayCount: number;
-  list: { id: number; name: string; durationMs: number; playCount: number; lastPlayedAt: number | null }[];
-}
-
-export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummary }) {
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="grid gap-4 sm:grid-cols-3">
-        <Card className="bp-glass">
-          <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">Recordings</CardTitle>
-          </CardHeader>
-          <CardContent className="bp-readout text-3xl">{stats.count}</CardContent>
-        </Card>
-        <Card className="bp-glass">
-          <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">Avg length</CardTitle>
-          </CardHeader>
-          <CardContent className="bp-readout text-3xl">
-            {Math.round(stats.avgDurationMs / 1000)}s
-          </CardContent>
-        </Card>
-        <Card className="bp-glass">
-          <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">Total plays</CardTitle>
-          </CardHeader>
-          <CardContent className="bp-readout text-3xl">{stats.totalPlayCount}</CardContent>
-        </Card>
-      </div>
-
-      {stats.list.length > 0 && (
-        <Card className="bp-glass">
-          <CardContent>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Recording</TableHead>
-                  <TableHead>Plays</TableHead>
-                  <TableHead>Last played</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {stats.list.map((r) => (
-                  <TableRow key={r.id}>
-                    <TableCell className="font-medium">{r.name}</TableCell>
-                    <TableCell className="bp-readout">{r.playCount}</TableCell>
-                    <TableCell className="bp-readout text-muted-foreground">
-                      {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
-}

components/stats/SessionsSummaryCards.tsx

@@ -4,7 +4,7 @@ export interface SessionsSummary {
   count: number;
   totalDurationMs: number;
   avgDurationMs: number;
-  byKind: { kind: "live" | "replay"; count: number; totalDurationMs: number }[];
+  totalReplays: number;
   durationPerDevice: { deviceId: number; displayName: string | null; bleName: string; totalActiveMs: number }[];
 }
 
@@ -13,9 +13,6 @@ function formatHours(ms: number): string {
 }
 
 export function SessionsSummaryCards({ summary }: { summary: SessionsSummary }) {
-  const liveCount = summary.byKind.find((k) => k.kind === "live")?.count ?? 0;
-  const replayCount = summary.byKind.find((k) => k.kind === "replay")?.count ?? 0;
-
   return (
     <div className="flex flex-col gap-4">
       <div className="grid gap-4 sm:grid-cols-3">
@@ -41,9 +38,7 @@ export function SessionsSummaryCards({ summary }: { summary: SessionsSummary })
         </Card>
       </div>
       <Card className="bp-glass">
-        <CardContent className="py-3 text-sm text-muted-foreground">
-          {liveCount} live · {replayCount} replay
-        </CardContent>
+        <CardContent className="py-3 text-sm text-muted-foreground">Replayed {summary.totalReplays}×</CardContent>
       </Card>
       {summary.durationPerDevice.length > 0 && (
         <Card className="bp-glass">