Make the session title editable inline on the detail page

New SessionTitleEditor swaps the static <h1> for a heading-styled input
that autosaves on typing (600ms debounce, spinner-then-checkmark) - the
same click-in-place, no-Save-button pattern as the device display name.

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

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

@@ -4,6 +4,7 @@ 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 { SessionTitleEditor } from "@/components/sessions/SessionTitleEditor";
 import { getSessionDetail, getSessionName } from "@/lib/db/queries/sessions";
 import { getSessionTimeline } from "@/lib/db/queries/stats";
 import { Play } from "lucide-react";
@@ -33,9 +34,9 @@ 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>
+        <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">
+          <p className="mt-1 px-2 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}`}</>
@@ -49,7 +50,7 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
             )}
           </p>
           {detail.session.description && (
-            <p className="mt-1 text-sm text-muted-foreground">{detail.session.description}</p>
+            <p className="mt-1 px-2 text-sm text-muted-foreground">{detail.session.description}</p>
           )}
         </div>
         {canReplay && (

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="-mx-2 flex items-center gap-2">
+      <input
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder={`Session #${sessionId}`}
+        aria-label="Session name"
+        className="min-w-0 flex-1 rounded-md border border-transparent bg-transparent px-2 py-0.5 font-heading text-2xl font-semibold text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-border focus:border-border focus:bg-muted/30"
+      />
+      <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>
+  );
+}