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

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
   h,
   inject
 } from "vue";
-import { CliEngine } from "@qodalis/cli";
+import { createCliEngine, resolveCliHostConfig } from "@qodalis/cli";
 
 // src/cliInjection.ts
 var CliInjectionKey = /* @__PURE__ */ Symbol("qodalis-cli");
@@ -88,26 +88,10 @@ var Cli = defineComponent2({
     if (ctx) {
       return () => null;
     }
-    const modules = props.modules ?? config?.modules;
-    const processors = props.processors ?? config?.processors;
-    const options = props.options ?? config?.options;
-    const services = props.services ?? config?.services;
+    const hostConfig = resolveCliHostConfig(props, config);
     onMounted(async () => {
       if (!containerRef.value) return;
-      const engineOptions = props.snapshot ? { ...options, snapshot: props.snapshot } : options;
-      engine = new CliEngine(containerRef.value, engineOptions);
-      engine.registerService("cli-framework", "Vue");
-      if (services) {
-        for (const [token, value] of Object.entries(services)) {
-          engine.registerService(token, value);
-        }
-      }
-      if (modules) {
-        engine.registerModules(modules);
-      }
-      if (processors) {
-        engine.registerProcessors(processors);
-      }
+      engine = createCliEngine(containerRef.value, { ...hostConfig, snapshot: props.snapshot, framework: "Vue" });
       await engine.start();
       emit("ready", engine);
     });
@@ -124,139 +108,75 @@ var Cli = defineComponent2({
 });
 
 // src/CliPanel.ts
+import { defineComponent as defineComponent3, computed, inject as inject2, watch, h as h2, onBeforeUnmount as onBeforeUnmount2, onMounted as onMounted2, shallowRef, Fragment } from "vue";
 import {
-  defineComponent as defineComponent3,
-  ref as ref2,
-  computed,
-  inject as inject2,
-  watch,
-  h as h2,
-  onMounted as onMounted2,
-  onBeforeUnmount as onBeforeUnmount2
-} from "vue";
-import { derivePanelThemeStyles, loadPanelPosition, savePanelPosition } from "@qodalis/cli-core";
-var MIN_PANE_WIDTH_PERCENT = 10;
-function normalizePanes(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;
-  });
-}
-var svgAttrs = {
-  width: "20",
-  height: "20",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "1.8",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
-};
-var terminalIcon = () => h2("svg", { ...svgAttrs, width: "22", height: "22", "stroke-width": "2" }, [
-  h2("polyline", { points: "4 17 10 11 4 5" }),
-  h2("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
-]);
-var maximizeIcon = () => h2("svg", svgAttrs, [
-  h2("polyline", { points: "15 3 21 3 21 9" }),
-  h2("polyline", { points: "9 21 3 21 3 15" }),
-  h2("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-  h2("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
-]);
-var restoreIcon = () => h2("svg", svgAttrs, [
-  h2("polyline", { points: "4 14 10 14 10 20" }),
-  h2("polyline", { points: "20 10 14 10 14 4" }),
-  h2("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
-  h2("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
-]);
-var closeIcon = () => h2("svg", svgAttrs, [
-  h2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  h2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-]);
-var hideIcon = () => h2("svg", svgAttrs, [
-  h2("line", { x1: "5", y1: "18", x2: "19", y2: "18" }),
-  h2("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;
-  }
-  return h2("svg", svgAttrs, [h2("polyline", { points })]);
-}
-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 h2("svg", { class: "cli-panel-hide-tab-arrow", ...svgAttrs, width: "14", height: "14", "stroke-width": "2.5" }, [
-    h2("polyline", { points })
-  ]);
-}
-function positionIcon(pos, size = 20) {
-  let fillRect;
-  switch (pos) {
-    case "top":
-      fillRect = h2("rect", { x: "4", y: "4", width: "16", height: "5", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
-    case "left":
-      fillRect = h2("rect", { x: "4", y: "4", width: "5", height: "16", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
-    case "right":
-      fillRect = h2("rect", { x: "15", y: "4", width: "5", height: "16", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
-    default:
-      fillRect = h2("rect", { x: "4", y: "15", width: "16", height: "5", rx: "1", fill: "currentColor", stroke: "none", opacity: "0.5" });
-      break;
-  }
-  return h2("svg", { ...svgAttrs, width: String(size), height: String(size) }, [
-    h2("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    fillRect
-  ]);
+  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";
+var PANEL_REF_METHODS = [
+  "open",
+  "collapse",
+  "toggleCollapse",
+  "hide",
+  "unhide",
+  "toggleHide",
+  "close",
+  "maximize",
+  "restore",
+  "toggleMaximize",
+  "resize",
+  "setPosition",
+  "addTab",
+  "closeTab",
+  "selectTab",
+  "renameTab",
+  "splitPane",
+  "closePane",
+  "getEngine",
+  "getState"
+];
+function icon(svg, className) {
+  return h2("svg", { class: className, ...svgAttrs(svg) }, svg.shapes.map((shape) => h2(shape.tag, shape.attrs)));
 }
+var stop = (e) => e.stopPropagation();
 var CliPanel = defineComponent3({
   name: "CliPanel",
   props: {
-    options: {
-      type: Object,
-      default: void 0
-    },
+    options: { type: Object, default: void 0 },
     modules: { type: Array, default: void 0 },
-    processors: {
-      type: Array,
-      default: void 0
-    },
-    services: {
-      type: Object,
-      default: void 0
-    },
-    onClose: {
-      type: Function,
-      default: void 0
-    },
+    processors: { type: Array, default: void 0 },
+    services: { type: Object, default: void 0 },
+    onClose: { type: Function, default: void 0 },
     collapsed: { type: Boolean, default: void 0 },
     hidden: { type: Boolean, default: void 0 },
     maximized: { type: Boolean, default: void 0 },
@@ -264,10 +184,7 @@ var CliPanel = defineComponent3({
     position: { type: String, default: void 0 },
     height: { type: Number, default: void 0 },
     width: { type: Number, default: void 0 },
-    style: {
-      type: Object,
-      default: void 0
-    },
+    style: { type: Object, default: void 0 },
     class: { type: String, default: void 0 }
   },
   emits: [
@@ -286,1194 +203,378 @@ var CliPanel = defineComponent3({
   ],
   setup(props, { expose, emit }) {
     const config = inject2(CliConfigKey, null);
-    const mergedOptions = computed(() => props.options ? { ...config?.options, ...props.options } : config?.options);
-    const mergedModules = computed(() => props.modules ?? config?.modules);
-    const mergedProcessors = computed(() => props.processors ?? config?.processors);
-    const mergedServices = computed(() => props.services ?? config?.services);
-    const visible = ref2(true);
-    const internalCollapsed = ref2(mergedOptions.value?.isCollapsed ?? true);
-    const internalMaximized = ref2(false);
-    const internalHeight = ref2(600);
-    const internalWidth = ref2(400);
-    const prevHeight = ref2(600);
-    const prevWidth = ref2(400);
-    const initialized = ref2(false);
-    const internalHidden = ref2(props.options?.isHidden ?? false);
-    let preHideCollapsed = true;
-    const internalActiveTabId = ref2(0);
-    const internalPosition = ref2(
-      loadPanelPosition() ?? mergedOptions.value?.position ?? "bottom"
-    );
-    const resolvedCollapsed = computed(() => props.collapsed !== void 0 ? props.collapsed : internalCollapsed.value);
-    const resolvedHidden = computed(() => props.hidden !== void 0 ? props.hidden : internalHidden.value);
-    const resolvedMaximized = computed(() => props.maximized !== void 0 ? props.maximized : internalMaximized.value);
-    const resolvedActiveTabId = computed(() => props.activeTabId !== void 0 ? props.activeTabId : internalActiveTabId.value);
-    const resolvedHeight = computed(() => props.height !== void 0 ? props.height : internalHeight.value);
-    const resolvedWidth = computed(() => props.width !== void 0 ? props.width : internalWidth.value);
-    const resolvedPosition = computed(() => props.position !== void 0 ? props.position : internalPosition.value);
-    function updateCollapsed(value) {
-      internalCollapsed.value = value;
-      emit("update:collapsed", value);
-    }
-    function updateHidden(value) {
-      internalHidden.value = value;
-      emit("update:hidden", value);
-    }
-    function updateMaximized(value) {
-      internalMaximized.value = value;
-      emit("update:maximized", value);
-    }
-    function updateActiveTabId(value) {
-      internalActiveTabId.value = value;
-      emit("update:activeTabId", value);
-    }
-    function updateHeight(value) {
-      internalHeight.value = value;
-      emit("update:height", value);
-    }
-    function updateWidth(value) {
-      internalWidth.value = value;
-      emit("update:width", value);
-    }
-    function updatePosition(value) {
-      internalPosition.value = value;
-      savePanelPosition(value);
-      emit("update:position", value);
-    }
-    const closable = computed(() => mergedOptions.value?.closable ?? true);
-    const resizable = computed(() => mergedOptions.value?.resizable ?? true);
-    const isHorizontal = computed(() => resolvedPosition.value === "left" || resolvedPosition.value === "right");
-    const hideable = computed(() => mergedOptions.value?.hideable ?? true);
-    const hideAlignment = computed(() => mergedOptions.value?.hideAlignment ?? "center");
-    const syncTheme = computed(() => mergedOptions.value?.syncTheme ?? false);
-    const themeStyles = ref2({});
-    const tabs = ref2([]);
-    const activePaneId = ref2(0);
-    let nextTabId = 1;
-    let nextPaneId = 1;
-    const contextMenu = ref2({
-      visible: false,
-      x: 0,
-      y: 0,
-      tabId: 0
-    });
-    const engineMap = /* @__PURE__ */ new Map();
-    const paneResizing = ref2(false);
-    let paneResizeState = {
-      tabId: 0,
-      dividerIndex: 0,
-      startX: 0,
-      startWidths: [],
-      containerWidth: 0
-    };
-    const panelResizing = ref2(false);
-    let panelResizeState = { startY: 0, startHeight: 0, startX: 0, startWidth: 0 };
-    const statusExecutionState = ref2("idle");
-    const statusLastCommand = ref2(null);
-    const statusServiceCount = ref2({ running: 0, total: 0 });
-    const statusServiceDetails = ref2([]);
-    const statusServerState = ref2("none");
-    const statusServerDetails = ref2([]);
-    const statusUptime = ref2(0);
-    const notification = ref2(null);
-    const servicesDropdownOpen = ref2(false);
-    const serversDropdownOpen = ref2(false);
-    const servicesDropdownTriggerRect = ref2(null);
-    const serversDropdownTriggerRect = ref2(null);
-    const formattedUptime = computed(() => {
-      const mins = Math.floor(statusUptime.value / 6e4);
-      if (mins < 60) return `${mins}m`;
-      const hrs = Math.floor(mins / 60);
-      return `${hrs}h${mins % 60}m`;
+    const mergedOptions = computed(() => mergeCliOptions(props.options, config?.options));
+    const hostConfig = computed(() => resolveCliHostConfig2(props, config));
+    const controlled = () => ({
+      collapsed: props.collapsed,
+      hidden: props.hidden,
+      maximized: props.maximized,
+      activeTabId: props.activeTabId,
+      position: props.position,
+      height: props.height,
+      width: props.width
     });
-    let execPollTimer;
-    let globalPollTimer;
-    function startStatusPolling() {
-      stopStatusPolling();
-      execPollTimer = setInterval(() => {
-        const tab = tabs.value.find((t) => t.id === resolvedActiveTabId.value);
-        if (!tab) return;
-        const engine = engineMap.get(tab.panes[0]?.id);
-        if (!engine) return;
-        const context = engine.getContext();
-        if (!context) return;
-        const running = !!context.isExecuting || !!context.contextProcessor;
-        statusExecutionState.value = running ? "running" : "idle";
-        const result = context.lastCommandResult;
-        statusLastCommand.value = result ? { name: result.command, success: result.success } : null;
-        const notif = context.notifier?.current;
-        notification.value = notif || null;
-      }, 300);
-      globalPollTimer = setInterval(() => {
-        const tab = tabs.value.find((t) => t.id === resolvedActiveTabId.value);
-        if (!tab) return;
-        const engine = engineMap.get(tab.panes[0]?.id);
-        if (!engine) return;
-        const context = engine.getContext();
-        if (!context) return;
-        try {
-          const services = context.backgroundServices?.list() ?? [];
-          statusServiceCount.value = { running: services.filter((s) => s.status === "running").length, total: services.length };
-          statusServiceDetails.value = services.map((s) => ({ name: s.name, status: s.status, description: s.description }));
-        } catch {
-        }
-        try {
-          const serverManager = context.services?.get?.("cli-server-manager");
-          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
-              });
-            }
-            statusServerState.value = 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
-                });
-              }
-              statusServerState.value = "disconnected";
-            } else {
-              statusServerState.value = "none";
-            }
-          }
-          statusServerDetails.value = details;
-        } catch {
-        }
-        statusUptime.value = engine.startedAt ? Date.now() - engine.startedAt : 0;
-      }, 2e3);
-    }
-    function stopStatusPolling() {
-      if (execPollTimer) {
-        clearInterval(execPollTimer);
-        execPollTimer = void 0;
-      }
-      if (globalPollTimer) {
-        clearInterval(globalPollTimer);
-        globalPollTimer = void 0;
-      }
-    }
-    watch(initialized, (val) => {
-      if (val) startStatusPolling();
-      else stopStatusPolling();
-    });
-    function addTab(title) {
-      const tabId = nextTabId++;
-      const paneId = nextPaneId++;
-      tabs.value = [...tabs.value, {
-        id: tabId,
-        title: title ?? `Terminal ${tabId}`,
-        isEditing: false,
-        panes: [{ id: paneId, widthPercent: 100 }]
-      }];
-      updateActiveTabId(tabId);
-      activePaneId.value = paneId;
-      emit("tab-added", { tabId });
-      return tabId;
-    }
-    let themeObserver;
-    function syncThemeFromEngine() {
-      const engine = engineMap.values().next().value;
-      if (!engine) return;
-      const theme = engine.getTerminal().options.theme;
-      if (theme) themeStyles.value = derivePanelThemeStyles(theme);
-    }
-    function setupThemeSync() {
-      if (!syncTheme.value) return;
-      setTimeout(() => {
-        syncThemeFromEngine();
-        const container = document.querySelector(".cli-panel-wrapper .terminal-container");
-        if (!container) return;
-        themeObserver?.disconnect();
-        themeObserver = new MutationObserver(syncThemeFromEngine);
-        themeObserver.observe(container, { attributes: true, attributeFilter: ["style"] });
-      }, 200);
-    }
-    onMounted2(() => {
-      document.addEventListener("click", closePositionDropdown);
-    });
-    onBeforeUnmount2(() => {
-      themeObserver?.disconnect();
-      document.removeEventListener("click", closePositionDropdown);
-    });
-    function toggle() {
-      const newVal = !resolvedCollapsed.value;
-      updateCollapsed(newVal);
-      if (!newVal && !initialized.value) {
-        initialized.value = true;
-        addTab();
-        setupThemeSync();
-      }
-    }
-    function closeTab(id) {
-      const idx = tabs.value.findIndex((t) => t.id === id);
-      if (idx === -1) return;
-      tabs.value.splice(idx, 1);
-      emit("tab-closed", { tabId: id });
-      if (tabs.value.length === 0) {
-        initialized.value = false;
-        updateCollapsed(true);
-        return;
-      }
-      if (resolvedActiveTabId.value === id) {
-        const newIdx = Math.min(idx, tabs.value.length - 1);
-        selectTab(tabs.value[newIdx].id);
-      }
-    }
-    function selectTab(id) {
-      updateActiveTabId(id);
-      const tab = tabs.value.find((t) => t.id === id);
-      if (tab && tab.panes.length > 0) {
-        activePaneId.value = tab.panes[0].id;
-      }
-    }
-    function splitPane(tabId) {
-      const targetTabId = tabId ?? resolvedActiveTabId.value;
-      const paneId = nextPaneId++;
-      tabs.value = tabs.value.map((t) => {
-        if (t.id !== targetTabId) return t;
-        const newPanes = [...t.panes, { id: paneId, widthPercent: 0 }];
-        const evenWidth = 100 / newPanes.length;
-        newPanes.forEach((p) => {
-          p.widthPercent = evenWidth;
-        });
-        normalizePanes(newPanes);
-        return { ...t, panes: newPanes };
-      });
-      activePaneId.value = paneId;
-      emit("pane-split", { paneId, tabId: targetTabId });
-      return paneId;
-    }
-    function closePane(paneId) {
-      for (const tab of tabs.value) {
-        const idx = tab.panes.findIndex((p) => p.id === paneId);
-        if (idx === -1) continue;
-        if (tab.panes.length <= 1) {
-          closeTab(tab.id);
-          return;
-        }
-        engineMap.get(paneId)?.destroy();
-        engineMap.delete(paneId);
-        const newPanes = tab.panes.filter((p) => p.id !== paneId);
-        normalizePanes(newPanes);
-        if (activePaneId.value === paneId) {
-          activePaneId.value = newPanes[Math.min(idx, newPanes.length - 1)].id;
-        }
-        emit("pane-closed", { paneId });
-        tabs.value = tabs.value.map(
-          (t) => t.id === tab.id ? { ...t, panes: newPanes } : t
-        );
-        return;
-      }
-    }
-    function renameTab(tabId, title) {
-      tabs.value = tabs.value.map((t) => t.id === tabId ? { ...t, title } : t);
-    }
-    function startRename(tabId) {
-      tabs.value.forEach((t) => {
-        t.isEditing = t.id === tabId;
-      });
-    }
-    function commitRename(tabId, value) {
-      const trimmed = value.trim();
-      const tab = tabs.value.find((t) => t.id === tabId);
-      if (tab) {
-        if (trimmed) tab.title = trimmed;
-        tab.isEditing = false;
-      }
-    }
-    function closeContextMenu() {
-      contextMenu.value = { ...contextMenu.value, visible: false };
-    }
-    function onDocClick() {
-      if (contextMenu.value.visible) closeContextMenu();
-    }
-    onMounted2(() => document.addEventListener("click", onDocClick));
-    onBeforeUnmount2(
-      () => document.removeEventListener("click", onDocClick)
-    );
-    function onPanelResizeStart(e) {
-      if (!resizable.value) return;
-      e.preventDefault();
-      if (resolvedCollapsed.value) toggle();
-      panelResizing.value = true;
-      panelResizeState = {
-        startY: e.clientY,
-        startHeight: resolvedHeight.value,
-        startX: e.clientX,
-        startWidth: resolvedWidth.value
-      };
-    }
-    function onPanelResizeMove(e) {
-      if (!panelResizing.value) return;
-      if (isHorizontal.value) {
-        const deltaX = resolvedPosition.value === "left" ? e.clientX - panelResizeState.startX : panelResizeState.startX - e.clientX;
-        let next = Math.max(100, panelResizeState.startWidth + deltaX);
-        if (next > window.innerWidth) next = window.innerWidth;
-        updateWidth(next);
-      } else {
-        const deltaY = resolvedPosition.value === "top" ? e.clientY - panelResizeState.startY : panelResizeState.startY - e.clientY;
-        let next = Math.max(100, panelResizeState.startHeight + deltaY);
-        if (next > window.innerHeight) next = window.innerHeight;
-        updateHeight(next);
+    const controller = new CliPanelController({
+      config: mergedOptions.value,
+      controlled: controlled(),
+      callbacks: {
+        onCollapsedChange: (v) => emit("update:collapsed", v),
+        onHiddenChange: (v) => emit("update:hidden", v),
+        onMaximizedChange: (v) => emit("update:maximized", v),
+        onActiveTabIdChange: (v) => emit("update:activeTabId", v),
+        onPositionChange: (v) => emit("update:position", v),
+        onHeightChange: (v) => emit("update:height", v),
+        onWidthChange: (v) => emit("update:width", v),
+        onClose: () => {
+          emit("close");
+          props.onClose?.();
+        },
+        onTabAdded: (e) => emit("tab-added", e),
+        onTabClosed: (e) => emit("tab-closed", e),
+        onPaneSplit: (e) => emit("pane-split", e),
+        onPaneClosed: (e) => emit("pane-closed", e)
       }
-    }
-    function onPanelResizeEnd() {
-      panelResizing.value = false;
-    }
-    onMounted2(() => {
-      document.addEventListener("mousemove", onPanelResizeMove);
-      document.addEventListener("mouseup", onPanelResizeEnd);
-    });
-    onBeforeUnmount2(() => {
-      document.removeEventListener("mousemove", onPanelResizeMove);
-      document.removeEventListener("mouseup", onPanelResizeEnd);
     });
-    function onPaneResizeStart(e, tabId, dividerIndex) {
-      e.preventDefault();
-      const tab = tabs.value.find((t) => t.id === tabId);
-      if (!tab) return;
-      paneResizing.value = true;
-      const container = e.target.closest(
-        ".cli-panel-panes-container"
-      );
-      paneResizeState = {
-        tabId,
-        dividerIndex,
-        startX: e.clientX,
-        startWidths: tab.panes.map((p) => p.widthPercent),
-        containerWidth: container ? container.clientWidth : 1
-      };
-      document.body.classList.add("cli-pane-resizing");
-    }
-    function onPaneResizeMove(e) {
-      if (!paneResizing.value) return;
-      const s = paneResizeState;
-      const deltaPct = (e.clientX - s.startX) / s.containerWidth * 100;
-      const i = s.dividerIndex;
-      let leftW = s.startWidths[i] + deltaPct;
-      let rightW = s.startWidths[i + 1] - deltaPct;
-      if (leftW < MIN_PANE_WIDTH_PERCENT) {
-        leftW = MIN_PANE_WIDTH_PERCENT;
-        rightW = s.startWidths[i] + s.startWidths[i + 1] - MIN_PANE_WIDTH_PERCENT;
-      }
-      if (rightW < MIN_PANE_WIDTH_PERCENT) {
-        rightW = MIN_PANE_WIDTH_PERCENT;
-        leftW = s.startWidths[i] + s.startWidths[i + 1] - MIN_PANE_WIDTH_PERCENT;
-      }
-      const tab = tabs.value.find((t) => t.id === s.tabId);
-      if (tab) {
-        tab.panes[i].widthPercent = leftW;
-        tab.panes[i + 1].widthPercent = rightW;
-      }
-    }
-    function onPaneResizeEnd() {
-      if (!paneResizing.value) return;
-      paneResizing.value = false;
-      document.body.classList.remove("cli-pane-resizing");
-    }
-    onMounted2(() => {
-      document.addEventListener("mousemove", onPaneResizeMove);
-      document.addEventListener("mouseup", onPaneResizeEnd);
+    const state = shallowRef(controller.getSnapshot());
+    const unsubscribe = controller.subscribe(() => {
+      state.value = controller.getSnapshot();
     });
+    watch(controlled, (values) => controller.setControlled(values));
+    watch(mergedOptions, (options) => controller.setOptions(options));
+    const root = shallowRef(null);
+    onMounted2(() => controller.setRootElement(root.value));
     onBeforeUnmount2(() => {
-      document.removeEventListener("mousemove", onPaneResizeMove);
-      document.removeEventListener("mouseup", onPaneResizeEnd);
-      stopStatusPolling();
+      unsubscribe();
+      controller.destroy();
     });
-    function toggleMaximize() {
-      if (!resolvedMaximized.value) {
-        if (isHorizontal.value) {
-          prevWidth.value = resolvedWidth.value;
-          updateWidth(window.innerWidth);
-        } else {
-          prevHeight.value = resolvedHeight.value;
-          updateHeight(window.innerHeight);
-        }
-      } else {
-        if (isHorizontal.value) {
-          updateWidth(prevWidth.value);
-        } else {
-          updateHeight(prevHeight.value);
-        }
-      }
-      updateMaximized(!resolvedMaximized.value);
-    }
-    function handleClose() {
-      visible.value = false;
-      emit("close");
-      props.onClose?.();
-    }
-    function handleHide() {
-      preHideCollapsed = resolvedCollapsed.value;
-      updateHidden(true);
-    }
-    function handleUnhide() {
-      updateHidden(false);
-      updateCollapsed(preHideCollapsed);
+    const exposed = {};
+    for (const method of PANEL_REF_METHODS) {
+      exposed[method] = controller[method].bind(controller);
     }
-    const positionDropdownOpen = ref2(false);
-    function closePositionDropdown() {
-      positionDropdownOpen.value = false;
-      servicesDropdownOpen.value = false;
-      serversDropdownOpen.value = false;
-    }
-    function togglePositionDropdown(e) {
+    expose(exposed);
+    const openDropdown = (e, dropdown) => {
+      if (!dropdown) return;
       e.stopPropagation();
-      positionDropdownOpen.value = !positionDropdownOpen.value;
-    }
-    function selectPosition(pos) {
-      positionDropdownOpen.value = false;
-      updatePosition(pos);
-    }
-    function getEngine(paneId) {
-      const targetId = paneId ?? activePaneId.value;
-      return engineMap.get(targetId);
-    }
-    function getState() {
-      return {
-        collapsed: resolvedCollapsed.value,
-        hidden: resolvedHidden.value,
-        maximized: resolvedMaximized.value,
-        position: resolvedPosition.value,
-        height: resolvedHeight.value,
-        width: resolvedWidth.value,
-        activeTabId: resolvedActiveTabId.value,
-        activePaneId: activePaneId.value,
-        tabs: tabs.value.map((t) => ({
-          id: t.id,
-          title: t.title,
-          panes: t.panes.map((p) => ({ id: p.id, widthPercent: p.widthPercent }))
-        }))
-      };
-    }
-    expose({
-      open: () => {
-        if (!visible.value) {
-          visible.value = true;
-        }
-        if (resolvedHidden.value) {
-          updateHidden(false);
-        }
-        if (resolvedCollapsed.value) {
-          updateCollapsed(false);
-          if (!initialized.value) {
-            initialized.value = true;
-            addTab();
-            setupThemeSync();
-          }
-        }
-      },
-      collapse: () => {
-        if (!resolvedCollapsed.value) updateCollapsed(true);
-      },
-      toggleCollapse: () => {
-        if (resolvedCollapsed.value) {
-          updateCollapsed(false);
-          if (!initialized.value) {
-            initialized.value = true;
-            addTab();
-            setupThemeSync();
-          }
-        } else {
-          updateCollapsed(true);
-        }
-      },
-      hide: () => {
-        if (!resolvedHidden.value) updateHidden(true);
-      },
-      unhide: () => {
-        if (resolvedHidden.value) updateHidden(false);
-      },
-      toggleHide: () => {
-        updateHidden(!resolvedHidden.value);
-      },
-      close: handleClose,
-      maximize: () => {
-        if (!resolvedMaximized.value) updateMaximized(true);
-      },
-      restore: () => {
-        if (resolvedMaximized.value) updateMaximized(false);
-      },
-      toggleMaximize: () => {
-        updateMaximized(!resolvedMaximized.value);
-      },
-      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
-    });
-    return () => {
-      if (!visible.value) return null;
-      const wrapperClass = [
-        "cli-panel-wrapper",
-        resolvedCollapsed.value && "collapsed",
-        resolvedMaximized.value && "maximized",
-        panelResizing.value && "resizing",
-        props.class
-      ].filter(Boolean).join(" ");
-      const wrapperStyle = {
-        ...isHorizontal.value ? { width: `${resolvedWidth.value}px` } : { height: `${resolvedHeight.value}px` },
-        ...resolvedHidden.value ? { display: "none" } : {},
-        ...themeStyles.value,
-        ...props.style
-      };
-      const headerEl = h2("div", { class: "cli-panel-header" }, [
+      const anchor = e.currentTarget;
+      if (dropdown === "services") controller.toggleServicesDropdown(anchor);
+      else controller.toggleServersDropdown(anchor);
+    };
+    const renderHeader = (s) => {
+      const indicators = statusIndicators(s);
+      return h2("div", { class: "cli-panel-header" }, [
         h2(
           "div",
           {
             class: "cli-panel-resize-bar",
-            onMousedown: onPanelResizeStart
+            onMousedown: (e) => {
+              if (!s.resizable) return;
+              e.preventDefault();
+              controller.startPanelResize(e.clientX, e.clientY);
+            }
           },
           [h2("div", { class: "cli-panel-resize-grip" })]
         ),
         h2("div", { class: "cli-panel-header-content" }, [
-          h2("p", { class: "cli-panel-title" }, [
-            h2("span", { class: "cli-panel-title-icon" }, [
-              terminalIcon()
-            ]),
-            "CLI"
-          ]),
-          // Status indicators (bottom/top only)
-          resolvedPosition.value === "bottom" || resolvedPosition.value === "top" ? h2("div", { class: "cli-panel-status-indicators" }, [
-            // Execution state
-            h2("span", { class: ["cli-panel-status-item", statusExecutionState.value === "running" ? "status-running" : ""].filter(Boolean).join(" ") }, [
-              h2("span", { class: ["cli-panel-status-dot", statusExecutionState.value === "running" ? "dot-running" : "dot-idle"].join(" ") }),
-              h2("span", { class: "cli-panel-status-label" }, statusExecutionState.value)
-            ]),
-            // Background services
-            statusServiceCount.value.total > 0 ? h2("span", {
-              class: "cli-panel-status-item status-clickable",
-              onClick: (e) => {
-                e.stopPropagation();
-                servicesDropdownTriggerRect.value = e.currentTarget.getBoundingClientRect();
-                servicesDropdownOpen.value = !servicesDropdownOpen.value;
-                serversDropdownOpen.value = false;
-              }
-            }, [
-              h2("span", { class: "cli-panel-status-icon", innerHTML: "&#9881;" }),
-              h2("span", { class: "cli-panel-status-label" }, `${statusServiceCount.value.running}/${statusServiceCount.value.total} services`)
-            ]) : null,
-            // Last command
-            statusLastCommand.value ? h2("span", { class: "cli-panel-status-item" }, [
-              h2("span", { class: ["cli-panel-status-icon", statusLastCommand.value.success ? "status-success" : "status-error"].join(" "), innerHTML: statusLastCommand.value.success ? "&#10003;" : "&#10005;" }),
-              h2("span", { class: "cli-panel-status-label" }, statusLastCommand.value.name)
-            ]) : null,
-            // Server connection
-            statusServerState.value !== "none" ? h2("span", {
-              class: "cli-panel-status-item status-clickable",
-              onClick: (e) => {
-                e.stopPropagation();
-                serversDropdownTriggerRect.value = e.currentTarget.getBoundingClientRect();
-                serversDropdownOpen.value = !serversDropdownOpen.value;
-                servicesDropdownOpen.value = false;
-              }
-            }, [
-              h2("span", { class: ["cli-panel-status-dot", statusServerState.value === "connected" ? "dot-idle" : "dot-error"].join(" ") }),
-              h2("span", { class: "cli-panel-status-label" }, `${statusServerDetails.value.filter((s) => s.connected).length}/${statusServerDetails.value.length} servers`)
-            ]) : null,
-            // Uptime
-            statusUptime.value > 0 ? h2("span", { class: "cli-panel-status-item status-muted" }, [
-              h2("span", { class: "cli-panel-status-icon", innerHTML: "&uarr;" }),
-              h2("span", { class: "cli-panel-status-label" }, formattedUptime.value)
-            ]) : null,
-            // Custom notification
-            notification.value ? h2("span", { class: `cli-panel-status-item status-text level-${notification.value.level}` }, [
-              h2("span", { class: "cli-panel-status-label" }, notification.value.message)
-            ]) : null
-          ].filter(Boolean)) : null,
-          // Compact status indicators (left/right positions — CSS controls visibility)
-          h2("div", { class: "cli-panel-status-indicators-compact" }, [
-            // Execution state
-            h2("span", { class: "cli-panel-status-compact-item", title: statusExecutionState.value }, [
-              h2("span", { class: ["cli-panel-status-dot", statusExecutionState.value === "running" ? "dot-running" : "dot-idle"].join(" ") })
-            ]),
-            // Background services
-            statusServiceCount.value.total > 0 ? h2("span", {
-              class: "cli-panel-status-compact-item status-clickable",
-              title: `${statusServiceCount.value.running}/${statusServiceCount.value.total} services`,
-              onClick: (e) => {
-                e.stopPropagation();
-                servicesDropdownTriggerRect.value = e.currentTarget.getBoundingClientRect();
-                servicesDropdownOpen.value = !servicesDropdownOpen.value;
-                serversDropdownOpen.value = false;
-              }
-            }, [
-              h2("span", { class: "cli-panel-status-icon", innerHTML: "&#9881;" })
-            ]) : null,
-            // Last command
-            statusLastCommand.value ? h2("span", {
-              class: "cli-panel-status-compact-item",
-              title: `${statusLastCommand.value.success ? "\u2713" : "\u2717"} ${statusLastCommand.value.name}`
-            }, [
-              h2("span", {
-                class: ["cli-panel-status-icon", statusLastCommand.value.success ? "status-success" : "status-error"].join(" "),
-                innerHTML: statusLastCommand.value.success ? "&#10003;" : "&#10005;"
-              })
-            ]) : null,
-            // Server connection
-            statusServerState.value !== "none" ? h2("span", {
-              class: "cli-panel-status-compact-item status-clickable",
-              title: `${statusServerDetails.value.filter((s) => s.connected).length}/${statusServerDetails.value.length} servers`,
-              onClick: (e) => {
-                e.stopPropagation();
-                serversDropdownTriggerRect.value = e.currentTarget.getBoundingClientRect();
-                serversDropdownOpen.value = !serversDropdownOpen.value;
-                servicesDropdownOpen.value = false;
-              }
-            }, [
-              h2("span", { class: ["cli-panel-status-dot", statusServerState.value === "connected" ? "dot-idle" : "dot-error"].join(" ") })
-            ]) : null,
-            // Uptime
-            statusUptime.value > 0 ? h2("span", { class: "cli-panel-status-compact-item status-muted", title: formattedUptime.value }, [
-              h2("span", { class: "cli-panel-status-icon", innerHTML: "&uarr;" })
-            ]) : null,
-            // Notification
-            notification.value ? h2("span", { class: "cli-panel-status-compact-item", title: notification.value.message }, [
-              h2("span", { class: `cli-panel-status-compact-dot level-${notification.value.level}` })
-            ]) : null
-          ].filter(Boolean)),
+          h2("p", { class: "cli-panel-title" }, [h2("span", { class: "cli-panel-title-icon" }, [icon(TERMINAL_ICON)]), PANEL_LABELS.title]),
+          s.showStatusIndicators ? h2(
+            "div",
+            { class: "cli-panel-status-indicators" },
+            indicators.map(
+              (item) => h2(
+                "span",
+                {
+                  key: item.key,
+                  class: joinClasses("cli-panel-status-item", item.itemClass),
+                  onClick: item.dropdown ? (e) => openDropdown(e, item.dropdown) : void 0
+                },
+                [
+                  item.dotClass ? h2("span", { class: `cli-panel-status-dot ${item.dotClass}` }) : null,
+                  item.icon ? h2("span", { class: joinClasses("cli-panel-status-icon", item.iconClass) }, item.icon) : null,
+                  h2("span", { class: "cli-panel-status-label" }, item.label)
+                ]
+              )
+            )
+          ) : null,
+          // Compact indicators for left/right positions (CSS controls visibility).
+          h2(
+            "div",
+            { class: "cli-panel-status-indicators-compact" },
+            indicators.map(
+              (item) => h2(
+                "span",
+                {
+                  key: item.key,
+                  class: joinClasses("cli-panel-status-compact-item", item.compactClass),
+                  title: item.title,
+                  onClick: item.dropdown ? (e) => openDropdown(e, item.dropdown) : void 0
+                },
+                [
+                  item.compactDotClass ? h2("span", { class: item.compactDotClass }) : null,
+                  item.dotClass ? h2("span", { class: `cli-panel-status-dot ${item.dotClass}` }) : null,
+                  item.icon ? h2("span", { class: joinClasses("cli-panel-status-icon", item.iconClass) }, item.icon) : null
+                ]
+              )
+            )
+          ),
           h2("div", { class: "cli-panel-action-buttons" }, [
-            h2("div", {
-              class: "cli-panel-btn-position-wrapper",
-              onClick: (e) => e.stopPropagation()
-            }, [
-              h2("button", {
-                class: "cli-panel-btn cli-panel-btn-position",
-                title: "Move panel",
-                onClick: togglePositionDropdown
-              }, [positionIcon(resolvedPosition.value)]),
-              positionDropdownOpen.value ? h2(
+            h2("div", { class: "cli-panel-btn-position-wrapper", onClick: stop }, [
+              h2(
+                "button",
+                {
+                  class: "cli-panel-btn cli-panel-btn-position",
+                  title: PANEL_LABELS.movePanel,
+                  onClick: () => controller.togglePositionDropdown()
+                },
+                [icon(positionIcon(s.position))]
+              ),
+              s.positionDropdownOpen ? h2(
                 "div",
                 { class: "cli-panel-position-dropdown" },
-                ["bottom", "top", "left", "right"].map(
-                  (pos) => h2("button", {
-                    class: ["cli-panel-position-dropdown-item", resolvedPosition.value === pos ? "active" : ""].filter(Boolean).join(" "),
-                    onClick: () => selectPosition(pos)
-                  }, [
-                    positionIcon(pos, 16),
-                    pos.charAt(0).toUpperCase() + pos.slice(1)
-                  ])
+                positionOptions(s).map(
+                  (opt) => h2(
+                    "button",
+                    { key: opt.position, class: opt.className, onClick: () => controller.setPosition(opt.position) },
+                    [icon(positionIcon(opt.position, 16)), opt.label]
+                  )
                 )
               ) : null
             ]),
-            hideable.value ? h2("button", {
-              class: "cli-panel-btn cli-panel-btn-hide",
-              title: "Hide",
-              onClick: handleHide
-            }, [hideIcon()]) : null,
+            s.hideable ? h2("button", { class: "cli-panel-btn cli-panel-btn-hide", title: PANEL_LABELS.hide, onClick: () => controller.hide() }, [icon(HIDE_ICON)]) : null,
             h2(
               "button",
               {
                 class: "cli-panel-btn",
-                title: resolvedMaximized.value ? "Restore" : "Maximize",
-                disabled: resolvedCollapsed.value,
-                onClick: toggleMaximize
+                title: s.maximized ? PANEL_LABELS.restore : PANEL_LABELS.maximize,
+                disabled: s.collapsed,
+                onClick: () => controller.toggleMaximize()
               },
-              [resolvedMaximized.value ? restoreIcon() : maximizeIcon()]
+              [icon(s.maximized ? RESTORE_ICON : MAXIMIZE_ICON)]
             ),
             h2(
               "button",
               {
                 class: "cli-panel-btn",
-                title: resolvedCollapsed.value ? "Expand" : "Collapse",
-                onClick: toggle
+                title: s.collapsed ? PANEL_LABELS.expand : PANEL_LABELS.collapse,
+                onClick: () => controller.toggle()
               },
-              [collapseChevron(resolvedPosition.value, resolvedCollapsed.value)]
+              [icon(collapseChevronIcon(s.position, s.collapsed))]
             ),
-            closable.value ? h2(
-              "button",
-              {
-                class: "cli-panel-btn cli-panel-btn-close",
-                title: "Close",
-                onClick: handleClose
-              },
-              [closeIcon()]
-            ) : null
+            s.closable ? h2("button", { class: "cli-panel-btn cli-panel-btn-close", title: PANEL_LABELS.close, onClick: () => controller.close() }, [icon(CLOSE_ICON)]) : null
           ])
         ]),
-        h2("div", { class: ["cli-panel-glow-line", statusExecutionState.value === "running" ? "glow-active" : ""].filter(Boolean).join(" ") })
+        h2("div", { class: glowLineClass(s) })
       ]);
-      const contentEl = initialized.value ? h2("div", { class: "cli-panel-content", style: resolvedCollapsed.value ? { display: "none" } : void 0 }, [
-        // Tab bar
-        h2("div", { class: "cli-panel-tabs" }, [
+    };
+    const renderTabs = (s) => h2("div", { class: "cli-panel-tabs" }, [
+      h2(
+        "ul",
+        { class: "cli-panel-tab-list" },
+        s.tabs.map(
+          (tab) => h2(
+            "li",
+            {
+              key: tab.id,
+              class: panelTabClass(s, tab),
+              onClick: () => controller.selectTab(tab.id),
+              onDblclick: () => controller.startRename(tab.id),
+              onContextmenu: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                controller.openContextMenu(tab.id, e.clientX, e.clientY);
+              }
+            },
+            tab.isEditing ? [
+              h2("input", {
+                class: "cli-panel-tab-rename-input",
+                type: "text",
+                value: tab.title,
+                onVnodeMounted: (vnode) => {
+                  const input = vnode.el;
+                  input.focus();
+                  input.select();
+                },
+                onKeydown: (e) => handleRenameKey(controller, tab.id, e.key, e.target.value),
+                onBlur: (e) => controller.commitRename(tab.id, e.target.value),
+                onClick: stop,
+                onDblclick: stop
+              })
+            ] : [
+              h2("span", { class: panelTabDotClass(s, tab) }),
+              h2("span", { class: "cli-panel-tab-title" }, tab.title),
+              h2(
+                "button",
+                {
+                  class: "cli-panel-tab-close-btn",
+                  title: PANEL_LABELS.closeTab,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    controller.closeTab(tab.id);
+                  }
+                },
+                CLOSE_GLYPH
+              )
+            ]
+          )
+        )
+      ),
+      h2("button", { class: "cli-panel-add-tab", title: PANEL_LABELS.newTerminal, onClick: () => controller.addTab() }, "+")
+    ]);
+    const renderInstances = (s) => h2(
+      "div",
+      { class: "cli-panel-instances" },
+      s.tabs.map(
+        (tab) => h2("div", { key: tab.id, class: "cli-panel-instance", style: { display: tab.id === s.activeTabId ? void 0 : "none" } }, [
           h2(
-            "ul",
-            { class: "cli-panel-tab-list" },
-            tabs.value.map(
-              (tab) => h2(
-                "li",
+            "div",
+            { class: panesContainerClass(s) },
+            tab.panes.flatMap((pane, i) => [
+              i > 0 ? h2(
+                "div",
                 {
-                  key: tab.id,
-                  class: [
-                    "cli-panel-tab",
-                    tab.id === resolvedActiveTabId.value && "active"
-                  ].filter(Boolean).join(" "),
-                  onClick: () => selectTab(tab.id),
-                  onDblclick: () => startRename(tab.id),
-                  onContextmenu: (e) => {
+                  key: `divider-${pane.id}`,
+                  class: "cli-panel-pane-divider",
+                  onMousedown: (e) => {
                     e.preventDefault();
-                    e.stopPropagation();
-                    contextMenu.value = {
-                      visible: true,
-                      x: e.clientX,
-                      y: e.clientY,
-                      tabId: tab.id
-                    };
+                    controller.startPaneResize(tab.id, i - 1, e.clientX, panesContainerWidth(e.target));
                   }
                 },
-                tab.isEditing ? [
-                  h2("input", {
-                    class: "cli-panel-tab-rename-input",
-                    type: "text",
-                    value: tab.title,
-                    onKeydown: (e) => {
-                      if (e.key === "Enter")
-                        commitRename(
-                          tab.id,
-                          e.target.value
-                        );
-                      else if (e.key === "Escape") {
-                        tab.isEditing = false;
-                      }
-                    },
-                    onBlur: (e) => commitRename(
-                      tab.id,
-                      e.target.value
-                    ),
-                    onClick: (e) => e.stopPropagation(),
-                    onDblclick: (e) => e.stopPropagation()
-                  })
-                ] : [
-                  h2("span", { class: ["cli-panel-tab-dot", (() => {
-                    if (tab.id !== resolvedActiveTabId.value) return "dot-idle";
-                    if (statusExecutionState.value === "running") return "dot-running";
-                    if (statusLastCommand.value && !statusLastCommand.value.success) return "dot-error";
-                    return "dot-idle";
-                  })()].join(" ") }),
-                  h2(
-                    "span",
-                    {
-                      class: "cli-panel-tab-title"
-                    },
-                    tab.title
-                  ),
-                  h2(
+                [h2("div", { class: "cli-panel-pane-divider-grip" })]
+              ) : null,
+              h2(
+                "div",
+                {
+                  key: pane.id,
+                  class: paneClass(s, tab.id, pane.id),
+                  style: paneStyle(pane.widthPercent),
+                  onClick: () => controller.activatePane(tab.id, pane.id)
+                },
+                [
+                  tab.panes.length > 1 ? h2(
                     "button",
                     {
-                      class: "cli-panel-tab-close-btn",
-                      title: "Close tab",
+                      class: "cli-panel-pane-close-btn",
+                      title: PANEL_LABELS.closePane,
                       onClick: (e) => {
                         e.stopPropagation();
-                        closeTab(
-                          tab.id
-                        );
+                        controller.closePane(pane.id);
                       }
                     },
-                    "\xD7"
-                  )
+                    CLOSE_GLYPH
+                  ) : null,
+                  h2(Cli, {
+                    options: mergedOptions.value,
+                    modules: hostConfig.value.modules,
+                    processors: hostConfig.value.processors,
+                    services: hostConfig.value.services,
+                    snapshot: pane.snapshot,
+                    style: { height: "100%" },
+                    onReady: (engine) => controller.registerEngine(tab.id, pane.id, engine)
+                  })
                 ]
               )
-            )
-          ),
-          h2(
-            "button",
-            {
-              class: "cli-panel-add-tab",
-              title: "New terminal",
-              onClick: () => addTab()
-            },
-            "+"
+            ])
           )
-        ]),
-        // Terminal instances
+        ])
+      )
+    );
+    const renderContextMenu = (s) => h2(
+      "div",
+      { class: "cli-panel-context-menu", style: contextMenuStyle(s), onClick: stop },
+      contextMenuItems(s).flatMap((item) => [
+        item.separatorBefore ? h2("div", { class: "cli-panel-context-menu-separator" }) : null,
         h2(
-          "div",
-          { class: "cli-panel-instances" },
-          tabs.value.map(
-            (tab) => h2(
-              "div",
-              {
-                key: tab.id,
-                class: "cli-panel-instance",
-                style: {
-                  display: tab.id === resolvedActiveTabId.value ? void 0 : "none"
-                }
-              },
-              [
-                h2(
-                  "div",
-                  {
-                    class: [
-                      "cli-panel-panes-container",
-                      paneResizing.value && "resizing"
-                    ].filter(Boolean).join(" ")
-                  },
-                  tab.panes.flatMap((pane, i) => {
-                    const nodes = [];
-                    if (i > 0) {
-                      nodes.push(
-                        h2(
-                          "div",
-                          {
-                            class: "cli-panel-pane-divider",
-                            onMousedown: (e) => onPaneResizeStart(
-                              e,
-                              tab.id,
-                              i - 1
-                            )
-                          },
-                          [
-                            h2("div", {
-                              class: "cli-panel-pane-divider-grip"
-                            })
-                          ]
-                        )
-                      );
-                    }
-                    nodes.push(
-                      h2(
-                        "div",
-                        {
-                          class: [
-                            "cli-panel-pane",
-                            pane.id === activePaneId.value && tab.id === resolvedActiveTabId.value && "active-pane"
-                          ].filter(
-                            Boolean
-                          ).join(" "),
-                          style: {
-                            flex: `${pane.widthPercent} 1 0`
-                          },
-                          onClick: () => {
-                            activePaneId.value = pane.id;
-                            updateActiveTabId(tab.id);
-                          }
-                        },
-                        [
-                          tab.panes.length > 1 ? h2(
-                            "button",
-                            {
-                              class: "cli-panel-pane-close-btn",
-                              title: "Close pane",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                closePane(
-                                  pane.id
-                                );
-                              }
-                            },
-                            "\xD7"
-                          ) : null,
-                          h2(Cli, {
-                            options: mergedOptions.value,
-                            modules: mergedModules.value,
-                            processors: mergedProcessors.value,
-                            services: mergedServices.value,
-                            snapshot: pane.snapshot,
-                            style: {
-                              height: "100%"
-                            },
-                            onReady: (engine) => {
-                              engineMap.set(pane.id, engine);
-                            }
-                          })
-                        ]
-                      )
-                    );
-                    return nodes;
-                  })
-                )
-              ]
-            )
-          )
-        )
-      ]) : null;
-      const contextMenuEl = contextMenu.value.visible ? h2(
-        "div",
-        {
-          class: "cli-panel-context-menu",
-          style: {
-            left: `${contextMenu.value.x}px`,
-            top: `${contextMenu.value.y}px`
+          "button",
+          {
+            class: joinClasses("cli-panel-context-menu-item", item.destructive && "destructive"),
+            disabled: item.disabled,
+            onClick: () => runContextMenuAction(controller, item.action)
           },
-          onClick: (e) => e.stopPropagation()
-        },
-        [
-          h2(
-            "button",
-            {
-              class: "cli-panel-context-menu-item",
-              onClick: () => {
-                closeContextMenu();
-                startRename(contextMenu.value.tabId);
-              }
-            },
-            "Rename"
-          ),
-          h2(
-            "button",
-            {
-              class: "cli-panel-context-menu-item",
-              onClick: () => {
-                const tab = tabs.value.find(
-                  (t) => t.id === contextMenu.value.tabId
-                );
-                closeContextMenu();
-                if (!tab) return;
-                const sourceEngine = engineMap.get(tab.panes[0]?.id);
-                const snapshot = sourceEngine?.snapshot();
-                const paneId = nextPaneId++;
-                const tabId = nextTabId++;
-                const idx = tabs.value.indexOf(tab);
-                tabs.value.splice(idx + 1, 0, {
-                  id: tabId,
-                  title: `${tab.title} (copy)`,
-                  isEditing: false,
-                  panes: [
-                    { id: paneId, widthPercent: 100, snapshot }
-                  ]
-                });
-                updateActiveTabId(tabId);
-                activePaneId.value = paneId;
-              }
-            },
-            "Duplicate"
-          ),
-          h2(
-            "button",
-            {
-              class: "cli-panel-context-menu-item",
-              onClick: () => {
-                closeContextMenu();
-                splitPane(contextMenu.value.tabId);
-              }
-            },
-            "Split Right"
-          ),
-          h2("div", {
-            class: "cli-panel-context-menu-separator"
-          }),
-          h2(
-            "button",
-            {
-              class: "cli-panel-context-menu-item",
-              onClick: () => {
-                closeContextMenu();
-                closeTab(contextMenu.value.tabId);
-              }
-            },
-            "Close"
-          ),
-          h2(
-            "button",
-            {
-              class: "cli-panel-context-menu-item",
-              disabled: tabs.value.length <= 1,
-              onClick: () => {
-                const id = contextMenu.value.tabId;
-                closeContextMenu();
-                tabs.value = tabs.value.filter(
-                  (t) => t.id === id
-                );
-                updateActiveTabId(id);
-              }
-            },
-            "Close Others"
-          ),
-          h2(
-            "button",
-            {
-              class: "cli-panel-context-menu-item",
-              onClick: () => {
-                const id = contextMenu.value.tabId;
-                closeContextMenu();
-                const idx = tabs.value.findIndex(
-                  (t) => t.id === id
-                );
-                if (idx !== -1)
-                  tabs.value = tabs.value.slice(
-                    0,
-                    idx + 1
-                  );
-              }
-            },
-            "Close to the Right"
-          ),
-          h2("div", {
-            class: "cli-panel-context-menu-separator"
-          }),
-          h2(
-            "button",
-            {
-              class: "cli-panel-context-menu-item destructive",
-              onClick: () => {
-                closeContextMenu();
-                tabs.value = [];
-                initialized.value = false;
-                updateCollapsed(true);
-              }
-            },
-            "Close All"
-          )
-        ]
-      ) : null;
-      const hideTabEl = resolvedHidden.value ? h2("button", {
-        class: "cli-panel-hide-tab",
-        "data-position": resolvedPosition.value,
-        "data-hide-align": hideAlignment.value,
-        style: themeStyles.value,
-        title: "Show CLI",
-        onClick: handleUnhide
-      }, [
-        h2("svg", { class: "cli-panel-hide-tab-icon", ...svgAttrs, width: "16", height: "16", "stroke-width": "2" }, [
-          h2("polyline", { points: "4 17 10 11 4 5" }),
-          h2("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
-        ]),
-        h2("span", { class: "cli-panel-hide-tab-label" }, "CLI"),
-        hideTabChevron(resolvedPosition.value)
-      ]) : null;
-      const servicesDropdownEl = servicesDropdownOpen.value && statusServiceCount.value.total > 0 ? h2("div", {
-        class: "cli-panel-services-dropdown",
-        style: (() => {
-          const rect = servicesDropdownTriggerRect.value;
-          if (!rect) return {};
-          const base = { position: "fixed", zIndex: 1100 };
-          switch (resolvedPosition.value) {
-            case "top":
-              return { ...base, top: `${rect.bottom + 4}px`, left: `${rect.left}px` };
-            case "left":
-              return { ...base, top: `${rect.top}px`, left: `${rect.right + 4}px` };
-            case "right":
-              return { ...base, top: `${rect.top}px`, right: `${window.innerWidth - rect.left + 4}px` };
-            default:
-              return { ...base, bottom: `${window.innerHeight - rect.top + 4}px`, left: `${rect.left}px` };
-          }
-        })(),
-        onClick: (e) => e.stopPropagation()
-      }, [
-        h2("div", { class: "cli-panel-services-dropdown-header" }, "Background Services"),
-        h2(
-          "div",
-          { class: "cli-panel-services-dropdown-list" },
-          statusServiceDetails.value.map(
-            (svc, i) => h2("div", { key: i, class: "cli-panel-services-dropdown-item" }, [
-              h2("span", { class: ["cli-panel-svc-dot", svc.status === "running" ? "svc-running" : "svc-stopped"].join(" ") }),
-              h2("div", { class: "cli-panel-svc-info" }, [
-                h2("span", { class: "cli-panel-svc-name" }, svc.name),
-                svc.description ? h2("span", { class: "cli-panel-svc-desc" }, svc.description) : null
-              ].filter(Boolean)),
-              h2("span", { class: "cli-panel-svc-status" }, svc.status)
-            ])
-          )
-        ),
-        statusServiceDetails.value.length === 0 ? h2("div", { class: "cli-panel-services-dropdown-empty" }, "No services registered") : null
-      ].filter(Boolean)) : null;
-      const serversDropdownEl = serversDropdownOpen.value && statusServerState.value !== "none" ? h2("div", {
-        class: "cli-panel-services-dropdown",
-        style: (() => {
-          const rect = serversDropdownTriggerRect.value;
-          if (!rect) return {};
-          const base = { position: "fixed", zIndex: 1100 };
-          switch (resolvedPosition.value) {
-            case "top":
-              return { ...base, top: `${rect.bottom + 4}px`, left: `${rect.left}px` };
-            case "left":
-              return { ...base, top: `${rect.top}px`, left: `${rect.right + 4}px` };
-            case "right":
-              return { ...base, top: `${rect.top}px`, right: `${window.innerWidth - rect.left + 4}px` };
-            default:
-              return { ...base, bottom: `${window.innerHeight - rect.top + 4}px`, left: `${rect.left}px` };
-          }
-        })(),
-        onClick: (e) => e.stopPropagation()
-      }, [
-        h2("div", { class: "cli-panel-services-dropdown-header" }, "Server Connections"),
+          item.label
+        )
+      ])
+    );
+    const renderStatusDropdown = (s) => {
+      const dropdown = openStatusDropdown(s);
+      if (!dropdown) return null;
+      return h2("div", { class: "cli-panel-services-dropdown", style: dropdown.style, onClick: stop }, [
+        h2("div", { class: "cli-panel-services-dropdown-header" }, dropdown.header),
         h2(
           "div",
           { class: "cli-panel-services-dropdown-list" },
-          statusServerDetails.value.map(
-            (srv, i) => h2("div", { key: i, class: "cli-panel-services-dropdown-item" }, [
-              h2("span", { class: ["cli-panel-svc-dot", srv.connected ? "svc-running" : "svc-stopped"].join(" ") }),
+          dropdown.rows.map(
+            (row) => h2("div", { key: row.key, class: "cli-panel-services-dropdown-item" }, [
+              h2("span", { class: row.dotClass }),
               h2("div", { class: "cli-panel-svc-info" }, [
-                h2("span", { class: "cli-panel-svc-name" }, srv.name),
-                srv.url ? h2("span", { class: "cli-panel-svc-desc" }, srv.url) : null
-              ].filter(Boolean)),
-              h2("div", { class: "cli-panel-srv-meta" }, [
-                h2("span", { class: "cli-panel-svc-status" }, srv.connected ? "connected" : "disconnected"),
-                srv.apiVersion ? h2("span", { class: "cli-panel-svc-desc" }, `v${srv.apiVersion}`) : null,
-                srv.commandCount ? h2("span", { class: "cli-panel-svc-desc" }, `${srv.commandCount} cmds`) : null
-              ].filter(Boolean))
+                h2("span", { class: "cli-panel-svc-name" }, row.name),
+                row.description ? h2("span", { class: "cli-panel-svc-desc" }, row.description) : null
+              ]),
+              dropdown.kind === "servers" ? h2("div", { class: "cli-panel-srv-meta" }, [
+                h2("span", { class: "cli-panel-svc-status" }, row.status),
+                ...row.meta.map((m) => h2("span", { key: m, class: "cli-panel-svc-desc" }, m))
+              ]) : h2("span", { class: "cli-panel-svc-status" }, row.status)
             ])
           )
         ),
-        statusServerDetails.value.length === 0 ? h2("div", { class: "cli-panel-services-dropdown-empty" }, "No servers configured") : null
-      ].filter(Boolean)) : null;
-      return h2("div", {}, [
-        hideTabEl,
+        dropdown.rows.length === 0 ? h2("div", { class: "cli-panel-services-dropdown-empty" }, dropdown.emptyText) : null
+      ]);
+    };
+    return () => {
+      const s = state.value;
+      if (!s.visible) return null;
+      return h2(Fragment, [
+        s.hidden ? h2(
+          "button",
+          {
+            class: "cli-panel-hide-tab",
+            "data-position": s.position,
+            "data-hide-align": s.hideAlignment,
+            style: s.themeStyles,
+            title: PANEL_LABELS.showCli,
+            onClick: () => controller.unhide()
+          },
+          [
+            icon(HIDE_TAB_TERMINAL_ICON, "cli-panel-hide-tab-icon"),
+            h2("span", { class: "cli-panel-hide-tab-label" }, PANEL_LABELS.title),
+            icon(hideTabChevronIcon(s.position), "cli-panel-hide-tab-arrow")
+          ]
+        ) : null,
         h2(
           "div",
           {
-            class: wrapperClass,
-            style: wrapperStyle,
-            "data-position": resolvedPosition.value,
-            "data-resizable": String(resizable.value),
-            "data-closable": String(closable.value),
-            "data-hideable": String(hideable.value)
+            ref: root,
+            class: panelWrapperClass(s, props.class),
+            style: { ...panelWrapperStyle(s), ...props.style },
+            "data-position": s.position,
+            "data-resizable": String(s.resizable),
+            "data-closable": String(s.closable),
+            "data-hideable": String(s.hideable)
           },
-          [headerEl, contentEl]
+          [
+            renderHeader(s),
+            s.initialized ? h2("div", { class: "cli-panel-content", style: s.collapsed ? { display: "none" } : void 0 }, [
+              renderTabs(s),
+              renderInstances(s)
+            ]) : null
+          ]
         ),
-        contextMenuEl,
-        servicesDropdownEl,
-        serversDropdownEl
+        s.contextMenu.visible ? renderContextMenu(s) : null,
+        renderStatusDropdown(s)
       ]);
     };
   }
 });
 
 // src/CliProvider.ts
-import { defineComponent as defineComponent4, ref as ref4, h as h3, provide as provide2 } from "vue";
+import { defineComponent as defineComponent4, ref as ref2, h as h3, provide as provide2 } from "vue";
 
 // src/useCliEngine.ts
-import { onMounted as onMounted3, onBeforeUnmount as onBeforeUnmount3, shallowRef } from "vue";
-import { CliEngine as CliEngine2 } from "@qodalis/cli";
+import { onMounted as onMounted3, onBeforeUnmount as onBeforeUnmount3, shallowRef as shallowRef2 } from "vue";
+import { createCliEngine as createCliEngine2 } from "@qodalis/cli";
 function useCliEngine(containerRef, config) {
-  const engine = shallowRef(null);
+  const engine = shallowRef2(null);
   onMounted3(async () => {
     if (!containerRef.value) return;
-    const e = new CliEngine2(containerRef.value, config?.options);
-    e.registerService("cli-framework", "Vue");
-    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 = createCliEngine2(containerRef.value, { ...config, framework: "Vue" });
     await e.start();
     engine.value = e;
   });
@@ -1511,7 +612,7 @@ var CliProvider = defineComponent4({
   },
   emits: ["ready"],
   setup(props, { slots, emit }) {
-    const containerRef = ref4(null);
+    const containerRef = ref2(null);
     const engine = useCliEngine(containerRef, {
       modules: props.modules,
       processors: props.processors,
@@ -1542,12 +643,12 @@ function useCli() {
 }
 
 // src/index.ts
-import { CliEngine as CliEngine3 } from "@qodalis/cli";
+import { CliEngine as CliEngine4 } from "@qodalis/cli";
 export {
   Cli,
   CliConfigKey,
   CliConfigProvider,
-  CliEngine3 as CliEngine,
+  CliEngine4 as CliEngine,
   CliInjectionKey,
   CliPanel,
   CliProvider,