Allow renaming terminal tabs (persisted per project)

Right-click a tab (or double-click) to rename. Renamed labels show
as "ProjectName: CustomName" and are stored in the project's
renamed_session_names map. The entry is cleared on tab close.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/src-tauri/src/models/project.rs

@@ -1,3 +1,5 @@
+use std::collections::HashMap;
+
 use serde::{Deserialize, Serialize};
 
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
@@ -93,6 +95,9 @@ pub struct Project {
     pub enabled_mcp_servers: Vec<String>,
     #[serde(default)]
     pub claude_code_settings: Option<ClaudeCodeSettings>,
+    /// User-defined display names for terminal tabs, keyed by session id.
+    #[serde(default)]
+    pub renamed_session_names: HashMap<String, String>,
     pub created_at: String,
     pub updated_at: String,
 }
@@ -217,6 +222,7 @@ impl Project {
             claude_instructions: None,
             enabled_mcp_servers: Vec::new(),
             claude_code_settings: None,
+            renamed_session_names: HashMap::new(),
             created_at: now.clone(),
             updated_at: now,
         }

app/src/components/terminal/TerminalTabs.tsx

@@ -1,7 +1,38 @@
+import { useEffect, useRef, useState } from "react";
 import { useTerminal } from "../../hooks/useTerminal";
+import { useProjects } from "../../hooks/useProjects";
+
+interface ContextMenuState {
+  sessionId: string;
+  x: number;
+  y: number;
+}
 
 export default function TerminalTabs() {
   const { sessions, activeSessionId, setActiveSession, close } = useTerminal();
+  const { projects, update } = useProjects();
+  const [menu, setMenu] = useState<ContextMenuState | null>(null);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameDraft, setRenameDraft] = useState("");
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!menu) return;
+    const dismiss = () => setMenu(null);
+    window.addEventListener("click", dismiss);
+    window.addEventListener("scroll", dismiss, true);
+    return () => {
+      window.removeEventListener("click", dismiss);
+      window.removeEventListener("scroll", dismiss, true);
+    };
+  }, [menu]);
+
+  useEffect(() => {
+    if (renamingId) {
+      renameInputRef.current?.focus();
+      renameInputRef.current?.select();
+    }
+  }, [renamingId]);
 
   if (sessions.length === 0) {
     return (
@@ -11,33 +42,160 @@ export default function TerminalTabs() {
     );
   }
 
+  const getCustomName = (projectId: string, sessionId: string): string | null => {
+    const project = projects.find((p) => p.id === projectId);
+    return project?.renamed_session_names?.[sessionId] ?? null;
+  };
+
+  const startRename = (sessionId: string) => {
+    const session = sessions.find((s) => s.id === sessionId);
+    if (!session) return;
+    const current = getCustomName(session.projectId, sessionId) ?? session.sessionName ?? session.projectName;
+    setRenameDraft(current);
+    setRenamingId(sessionId);
+    setMenu(null);
+  };
+
+  const commitRename = async (sessionId: string) => {
+    const session = sessions.find((s) => s.id === sessionId);
+    if (!session) {
+      setRenamingId(null);
+      return;
+    }
+    const project = projects.find((p) => p.id === session.projectId);
+    if (!project) {
+      setRenamingId(null);
+      return;
+    }
+    const trimmed = renameDraft.trim();
+    const map = { ...(project.renamed_session_names ?? {}) };
+    if (trimmed) {
+      map[sessionId] = trimmed;
+    } else {
+      delete map[sessionId];
+    }
+    try {
+      await update({ ...project, renamed_session_names: map });
+    } catch (err) {
+      console.error("Failed to rename terminal tab:", err);
+    } finally {
+      setRenamingId(null);
+    }
+  };
+
+  const clearCustomName = async (sessionId: string) => {
+    const session = sessions.find((s) => s.id === sessionId);
+    if (!session) return;
+    const project = projects.find((p) => p.id === session.projectId);
+    if (!project) return;
+    const map = { ...(project.renamed_session_names ?? {}) };
+    if (!(sessionId in map)) {
+      setMenu(null);
+      return;
+    }
+    delete map[sessionId];
+    try {
+      await update({ ...project, renamed_session_names: map });
+    } catch (err) {
+      console.error("Failed to reset terminal tab name:", err);
+    } finally {
+      setMenu(null);
+    }
+  };
+
   return (
     <div className="flex items-center h-full">
-      {sessions.map((session) => (
+      {sessions.map((session) => {
-        <div
+        const customName = getCustomName(session.projectId, session.id);
-          key={session.id}
+        const baseLabel =
-          onClick={() => setActiveSession(session.id)}
+          (session.sessionName ?? session.projectName) +
-          className={`flex items-center gap-2 px-3 h-full text-xs cursor-pointer border-r border-[var(--border-color)] transition-colors ${
+          (session.sessionType === "bash" ? " (bash)" : "");
-            activeSessionId === session.id
+        const displayLabel = customName
-              ? "bg-[var(--bg-primary)] text-[var(--text-primary)]"
+          ? `${session.projectName}: ${customName}`
-              : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+          : baseLabel;
-          }`}
+        const isRenaming = renamingId === session.id;
-        >
+        return (
-          <span className="truncate max-w-[140px]">
+          <div
-            {session.sessionName ?? session.projectName}{session.sessionType === "bash" ? " (bash)" : ""}
+            key={session.id}
-          </span>
+            onClick={() => setActiveSession(session.id)}
-          <button
+            onContextMenu={(e) => {
-            onClick={(e) => {
+              e.preventDefault();
-              e.stopPropagation();
+              setMenu({ sessionId: session.id, x: e.clientX, y: e.clientY });
-              close(session.id);
             }}
-            className="text-[var(--text-secondary)] hover:text-[var(--error)] transition-colors"
+            onDoubleClick={() => startRename(session.id)}
-            title="Close terminal"
+            className={`flex items-center gap-2 px-3 h-full text-xs cursor-pointer border-r border-[var(--border-color)] transition-colors ${
+              activeSessionId === session.id
+                ? "bg-[var(--bg-primary)] text-[var(--text-primary)]"
+                : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+            }`}
           >
-            ×
+            {isRenaming ? (
-          </button>
+              <input
-        </div>
+                ref={renameInputRef}
-      ))}
+                value={renameDraft}
+                onChange={(e) => setRenameDraft(e.target.value)}
+                onClick={(e) => e.stopPropagation()}
+                onBlur={() => commitRename(session.id)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") (e.target as HTMLInputElement).blur();
+                  if (e.key === "Escape") setRenamingId(null);
+                }}
+                className="max-w-[180px] px-1 py-0 bg-[var(--bg-primary)] border border-[var(--accent)] rounded text-xs text-[var(--text-primary)] focus:outline-none"
+              />
+            ) : (
+              <span className="truncate max-w-[200px]" title={displayLabel}>
+                {displayLabel}
+              </span>
+            )}
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                close(session.id);
+              }}
+              className="text-[var(--text-secondary)] hover:text-[var(--error)] transition-colors"
+              title="Close terminal"
+            >
+              ×
+            </button>
+          </div>
+        );
+      })}
+      {menu && (() => {
+        const session = sessions.find((s) => s.id === menu.sessionId);
+        const hasCustom = session ? !!getCustomName(session.projectId, menu.sessionId) : false;
+        return (
+          <div
+            className="fixed z-50 min-w-[160px] py-1 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded shadow-lg text-xs"
+            style={{ top: menu.y, left: menu.x }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              className="w-full text-left px-3 py-1.5 text-[var(--text-primary)] hover:bg-[var(--bg-primary)] transition-colors"
+              onClick={() => startRename(menu.sessionId)}
+            >
+              Rename tab
+            </button>
+            {hasCustom && (
+              <button
+                className="w-full text-left px-3 py-1.5 text-[var(--text-secondary)] hover:bg-[var(--bg-primary)] transition-colors"
+                onClick={() => clearCustomName(menu.sessionId)}
+              >
+                Reset name
+              </button>
+            )}
+            <div className="border-t border-[var(--border-color)] my-1" />
+            <button
+              className="w-full text-left px-3 py-1.5 text-[var(--error)] hover:bg-[var(--bg-primary)] transition-colors"
+              onClick={() => {
+                close(menu.sessionId);
+                setMenu(null);
+              }}
+            >
+              Close tab
+            </button>
+          </div>
+        );
+      })()}
     </div>
   );
 }

app/src/hooks/useTerminal.ts

@@ -28,8 +28,25 @@ export function useTerminal() {
 
   const close = useCallback(
     async (sessionId: string) => {
+      // Capture session/project info before we drop it from local state.
+      const { sessions: currentSessions, projects } = useAppState.getState();
+      const session = currentSessions.find((s) => s.id === sessionId);
+      const project = session ? projects.find((p) => p.id === session.projectId) : undefined;
+
       await commands.closeTerminalSession(sessionId);
       removeSession(sessionId);
+
+      // Drop any persisted custom name for this session.
+      if (project && project.renamed_session_names && sessionId in project.renamed_session_names) {
+        const map = { ...project.renamed_session_names };
+        delete map[sessionId];
+        try {
+          const updated = await commands.updateProject({ ...project, renamed_session_names: map });
+          useAppState.getState().updateProjectInList(updated);
+        } catch (err) {
+          console.error("Failed to clear renamed tab name on close:", err);
+        }
+      }
     },
     [removeSession],
   );

app/src/lib/types.ts

@@ -37,6 +37,7 @@ export interface Project {
   claude_instructions: string | null;
   enabled_mcp_servers: string[];
   claude_code_settings: ClaudeCodeSettings | null;
+  renamed_session_names: Record<string, string>;
   created_at: string;
   updated_at: string;
 }