@industry-theme/xterm-terminal-panel 0.2.3 → 0.2.5

package/dist/index.js

@@ -800,10 +800,268 @@ function useThemedTerminal() {
     getCSSVariables
   };
 }
-// src/panels/TerminalPanel.tsx
+// src/components/TabBar/TabBar.tsx
+import { useTheme as useTheme4 } from "@principal-ade/industry-theme";
+import { Plus } from "lucide-react";
+import { useState as useState2 } from "react";
+
+// src/components/TabBar/TabButton.tsx
 import { useTheme as useTheme3 } from "@principal-ade/industry-theme";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TabButton = ({
+  tab,
+  isActive,
+  isHovered,
+  onMouseEnter,
+  onMouseLeave,
+  onClick,
+  onClose,
+  keyboardHint,
+  renderAccessory
+}) => {
+  const { theme } = useTheme3();
+  const showCloseButton = isHovered || isActive;
+  const closable = tab.closable !== false;
+  return /* @__PURE__ */ jsxs2("div", {
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "6px",
+      padding: "6px 8px",
+      backgroundColor: isActive ? theme.colors.background : theme.colors.backgroundSecondary,
+      cursor: "pointer",
+      fontSize: theme.fontSizes[1],
+      fontWeight: isActive ? theme.fontWeights.semibold : theme.fontWeights.body,
+      fontFamily: theme.fonts.body,
+      color: isActive ? theme.colors.text : theme.colors.textSecondary,
+      whiteSpace: "nowrap",
+      transition: "all 0.2s",
+      flex: 1,
+      minWidth: 0,
+      height: "100%",
+      position: "relative",
+      boxSizing: "border-box"
+    },
+    children: [
+      closable && showCloseButton && /* @__PURE__ */ jsx3("button", {
+        onClick: (e) => {
+          e.stopPropagation();
+          onClose();
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "16px",
+          height: "16px",
+          borderRadius: "3px",
+          border: "none",
+          backgroundColor: "transparent",
+          cursor: "pointer",
+          color: theme.colors.textSecondary,
+          padding: 0,
+          position: "absolute",
+          left: "8px"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        },
+        title: "Close (⌘W)",
+        children: "×"
+      }),
+      tab.icon && /* @__PURE__ */ jsx3("div", {
+        style: { flexShrink: 0, display: "flex", alignItems: "center" },
+        children: tab.icon
+      }),
+      /* @__PURE__ */ jsx3("span", {
+        style: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        title: tab.label,
+        children: tab.label
+      }),
+      renderAccessory ? renderAccessory(tab) : keyboardHint && /* @__PURE__ */ jsx3("span", {
+        style: {
+          fontSize: theme.fontSizes[0],
+          color: theme.colors.textSecondary,
+          opacity: 0.6,
+          flexShrink: 0
+        },
+        children: keyboardHint
+      })
+    ]
+  });
+};
+TabButton.displayName = "TabButton";
+
+// src/components/TabBar/TabBar.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TabBar = ({
+  tabs,
+  activeTabId,
+  onTabClick,
+  onTabClose,
+  onNewTab,
+  leftSection,
+  rightSection,
+  renderTabAccessory,
+  className,
+  showKeyboardHints = true
+}) => {
+  const { theme } = useTheme4();
+  const [hoveredTabId, setHoveredTabId] = useState2(null);
+  return /* @__PURE__ */ jsxs3("div", {
+    className,
+    style: {
+      display: "flex",
+      alignItems: "stretch",
+      height: "40px",
+      flexShrink: 0,
+      boxSizing: "border-box"
+    },
+    children: [
+      leftSection && /* @__PURE__ */ jsx4("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          padding: "0 8px",
+          backgroundColor: theme.colors.backgroundSecondary,
+          borderRight: `1px solid ${theme.colors.border}`,
+          borderBottom: `1px solid ${theme.colors.border}`,
+          boxSizing: "border-box"
+        },
+        children: leftSection
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          flex: 1,
+          overflow: "hidden",
+          backgroundColor: theme.colors.backgroundSecondary,
+          borderBottom: `1px solid ${theme.colors.border}`,
+          boxSizing: "border-box"
+        },
+        children: tabs.map((tab, index) => /* @__PURE__ */ jsx4(TabButton, {
+          tab,
+          isActive: tab.id === activeTabId,
+          isHovered: tab.id === hoveredTabId,
+          onMouseEnter: () => setHoveredTabId(tab.id),
+          onMouseLeave: () => setHoveredTabId(null),
+          onClick: () => onTabClick(tab.id),
+          onClose: () => onTabClose(tab.id),
+          keyboardHint: showKeyboardHints && index < 9 ? `⌘ ${index + 1}` : undefined,
+          renderAccessory: renderTabAccessory
+        }, tab.id))
+      }),
+      rightSection !== undefined ? rightSection && /* @__PURE__ */ jsx4("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          padding: "0 8px",
+          backgroundColor: theme.colors.backgroundSecondary,
+          borderLeft: `1px solid ${theme.colors.border}`,
+          borderBottom: `1px solid ${theme.colors.border}`,
+          boxSizing: "border-box"
+        },
+        children: rightSection
+      }) : onNewTab && /* @__PURE__ */ jsx4("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          padding: "0 8px",
+          backgroundColor: theme.colors.backgroundSecondary,
+          borderLeft: `1px solid ${theme.colors.border}`,
+          borderBottom: `1px solid ${theme.colors.border}`,
+          boxSizing: "border-box"
+        },
+        children: /* @__PURE__ */ jsx4("button", {
+          onClick: onNewTab,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "28px",
+            height: "28px",
+            border: "none",
+            borderRadius: "4px",
+            backgroundColor: "transparent",
+            cursor: "pointer",
+            color: theme.colors.textSecondary
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          },
+          title: "New Tab (⌘T)",
+          children: /* @__PURE__ */ jsx4(Plus, {
+            size: 14
+          })
+        })
+      })
+    ]
+  });
+};
+TabBar.displayName = "TabBar";
+// src/types/mixed-tab.ts
+function isTabOfType(tab, contentType) {
+  return tab.contentType === contentType;
+}
+// src/hooks/useTabKeyboardShortcuts.ts
+import { useEffect as useEffect2 } from "react";
+var useTabKeyboardShortcuts = ({
+  onNewTab,
+  onCloseTab,
+  onSwitchToTab,
+  enabled = true
+}) => {
+  useEffect2(() => {
+    if (!enabled)
+      return;
+    const handleKeyDown = (e) => {
+      const isCmdOrCtrl = e.metaKey || e.ctrlKey;
+      if (isCmdOrCtrl && e.key === "t" && onNewTab) {
+        e.preventDefault();
+        e.stopPropagation();
+        onNewTab();
+        return;
+      }
+      if (isCmdOrCtrl && e.key === "w" && onCloseTab) {
+        e.preventDefault();
+        e.stopPropagation();
+        onCloseTab();
+        return;
+      }
+      if (isCmdOrCtrl && /^[1-9]$/.test(e.key) && onSwitchToTab) {
+        e.preventDefault();
+        e.stopPropagation();
+        const index = parseInt(e.key, 10) - 1;
+        onSwitchToTab(index);
+        return;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, onNewTab, onCloseTab, onSwitchToTab]);
+};
+// src/panels/TerminalPanel.tsx
+import { useTheme as useTheme5 } from "@principal-ade/industry-theme";
 import { Lock, Unlock, ArrowDown } from "lucide-react";
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 
 // src/panel-types/index.ts
 function getTerminalSessions(context) {
@@ -838,19 +1096,19 @@ function getTerminalSlice(context) {
 }
 
 // src/panels/TerminalPanel.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var TerminalPanel = ({
   context,
   actions,
   events: _events,
   terminalScope = "repository"
 }) => {
-  const { theme } = useTheme3();
-  const [sessionId, setSessionId] = useState2(null);
-  const [error, setError] = useState2(null);
-  const [isInitializing, setIsInitializing] = useState2(true);
-  const [usingMessagePort, setUsingMessagePort] = useState2(false);
-  const [scrollPosition, setScrollPosition] = useState2({
+  const { theme } = useTheme5();
+  const [sessionId, setSessionId] = useState3(null);
+  const [error, setError] = useState3(null);
+  const [isInitializing, setIsInitializing] = useState3(true);
+  const [usingMessagePort, setUsingMessagePort] = useState3(false);
+  const [scrollPosition, setScrollPosition] = useState3({
     isAtTop: false,
     isAtBottom: true,
     isScrollLocked: false
@@ -859,7 +1117,7 @@ var TerminalPanel = ({
   const dataPortRef = useRef2(null);
   const terminalDirectory = getTerminalDirectory(context, terminalScope);
   const pendingSessionIdRef = useRef2(null);
-  useEffect2(() => {
+  useEffect3(() => {
     let mounted = true;
     let unsubscribePortReady = null;
     const initTerminal = async () => {
@@ -917,7 +1175,7 @@ var TerminalPanel = ({
       }
     };
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (usingMessagePort)
       return;
     if (!sessionId)
@@ -930,7 +1188,7 @@ var TerminalPanel = ({
     }, 5000);
     return () => clearTimeout(timeout);
   }, [sessionId, usingMessagePort]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!usingMessagePort || !dataPortRef.current)
       return;
     const port = dataPortRef.current;
@@ -988,7 +1246,7 @@ var TerminalPanel = ({
       hasNotifiedPtyRef.current = true;
     }
   };
-  useEffect2(() => {
+  useEffect3(() => {
     hasNotifiedPtyRef.current = false;
   }, [sessionId]);
   const handleScrollPositionChange = (position) => {
@@ -996,7 +1254,7 @@ var TerminalPanel = ({
   };
   const sessionInfo = sessionId ? getTerminalSession(context, sessionId) : undefined;
   if (error) {
-    return /* @__PURE__ */ jsxs2("div", {
+    return /* @__PURE__ */ jsxs4("div", {
       style: {
         padding: "20px",
         color: "#ef4444",
@@ -1009,11 +1267,11 @@ var TerminalPanel = ({
         gap: "10px"
       },
       children: [
-        /* @__PURE__ */ jsx3("div", {
+        /* @__PURE__ */ jsx5("div", {
           style: { fontSize: "16px", fontWeight: "bold" },
           children: "Terminal Error"
         }),
-        /* @__PURE__ */ jsx3("div", {
+        /* @__PURE__ */ jsx5("div", {
           style: { fontSize: "14px", opacity: 0.8 },
           children: error
         })
@@ -1021,7 +1279,7 @@ var TerminalPanel = ({
     });
   }
   if (isInitializing || !sessionId) {
-    return /* @__PURE__ */ jsx3("div", {
+    return /* @__PURE__ */ jsx5("div", {
       style: {
         padding: "20px",
         color: "#a0a0a0",
@@ -1047,10 +1305,10 @@ var TerminalPanel = ({
       terminalRef.current?.scrollToBottom();
     }
   };
-  return /* @__PURE__ */ jsxs2("div", {
+  return /* @__PURE__ */ jsxs4("div", {
     style: { height: "100%", width: "100%", display: "flex", flexDirection: "column" },
     children: [
-      /* @__PURE__ */ jsxs2("div", {
+      /* @__PURE__ */ jsxs4("div", {
         style: {
           display: "flex",
           gap: "8px",
@@ -1060,7 +1318,7 @@ var TerminalPanel = ({
           alignItems: "center"
         },
         children: [
-          /* @__PURE__ */ jsxs2("span", {
+          /* @__PURE__ */ jsxs4("span", {
             style: {
               fontSize: "12px",
               color: theme.colors.textSecondary,
@@ -1073,7 +1331,7 @@ var TerminalPanel = ({
               sessionInfo?.shell
             ]
           }),
-          /* @__PURE__ */ jsxs2("button", {
+          /* @__PURE__ */ jsxs4("button", {
             onClick: handleToggleScrollLock,
             style: {
               display: "flex",
@@ -1092,17 +1350,17 @@ var TerminalPanel = ({
             onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
             title: scrollPosition.isScrollLocked ? "Click to unlock scroll" : "Click to lock scroll to bottom",
             children: [
-              scrollPosition.isScrollLocked ? /* @__PURE__ */ jsx3(Lock, {
+              scrollPosition.isScrollLocked ? /* @__PURE__ */ jsx5(Lock, {
                 size: 12
-              }) : /* @__PURE__ */ jsx3(Unlock, {
+              }) : /* @__PURE__ */ jsx5(Unlock, {
                 size: 12
               }),
-              /* @__PURE__ */ jsx3("span", {
+              /* @__PURE__ */ jsx5("span", {
                 children: scrollPosition.isScrollLocked ? "Locked" : "Unlocked"
               })
             ]
           }),
-          /* @__PURE__ */ jsxs2("button", {
+          /* @__PURE__ */ jsxs4("button", {
             onClick: handleScrollToBottom,
             disabled: scrollPosition.isAtBottom,
             style: {
@@ -1123,19 +1381,19 @@ var TerminalPanel = ({
             onMouseLeave: (e) => !scrollPosition.isAtBottom && (e.currentTarget.style.opacity = "1"),
             title: "Scroll to bottom and lock",
             children: [
-              /* @__PURE__ */ jsx3(ArrowDown, {
+              /* @__PURE__ */ jsx5(ArrowDown, {
                 size: 12
               }),
-              /* @__PURE__ */ jsx3("span", {
+              /* @__PURE__ */ jsx5("span", {
                 children: "Bottom"
               })
             ]
           })
         ]
       }),
-      /* @__PURE__ */ jsx3("div", {
+      /* @__PURE__ */ jsx5("div", {
         style: { flex: 1 },
-        children: /* @__PURE__ */ jsx3(ThemedTerminalWithProvider, {
+        children: /* @__PURE__ */ jsx5(ThemedTerminalWithProvider, {
           ref: terminalRef,
           onData: handleTerminalData,
           onResize: handleTerminalResize,
@@ -1153,28 +1411,28 @@ var TerminalPanel = ({
   });
 };
 // src/panels/TabbedTerminalPanel.tsx
-import { useTheme as useTheme4 } from "@principal-ade/industry-theme";
-import { Terminal as TerminalIcon2, X as X2, Plus, Lock as Lock2, Unlock as Unlock2, Box, Boxes } from "lucide-react";
-import React, {
-  useState as useState3,
+import { useTheme as useTheme6 } from "@principal-ade/industry-theme";
+import { Terminal as TerminalIcon2, Lock as Lock2, Unlock as Unlock2, Box, Boxes } from "lucide-react";
+import React2, {
+  useState as useState4,
   useCallback as useCallback2,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useRef as useRef3
 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function TerminalTabContentInner(props, ref) {
   const { tab, sessionId, isActive, isVisible, actions, events, terminalContext, onSessionCreated, onScrollPositionChange, isForeign = false } = props;
   const terminalRef = useRef3(null);
-  const [localSessionId, setLocalSessionId] = useState3(sessionId);
-  const [isInitialized, setIsInitialized] = useState3(false);
+  const [localSessionId, setLocalSessionId] = useState4(sessionId);
+  const [isInitialized, setIsInitialized] = useState4(false);
   const hasInitializedRef = useRef3(false);
-  const [scrollPosition, setScrollPosition] = useState3({
+  const [scrollPosition, setScrollPosition] = useState4({
     isAtTop: false,
     isAtBottom: true,
     isScrollLocked: false
   });
-  const [shouldRenderTerminal, setShouldRenderTerminal] = useState3(true);
-  const [ownerWindowId, setOwnerWindowId] = useState3(null);
+  const [shouldRenderTerminal, setShouldRenderTerminal] = useState4(true);
+  const [ownerWindowId, setOwnerWindowId] = useState4(null);
   const needsRefreshOnResizeRef = useRef3(false);
   const claimAndConnect = useCallback2(async (targetSessionId, force = false) => {
     try {
@@ -1194,7 +1452,7 @@ function TerminalTabContentInner(props, ref) {
       throw error;
     }
   }, [actions]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (hasInitializedRef.current) {
       return;
     }
@@ -1239,7 +1497,7 @@ function TerminalTabContentInner(props, ref) {
       mounted = false;
     };
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!localSessionId || !isInitialized || !shouldRenderTerminal) {
       return;
     }
@@ -1291,7 +1549,7 @@ function TerminalTabContentInner(props, ref) {
       });
     }
   }, [localSessionId, events]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!localSessionId || !actions.onOwnershipLost) {
       return;
     }
@@ -1341,12 +1599,12 @@ function TerminalTabContentInner(props, ref) {
       terminalRef.current?.scrollToBottom();
     }
   }, [scrollPosition.isScrollLocked]);
-  React.useImperativeHandle(ref, () => ({
+  React2.useImperativeHandle(ref, () => ({
     scrollToBottom: handleScrollToBottom,
     toggleScrollLock: handleToggleScrollLock
   }), [handleScrollToBottom, handleToggleScrollLock]);
   if (!isInitialized) {
-    return /* @__PURE__ */ jsx4("div", {
+    return /* @__PURE__ */ jsx6("div", {
       style: {
         display: isActive ? "flex" : "none",
         height: "100%",
@@ -1369,14 +1627,14 @@ function TerminalTabContentInner(props, ref) {
     ],
     opacity: 1
   } : undefined;
-  return /* @__PURE__ */ jsx4("div", {
+  return /* @__PURE__ */ jsx6("div", {
     style: {
       display: isActive ? "flex" : "none",
       flexDirection: "column",
       height: "100%",
       width: "100%"
     },
-    children: /* @__PURE__ */ jsx4(ThemedTerminalWithProvider, {
+    children: /* @__PURE__ */ jsx6(ThemedTerminalWithProvider, {
       ref: terminalRef,
       onData: shouldRenderTerminal ? handleData : undefined,
       onResize: shouldRenderTerminal ? handleResize : undefined,
@@ -1397,7 +1655,7 @@ function TerminalTabContentInner(props, ref) {
   });
 }
 var areTerminalTabContentPropsEqual = (prevProps, nextProps) => {
-  const tabEqual = prevProps.tab.id === nextProps.tab.id && prevProps.tab.directory === nextProps.tab.directory && prevProps.tab.isActive === nextProps.tab.isActive && prevProps.tab.label === nextProps.tab.label;
+  const tabEqual = prevProps.tab.id === nextProps.tab.id && prevProps.tab.directory === nextProps.tab.directory && prevProps.tab.label === nextProps.tab.label;
   const changes = [];
   if (!tabEqual)
     changes.push("tab");
@@ -1413,8 +1671,8 @@ var areTerminalTabContentPropsEqual = (prevProps, nextProps) => {
     changes.push("isForeign");
   return changes.length === 0;
 };
-var TerminalTabContentForwarded = React.forwardRef(TerminalTabContentInner);
-var TerminalTabContent = React.memo(TerminalTabContentForwarded, areTerminalTabContentPropsEqual);
+var TerminalTabContentForwarded = React2.forwardRef(TerminalTabContentInner);
+var TerminalTabContent = React2.memo(TerminalTabContentForwarded, areTerminalTabContentPropsEqual);
 TerminalTabContent.displayName = "TerminalTabContent";
 var TabbedTerminalPanelInner = ({
   context: _context,
@@ -1428,22 +1686,41 @@ var TabbedTerminalPanelInner = ({
   initialTabs = [],
   showAllTerminals = false,
   onShowAllTerminalsChange,
-  tabLabelPrefix
+  tabLabelPrefix,
+  renderTabContent
 }) => {
-  const { theme } = useTheme4();
-  const [ownedTabs, setOwnedTabs] = useState3(initialTabs);
-  const [foreignTabs, setForeignTabs] = useState3([]);
-  const [activeTabId, setActiveTabId] = useState3(null);
-  const [sessionIds, setSessionIds] = useState3(new Map);
-  const [hoveredTabId, setHoveredTabId] = useState3(null);
-  const [scrollPositions, setScrollPositions] = useState3(new Map);
+  const { theme } = useTheme6();
+  const [ownedTabs, setOwnedTabs] = useState4(initialTabs);
+  const [foreignTabs, setForeignTabs] = useState4([]);
+  const [activeTabId, setActiveTabId] = useState4(null);
+  const [sessionIds, setSessionIds] = useState4(new Map);
+  const [scrollPositions, setScrollPositions] = useState4(new Map);
+  useEffect4(() => {
+    const customTabsFromProp = initialTabs.filter((tab) => tab.contentType !== "terminal");
+    setOwnedTabs((prevTabs) => {
+      const existingTerminalTabs = prevTabs.filter((tab) => tab.contentType === "terminal");
+      const customTabIds = new Set(customTabsFromProp.map((t) => t.id));
+      const existingCustomTabs = prevTabs.filter((tab) => tab.contentType !== "terminal" && !customTabIds.has(tab.id));
+      const mergedTabs = [
+        ...existingTerminalTabs,
+        ...existingCustomTabs,
+        ...customTabsFromProp
+      ];
+      const prevCustomTabs = prevTabs.filter((tab) => tab.contentType !== "terminal");
+      const customTabsChanged = prevCustomTabs.length !== customTabsFromProp.length || !customTabsFromProp.every((tab) => prevCustomTabs.some((prev) => prev.id === tab.id));
+      if (!customTabsChanged) {
+        return prevTabs;
+      }
+      return mergedTabs;
+    });
+  }, [initialTabs]);
   const getOwnedTabLabel = useCallback2((index, _directory) => {
     if (tabLabelPrefix) {
       return `${tabLabelPrefix} ${index + 1}`;
     }
     return `⌘ ${index + 1}`;
   }, [tabLabelPrefix]);
-  const tabs = React.useMemo(() => {
+  const tabs = React2.useMemo(() => {
     const labeledOwnedTabs = ownedTabs.map((tab, index) => ({
       ...tab,
       label: getOwnedTabLabel(index, tab.directory)
@@ -1451,6 +1728,18 @@ var TabbedTerminalPanelInner = ({
     const sortedForeignTabs = [...foreignTabs].sort((a, b) => a.label.localeCompare(b.label));
     return [...labeledOwnedTabs, ...sortedForeignTabs];
   }, [ownedTabs, foreignTabs, getOwnedTabLabel]);
+  const genericTabs = React2.useMemo(() => {
+    return tabs.map((tab) => ({
+      id: tab.id,
+      label: tab.label,
+      closable: true,
+      contentType: tab.contentType,
+      metadata: {
+        ...tab.directory && { directory: tab.directory },
+        ...tab.command && { command: tab.command }
+      }
+    }));
+  }, [tabs]);
   const tabRefsMap = useRef3(new Map);
   const refCallbacksMap = useRef3(new Map);
   const getRefCallback = useCallback2((tabId) => {
@@ -1493,14 +1782,15 @@ var TabbedTerminalPanelInner = ({
       if (ownedSessions.length > 0 && initialTabs.length === 0) {
         const restoredTabs = [];
         const restoredSessionIds = new Map;
-        ownedSessions.forEach((session, index) => {
+        ownedSessions.forEach((session) => {
           const tabId = `tab-restored-${session.id}`;
           const sessionCwd = session.cwd || directory;
           const tab = {
             id: tabId,
             label: sessionCwd.split("/").pop() || sessionCwd,
+            contentType: "terminal",
             directory: sessionCwd,
-            isActive: index === 0
+            closable: true
           };
           restoredTabs.push(tab);
           restoredSessionIds.set(tabId, session.id);
@@ -1511,7 +1801,7 @@ var TabbedTerminalPanelInner = ({
         onTabsChange?.(restoredTabs);
       } else if (initialTabs.length > 0) {
         setOwnedTabs(initialTabs);
-        setActiveTabId(initialTabs.find((t) => t.isActive)?.id || initialTabs[0]?.id || null);
+        setActiveTabId(initialTabs[0]?.id || null);
       }
     } catch (err) {
       console.error("[TabbedTerminalPanel] Failed to restore owned sessions:", err);
@@ -1532,8 +1822,9 @@ var TabbedTerminalPanelInner = ({
         const tab = {
           id: tabId,
           label: sessionCwd.split("/").pop() || sessionCwd,
+          contentType: "terminal",
           directory: sessionCwd,
-          isActive: false
+          closable: true
         };
         foreignTabsList.push(tab);
         newSessionIds.set(tabId, session.id);
@@ -1559,13 +1850,13 @@ var TabbedTerminalPanelInner = ({
       return [];
     });
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (hasInitializedRef.current)
       return;
     hasInitializedRef.current = true;
     restoreOwnedSessions();
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     const handleSessionCreated2 = (event) => {
       const customEvent = event;
       const { context } = customEvent.detail || {};
@@ -1579,7 +1870,7 @@ var TabbedTerminalPanelInner = ({
       window.removeEventListener("terminal-session-created", handleSessionCreated2);
     };
   }, [terminalContext, restoreOwnedSessions]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (showAllTerminals) {
       fetchForeignSessions();
     } else {
@@ -1603,17 +1894,16 @@ var TabbedTerminalPanelInner = ({
     const newTab = {
       id: `tab-${Date.now()}`,
       label: label || directoryName,
+      contentType: "terminal",
       directory: targetDir,
       command,
-      isActive: true
+      closable: true
     };
     setOwnedTabs((prevTabs) => {
-      const updatedTabs = prevTabs.map((t) => ({ ...t, isActive: false }));
-      const newTabs = [...updatedTabs, newTab];
+      const newTabs = [...prevTabs, newTab];
       onTabsChange?.(newTabs);
       return newTabs;
     });
-    setForeignTabs((prevTabs) => prevTabs.map((t) => ({ ...t, isActive: false })));
     setActiveTabId(newTab.id);
   }, [directory, onTabsChange]);
   const isForeignTab = useCallback2((tabId) => {
@@ -1648,11 +1938,8 @@ var TabbedTerminalPanelInner = ({
         const nextActiveId = findNextActiveTab([...ownedTabs, ...newTabs]);
         if (nextActiveId !== activeTabId) {
           setActiveTabId(nextActiveId);
-          if (nextActiveId) {
-            setOwnedTabs((owned) => owned.map((t) => ({ ...t, isActive: t.id === nextActiveId })));
-          }
         }
-        return newTabs.map((t) => ({ ...t, isActive: t.id === nextActiveId }));
+        return newTabs;
       });
     } else {
       setOwnedTabs((prevTabs) => {
@@ -1660,71 +1947,74 @@ var TabbedTerminalPanelInner = ({
         const nextActiveId = findNextActiveTab([...newTabs, ...foreignTabs]);
         if (nextActiveId !== activeTabId) {
           setActiveTabId(nextActiveId);
-          if (nextActiveId) {
-            setForeignTabs((foreign) => foreign.map((t) => ({ ...t, isActive: t.id === nextActiveId })));
-          }
         }
         onTabsChange?.(newTabs);
-        return newTabs.map((t) => ({ ...t, isActive: t.id === nextActiveId }));
+        return newTabs;
       });
     }
   }, [activeTabId, sessionIds, actions, onTabsChange, isForeignTab, ownedTabs, foreignTabs]);
   const handleSessionCreated = useCallback2((tabId, sessionId) => {
     setSessionIds((prev) => new Map(prev).set(tabId, sessionId));
   }, []);
-  const tabsRef = useRef3(tabs);
-  const activeTabIdRef = useRef3(activeTabId);
-  const addNewTabRef = useRef3(addNewTab);
-  const closeTabRef = useRef3(closeTab);
-  const switchTabRef = useRef3(switchTab);
-  useEffect3(() => {
-    tabsRef.current = tabs;
-    activeTabIdRef.current = activeTabId;
-    addNewTabRef.current = addNewTab;
-    closeTabRef.current = closeTab;
-    switchTabRef.current = switchTab;
-  }, [tabs, activeTabId, addNewTab, closeTab, switchTab]);
-  useEffect3(() => {
-    const handleKeyDown = (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "t") {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isCreatingTabRef.current)
-          return;
-        isCreatingTabRef.current = true;
-        addNewTabRef.current?.();
-        setTimeout(() => {
-          isCreatingTabRef.current = false;
-        }, 500);
-        return;
-      }
-      if ((e.metaKey || e.ctrlKey) && e.key === "w") {
-        const currentActiveTabId = activeTabIdRef.current;
-        const currentTabs = tabsRef.current;
-        if (currentActiveTabId && currentTabs.length > 0) {
-          e.preventDefault();
-          e.stopPropagation();
-          closeTabRef.current?.(currentActiveTabId);
-        }
+  useTabKeyboardShortcuts({
+    onNewTab: () => {
+      if (isCreatingTabRef.current)
         return;
+      isCreatingTabRef.current = true;
+      addNewTab();
+      setTimeout(() => {
+        isCreatingTabRef.current = false;
+      }, 500);
+    },
+    onCloseTab: () => {
+      if (activeTabId && tabs.length > 0) {
+        closeTab(activeTabId);
       }
-      if ((e.metaKey || e.ctrlKey) && e.key >= "1" && e.key <= "9") {
-        e.preventDefault();
-        const currentTabs = tabsRef.current;
-        const keyNum = parseInt(e.key, 10);
-        const tabIndex = keyNum === 9 ? currentTabs.length - 1 : keyNum - 1;
-        if (tabIndex >= 0 && tabIndex < currentTabs.length) {
-          const targetTab = currentTabs[tabIndex];
-          if (targetTab) {
-            switchTabRef.current?.(targetTab.id);
-          }
-        }
+    },
+    onSwitchToTab: (index) => {
+      const tabIndex = index === 8 && tabs.length > 9 ? tabs.length - 1 : index;
+      if (tabIndex >= 0 && tabIndex < tabs.length) {
+        switchTab(tabs[tabIndex].id);
       }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, []);
-  return /* @__PURE__ */ jsxs3("div", {
+    }
+  });
+  const renderTabAccessory = useCallback2((tab) => {
+    if (tab.id !== activeTabId)
+      return null;
+    const scrollPosition = scrollPositions.get(tab.id) ?? defaultScrollPosition;
+    return /* @__PURE__ */ jsx6("button", {
+      onClick: (e) => {
+        e.stopPropagation();
+        handleToggleScrollLock();
+      },
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "16px",
+        height: "16px",
+        borderRadius: "3px",
+        border: "none",
+        backgroundColor: "transparent",
+        cursor: "pointer",
+        color: scrollPosition.isScrollLocked ? theme.colors.success : theme.colors.warning,
+        padding: 0
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
+      },
+      title: scrollPosition.isScrollLocked ? "Scroll locked" : "Scroll unlocked",
+      children: scrollPosition.isScrollLocked ? /* @__PURE__ */ jsx6(Lock2, {
+        size: 10
+      }) : /* @__PURE__ */ jsx6(Unlock2, {
+        size: 10
+      })
+    });
+  }, [activeTabId, scrollPositions, defaultScrollPosition, handleToggleScrollLock, theme]);
+  return /* @__PURE__ */ jsxs5("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -1732,205 +2022,50 @@ var TabbedTerminalPanelInner = ({
       backgroundColor: theme.colors.background
     },
     children: [
-      !hideHeader && /* @__PURE__ */ jsxs3("div", {
+      !hideHeader && /* @__PURE__ */ jsx6("div", {
         ref: headerRef,
-        style: {
-          display: "flex",
-          alignItems: "stretch",
-          height: "40px",
-          flexShrink: 0,
-          boxSizing: "border-box"
-        },
-        children: [
-          /* @__PURE__ */ jsx4("div", {
+        children: /* @__PURE__ */ jsx6(TabBar, {
+          tabs: genericTabs,
+          activeTabId,
+          onTabClick: switchTab,
+          onTabClose: closeTab,
+          onNewTab: addNewTab,
+          leftSection: /* @__PURE__ */ jsx6("button", {
+            onClick: () => onShowAllTerminalsChange?.(!showAllTerminals),
             style: {
               display: "flex",
               alignItems: "center",
-              gap: "4px",
-              padding: "0 8px",
-              borderRight: `1px solid ${theme.colors.border}`,
-              borderBottom: `1px solid ${theme.colors.border}`,
-              boxSizing: "border-box"
-            },
-            children: /* @__PURE__ */ jsx4("button", {
-              onClick: () => onShowAllTerminalsChange?.(!showAllTerminals),
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "28px",
-                height: "28px",
-                border: "none",
-                borderRadius: "4px",
-                backgroundColor: showAllTerminals ? `${theme.colors.primary}22` : "transparent",
-                cursor: "pointer",
-                color: showAllTerminals ? theme.colors.primary : theme.colors.textSecondary
-              },
-              onMouseEnter: (e) => {
-                if (!showAllTerminals) {
-                  e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
-                }
-              },
-              onMouseLeave: (e) => {
-                if (!showAllTerminals) {
-                  e.currentTarget.style.backgroundColor = "transparent";
-                }
-              },
-              title: showAllTerminals ? "Showing all terminals (click to filter by context)" : "Show all terminals",
-              children: showAllTerminals ? /* @__PURE__ */ jsx4(Boxes, {
-                size: 14
-              }) : /* @__PURE__ */ jsx4(Box, {
-                size: 14
-              })
-            })
-          }),
-          /* @__PURE__ */ jsx4("div", {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              flex: 1,
-              overflow: "hidden",
-              borderBottom: `1px solid ${theme.colors.border}`,
-              boxSizing: "border-box"
-            },
-            children: tabs.map((tab) => /* @__PURE__ */ jsxs3("div", {
-              onClick: (e) => {
-                e.stopPropagation();
-                switchTab(tab.id);
-              },
-              onMouseEnter: () => setHoveredTabId(tab.id),
-              onMouseLeave: () => setHoveredTabId(null),
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: "6px",
-                padding: "6px 8px",
-                backgroundColor: tab.isActive ? theme.colors.background : theme.colors.backgroundSecondary,
-                borderBottom: "none",
-                cursor: "pointer",
-                fontSize: theme.fontSizes[1],
-                fontWeight: tab.isActive ? theme.fontWeights.semibold : theme.fontWeights.body,
-                fontFamily: theme.fonts.body,
-                color: tab.isActive ? theme.colors.text : theme.colors.textSecondary,
-                whiteSpace: "nowrap",
-                transition: "all 0.2s",
-                flex: 1,
-                minWidth: 0,
-                height: "100%",
-                position: "relative",
-                boxSizing: "border-box"
-              },
-              children: [
-                hoveredTabId === tab.id && /* @__PURE__ */ jsx4("button", {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    closeTab(tab.id);
-                  },
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "16px",
-                    height: "16px",
-                    borderRadius: "3px",
-                    border: "none",
-                    backgroundColor: "transparent",
-                    cursor: "pointer",
-                    color: theme.colors.textSecondary,
-                    padding: 0,
-                    position: "absolute",
-                    left: "8px"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  },
-                  children: /* @__PURE__ */ jsx4(X2, {
-                    size: 12
-                  })
-                }),
-                /* @__PURE__ */ jsx4("span", {
-                  title: tab.directory.split("/").pop() || tab.directory,
-                  children: tab.label
-                }),
-                tab.isActive && /* @__PURE__ */ jsx4("button", {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleToggleScrollLock();
-                  },
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "16px",
-                    height: "16px",
-                    borderRadius: "3px",
-                    border: "none",
-                    backgroundColor: "transparent",
-                    cursor: "pointer",
-                    color: (scrollPositions.get(tab.id) ?? defaultScrollPosition).isScrollLocked ? theme.colors.success : theme.colors.warning,
-                    padding: 0,
-                    position: "absolute",
-                    right: "8px"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  },
-                  title: (scrollPositions.get(tab.id) ?? defaultScrollPosition).isScrollLocked ? "Scroll locked" : "Scroll unlocked",
-                  children: (scrollPositions.get(tab.id) ?? defaultScrollPosition).isScrollLocked ? /* @__PURE__ */ jsx4(Lock2, {
-                    size: 10
-                  }) : /* @__PURE__ */ jsx4(Unlock2, {
-                    size: 10
-                  })
-                })
-              ]
-            }, tab.id))
-          }),
-          /* @__PURE__ */ jsx4("div", {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "4px",
-              padding: "0 8px",
-              borderLeft: `1px solid ${theme.colors.border}`,
-              borderBottom: `1px solid ${theme.colors.border}`,
-              boxSizing: "border-box"
+              justifyContent: "center",
+              width: "28px",
+              height: "28px",
+              border: "none",
+              borderRadius: "4px",
+              backgroundColor: showAllTerminals ? `${theme.colors.primary}22` : "transparent",
+              cursor: "pointer",
+              color: showAllTerminals ? theme.colors.primary : theme.colors.textSecondary
             },
-            children: /* @__PURE__ */ jsx4("button", {
-              onClick: () => addNewTab(),
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "28px",
-                height: "28px",
-                border: "none",
-                borderRadius: "4px",
-                backgroundColor: "transparent",
-                cursor: "pointer",
-                color: theme.colors.textSecondary
-              },
-              onMouseEnter: (e) => {
+            onMouseEnter: (e) => {
+              if (!showAllTerminals) {
                 e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
-              },
-              onMouseLeave: (e) => {
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!showAllTerminals) {
                 e.currentTarget.style.backgroundColor = "transparent";
-              },
-              title: "New terminal (Cmd+T)",
-              children: /* @__PURE__ */ jsx4(Plus, {
-                size: 14
-              })
+              }
+            },
+            title: showAllTerminals ? "Showing all terminals (click to filter by context)" : "Show all terminals",
+            children: showAllTerminals ? /* @__PURE__ */ jsx6(Boxes, {
+              size: 14
+            }) : /* @__PURE__ */ jsx6(Box, {
+              size: 14
             })
-          })
-        ]
+          }),
+          renderTabAccessory,
+          showKeyboardHints: false
+        })
       }),
-      /* @__PURE__ */ jsxs3("div", {
+      /* @__PURE__ */ jsxs5("div", {
         style: {
           flex: 1,
           display: "flex",
@@ -1940,20 +2075,74 @@ var TabbedTerminalPanelInner = ({
           minHeight: 0
         },
         children: [
-          tabs.map((tab) => /* @__PURE__ */ jsx4(TerminalTabContent, {
-            ref: getRefCallback(tab.id),
-            tab,
-            sessionId: sessionIds.get(tab.id) || null,
-            isActive: tab.id === activeTabId,
-            isVisible,
-            actions,
-            events,
-            terminalContext,
-            onSessionCreated: handleSessionCreated,
-            onScrollPositionChange: handleTabScrollPositionChange,
-            isForeign: tab.id.startsWith("tab-foreign-")
-          }, tab.id)),
-          tabs.length === 0 && /* @__PURE__ */ jsxs3("div", {
+          tabs.map((tab) => {
+            const isActive = tab.id === activeTabId;
+            const sessionId = sessionIds.get(tab.id) || null;
+            if (renderTabContent) {
+              const customContent = renderTabContent(tab, isActive, sessionId);
+              if (customContent === null && tab.contentType === "terminal") {
+                return /* @__PURE__ */ jsx6(TerminalTabContent, {
+                  ref: getRefCallback(tab.id),
+                  tab,
+                  sessionId,
+                  isActive,
+                  isVisible,
+                  actions,
+                  events,
+                  terminalContext,
+                  onSessionCreated: handleSessionCreated,
+                  onScrollPositionChange: handleTabScrollPositionChange,
+                  isForeign: tab.id.startsWith("tab-foreign-")
+                }, tab.id);
+              }
+              return /* @__PURE__ */ jsx6("div", {
+                style: {
+                  display: isActive ? "flex" : "none",
+                  flexDirection: "column",
+                  height: "100%",
+                  width: "100%"
+                },
+                children: customContent
+              }, tab.id);
+            }
+            if (tab.contentType === "terminal") {
+              return /* @__PURE__ */ jsx6(TerminalTabContent, {
+                ref: getRefCallback(tab.id),
+                tab,
+                sessionId,
+                isActive,
+                isVisible,
+                actions,
+                events,
+                terminalContext,
+                onSessionCreated: handleSessionCreated,
+                onScrollPositionChange: handleTabScrollPositionChange,
+                isForeign: tab.id.startsWith("tab-foreign-")
+              }, tab.id);
+            }
+            return /* @__PURE__ */ jsxs5("div", {
+              style: {
+                display: isActive ? "flex" : "none",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "100%",
+                color: theme.colors.textSecondary
+              },
+              children: [
+                /* @__PURE__ */ jsxs5("p", {
+                  children: [
+                    "Unknown content type: ",
+                    tab.contentType
+                  ]
+                }),
+                /* @__PURE__ */ jsx6("p", {
+                  style: { fontSize: theme.fontSizes[0], marginTop: "8px" },
+                  children: "Provide a renderTabContent prop to render custom tab types"
+                })
+              ]
+            }, tab.id);
+          }),
+          tabs.length === 0 && /* @__PURE__ */ jsxs5("div", {
             style: {
               display: "flex",
               flexDirection: "column",
@@ -1963,14 +2152,14 @@ var TabbedTerminalPanelInner = ({
               color: theme.colors.textSecondary
             },
             children: [
-              /* @__PURE__ */ jsx4(TerminalIcon2, {
+              /* @__PURE__ */ jsx6(TerminalIcon2, {
                 size: 32,
                 style: { opacity: 0.5, marginBottom: "16px" }
               }),
-              /* @__PURE__ */ jsx4("p", {
+              /* @__PURE__ */ jsx6("p", {
                 children: "No terminal sessions"
               }),
-              /* @__PURE__ */ jsx4("button", {
+              /* @__PURE__ */ jsx6("button", {
                 onClick: () => addNewTab(),
                 style: {
                   marginTop: "16px",
@@ -1993,7 +2182,7 @@ var TabbedTerminalPanelInner = ({
   });
 };
 TabbedTerminalPanelInner.displayName = "TabbedTerminalPanelInner";
-var TabbedTerminalPanel = React.memo(TabbedTerminalPanelInner, (prevProps, nextProps) => {
+var TabbedTerminalPanelMemoized = React2.memo(TabbedTerminalPanelInner, (prevProps, nextProps) => {
   const changes = [];
   if (prevProps.terminalContext !== nextProps.terminalContext)
     changes.push("terminalContext");
@@ -2015,9 +2204,12 @@ var TabbedTerminalPanel = React.memo(TabbedTerminalPanelInner, (prevProps, nextP
     changes.push("onShowAllTerminalsChange");
   if (prevProps.initialTabs !== nextProps.initialTabs)
     changes.push("initialTabs");
+  if (prevProps.renderTabContent !== nextProps.renderTabContent)
+    changes.push("renderTabContent");
   return changes.length === 0;
 });
-TabbedTerminalPanel.displayName = "TabbedTerminalPanel";
+TabbedTerminalPanelMemoized.displayName = "TabbedTerminalPanel";
+var TabbedTerminalPanel = TabbedTerminalPanelMemoized;
 // src/tools/index.ts
 var createTerminalSessionTool = {
   name: "create_terminal_session",
@@ -2200,12 +2392,14 @@ var onPackageUnload = async () => {
 export {
   writeToTerminalTool,
   useThemedTerminal,
+  useTabKeyboardShortcuts,
   terminalPanelToolsMetadata,
   terminalPanelTools,
   panels,
   onPackageUnload,
   onPackageLoad,
   isTerminalLoading,
+  isTabOfType,
   getWorkspacePath,
   getTerminalSlice,
   getTerminalSessions,
@@ -2221,5 +2415,7 @@ export {
   ThemedTerminalWithProvider,
   ThemedTerminal,
   TerminalPanel,
-  TabbedTerminalPanel
+  TabbedTerminalPanel,
+  TabButton,
+  TabBar
 };