@industry-theme/xterm-terminal-panel 0.9.5 → 0.9.6

package/dist/index.js

@@ -1,10 +1,5 @@
 import "./styles.css";
 // src/components/ThemedTerminal.tsx
-import {
-  DATA_TYPES as DATA_TYPES2,
-  sanitizePath,
-  useDropZone
-} from "@principal-ade/panel-framework-core";
 import { FitAddon } from "@xterm/addon-fit";
 import { SearchAddon } from "@xterm/addon-search";
 import { WebLinksAddon } from "@xterm/addon-web-links";
@@ -20,7 +15,7 @@ import {
 } from "lucide-react";
 import {
   forwardRef,
-  useCallback,
+  useCallback as useCallback2,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -28,6 +23,132 @@ import {
 } from "react";
 import "@xterm/xterm/css/xterm.css";
 
+// src/hooks/useTerminalDropZone.tsx
+import {
+  DATA_TYPES,
+  sanitizePath,
+  useDropZone
+} from "@principal-ade/panel-framework-core";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var FocusDelayMs = 10;
+function getDroppedImageFiles(e) {
+  const list = e.dataTransfer?.files;
+  if (!list || list.length === 0) return [];
+  return Array.from(list).filter((f) => f.type.startsWith("image/"));
+}
+function useTerminalDropZone({
+  insertText,
+  focus,
+  onFilesDropped
+}) {
+  const handleDroppedContent = useCallback(
+    (content) => {
+      insertText(content);
+      if (focus) {
+        setTimeout(focus, FocusDelayMs);
+      }
+    },
+    [insertText, focus]
+  );
+  const handleDroppedImageFiles = useCallback(
+    async (files) => {
+      if (!onFilesDropped || files.length === 0) return;
+      try {
+        const payload = await Promise.all(
+          files.map(async (file) => ({
+            name: file.name || "pasted-image.png",
+            mimeType: file.type || "image/png",
+            data: new Uint8Array(await file.arrayBuffer())
+          }))
+        );
+        const paths = await onFilesDropped(payload);
+        if (paths && paths.length > 0) {
+          handleDroppedContent(`${paths.map(sanitizePath).join(" ")} `);
+        }
+      } catch (err) {
+        console.error("[useTerminalDropZone] Failed to handle dropped files:", err);
+      }
+    },
+    [onFilesDropped, handleDroppedContent]
+  );
+  const {
+    isDragOver,
+    onDrop: handlePanelDrop,
+    ...dropZoneProps
+  } = useDropZone({
+    handlers: [
+      {
+        dataType: [DATA_TYPES.FILE_PATH, DATA_TYPES.DIRECTORY_PATH],
+        onDrop: (data) => {
+          const safePath = sanitizePath(data.primaryData);
+          handleDroppedContent(safePath);
+        }
+      },
+      {
+        dataType: DATA_TYPES.TEXT_SELECTION,
+        onDrop: (data) => {
+          handleDroppedContent(data.primaryData);
+        }
+      }
+    ],
+    onPlainTextDrop: (text, e) => {
+      if (getDroppedImageFiles(e).length > 0) return;
+      handleDroppedContent(text);
+    },
+    showVisualFeedback: true
+  });
+  const handleDrop = useCallback(
+    (e) => {
+      const imageFiles = getDroppedImageFiles(e);
+      handlePanelDrop(e);
+      if (imageFiles.length > 0) {
+        void handleDroppedImageFiles(imageFiles);
+      }
+    },
+    [handlePanelDrop, handleDroppedImageFiles]
+  );
+  return {
+    isDragOver,
+    dropZoneProps,
+    handleDrop,
+    dropIndicator: isDragOver ? /* @__PURE__ */ jsx(TerminalDropIndicator, {}) : null
+  };
+}
+function TerminalDropIndicator() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: "rgba(59, 130, 246, 0.1)",
+        border: "2px dashed #3b82f6",
+        borderRadius: "4px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none",
+        zIndex: 1e3
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            padding: "8px 16px",
+            background: "#3b82f6",
+            color: "white",
+            borderRadius: "4px",
+            fontSize: "13px",
+            fontWeight: 500
+          },
+          children: "Drop to insert"
+        }
+      )
+    }
+  );
+}
+
 // src/telemetry.ts
 import {
   trace,
@@ -38,7 +159,7 @@ import {
 // package.json
 var package_default = {
   name: "@industry-theme/xterm-terminal-panel",
-  version: "0.9.5",
+  version: "0.9.6",
   description: "Industry-themed xterm.js terminal components with panel framework integration",
   type: "module",
   sideEffects: [
@@ -249,13 +370,13 @@ function getTerminalCSSVariables(theme) {
 // src/components/SelectionDragChip.tsx
 import {
   createDragPreview,
-  DATA_TYPES,
+  DATA_TYPES as DATA_TYPES2,
   DRAG_ACTIONS,
   PANEL_TYPES,
   useDraggable
 } from "@principal-ade/panel-framework-core";
 import { GripVertical } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function SelectionDragChip({
   text,
   x,
@@ -269,7 +390,7 @@ function SelectionDragChip({
 }) {
   const snippet = text.length > 80 ? `${text.slice(0, 77)}\u2026` : text;
   const { isDragging, ...dragProps } = useDraggable({
-    dataType: DATA_TYPES.TEXT_SELECTION,
+    dataType: DATA_TYPES2.TEXT_SELECTION,
     primaryData: text,
     sourcePanel,
     suggestedActions: [DRAG_ACTIONS.INSERT_CONTENT, DRAG_ACTIONS.REFERENCE],
@@ -319,7 +440,7 @@ function SelectionDragChip({
       title: `Drag selection \u2014 ${label}`,
       "aria-label": `Drag selected terminal text \u2014 ${label}`,
       children: [
-        /* @__PURE__ */ jsx(GripVertical, { size: 13, color: theme.colors.textSecondary }),
+        /* @__PURE__ */ jsx2(GripVertical, { size: 13, color: theme.colors.textSecondary }),
         label
       ]
     }
@@ -327,7 +448,7 @@ function SelectionDragChip({
 }
 
 // src/components/WorkingOverlay.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var WorkingOverlay = ({
   theme,
   message = "Agent working...",
@@ -370,7 +491,7 @@ var WorkingOverlay = ({
               marginBottom: "8px"
             },
             children: [
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "div",
                 {
                   className: "working-dot",
@@ -383,7 +504,7 @@ var WorkingOverlay = ({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "div",
                 {
                   className: "working-dot",
@@ -396,7 +517,7 @@ var WorkingOverlay = ({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "div",
                 {
                   className: "working-dot",
@@ -412,7 +533,7 @@ var WorkingOverlay = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "div",
           {
             style: {
@@ -424,7 +545,7 @@ var WorkingOverlay = ({
             children: message
           }
         ),
-        subtitle && /* @__PURE__ */ jsx2(
+        subtitle && /* @__PURE__ */ jsx3(
           "div",
           {
             style: {
@@ -441,7 +562,7 @@ var WorkingOverlay = ({
 };
 
 // src/components/ThemedTerminal.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEBUG_RESIZE = true;
 var ThemedTerminal = forwardRef(
   ({
@@ -530,7 +651,7 @@ var ThemedTerminal = forwardRef(
         setIsClosingOverlay(true);
       }
     }, [isWorking]);
-    const handleOverlayCloseComplete = useCallback(() => {
+    const handleOverlayCloseComplete = useCallback2(() => {
       setShowWorkingOverlay(false);
       setIsClosingOverlay(false);
       const tracer = getTracer();
@@ -543,7 +664,7 @@ var ThemedTerminal = forwardRef(
       span.setStatus({ code: SpanStatusCode.OK });
       span.end();
     }, []);
-    const trackActivity = useCallback(() => {
+    const trackActivity = useCallback2(() => {
       if (!activityDetection) return;
       if (activityTimeoutRef.current) {
         clearTimeout(activityTimeoutRef.current);
@@ -599,78 +720,20 @@ var ThemedTerminal = forwardRef(
         }
       };
     }, []);
-    const handleDroppedContent = useCallback(
+    const insertDroppedText = useCallback2(
       (content) => {
-        if (terminal) {
-          terminal.paste(content);
-          setTimeout(() => {
-            terminal.focus();
-          }, 10);
-        }
+        terminal?.paste(content);
       },
       [terminal]
     );
-    const getDroppedImageFiles = useCallback(
-      (e) => {
-        const list = e.dataTransfer?.files;
-        if (!list || list.length === 0) return [];
-        return Array.from(list).filter((f) => f.type.startsWith("image/"));
-      },
-      []
-    );
-    const handleDroppedImageFiles = useCallback(
-      async (files) => {
-        if (!onFilesDropped || files.length === 0) return;
-        try {
-          const payload = await Promise.all(
-            files.map(async (file) => ({
-              name: file.name || "pasted-image.png",
-              mimeType: file.type || "image/png",
-              data: new Uint8Array(await file.arrayBuffer())
-            }))
-          );
-          const paths = await onFilesDropped(payload);
-          if (paths && paths.length > 0) {
-            handleDroppedContent(`${paths.map(sanitizePath).join(" ")} `);
-          }
-        } catch (err) {
-          console.error("[ThemedTerminal] Failed to handle dropped files:", err);
-        }
-      },
-      [onFilesDropped, handleDroppedContent]
-    );
-    const { isDragOver, onDrop: handlePanelDrop, ...dropZoneProps } = useDropZone({
-      handlers: [
-        {
-          dataType: [DATA_TYPES2.FILE_PATH, DATA_TYPES2.DIRECTORY_PATH],
-          onDrop: (data) => {
-            const safePath = sanitizePath(data.primaryData);
-            handleDroppedContent(safePath);
-          }
-        },
-        {
-          dataType: DATA_TYPES2.TEXT_SELECTION,
-          onDrop: (data) => {
-            handleDroppedContent(data.primaryData);
-          }
-        }
-      ],
-      onPlainTextDrop: (text, e) => {
-        if (getDroppedImageFiles(e).length > 0) return;
-        handleDroppedContent(text);
-      },
-      showVisualFeedback: true
+    const focusTerminal = useCallback2(() => {
+      terminal?.focus();
+    }, [terminal]);
+    const { dropZoneProps, handleDrop, dropIndicator } = useTerminalDropZone({
+      insertText: insertDroppedText,
+      focus: focusTerminal,
+      onFilesDropped
     });
-    const handleDrop = useCallback(
-      (e) => {
-        const imageFiles = getDroppedImageFiles(e);
-        handlePanelDrop(e);
-        if (imageFiles.length > 0) {
-          void handleDroppedImageFiles(imageFiles);
-        }
-      },
-      [handlePanelDrop, getDroppedImageFiles, handleDroppedImageFiles]
-    );
     useEffect(() => {
       isVisibleRef.current = isVisible;
     }, [isVisible]);
@@ -1192,8 +1255,8 @@ var ThemedTerminal = forwardRef(
               },
               children: [
                 /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                  /* @__PURE__ */ jsx3(TerminalIcon, { size: 16, color: theme.colors.text }),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(TerminalIcon, { size: 16, color: theme.colors.text }),
+                  /* @__PURE__ */ jsx4(
                     "span",
                     {
                       style: {
@@ -1204,7 +1267,7 @@ var ThemedTerminal = forwardRef(
                       children: headerTitle
                     }
                   ),
-                  headerSubtitle && /* @__PURE__ */ jsx3(
+                  headerSubtitle && /* @__PURE__ */ jsx4(
                     "span",
                     {
                       style: {
@@ -1215,7 +1278,7 @@ var ThemedTerminal = forwardRef(
                     }
                   ),
                   headerBadge && /* @__PURE__ */ jsxs3(Fragment, { children: [
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx4(
                       "span",
                       {
                         style: {
@@ -1225,7 +1288,7 @@ var ThemedTerminal = forwardRef(
                         children: "\u2022"
                       }
                     ),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx4(
                       "span",
                       {
                         style: {
@@ -1238,7 +1301,7 @@ var ThemedTerminal = forwardRef(
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
-                  onPopOut && /* @__PURE__ */ jsx3(
+                  onPopOut && /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -1265,10 +1328,10 @@ var ThemedTerminal = forwardRef(
                         e.currentTarget.style.color = theme.colors.textSecondary;
                       },
                       title: "Open terminal in new window",
-                      children: /* @__PURE__ */ jsx3(ExternalLink, { size: 16 })
+                      children: /* @__PURE__ */ jsx4(ExternalLink, { size: 16 })
                     }
                   ),
-                  onClose && /* @__PURE__ */ jsx3(
+                  onClose && /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -1295,10 +1358,10 @@ var ThemedTerminal = forwardRef(
                         e.currentTarget.style.color = theme.colors.textSecondary;
                       },
                       title: "Hide terminal (keeps session running)",
-                      children: /* @__PURE__ */ jsx3(ChevronDown, { size: 16 })
+                      children: /* @__PURE__ */ jsx4(ChevronDown, { size: 16 })
                     }
                   ),
-                  onDestroy && /* @__PURE__ */ jsx3(
+                  onDestroy && /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -1325,7 +1388,7 @@ var ThemedTerminal = forwardRef(
                         e.currentTarget.style.color = theme.colors.textSecondary;
                       },
                       title: "Close terminal session (terminate process)",
-                      children: /* @__PURE__ */ jsx3(X, { size: 16 })
+                      children: /* @__PURE__ */ jsx4(X, { size: 16 })
                     }
                   )
                 ] })
@@ -1348,38 +1411,8 @@ var ThemedTerminal = forwardRef(
                 minHeight: 0
               },
               children: [
-                isDragOver && /* @__PURE__ */ jsx3(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      inset: 0,
-                      background: "rgba(59, 130, 246, 0.1)",
-                      border: "2px dashed #3b82f6",
-                      borderRadius: "4px",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      pointerEvents: "none",
-                      zIndex: 1e3
-                    },
-                    children: /* @__PURE__ */ jsx3(
-                      "div",
-                      {
-                        style: {
-                          padding: "8px 16px",
-                          background: "#3b82f6",
-                          color: "white",
-                          borderRadius: "4px",
-                          fontSize: "13px",
-                          fontWeight: 500
-                        },
-                        children: "Drop to insert"
-                      }
-                    )
-                  }
-                ),
-                enableSelectionDrag && selectionDrag && /* @__PURE__ */ jsx3(
+                dropIndicator,
+                enableSelectionDrag && selectionDrag && /* @__PURE__ */ jsx4(
                   SelectionDragChip,
                   {
                     text: selectionDrag.text,
@@ -1416,7 +1449,7 @@ var ThemedTerminal = forwardRef(
                       animation: "copy-feedback-in 0.15s ease-out"
                     },
                     children: [
-                      /* @__PURE__ */ jsx3(Check, { size: 14, strokeWidth: 3 }),
+                      /* @__PURE__ */ jsx4(Check, { size: 14, strokeWidth: 3 }),
                       "Copied!"
                     ]
                   }
@@ -1441,8 +1474,8 @@ var ThemedTerminal = forwardRef(
                       zIndex: 10
                     },
                     children: [
-                      /* @__PURE__ */ jsx3(Monitor, { size: 48, color: theme.colors.textSecondary }),
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsx4(Monitor, { size: 48, color: theme.colors.textSecondary }),
+                      /* @__PURE__ */ jsx4(
                         "div",
                         {
                           style: {
@@ -1454,7 +1487,7 @@ var ThemedTerminal = forwardRef(
                           children: overlayState.message
                         }
                       ),
-                      overlayState.subtitle && /* @__PURE__ */ jsx3(
+                      overlayState.subtitle && /* @__PURE__ */ jsx4(
                         "div",
                         {
                           style: {
@@ -1466,7 +1499,7 @@ var ThemedTerminal = forwardRef(
                           children: overlayState.subtitle
                         }
                       ),
-                      overlayState.actions && overlayState.actions.length > 0 && /* @__PURE__ */ jsx3(
+                      overlayState.actions && overlayState.actions.length > 0 && /* @__PURE__ */ jsx4(
                         "div",
                         {
                           style: {
@@ -1519,7 +1552,7 @@ var ThemedTerminal = forwardRef(
                     ]
                   }
                 ),
-                showWorkingOverlay && !overlayState && /* @__PURE__ */ jsx3(
+                showWorkingOverlay && !overlayState && /* @__PURE__ */ jsx4(
                   WorkingOverlay,
                   {
                     theme,
@@ -1542,16 +1575,16 @@ ThemedTerminal.displayName = "ThemedTerminal";
 // src/components/ThemedTerminalWithProvider.tsx
 import { useTheme } from "@principal-ade/industry-theme";
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ThemedTerminalWithProvider = forwardRef2((props, ref) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsx4(ThemedTerminal, { ref, theme, ...props });
+  return /* @__PURE__ */ jsx5(ThemedTerminal, { ref, theme, ...props });
 });
 ThemedTerminalWithProvider.displayName = "ThemedTerminalWithProvider";
 
 // src/components/ProgramStatusBadge.tsx
 import { useTheme as useTheme2 } from "@principal-ade/industry-theme";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var blockedColor = (kind, colors) => {
   switch (kind) {
     case "auth":
@@ -1572,7 +1605,7 @@ var formatProgramStatusRecord = (record) => {
   if (record.title) parts.push(`title=${record.title}`);
   return parts.join("; ");
 };
-var WaveBars = ({ color, animate }) => /* @__PURE__ */ jsx5("div", { style: { display: "flex", gap: 1, alignItems: "center", height: 12 }, children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx5(
+var WaveBars = ({ color, animate }) => /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 1, alignItems: "center", height: 12 }, children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx6(
   "div",
   {
     style: {
@@ -1594,17 +1627,17 @@ var ProgramStatusBadge = ({
   const { theme } = useTheme2();
   switch (record.state) {
     case "working":
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx6(
         "span",
         {
           title: formatProgramStatusRecord(record),
           style: { display: "flex", alignItems: "center" },
-          children: /* @__PURE__ */ jsx5(WaveBars, { color: theme.colors.primary, animate })
+          children: /* @__PURE__ */ jsx6(WaveBars, { color: theme.colors.primary, animate })
         }
       );
     case "blocked": {
       const color = blockedColor(record.kind, theme.colors);
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx6(
         "span",
         {
           title: formatProgramStatusRecord(record),
@@ -1628,7 +1661,7 @@ var ProgramStatusBadge = ({
       );
     }
     case "done":
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx6(
         "span",
         {
           title: formatProgramStatusRecord(record),
@@ -1642,7 +1675,7 @@ var ProgramStatusBadge = ({
         }
       );
     case "error":
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx6(
         "span",
         {
           title: formatProgramStatusRecord(record),
@@ -1664,7 +1697,7 @@ ProgramStatusBadge.displayName = "ProgramStatusBadge";
 
 // src/renderer/XtermRenderer.tsx
 import { forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle2, useRef as useRef2 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var XtermRenderer = forwardRef3(
   (props, ref) => {
     const {
@@ -1703,7 +1736,7 @@ var XtermRenderer = forwardRef3(
       }),
       []
     );
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       ThemedTerminalWithProvider,
       {
         ref: innerRef,
@@ -1724,7 +1757,7 @@ XtermRenderer.displayName = "XtermRenderer";
 // src/renderer/GhosttyRenderer.tsx
 import { useTheme as useTheme3 } from "@principal-ade/industry-theme";
 import { FitAddon as FitAddon2, Terminal as Terminal2 } from "ghostty-web";
-import { forwardRef as forwardRef4, useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
+import { forwardRef as forwardRef4, useCallback as useCallback3, useEffect as useEffect2, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
 
 // src/renderer/ghosttyInit.ts
 import { init } from "ghostty-web";
@@ -1737,7 +1770,7 @@ function ensureGhostty() {
 }
 
 // src/renderer/GhosttyRenderer.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_FONT_STACK = "JetBrains Mono, Menlo, Monaco, monospace";
 var GhosttyRenderer = forwardRef4(
   (props, ref) => {
@@ -1755,9 +1788,10 @@ var GhosttyRenderer = forwardRef4(
       cursorBlink = true,
       cursorStyle,
       fontFamily,
-      fontSize = 14
+      fontSize = 14,
+      onFilesDropped
       // Accepted but intentionally not implemented yet:
-      // onLinkClick, onFilesDropped
+      // onLinkClick
     } = props;
     const { theme } = useTheme3();
     const containerRef = useRef3(null);
@@ -1769,7 +1803,7 @@ var GhosttyRenderer = forwardRef4(
     autoFocusRef.current = autoFocus;
     const callbacks = useRef3({ onData, onResize, onReady, onScrollPositionChange, onShortcut });
     callbacks.current = { onData, onResize, onReady, onScrollPositionChange, onShortcut };
-    const readScrollPosition = useCallback2(() => {
+    const readScrollPosition = useCallback3(() => {
       const term = termRef.current;
       if (!term) return { isAtTop: false, isAtBottom: true };
       const viewportY = typeof term.viewportY === "number" ? term.viewportY : 0;
@@ -1779,7 +1813,7 @@ var GhosttyRenderer = forwardRef4(
         isAtTop: scrollbackLength <= 0 || viewportY >= scrollbackLength - 0.5
       };
     }, []);
-    const fit = useCallback2(() => {
+    const fit = useCallback3(() => {
       const term = termRef.current;
       const addon = fitRef.current;
       if (!term || !addon) return;
@@ -1794,7 +1828,7 @@ var GhosttyRenderer = forwardRef4(
         }
       }
     }, []);
-    const write = useCallback2((data) => {
+    const write = useCallback3((data) => {
       const term = termRef.current;
       if (term) {
         term.write(data);
@@ -1849,6 +1883,16 @@ var GhosttyRenderer = forwardRef4(
           }
           return false;
         });
+        term.attachCustomWheelEventHandler((event) => {
+          if (term.hasMouseTracking() && !event.shiftKey) return false;
+          if (term.buffer.active.type !== "alternate") return false;
+          const appCursor = term.getMode(1, false);
+          const scrollingUp = event.deltaY < 0;
+          const lines = Math.min(Math.abs(Math.round(event.deltaY / 33)), 5);
+          const sequence = appCursor ? scrollingUp ? "\x1BOA" : "\x1BOB" : scrollingUp ? "\x1B[A" : "\x1B[B";
+          for (let i = 0; i < lines; i += 1) callbacks.current.onData?.(sequence);
+          return true;
+        });
         fit();
         if (pendingWritesRef.current.length > 0) {
           const pending = pendingWritesRef.current;
@@ -1893,6 +1937,17 @@ var GhosttyRenderer = forwardRef4(
     useEffect2(() => {
       if (isVisible && autoFocus) termRef.current?.focus();
     }, [isVisible, autoFocus]);
+    const insertDroppedText = useCallback3((content) => {
+      termRef.current?.paste(content);
+    }, []);
+    const focusTerminal = useCallback3(() => {
+      termRef.current?.focus();
+    }, []);
+    const { dropZoneProps, handleDrop, dropIndicator } = useTerminalDropZone({
+      insertText: insertDroppedText,
+      focus: focusTerminal,
+      onFilesDropped
+    });
     useImperativeHandle3(
       ref,
       () => ({
@@ -1913,20 +1968,30 @@ var GhosttyRenderer = forwardRef4(
       }),
       [fit, readScrollPosition, write]
     );
-    return /* @__PURE__ */ jsx7(
-      "div",
-      {
-        ref: containerRef,
-        style: {
-          width: "100%",
-          height: "100%",
-          backgroundColor: transparent ? "transparent" : theme.colors.background,
-          // ghostty-web's open() sets contenteditable on this container, so the
-          // browser would draw its own text caret on top of the canvas cursor.
-          // Hide it — the terminal renders its own cursor.
-          caretColor: "transparent"
-        }
-      }
+    return (
+      // ghostty-web owns its container's children (open() appends the canvas and
+      // a hidden textarea), so the drop indicator lives on a wrapper instead of
+      // inside it — no imperative/React child conflicts.
+      /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            ref: containerRef,
+            ...dropZoneProps,
+            onDrop: handleDrop,
+            style: {
+              width: "100%",
+              height: "100%",
+              backgroundColor: transparent ? "transparent" : theme.colors.background,
+              // ghostty-web's open() sets contenteditable on this container, so the
+              // browser would draw its own text caret on top of the canvas cursor.
+              // Hide it — the terminal renders its own cursor.
+              caretColor: "transparent"
+            }
+          }
+        ),
+        dropIndicator
+      ] })
     );
   }
 );
@@ -1944,7 +2009,7 @@ function resolveRenderer(choice) {
 import { useTheme as useTheme4 } from "@principal-ade/industry-theme";
 import {
   forwardRef as forwardRef5,
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useEffect as useEffect3,
   useImperativeHandle as useImperativeHandle4,
   useRef as useRef4,
@@ -1953,8 +2018,8 @@ import {
 
 // src/components/TerminalOverlay.tsx
 import { Monitor as Monitor2 } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var TerminalOverlay = ({ state, theme }) => /* @__PURE__ */ jsxs4(
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var TerminalOverlay = ({ state, theme }) => /* @__PURE__ */ jsxs5(
   "div",
   {
     style: {
@@ -1974,8 +2039,8 @@ var TerminalOverlay = ({ state, theme }) => /* @__PURE__ */ jsxs4(
       zIndex: 10
     },
     children: [
-      /* @__PURE__ */ jsx8(Monitor2, { size: 48, color: theme.colors.textSecondary }),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(Monitor2, { size: 48, color: theme.colors.textSecondary }),
+      /* @__PURE__ */ jsx9(
         "div",
         {
           style: {
@@ -1987,7 +2052,7 @@ var TerminalOverlay = ({ state, theme }) => /* @__PURE__ */ jsxs4(
           children: state.message
         }
       ),
-      state.subtitle && /* @__PURE__ */ jsx8(
+      state.subtitle && /* @__PURE__ */ jsx9(
         "div",
         {
           style: {
@@ -1999,7 +2064,7 @@ var TerminalOverlay = ({ state, theme }) => /* @__PURE__ */ jsxs4(
           children: state.subtitle
         }
       ),
-      state.actions && state.actions.length > 0 && /* @__PURE__ */ jsx8(
+      state.actions && state.actions.length > 0 && /* @__PURE__ */ jsx9(
         "div",
         {
           style: {
@@ -2007,7 +2072,7 @@ var TerminalOverlay = ({ state, theme }) => /* @__PURE__ */ jsxs4(
             gap: "12px",
             marginTop: "8px"
           },
-          children: state.actions.map((action) => /* @__PURE__ */ jsxs4(
+          children: state.actions.map((action) => /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -2054,7 +2119,7 @@ var TerminalOverlay = ({ state, theme }) => /* @__PURE__ */ jsxs4(
 );
 
 // src/components/TerminalSession.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var TerminalSession = forwardRef5(
   (props, ref) => {
     const {
@@ -2098,7 +2163,7 @@ var TerminalSession = forwardRef5(
     const isActiveRef = useRef4(false);
     const activityStartedAtRef = useRef4(0);
     const activityTimerRef = useRef4(null);
-    const claimAndConnect = useCallback3(
+    const claimAndConnect = useCallback4(
       async (targetSessionId, force = false) => {
         if (!enableOwnership) return;
         try {
@@ -2223,7 +2288,7 @@ var TerminalSession = forwardRef5(
         }
       };
     }, []);
-    const observeActivity = useCallback3(() => {
+    const observeActivity = useCallback4(() => {
       if (!activityDetection) return;
       const now = Date.now();
       const emitBus = (isWorking2) => {
@@ -2273,7 +2338,7 @@ var TerminalSession = forwardRef5(
         if (activityTimerRef.current) clearTimeout(activityTimerRef.current);
       };
     }, []);
-    const handleData = useCallback3(
+    const handleData = useCallback4(
       (data) => {
         if (localSessionId && actions.writeToTerminal) {
           actions.writeToTerminal(localSessionId, data);
@@ -2281,14 +2346,14 @@ var TerminalSession = forwardRef5(
       },
       [localSessionId, actions]
     );
-    const handleFilesDropped = useCallback3(
+    const handleFilesDropped = useCallback4(
       async (files) => {
         if (!localSessionId || !actions.saveDroppedFiles) return [];
         return actions.saveDroppedFiles(files, localSessionId);
       },
       [localSessionId, actions]
     );
-    const handleResize = useCallback3(
+    const handleResize = useCallback4(
       (cols, rows) => {
         if (localSessionId && actions.resizeTerminal) {
           actions.resizeTerminal(localSessionId, cols, rows);
@@ -2296,7 +2361,7 @@ var TerminalSession = forwardRef5(
       },
       [localSessionId, actions]
     );
-    const handleReady = useCallback3(
+    const handleReady = useCallback4(
       (cols, rows) => {
         if (!localSessionId || !actions.resizeTerminal) return;
         const shouldForce = needsRefreshOnResizeRef.current;
@@ -2324,7 +2389,7 @@ var TerminalSession = forwardRef5(
       },
       [localSessionId, actions]
     );
-    const handleLinkClickInternal = useCallback3(
+    const handleLinkClickInternal = useCallback4(
       (url, modifiers) => {
         onLinkClick?.(url, modifiers);
         if (localSessionId && events) {
@@ -2345,7 +2410,7 @@ var TerminalSession = forwardRef5(
       },
       [localSessionId, events, onLinkClick]
     );
-    const handleShortcutInternal = useCallback3(
+    const handleShortcutInternal = useCallback4(
       (evt) => {
         onShortcut?.(evt);
         if (localSessionId && events) {
@@ -2362,7 +2427,7 @@ var TerminalSession = forwardRef5(
       },
       [localSessionId, events, onShortcut]
     );
-    const handleScrollPositionChangeInternal = useCallback3(
+    const handleScrollPositionChangeInternal = useCallback4(
       (p) => {
         onScrollPositionChange?.(p);
       },
@@ -2381,7 +2446,7 @@ var TerminalSession = forwardRef5(
         unsubscribe();
       };
     }, [enableOwnership, localSessionId, actions]);
-    const handleTakeControl = useCallback3(async () => {
+    const handleTakeControl = useCallback4(async () => {
       if (!localSessionId) return;
       await claimAndConnect(localSessionId, true);
     }, [localSessionId, claimAndConnect]);
@@ -2396,7 +2461,7 @@ var TerminalSession = forwardRef5(
       [localSessionId]
     );
     if (!isInitialized) {
-      return /* @__PURE__ */ jsxs5(
+      return /* @__PURE__ */ jsxs6(
         "div",
         {
           style: {
@@ -2407,7 +2472,7 @@ var TerminalSession = forwardRef5(
             padding: "10px 0 0 10px"
           },
           children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "div",
               {
                 style: {
@@ -2418,7 +2483,7 @@ var TerminalSession = forwardRef5(
                 }
               }
             ),
-            /* @__PURE__ */ jsx9("style", { children: `@keyframes terminal-session-cursor-blink {
+            /* @__PURE__ */ jsx10("style", { children: `@keyframes terminal-session-cursor-blink {
               0%, 100% { opacity: 1; }
               50% { opacity: 0; }
             }` })
@@ -2439,8 +2504,8 @@ var TerminalSession = forwardRef5(
       opacity: 1
     } : void 0;
     const effectiveOverlay = ownershipLostOverlay ?? overlayState;
-    return /* @__PURE__ */ jsxs5("div", { style: { position: "relative", height: "100%", width: "100%" }, children: [
-      /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsxs6("div", { style: { position: "relative", height: "100%", width: "100%" }, children: [
+      /* @__PURE__ */ jsx10(
         Renderer,
         {
           ref: rendererRef,
@@ -2459,8 +2524,8 @@ var TerminalSession = forwardRef5(
         },
         shouldRenderTerminal ? "active" : "overlay"
       ),
-      effectiveOverlay && /* @__PURE__ */ jsx9(TerminalOverlay, { state: effectiveOverlay, theme }),
-      isWorking && !effectiveOverlay && /* @__PURE__ */ jsx9(
+      effectiveOverlay && /* @__PURE__ */ jsx10(TerminalOverlay, { state: effectiveOverlay, theme }),
+      isWorking && !effectiveOverlay && /* @__PURE__ */ jsx10(
         WorkingOverlay,
         {
           theme,
@@ -2516,12 +2581,12 @@ function useThemedTerminal() {
 // src/components/TabBar/TabBar.tsx
 import { useTheme as useTheme7 } from "@principal-ade/industry-theme";
 import { Plus } from "lucide-react";
-import { useState as useState3, useCallback as useCallback5 } from "react";
+import { useState as useState3, useCallback as useCallback6 } from "react";
 
 // src/components/TabBar/TabButton.tsx
 import { useTheme as useTheme6 } from "@principal-ade/industry-theme";
-import { useCallback as useCallback4 } from "react";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useCallback as useCallback5 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var TabButton = ({
   tab,
   isActive,
@@ -2548,7 +2613,7 @@ var TabButton = ({
   const { theme } = useTheme6();
   const showCloseButton = isHovered || isActive;
   const closable = tab.closable !== false;
-  const handleDragStart = useCallback4(
+  const handleDragStart = useCallback5(
     (e) => {
       const target = e.currentTarget;
       e.dataTransfer.setData("application/x-tab-association", tab.id);
@@ -2576,10 +2641,10 @@ var TabButton = ({
     },
     [tab.id, onDragStart]
   );
-  const handleDragEnd = useCallback4(() => {
+  const handleDragEnd = useCallback5(() => {
     onDragEnd?.();
   }, [onDragEnd]);
-  const handleDragOver = useCallback4(
+  const handleDragOver = useCallback5(
     (e) => {
       if (canAcceptDrop) {
         e.preventDefault();
@@ -2588,7 +2653,7 @@ var TabButton = ({
     },
     [canAcceptDrop]
   );
-  const handleDrop = useCallback4(
+  const handleDrop = useCallback5(
     (e) => {
       e.preventDefault();
       const draggedTabId = e.dataTransfer.getData("application/x-tab-association");
@@ -2598,14 +2663,14 @@ var TabButton = ({
     },
     [tab.id, onDrop]
   );
-  const handleDragEnter = useCallback4(
+  const handleDragEnter = useCallback5(
     (e) => {
       e.preventDefault();
       onDragEnter?.();
     },
     [onDragEnter]
   );
-  const handleDragLeave = useCallback4(
+  const handleDragLeave = useCallback5(
     (e) => {
       e.preventDefault();
       onDragLeave?.();
@@ -2622,7 +2687,7 @@ var TabButton = ({
     }
     return {};
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       "data-tab-id": tab.id,
@@ -2664,7 +2729,7 @@ var TabButton = ({
         ...getDragOverStyles()
       },
       children: [
-        closable && showCloseButton && /* @__PURE__ */ jsx10(
+        closable && showCloseButton && /* @__PURE__ */ jsx11(
           "button",
           {
             onClick: (e) => {
@@ -2699,12 +2764,12 @@ var TabButton = ({
         (() => {
           const icon = renderIcon ? renderIcon(tab) : void 0;
           const displayIcon = icon !== void 0 ? icon : tab.icon;
-          return displayIcon ? /* @__PURE__ */ jsx10("div", { style: { flexShrink: 0, display: "flex", alignItems: "center", pointerEvents: "none" }, children: displayIcon }) : null;
+          return displayIcon ? /* @__PURE__ */ jsx11("div", { style: { flexShrink: 0, display: "flex", alignItems: "center", pointerEvents: "none" }, children: displayIcon }) : null;
         })(),
         (() => {
           const label = renderLabel ? renderLabel(tab) : void 0;
           const displayLabel = label !== void 0 ? label : tab.label;
-          return /* @__PURE__ */ jsx10(
+          return /* @__PURE__ */ jsx11(
             "span",
             {
               style: {
@@ -2718,7 +2783,7 @@ var TabButton = ({
             }
           );
         })(),
-        renderAccessory ? renderAccessory(tab) : keyboardHint && /* @__PURE__ */ jsx10(
+        renderAccessory ? renderAccessory(tab) : keyboardHint && /* @__PURE__ */ jsx11(
           "span",
           {
             style: {
@@ -2737,7 +2802,7 @@ var TabButton = ({
 TabButton.displayName = "TabButton";
 
 // src/components/TabBar/TabBar.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var TabBar = ({
   tabs,
   activeTabId,
@@ -2760,14 +2825,14 @@ var TabBar = ({
   const [hoveredTabId, setHoveredTabId] = useState3(null);
   const [draggedTabId, setDraggedTabId] = useState3(null);
   const [dragOverTabId, setDragOverTabId] = useState3(null);
-  const handleDragStart = useCallback5((tabId) => {
+  const handleDragStart = useCallback6((tabId) => {
     setDraggedTabId(tabId);
   }, []);
-  const handleDragEnd = useCallback5(() => {
+  const handleDragEnd = useCallback6(() => {
     setDraggedTabId(null);
     setDragOverTabId(null);
   }, []);
-  const handleDrop = useCallback5(
+  const handleDrop = useCallback6(
     (targetTabId, draggedId) => {
       if (draggedId !== targetTabId) {
         onTabDrop?.(draggedId, targetTabId);
@@ -2777,13 +2842,13 @@ var TabBar = ({
     },
     [onTabDrop]
   );
-  const handleDragEnter = useCallback5((tabId) => {
+  const handleDragEnter = useCallback6((tabId) => {
     setDragOverTabId(tabId);
   }, []);
-  const handleDragLeave = useCallback5(() => {
+  const handleDragLeave = useCallback6(() => {
     setDragOverTabId(null);
   }, []);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className,
@@ -2795,7 +2860,7 @@ var TabBar = ({
         boxSizing: "border-box"
       },
       children: [
-        leftSection && /* @__PURE__ */ jsx11(
+        leftSection && /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -2811,7 +2876,7 @@ var TabBar = ({
             children: leftSection
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -2824,7 +2889,7 @@ var TabBar = ({
             },
             children: tabs.map((tab, index) => {
               const canDrop = enableDragAndDrop && draggedTabId !== null && draggedTabId !== tab.id ? canDropOnTab ? canDropOnTab(draggedTabId, tab.id) : true : false;
-              return /* @__PURE__ */ jsx11(
+              return /* @__PURE__ */ jsx12(
                 TabButton,
                 {
                   tab,
@@ -2853,7 +2918,7 @@ var TabBar = ({
             })
           }
         ),
-        rightSection !== void 0 ? rightSection && /* @__PURE__ */ jsx11(
+        rightSection !== void 0 ? rightSection && /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -2868,7 +2933,7 @@ var TabBar = ({
             },
             children: rightSection
           }
-        ) : onNewTab && /* @__PURE__ */ jsx11(
+        ) : onNewTab && /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -2881,7 +2946,7 @@ var TabBar = ({
               borderBottom: `1px solid ${theme.colors.border}`,
               boxSizing: "border-box"
             },
-            children: /* @__PURE__ */ jsx11(
+            children: /* @__PURE__ */ jsx12(
               "button",
               {
                 onClick: onNewTab,
@@ -2904,7 +2969,7 @@ var TabBar = ({
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "New Tab (\u2318T)",
-                children: /* @__PURE__ */ jsx11(Plus, { size: 14 })
+                children: /* @__PURE__ */ jsx12(Plus, { size: 14 })
               }
             )
           }
@@ -2963,7 +3028,7 @@ import { CollapsibleSplitPane } from "@principal-ade/panels";
 import { Terminal as TerminalIcon2, Box, Boxes, Paperclip } from "lucide-react";
 import React4, {
   useState as useState4,
-  useCallback as useCallback6,
+  useCallback as useCallback7,
   useEffect as useEffect5,
   useRef as useRef5
 } from "react";
@@ -2972,7 +3037,7 @@ import React4, {
 import { useTheme as useTheme8 } from "@principal-ade/industry-theme";
 import { Folder, GitBranch } from "lucide-react";
 import React3 from "react";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var AVATAR_SIZE = 14;
 var TerminalStatusBar = ({
   directory,
@@ -3002,13 +3067,13 @@ var TerminalStatusBar = ({
   if (repo) {
     const avatarUrl = repo.avatarUrl ?? `https://github.com/${repo.owner}.png?size=48`;
     const showAvatar = Boolean(repo.owner) && !avatarFailed;
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
         style: containerStyle,
         title: `${repo.owner}/${repo.repo}${repo.branch ? ` \u2014 ${repo.branch}` : ""}`,
         children: [
-          showAvatar ? /* @__PURE__ */ jsx12(
+          showAvatar ? /* @__PURE__ */ jsx13(
             "img",
             {
               src: avatarUrl,
@@ -3023,8 +3088,8 @@ var TerminalStatusBar = ({
                 borderRadius: "50%"
               }
             }
-          ) : /* @__PURE__ */ jsx12(Folder, { size: 12, style: { flex: "0 0 auto", opacity: 0.7 } }),
-          /* @__PURE__ */ jsxs8(
+          ) : /* @__PURE__ */ jsx13(Folder, { size: 12, style: { flex: "0 0 auto", opacity: 0.7 } }),
+          /* @__PURE__ */ jsxs9(
             "span",
             {
               style: {
@@ -3034,15 +3099,15 @@ var TerminalStatusBar = ({
                 minWidth: 0
               },
               children: [
-                /* @__PURE__ */ jsxs8("span", { style: { opacity: 0.7 }, children: [
+                /* @__PURE__ */ jsxs9("span", { style: { opacity: 0.7 }, children: [
                   repo.owner,
                   "/"
                 ] }),
-                /* @__PURE__ */ jsx12("span", { style: { color: theme.colors.text }, children: repo.repo })
+                /* @__PURE__ */ jsx13("span", { style: { color: theme.colors.text }, children: repo.repo })
               ]
             }
           ),
-          repo.branch && /* @__PURE__ */ jsxs8(
+          repo.branch && /* @__PURE__ */ jsxs9(
             "span",
             {
               style: {
@@ -3053,9 +3118,9 @@ var TerminalStatusBar = ({
                 opacity: 0.85
               },
               children: [
-                /* @__PURE__ */ jsx12(GitBranch, { size: 12, style: { flex: "0 0 auto", opacity: 0.7 } }),
-                /* @__PURE__ */ jsx12("span", { children: repo.branch }),
-                repo.isDirty && /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(GitBranch, { size: 12, style: { flex: "0 0 auto", opacity: 0.7 } }),
+                /* @__PURE__ */ jsx13("span", { children: repo.branch }),
+                repo.isDirty && /* @__PURE__ */ jsx13(
                   "span",
                   {
                     title: "Uncommitted changes",
@@ -3071,7 +3136,7 @@ var TerminalStatusBar = ({
               ]
             }
           ),
-          (repo.ahead || repo.behind) && /* @__PURE__ */ jsxs8("span", { style: { flex: "0 0 auto", opacity: 0.7 }, children: [
+          (repo.ahead || repo.behind) && /* @__PURE__ */ jsxs9("span", { style: { flex: "0 0 auto", opacity: 0.7 }, children: [
             repo.ahead ? `\u2191${repo.ahead}` : "",
             repo.behind ? `\u2193${repo.behind}` : ""
           ] })
@@ -3082,9 +3147,9 @@ var TerminalStatusBar = ({
   if (!directory) {
     return null;
   }
-  return /* @__PURE__ */ jsxs8("div", { style: containerStyle, title: directory, children: [
-    /* @__PURE__ */ jsx12(Folder, { size: 12, style: { flex: "0 0 auto", opacity: 0.7 } }),
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs9("div", { style: containerStyle, title: directory, children: [
+    /* @__PURE__ */ jsx13(Folder, { size: 12, style: { flex: "0 0 auto", opacity: 0.7 } }),
+    /* @__PURE__ */ jsx13(
       "span",
       {
         style: {
@@ -3095,7 +3160,7 @@ var TerminalStatusBar = ({
           textOverflow: "ellipsis",
           minWidth: 0
         },
-        children: /* @__PURE__ */ jsx12("bdi", { children: directory })
+        children: /* @__PURE__ */ jsx13("bdi", { children: directory })
       }
     )
   ] });
@@ -3103,9 +3168,9 @@ var TerminalStatusBar = ({
 TerminalStatusBar.displayName = "TerminalStatusBar";
 
 // src/panels/TabbedTerminalPanel.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 1, alignItems: "center", height: 12 }, children: [
-  [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx13(
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: 1, alignItems: "center", height: 12 }, children: [
+  [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx14(
     "div",
     {
       style: {
@@ -3120,7 +3185,7 @@ var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs9("div",
     },
     i
   )),
-  /* @__PURE__ */ jsx13("style", { children: `
+  /* @__PURE__ */ jsx14("style", { children: `
         @keyframes waveSine {
           0%, 100% { transform: scaleY(0.4); }
           50% { transform: scaleY(1); }
@@ -3147,17 +3212,17 @@ function TerminalTabContentInner(props, ref) {
   } = props;
   const [isWorkingFromActivity, setIsWorkingFromActivity] = useState4(false);
   const sessionRef = useRef5(null);
-  const handleSessionCreated = useCallback6(
+  const handleSessionCreated = useCallback7(
     (sid) => onSessionCreated(tab.id, sid),
     [onSessionCreated, tab.id]
   );
-  const handleScrollPositionChange = useCallback6(
+  const handleScrollPositionChange = useCallback7(
     (position) => {
       onScrollPositionChange?.(tab.id, position);
     },
     [onScrollPositionChange, tab.id]
   );
-  const handleActivityChange = useCallback6(
+  const handleActivityChange = useCallback7(
     (state) => {
       const sid = sessionRef.current?.getSessionId();
       if (sid) {
@@ -3176,7 +3241,7 @@ function TerminalTabContentInner(props, ref) {
     }),
     []
   );
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       style: {
@@ -3190,7 +3255,7 @@ function TerminalTabContentInner(props, ref) {
         height: "100%",
         width: "100%"
       },
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         TerminalSession,
         {
           ref: sessionRef,
@@ -3349,7 +3414,7 @@ var TabbedTerminalPanelInner = ({
       onFocusTabHandled?.();
     }
   }, [requestFocusTabId, ownedTabs, foreignTabs, setActiveTabId, onFocusTabHandled, activeTabId]);
-  const getOwnedTabLabel = useCallback6((index, _directory) => {
+  const getOwnedTabLabel = useCallback7((index, _directory) => {
     if (tabLabelPrefix) {
       return `${tabLabelPrefix} ${index + 1}`;
     }
@@ -3381,7 +3446,7 @@ var TabbedTerminalPanelInner = ({
   }, [tabs]);
   const tabRefsMap = useRef5(/* @__PURE__ */ new Map());
   const refCallbacksMap = useRef5(/* @__PURE__ */ new Map());
-  const getRefCallback = useCallback6((tabId) => {
+  const getRefCallback = useCallback7((tabId) => {
     let callback = refCallbacksMap.current.get(tabId);
     if (!callback) {
       callback = (ref) => {
@@ -3398,7 +3463,7 @@ var TabbedTerminalPanelInner = ({
   const hasInitializedRef = useRef5(false);
   const isCreatingTabRef = useRef5(false);
   const headerRef = useRef5(null);
-  const restoreOwnedSessions = useCallback6(async () => {
+  const restoreOwnedSessions = useCallback7(async () => {
     try {
       let sessions = [];
       if (actions.listTerminalSessions) {
@@ -3447,7 +3512,7 @@ var TabbedTerminalPanelInner = ({
       console.error("[TabbedTerminalPanel] Failed to restore owned sessions:", err);
     }
   }, [terminalContext, sessionIds, activeTabId, onTabsChange, actions, directory, setActiveTabId]);
-  const fetchForeignSessions = useCallback6(async () => {
+  const fetchForeignSessions = useCallback7(async () => {
     try {
       if (!actions.listTerminalSessions) {
         return;
@@ -3481,7 +3546,7 @@ var TabbedTerminalPanelInner = ({
       console.error("[TabbedTerminalPanel] Failed to fetch foreign sessions:", err);
     }
   }, [terminalContext, actions]);
-  const clearForeignTabs = useCallback6(() => {
+  const clearForeignTabs = useCallback7(() => {
     setForeignTabs((prevForeign) => {
       const foreignTabIds = new Set(prevForeign.map((t) => t.id));
       setSessionIds((prev) => {
@@ -3518,10 +3583,10 @@ var TabbedTerminalPanelInner = ({
       clearForeignTabs();
     }
   }, [showAllTerminals, fetchForeignSessions, clearForeignTabs]);
-  const switchTab = useCallback6((tabId) => {
+  const switchTab = useCallback7((tabId) => {
     setActiveTabId(tabId);
   }, [setActiveTabId]);
-  const addNewTab = useCallback6(
+  const addNewTab = useCallback7(
     (label, command, targetDirectory) => {
       const targetDir = targetDirectory || directory;
       const directoryName = targetDir.split("/").pop() || targetDir;
@@ -3542,10 +3607,10 @@ var TabbedTerminalPanelInner = ({
     },
     [directory, onTabsChange]
   );
-  const isForeignTab = useCallback6((tabId) => {
+  const isForeignTab = useCallback7((tabId) => {
     return tabId.startsWith("tab-foreign-");
   }, []);
-  const closeTab = useCallback6(
+  const closeTab = useCallback7(
     async (tabId) => {
       const sessionId = sessionIds.get(tabId);
       const isForeign = isForeignTab(tabId);
@@ -3628,10 +3693,10 @@ var TabbedTerminalPanelInner = ({
     if (!requestCloseTabId) return;
     closeTab(requestCloseTabId);
   }, [requestCloseTabId]);
-  const handleSessionCreated = useCallback6((tabId, sessionId) => {
+  const handleSessionCreated = useCallback7((tabId, sessionId) => {
     setSessionIds((prev) => new Map(prev).set(tabId, sessionId));
   }, []);
-  const handleActivityStateChange = useCallback6((sessionId, isActive) => {
+  const handleActivityStateChange = useCallback7((sessionId, isActive) => {
     setActivityStates((prev) => {
       const next = new Map(prev);
       if (isActive) {
@@ -3663,12 +3728,12 @@ var TabbedTerminalPanelInner = ({
       }
     }
   });
-  const renderTabAccessory = useCallback6((tab) => {
+  const renderTabAccessory = useCallback7((tab) => {
     const tabSessionId = sessionIds.get(tab.id);
     const isActive = tab.id === activeTabId;
     const record = tabSessionId ? programStatus?.[tabSessionId] : void 0;
     if (record && record.state !== "idle" && record.state !== "clear") {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         "div",
         {
           style: {
@@ -3680,7 +3745,7 @@ var TabbedTerminalPanelInner = ({
             width: "16px",
             height: "16px"
           },
-          children: /* @__PURE__ */ jsx13(ProgramStatusBadge, { record })
+          children: /* @__PURE__ */ jsx14(ProgramStatusBadge, { record })
         }
       );
     }
@@ -3688,7 +3753,7 @@ var TabbedTerminalPanelInner = ({
     const hasInternalActivity = tabSessionId ? activityStates.get(tabSessionId) : false;
     const isWorking = hasExternalWorkingState || hasInternalActivity;
     if (!isActive) return null;
-    return /* @__PURE__ */ jsx13(Fragment2, { children: /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(Fragment2, { children: /* @__PURE__ */ jsx14(
       "div",
       {
         style: {
@@ -3701,12 +3766,12 @@ var TabbedTerminalPanelInner = ({
           height: "16px"
         },
         title: isWorking ? "Terminal active" : "Terminal idle",
-        children: /* @__PURE__ */ jsx13(ActivityIndicator, { color: theme.colors.primary, isAnimating: isWorking ?? false })
+        children: /* @__PURE__ */ jsx14(ActivityIndicator, { color: theme.colors.primary, isAnimating: isWorking ?? false })
       }
     ) });
   }, [activeTabId, theme, sessionIds, workingStates, activityStates, programStatus]);
-  const renderTerminalWithAssociation = useCallback6((tab, isActive, sessionId, association) => {
-    const terminalContent = /* @__PURE__ */ jsx13(
+  const renderTerminalWithAssociation = useCallback7((tab, isActive, sessionId, association) => {
+    const terminalContent = /* @__PURE__ */ jsx14(
       TerminalTabContent,
       {
         ref: getRefCallback(tab.id),
@@ -3728,7 +3793,7 @@ var TabbedTerminalPanelInner = ({
       `terminal-${tab.id}`
     );
     const hasAssociation = !!association;
-    const secondaryContent = hasAssociation && renderAssociatedContent ? renderAssociatedContent(association.associatedTabId, isActive) : /* @__PURE__ */ jsx13("div", { style: {
+    const secondaryContent = hasAssociation && renderAssociatedContent ? renderAssociatedContent(association.associatedTabId, isActive) : /* @__PURE__ */ jsx14("div", { style: {
       height: "100%",
       display: "flex",
       alignItems: "center",
@@ -3737,10 +3802,10 @@ var TabbedTerminalPanelInner = ({
       fontSize: "13px",
       backgroundColor: theme.colors.backgroundSecondary
     }, children: "Drag a tab here to associate it with this terminal" });
-    const headerConfig = hasAssociation && getAssociatedHeader ? getAssociatedHeader(association.associatedTabId) : { title: "Drop zone", icon: /* @__PURE__ */ jsx13(Paperclip, { size: 14 }) };
+    const headerConfig = hasAssociation && getAssociatedHeader ? getAssociatedHeader(association.associatedTabId) : { title: "Drop zone", icon: /* @__PURE__ */ jsx14(Paperclip, { size: 14 }) };
     const isCollapsed = hasAssociation ? association.collapsed : true;
     const handleCollapsedChange = hasAssociation ? (collapsed) => onAssociationCollapsedChange?.(tab.id, collapsed) : void 0;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       CollapsibleSplitPane,
       {
         style: { height: "100%" },
@@ -3772,7 +3837,7 @@ var TabbedTerminalPanelInner = ({
     onAssociationRatioChange,
     theme
   ]);
-  const handleTabDrop = useCallback6(
+  const handleTabDrop = useCallback7(
     (draggedTabId, targetTabId) => {
       const draggedTab = tabs.find((t) => t.id === draggedTabId);
       const targetTab = tabs.find((t) => t.id === targetTabId);
@@ -3783,7 +3848,7 @@ var TabbedTerminalPanelInner = ({
     },
     [tabs, onTabAssociate, setActiveTabId]
   );
-  const canDropOnTab = useCallback6(
+  const canDropOnTab = useCallback7(
     (draggedTabId, targetTabId) => {
       const draggedTab = tabs.find((t) => t.id === draggedTabId);
       const targetTab = tabs.find((t) => t.id === targetTabId);
@@ -3792,7 +3857,7 @@ var TabbedTerminalPanelInner = ({
     [tabs]
   );
   const [isDragOverContent, setIsDragOverContent] = useState4(false);
-  const handleContentDragEnter = useCallback6((e) => {
+  const handleContentDragEnter = useCallback7((e) => {
     e.preventDefault();
     if (activeTabId) {
       const activeTab = tabs.find((t) => t.id === activeTabId);
@@ -3801,13 +3866,13 @@ var TabbedTerminalPanelInner = ({
       }
     }
   }, [activeTabId, tabs]);
-  const handleContentDragLeave = useCallback6((e) => {
+  const handleContentDragLeave = useCallback7((e) => {
     const relatedTarget = e.relatedTarget;
     if (!e.currentTarget.contains(relatedTarget)) {
       setIsDragOverContent(false);
     }
   }, []);
-  const handleContentDrop = useCallback6((e) => {
+  const handleContentDrop = useCallback7((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOverContent(false);
@@ -3822,7 +3887,7 @@ var TabbedTerminalPanelInner = ({
       setActiveTabId(activeTabId);
     }
   }, [activeTabId, tabs, onTabAssociate, setActiveTabId]);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       style: {
@@ -3832,7 +3897,7 @@ var TabbedTerminalPanelInner = ({
         backgroundColor: theme.colors.background
       },
       children: [
-        !hideHeader && /* @__PURE__ */ jsx13("div", { ref: headerRef, children: /* @__PURE__ */ jsx13(
+        !hideHeader && /* @__PURE__ */ jsx14("div", { ref: headerRef, children: /* @__PURE__ */ jsx14(
           TabBar,
           {
             tabs: genericTabs,
@@ -3840,7 +3905,7 @@ var TabbedTerminalPanelInner = ({
             onTabClick: switchTab,
             onTabClose: closeTab,
             onNewTab: addNewTab,
-            leftSection: hideShowAllTerminalsButton ? void 0 : /* @__PURE__ */ jsx13(
+            leftSection: hideShowAllTerminalsButton ? void 0 : /* @__PURE__ */ jsx14(
               "button",
               {
                 onClick: () => onShowAllTerminalsChange?.(!showAllTerminals),
@@ -3867,7 +3932,7 @@ var TabbedTerminalPanelInner = ({
                   }
                 },
                 title: showAllTerminals ? "Showing all terminals (click to filter by context)" : "Show all terminals",
-                children: showAllTerminals ? /* @__PURE__ */ jsx13(Boxes, { size: 14 }) : /* @__PURE__ */ jsx13(Box, { size: 14 })
+                children: showAllTerminals ? /* @__PURE__ */ jsx14(Boxes, { size: 14 }) : /* @__PURE__ */ jsx14(Box, { size: 14 })
               }
             ),
             renderTabAccessory,
@@ -3879,7 +3944,7 @@ var TabbedTerminalPanelInner = ({
             canDropOnTab
           }
         ) }),
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           "div",
           {
             style: {
@@ -3928,7 +3993,7 @@ var TabbedTerminalPanelInner = ({
                   const customContent = renderTabContent(tab, isActive, sessionId, width);
                   if (customContent === null && tab.contentType === "terminal") {
                     const association = associations?.[tab.id];
-                    return /* @__PURE__ */ jsx13(
+                    return /* @__PURE__ */ jsx14(
                       "div",
                       {
                         inert: !isActive,
@@ -3956,7 +4021,7 @@ var TabbedTerminalPanelInner = ({
                     );
                   }
                   const hasBeenActivated = activatedTabs.has(tab.id);
-                  return /* @__PURE__ */ jsx13(
+                  return /* @__PURE__ */ jsx14(
                     "div",
                     {
                       inert: !isActive,
@@ -3976,7 +4041,7 @@ var TabbedTerminalPanelInner = ({
                 }
                 if (tab.contentType === "terminal") {
                   const association = associations?.[tab.id];
-                  return /* @__PURE__ */ jsx13(
+                  return /* @__PURE__ */ jsx14(
                     "div",
                     {
                       inert: !isActive,
@@ -3994,7 +4059,7 @@ var TabbedTerminalPanelInner = ({
                     tab.id
                   );
                 }
-                return /* @__PURE__ */ jsxs9(
+                return /* @__PURE__ */ jsxs10(
                   "div",
                   {
                     inert: !isActive,
@@ -4010,17 +4075,17 @@ var TabbedTerminalPanelInner = ({
                       color: theme.colors.textSecondary
                     },
                     children: [
-                      /* @__PURE__ */ jsxs9("p", { children: [
+                      /* @__PURE__ */ jsxs10("p", { children: [
                         "Unknown content type: ",
                         tab.contentType
                       ] }),
-                      /* @__PURE__ */ jsx13("p", { style: { fontSize: theme.fontSizes[0], marginTop: "8px" }, children: "Provide a renderTabContent prop to render custom tab types" })
+                      /* @__PURE__ */ jsx14("p", { style: { fontSize: theme.fontSizes[0], marginTop: "8px" }, children: "Provide a renderTabContent prop to render custom tab types" })
                     ]
                   },
                   tab.id
                 );
               }),
-              tabs.length === 0 && /* @__PURE__ */ jsxs9(
+              tabs.length === 0 && /* @__PURE__ */ jsxs10(
                 "div",
                 {
                   style: {
@@ -4032,14 +4097,14 @@ var TabbedTerminalPanelInner = ({
                     color: theme.colors.textSecondary
                   },
                   children: [
-                    /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx14(
                       TerminalIcon2,
                       {
                         size: 32,
                         style: { opacity: 0.5, marginBottom: "16px" }
                       }
                     ),
-                    /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx14(
                       "button",
                       {
                         onClick: () => addNewTab(),
@@ -4066,15 +4131,15 @@ var TabbedTerminalPanelInner = ({
         (() => {
           const activeTab = tabs.find((t) => t.id === activeTabId);
           const activeDir = activeTab?.directory;
-          return /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", flex: "0 0 auto" }, children: [
-            /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", flex: "0 0 auto" }, children: [
+            /* @__PURE__ */ jsx14(
               TerminalStatusBar,
               {
                 directory: activeDir,
                 repo: activeDir ? getRepoInfo?.(activeDir) : void 0
               }
             ),
-            bottomBarContent && /* @__PURE__ */ jsx13("div", { style: { marginLeft: "auto", display: "flex", alignItems: "center", height: 22 }, children: bottomBarContent })
+            bottomBarContent && /* @__PURE__ */ jsx14("div", { style: { marginLeft: "auto", display: "flex", alignItems: "center", height: 22 }, children: bottomBarContent })
           ] });
         })()
       ]