@industry-theme/xterm-terminal-panel 0.5.2 → 0.5.4

package/dist/index.js

@@ -32,7 +32,7 @@ import {
   context,
   SpanStatusCode
 } from "@opentelemetry/api";
-var PACKAGE_VERSION = "0.5.1";
+var PACKAGE_VERSION = "0.5.4";
 var TRACER_NAME = "@industry-theme/xterm-terminal-panel";
 var TRACER_VERSION = PACKAGE_VERSION;
 function getTracer() {
@@ -1782,16 +1782,40 @@ var TerminalPanel = ({
 };
 // src/panels/TabbedTerminalPanel.tsx
 import { useTheme as useTheme6 } from "@principal-ade/industry-theme";
-import { Terminal as TerminalIcon2, Lock as Lock2, Unlock as Unlock2, Box, Boxes, Loader2 } from "lucide-react";
+import { Terminal as TerminalIcon2, Lock as Lock2, Unlock as Unlock2, Box, Boxes } from "lucide-react";
 import React2, {
   useState as useState4,
   useCallback as useCallback3,
   useEffect as useEffect4,
   useRef as useRef3
 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6, Fragment as Fragment2 } from "react/jsx-runtime";
+var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs6("div", {
+  style: { display: "flex", gap: 1, alignItems: "center", height: 12 },
+  children: [
+    [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx7("div", {
+      style: {
+        width: 2,
+        height: 10,
+        backgroundColor: color,
+        borderRadius: 1,
+        transformOrigin: "center",
+        transform: isAnimating ? undefined : "scaleY(0.4)",
+        animation: isAnimating ? `waveSine 1.2s ease-in-out ${i * 0.1}s infinite` : "none"
+      }
+    }, i)),
+    /* @__PURE__ */ jsx7("style", {
+      children: `
+        @keyframes waveSine {
+          0%, 100% { transform: scaleY(0.4); }
+          50% { transform: scaleY(1); }
+        }
+      `
+    })
+  ]
+});
 function TerminalTabContentInner(props, ref) {
-  const { tab, sessionId, isActive, isVisible, actions, events, terminalContext, onSessionCreated, onScrollPositionChange, isForeign = false, defaultScrollLocked, activityDetection = true, activityTimeout = 500, autoShowBlinds = false } = props;
+  const { tab, sessionId, isActive, isVisible, actions, events, terminalContext, onSessionCreated, onScrollPositionChange, isForeign = false, defaultScrollLocked, activityDetection = true, activityTimeout = 500, autoShowBlinds = false, onActivityStateChange } = props;
   console.log("[TerminalTabContent] RENDER", { tabId: tab.id, isActive, sessionId });
   const terminalRef = useRef3(null);
   const [localSessionId, setLocalSessionId] = useState4(sessionId);
@@ -1988,6 +2012,7 @@ function TerminalTabContentInner(props, ref) {
   }, [localSessionId, events]);
   const handleActivityChange = useCallback3((state) => {
     if (localSessionId) {
+      onActivityStateChange?.(localSessionId, state.isActive);
       events.emit({
         type: "terminal:activity-changed",
         source: "TabbedTerminalPanel",
@@ -1999,7 +2024,7 @@ function TerminalTabContentInner(props, ref) {
         }
       });
     }
-  }, [localSessionId, events]);
+  }, [localSessionId, events, onActivityStateChange]);
   const handleScrollToBottom = useCallback3(() => {
     terminalRef.current?.scrollToBottom();
   }, []);
@@ -2146,6 +2171,7 @@ var TabbedTerminalPanelInner = ({
   }, [isControlled, onActiveTabChange]);
   const [sessionIds, setSessionIds] = useState4(new Map);
   const [scrollPositions, setScrollPositions] = useState4(new Map);
+  const [activityStates, setActivityStates] = useState4(new Map);
   const customTabsKey = React2.useMemo(() => {
     const customTabs = initialTabs.filter((tab) => tab.contentType !== "terminal");
     return JSON.stringify(customTabs);
@@ -2449,6 +2475,17 @@ var TabbedTerminalPanelInner = ({
   const handleSessionCreated = useCallback3((tabId, sessionId) => {
     setSessionIds((prev) => new Map(prev).set(tabId, sessionId));
   }, []);
+  const handleActivityStateChange = useCallback3((sessionId, isActive) => {
+    setActivityStates((prev) => {
+      const next = new Map(prev);
+      if (isActive) {
+        next.set(sessionId, true);
+      } else {
+        next.delete(sessionId);
+      }
+      return next;
+    });
+  }, []);
   useTabKeyboardShortcuts({
     onNewTab: () => {
       if (isCreatingTabRef.current)
@@ -2471,32 +2508,16 @@ var TabbedTerminalPanelInner = ({
   });
   const renderTabAccessory = useCallback3((tab) => {
     const tabSessionId = sessionIds.get(tab.id);
-    const isWorking = tabSessionId ? workingStates?.[tabSessionId]?.isWorking : false;
+    const hasExternalWorkingState = tabSessionId ? workingStates?.[tabSessionId]?.isWorking : false;
+    const hasInternalActivity = tabSessionId ? activityStates.get(tabSessionId) : false;
+    const isWorking = hasExternalWorkingState || hasInternalActivity;
     const isActive = tab.id === activeTabId;
-    if (!isActive && !isWorking)
+    if (!isActive)
       return null;
     const scrollPosition = scrollPositions.get(tab.id) ?? defaultScrollPosition;
-    return /* @__PURE__ */ jsxs6("div", {
-      style: { display: "flex", alignItems: "center", gap: "4px" },
+    return /* @__PURE__ */ jsxs6(Fragment2, {
       children: [
-        isWorking && /* @__PURE__ */ jsx7("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "16px",
-            height: "16px",
-            color: theme.colors.primary
-          },
-          title: "Agent working",
-          children: /* @__PURE__ */ jsx7(Loader2, {
-            size: 12,
-            style: {
-              animation: "spin 1s linear infinite"
-            }
-          })
-        }),
-        isActive && /* @__PURE__ */ jsx7("button", {
+        /* @__PURE__ */ jsx7("button", {
           onClick: (e) => {
             e.stopPropagation();
             handleToggleScrollLock();
@@ -2526,10 +2547,26 @@ var TabbedTerminalPanelInner = ({
           }) : /* @__PURE__ */ jsx7(Unlock2, {
             size: 10
           })
+        }),
+        /* @__PURE__ */ jsx7("div", {
+          style: {
+            position: "absolute",
+            right: "8px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "16px",
+            height: "16px"
+          },
+          title: isWorking ? "Terminal active" : "Terminal idle",
+          children: /* @__PURE__ */ jsx7(ActivityIndicator, {
+            color: theme.colors.primary,
+            isAnimating: isWorking ?? false
+          })
         })
       ]
     });
-  }, [activeTabId, scrollPositions, defaultScrollPosition, handleToggleScrollLock, theme, sessionIds, workingStates]);
+  }, [activeTabId, scrollPositions, defaultScrollPosition, handleToggleScrollLock, theme, sessionIds, workingStates, activityStates]);
   return /* @__PURE__ */ jsxs6("div", {
     style: {
       display: "flex",
@@ -2614,7 +2651,8 @@ var TabbedTerminalPanelInner = ({
                   defaultScrollLocked,
                   activityDetection,
                   activityTimeout,
-                  autoShowBlinds
+                  autoShowBlinds,
+                  onActivityStateChange: handleActivityStateChange
                 }, tab.id);
               }
               return /* @__PURE__ */ jsx7("div", {
@@ -2643,7 +2681,8 @@ var TabbedTerminalPanelInner = ({
                 defaultScrollLocked,
                 activityDetection,
                 activityTimeout,
-                autoShowBlinds
+                autoShowBlinds,
+                onActivityStateChange: handleActivityStateChange
               }, tab.id);
             }
             return /* @__PURE__ */ jsxs6("div", {

package/dist/src/components/ThemedTerminal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemedTerminal.d.ts","sourceRoot":"","sources":["../../../src/components/ThemedTerminal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAkC3D,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAGV,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAKjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,WAAW,4BAA6B,SAAQ,mBAAmB;IACvE,KAAK,EAAE,KAAK,CAAC;CACd;AAsBD,eAAO,MAAM,cAAc,4HAunC1B,CAAC"}
+{"version":3,"file":"ThemedTerminal.d.ts","sourceRoot":"","sources":["../../../src/components/ThemedTerminal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAkC3D,OAAO,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAGV,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAKjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,WAAW,4BAA6B,SAAQ,mBAAmB;IACvE,KAAK,EAAE,KAAK,CAAC;CACd;AAsBD,eAAO,MAAM,cAAc,4HAunC1B,CAAC"}

package/dist/src/panels/TabbedTerminalPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabbedTerminalPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/TabbedTerminalPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAKN,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EACV,wBAAwB,EACxB,WAAW,EAKZ,MAAM,gBAAgB,CAAC;AAiCxB,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAqyCD,eAAO,MAAM,mBAAmB,EAAkC,CAAC,IAAI,SAAS,OAAO,cAAc,EAAE,OAAO,GAAG,WAAW,EAC1H,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,KAClC,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"TabbedTerminalPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/TabbedTerminalPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAKN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,wBAAwB,EACxB,WAAW,EAKZ,MAAM,gBAAgB,CAAC;AAkExB,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAqzCD,eAAO,MAAM,mBAAmB,EAAkC,CAAC,IAAI,SAAS,OAAO,cAAc,EAAE,OAAO,GAAG,WAAW,EAC1H,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,KAClC,KAAK,CAAC,YAAY,CAAC"}

package/dist/src/telemetry.d.ts

@@ -1,6 +1,6 @@
 import { trace, context, SpanStatusCode, type Tracer, type Span } from '@opentelemetry/api';
 export declare const TRACER_NAME = "@industry-theme/xterm-terminal-panel";
-export declare const TRACER_VERSION = "0.5.1";
+export declare const TRACER_VERSION = "0.5.4";
 export declare function getTracer(): Tracer;
 export declare function getActiveSpan(): Span | undefined;
 export declare function withSpan<T>(span: Span, fn: () => Promise<T>): Promise<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industry-theme/xterm-terminal-panel",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Industry-themed xterm.js terminal components with panel framework integration",
   "type": "module",
   "main": "dist/index.js",