@qodalis/react-cli 2.0.0-beta.16 → 2.0.0-beta.18

package/dist/index.mjs

@@ -1,5 +1,6 @@
 // src/Cli.tsx
 import { useRef as useRef2, useEffect as useEffect2 } from "react";
+import { resolveCliHostConfig } from "@qodalis/cli";
 
 // src/CliContext.tsx
 import { createContext, useContext } from "react";
@@ -27,7 +28,7 @@ function CliConfigProvider({
 
 // src/useCliEngine.ts
 import { useRef, useEffect, useState } from "react";
-import { CliEngine } from "@qodalis/cli";
+import { createCliEngine } from "@qodalis/cli";
 function useCliEngine(containerRef, config) {
   const [engine, setEngine] = useState(null);
   const engineRef = useRef(null);
@@ -38,19 +39,7 @@ function useCliEngine(containerRef, config) {
     initTimerRef.current = setTimeout(() => {
       initTimerRef.current = null;
       if (!container) return;
-      const e = new CliEngine(container, config?.options);
-      e.registerService("cli-framework", "React");
-      if (config?.services) {
-        for (const [token, value] of Object.entries(config.services)) {
-          e.registerService(token, value);
-        }
-      }
-      if (config?.modules) {
-        e.registerModules(config.modules);
-      }
-      if (config?.processors) {
-        e.registerProcessors(config.processors);
-      }
+      const e = createCliEngine(container, { ...config, framework: "React" });
       engineRef.current = e;
       e.start().then(() => setEngine(e));
     }, 0);
@@ -86,16 +75,9 @@ function Cli({
   const config = useCliConfig();
   const containerRef = useRef2(null);
   const hasProvider = !!ctx.engine;
-  const mergedModules = modules ?? config.modules;
-  const mergedProcessors = processors ?? config.processors;
-  const mergedOptions = options ?? config.options;
-  const mergedServices = services ?? config.services;
-  const optionsWithSnapshot = snapshot ? { ...mergedOptions, snapshot } : mergedOptions;
   const standaloneEngine = useCliEngine(containerRef, {
-    modules: mergedModules,
-    processors: mergedProcessors,
-    options: optionsWithSnapshot,
-    services: mergedServices,
+    ...resolveCliHostConfig({ modules, processors, options, services }, config),
+    snapshot,
     disabled: hasProvider
   });
   const engine = ctx.engine ?? standaloneEngine;
@@ -118,1062 +100,351 @@ function Cli({
 }
 
 // src/CliPanel.tsx
-import React3, { useState as useState2, useRef as useRef3, useEffect as useEffect3, useCallback } from "react";
-import { derivePanelThemeStyles, loadPanelPosition, savePanelPosition } from "@qodalis/cli-core";
+import React3, { useEffect as useEffect3, useLayoutEffect, useState as useState2, useSyncExternalStore } from "react";
+import {
+  CliPanelController,
+  CLOSE_GLYPH,
+  CLOSE_ICON,
+  HIDE_ICON,
+  HIDE_TAB_TERMINAL_ICON,
+  MAXIMIZE_ICON,
+  PANEL_LABELS,
+  RESTORE_ICON,
+  TERMINAL_ICON,
+  collapseChevronIcon,
+  contextMenuItems,
+  contextMenuStyle,
+  glowLineClass,
+  handleRenameKey,
+  hideTabChevronIcon,
+  joinClasses,
+  mergeCliOptions,
+  openStatusDropdown,
+  paneClass,
+  paneStyle,
+  panelTabClass,
+  panelTabDotClass,
+  panelWrapperClass,
+  panelWrapperStyle,
+  panesContainerClass,
+  panesContainerWidth,
+  positionIcon,
+  positionOptions,
+  resolveCliHostConfig as resolveCliHostConfig2,
+  runContextMenuAction,
+  statusIndicators,
+  svgAttrs
+} from "@qodalis/cli";
 import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
-var MIN_PANE_WIDTH_PERCENT = 10;
-var TerminalIcon = () => /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("polyline", { points: "4 17 10 11 4 5" }),
-  /* @__PURE__ */ jsx3("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
-] });
-var MaximizeIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("polyline", { points: "15 3 21 3 21 9" }),
-  /* @__PURE__ */ jsx3("polyline", { points: "9 21 3 21 3 15" }),
-  /* @__PURE__ */ jsx3("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-  /* @__PURE__ */ jsx3("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
-] });
-var RestoreIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("polyline", { points: "4 14 10 14 10 20" }),
-  /* @__PURE__ */ jsx3("polyline", { points: "20 10 14 10 14 4" }),
-  /* @__PURE__ */ jsx3("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
-  /* @__PURE__ */ jsx3("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
-] });
-var CloseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-] });
-var HideIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("line", { x1: "5", y1: "18", x2: "19", y2: "18" }),
-  /* @__PURE__ */ jsx3("polyline", { points: "9 14 12 17 15 14" })
-] });
-function CollapseChevron({ position, isCollapsed }) {
-  let points;
-  switch (position) {
-    case "top":
-      points = isCollapsed ? "6 9 12 15 18 9" : "18 15 12 9 6 15";
-      break;
-    case "left":
-      points = isCollapsed ? "9 18 15 12 9 6" : "15 6 9 12 15 18";
-      break;
-    case "right":
-      points = isCollapsed ? "15 6 9 12 15 18" : "9 18 15 12 9 6";
-      break;
-    default:
-      points = isCollapsed ? "18 15 12 9 6 15" : "6 9 12 15 18 9";
-      break;
+function reactSvgProps(attrs) {
+  const props = {};
+  for (const [key, value] of Object.entries(attrs)) {
+    props[key.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = value;
   }
-  return /* @__PURE__ */ jsx3("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("polyline", { points }) });
+  return props;
 }
-function HideTabChevron({ position }) {
-  let points;
-  switch (position) {
-    case "top":
-      points = "6 9 12 15 18 9";
-      break;
-    case "left":
-      points = "9 18 15 12 9 6";
-      break;
-    case "right":
-      points = "15 6 9 12 15 18";
-      break;
-    default:
-      points = "18 15 12 9 6 15";
-      break;
-  }
-  return /* @__PURE__ */ jsx3("svg", { className: "cli-panel-hide-tab-arrow", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("polyline", { points }) });
+function Icon({ icon, className }) {
+  return /* @__PURE__ */ jsx3("svg", { className, ...reactSvgProps(svgAttrs(icon)), children: icon.shapes.map((shape, i) => React3.createElement(shape.tag, { key: i, ...reactSvgProps(shape.attrs) })) });
 }
-function PositionIcon({ position, size = 20 }) {
-  let fillRect;
-  switch (position) {
-    case "top":
-      fillRect = /* @__PURE__ */ jsx3("rect", { x: "4", y: "4", width: "16", height: "5", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
-    case "left":
-      fillRect = /* @__PURE__ */ jsx3("rect", { x: "4", y: "4", width: "5", height: "16", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
-    case "right":
-      fillRect = /* @__PURE__ */ jsx3("rect", { x: "15", y: "4", width: "5", height: "16", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
-    default:
-      fillRect = /* @__PURE__ */ jsx3("rect", { x: "4", y: "15", width: "16", height: "5", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
+var focusAndSelect = (input) => {
+  if (input && document.activeElement !== input) {
+    input.focus();
+    input.select();
   }
-  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx3("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    fillRect
-  ] });
-}
-var CliPanel = React3.forwardRef(
-  function CliPanel2(props, ref) {
-    const { options: optionsProp, modules: modulesProp, processors: processorsProp, services: servicesProp, onClose, style, className } = props;
-    const config = useCliConfig();
-    const options = optionsProp ? { ...config.options, ...optionsProp } : config.options;
-    const modules = modulesProp ?? config.modules;
-    const processors = processorsProp ?? config.processors;
-    const services = servicesProp ?? config.services;
-    const [internalPosition, setInternalPosition] = useState2(
-      () => loadPanelPosition() ?? options?.position ?? "bottom"
-    );
-    const [internalCollapsed, setInternalCollapsed] = useState2(options?.isCollapsed ?? true);
-    const [internalHidden, setInternalHidden] = useState2(options?.isHidden ?? false);
-    const [internalMaximized, setInternalMaximized] = useState2(false);
-    const [internalHeight, setInternalHeight] = useState2(600);
-    const [internalWidth, setInternalWidth] = useState2(400);
-    const [internalActiveTabId, setInternalActiveTabId] = useState2(0);
-    const position = props.position !== void 0 ? props.position : internalPosition;
-    const collapsed = props.collapsed !== void 0 ? props.collapsed : internalCollapsed;
-    const hidden = props.hidden !== void 0 ? props.hidden : internalHidden;
-    const maximized = props.maximized !== void 0 ? props.maximized : internalMaximized;
-    const panelHeight = props.height !== void 0 ? props.height : internalHeight;
-    const panelWidth = props.width !== void 0 ? props.width : internalWidth;
-    const activeTabId = props.activeTabId !== void 0 ? props.activeTabId : internalActiveTabId;
-    const updateCollapsed = useCallback((value) => {
-      setInternalCollapsed(value);
-      props.onCollapsedChange?.(value);
-    }, [props.onCollapsedChange]);
-    const updateHidden = useCallback((value) => {
-      setInternalHidden(value);
-      props.onHiddenChange?.(value);
-    }, [props.onHiddenChange]);
-    const updateMaximized = useCallback((value) => {
-      setInternalMaximized(value);
-      props.onMaximizedChange?.(value);
-    }, [props.onMaximizedChange]);
-    const updateHeight = useCallback((value) => {
-      setInternalHeight(value);
-      props.onHeightChange?.(value);
-    }, [props.onHeightChange]);
-    const updateWidth = useCallback((value) => {
-      setInternalWidth(value);
-      props.onWidthChange?.(value);
-    }, [props.onWidthChange]);
-    const updateActiveTabId = useCallback((value) => {
-      setInternalActiveTabId(value);
-      props.onActiveTabIdChange?.(value);
-    }, [props.onActiveTabIdChange]);
-    const updatePosition = useCallback((value) => {
-      setInternalPosition(value);
-      savePanelPosition(value);
-      props.onPositionChange?.(value);
-    }, [props.onPositionChange]);
-    const closable = options?.closable ?? true;
-    const resizable = options?.resizable ?? true;
-    const isHorizontal = position === "left" || position === "right";
-    const hideable = options?.hideable ?? true;
-    const hideAlignment = options?.hideAlignment ?? "center";
-    const syncTheme = options?.syncTheme ?? false;
-    const [visible, setVisible] = useState2(true);
-    const [initialized, setInitialized] = useState2(false);
-    const preHideCollapsedRef = useRef3(true);
-    const [themeStyles, setThemeStyles] = useState2({});
-    const wrapperRef = useRef3(null);
-    const [tabs, setTabs] = useState2([]);
-    const [activePaneId, setActivePaneId] = useState2(0);
-    const nextIdRef = useRef3({ tab: 1, pane: 1 });
-    const [contextMenu, setContextMenu] = useState2({ visible: false, x: 0, y: 0, tabId: 0 });
-    const engineMapRef = useRef3(/* @__PURE__ */ new Map());
-    const activeTabIdRef = useRef3(activeTabId);
-    activeTabIdRef.current = activeTabId;
-    const activePaneIdRef = useRef3(activePaneId);
-    activePaneIdRef.current = activePaneId;
-    const [paneResizing, setPaneResizing] = useState2(false);
-    const paneResizeRef = useRef3({ tabId: 0, dividerIndex: 0, startX: 0, startWidths: [], containerWidth: 0 });
-    const [panelResizing, setPanelResizing] = useState2(false);
-    const panelResizeRef = useRef3({ startY: 0, startHeight: 0, startX: 0, startWidth: 0 });
-    const prevHeightRef = useRef3(600);
-    const prevWidthRef = useRef3(400);
-    const [statusExecutionState, setStatusExecutionState] = useState2("idle");
-    const [statusLastCommand, setStatusLastCommand] = useState2(null);
-    const [statusServiceCount, setStatusServiceCount] = useState2({ running: 0, total: 0 });
-    const [statusServiceDetails, setStatusServiceDetails] = useState2([]);
-    const [statusServerState, setStatusServerState] = useState2("none");
-    const [statusServerDetails, setStatusServerDetails] = useState2([]);
-    const [statusUptime, setStatusUptime] = useState2(0);
-    const [notification, setNotification] = useState2(null);
-    const [servicesDropdownOpen, setServicesDropdownOpen] = useState2(false);
-    const [serversDropdownOpen, setServersDropdownOpen] = useState2(false);
-    const servicesDropdownRef = useRef3(null);
-    const serversDropdownRef = useRef3(null);
-    const normalizePanes = useCallback((panes) => {
-      const total = panes.reduce((s, p) => s + p.widthPercent, 0);
-      if (total === 0) return;
-      const scale = 100 / total;
-      panes.forEach((p) => {
-        p.widthPercent *= scale;
-      });
-    }, []);
-    const addTab = useCallback((title) => {
-      const tabId = nextIdRef.current.tab++;
-      const paneId = nextIdRef.current.pane++;
-      const pane = { id: paneId, widthPercent: 100 };
-      const tab = { id: tabId, title: title ?? `Terminal ${tabId}`, isEditing: false, panes: [pane] };
-      setTabs((prev) => [...prev, tab]);
-      updateActiveTabId(tabId);
-      setActivePaneId(paneId);
-      props.onTabAdded?.({ tabId });
-      return tabId;
-    }, [updateActiveTabId, props.onTabAdded]);
-    const toggle = useCallback(() => {
-      if (collapsed) {
-        updateCollapsed(false);
-        if (!initialized) {
-          setInitialized(true);
-          addTab();
-        }
-      } else {
-        updateCollapsed(true);
-      }
-    }, [collapsed, initialized, updateCollapsed, addTab]);
-    const closeTab = useCallback((id) => {
-      setTabs((prev) => {
-        const tab = prev.find((t) => t.id === id);
-        if (tab) {
-          tab.panes.forEach((p) => {
-            engineMapRef.current.get(p.id)?.destroy();
-            engineMapRef.current.delete(p.id);
-          });
-        }
-        const next = prev.filter((t) => t.id !== id);
-        if (next.length === 0) {
-          setInitialized(false);
-          updateCollapsed(true);
-          return [];
-        }
-        if (activeTabIdRef.current === id) {
-          const oldIdx = prev.findIndex((t) => t.id === id);
-          const newIdx = Math.min(oldIdx, next.length - 1);
-          updateActiveTabId(next[newIdx].id);
-        }
-        return next;
-      });
-      props.onTabClosed?.({ tabId: id });
-    }, [updateCollapsed, updateActiveTabId, props.onTabClosed]);
-    const selectTab = useCallback((id) => {
-      updateActiveTabId(id);
-      setTabs((prev) => {
-        const tab = prev.find((t) => t.id === id);
-        if (tab && tab.panes.length > 0) {
-          setActivePaneId(tab.panes[0].id);
-        }
-        return prev;
-      });
-    }, [updateActiveTabId]);
-    const renameTab = useCallback((tabId, title) => {
-      setTabs((prev) => prev.map((t) => t.id === tabId ? { ...t, title } : t));
-    }, []);
-    const startRename = useCallback((tabId) => {
-      setTabs((prev) => prev.map((t) => ({ ...t, isEditing: t.id === tabId })));
-    }, []);
-    const commitRename = useCallback((tabId, value) => {
-      const trimmed = value.trim();
-      setTabs((prev) => prev.map(
-        (t) => t.id === tabId ? { ...t, title: trimmed || t.title, isEditing: false } : t
-      ));
-    }, []);
-    const splitPane = useCallback((tabId) => {
-      const targetTabId = tabId ?? activeTabIdRef.current;
-      const paneId = nextIdRef.current.pane++;
-      setTabs((prev) => prev.map((t) => {
-        if (t.id !== targetTabId) return t;
-        const newPanes = [...t.panes.map((p) => ({ ...p })), { id: paneId, widthPercent: 0 }];
-        const evenWidth = 100 / newPanes.length;
-        newPanes.forEach((p) => {
-          p.widthPercent = evenWidth;
-        });
-        normalizePanes(newPanes);
-        return { ...t, panes: newPanes };
-      }));
-      setActivePaneId(paneId);
-      props.onPaneSplit?.({ paneId, tabId: targetTabId });
-      return paneId;
-    }, [normalizePanes, props.onPaneSplit]);
-    const closePane = useCallback((paneId) => {
-      setTabs((prev) => {
-        for (let i = 0; i < prev.length; i++) {
-          const tab = prev[i];
-          const idx = tab.panes.findIndex((p) => p.id === paneId);
-          if (idx === -1) continue;
-          if (tab.panes.length <= 1) {
-            setTimeout(() => closeTab(tab.id), 0);
-            return prev;
-          }
-          const newPanes = tab.panes.filter((p) => p.id !== paneId);
-          normalizePanes(newPanes);
-          const newTabs = [...prev];
-          newTabs[i] = { ...tab, panes: newPanes };
-          engineMapRef.current.get(paneId)?.destroy();
-          engineMapRef.current.delete(paneId);
-          if (activePaneIdRef.current === paneId) {
-            setActivePaneId(newPanes[Math.min(idx, newPanes.length - 1)].id);
-          }
-          props.onPaneClosed?.({ paneId });
-          return newTabs;
-        }
-        return prev;
-      });
-    }, [closeTab, normalizePanes, props.onPaneClosed]);
-    const closeContextMenu = useCallback(() => {
-      setContextMenu((prev) => ({ ...prev, visible: false }));
-    }, []);
-    useEffect3(() => {
-      if (!contextMenu.visible) return;
-      const handler = () => closeContextMenu();
-      document.addEventListener("click", handler);
-      return () => document.removeEventListener("click", handler);
-    }, [contextMenu.visible, closeContextMenu]);
-    const onPanelResizeStart = useCallback((e) => {
-      if (!resizable) return;
-      e.preventDefault();
-      if (collapsed) {
-        toggle();
+};
+var asStyle = (style) => style;
+var CliPanel = React3.forwardRef(function CliPanel2(props, ref) {
+  const config = useCliConfig();
+  const options = mergeCliOptions(props.options, config.options);
+  const { modules, processors, services } = resolveCliHostConfig2(props, config);
+  const [controller] = useState2(
+    () => new CliPanelController({
+      config: options,
+      controlled: {
+        collapsed: props.collapsed,
+        hidden: props.hidden,
+        maximized: props.maximized,
+        activeTabId: props.activeTabId,
+        position: props.position,
+        height: props.height,
+        width: props.width
       }
-      setPanelResizing(true);
-      panelResizeRef.current = {
-        startY: e.clientY,
-        startHeight: panelHeight,
-        startX: e.clientX,
-        startWidth: panelWidth
-      };
-    }, [collapsed, toggle, panelHeight, panelWidth, resizable]);
-    useEffect3(() => {
-      if (!panelResizing) return;
-      const onMove = (e) => {
-        if (isHorizontal) {
-          const deltaX = position === "left" ? e.clientX - panelResizeRef.current.startX : panelResizeRef.current.startX - e.clientX;
-          let next = Math.max(100, panelResizeRef.current.startWidth + deltaX);
-          if (next > window.innerWidth) next = window.innerWidth;
-          updateWidth(next);
-        } else {
-          const deltaY = position === "top" ? e.clientY - panelResizeRef.current.startY : panelResizeRef.current.startY - e.clientY;
-          let next = Math.max(100, panelResizeRef.current.startHeight + deltaY);
-          if (next > window.innerHeight) next = window.innerHeight;
-          updateHeight(next);
-        }
-      };
-      const onUp = () => setPanelResizing(false);
-      document.addEventListener("mousemove", onMove);
-      document.addEventListener("mouseup", onUp);
-      return () => {
-        document.removeEventListener("mousemove", onMove);
-        document.removeEventListener("mouseup", onUp);
-      };
-    }, [panelResizing, isHorizontal, position, updateWidth, updateHeight]);
-    const onPaneResizeStart = useCallback((e, tabId, dividerIndex) => {
-      e.preventDefault();
-      const tab = tabs.find((t) => t.id === tabId);
-      if (!tab) return;
-      setPaneResizing(true);
-      const container = e.target.closest(".cli-panel-panes-container");
-      paneResizeRef.current = {
-        tabId,
-        dividerIndex,
-        startX: e.clientX,
-        startWidths: tab.panes.map((p) => p.widthPercent),
-        containerWidth: container ? container.clientWidth : 1
-      };
-    }, [tabs]);
-    useEffect3(() => {
-      if (!paneResizing) return;
-      const onMove = (e) => {
-        const ref2 = paneResizeRef.current;
-        const deltaX = e.clientX - ref2.startX;
-        const deltaPct = deltaX / ref2.containerWidth * 100;
-        const i = ref2.dividerIndex;
-        let leftWidth = ref2.startWidths[i] + deltaPct;
-        let rightWidth = ref2.startWidths[i + 1] - deltaPct;
-        if (leftWidth < MIN_PANE_WIDTH_PERCENT) {
-          leftWidth = MIN_PANE_WIDTH_PERCENT;
-          rightWidth = ref2.startWidths[i] + ref2.startWidths[i + 1] - MIN_PANE_WIDTH_PERCENT;
-        }
-        if (rightWidth < MIN_PANE_WIDTH_PERCENT) {
-          rightWidth = MIN_PANE_WIDTH_PERCENT;
-          leftWidth = ref2.startWidths[i] + ref2.startWidths[i + 1] - MIN_PANE_WIDTH_PERCENT;
-        }
-        setTabs((prev) => {
-          const next = prev.map((t) => ({ ...t, panes: t.panes.map((p) => ({ ...p })) }));
-          const tab = next.find((t) => t.id === ref2.tabId);
-          if (tab) {
-            tab.panes[i].widthPercent = leftWidth;
-            tab.panes[i + 1].widthPercent = rightWidth;
-          }
-          return next;
-        });
-      };
-      const onUp = () => {
-        setPaneResizing(false);
-        document.body.classList.remove("cli-pane-resizing");
-      };
-      document.body.classList.add("cli-pane-resizing");
-      document.addEventListener("mousemove", onMove);
-      document.addEventListener("mouseup", onUp);
-      return () => {
-        document.removeEventListener("mousemove", onMove);
-        document.removeEventListener("mouseup", onUp);
-      };
-    }, [paneResizing]);
-    useEffect3(() => {
-      if (!syncTheme || !initialized) return;
-      const syncFromEngine = () => {
-        const engine = engineMapRef.current.values().next().value;
-        if (!engine) return;
-        const theme = engine.getTerminal().options.theme;
-        if (theme) setThemeStyles(derivePanelThemeStyles(theme));
-      };
-      const timer = setTimeout(() => {
-        syncFromEngine();
-        const container = wrapperRef.current?.querySelector(".terminal-container");
-        if (!container) return;
-        const observer = new MutationObserver(syncFromEngine);
-        observer.observe(container, { attributes: true, attributeFilter: ["style"] });
-        return () => observer.disconnect();
-      }, 200);
-      return () => clearTimeout(timer);
-    }, [syncTheme, initialized]);
-    useEffect3(() => {
-      if (!initialized) return;
-      const pollExec = setInterval(() => {
-        const tab = tabs.find((t) => t.id === activeTabIdRef.current);
-        if (!tab) return;
-        const engine = engineMapRef.current.get(tab.panes[0]?.id);
-        if (!engine) return;
-        const context = engine.getContext();
-        if (!context) return;
-        const running = !!context.isExecuting || !!context.contextProcessor;
-        setStatusExecutionState(running ? "running" : "idle");
-        const result = context.lastCommandResult;
-        setStatusLastCommand(result ? { name: result.command, success: result.success } : null);
-        const notif = context.notifier?.current;
-        setNotification(notif || null);
-      }, 300);
-      const pollGlobal = setInterval(() => {
-        const tab = tabs.find((t) => t.id === activeTabIdRef.current);
-        if (!tab) return;
-        const engine = engineMapRef.current.get(tab.panes[0]?.id);
-        if (!engine) return;
-        const context = engine.getContext();
-        if (!context) return;
-        try {
-          const services2 = context.backgroundServices?.list() ?? [];
-          setStatusServiceCount({ running: services2.filter((s) => s.status === "running").length, total: services2.length });
-          setStatusServiceDetails(services2.map((s) => ({ name: s.name, status: s.status, description: s.description })));
-        } catch {
-        }
-        try {
-          let serverManager;
-          try {
-            serverManager = context.services?.get?.("cli-server-manager");
-          } catch {
-          }
-          const details = [];
-          if (serverManager?.connections?.size > 0) {
-            let anyConnected = false;
-            for (const [name, conn] of serverManager.connections) {
-              if (conn.connected) anyConnected = true;
-              details.push({
-                name,
-                url: conn.config?.url ?? "",
-                connected: !!conn.connected,
-                apiVersion: conn.connected ? conn.apiVersion : void 0,
-                commandCount: conn.connected ? conn.commands?.length : void 0
-              });
-            }
-            setStatusServerState(anyConnected ? "connected" : "disconnected");
-          } else {
-            const configuredServers = engine.options?.servers;
-            if (Array.isArray(configuredServers) && configuredServers.length > 0) {
-              for (const srv of configuredServers) {
-                if (srv.enabled === false) continue;
-                details.push({
-                  name: srv.name,
-                  url: srv.url ?? "",
-                  connected: false
-                });
-              }
-              setStatusServerState("disconnected");
-            } else {
-              setStatusServerState("none");
-            }
-          }
-          setStatusServerDetails(details);
-        } catch {
-        }
-        setStatusUptime(engine.startedAt ? Date.now() - engine.startedAt : 0);
-      }, 2e3);
-      return () => {
-        clearInterval(pollExec);
-        clearInterval(pollGlobal);
-      };
-    }, [initialized, tabs]);
-    const toggleMaximize = useCallback(() => {
-      const nextMaximized = !maximized;
-      if (nextMaximized) {
-        if (isHorizontal) {
-          prevWidthRef.current = panelWidth;
-          updateWidth(window.innerWidth);
-        } else {
-          prevHeightRef.current = panelHeight;
-          updateHeight(window.innerHeight);
-        }
-      } else {
-        if (isHorizontal) {
-          updateWidth(prevWidthRef.current);
-        } else {
-          updateHeight(prevHeightRef.current);
-        }
+    })
+  );
+  const s = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+  const [rootElement, setRootElement] = useState2(null);
+  useLayoutEffect(() => {
+    controller.setCallbacks({
+      onCollapsedChange: props.onCollapsedChange,
+      onHiddenChange: props.onHiddenChange,
+      onMaximizedChange: props.onMaximizedChange,
+      onActiveTabIdChange: props.onActiveTabIdChange,
+      onPositionChange: props.onPositionChange,
+      onHeightChange: props.onHeightChange,
+      onWidthChange: props.onWidthChange,
+      onClose: props.onClose,
+      onTabAdded: props.onTabAdded,
+      onTabClosed: props.onTabClosed,
+      onPaneSplit: props.onPaneSplit,
+      onPaneClosed: props.onPaneClosed
+    });
+    controller.setControlled({
+      collapsed: props.collapsed,
+      hidden: props.hidden,
+      maximized: props.maximized,
+      activeTabId: props.activeTabId,
+      position: props.position,
+      height: props.height,
+      width: props.width
+    });
+    controller.setOptions(options);
+  });
+  useEffect3(() => controller.setRootElement(rootElement), [controller, rootElement]);
+  useEffect3(() => () => controller.destroy(), [controller]);
+  React3.useImperativeHandle(ref, () => controller, [controller]);
+  if (!s.visible) return null;
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    s.hidden && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "cli-panel-hide-tab",
+        "data-position": s.position,
+        "data-hide-align": s.hideAlignment,
+        style: asStyle(s.themeStyles),
+        title: PANEL_LABELS.showCli,
+        onClick: () => controller.unhide(),
+        children: [
+          /* @__PURE__ */ jsx3(Icon, { icon: HIDE_TAB_TERMINAL_ICON, className: "cli-panel-hide-tab-icon" }),
+          /* @__PURE__ */ jsx3("span", { className: "cli-panel-hide-tab-label", children: PANEL_LABELS.title }),
+          /* @__PURE__ */ jsx3(Icon, { icon: hideTabChevronIcon(s.position), className: "cli-panel-hide-tab-arrow" })
+        ]
       }
-      updateMaximized(nextMaximized);
-    }, [maximized, panelHeight, panelWidth, isHorizontal, updateMaximized, updateWidth, updateHeight]);
-    const handleClose = useCallback(() => {
-      setVisible(false);
-      onClose?.();
-    }, [onClose]);
-    const handleHide = useCallback(() => {
-      preHideCollapsedRef.current = collapsed;
-      updateHidden(true);
-    }, [collapsed, updateHidden]);
-    const handleUnhide = useCallback(() => {
-      updateHidden(false);
-      updateCollapsed(preHideCollapsedRef.current);
-    }, [updateHidden, updateCollapsed]);
-    const [positionDropdownOpen, setPositionDropdownOpen] = useState2(false);
-    const closePositionDropdown = useCallback(() => setPositionDropdownOpen(false), []);
-    useEffect3(() => {
-      if (!positionDropdownOpen) return;
-      document.addEventListener("click", closePositionDropdown);
-      return () => document.removeEventListener("click", closePositionDropdown);
-    }, [positionDropdownOpen, closePositionDropdown]);
-    useEffect3(() => {
-      if (!servicesDropdownOpen && !serversDropdownOpen) return;
-      const handler = () => {
-        setServicesDropdownOpen(false);
-        setServersDropdownOpen(false);
-      };
-      document.addEventListener("click", handler);
-      return () => document.removeEventListener("click", handler);
-    }, [servicesDropdownOpen, serversDropdownOpen]);
-    const handlePositionButtonClick = useCallback((e) => {
-      e.stopPropagation();
-      setPositionDropdownOpen((prev) => !prev);
-    }, []);
-    const selectPosition = useCallback((pos) => {
-      setPositionDropdownOpen(false);
-      updatePosition(pos);
-    }, [updatePosition]);
-    const getEngine = useCallback((paneId) => {
-      const targetId = paneId ?? activePaneIdRef.current;
-      return engineMapRef.current.get(targetId);
-    }, []);
-    const getState = useCallback(() => ({
-      collapsed,
-      hidden,
-      maximized,
-      position,
-      height: panelHeight,
-      width: panelWidth,
-      activeTabId,
-      activePaneId,
-      tabs: tabs.map((t) => ({
-        id: t.id,
-        title: t.title,
-        panes: t.panes.map((p) => ({ id: p.id, widthPercent: p.widthPercent }))
-      }))
-    }), [collapsed, hidden, maximized, position, panelHeight, panelWidth, activeTabId, activePaneId, tabs]);
-    React3.useImperativeHandle(ref, () => ({
-      open: () => {
-        if (!visible) {
-          setVisible(true);
-        }
-        if (hidden) {
-          updateHidden(false);
-        }
-        if (collapsed) {
-          updateCollapsed(false);
-          if (!initialized) {
-            setInitialized(true);
-            addTab();
-          }
-        }
-      },
-      collapse: () => {
-        if (!collapsed) updateCollapsed(true);
-      },
-      toggleCollapse: () => {
-        if (collapsed) {
-          updateCollapsed(false);
-          if (!initialized) {
-            setInitialized(true);
-            addTab();
-          }
-        } else {
-          updateCollapsed(true);
-        }
-      },
-      hide: () => {
-        if (!hidden) updateHidden(true);
-      },
-      unhide: () => {
-        if (hidden) updateHidden(false);
-      },
-      toggleHide: () => {
-        updateHidden(!hidden);
-      },
-      close: handleClose,
-      maximize: () => {
-        if (!maximized) updateMaximized(true);
-      },
-      restore: () => {
-        if (maximized) updateMaximized(false);
-      },
-      toggleMaximize: () => {
-        updateMaximized(!maximized);
-      },
-      resize: (dims) => {
-        if (dims.height !== void 0) updateHeight(dims.height);
-        if (dims.width !== void 0) updateWidth(dims.width);
-      },
-      setPosition: updatePosition,
-      addTab,
-      closeTab,
-      selectTab,
-      renameTab,
-      splitPane,
-      closePane,
-      getEngine,
-      getState
-    }), [
-      collapsed,
-      hidden,
-      maximized,
-      initialized,
-      updateCollapsed,
-      updateHidden,
-      updateMaximized,
-      updateHeight,
-      updateWidth,
-      updatePosition,
-      handleClose,
-      addTab,
-      closeTab,
-      selectTab,
-      renameTab,
-      splitPane,
-      closePane,
-      getEngine,
-      getState
-    ]);
-    const formattedUptime = (() => {
-      const mins = Math.floor(statusUptime / 6e4);
-      if (mins < 60) return `${mins}m`;
-      const hrs = Math.floor(mins / 60);
-      return `${hrs}h${mins % 60}m`;
-    })();
-    if (!visible) return null;
-    const wrapperStyle = {
-      ...isHorizontal ? { width: `${panelWidth}px` } : { height: `${panelHeight}px` },
-      ...hidden ? { display: "none" } : {},
-      ...themeStyles,
-      ...style
-    };
-    return /* @__PURE__ */ jsxs(Fragment2, { children: [
-      hidden && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          className: "cli-panel-hide-tab",
-          "data-position": position,
-          "data-hide-align": hideAlignment,
-          style: themeStyles,
-          title: "Show CLI",
-          onClick: handleUnhide,
-          children: [
-            /* @__PURE__ */ jsxs("svg", { className: "cli-panel-hide-tab-icon", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx3("polyline", { points: "4 17 10 11 4 5" }),
-              /* @__PURE__ */ jsx3("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
-            ] }),
-            /* @__PURE__ */ jsx3("span", { className: "cli-panel-hide-tab-label", children: "CLI" }),
-            /* @__PURE__ */ jsx3(HideTabChevron, { position })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: wrapperRef,
-          className: `cli-panel-wrapper ${collapsed ? "collapsed" : ""} ${maximized ? "maximized" : ""} ${panelResizing ? "resizing" : ""} ${className ?? ""}`,
-          style: wrapperStyle,
-          "data-position": position,
-          "data-resizable": String(resizable),
-          "data-closable": String(closable),
-          "data-hideable": String(hideable),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "cli-panel-header", children: [
-              /* @__PURE__ */ jsx3("div", { className: "cli-panel-resize-bar", onMouseDown: onPanelResizeStart, children: /* @__PURE__ */ jsx3("div", { className: "cli-panel-resize-grip" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "cli-panel-header-content", children: [
-                /* @__PURE__ */ jsxs("p", { className: "cli-panel-title", children: [
-                  /* @__PURE__ */ jsx3("span", { className: "cli-panel-title-icon", children: /* @__PURE__ */ jsx3(TerminalIcon, {}) }),
-                  "CLI"
-                ] }),
-                (position === "bottom" || position === "top") && /* @__PURE__ */ jsxs("div", { className: "cli-panel-status-indicators", children: [
-                  /* @__PURE__ */ jsxs("span", { className: `cli-panel-status-item${statusExecutionState === "running" ? " status-running" : ""}`, children: [
-                    /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-dot ${statusExecutionState === "running" ? "dot-running" : "dot-idle"}` }),
-                    /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-label", children: statusExecutionState })
-                  ] }),
-                  statusServiceCount.total > 0 && /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      ref: servicesDropdownRef,
-                      className: "cli-panel-status-item status-clickable",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        setServicesDropdownOpen((prev) => !prev);
-                        setServersDropdownOpen(false);
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-icon", children: "\u2699" }),
-                        /* @__PURE__ */ jsxs("span", { className: "cli-panel-status-label", children: [
-                          statusServiceCount.running,
-                          "/",
-                          statusServiceCount.total,
-                          " services"
-                        ] })
-                      ]
-                    }
-                  ),
-                  statusLastCommand && /* @__PURE__ */ jsxs("span", { className: "cli-panel-status-item", children: [
-                    /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-icon ${statusLastCommand.success ? "status-success" : "status-error"}`, children: statusLastCommand.success ? "\u2713" : "\u2717" }),
-                    /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-label", children: statusLastCommand.name })
-                  ] }),
-                  statusServerState !== "none" && /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      ref: serversDropdownRef,
-                      className: "cli-panel-status-item status-clickable",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        setServersDropdownOpen((prev) => !prev);
-                        setServicesDropdownOpen(false);
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-dot ${statusServerState === "connected" ? "dot-idle" : "dot-error"}` }),
-                        /* @__PURE__ */ jsxs("span", { className: "cli-panel-status-label", children: [
-                          statusServerDetails.filter((s) => s.connected).length,
-                          "/",
-                          statusServerDetails.length,
-                          " servers"
-                        ] })
-                      ]
-                    }
-                  ),
-                  statusUptime > 0 && /* @__PURE__ */ jsxs("span", { className: "cli-panel-status-item status-muted", children: [
-                    /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-icon", children: "\u2191" }),
-                    /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-label", children: formattedUptime })
-                  ] }),
-                  notification && /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-item status-text level-${notification.level}`, children: /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-label", children: notification.message }) })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "cli-panel-status-indicators-compact", children: [
-                  /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-compact-item", title: statusExecutionState, children: /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-dot ${statusExecutionState === "running" ? "dot-running" : "dot-idle"}` }) }),
-                  statusServiceCount.total > 0 && /* @__PURE__ */ jsx3(
-                    "span",
-                    {
-                      ref: position === "left" || position === "right" ? servicesDropdownRef : void 0,
-                      className: "cli-panel-status-compact-item status-clickable",
-                      title: `${statusServiceCount.running}/${statusServiceCount.total} services`,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        setServicesDropdownOpen((prev) => !prev);
-                        setServersDropdownOpen(false);
-                      },
-                      children: /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-icon", children: "\u2699" })
-                    }
-                  ),
-                  statusLastCommand && /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-compact-item", title: `${statusLastCommand.success ? "\u2713" : "\u2717"} ${statusLastCommand.name}`, children: /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-icon ${statusLastCommand.success ? "status-success" : "status-error"}`, children: statusLastCommand.success ? "\u2713" : "\u2717" }) }),
-                  statusServerState !== "none" && /* @__PURE__ */ jsx3(
-                    "span",
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setRootElement,
+        className: panelWrapperClass(s, props.className),
+        style: { ...asStyle(panelWrapperStyle(s)), ...props.style },
+        "data-position": s.position,
+        "data-resizable": String(s.resizable),
+        "data-closable": String(s.closable),
+        "data-hideable": String(s.hideable),
+        children: [
+          /* @__PURE__ */ jsx3(PanelHeader, { controller, s }),
+          s.initialized && /* @__PURE__ */ jsxs("div", { className: "cli-panel-content", style: s.collapsed ? { display: "none" } : void 0, children: [
+            /* @__PURE__ */ jsxs("div", { className: "cli-panel-tabs", children: [
+              /* @__PURE__ */ jsx3("ul", { className: "cli-panel-tab-list", children: s.tabs.map((tab) => /* @__PURE__ */ jsx3(
+                "li",
+                {
+                  className: panelTabClass(s, tab),
+                  onClick: () => controller.selectTab(tab.id),
+                  onDoubleClick: () => controller.startRename(tab.id),
+                  onContextMenu: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    controller.openContextMenu(tab.id, e.clientX, e.clientY);
+                  },
+                  children: tab.isEditing ? /* @__PURE__ */ jsx3(
+                    "input",
                     {
-                      ref: position === "left" || position === "right" ? serversDropdownRef : void 0,
-                      className: "cli-panel-status-compact-item status-clickable",
-                      title: `${statusServerDetails.filter((s) => s.connected).length}/${statusServerDetails.length} servers`,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        setServersDropdownOpen((prev) => !prev);
-                        setServicesDropdownOpen(false);
-                      },
-                      children: /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-dot ${statusServerState === "connected" ? "dot-idle" : "dot-error"}` })
+                      className: "cli-panel-tab-rename-input",
+                      type: "text",
+                      defaultValue: tab.title,
+                      ref: focusAndSelect,
+                      onKeyDown: (e) => handleRenameKey(controller, tab.id, e.key, e.currentTarget.value),
+                      onBlur: (e) => controller.commitRename(tab.id, e.target.value),
+                      onClick: (e) => e.stopPropagation(),
+                      onDoubleClick: (e) => e.stopPropagation()
                     }
-                  ),
-                  statusUptime > 0 && /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-compact-item status-muted", title: formattedUptime, children: /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-icon", children: "\u2191" }) }),
-                  notification && /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-compact-item", title: notification.message, children: /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-compact-dot level-${notification.level}` }) })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "cli-panel-action-buttons", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "cli-panel-btn-position-wrapper", onClick: (e) => e.stopPropagation(), children: [
-                    /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-position", title: "Move panel", onClick: handlePositionButtonClick, children: /* @__PURE__ */ jsx3(PositionIcon, { position }) }),
-                    positionDropdownOpen && /* @__PURE__ */ jsx3("div", { className: "cli-panel-position-dropdown", children: ["bottom", "top", "left", "right"].map((pos) => /* @__PURE__ */ jsxs(
+                  ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+                    /* @__PURE__ */ jsx3("span", { className: panelTabDotClass(s, tab) }),
+                    /* @__PURE__ */ jsx3("span", { className: "cli-panel-tab-title", children: tab.title }),
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
-                        className: `cli-panel-position-dropdown-item${position === pos ? " active" : ""}`,
-                        onClick: () => selectPosition(pos),
-                        children: [
-                          /* @__PURE__ */ jsx3(PositionIcon, { position: pos, size: 16 }),
-                          pos.charAt(0).toUpperCase() + pos.slice(1)
-                        ]
-                      },
-                      pos
-                    )) })
-                  ] }),
-                  hideable && /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-hide", title: "Hide", onClick: handleHide, children: /* @__PURE__ */ jsx3(HideIcon, {}) }),
-                  /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn", title: maximized ? "Restore" : "Maximize", disabled: collapsed, onClick: toggleMaximize, children: maximized ? /* @__PURE__ */ jsx3(RestoreIcon, {}) : /* @__PURE__ */ jsx3(MaximizeIcon, {}) }),
-                  /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn", title: collapsed ? "Expand" : "Collapse", onClick: toggle, children: /* @__PURE__ */ jsx3(CollapseChevron, { position, isCollapsed: collapsed }) }),
-                  closable && /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-close", title: "Close", onClick: handleClose, children: /* @__PURE__ */ jsx3(CloseIcon, {}) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx3("div", { className: `cli-panel-glow-line${statusExecutionState === "running" ? " glow-active" : ""}` })
+                        className: "cli-panel-tab-close-btn",
+                        title: PANEL_LABELS.closeTab,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          controller.closeTab(tab.id);
+                        },
+                        children: CLOSE_GLYPH
+                      }
+                    )
+                  ] })
+                },
+                tab.id
+              )) }),
+              /* @__PURE__ */ jsx3("button", { className: "cli-panel-add-tab", title: PANEL_LABELS.newTerminal, onClick: () => controller.addTab(), children: "+" })
             ] }),
-            initialized && /* @__PURE__ */ jsxs("div", { className: "cli-panel-content", style: collapsed ? { display: "none" } : void 0, children: [
-              /* @__PURE__ */ jsxs("div", { className: "cli-panel-tabs", children: [
-                /* @__PURE__ */ jsx3("ul", { className: "cli-panel-tab-list", children: tabs.map((tab) => /* @__PURE__ */ jsx3(
-                  "li",
-                  {
-                    className: `cli-panel-tab ${tab.id === activeTabId ? "active" : ""}`,
-                    onClick: () => selectTab(tab.id),
-                    onDoubleClick: () => startRename(tab.id),
-                    onContextMenu: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setContextMenu({ visible: true, x: e.clientX, y: e.clientY, tabId: tab.id });
-                    },
-                    children: tab.isEditing ? /* @__PURE__ */ jsx3(
-                      "input",
+            /* @__PURE__ */ jsx3("div", { className: "cli-panel-instances", children: s.tabs.map((tab) => /* @__PURE__ */ jsx3("div", { className: "cli-panel-instance", style: { display: tab.id === s.activeTabId ? void 0 : "none" }, children: /* @__PURE__ */ jsx3("div", { className: panesContainerClass(s), children: tab.panes.map((pane, i) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: "cli-panel-pane-divider",
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    controller.startPaneResize(tab.id, i - 1, e.clientX, panesContainerWidth(e.target));
+                  },
+                  children: /* @__PURE__ */ jsx3("div", { className: "cli-panel-pane-divider-grip" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: paneClass(s, tab.id, pane.id),
+                  style: paneStyle(pane.widthPercent),
+                  onClick: () => controller.activatePane(tab.id, pane.id),
+                  children: [
+                    tab.panes.length > 1 && /* @__PURE__ */ jsx3(
+                      "button",
                       {
-                        className: "cli-panel-tab-rename-input",
-                        type: "text",
-                        defaultValue: tab.title,
-                        autoFocus: true,
-                        onKeyDown: (e) => {
-                          if (e.key === "Enter") commitRename(tab.id, e.target.value);
-                          else if (e.key === "Escape") setTabs((prev) => prev.map((t) => ({ ...t, isEditing: false })));
+                        className: "cli-panel-pane-close-btn",
+                        title: PANEL_LABELS.closePane,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          controller.closePane(pane.id);
                         },
-                        onBlur: (e) => commitRename(tab.id, e.target.value),
-                        onClick: (e) => e.stopPropagation(),
-                        onDoubleClick: (e) => e.stopPropagation()
+                        children: CLOSE_GLYPH
                       }
-                    ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-                      /* @__PURE__ */ jsx3("span", { className: `cli-panel-tab-dot ${(() => {
-                        if (tab.id !== activeTabId) return "dot-idle";
-                        if (statusExecutionState === "running") return "dot-running";
-                        if (statusLastCommand && !statusLastCommand.success) return "dot-error";
-                        return "dot-idle";
-                      })()}` }),
-                      /* @__PURE__ */ jsx3("span", { className: "cli-panel-tab-title", children: tab.title }),
-                      /* @__PURE__ */ jsx3(
-                        "button",
-                        {
-                          className: "cli-panel-tab-close-btn",
-                          title: "Close tab",
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            closeTab(tab.id);
-                          },
-                          children: "\xD7"
-                        }
-                      )
-                    ] })
-                  },
-                  tab.id
-                )) }),
-                /* @__PURE__ */ jsx3("button", { className: "cli-panel-add-tab", title: "New terminal", onClick: () => addTab(), children: "+" })
-              ] }),
-              /* @__PURE__ */ jsx3("div", { className: "cli-panel-instances", children: tabs.map((tab) => /* @__PURE__ */ jsx3("div", { className: "cli-panel-instance", style: { display: tab.id === activeTabId ? void 0 : "none" }, children: /* @__PURE__ */ jsx3("div", { className: `cli-panel-panes-container ${paneResizing ? "resizing" : ""}`, children: tab.panes.map((pane, i) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
-                i > 0 && /* @__PURE__ */ jsx3("div", { className: "cli-panel-pane-divider", onMouseDown: (e) => onPaneResizeStart(e, tab.id, i - 1), children: /* @__PURE__ */ jsx3("div", { className: "cli-panel-pane-divider-grip" }) }),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: `cli-panel-pane ${pane.id === activePaneId && tab.id === activeTabId ? "active-pane" : ""}`,
-                    style: { flex: `${pane.widthPercent} 1 0` },
-                    onClick: () => {
-                      setActivePaneId(pane.id);
-                      updateActiveTabId(tab.id);
-                    },
-                    children: [
-                      tab.panes.length > 1 && /* @__PURE__ */ jsx3(
-                        "button",
-                        {
-                          className: "cli-panel-pane-close-btn",
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            closePane(pane.id);
-                          },
-                          title: "Close pane",
-                          children: "\xD7"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx3(CliContext.Provider, { value: { engine: null }, children: /* @__PURE__ */ jsx3(
-                        Cli,
-                        {
-                          options,
-                          modules,
-                          processors,
-                          services,
-                          snapshot: pane.snapshot,
-                          onReady: (engine) => engineMapRef.current.set(pane.id, engine)
-                        }
-                      ) })
-                    ]
-                  }
-                )
-              ] }, pane.id)) }) }, tab.id)) })
-            ] })
-          ]
-        }
-      ),
-      contextMenu.visible && /* @__PURE__ */ jsxs(
-        "div",
+                    ),
+                    /* @__PURE__ */ jsx3(CliContext.Provider, { value: { engine: null }, children: /* @__PURE__ */ jsx3(
+                      Cli,
+                      {
+                        options,
+                        modules,
+                        processors,
+                        services,
+                        snapshot: pane.snapshot,
+                        onReady: (engine) => controller.registerEngine(tab.id, pane.id, engine)
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ] }, pane.id)) }) }, tab.id)) })
+          ] })
+        ]
+      }
+    ),
+    s.contextMenu.visible && /* @__PURE__ */ jsx3("div", { className: "cli-panel-context-menu", style: asStyle(contextMenuStyle(s)), onClick: (e) => e.stopPropagation(), children: contextMenuItems(s).map((item) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+      item.separatorBefore && /* @__PURE__ */ jsx3("div", { className: "cli-panel-context-menu-separator" }),
+      /* @__PURE__ */ jsx3(
+        "button",
         {
-          className: "cli-panel-context-menu",
-          style: { left: contextMenu.x, top: contextMenu.y },
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", onClick: () => {
-              closeContextMenu();
-              startRename(contextMenu.tabId);
-            }, children: "Rename" }),
-            /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", onClick: () => {
-              closeContextMenu();
-              const tab = tabs.find((t) => t.id === contextMenu.tabId);
-              if (!tab) return;
-              const sourceEngine = engineMapRef.current.get(tab.panes[0]?.id);
-              const snapshot = sourceEngine?.snapshot();
-              const paneId = nextIdRef.current.pane++;
-              const tabId = nextIdRef.current.tab++;
-              const pane = { id: paneId, widthPercent: 100, snapshot };
-              const newTab = { id: tabId, title: `${tab.title} (copy)`, isEditing: false, panes: [pane] };
-              const idx = tabs.indexOf(tab);
-              setTabs((prev) => {
-                const next = [...prev];
-                next.splice(idx + 1, 0, newTab);
-                return next;
-              });
-              updateActiveTabId(tabId);
-              setActivePaneId(paneId);
-              props.onTabAdded?.({ tabId });
-            }, children: "Duplicate" }),
-            /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", onClick: () => {
-              closeContextMenu();
-              splitPane(contextMenu.tabId);
-            }, children: "Split Right" }),
-            /* @__PURE__ */ jsx3("div", { className: "cli-panel-context-menu-separator" }),
-            /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", onClick: () => {
-              closeContextMenu();
-              closeTab(contextMenu.tabId);
-            }, children: "Close" }),
-            /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", disabled: tabs.length <= 1, onClick: () => {
-              closeContextMenu();
-              setTabs((prev) => prev.filter((t) => t.id === contextMenu.tabId));
-              updateActiveTabId(contextMenu.tabId);
-            }, children: "Close Others" }),
-            /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item", onClick: () => {
-              const id = contextMenu.tabId;
-              closeContextMenu();
-              setTabs((prev) => {
-                const idx = prev.findIndex((t) => t.id === id);
-                if (idx === -1) return prev;
-                return prev.slice(0, idx + 1);
-              });
-            }, children: "Close to the Right" }),
-            /* @__PURE__ */ jsx3("div", { className: "cli-panel-context-menu-separator" }),
-            /* @__PURE__ */ jsx3("button", { className: "cli-panel-context-menu-item destructive", onClick: () => {
-              closeContextMenu();
-              setTabs([]);
-              setInitialized(false);
-              updateCollapsed(true);
-            }, children: "Close All" })
-          ]
+          className: joinClasses("cli-panel-context-menu-item", item.destructive && "destructive"),
+          disabled: item.disabled,
+          onClick: () => runContextMenuAction(controller, item.action),
+          children: item.label
         }
-      ),
-      servicesDropdownOpen && statusServiceCount.total > 0 && /* @__PURE__ */ jsxs(
-        "div",
+      )
+    ] }, item.action)) }),
+    /* @__PURE__ */ jsx3(StatusDropdown, { s })
+  ] });
+});
+function StatusDropdown({ s }) {
+  const dropdown = openStatusDropdown(s);
+  if (!dropdown) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "cli-panel-services-dropdown", style: asStyle(dropdown.style), onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-header", children: dropdown.header }),
+    /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-list", children: dropdown.rows.map((row) => /* @__PURE__ */ jsxs("div", { className: "cli-panel-services-dropdown-item", children: [
+      /* @__PURE__ */ jsx3("span", { className: row.dotClass }),
+      /* @__PURE__ */ jsxs("div", { className: "cli-panel-svc-info", children: [
+        /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-name", children: row.name }),
+        row.description && /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-desc", children: row.description })
+      ] }),
+      dropdown.kind === "servers" ? /* @__PURE__ */ jsxs("div", { className: "cli-panel-srv-meta", children: [
+        /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-status", children: row.status }),
+        row.meta.map((m) => /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-desc", children: m }, m))
+      ] }) : /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-status", children: row.status })
+    ] }, row.key)) }),
+    dropdown.rows.length === 0 && /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-empty", children: dropdown.emptyText })
+  ] });
+}
+function PanelHeader({ controller, s }) {
+  const indicators = statusIndicators(s);
+  const openDropdown = (e, dropdown) => {
+    if (!dropdown) return;
+    e.stopPropagation();
+    if (dropdown === "services") controller.toggleServicesDropdown(e.currentTarget);
+    else controller.toggleServersDropdown(e.currentTarget);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "cli-panel-header", children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "cli-panel-resize-bar",
+        onMouseDown: (e) => {
+          if (!s.resizable) return;
+          e.preventDefault();
+          controller.startPanelResize(e.clientX, e.clientY);
+        },
+        children: /* @__PURE__ */ jsx3("div", { className: "cli-panel-resize-grip" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "cli-panel-header-content", children: [
+      /* @__PURE__ */ jsxs("p", { className: "cli-panel-title", children: [
+        /* @__PURE__ */ jsx3("span", { className: "cli-panel-title-icon", children: /* @__PURE__ */ jsx3(Icon, { icon: TERMINAL_ICON }) }),
+        PANEL_LABELS.title
+      ] }),
+      s.showStatusIndicators && /* @__PURE__ */ jsx3("div", { className: "cli-panel-status-indicators", children: indicators.map((item) => /* @__PURE__ */ jsxs(
+        "span",
         {
-          className: "cli-panel-services-dropdown",
-          style: (() => {
-            const el = servicesDropdownRef.current;
-            if (!el) return {};
-            const rect = el.getBoundingClientRect();
-            const base = { position: "fixed", zIndex: 1100 };
-            switch (position) {
-              case "top":
-                return { ...base, top: rect.bottom + 4, left: rect.left };
-              case "left":
-                return { ...base, top: rect.top, left: rect.right + 4 };
-              case "right":
-                return { ...base, top: rect.top, right: window.innerWidth - rect.left + 4 };
-              default:
-                return { ...base, bottom: window.innerHeight - rect.top + 4, left: rect.left };
-            }
-          })(),
-          onClick: (e) => e.stopPropagation(),
+          className: joinClasses("cli-panel-status-item", item.itemClass),
+          onClick: item.dropdown ? (e) => openDropdown(e, item.dropdown) : void 0,
           children: [
-            /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-header", children: "Background Services" }),
-            /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-list", children: statusServiceDetails.map((svc, i) => /* @__PURE__ */ jsxs("div", { className: "cli-panel-services-dropdown-item", children: [
-              /* @__PURE__ */ jsx3("span", { className: `cli-panel-svc-dot ${svc.status === "running" ? "svc-running" : "svc-stopped"}` }),
-              /* @__PURE__ */ jsxs("div", { className: "cli-panel-svc-info", children: [
-                /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-name", children: svc.name }),
-                svc.description && /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-desc", children: svc.description })
-              ] }),
-              /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-status", children: svc.status })
-            ] }, i)) }),
-            statusServiceDetails.length === 0 && /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-empty", children: "No services registered" })
+            item.dotClass && /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-dot ${item.dotClass}` }),
+            item.icon && /* @__PURE__ */ jsx3("span", { className: joinClasses("cli-panel-status-icon", item.iconClass), children: item.icon }),
+            /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-label", children: item.label })
           ]
-        }
-      ),
-      serversDropdownOpen && statusServerState !== "none" && /* @__PURE__ */ jsxs(
-        "div",
+        },
+        item.key
+      )) }),
+      /* @__PURE__ */ jsx3("div", { className: "cli-panel-status-indicators-compact", children: indicators.map((item) => /* @__PURE__ */ jsxs(
+        "span",
         {
-          className: "cli-panel-services-dropdown",
-          style: (() => {
-            const el = serversDropdownRef.current;
-            if (!el) return {};
-            const rect = el.getBoundingClientRect();
-            const base = { position: "fixed", zIndex: 1100 };
-            switch (position) {
-              case "top":
-                return { ...base, top: rect.bottom + 4, left: rect.left };
-              case "left":
-                return { ...base, top: rect.top, left: rect.right + 4 };
-              case "right":
-                return { ...base, top: rect.top, right: window.innerWidth - rect.left + 4 };
-              default:
-                return { ...base, bottom: window.innerHeight - rect.top + 4, left: rect.left };
-            }
-          })(),
-          onClick: (e) => e.stopPropagation(),
+          className: joinClasses("cli-panel-status-compact-item", item.compactClass),
+          title: item.title,
+          onClick: item.dropdown ? (e) => openDropdown(e, item.dropdown) : void 0,
           children: [
-            /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-header", children: "Server Connections" }),
-            /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-list", children: statusServerDetails.map((srv, i) => /* @__PURE__ */ jsxs("div", { className: "cli-panel-services-dropdown-item", children: [
-              /* @__PURE__ */ jsx3("span", { className: `cli-panel-svc-dot ${srv.connected ? "svc-running" : "svc-stopped"}` }),
-              /* @__PURE__ */ jsxs("div", { className: "cli-panel-svc-info", children: [
-                /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-name", children: srv.name }),
-                srv.url && /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-desc", children: srv.url })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "cli-panel-srv-meta", children: [
-                /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-status", children: srv.connected ? "connected" : "disconnected" }),
-                srv.apiVersion && /* @__PURE__ */ jsxs("span", { className: "cli-panel-svc-desc", children: [
-                  "v",
-                  srv.apiVersion
-                ] }),
-                srv.commandCount && /* @__PURE__ */ jsxs("span", { className: "cli-panel-svc-desc", children: [
-                  srv.commandCount,
-                  " cmds"
-                ] })
-              ] })
-            ] }, i)) }),
-            statusServerDetails.length === 0 && /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-empty", children: "No servers configured" })
+            item.compactDotClass && /* @__PURE__ */ jsx3("span", { className: item.compactDotClass }),
+            item.dotClass && /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-dot ${item.dotClass}` }),
+            item.icon && /* @__PURE__ */ jsx3("span", { className: joinClasses("cli-panel-status-icon", item.iconClass), children: item.icon })
           ]
-        }
-      )
-    ] });
-  }
-);
+        },
+        item.key
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "cli-panel-action-buttons", children: [
+        /* @__PURE__ */ jsxs("div", { className: "cli-panel-btn-position-wrapper", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-position", title: PANEL_LABELS.movePanel, onClick: () => controller.togglePositionDropdown(), children: /* @__PURE__ */ jsx3(Icon, { icon: positionIcon(s.position) }) }),
+          s.positionDropdownOpen && /* @__PURE__ */ jsx3("div", { className: "cli-panel-position-dropdown", children: positionOptions(s).map((opt) => /* @__PURE__ */ jsxs("button", { className: opt.className, onClick: () => controller.setPosition(opt.position), children: [
+            /* @__PURE__ */ jsx3(Icon, { icon: positionIcon(opt.position, 16) }),
+            opt.label
+          ] }, opt.position)) })
+        ] }),
+        s.hideable && /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-hide", title: PANEL_LABELS.hide, onClick: () => controller.hide(), children: /* @__PURE__ */ jsx3(Icon, { icon: HIDE_ICON }) }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            className: "cli-panel-btn",
+            title: s.maximized ? PANEL_LABELS.restore : PANEL_LABELS.maximize,
+            disabled: s.collapsed,
+            onClick: () => controller.toggleMaximize(),
+            children: /* @__PURE__ */ jsx3(Icon, { icon: s.maximized ? RESTORE_ICON : MAXIMIZE_ICON })
+          }
+        ),
+        /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn", title: s.collapsed ? PANEL_LABELS.expand : PANEL_LABELS.collapse, onClick: () => controller.toggle(), children: /* @__PURE__ */ jsx3(Icon, { icon: collapseChevronIcon(s.position, s.collapsed) }) }),
+        s.closable && /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-close", title: PANEL_LABELS.close, onClick: () => controller.close(), children: /* @__PURE__ */ jsx3(Icon, { icon: CLOSE_ICON }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: glowLineClass(s) })
+  ] });
+}
 
 // src/CliProvider.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef3 } from "react";
+import { resolveCliHostConfig as resolveCliHostConfig3 } from "@qodalis/cli";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function CliProvider({
   modules,
@@ -1184,13 +455,8 @@ function CliProvider({
   style
 }) {
   const config = useCliConfig();
-  const containerRef = useRef4(null);
-  const engine = useCliEngine(containerRef, {
-    modules: modules ?? config.modules,
-    processors: processors ?? config.processors,
-    options: options ?? config.options,
-    services: services ?? config.services
-  });
+  const containerRef = useRef3(null);
+  const engine = useCliEngine(containerRef, resolveCliHostConfig3({ modules, processors, options, services }, config));
   return /* @__PURE__ */ jsxs2(CliContext.Provider, { value: { engine }, children: [
     /* @__PURE__ */ jsx4("div", { ref: containerRef, style: { height: "100%", ...style } }),
     children
@@ -1198,12 +464,12 @@ function CliProvider({
 }
 
 // src/index.tsx
-import { CliEngine as CliEngine2 } from "@qodalis/cli";
+import { CliEngine as CliEngine4 } from "@qodalis/cli";
 export {
   Cli,
   CliConfigProvider,
   CliContext,
-  CliEngine2 as CliEngine,
+  CliEngine4 as CliEngine,
   CliPanel,
   CliProvider,
   useCli,