Bump to 0.8.0

Control view button layout fixes (buttons sit next to each other, wrap
responsively on narrow screens), Replay view streamlined to match the
Control view (title includes the session name, buttons below the
header, matching "no devices connected" hint card, Play icon on
"Match & replay"), and the session-status Badge color mismatch between
the sessions overview and detail view fixed.

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

app/(app)/page.tsx

@@ -2,6 +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 { SessionsTable } from "@/components/sessions/SessionsTable";
 import { listSessions } from "@/lib/db/queries/sessions";
 import { getSessionsSummary } from "@/lib/db/queries/stats";
 
@@ -33,13 +34,13 @@ export default async function DashboardPage() {
       <div className="grid gap-4 sm:grid-cols-3">
         <Card className="bp-glass">
           <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">Completed sessions</CardTitle>
+            <CardTitle className="text-sm">Completed sessions</CardTitle>
           </CardHeader>
           <CardContent className="bp-readout text-3xl">{summary.count}</CardContent>
         </Card>
         <Card className="bp-glass">
           <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">Total play time</CardTitle>
+            <CardTitle className="text-sm">Total play time</CardTitle>
           </CardHeader>
           <CardContent className="bp-readout text-3xl">
             {(summary.totalDurationMs / 3_600_000).toFixed(1)}h
@@ -47,7 +48,7 @@ export default async function DashboardPage() {
         </Card>
         <Card className="bp-glass">
           <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">Replays</CardTitle>
+            <CardTitle className="text-sm">Replays</CardTitle>
           </CardHeader>
           <CardContent className="bp-readout text-3xl">{summary.totalReplays}</CardContent>
         </Card>
@@ -55,21 +56,10 @@ export default async function DashboardPage() {
 
       <Card className="bp-glass">
         <CardHeader>
-          <CardTitle>Recent sessions</CardTitle>
+          <CardTitle className="text-base">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 className="flex flex-col gap-3">
+          <SessionsTable sessions={recentSessions} />
         </CardContent>
       </Card>
     </div>

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

@@ -1,9 +1,13 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { SessionTimelineChart } from "@/components/sessions/SessionTimelineChart";
+import { SessionTitleEditor } from "@/components/sessions/SessionTitleEditor";
+import { SessionDescriptionEditor } from "@/components/sessions/SessionDescriptionEditor";
+import { STATUS_VARIANT } from "@/components/sessions/session-status";
 import { getSessionDetail, getSessionName } from "@/lib/db/queries/sessions";
 import { getSessionTimeline } from "@/lib/db/queries/stats";
 import { Play } from "lucide-react";
@@ -32,26 +36,28 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
 
   return (
     <div className="flex flex-col gap-6">
-      <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)}
+      <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
+        <div className="min-w-0 flex-1">
+          <SessionTitleEditor sessionId={detail.session.id} initialName={detail.session.name} />
+          {(detail.session.kind === "replay" || detail.session.playCount > 0) && (
+            <p className="mt-1 text-sm text-muted-foreground">
               {detail.session.kind === "replay" && detail.replayedFromName !== undefined && (
-              <> · replayed from {detail.replayedFromName ?? `session #${detail.session.replayedSessionId}`}</>
+                <>replayed from {detail.replayedFromName ?? `session #${detail.session.replayedSessionId}`}</>
               )}
               {detail.session.playCount > 0 && (
                 <>
-                {" "}
-                · replayed {detail.session.playCount}×
+                  {detail.session.kind === "replay" && detail.replayedFromName !== undefined && " · "}
+                  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>
           )}
+          <SessionDescriptionEditor sessionId={detail.session.id} initialDescription={detail.session.description} />
         </div>
+        <div className="flex shrink-0 items-center gap-3 self-end sm:self-auto">
+          <Badge variant={STATUS_VARIANT[detail.session.status]}>{detail.session.status}</Badge>
+          <span className="bp-readout text-sm text-muted-foreground">{formatDuration(detail.session.durationMs)}</span>
           {canReplay && (
             <Button asChild>
               <Link href={`/sessions/${detail.session.id}/replay`}>
@@ -60,6 +66,7 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
             </Button>
           )}
         </div>
+      </div>
 
       <Card className="bp-glass">
         <CardHeader>

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

@@ -5,14 +5,21 @@ 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 getSessionName(Number(id));
-  return { title: name ? `Replay ${name}` : "Replay" };
+  return { title: name ? `${name} - Replay` : "Replay" };
 }
 
 export default async function ReplayPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
+  const name = await getSessionName(Number(id));
   return (
     <div className="flex flex-col gap-6">
-      <h1 className="font-heading text-2xl font-semibold">Replay</h1>
+      <div>
+        <h1 className="font-heading text-2xl font-semibold">{name ?? `Session #${id}`} - Replay</h1>
+        <p className="text-sm text-muted-foreground">
+          Connect the devices you want to replay onto, then match them to this session&apos;s original device
+          slots and play its recorded intensity back live over Web Bluetooth.
+        </p>
+      </div>
       <ReplayPlayerLoader sessionId={Number(id)} />
     </div>
   );

app/(app)/stats/page.tsx

@@ -1,5 +1,4 @@
 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 { getDeviceCommandCounts, getDeviceUsageStats, getSessionsSummary } from "@/lib/db/queries/stats";
@@ -24,18 +23,8 @@ export default async function StatsPage() {
         <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>
-        </TabsList>
-        <TabsContent value="sessions" className="pt-4">
       <SessionsSummaryCards summary={sessionsSummary} />
-        </TabsContent>
-        <TabsContent value="devices" className="pt-4">
       <DeviceUsageTable devices={devices} />
-        </TabsContent>
-      </Tabs>
     </div>
   );
 }

components/control/ButtplugConsole.tsx

@@ -225,7 +225,7 @@ export function ButtplugConsole() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex flex-wrap items-center justify-between gap-4">
+      <div className="flex flex-wrap items-center gap-4">
         <DeviceScanPanel scanning={scanning} onScan={handleScan} onStopScan={() => void stopScanning()} />
         <RecordControls
           active={activeSession !== null}

components/control/DeviceCard.tsx

@@ -37,9 +37,9 @@ export function DeviceCard({
 }: DeviceCardProps) {
   return (
     <Card className="bp-glass">
-      <CardHeader className="flex flex-row items-center justify-between pb-3">
-        <span className="text-sm font-medium text-foreground">{device.displayName ?? device.name}</span>
-        <div className="flex items-center gap-3">
+      <CardHeader className="flex flex-row flex-wrap items-center justify-between gap-2 pb-3">
+        <span className="min-w-0 truncate text-sm font-medium text-foreground">{device.displayName ?? device.name}</span>
+        <div className="flex shrink-0 items-center gap-3">
           {device.hasBattery &&
             (batteryLevel !== null ? (
               <BatteryIndicator level={batteryLevel} />

components/control/RecordControls.tsx

@@ -15,7 +15,7 @@ interface RecordControlsProps {
 export function RecordControls({ active, elapsedLabel, disabled, busy, onStart, onEnd }: RecordControlsProps) {
   if (active) {
     return (
-      <div className="flex items-center gap-3">
+      <div className="flex flex-wrap items-center gap-3">
         <span className="flex items-center gap-2 text-sm font-medium">
           <Circle className="bp-pulse size-2.5 fill-destructive text-destructive" />
           Session live · {elapsedLabel}

components/devices/DevicesTable.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
+import { Check, Loader2 } from "lucide-react";
 import { toast } from "sonner";
+import { cn } from "@/lib/utils";
 
 export interface DeviceRow {
   id: number;
@@ -14,34 +15,67 @@ export interface DeviceRow {
   lastConnectedAt: number | null;
 }
 
+const AUTOSAVE_DELAY_MS = 600;
+
 function DeviceNameCell({ device }: { device: DeviceRow }) {
   const router = useRouter();
-  const [value, setValue] = useState(device.displayName ?? device.bleName);
-  const [saving, setSaving] = useState(false);
+  const initial = device.displayName ?? device.bleName;
+  const [value, setValue] = useState(initial);
+  const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle");
+  const lastSaved = useRef(initial);
 
-  async function handleSave() {
-    if (value.trim().length === 0) return;
-    setSaving(true);
+  useEffect(() => {
+    const trimmed = value.trim();
+    if (trimmed.length === 0 || trimmed === lastSaved.current) return;
+
+    setStatus("saving");
+    const timer = setTimeout(async () => {
       const res = await fetch(`/api/devices/${device.id}`, {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ displayName: value.trim() }),
+        body: JSON.stringify({ displayName: trimmed }),
       });
-    setSaving(false);
       if (res.ok) {
-      toast.success("Renamed");
+        lastSaved.current = trimmed;
+        setStatus("saved");
         router.refresh();
       } else {
+        setStatus("idle");
         toast.error("Could not rename device");
       }
-  }
+    }, AUTOSAVE_DELAY_MS);
+
+    return () => clearTimeout(timer);
+  }, [value, device.id, router]);
+
+  useEffect(() => {
+    if (status !== "saved") return;
+    const timer = setTimeout(() => setStatus("idle"), 1500);
+    return () => clearTimeout(timer);
+  }, [status]);
 
   return (
-    <div className="flex items-center gap-2">
-      <Input value={value} onChange={(e) => setValue(e.target.value)} className="h-8 w-40 min-w-40" />
-      <Button size="sm" variant="outline" onClick={handleSave} disabled={saving} className="shrink-0">
-        Save
-      </Button>
+    <div className="relative w-48">
+      <Input
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        className="h-8 pr-8"
+        aria-label="Device display name"
+      />
+      <div className="pointer-events-none absolute inset-y-0 right-2 flex w-3.5 items-center justify-center">
+        <Loader2
+          className={cn(
+            "absolute size-3.5 animate-spin text-muted-foreground transition-opacity",
+            status === "saving" ? "opacity-100" : "opacity-0",
+          )}
+        />
+        <Check
+          className={cn(
+            "absolute size-3.5 text-primary transition-opacity",
+            status === "saved" ? "opacity-100" : "opacity-0",
+          )}
+        />
+      </div>
     </div>
   );
 }

components/layout/NavBar.tsx

@@ -19,6 +19,10 @@ const LINKS = [
   { href: "/devices", label: "Devices" },
 ];
 
+function isActive(pathname: string, href: string): boolean {
+  return href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`);
+}
+
 function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
   const pathname = usePathname();
   return (
@@ -30,7 +34,7 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
           onClick={onNavigate}
           className={cn(
             "border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
-            pathname === link.href
+            isActive(pathname, link.href)
               ? "border-primary text-foreground"
               : "border-transparent text-muted-foreground hover:text-foreground",
           )}

components/sessions/ReplayPlayer.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
 import { DeviceScanPanel } from "@/components/control/DeviceScanPanel";
@@ -137,18 +137,9 @@ export function ReplayPlayer({ sessionId }: { sessionId: number }) {
 
   return (
     <div className="flex flex-col gap-6">
-      <Card className="bp-glass">
-        <CardHeader>
-          <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 session&apos;s
-                original device slots.
-              </p>
-              <div className="flex items-center gap-3">
+          <div className="flex flex-wrap items-center gap-3">
             <DeviceScanPanel scanning={scanning} onScan={() => void startScanning()} onStopScan={() => void stopScanning()} />
             <Button
               onClick={async () => {
@@ -161,12 +152,28 @@ export function ReplayPlayer({ sessionId }: { sessionId: number }) {
               }}
               disabled={connectedDevices.length === 0 || starting}
             >
-                  {starting ? "Starting..." : "Match devices & replay"}
+              {starting ? (
+                "Starting..."
+              ) : (
+                <>
+                  <Play className="size-3.5" /> Match & replay
+                </>
+              )}
             </Button>
           </div>
+
+          {connectedDevices.length === 0 && (
+            <Card className="bp-glass">
+              <CardContent className="py-6 text-sm text-muted-foreground">
+                No devices connected yet. Scan to discover nearby toys, then match them to this session&apos;s
+                original device slots.
+              </CardContent>
+            </Card>
+          )}
         </>
       ) : (
-            <div className="flex flex-col gap-3">
+        <Card className="bp-glass">
+          <CardContent className="flex flex-col gap-3 py-6">
             {replayTargets.length > 0 && (
               <div className="flex flex-wrap gap-2">
                 {replayTargets.map((t) => (
@@ -184,7 +191,7 @@ export function ReplayPlayer({ sessionId }: { sessionId: number }) {
               max={data.session.durationMs}
               onValueChange={([v]) => player.seek(v)}
             />
-              <div className="flex items-center justify-between">
+            <div className="flex flex-wrap items-center justify-between gap-3">
               <span className="bp-readout text-xs text-muted-foreground">
                 {formatTime(elapsedMs)} / {formatTime(data.session.durationMs)}
               </span>
@@ -236,10 +243,9 @@ export function ReplayPlayer({ sessionId }: { sessionId: number }) {
                 </Button>
               </div>
             </div>
-            </div>
-          )}
           </CardContent>
         </Card>
+      )}
 
       <DeviceRemapDialog
         open={showRemap}

components/sessions/SessionDescriptionEditor.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Check, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+
+const AUTOSAVE_DELAY_MS = 600;
+
+export function SessionDescriptionEditor({
+  sessionId,
+  initialDescription,
+}: {
+  sessionId: number;
+  initialDescription: string | null;
+}) {
+  const router = useRouter();
+  const initial = initialDescription ?? "";
+  const [value, setValue] = useState(initial);
+  const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle");
+  const lastSaved = useRef(initial);
+
+  useEffect(() => {
+    // Unlike the session name, an empty description is a valid, saveable
+    // state (it just means "no description"), so no non-empty guard here.
+    if (value === lastSaved.current) return;
+
+    setStatus("saving");
+    const timer = setTimeout(async () => {
+      const res = await fetch(`/api/sessions/${sessionId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ description: value }),
+      });
+      if (res.ok) {
+        lastSaved.current = value;
+        setStatus("saved");
+        router.refresh();
+      } else {
+        setStatus("idle");
+        toast.error("Could not save description");
+      }
+    }, AUTOSAVE_DELAY_MS);
+
+    return () => clearTimeout(timer);
+  }, [value, sessionId, router]);
+
+  useEffect(() => {
+    if (status !== "saved") return;
+    const timer = setTimeout(() => setStatus("idle"), 1500);
+    return () => clearTimeout(timer);
+  }, [status]);
+
+  return (
+    <div className="mt-1 flex items-start gap-2">
+      <textarea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="Add a description..."
+        aria-label="Session description"
+        rows={1}
+        className="max-w-full min-w-0 resize-none border-b-2 border-transparent bg-transparent text-sm text-muted-foreground outline-none transition-colors placeholder:text-muted-foreground/60 hover:border-b-border focus:border-b-foreground/40 focus:text-foreground sm:max-w-xl [field-sizing:content]"
+      />
+      <div className="relative mt-0.5 flex size-4 shrink-0 items-center justify-center">
+        <Loader2
+          className={cn(
+            "absolute size-4 animate-spin text-muted-foreground transition-opacity",
+            status === "saving" ? "opacity-100" : "opacity-0",
+          )}
+        />
+        <Check
+          className={cn(
+            "absolute size-4 text-primary transition-opacity",
+            status === "saved" ? "opacity-100" : "opacity-0",
+          )}
+        />
+      </div>
+    </div>
+  );
+}

components/sessions/SessionTitleEditor.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Check, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+
+const AUTOSAVE_DELAY_MS = 600;
+
+export function SessionTitleEditor({ sessionId, initialName }: { sessionId: number; initialName: string | null }) {
+  const router = useRouter();
+  const initial = initialName ?? "";
+  const [value, setValue] = useState(initial);
+  const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle");
+  const lastSaved = useRef(initial);
+
+  useEffect(() => {
+    const trimmed = value.trim();
+    if (trimmed.length === 0 || trimmed === lastSaved.current) return;
+
+    setStatus("saving");
+    const timer = setTimeout(async () => {
+      const res = await fetch(`/api/sessions/${sessionId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: trimmed }),
+      });
+      if (res.ok) {
+        lastSaved.current = trimmed;
+        setStatus("saved");
+        router.refresh();
+      } else {
+        setStatus("idle");
+        toast.error("Could not rename session");
+      }
+    }, AUTOSAVE_DELAY_MS);
+
+    return () => clearTimeout(timer);
+  }, [value, sessionId, router]);
+
+  useEffect(() => {
+    if (status !== "saved") return;
+    const timer = setTimeout(() => setStatus("idle"), 1500);
+    return () => clearTimeout(timer);
+  }, [status]);
+
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder={`Session #${sessionId}`}
+        aria-label="Session name"
+        className="max-w-full min-w-0 border-b-2 border-transparent bg-transparent font-heading text-2xl font-semibold text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-b-border focus:border-b-foreground/40 sm:max-w-xl [field-sizing:content]"
+      />
+      <div className="relative flex size-4 shrink-0 items-center justify-center">
+        <Loader2
+          className={cn(
+            "absolute size-4 animate-spin text-muted-foreground transition-opacity",
+            status === "saving" ? "opacity-100" : "opacity-0",
+          )}
+        />
+        <Check
+          className={cn(
+            "absolute size-4 text-primary transition-opacity",
+            status === "saved" ? "opacity-100" : "opacity-0",
+          )}
+        />
+      </div>
+    </div>
+  );
+}

components/sessions/SessionsTable.tsx

@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/dialog";
 import { Play, Trash2 } from "lucide-react";
 import { toast } from "sonner";
+import { STATUS_VARIANT } from "@/components/sessions/session-status";
 
 export interface SessionRow {
   id: number;
@@ -25,12 +26,6 @@ export interface SessionRow {
   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);

components/sessions/session-status.ts

@@ -0,0 +1,8 @@
+// Plain data, deliberately kept out of SessionsTable.tsx (a "use client"
+// module) so server components (e.g. the session detail page) can import it
+// without pulling a value across the client/server compilation boundary.
+export const STATUS_VARIANT = {
+  active: "default",
+  completed: "secondary",
+  aborted: "destructive",
+} as const;

components/stats/DeviceUsageTable.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 
 export interface DeviceUsageRow {
@@ -15,13 +15,19 @@ export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
   if (devices.length === 0) {
     return (
       <Card className="bp-glass">
-        <CardContent className="py-6 text-sm text-muted-foreground">No device activity yet.</CardContent>
+        <CardHeader>
+          <CardTitle className="text-base">Device usage</CardTitle>
+        </CardHeader>
+        <CardContent className="text-sm text-muted-foreground">No device activity yet.</CardContent>
       </Card>
     );
   }
 
   return (
     <Card className="bp-glass">
+      <CardHeader>
+        <CardTitle className="text-base">Device usage</CardTitle>
+      </CardHeader>
       <CardContent>
         <Table>
           <TableHeader>

components/stats/SessionsSummaryCards.tsx

@@ -5,56 +5,45 @@ export interface SessionsSummary {
   totalDurationMs: number;
   avgDurationMs: number;
   totalReplays: number;
-  durationPerDevice: { deviceId: number; displayName: string | null; bleName: string; totalActiveMs: number }[];
 }
 
 function formatHours(ms: number): string {
   return `${(ms / 3_600_000).toFixed(1)}h`;
 }
 
+function formatReplays(count: number): string {
+  return count === 0 ? "-" : `${count}×`;
+}
+
 export function SessionsSummaryCards({ summary }: { summary: SessionsSummary }) {
   return (
-    <div className="flex flex-col gap-4">
-      <div className="grid gap-4 sm:grid-cols-3">
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
       <Card className="bp-glass">
         <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">Completed sessions</CardTitle>
+          <CardTitle className="text-sm">Completed sessions</CardTitle>
         </CardHeader>
         <CardContent className="bp-readout text-3xl">{summary.count}</CardContent>
       </Card>
       <Card className="bp-glass">
         <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">Total time</CardTitle>
+          <CardTitle className="text-sm">Total time</CardTitle>
         </CardHeader>
         <CardContent className="bp-readout text-3xl">{formatHours(summary.totalDurationMs)}</CardContent>
       </Card>
       <Card className="bp-glass">
         <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">Avg session length</CardTitle>
+          <CardTitle className="text-sm">Avg session length</CardTitle>
         </CardHeader>
         <CardContent className="bp-readout text-3xl">
           {Math.round(summary.avgDurationMs / 60_000)}m
         </CardContent>
       </Card>
-      </div>
-      <Card className="bp-glass">
-        <CardContent className="py-3 text-sm text-muted-foreground">Replayed {summary.totalReplays}×</CardContent>
-      </Card>
-      {summary.durationPerDevice.length > 0 && (
       <Card className="bp-glass">
         <CardHeader>
-            <CardTitle className="text-base">Duration per device</CardTitle>
+          <CardTitle className="text-sm">Replays</CardTitle>
         </CardHeader>
-          <CardContent className="flex flex-col gap-2">
-            {summary.durationPerDevice.map((d) => (
-              <div key={d.deviceId} className="flex items-center justify-between text-sm">
-                <span>{d.displayName ?? d.bleName}</span>
-                <span className="text-muted-foreground">{formatHours(d.totalActiveMs)}</span>
-              </div>
-            ))}
-          </CardContent>
+        <CardContent className="bp-readout text-3xl">{formatReplays(summary.totalReplays)}</CardContent>
       </Card>
-      )}
     </div>
   );
 }

lib/db/queries/stats.ts

@@ -15,18 +15,7 @@ export async function getSessionsSummary() {
     .from(sessions)
     .where(eq(sessions.status, "completed"));
 
-  const durationPerDevice = await db
-    .select({
-      deviceId: devices.id,
-      displayName: devices.displayName,
-      bleName: devices.bleName,
-      totalActiveMs: sql<number>`coalesce(sum(coalesce(${sessionDevices.disconnectedAt}, ${sessionDevices.connectedAt}) - ${sessionDevices.connectedAt}), 0)`,
-    })
-    .from(sessionDevices)
-    .innerJoin(devices, eq(sessionDevices.deviceId, devices.id))
-    .groupBy(devices.id);
-
-  return { ...totals, durationPerDevice };
+  return totals;
 }
 
 export async function getSessionTimeline(sessionId: number, bucketMs = 1000) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sexy",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "private": true,
   "scripts": {
     "dev": "next dev",