Bump to 0.7.0

Inline-editable session title/description (autosave, no Save button,
same pattern as device display names), status badge on the session
detail page, dashboard's Recent sessions restyled as a real table,
stats page tab switcher removed, and various card/nav polish.

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">
+        <CardContent className="flex flex-col gap-3">
-          {recentSessions.length === 0 && <p className="text-sm text-muted-foreground">No sessions yet.</p>}
+          <SessionsTable sessions={recentSessions} />
-          {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)/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/SessionsTable";
 import { getSessionDetail, getSessionName } from "@/lib/db/queries/sessions";
 import { getSessionTimeline } from "@/lib/db/queries/stats";
 import { Play } from "lucide-react";
@@ -32,33 +36,36 @@ 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 className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
-        <div>
+        <div className="min-w-0 flex-1">
-          <h1 className="font-heading text-2xl font-semibold">{detail.session.name ?? `Session #${detail.session.id}`}</h1>
+          <SessionTitleEditor sessionId={detail.session.id} initialName={detail.session.name} />
-          <p className="text-sm text-muted-foreground">
+          {(detail.session.kind === "replay" || detail.session.playCount > 0) && (
-            {detail.session.status} · {formatDuration(detail.session.durationMs)}
+            <p className="mt-1 text-sm text-muted-foreground">
-            {detail.session.kind === "replay" && detail.replayedFromName !== undefined && (
+              {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 && (
+              {detail.session.playCount > 0 && (
-              <>
+                <>
-                {" "}
+                  {detail.session.kind === "replay" && detail.replayedFromName !== undefined && " · "}
-                · replayed {detail.session.playCount}×
+                  replayed {detail.session.playCount}×
-                {detail.session.lastPlayedAt && ` (last ${new Date(detail.session.lastPlayedAt).toLocaleString()})`}
+                  {detail.session.lastPlayedAt && ` (last ${new Date(detail.session.lastPlayedAt).toLocaleString()})`}
-              </>
+                </>
-            )}
+              )}
-          </p>
+            </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`}>
+                <Play className="size-4" /> Replay
+              </Link>
+            </Button>
           )}
         </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)/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">
+      <SessionsSummaryCards summary={sessionsSummary} />
-        <TabsList className="bp-glass">
+      <DeviceUsageTable devices={devices} />
-          <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/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 initial = device.displayName ?? device.bleName;
-  const [saving, setSaving] = useState(false);
+  const [value, setValue] = useState(initial);
+  const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle");
+  const lastSaved = useRef(initial);
 
-  async function handleSave() {
+  useEffect(() => {
-    if (value.trim().length === 0) return;
+    const trimmed = value.trim();
-    setSaving(true);
+    if (trimmed.length === 0 || trimmed === lastSaved.current) return;
-    const res = await fetch(`/api/devices/${device.id}`, {
+
-      method: "PATCH",
+    setStatus("saving");
-      headers: { "Content-Type": "application/json" },
+    const timer = setTimeout(async () => {
-      body: JSON.stringify({ displayName: value.trim() }),
+      const res = await fetch(`/api/devices/${device.id}`, {
-    });
+        method: "PATCH",
-    setSaving(false);
+        headers: { "Content-Type": "application/json" },
-    if (res.ok) {
+        body: JSON.stringify({ displayName: trimmed }),
-      toast.success("Renamed");
+      });
-      router.refresh();
+      if (res.ok) {
-    } else {
+        lastSaved.current = trimmed;
-      toast.error("Could not rename device");
+        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">
+    <div className="relative w-48">
-      <Input value={value} onChange={(e) => setValue(e.target.value)} className="h-8 w-40 min-w-40" />
+      <Input
-      <Button size="sm" variant="outline" onClick={handleSave} disabled={saving} className="shrink-0">
+        value={value}
-        Save
+        onChange={(e) => setValue(e.target.value)}
-      </Button>
+        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/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

@@ -25,7 +25,7 @@ export interface SessionRow {
   durationMs: number | null;
 }
 
-const STATUS_VARIANT = {
+export const STATUS_VARIANT = {
   active: "default",
   completed: "secondary",
   aborted: "destructive",

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,6 +15,9 @@ export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
   if (devices.length === 0) {
     return (
       <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-base">Device usage</CardTitle>
+        </CardHeader>
         <CardContent className="py-6 text-sm text-muted-foreground">No device activity yet.</CardContent>
       </Card>
     );
@@ -22,6 +25,9 @@ export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
 
   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-2 lg:grid-cols-4">
-      <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="bp-readout text-3xl">{summary.count}</CardContent>
-        </Card>
-        <Card className="bp-glass">
-          <CardHeader>
-            <CardTitle className="text-sm text-muted-foreground">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>
-          </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>
+        <CardHeader>
+          <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">Total time</CardTitle>
+        </CardHeader>
+        <CardContent className="bp-readout text-3xl">{formatHours(summary.totalDurationMs)}</CardContent>
+      </Card>
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-sm">Avg session length</CardTitle>
+        </CardHeader>
+        <CardContent className="bp-readout text-3xl">
+          {Math.round(summary.avgDurationMs / 60_000)}m
+        </CardContent>
+      </Card>
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-sm">Replays</CardTitle>
+        </CardHeader>
+        <CardContent className="bp-readout text-3xl">{formatReplays(summary.totalReplays)}</CardContent>
       </Card>
-      {summary.durationPerDevice.length > 0 && (
-        <Card className="bp-glass">
-          <CardHeader>
-            <CardTitle className="text-base">Duration per device</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>
-        </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
+  return totals;
-    .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 };
 }
 
 export async function getSessionTimeline(sessionId: number, bucketMs = 1000) {

package.json

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