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>

lib/buttplug/player.ts

@@ -14,6 +14,11 @@ export interface RecordingEventRow {
 
 export interface PlayerOptions {
   events: RecordingEventRow[];
+  /** The recording's actual duration (recordings.durationMs from the DB) - this is the source
+   *  of truth for playback length, NOT the last event's timestamp: a recording can run for a
+   *  while after its last command (e.g. the user stopped the toy but let the session continue),
+   *  so deriving duration from events would end playback early and misreport it as "finished". */
+  durationMs: number;
   /** Recording's session_device_id -> currently-connected device index, from the remap step. */
   sessionDeviceIdToDeviceIndex: Map<number, number>;
   actuatorsByDeviceIndex: Map<number, ActuatorInfo[]>;
@@ -21,6 +26,7 @@ export interface PlayerOptions {
   speed?: number;
   onProgress?: (elapsedMs: number, durationMs: number) => void;
   onComplete?: () => void;
+  onError?: (message: string) => void;
 }
 
 /**
@@ -37,7 +43,7 @@ export class RecordingPlayer {
   private playing = false;
 
   constructor(private readonly options: PlayerOptions) {
-    this.durationMs = options.events.at(-1)?.tsMs ?? 0;
+    this.durationMs = options.durationMs;
   }
 
   get isPlaying(): boolean {
@@ -108,29 +114,32 @@ export class RecordingPlayer {
     const deviceIndex = this.options.sessionDeviceIdToDeviceIndex.get(event.sessionDeviceId);
     if (deviceIndex === undefined) return;
 
-    const device = await getDevice(deviceIndex);
-    if (!device) return;
+    try {
+      const device = await getDevice(deviceIndex);
+      if (!device) return;
 
-    eventBuffer.record({
-      deviceIndex,
-      commandType: event.commandType,
-      featureIndex: event.featureIndex,
-      value: event.value,
-      durationMs: event.durationMs ?? undefined,
-    });
+      if (event.commandType === "stop") {
+        await device.stop();
+      } else {
+        const actuator = this.options.actuatorsByDeviceIndex
+          .get(deviceIndex)
+          ?.find((a) => a.featureIndex === event.featureIndex);
+        const feature = findFeature(device, event.featureIndex);
+        if (!actuator || !feature) return;
 
-    if (event.commandType === "stop") {
-      await device.stop();
-      return;
+        const cmd = buildOutputCommand(this.options.runtime, actuator, event.value, event.durationMs ?? undefined);
+        await feature.runOutput(cmd);
+      }
+
+      eventBuffer.record({
+        deviceIndex,
+        commandType: event.commandType,
+        featureIndex: event.featureIndex,
+        value: event.value,
+        durationMs: event.durationMs ?? undefined,
+      });
+    } catch (err) {
+      this.options.onError?.(err instanceof Error ? err.message : String(err));
     }
-
-    const actuator = this.options.actuatorsByDeviceIndex
-      .get(deviceIndex)
-      ?.find((a) => a.featureIndex === event.featureIndex);
-    const feature = findFeature(device, event.featureIndex);
-    if (!actuator || !feature) return;
-
-    const cmd = buildOutputCommand(this.options.runtime, actuator, event.value, event.durationMs ?? undefined);
-    await feature.runOutput(cmd);
   }
 }

lib/buttplug/store.ts

@@ -7,6 +7,8 @@ export const actuatorKey = (deviceIndex: number, featureIndex: number): string =
 interface ButtplugStoreState {
   connected: boolean;
   scanning: boolean;
+  /** Whether a play session is actively being recorded (see ButtplugConsole's session lifecycle). */
+  recording: boolean;
   devices: Record<number, ConnectedDeviceInfo>;
   /** Last-known slider value per `${deviceIndex}:${featureIndex}`, for UI display only. */
   actuatorValues: Record<string, number>;
@@ -15,6 +17,7 @@ interface ButtplugStoreState {
   error: string | null;
   setConnected: (connected: boolean) => void;
   setScanning: (scanning: boolean) => void;
+  setRecording: (recording: boolean) => void;
   upsertDevice: (device: ConnectedDeviceInfo) => void;
   removeDevice: (index: number) => void;
   setActuatorValue: (deviceIndex: number, featureIndex: number, value: number) => void;
@@ -26,12 +29,14 @@ interface ButtplugStoreState {
 export const useButtplugStore = create<ButtplugStoreState>((set) => ({
   connected: false,
   scanning: false,
+  recording: false,
   devices: {},
   actuatorValues: {},
   batteryLevels: {},
   error: null,
   setConnected: (connected) => set({ connected }),
   setScanning: (scanning) => set({ scanning }),
+  setRecording: (recording) => set({ recording }),
   upsertDevice: (device) => set((s) => ({ devices: { ...s.devices, [device.index]: device } })),
   removeDevice: (index) =>
     set((s) => {
@@ -48,5 +53,6 @@ export const useButtplugStore = create<ButtplugStoreState>((set) => ({
   setBatteryLevel: (deviceIndex, level) =>
     set((s) => ({ batteryLevels: { ...s.batteryLevels, [deviceIndex]: level } })),
   setError: (message) => set({ error: message }),
-  reset: () => set({ connected: false, scanning: false, devices: {}, actuatorValues: {}, batteryLevels: {} }),
+  reset: () =>
+    set({ connected: false, scanning: false, recording: false, devices: {}, actuatorValues: {}, batteryLevels: {} }),
 }));

lib/db/queries/devices.ts

@@ -1,11 +1,23 @@
-import { eq } from "drizzle-orm";
+import { desc, eq, sql } from "drizzle-orm";
 import { db } from "@/lib/db/client";
 import { devices, type DeviceCapabilities } from "@/lib/db/schema";
+import { PAGE_SIZE, type Page } from "@/lib/pagination";
 
 export async function listDevices() {
   return db.select().from(devices).orderBy(devices.lastConnectedAt);
 }
 
+export async function listDevicesPage(page: number, pageSize = PAGE_SIZE): Promise<Page<typeof devices.$inferSelect>> {
+  const [{ count }] = await db.select({ count: sql<number>`count(*)` }).from(devices);
+  const items = await db
+    .select()
+    .from(devices)
+    .orderBy(desc(devices.lastConnectedAt))
+    .limit(pageSize)
+    .offset((page - 1) * pageSize);
+  return { items, page, pageSize, total: count };
+}
+
 export async function getDevice(id: number) {
   const [row] = await db.select().from(devices).where(eq(devices.id, id));
   return row;

lib/db/queries/play-sessions.ts

@@ -1,9 +1,10 @@
-import { eq } from "drizzle-orm";
+import { desc, eq, sql } from "drizzle-orm";
 import { db } from "@/lib/db/client";
-import { playSessions, sessionDevices, devices } from "@/lib/db/schema";
+import { playSessions, sessionDevices, devices, recordings } from "@/lib/db/schema";
 import { upsertDeviceByBleName } from "./devices";
 import { incrementPlayCount } from "./recordings";
 import type { DeviceCapabilities } from "@/lib/db/schema";
+import { PAGE_SIZE, type Page } from "@/lib/pagination";
 
 export interface StartSessionDeviceInput {
   slotLabel: string;
@@ -86,6 +87,23 @@ export async function listPlaySessions() {
   return db.select().from(playSessions).orderBy(playSessions.startedAt);
 }
 
+export async function listPlaySessionsPage(page: number, pageSize = PAGE_SIZE): Promise<Page<typeof playSessions.$inferSelect>> {
+  const [{ count }] = await db.select({ count: sql<number>`count(*)` }).from(playSessions);
+  const items = await db
+    .select()
+    .from(playSessions)
+    .orderBy(desc(playSessions.startedAt))
+    .limit(pageSize)
+    .offset((page - 1) * pageSize);
+  return { items, page, pageSize, total: count };
+}
+
+/** Lightweight name-only lookup for page titles - avoids getPlaySessionDetail's device join. */
+export async function getPlaySessionName(id: number): Promise<string | null | undefined> {
+  const [row] = await db.select({ name: playSessions.name }).from(playSessions).where(eq(playSessions.id, id));
+  return row?.name;
+}
+
 export async function getPlaySessionDetail(id: number) {
   const [session] = await db.select().from(playSessions).where(eq(playSessions.id, id));
   if (!session) return undefined;
@@ -107,6 +125,9 @@ export async function getPlaySessionDetail(id: number) {
   return { session, devices: sessionDeviceRows };
 }
 
-export async function deletePlaySession(id: number) {
+export async function deletePlaySession(id: number, options?: { cascade?: boolean }) {
+  if (options?.cascade) {
+    await db.delete(recordings).where(eq(recordings.sourcePlaySessionId, id));
+  }
   await db.delete(playSessions).where(eq(playSessions.id, id));
 }

lib/db/queries/recordings.ts

@@ -1,7 +1,8 @@
-import { desc, eq } from "drizzle-orm";
+import { desc, eq, sql } from "drizzle-orm";
 import { db } from "@/lib/db/client";
 import { recordings, sessionDevices, devices, playSessions, type RecordingDeviceSlot } from "@/lib/db/schema";
 import { getEventsForSession } from "./session-events";
+import { PAGE_SIZE, type Page } from "@/lib/pagination";
 
 /**
  * A recording is a thin pointer over an already-captured play_session, not a
@@ -60,6 +61,30 @@ export async function listRecordings() {
   return db.select().from(recordings).orderBy(desc(recordings.createdAt));
 }
 
+export async function listRecordingsPage(page: number, pageSize = PAGE_SIZE): Promise<Page<typeof recordings.$inferSelect>> {
+  const [{ count }] = await db.select({ count: sql<number>`count(*)` }).from(recordings);
+  const items = await db
+    .select()
+    .from(recordings)
+    .orderBy(desc(recordings.createdAt))
+    .limit(pageSize)
+    .offset((page - 1) * pageSize);
+  return { items, page, pageSize, total: count };
+}
+
+export async function getRecordingsForSession(playSessionId: number) {
+  return db
+    .select({ id: recordings.id, name: recordings.name })
+    .from(recordings)
+    .where(eq(recordings.sourcePlaySessionId, playSessionId));
+}
+
+/** Lightweight name-only lookup for page titles - avoids getRecording's event-table join. */
+export async function getRecordingName(id: number): Promise<string | undefined> {
+  const [row] = await db.select({ name: recordings.name }).from(recordings).where(eq(recordings.id, id));
+  return row?.name;
+}
+
 export async function getRecording(id: number) {
   const [recording] = await db.select().from(recordings).where(eq(recordings.id, id));
   if (!recording) return undefined;

lib/pagination.ts

@@ -0,0 +1,13 @@
+export const PAGE_SIZE = 20;
+
+export function parsePage(value: string | string[] | undefined): number {
+  const n = Number(Array.isArray(value) ? value[0] : value);
+  return Number.isInteger(n) && n > 0 ? n : 1;
+}
+
+export interface Page<T> {
+  items: T[];
+  page: number;
+  pageSize: number;
+  total: number;
+}