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
2026-08-25 07:51:38 +02:00
commit 1119c8eea0
112 changed files with 15522 additions and 0 deletions
@@ -0,0 +1,72 @@
+"use client";
+
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart";
+
+export interface TimelineRow {
+  bucket: number;
+  sessionDeviceId: number;
+  slotLabel: string;
+  avgValue: number;
+  maxValue: number;
+}
+
+const SERIES_COLORS = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"];
+
+// Chart config keys become raw CSS custom-property names (--color-<key>), so
+// they must be safe identifiers - a user-chosen device display name isn't.
+// Use the numeric session_device_id as the key, slotLabel only as display text.
+function seriesKey(sessionDeviceId: number): string {
+  return `device_${sessionDeviceId}`;
+}
+
+export function SessionTimelineChart({ timeline }: { timeline: TimelineRow[] }) {
+  const series = [...new Map(timeline.map((r) => [r.sessionDeviceId, r.slotLabel])).entries()];
+  const buckets = [...new Set(timeline.map((r) => r.bucket))].sort((a, b) => a - b);
+
+  const data = buckets.map((bucket) => {
+    const row: Record<string, number> = { bucket };
+    for (const [sessionDeviceId] of series) {
+      const match = timeline.find((r) => r.bucket === bucket && r.sessionDeviceId === sessionDeviceId);
+      row[seriesKey(sessionDeviceId)] = match ? Math.round(match.avgValue * 100) : 0;
+    }
+    return row;
+  });
+
+  const config: ChartConfig = Object.fromEntries(
+    series.map(([sessionDeviceId, slotLabel], i) => [
+      seriesKey(sessionDeviceId),
+      { label: slotLabel, color: SERIES_COLORS[i % SERIES_COLORS.length] },
+    ]),
+  );
+
+  if (timeline.length === 0) {
+    return <p className="text-sm text-muted-foreground">No device activity recorded for this session.</p>;
+  }
+
+  return (
+    <ChartContainer config={config} className="h-64 w-full">
+      <LineChart data={data}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="bucket"
+          tickFormatter={(v: number) => `${Math.round(v / 1000)}s`}
+          tickLine={false}
+          axisLine={false}
+        />
+        <YAxis domain={[0, 100]} tickLine={false} axisLine={false} width={32} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        {series.map(([sessionDeviceId]) => (
+          <Line
+            key={sessionDeviceId}
+            type="monotone"
+            dataKey={seriesKey(sessionDeviceId)}
+            stroke={`var(--color-${seriesKey(sessionDeviceId)})`}
+            strokeWidth={2}
+            dot={false}
+          />
+        ))}
+      </LineChart>
+    </ChartContainer>
+  );
+}
@@ -0,0 +1,83 @@
+"use client";
+
+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 { Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+export interface SessionRow {
+  id: number;
+  name: string | null;
+  kind: "live" | "replay";
+  status: "active" | "completed" | "aborted";
+  startedAt: number;
+  durationMs: number | null;
+}
+
+function formatDuration(ms: number | null): string {
+  if (ms === null) return "-";
+  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 SessionsTable({ sessions }: { sessions: SessionRow[] }) {
+  const router = useRouter();
+
+  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) {
+      toast.error("A saved recording still references this session");
+    } else {
+      toast.error("Could not delete session");
+    }
+  }
+
+  if (sessions.length === 0) {
+    return <p className="text-sm text-muted-foreground">No sessions yet.</p>;
+  }
+
+  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="text-muted-foreground">{new Date(s.startedAt).toLocaleString()}</TableCell>
+            <TableCell>{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>
+  );
+}