diff --git a/public/app.js b/public/app.js
index fdefa1b6..54aa6d8e 100644
--- a/public/app.js
+++ b/public/app.js
@@ -36,6 +36,8 @@ const statusIndicator = document.getElementById('status-indicator');
 const statusText = document.getElementById('status-text');
 const sidebarEl = document.getElementById('sidebar');
 const sidebarToggle = document.getElementById('sidebar-toggle');
+const sessionTitleHeaderEl = document.getElementById('session-title-header');
+const sessionTitleHeaderTextEl = document.getElementById('session-title-header-text');
 const sidebarOverlay = document.getElementById('sidebar-overlay');
 
 const refreshSessionsBtn = document.getElementById('refresh-sessions-btn');
@@ -255,10 +257,11 @@ function handleRPCEvent(event) {
       messageRenderer.renderError(`Extension error: ${event.error}`);
       break;
     case 'session_name':
-      // Auto-title: update sidebar with new session name
+      // Auto-title: update sidebar and header with new session name
       if (event.name) {
         const activeItem = document.querySelector('.session-item.active .session-title');
         if (activeItem) activeItem.textContent = event.name;
+        updateHeaderSessionTitle(event.name);
       }
       break;
   }
@@ -866,11 +869,56 @@ async function fetchModelInfo() {
       currentThinkingLevel = stateData.data.thinkingLevel;
       updateThinkingBtn();
     }
+    if (stateData.success && stateData.data?.sessionName) {
+      updateHeaderSessionTitle(stateData.data.sessionName);
+    }
   } catch (e) {
     // ignore
   }
 }
 
+function updateHeaderSessionTitle(name) {
+  sessionTitleHeaderTextEl.textContent = name || 'New Session';
+}
+
+function startHeaderRename() {
+  if (isMirrorMode && !viewingActiveSession) return;
+  if (sessionTitleHeaderEl.querySelector('.session-title-header-input')) return;
+  const currentName = sessionTitleHeaderTextEl.textContent;
+
+  const input = document.createElement('input');
+  input.className = 'session-title-header-input';
+  input.value = currentName;
+  sessionTitleHeaderEl.replaceChild(input, sessionTitleHeaderTextEl);
+  input.focus();
+  input.select();
+
+  const commit = async () => {
+    const newName = input.value.trim();
+    if (newName && newName !== currentName) {
+      try {
+        await fetch('/api/rpc', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'set_session_name', name: newName }),
+        });
+      } catch { /* silent */ }
+    }
+    sessionTitleHeaderTextEl.textContent = newName || currentName;
+    input.replaceWith(sessionTitleHeaderTextEl);
+    const activeItem = document.querySelector('.session-item.active .session-title');
+    if (activeItem && newName) activeItem.textContent = newName;
+  };
+
+  input.addEventListener('blur', commit);
+  input.addEventListener('keydown', (ke) => {
+    if (ke.key === 'Enter') { ke.preventDefault(); input.blur(); }
+    if (ke.key === 'Escape') { input.value = currentName; input.blur(); }
+  });
+}
+
+sessionTitleHeaderEl.addEventListener('click', startHeaderRename);
+
 function updateModelLabel() {
   const shortName = currentModelId.replace(/^claude-/, '').replace(/-\d{8}$/, '');
   modelDropdownLabel.textContent = shortName || 'model';
@@ -1113,6 +1161,7 @@ async function newSession() {
   lastInputTokens = 0;
   updateCostDisplay();
   updateTokenUsage();
+  updateHeaderSessionTitle(null);
   await switchSession(null);
   sidebar.clearActive();
   if (isMobile()) {
@@ -1128,6 +1177,7 @@ async function handleSessionSelect(session, project) {
   lastInputTokens = 0;
   updateCostDisplay();
   updateTokenUsage();
+  updateHeaderSessionTitle(session.name || session.firstMessage || 'Empty session');
   await switchSession(session.filePath, session, project);
 
   // Close sidebar on mobile after selecting
@@ -1231,6 +1281,7 @@ function handleMirrorSync(data) {
   viewingActiveSession = true;
   updateMirrorInputState();
   updateMirrorLiveIndicator();
+  updateHeaderSessionTitle(data.sessionName);
 
   // Update model display
   if (data.model) {
@@ -1291,6 +1342,7 @@ pollInstances();
 
 // Enable/disable input based on whether we're viewing the live session
 function updateMirrorInputState() {
+  updateHeaderRenameAffordance();
   if (!isMirrorMode) return;
 
   const inputArea = document.querySelector('.input-area');
@@ -1305,6 +1357,16 @@ function updateMirrorInputState() {
   }
 }
 
+// Renaming only ever affects pi's currently live session, so only allow it
+// from the header while that live session is the one being viewed.
+function updateHeaderRenameAffordance() {
+  const renamable = !isMirrorMode || viewingActiveSession;
+  sessionTitleHeaderEl.classList.toggle('readonly', !renamable);
+  sessionTitleHeaderEl.title = renamable
+    ? 'Click to rename'
+    : 'Only the active session can be renamed here';
+}
+
 // ═══════════════════════════════════════
 // Session history rendering
 // ═══════════════════════════════════════
diff --git a/public/index.html b/public/index.html
index 9531c217..afaefe84 100644
--- a/public/index.html
+++ b/public/index.html
@@ -45,6 +45,11 @@
       <div class="header">
         <div class="header-left">
           <button class="sidebar-toggle" id="sidebar-toggle" title="Toggle sidebar" aria-label="Toggle sidebar"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button>
+          <div class="session-title-header" id="session-title-header" title="Click to rename">
+            <span class="session-title-header-text" id="session-title-header-text">New Session</span>
+          </div>
+        </div>
+        <div class="header-right">
           <div class="model-dropdown" id="model-dropdown">
             <button class="model-dropdown-btn" id="model-dropdown-btn" title="Switch model">
               <span class="model-dropdown-label" id="model-dropdown-label">model</span>
@@ -53,8 +58,6 @@
             <div class="model-dropdown-menu hidden" id="model-dropdown-menu"></div>
           </div>
           <button class="thinking-tag" id="thinking-btn" title="Cycle thinking level">off</button>
-        </div>
-        <div class="header-right">
           <div class="pill session-cost" id="session-cost" title="Session cost"></div>
           <div style="position: relative;">
             <div class="pill token-usage" id="token-usage" title="Click for context breakdown"></div>
diff --git a/public/style.css b/public/style.css
index 83fd5287..233c77e2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -891,6 +891,47 @@ body {
   color: var(--text-primary);
 }
 
+/* Session title in header */
+.session-title-header {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 240px;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background var(--duration) var(--ease);
+}
+
+.session-title-header:hover {
+  background: var(--bg-glass-hover);
+}
+
+.session-title-header.readonly {
+  cursor: default;
+}
+
+.session-title-header.readonly:hover {
+  background: none;
+}
+
+.session-title-header-input {
+  max-width: 240px;
+  padding: 3px 7px;
+  background: var(--bg-glass);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-glow);
+}
+
 /* Pill — unified base for header pills */
 .pill {
   font-size: 10px;
@@ -3179,6 +3220,12 @@ body.hide-thinking .thinking-block { display: none !important; }
     gap: 6px;
   }
 
+  .session-title-header,
+  .session-title-header-input {
+    max-width: 110px;
+    font-size: 12px;
+  }
+
 
   .tool-card, .thinking-block { width: 100%; }
   .tool-args-preview { max-width: 140px; }