Tap-to-edit session titles, PATCH proxy, model display on replay

app/history/[id]/page.tsx

@@ -22,6 +22,8 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
   const qc = useQueryClient();
   const router = useRouter();
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState("");
   const { data: sessionData } = useSession(id);
   const { data: messagesData, isLoading } = useMessages(id);
   const [input, setInput] = useState("");
@@ -88,15 +90,44 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
           <ArrowLeft size={20} style={{ color: "var(--text-2)" }} />
         </Link>
         <div className="flex-1 min-w-0">
-          <div className="text-[15px] font-medium truncate" style={{ color: "var(--text-1)" }}>
-            {session?.title || "Session " + id.slice(0, 8)}
-          </div>
+          {editingTitle ? (
+            <input
+              type="text"
+              value={titleDraft}
+              onChange={(e) => setTitleDraft(e.target.value)}
+              onBlur={async () => {
+                if (titleDraft.trim() && titleDraft !== session?.title) {
+                  await fetch("/api/sessions/" + id, {
+                    method: "PATCH",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ title: titleDraft.trim() }),
+                  });
+                  qc.invalidateQueries({ queryKey: ["session", id] });
+                }
+                setEditingTitle(false);
+              }}
+              onKeyDown={(e) => { if (e.key === "Enter") (e.target as HTMLInputElement).blur(); }}
+              className="text-[15px] font-medium w-full bg-transparent outline-none"
+              style={{ color: "var(--text-1)", borderBottom: "1px solid var(--accent)" }}
+              autoFocus
+            />
+          ) : (
+            <div
+              className="text-[15px] font-medium truncate"
+              style={{ color: "var(--text-1)" }}
+              onClick={() => { setTitleDraft(session?.title || ""); setEditingTitle(true); }}
+            >
+              {session?.title || "Session " + id.slice(0, 8)}
+            </div>
+          )}
           {session && (
             <div className="flex items-center gap-2 mt-0.5">
               <span className={`badge ${platformBadgeClass(session.source)}`}>
                 {session.source}
               </span>
               <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
+                {session.model && <span className="font-mono">{session.model.split("/").pop()}</span>}
+                {session.model && " · "}
                 {session.message_count} msgs · {formatTokens(session.input_tokens + session.output_tokens)} · {timeAgo(session.started_at)}
               </span>
             </div>