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>

app/(app)/page.tsx

@@ -2,8 +2,7 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { BrandMark } from "@/components/layout/BrandMark";
-import { listRecordings } from "@/lib/db/queries/recordings";
-import { listPlaySessions } from "@/lib/db/queries/play-sessions";
+import { listSessions } from "@/lib/db/queries/sessions";
 import { getSessionsSummary } from "@/lib/db/queries/stats";
 
 // Always reflects live DB state for an authenticated, single-tenant app -
@@ -11,13 +10,8 @@ import { getSessionsSummary } from "@/lib/db/queries/stats";
 export const dynamic = "force-dynamic";
 
 export default async function DashboardPage() {
-  const [recordings, sessions, summary] = await Promise.all([
-    listRecordings(),
-    listPlaySessions(),
-    getSessionsSummary(),
-  ]);
+  const [sessions, summary] = await Promise.all([listSessions(), getSessionsSummary()]);
 
-  const recentRecordings = recordings.slice(0, 5);
   const recentSessions = [...sessions].reverse().slice(0, 5);
 
   return (
@@ -27,7 +21,7 @@ export default async function DashboardPage() {
           <BrandMark size={48} animated className="rounded-[9px]" />
           <h1 className="font-heading 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
+            Scan for nearby devices, take control, and replay completed sessions later - all running
             directly from your browser over Web Bluetooth.
           </p>
           <Button asChild size="lg">
@@ -53,53 +47,31 @@ export default async function DashboardPage() {
         </Card>
         <Card className="bp-glass">
           <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">Saved recordings</CardTitle>
+            <CardTitle className="text-sm text-muted-foreground">Replays</CardTitle>
           </CardHeader>
-          <CardContent className="bp-readout text-3xl">{recordings.length}</CardContent>
+          <CardContent className="bp-readout text-3xl">{summary.totalReplays}</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">
-            {recentRecordings.length === 0 && (
-              <p className="text-sm text-muted-foreground">Nothing saved yet.</p>
-            )}
-            {recentRecordings.map((r, i) => (
-              <Link key={r.id} href={`/recordings/${r.id}`} className="group">
-                {i > 0 && <div className="bp-hairline" />}
-                <div className="flex items-center justify-between px-1 py-2 text-sm">
-                  <span className="group-hover:text-primary">{r.name}</span>
-                  <span className="bp-readout text-xs text-muted-foreground">{r.playCount} plays</span>
-                </div>
-              </Link>
-            ))}
-          </CardContent>
-        </Card>
-
-        <Card className="bp-glass">
-          <CardHeader>
-            <CardTitle>Recent sessions</CardTitle>
-          </CardHeader>
-          <CardContent className="flex flex-col">
-            {recentSessions.length === 0 && <p className="text-sm text-muted-foreground">No sessions yet.</p>}
-            {recentSessions.map((s, i) => (
-              <Link key={s.id} href={`/sessions/${s.id}`} className="group">
-                {i > 0 && <div className="bp-hairline" />}
-                <div className="flex items-center justify-between px-1 py-2 text-sm">
-                  <span className="group-hover:text-primary">{s.name ?? `Session #${s.id}`}</span>
-                  <span className="bp-readout text-xs text-muted-foreground">
-                    {new Date(s.startedAt).toLocaleDateString()}
-                  </span>
-                </div>
-              </Link>
-            ))}
-          </CardContent>
-        </Card>
-      </div>
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle>Recent sessions</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col">
+          {recentSessions.length === 0 && <p className="text-sm text-muted-foreground">No sessions yet.</p>}
+          {recentSessions.map((s, i) => (
+            <Link key={s.id} href={`/sessions/${s.id}`} className="group">
+              {i > 0 && <div className="bp-hairline" />}
+              <div className="flex items-center justify-between px-1 py-2 text-sm">
+                <span className="group-hover:text-primary">{s.name ?? `Session #${s.id}`}</span>
+                <span className="bp-readout text-xs text-muted-foreground">
+                  {new Date(s.startedAt).toLocaleDateString()}
+                </span>
+              </div>
+            </Link>
+          ))}
+        </CardContent>
+      </Card>
     </div>
   );
 }

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

@@ -1,81 +0,0 @@
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import type { Metadata } from "next";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { getRecording, getRecordingName } from "@/lib/db/queries/recordings";
-import { Play } from "lucide-react";
-
-export const dynamic = "force-dynamic";
-
-export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
-  const { id } = await params;
-  const name = await getRecordingName(Number(id));
-  return { title: name ?? "Recording" };
-}
-
-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-heading 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/page.tsx

@@ -1,36 +0,0 @@
-import type { Metadata } from "next";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { RecordingsTable } from "@/components/recordings/RecordingsTable";
-import { PageNav } from "@/components/shared/PageNav";
-import { listRecordingsPage } from "@/lib/db/queries/recordings";
-import { parsePage } from "@/lib/pagination";
-
-export const dynamic = "force-dynamic";
-export const metadata: Metadata = { title: "Recordings" };
-
-export default async function RecordingsPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ page?: string }>;
-}) {
-  const page = parsePage((await searchParams).page);
-  const { items: recordings, pageSize, total } = await listRecordingsPage(page);
-
-  return (
-    <div className="flex flex-col gap-6">
-      <div>
-        <h1 className="font-heading 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 className="flex flex-col gap-3">
-          <RecordingsTable recordings={recordings} />
-          <PageNav basePath="/recordings" page={page} pageSize={pageSize} total={total} />
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

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

@@ -1,15 +1,18 @@
+import Link from "next/link";
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { SessionTimelineChart } from "@/components/sessions/SessionTimelineChart";
-import { getPlaySessionDetail, getPlaySessionName } from "@/lib/db/queries/play-sessions";
+import { getSessionDetail, getSessionName } from "@/lib/db/queries/sessions";
 import { getSessionTimeline } from "@/lib/db/queries/stats";
+import { Play } from "lucide-react";
 
 export const dynamic = "force-dynamic";
 
 export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
   const { id } = await params;
-  const name = await getPlaySessionName(Number(id));
+  const name = await getSessionName(Number(id));
   return { title: name ?? `Session #${id}` };
 }
 
@@ -22,16 +25,40 @@ function formatDuration(ms: number | null): string {
 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)]);
+  const [detail, timeline] = await Promise.all([getSessionDetail(sessionId), getSessionTimeline(sessionId)]);
   if (!detail) notFound();
 
+  const canReplay = detail.session.status === "completed" && detail.session.durationMs !== null;
+
   return (
     <div className="flex flex-col gap-6">
-      <div>
-        <h1 className="font-heading 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 className="flex items-center justify-between gap-4">
+        <div>
+          <h1 className="font-heading text-2xl font-semibold">{detail.session.name ?? `Session #${detail.session.id}`}</h1>
+          <p className="text-sm text-muted-foreground">
+            {detail.session.status} · {formatDuration(detail.session.durationMs)}
+            {detail.session.kind === "replay" && detail.replayedFromName !== undefined && (
+              <> · replayed from {detail.replayedFromName ?? `session #${detail.session.replayedSessionId}`}</>
+            )}
+            {detail.session.playCount > 0 && (
+              <>
+                {" "}
+                · replayed {detail.session.playCount}×
+                {detail.session.lastPlayedAt && ` (last ${new Date(detail.session.lastPlayedAt).toLocaleString()})`}
+              </>
+            )}
+          </p>
+          {detail.session.description && (
+            <p className="mt-1 text-sm text-muted-foreground">{detail.session.description}</p>
+          )}
+        </div>
+        {canReplay && (
+          <Button asChild>
+            <Link href={`/sessions/${detail.session.id}/replay`}>
+              <Play className="size-4" /> Replay
+            </Link>
+          </Button>
+        )}
       </div>
 
       <Card className="bp-glass">

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

@@ -1,10 +1,10 @@
 import type { Metadata } from "next";
-import { ReplayPlayerLoader } from "@/components/recordings/ReplayPlayerLoader";
-import { getRecordingName } from "@/lib/db/queries/recordings";
+import { ReplayPlayerLoader } from "@/components/sessions/ReplayPlayerLoader";
+import { getSessionName } from "@/lib/db/queries/sessions";
 
 export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
   const { id } = await params;
-  const name = await getRecordingName(Number(id));
+  const name = await getSessionName(Number(id));
   return { title: name ? `Replay ${name}` : "Replay" };
 }
 
@@ -13,7 +13,7 @@ export default async function ReplayPage({ params }: { params: Promise<{ id: str
   return (
     <div className="flex flex-col gap-6">
       <h1 className="font-heading text-2xl font-semibold">Replay</h1>
-      <ReplayPlayerLoader recordingId={Number(id)} />
+      <ReplayPlayerLoader sessionId={Number(id)} />
     </div>
   );
 }

app/(app)/sessions/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { SessionsTable } from "@/components/sessions/SessionsTable";
 import { PageNav } from "@/components/shared/PageNav";
-import { listPlaySessionsPage } from "@/lib/db/queries/play-sessions";
+import { listSessionsPage } from "@/lib/db/queries/sessions";
 import { parsePage } from "@/lib/pagination";
 
 export const dynamic = "force-dynamic";
@@ -14,7 +14,7 @@ export default async function SessionsPage({
   searchParams: Promise<{ page?: string }>;
 }) {
   const page = parsePage((await searchParams).page);
-  const { items: sessions, pageSize, total } = await listPlaySessionsPage(page);
+  const { items: sessions, pageSize, total } = await listSessionsPage(page);
 
   return (
     <div className="flex flex-col gap-6">

app/(app)/stats/page.tsx

@@ -2,18 +2,16 @@ import type { Metadata } from "next";
 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";
+import { getDeviceCommandCounts, getDeviceUsageStats, getSessionsSummary } from "@/lib/db/queries/stats";
 
 export const dynamic = "force-dynamic";
 export const metadata: Metadata = { title: "Stats" };
 
 export default async function StatsPage() {
-  const [sessionsSummary, deviceUsage, commandCounts, recordingStats] = await Promise.all([
+  const [sessionsSummary, deviceUsage, commandCounts] = await Promise.all([
     getSessionsSummary(),
     getDeviceUsageStats(),
     getDeviceCommandCounts(),
-    getRecordingLibraryStats(),
   ]);
 
   const commandCountByDevice = new Map(commandCounts.map((c) => [c.deviceId, c.commandCount]));
@@ -23,14 +21,13 @@ export default async function StatsPage() {
     <div className="flex flex-col gap-6">
       <div>
         <h1 className="font-heading text-2xl font-semibold">Stats</h1>
-        <p className="text-sm text-muted-foreground">Usage across sessions, devices, and your recording library.</p>
+        <p className="text-sm text-muted-foreground">Usage across sessions and devices.</p>
       </div>
 
       <Tabs defaultValue="sessions">
         <TabsList className="bp-glass">
           <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} />
@@ -38,9 +35,6 @@ export default async function StatsPage() {
         <TabsContent value="devices" className="pt-4">
           <DeviceUsageTable devices={devices} />
         </TabsContent>
-        <TabsContent value="recordings" className="pt-4">
-          <RecordingLibraryStats stats={recordingStats} />
-        </TabsContent>
       </Tabs>
     </div>
   );