Add reopen closed tab shortcut

apps/app/src/components/plugin/PluginPanelRightPanelHost.tsx

@@ -278,6 +278,7 @@ export function PluginPanelRightPanelHost({
     closeTab,
     openTab,
     orderedSecondaryFileTabs,
+    reopenClosedTab,
     reorderTab,
     updateBrowserTab,
   } = useThreadFileTabs({
@@ -487,6 +488,11 @@ export function PluginPanelRightPanelHost({
     openNewTab();
     return true;
   });
+  useAppCommandHandler("panel.reopenClosedTab", () => {
+    if (!isFocused || panel === null || !reopenClosedTab()) return false;
+    revealPanel();
+    return true;
+  });
 
   const [togglePortalTarget, setTogglePortalTarget] =
     useState<HTMLElement | null>(null);

apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx

@@ -33,6 +33,7 @@ import {
   createSidebarSplitState,
   focusSidebarPane,
   getSidebarGroupForPane,
+  getSidebarTabPlacement,
   isCanonicalSidebarSplitState,
   moveSidebarPaneToSide,
   moveSidebarTab,
@@ -43,13 +44,15 @@ import {
   reorderSidebarTab,
   replaceSidebarTab,
   resizeSidebarSplit,
+  restoreSidebarTabPlacement,
   selectSidebarTab,
   serializeSidebarSplitState,
   setSidebarPaneMaximized,
   sidebarPaneGroupId,
   sidebarSplitStorageKey,
   toggleSidebarPaneMaximize,
   type SidebarSplitState,
+  type SidebarTabPlacement,
   type SidebarTabGroup,
 } from "./sidebarSplitLayout";
 import type { SecondaryPanelTabReorderRequest } from "./secondaryPanelTab";
@@ -131,6 +134,8 @@ export function SidebarSplitContainer({
     value: initialStorageValue,
   });
   const previousActiveTabId = useRef(activeTabId);
+  const previousAvailableTabIds = useRef(availableTabIds);
+  const removedTabPlacements = useRef(new Map<string, SidebarTabPlacement>());
   const previousFullScreen = useRef(isFullScreen);
   const dimsInactiveSplits = useAtomValue(dimInactiveSplitsAtom);
   const [resizeCursor, setResizeCursor] =
@@ -146,20 +151,38 @@ export function SidebarSplitContainer({
 
   useEffect(() => {
     const previousExternalActiveTabId = previousActiveTabId.current;
+    const previousAvailable = previousAvailableTabIds.current;
     const shouldFollowExternalSelection =
       previousExternalActiveTabId !== activeTabId;
     previousActiveTabId.current = activeTabId;
+    previousAvailableTabIds.current = availableTabIds;
     const current = stateRef.current;
+    const availableTabIdSet = new Set(availableTabIds);
+    for (const tabId of previousAvailable) {
+      if (availableTabIdSet.has(tabId)) continue;
+      const placement = getSidebarTabPlacement(current, tabId);
+      if (placement !== null) {
+        removedTabPlacements.current.set(tabId, placement);
+      }
+    }
     const withActiveTabReplacement =
       shouldFollowExternalSelection &&
       !availableTabIds.includes(previousExternalActiveTabId)
         ? replaceSidebarTab(current, previousExternalActiveTabId, activeTabId)
         : current;
-    const reconciled = reconcileSidebarSplitState(
+    let reconciled = reconcileSidebarSplitState(
       withActiveTabReplacement,
       availableTabIds,
       activeTabId,
     );
+    const previousAvailableTabIdSet = new Set(previousAvailable);
+    for (const tabId of availableTabIds) {
+      if (previousAvailableTabIdSet.has(tabId)) continue;
+      const placement = removedTabPlacements.current.get(tabId);
+      if (placement === undefined) continue;
+      reconciled = restoreSidebarTabPlacement(reconciled, tabId, placement);
+      removedTabPlacements.current.delete(tabId);
+    }
     const activePane = shouldFollowExternalSelection
       ? listPanes(reconciled.layout.root).find((pane) =>
           getSidebarGroupForPane(reconciled, pane.paneId)?.tabIds.includes(

apps/app/src/components/secondary-panel/sidebarSplitLayout.test.ts

@@ -10,6 +10,7 @@ import {
   SIDEBAR_FIXED_DIFF_TAB_ID,
   SIDEBAR_FIXED_INFO_TAB_ID,
   createSidebarSplitState,
+  getSidebarTabPlacement,
   focusSidebarPane,
   getSidebarGroupForPane,
   isCanonicalSidebarSplitState,
@@ -20,6 +21,7 @@ import {
   reconcileSidebarSplitState,
   removeSidebarSplit,
   reorderSidebarTab,
+  restoreSidebarTabPlacement,
   replaceSidebarTab,
   resizeSidebarSplit,
   selectSidebarTab,
@@ -333,6 +335,53 @@ describe("sidebar split layout", () => {
     ).toContain("terminal-a");
   });
 
+  it("restores closed tabs to their prior visible order", () => {
+    const firstTabId = "browser:first";
+    const secondTabId = "browser:second";
+    let state = createSidebarSplitState(
+      [SIDEBAR_FIXED_INFO_TAB_ID, firstTabId, secondTabId],
+      secondTabId,
+    );
+    const firstPlacement = getSidebarTabPlacement(state, firstTabId);
+    if (firstPlacement === null) throw new Error("Missing first tab placement");
+
+    state = reconcileSidebarSplitState(
+      state,
+      [SIDEBAR_FIXED_INFO_TAB_ID, secondTabId],
+      secondTabId,
+    );
+    const secondPlacement = getSidebarTabPlacement(state, secondTabId);
+    if (secondPlacement === null)
+      throw new Error("Missing second tab placement");
+    state = reconcileSidebarSplitState(
+      state,
+      [SIDEBAR_FIXED_INFO_TAB_ID],
+      SIDEBAR_FIXED_INFO_TAB_ID,
+    );
+    state = restoreSidebarTabPlacement(
+      reconcileSidebarSplitState(
+        state,
+        [SIDEBAR_FIXED_INFO_TAB_ID, secondTabId],
+        secondTabId,
+      ),
+      secondTabId,
+      secondPlacement,
+    );
+    state = restoreSidebarTabPlacement(
+      reconcileSidebarSplitState(
+        state,
+        [SIDEBAR_FIXED_INFO_TAB_ID, secondTabId, firstTabId],
+        firstTabId,
+      ),
+      firstTabId,
+      firstPlacement,
+    );
+
+    expect(
+      getSidebarGroupForPane(state, state.layout.focusedPaneId)?.tabIds,
+    ).toEqual([SIDEBAR_FIXED_INFO_TAB_ID, firstTabId, secondTabId]);
+  });
+
   it("keeps a New Tab replacement in its existing split pane", () => {
     const newTabId = "new-tab:launcher";
     const terminalTabId = "terminal:term-a:none";

apps/app/src/components/secondary-panel/sidebarSplitLayout.ts

@@ -53,6 +53,13 @@ export interface SidebarSplitState {
   maximizedPaneId: string | null;
 }
 
+export interface SidebarTabPlacement {
+  followingTabId: string | null;
+  groupId: string;
+  index: number;
+  precedingTabId: string | null;
+}
+
 interface SidebarSplitIds {
   groupId: string;
   paneId: string;
@@ -171,6 +178,104 @@ function preserveSidebarSplitStateIdentity(
   return areSidebarSplitStatesEqual(current, next) ? current : next;
 }
 
+export function getSidebarTabPlacement(
+  state: SidebarSplitState,
+  tabId: string,
+): SidebarTabPlacement | null {
+  const group = Object.values(state.groups).find((candidate) =>
+    candidate.tabIds.includes(tabId),
+  );
+  if (group === undefined) return null;
+  const index = group.tabIds.indexOf(tabId);
+  return {
+    followingTabId: group.tabIds[index + 1] ?? null,
+    groupId: group.id,
+    index,
+    precedingTabId: group.tabIds[index - 1] ?? null,
+  };
+}
+
+export function restoreSidebarTabPlacement(
+  state: SidebarSplitState,
+  tabId: string,
+  placement: SidebarTabPlacement,
+): SidebarSplitState {
+  const currentGroup = Object.values(state.groups).find((group) =>
+    group.tabIds.includes(tabId),
+  );
+  if (currentGroup === undefined) return state;
+  const placedGroup = state.groups[placement.groupId];
+  const targetGroup =
+    placedGroup !== undefined &&
+    (placedGroup.id === currentGroup.id || currentGroup.tabIds.length > 1)
+      ? placedGroup
+      : currentGroup;
+  const groups = Object.fromEntries(
+    Object.entries(state.groups).map(([groupId, group]) => {
+      const tabIds = group.tabIds.filter((candidate) => candidate !== tabId);
+      return [
+        groupId,
+        {
+          ...group,
+          tabIds,
+          activeTabId:
+            group.activeTabId === tabId
+              ? (tabIds[0] ?? targetGroup.activeTabId)
+              : group.activeTabId,
+        },
+      ];
+    }),
+  );
+  const nextTargetGroup = groups[targetGroup.id];
+  if (nextTargetGroup === undefined) return state;
+  const followingIndex =
+    placement.followingTabId === null
+      ? -1
+      : nextTargetGroup.tabIds.indexOf(placement.followingTabId);
+  const precedingIndex =
+    placement.precedingTabId === null
+      ? -1
+      : nextTargetGroup.tabIds.indexOf(placement.precedingTabId);
+  const insertAt =
+    followingIndex >= 0
+      ? followingIndex
+      : precedingIndex >= 0
+        ? precedingIndex + 1
+        : Math.min(placement.index, nextTargetGroup.tabIds.length);
+  const tabIds = [...nextTargetGroup.tabIds];
+  tabIds.splice(insertAt, 0, tabId);
+  groups[targetGroup.id] = { ...nextTargetGroup, tabIds };
+  return { ...state, groups };
+}
+
+function insertMissingTabsInAvailableOrder(
+  tabIds: readonly string[],
+  missingTabIds: readonly string[],
+  availableTabIds: readonly string[],
+): string[] {
+  const next = [...tabIds];
+  for (const missingTabId of missingTabIds) {
+    const availableIndex = availableTabIds.indexOf(missingTabId);
+    const followingTabId = availableTabIds
+      .slice(availableIndex + 1)
+      .find((tabId) => next.includes(tabId));
+    if (followingTabId !== undefined) {
+      next.splice(next.indexOf(followingTabId), 0, missingTabId);
+      continue;
+    }
+    const precedingTabId = availableTabIds
+      .slice(0, availableIndex)
+      .reverse()
+      .find((tabId) => next.includes(tabId));
+    const insertAt =
+      precedingTabId === undefined
+        ? next.length
+        : next.indexOf(precedingTabId) + 1;
+    next.splice(insertAt, 0, missingTabId);
+  }
+  return next;
+}
+
 export function isCanonicalSidebarSplitState(
   state: SidebarSplitState,
   availableTabIds: readonly string[],
@@ -610,7 +715,11 @@ export function reconcileSidebarSplitState(
         ...next.groups,
         [focusedGroup.id]: {
           ...focusedGroup,
-          tabIds: [...focusedGroup.tabIds, ...missing],
+          tabIds: insertMissingTabsInAvailableOrder(
+            focusedGroup.tabIds,
+            missing,
+            available,
+          ),
           activeTabId:
             focusedGroup.tabIds.length === 0
               ? activeTabId