feat: auto session naming

1 files changed, 66 insertions, 15 deletions

diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
index b4faa6e..a435519 100644
--- a/renderer/src/components/Header.tsx
+++ b/renderer/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Project, Session, Phase } from "../types";
 
 type Theme = "dark" | "light";
@@ -14,6 +14,7 @@ interface HeaderProps {
   onCreateSession: () => void;
   onDeleteProject?: (id: string) => void;
   onDeleteSession?: (id: string) => void;
+  onRenameSession?: (id: string, name: string) => void;
   theme: Theme;
   onToggleTheme: () => void;
 }
@@ -37,6 +38,7 @@ export function Header({
   onCreateSession,
   onDeleteProject,
   onDeleteSession,
+  onRenameSession,
   theme,
   onToggleTheme,
 }: HeaderProps) {
@@ -54,6 +56,32 @@ export function Header({
     }
   };
 
+  const [isRenamingSession, setIsRenamingSession] = useState(false);
+  const [renameValue, setRenameValue] = useState("");
+  // Guard against double-commit (onKeyDown Enter → unmount → onBlur)
+  const renameCommitted = React.useRef(false);
+
+  const startRename = () => {
+    if (!selectedSession) return;
+    renameCommitted.current = false;
+    setRenameValue(selectedSession.name);
+    setIsRenamingSession(true);
+  };
+
+  const commitRename = () => {
+    if (renameCommitted.current) return;
+    renameCommitted.current = true;
+    if (selectedSession && onRenameSession && renameValue.trim()) {
+      onRenameSession(selectedSession.id, renameValue.trim());
+    }
+    setIsRenamingSession(false);
+  };
+
+  const cancelRename = () => {
+    renameCommitted.current = true; // prevent blur from committing after cancel
+    setIsRenamingSession(false);
+  };
+
   return (
     <header className="header">
       <div className="header-left">
@@ -88,21 +116,44 @@ export function Header({
 
         {selectedProject && (
           <>
-            <select
-              value={selectedSession?.id || ""}
-              onChange={(e) => {
-                const session = sessions.find((s) => s.id === e.target.value);
-                onSelectSession(session || null);
-              }}
-            >
-              <option value="">Select Session...</option>
-              {sessions.map((s) => (
-                <option key={s.id} value={s.id}>
-                  {s.name}
-                </option>
-              ))}
-            </select>
+            {isRenamingSession ? (
+              <input
+                autoFocus
+                value={renameValue}
+                onChange={(e) => setRenameValue(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") commitRename();
+                  if (e.key === "Escape") cancelRename();
+                }}
+                onBlur={commitRename}
+                className="session-rename-input"
+              />
+            ) : (
+              <select
+                value={selectedSession?.id || ""}
+                onChange={(e) => {
+                  const session = sessions.find((s) => s.id === e.target.value);
+                  onSelectSession(session || null);
+                }}
+              >
+                <option value="">Select Session...</option>
+                {sessions.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.name}
+                  </option>
+                ))}
+              </select>
+            )}
             <button onClick={onCreateSession}>+ Session</button>
+            {selectedSession && onRenameSession && !isRenamingSession && (
+              <button
+                onClick={startRename}
+                className="btn-rename"
+                title="Rename session"
+              >
+                ✏️
+              </button>
+            )}
             {selectedSession && onDeleteSession && (
               <button
                 onClick={handleDeleteSession}