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>
-          <h1 className="font-heading text-2xl font-semibold">{detail.session.name ?? `Session #${detail.session.id}`}</h1>
-          <p className="text-sm text-muted-foreground">
+        <div className="min-w-0 flex-1">
+          <SessionTitleEditor sessionId={detail.session.id} initialName={detail.session.name} />
+          <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 && (