fix(terminal): renumber auto-named tabs to prevent duplicate labels (#447)

Author: bilalbayram

src/features/terminal/hooks/useTerminalTabs.test.tsx

@@ -35,3 +35,95 @@ describe("useTerminalTabs.ensureTerminalWithTitle", () => {
     ]);
   });
 });
+
+describe("useTerminalTabs auto-named tabs", () => {
+  it("renumbers remaining auto-named tabs after closing one", () => {
+    const { result } = renderHook(() =>
+      useTerminalTabs({ activeWorkspaceId: "workspace-1" }),
+    );
+
+    let firstId = "";
+    let secondId = "";
+    act(() => {
+      firstId = result.current.createTerminal("workspace-1");
+      secondId = result.current.createTerminal("workspace-1");
+    });
+
+    act(() => {
+      result.current.closeTerminal("workspace-1", firstId);
+    });
+
+    expect(result.current.terminals).toEqual([
+      { id: secondId, title: "Terminal 1" },
+    ]);
+  });
+
+  it("does not create duplicate auto-named labels after close and create", () => {
+    const { result } = renderHook(() =>
+      useTerminalTabs({ activeWorkspaceId: "workspace-1" }),
+    );
+
+    let firstId = "";
+    let secondId = "";
+    let thirdId = "";
+    act(() => {
+      firstId = result.current.createTerminal("workspace-1");
+      secondId = result.current.createTerminal("workspace-1");
+    });
+
+    act(() => {
+      result.current.closeTerminal("workspace-1", firstId);
+    });
+
+    act(() => {
+      thirdId = result.current.createTerminal("workspace-1");
+    });
+
+    expect(result.current.terminals).toEqual([
+      { id: secondId, title: "Terminal 1" },
+      { id: thirdId, title: "Terminal 2" },
+    ]);
+  });
+
+  it("keeps custom titles while numbering auto-named tabs independently", () => {
+    const { result } = renderHook(() =>
+      useTerminalTabs({ activeWorkspaceId: "workspace-1" }),
+    );
+
+    let firstAutoId = "";
+    let secondAutoId = "";
+    act(() => {
+      result.current.ensureTerminalWithTitle("workspace-1", "launch", "Launch");
+      firstAutoId = result.current.createTerminal("workspace-1");
+      secondAutoId = result.current.createTerminal("workspace-1");
+    });
+
+    expect(result.current.terminals).toEqual([
+      { id: "launch", title: "Launch" },
+      { id: firstAutoId, title: "Terminal 1" },
+      { id: secondAutoId, title: "Terminal 2" },
+    ]);
+  });
+
+  it("converts an auto-named tab to custom and renumbers remaining auto tabs", () => {
+    const { result } = renderHook(() =>
+      useTerminalTabs({ activeWorkspaceId: "workspace-1" }),
+    );
+
+    let firstAutoId = "";
+    let secondAutoId = "";
+    act(() => {
+      firstAutoId = result.current.createTerminal("workspace-1");
+      secondAutoId = result.current.createTerminal("workspace-1");
+    });
+
+    act(() => {
+      result.current.ensureTerminalWithTitle("workspace-1", firstAutoId, "Launch");
+    });
+
+    expect(result.current.terminals).toEqual([
+      { id: firstAutoId, title: "Launch" },
+      { id: secondAutoId, title: "Terminal 1" },
+    ]);
+  });
+});

src/features/terminal/hooks/useTerminalTabs.ts

@@ -5,6 +5,10 @@ export type TerminalTab = {
   title: string;
 };
 
+type TerminalTabRecord = TerminalTab & {
+  autoNamed: boolean;
+};
+
 type UseTerminalTabsOptions = {
   activeWorkspaceId: string | null;
   onCloseTerminal?: (workspaceId: string, terminalId: string) => void;
@@ -17,12 +21,33 @@ function createTerminalId() {
   return `terminal-${Date.now()}-${Math.random().toString(16).slice(2)}`;
 }
 
+function renumberAutoNamedTabs(tabs: TerminalTabRecord[]): TerminalTabRecord[] {
+  let autoNamedIndex = 1;
+  let changed = false;
+  const nextTabs = tabs.map((tab) => {
+    if (!tab.autoNamed) {
+      return tab;
+    }
+    const nextTitle = `Terminal ${autoNamedIndex}`;
+    autoNamedIndex += 1;
+    if (tab.title === nextTitle) {
+      return tab;
+    }
+    changed = true;
+    return {
+      ...tab,
+      title: nextTitle,
+    };
+  });
+  return changed ? nextTabs : tabs;
+}
+
 export function useTerminalTabs({
   activeWorkspaceId,
   onCloseTerminal,
 }: UseTerminalTabsOptions) {
   const [tabsByWorkspace, setTabsByWorkspace] = useState<
-    Record<string, TerminalTab[]>
+    Record<string, TerminalTabRecord[]>
   >({});
   const [activeTerminalIdByWorkspace, setActiveTerminalIdByWorkspace] = useState<
     Record<string, string | null>
@@ -32,10 +57,13 @@ export function useTerminalTabs({
     const id = createTerminalId();
     setTabsByWorkspace((prev) => {
       const existing = prev[workspaceId] ?? [];
-      const title = `Terminal ${existing.length + 1}`;
+      const nextTabs = renumberAutoNamedTabs([
+        ...existing,
+        { id, title: "", autoNamed: true },
+      ]);
       return {
         ...prev,
-        [workspaceId]: [...existing, { id, title }],
+        [workspaceId]: nextTabs,
       };
     });
     setActiveTerminalIdByWorkspace((prev) => ({ ...prev, [workspaceId]: id }));
@@ -48,17 +76,28 @@ export function useTerminalTabs({
         const existing = prev[workspaceId] ?? [];
         const index = existing.findIndex((tab) => tab.id === terminalId);
         if (index === -1) {
+          const nextTabs = renumberAutoNamedTabs([
+            ...existing,
+            { id: terminalId, title, autoNamed: false },
+          ]);
           return {
             ...prev,
-            [workspaceId]: [...existing, { id: terminalId, title }],
+            [workspaceId]: nextTabs,
           };
         }
-        if (existing[index].title === title) {
+        if (!existing[index].autoNamed && existing[index].title === title) {
           return prev;
         }
         const nextTabs = existing.slice();
-        nextTabs[index] = { ...existing[index], title };
-        return { ...prev, [workspaceId]: nextTabs };
+        nextTabs[index] = {
+          ...existing[index],
+          title,
+          autoNamed: false,
+        };
+        return {
+          ...prev,
+          [workspaceId]: renumberAutoNamedTabs(nextTabs),
+        };
       });
       setActiveTerminalIdByWorkspace((prev) => ({ ...prev, [workspaceId]: terminalId }));
       return terminalId;
@@ -70,7 +109,9 @@ export function useTerminalTabs({
     (workspaceId: string, terminalId: string) => {
       setTabsByWorkspace((prev) => {
         const existing = prev[workspaceId] ?? [];
-        const nextTabs = existing.filter((tab) => tab.id !== terminalId);
+        const nextTabs = renumberAutoNamedTabs(
+          existing.filter((tab) => tab.id !== terminalId),
+        );
         setActiveTerminalIdByWorkspace((prevActive) => {
           const active = prevActive[workspaceId];
           if (active !== terminalId) {
@@ -113,7 +154,10 @@ export function useTerminalTabs({
     if (!activeWorkspaceId) {
       return [];
     }
-    return tabsByWorkspace[activeWorkspaceId] ?? [];
+    return (tabsByWorkspace[activeWorkspaceId] ?? []).map(({ id, title }) => ({
+      id,
+      title,
+    }));
   }, [activeWorkspaceId, tabsByWorkspace]);
 
   const activeTerminalId = useMemo(() => {