Initial implementation of Bluetooth toy control app

Next.js app with a browser-side buttplug/buttplug-wasm control layer
(server never touches real-time device commands), SQLite storage via
Drizzle, single-secret auth, recordings/replay with device remapping,
a usage stats dashboard, Docker deployment, and Gitea CI.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb

app/(app)/control/page.tsx

@@ -0,0 +1,16 @@
+import { ButtplugConsoleLoader as ButtplugConsole } from "@/components/control/ButtplugConsoleLoader";
+
+export default function ControlPage() {
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="font-display text-2xl font-semibold">Control</h1>
+        <p className="text-sm text-muted-foreground">
+          Scan for devices, connect, and control them live. Every command runs directly from your browser
+          to the device over Web Bluetooth - the server never sees it in real time.
+        </p>
+      </div>
+      <ButtplugConsole />
+    </div>
+  );
+}

app/(app)/devices/page.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { DevicesTable } from "@/components/devices/DevicesTable";
+import { listDevices } from "@/lib/db/queries/devices";
+
+export const dynamic = "force-dynamic";
+
+export default async function DevicesPage() {
+  const devices = await listDevices();
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="font-display text-2xl font-semibold">Devices</h1>
+        <p className="text-sm text-muted-foreground">Devices seen across past sessions. Give them friendlier names.</p>
+      </div>
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-base">Known devices</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DevicesTable devices={devices} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(app)/layout.tsx

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

app/(app)/page.tsx

@@ -0,0 +1,103 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { listRecordings } from "@/lib/db/queries/recordings";
+import { listPlaySessions } from "@/lib/db/queries/play-sessions";
+import { getSessionsSummary } from "@/lib/db/queries/stats";
+
+// Always reflects live DB state for an authenticated, single-tenant app -
+// never worth prerendering (and the DB file doesn't exist at build time).
+export const dynamic = "force-dynamic";
+
+export default async function DashboardPage() {
+  const [recordings, sessions, summary] = await Promise.all([
+    listRecordings(),
+    listPlaySessions(),
+    getSessionsSummary(),
+  ]);
+
+  const recentRecordings = recordings.slice(0, 5);
+  const recentSessions = [...sessions].reverse().slice(0, 5);
+
+  return (
+    <div className="flex flex-col gap-8">
+      <Card className="bp-glass overflow-hidden">
+        <CardContent className="flex flex-col items-start gap-4 py-8">
+          <h1 className="font-display bp-gradient-text 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.
+          </p>
+          <Button asChild size="lg">
+            <Link href="/control">Start a session</Link>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground">Completed sessions</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-3xl">{summary.count}</CardContent>
+        </Card>
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground">Total play time</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-3xl">
+            {(summary.totalDurationMs / 3_600_000).toFixed(1)}h
+          </CardContent>
+        </Card>
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground">Saved recordings</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-3xl">{recordings.length}</CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle>Recent recordings</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2">
+            {recentRecordings.length === 0 && (
+              <p className="text-sm text-muted-foreground">Nothing saved yet.</p>
+            )}
+            {recentRecordings.map((r) => (
+              <Link
+                key={r.id}
+                href={`/recordings/${r.id}`}
+                className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
+              >
+                <span>{r.name}</span>
+                <span className="text-muted-foreground">{r.playCount} plays</span>
+              </Link>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle>Recent sessions</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2">
+            {recentSessions.length === 0 && <p className="text-sm text-muted-foreground">No sessions yet.</p>}
+            {recentSessions.map((s) => (
+              <Link
+                key={s.id}
+                href={`/sessions/${s.id}`}
+                className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
+              >
+                <span>{s.name ?? `Session #${s.id}`}</span>
+                <span className="text-muted-foreground">{new Date(s.startedAt).toLocaleDateString()}</span>
+              </Link>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

app/(app)/recordings/[id]/page.tsx

@@ -0,0 +1,74 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getRecording } from "@/lib/db/queries/recordings";
+import { Play } from "lucide-react";
+
+export const dynamic = "force-dynamic";
+
+function formatDuration(ms: number): string {
+  const totalSeconds = Math.round(ms / 1000);
+  return `${Math.floor(totalSeconds / 60)}:${(totalSeconds % 60).toString().padStart(2, "0")}`;
+}
+
+export default async function RecordingDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const result = await getRecording(Number(id));
+  if (!result) notFound();
+
+  const { recording } = result;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="font-display text-2xl font-semibold">{recording.name}</h1>
+          {recording.description && <p className="text-sm text-muted-foreground">{recording.description}</p>}
+        </div>
+        <Button asChild>
+          <Link href={`/recordings/${recording.id}/replay`}>
+            <Play className="size-4" /> Replay
+          </Link>
+        </Button>
+      </div>
+
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-base">Details</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-2 text-sm sm:grid-cols-2">
+          <div>
+            <span className="text-muted-foreground">Duration: </span>
+            {formatDuration(recording.durationMs)}
+          </div>
+          <div>
+            <span className="text-muted-foreground">Plays: </span>
+            {recording.playCount}
+          </div>
+          <div>
+            <span className="text-muted-foreground">Created: </span>
+            {new Date(recording.createdAt).toLocaleString()}
+          </div>
+          <div>
+            <span className="text-muted-foreground">Last played: </span>
+            {recording.lastPlayedAt ? new Date(recording.lastPlayedAt).toLocaleString() : "Never"}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-base">Devices in this recording</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-1">
+          {recording.deviceSlots.map((slot) => (
+            <div key={slot.sourceSessionDeviceId} className="text-sm">
+              {slot.slotLabel} <span className="text-muted-foreground">({slot.recordedBleName})</span>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(app)/recordings/[id]/replay/page.tsx

@@ -0,0 +1,11 @@
+import { ReplayPlayerLoader } from "@/components/recordings/ReplayPlayerLoader";
+
+export default async function ReplayPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return (
+    <div className="flex flex-col gap-6">
+      <h1 className="font-display text-2xl font-semibold">Replay</h1>
+      <ReplayPlayerLoader recordingId={Number(id)} />
+    </div>
+  );
+}

app/(app)/recordings/page.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { RecordingsTable } from "@/components/recordings/RecordingsTable";
+import { listRecordings } from "@/lib/db/queries/recordings";
+
+export const dynamic = "force-dynamic";
+
+export default async function RecordingsPage() {
+  const recordings = await listRecordings();
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="font-display text-2xl font-semibold">Recordings</h1>
+        <p className="text-sm text-muted-foreground">Saved sessions you can replay against connected devices.</p>
+      </div>
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-base">Library</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <RecordingsTable recordings={recordings} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(app)/sessions/[id]/page.tsx

@@ -0,0 +1,53 @@
+import { notFound } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { SessionTimelineChart } from "@/components/sessions/SessionTimelineChart";
+import { getPlaySessionDetail } from "@/lib/db/queries/play-sessions";
+import { getSessionTimeline } from "@/lib/db/queries/stats";
+
+export const dynamic = "force-dynamic";
+
+function formatDuration(ms: number | null): string {
+  if (ms === null) return "-";
+  const totalSeconds = Math.round(ms / 1000);
+  return `${Math.floor(totalSeconds / 60)}:${(totalSeconds % 60).toString().padStart(2, "0")}`;
+}
+
+export default async function SessionDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const sessionId = Number(id);
+  const [detail, timeline] = await Promise.all([getPlaySessionDetail(sessionId), getSessionTimeline(sessionId)]);
+  if (!detail) notFound();
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="font-display text-2xl font-semibold">{detail.session.name ?? `Session #${detail.session.id}`}</h1>
+        <p className="text-sm text-muted-foreground">
+          {detail.session.kind} · {detail.session.status} · {formatDuration(detail.session.durationMs)}
+        </p>
+      </div>
+
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-base">Intensity timeline</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <SessionTimelineChart timeline={timeline} />
+        </CardContent>
+      </Card>
+
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-base">Devices</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-1">
+          {detail.devices.map((d) => (
+            <div key={d.id} className="text-sm">
+              {d.slotLabel} <span className="text-muted-foreground">({d.deviceDisplayName ?? d.deviceBleName})</span>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(app)/sessions/page.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { SessionsTable } from "@/components/sessions/SessionsTable";
+import { listPlaySessions } from "@/lib/db/queries/play-sessions";
+
+export const dynamic = "force-dynamic";
+
+export default async function SessionsPage() {
+  const sessions = [...(await listPlaySessions())].reverse();
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="font-display text-2xl font-semibold">Sessions</h1>
+        <p className="text-sm text-muted-foreground">History of live control and replay sessions.</p>
+      </div>
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-base">History</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <SessionsTable sessions={sessions} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(app)/stats/page.tsx

@@ -0,0 +1,45 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { SessionsSummaryCards } from "@/components/stats/SessionsSummaryCards";
+import { DeviceUsageTable } from "@/components/stats/DeviceUsageTable";
+import { RecordingLibraryStats } from "@/components/stats/RecordingLibraryStats";
+import { getDeviceCommandCounts, getDeviceUsageStats, getRecordingLibraryStats, getSessionsSummary } from "@/lib/db/queries/stats";
+
+export const dynamic = "force-dynamic";
+
+export default async function StatsPage() {
+  const [sessionsSummary, deviceUsage, commandCounts, recordingStats] = await Promise.all([
+    getSessionsSummary(),
+    getDeviceUsageStats(),
+    getDeviceCommandCounts(),
+    getRecordingLibraryStats(),
+  ]);
+
+  const commandCountByDevice = new Map(commandCounts.map((c) => [c.deviceId, c.commandCount]));
+  const devices = deviceUsage.map((d) => ({ ...d, commandCount: commandCountByDevice.get(d.deviceId) ?? 0 }));
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="font-display text-2xl font-semibold">Stats</h1>
+        <p className="text-sm text-muted-foreground">Usage across sessions, devices, and your recording library.</p>
+      </div>
+
+      <Tabs defaultValue="sessions">
+        <TabsList>
+          <TabsTrigger value="sessions">Sessions</TabsTrigger>
+          <TabsTrigger value="devices">Devices</TabsTrigger>
+          <TabsTrigger value="recordings">Recordings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="sessions" className="pt-4">
+          <SessionsSummaryCards summary={sessionsSummary} />
+        </TabsContent>
+        <TabsContent value="devices" className="pt-4">
+          <DeviceUsageTable devices={devices} />
+        </TabsContent>
+        <TabsContent value="recordings" className="pt-4">
+          <RecordingLibraryStats stats={recordingStats} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}