6 files changed, 169 insertions, 22 deletions

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index f7ba41d..19f6284 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -8,6 +8,38 @@ import "./styles/globals.css";
 
 const api = window.api;
 
+/**
+ * Derive a short session name (≤30 chars) from research.md content.
+ * Looks for the first non-empty body line under ## Overview.
+ * Falls back to the first non-heading line in the document.
+ * Returns null if nothing usable is found.
+ */
+function extractSessionName(content: string): string | null {
+  const truncate = (s: string) =>
+    s.length > 30 ? s.slice(0, 28) + "\u2026" : s;
+
+  // Primary: first sentence of ## Overview body
+  const overviewMatch = content.match(/##\s+Overview\s*\n([\s\S]*?)(?=\n##|\n---)/);
+  if (overviewMatch) {
+    const firstLine = overviewMatch[1]
+      .split("\n")
+      .map((l) => l.trim())
+      .find((l) => l.length > 0 && !l.startsWith("#"));
+    if (firstLine) {
+      const firstSentence = firstLine.split(/[.?!]/)[0].trim();
+      if (firstSentence.length > 0) return truncate(firstSentence);
+    }
+  }
+
+  // Fallback: first non-heading line anywhere in the document
+  const firstLine = content
+    .split("\n")
+    .map((l) => l.trim())
+    .find((l) => l.length > 0 && !l.startsWith("#"));
+  if (!firstLine) return null;
+  return truncate(firstLine);
+}
+
 type Theme = "dark" | "light";
 
 export function App() {
@@ -125,11 +157,27 @@ export function App() {
         if (selectedProject && selectedSession) {
           const filename =
             selectedSession.phase === "research" ? "research.md" : "plan.md";
-          api.readSessionArtifact(selectedProject.id, selectedSession.id, filename).then((content) => {
-            const text = content || "";
-            setDocumentContent(text);
-            setOriginalContent(text);
-          });
+          // Capture for the async closure
+          const sessionAtTrigger = selectedSession;
+          api
+            .readSessionArtifact(selectedProject.id, sessionAtTrigger.id, filename)
+            .then((content) => {
+              const text = content || "";
+              setDocumentContent(text);
+              setOriginalContent(text);
+
+              // Auto-name: only during research, only while name is still the default
+              if (
+                sessionAtTrigger.phase === "research" &&
+                /^Session \d+$/.test(sessionAtTrigger.name) &&
+                text.length > 0
+              ) {
+                const derived = extractSessionName(text);
+                if (derived) {
+                  handleRenameSession(sessionAtTrigger.id, derived);
+                }
+              }
+            });
         }
       }
 
@@ -285,6 +333,17 @@ export function App() {
     }
   };
 
+  const handleRenameSession = async (id: string, name: string) => {
+    await api.renameSession(id, name);
+    setSessions((prev) =>
+      prev.map((s) => (s.id === id ? { ...s, name } : s))
+    );
+    // Use functional updater to avoid stale-closure issues
+    setSelectedSession((prev) =>
+      prev?.id === id ? { ...prev, name } : prev
+    );
+  };
+
   return (
     <div className="app">
       <Header
@@ -298,6 +357,7 @@ export function App() {
         onCreateSession={handleCreateSession}
         onDeleteProject={handleDeleteProject}
         onDeleteSession={handleDeleteSession}
+        onRenameSession={handleRenameSession}
         theme={theme}
         onToggleTheme={handleToggleTheme}
       />
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}
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index 97b7bb8..f141538 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -111,6 +111,34 @@ body {
   border-color: var(--danger);
 }
 
+.header button.btn-rename {
+  background: transparent;
+  border: 1px solid var(--border);
+  padding: 5px 8px;
+  font-size: 13px;
+}
+
+.header button.btn-rename:hover {
+  background: var(--bg-tertiary);
+}
+
+.session-rename-input {
+  padding: 5px 10px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--accent);
+  border-radius: 2px;
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: inherit;
+  min-width: 140px;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+}
+
+html[data-theme="light"] .session-rename-input {
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+}
+
 /* Theme toggle */
 .theme-toggle {
   font-size: 11px;
diff --git a/src/main/index.ts b/src/main/index.ts
index f0b23f7..a7bed00 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from "electron";
+import { app, BrowserWindow, Menu } from "electron";
 import path from "node:path";
 import { getDb, closeDb } from "./db";
 import { registerIpcHandlers } from "./ipc/handlers";
@@ -41,6 +41,8 @@ function createWindow() {
 }
 
 app.whenReady().then(() => {
+  Menu.setApplicationMenu(null);
+
   // Initialize database
   getDb();
 
diff --git a/src/main/ipc/handlers.ts b/src/main/ipc/handlers.ts
index d9beaf0..145c6e2 100644
--- a/src/main/ipc/handlers.ts
+++ b/src/main/ipc/handlers.ts
@@ -31,7 +31,11 @@ export function registerIpcHandlers(mainWindow: BrowserWindow): void {
     }
     sessions.deleteSession(id);
   });
-  
+
+  ipcMain.handle("sessions:rename", (_, id: string, name: string) => {
+    sessions.updateSession(id, { name });
+  });
+
   ipcMain.handle("sessions:get", (_, id: string) => sessions.getSession(id));
 
   // Messages
diff --git a/src/main/preload.ts b/src/main/preload.ts
index 2c228dd..f377639 100644
--- a/src/main/preload.ts
+++ b/src/main/preload.ts
@@ -15,6 +15,7 @@ export interface ClaudeFlowAPI {
   createSession: (projectId: string, name: string) => Promise<Session>;
   deleteSession: (id: string) => Promise<void>;
   getSession: (id: string) => Promise<Session | undefined>;
+  renameSession: (id: string, name: string) => Promise<void>;
 
   // Messages
   listMessages: (sessionId: string) => Promise<Message[]>;
@@ -70,6 +71,7 @@ const api: ClaudeFlowAPI = {
     ipcRenderer.invoke("sessions:create", projectId, name),
   deleteSession: (id) => ipcRenderer.invoke("sessions:delete", id),
   getSession: (id) => ipcRenderer.invoke("sessions:get", id),
+  renameSession: (id, name) => ipcRenderer.invoke("sessions:rename", id, name),
 
   // Messages
   listMessages: (sessionId) => ipcRenderer.invoke("messages:list", sessionId),