@qodalis/vue-cli 2.0.0-beta.10 → 2.0.0-beta.12

package/dist/index.mjs

@@ -129,6 +129,7 @@ import {
   ref as ref2,
   computed,
   inject as inject2,
+  watch,
   h as h2,
   onMounted as onMounted2,
   onBeforeUnmount as onBeforeUnmount2
@@ -256,38 +257,97 @@ var CliPanel = defineComponent3({
       type: Function,
       default: void 0
     },
+    collapsed: { type: Boolean, default: void 0 },
+    hidden: { type: Boolean, default: void 0 },
+    maximized: { type: Boolean, default: void 0 },
+    activeTabId: { type: Number, default: void 0 },
+    position: { type: String, default: void 0 },
+    height: { type: Number, default: void 0 },
+    width: { type: Number, default: void 0 },
     style: {
       type: Object,
       default: void 0
     },
     class: { type: String, default: void 0 }
   },
-  setup(props) {
+  emits: [
+    "update:collapsed",
+    "update:hidden",
+    "update:maximized",
+    "update:activeTabId",
+    "update:position",
+    "update:height",
+    "update:width",
+    "close",
+    "tab-added",
+    "tab-closed",
+    "pane-split",
+    "pane-closed"
+  ],
+  setup(props, { expose, emit }) {
     const config = inject2(CliConfigKey, null);
-    const mergedOptions = computed(() => props.options ?? config?.options);
+    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 collapsed = ref2(mergedOptions.value?.isCollapsed ?? true);
-    const maximized = ref2(false);
-    const panelHeight = ref2(600);
-    const panelWidth = ref2(400);
+    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 hidden = ref2(props.options?.isHidden ?? false);
+    const internalHidden = ref2(props.options?.isHidden ?? false);
     let preHideCollapsed = true;
-    const position = ref2(loadPanelPosition() ?? mergedOptions.value?.position ?? "bottom");
+    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(() => position.value === "left" || position.value === "right");
+    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 activeTabId = ref2(0);
     const activePaneId = ref2(0);
     let nextTabId = 1;
     let nextPaneId = 1;
@@ -308,19 +368,120 @@ var CliPanel = defineComponent3({
     };
     const panelResizing = ref2(false);
     let panelResizeState = { startY: 0, startHeight: 0, startX: 0, startWidth: 0 };
-    function addTab() {
-      const paneId = nextPaneId++;
+    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 statusText = 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`;
+    });
+    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 text = context.getStatusText?.();
+        statusText.value = text || 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 pane = { id: paneId, widthPercent: 100 };
-      const tab = {
+      const paneId = nextPaneId++;
+      tabs.value = [...tabs.value, {
         id: tabId,
-        title: `Terminal ${tabId}`,
+        title: title ?? `Terminal ${tabId}`,
         isEditing: false,
-        panes: [pane]
-      };
-      tabs.value.push(tab);
-      activeTabId.value = tabId;
+        panes: [{ id: paneId, widthPercent: 100 }]
+      }];
+      updateActiveTabId(tabId);
       activePaneId.value = paneId;
+      emit("tab-added", { tabId });
+      return tabId;
     }
     let themeObserver;
     function syncThemeFromEngine() {
@@ -348,8 +509,9 @@ var CliPanel = defineComponent3({
       document.removeEventListener("click", closePositionDropdown);
     });
     function toggle() {
-      collapsed.value = !collapsed.value;
-      if (!collapsed.value && !initialized.value) {
+      const newVal = !resolvedCollapsed.value;
+      updateCollapsed(newVal);
+      if (!newVal && !initialized.value) {
         initialized.value = true;
         addTab();
         setupThemeSync();
@@ -359,58 +521,65 @@ var CliPanel = defineComponent3({
       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;
-        collapsed.value = true;
+        updateCollapsed(true);
         return;
       }
-      if (activeTabId.value === id) {
+      if (resolvedActiveTabId.value === id) {
         const newIdx = Math.min(idx, tabs.value.length - 1);
         selectTab(tabs.value[newIdx].id);
       }
     }
     function selectTab(id) {
-      activeTabId.value = 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 splitRight(tabId) {
-      const tab = tabs.value.find(
-        (t) => t.id === (tabId ?? activeTabId.value)
-      );
-      if (!tab) return;
-      const idx = tab.panes.findIndex((p) => p.id === activePaneId.value);
-      const insertIdx = idx === -1 ? tab.panes.length : idx + 1;
-      const newPaneId = nextPaneId++;
-      tab.panes.splice(insertIdx, 0, { id: newPaneId, widthPercent: 0 });
-      const evenWidth = 100 / tab.panes.length;
-      tab.panes.forEach((p) => {
-        p.widthPercent = evenWidth;
+    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 };
       });
-      normalizePanes(tab.panes);
-      activePaneId.value = newPaneId;
+      activePaneId.value = paneId;
+      emit("pane-split", { paneId, tabId: targetTabId });
+      return paneId;
     }
-    function closePane(tabId, paneId) {
-      const tab = tabs.value.find((t) => t.id === tabId);
-      if (!tab) return;
-      if (tab.panes.length <= 1) {
-        closeTab(tabId);
+    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;
       }
-      const idx = tab.panes.findIndex((p) => p.id === paneId);
-      if (idx === -1) return;
-      tab.panes.splice(idx, 1);
-      const total = tab.panes.reduce((s, p) => s + p.widthPercent, 0);
-      if (total > 0)
-        tab.panes.forEach((p) => {
-          p.widthPercent = p.widthPercent / total * 100;
-        });
-      normalizePanes(tab.panes);
-      if (activePaneId.value === paneId) {
-        activePaneId.value = tab.panes[Math.min(idx, tab.panes.length - 1)].id;
-      }
+    }
+    function renameTab(tabId, title) {
+      tabs.value = tabs.value.map((t) => t.id === tabId ? { ...t, title } : t);
     }
     function startRename(tabId) {
       tabs.value.forEach((t) => {
@@ -438,27 +607,27 @@ var CliPanel = defineComponent3({
     function onPanelResizeStart(e) {
       if (!resizable.value) return;
       e.preventDefault();
-      if (collapsed.value) toggle();
+      if (resolvedCollapsed.value) toggle();
       panelResizing.value = true;
       panelResizeState = {
         startY: e.clientY,
-        startHeight: panelHeight.value,
+        startHeight: resolvedHeight.value,
         startX: e.clientX,
-        startWidth: panelWidth.value
+        startWidth: resolvedWidth.value
       };
     }
     function onPanelResizeMove(e) {
       if (!panelResizing.value) return;
       if (isHorizontal.value) {
-        const deltaX = position.value === "left" ? e.clientX - panelResizeState.startX : panelResizeState.startX - e.clientX;
+        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;
-        panelWidth.value = next;
+        updateWidth(next);
       } else {
-        const deltaY = position.value === "top" ? e.clientY - panelResizeState.startY : panelResizeState.startY - e.clientY;
+        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;
-        panelHeight.value = next;
+        updateHeight(next);
       }
     }
     function onPanelResizeEnd() {
@@ -522,40 +691,44 @@ var CliPanel = defineComponent3({
     onBeforeUnmount2(() => {
       document.removeEventListener("mousemove", onPaneResizeMove);
       document.removeEventListener("mouseup", onPaneResizeEnd);
+      stopStatusPolling();
     });
     function toggleMaximize() {
-      if (!maximized.value) {
+      if (!resolvedMaximized.value) {
         if (isHorizontal.value) {
-          prevWidth.value = panelWidth.value;
-          panelWidth.value = window.innerWidth;
+          prevWidth.value = resolvedWidth.value;
+          updateWidth(window.innerWidth);
         } else {
-          prevHeight.value = panelHeight.value;
-          panelHeight.value = window.innerHeight;
+          prevHeight.value = resolvedHeight.value;
+          updateHeight(window.innerHeight);
         }
       } else {
         if (isHorizontal.value) {
-          panelWidth.value = prevWidth.value;
+          updateWidth(prevWidth.value);
         } else {
-          panelHeight.value = prevHeight.value;
+          updateHeight(prevHeight.value);
         }
       }
-      maximized.value = !maximized.value;
+      updateMaximized(!resolvedMaximized.value);
     }
     function handleClose() {
       visible.value = false;
+      emit("close");
       props.onClose?.();
     }
     function handleHide() {
-      preHideCollapsed = collapsed.value;
-      hidden.value = true;
+      preHideCollapsed = resolvedCollapsed.value;
+      updateHidden(true);
     }
     function handleUnhide() {
-      hidden.value = false;
-      collapsed.value = preHideCollapsed;
+      updateHidden(false);
+      updateCollapsed(preHideCollapsed);
     }
     const positionDropdownOpen = ref2(false);
     function closePositionDropdown() {
       positionDropdownOpen.value = false;
+      servicesDropdownOpen.value = false;
+      serversDropdownOpen.value = false;
     }
     function togglePositionDropdown(e) {
       e.stopPropagation();
@@ -563,21 +736,106 @@ var CliPanel = defineComponent3({
     }
     function selectPosition(pos) {
       positionDropdownOpen.value = false;
-      position.value = pos;
-      savePanelPosition(pos);
+      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",
-        collapsed.value && "collapsed",
-        maximized.value && "maximized",
+        resolvedCollapsed.value && "collapsed",
+        resolvedMaximized.value && "maximized",
         panelResizing.value && "resizing",
         props.class
       ].filter(Boolean).join(" ");
       const wrapperStyle = {
-        ...isHorizontal.value ? { width: `${panelWidth.value}px` } : { height: `${panelHeight.value}px` },
-        ...hidden.value ? { display: "none" } : {},
+        ...isHorizontal.value ? { width: `${resolvedWidth.value}px` } : { height: `${resolvedHeight.value}px` },
+        ...resolvedHidden.value ? { display: "none" } : {},
         ...themeStyles.value,
         ...props.style
       };
@@ -597,6 +855,54 @@ var CliPanel = defineComponent3({
             ]),
             "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 status text
+            statusText.value ? h2("span", { class: "cli-panel-status-item status-text" }, [
+              h2("span", { class: "cli-panel-status-label" }, statusText.value)
+            ]) : null
+          ].filter(Boolean)) : null,
           h2("div", { class: "cli-panel-action-buttons" }, [
             h2("div", {
               class: "cli-panel-btn-position-wrapper",
@@ -606,13 +912,13 @@ var CliPanel = defineComponent3({
                 class: "cli-panel-btn cli-panel-btn-position",
                 title: "Move panel",
                 onClick: togglePositionDropdown
-              }, [positionIcon(position.value)]),
+              }, [positionIcon(resolvedPosition.value)]),
               positionDropdownOpen.value ? h2(
                 "div",
                 { class: "cli-panel-position-dropdown" },
                 ["bottom", "top", "left", "right"].map(
                   (pos) => h2("button", {
-                    class: ["cli-panel-position-dropdown-item", position.value === pos ? "active" : ""].filter(Boolean).join(" "),
+                    class: ["cli-panel-position-dropdown-item", resolvedPosition.value === pos ? "active" : ""].filter(Boolean).join(" "),
                     onClick: () => selectPosition(pos)
                   }, [
                     positionIcon(pos, 16),
@@ -630,20 +936,20 @@ var CliPanel = defineComponent3({
               "button",
               {
                 class: "cli-panel-btn",
-                title: maximized.value ? "Restore" : "Maximize",
-                disabled: collapsed.value,
+                title: resolvedMaximized.value ? "Restore" : "Maximize",
+                disabled: resolvedCollapsed.value,
                 onClick: toggleMaximize
               },
-              [maximized.value ? restoreIcon() : maximizeIcon()]
+              [resolvedMaximized.value ? restoreIcon() : maximizeIcon()]
             ),
             h2(
               "button",
               {
                 class: "cli-panel-btn",
-                title: collapsed.value ? "Expand" : "Collapse",
+                title: resolvedCollapsed.value ? "Expand" : "Collapse",
                 onClick: toggle
               },
-              [collapseChevron(position.value, collapsed.value)]
+              [collapseChevron(resolvedPosition.value, resolvedCollapsed.value)]
             ),
             closable.value ? h2(
               "button",
@@ -655,9 +961,10 @@ var CliPanel = defineComponent3({
               [closeIcon()]
             ) : null
           ])
-        ])
+        ]),
+        h2("div", { class: ["cli-panel-glow-line", statusExecutionState.value === "running" ? "glow-active" : ""].filter(Boolean).join(" ") })
       ]);
-      const contentEl = initialized.value ? h2("div", { class: "cli-panel-content", style: collapsed.value ? { display: "none" } : void 0 }, [
+      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" }, [
           h2(
@@ -670,7 +977,7 @@ var CliPanel = defineComponent3({
                   key: tab.id,
                   class: [
                     "cli-panel-tab",
-                    tab.id === activeTabId.value && "active"
+                    tab.id === resolvedActiveTabId.value && "active"
                   ].filter(Boolean).join(" "),
                   onClick: () => selectTab(tab.id),
                   onDblclick: () => startRename(tab.id),
@@ -708,6 +1015,12 @@ var CliPanel = defineComponent3({
                     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",
                     {
@@ -738,7 +1051,7 @@ var CliPanel = defineComponent3({
             {
               class: "cli-panel-add-tab",
               title: "New terminal",
-              onClick: addTab
+              onClick: () => addTab()
             },
             "+"
           )
@@ -754,7 +1067,7 @@ var CliPanel = defineComponent3({
                 key: tab.id,
                 class: "cli-panel-instance",
                 style: {
-                  display: tab.id === activeTabId.value ? void 0 : "none"
+                  display: tab.id === resolvedActiveTabId.value ? void 0 : "none"
                 }
               },
               [
@@ -794,7 +1107,7 @@ var CliPanel = defineComponent3({
                         {
                           class: [
                             "cli-panel-pane",
-                            pane.id === activePaneId.value && tab.id === activeTabId.value && "active-pane"
+                            pane.id === activePaneId.value && tab.id === resolvedActiveTabId.value && "active-pane"
                           ].filter(
                             Boolean
                           ).join(" "),
@@ -803,7 +1116,7 @@ var CliPanel = defineComponent3({
                           },
                           onClick: () => {
                             activePaneId.value = pane.id;
-                            activeTabId.value = tab.id;
+                            updateActiveTabId(tab.id);
                           }
                         },
                         [
@@ -815,7 +1128,6 @@ var CliPanel = defineComponent3({
                               onClick: (e) => {
                                 e.stopPropagation();
                                 closePane(
-                                  tab.id,
                                   pane.id
                                 );
                               }
@@ -891,7 +1203,7 @@ var CliPanel = defineComponent3({
                     { id: paneId, widthPercent: 100, snapshot }
                   ]
                 });
-                activeTabId.value = tabId;
+                updateActiveTabId(tabId);
                 activePaneId.value = paneId;
               }
             },
@@ -903,7 +1215,7 @@ var CliPanel = defineComponent3({
               class: "cli-panel-context-menu-item",
               onClick: () => {
                 closeContextMenu();
-                splitRight(contextMenu.value.tabId);
+                splitPane(contextMenu.value.tabId);
               }
             },
             "Split Right"
@@ -933,7 +1245,7 @@ var CliPanel = defineComponent3({
                 tabs.value = tabs.value.filter(
                   (t) => t.id === id
                 );
-                activeTabId.value = id;
+                updateActiveTabId(id);
               }
             },
             "Close Others"
@@ -968,16 +1280,16 @@ var CliPanel = defineComponent3({
                 closeContextMenu();
                 tabs.value = [];
                 initialized.value = false;
-                collapsed.value = true;
+                updateCollapsed(true);
               }
             },
             "Close All"
           )
         ]
       ) : null;
-      const hideTabEl = hidden.value ? h2("button", {
+      const hideTabEl = resolvedHidden.value ? h2("button", {
         class: "cli-panel-hide-tab",
-        "data-position": position.value,
+        "data-position": resolvedPosition.value,
         "data-hide-align": hideAlignment.value,
         style: themeStyles.value,
         title: "Show CLI",
@@ -988,8 +1300,64 @@ var CliPanel = defineComponent3({
           h2("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
         ]),
         h2("span", { class: "cli-panel-hide-tab-label" }, "CLI"),
-        hideTabChevron(position.value)
+        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 {};
+          return resolvedPosition.value === "top" ? { position: "fixed", top: `${rect.bottom + 4}px`, left: `${rect.left}px`, zIndex: 1100 } : { position: "fixed", bottom: `${window.innerHeight - rect.top + 4}px`, left: `${rect.left}px`, zIndex: 1100 };
+        })(),
+        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 {};
+          return resolvedPosition.value === "top" ? { position: "fixed", top: `${rect.bottom + 4}px`, left: `${rect.left}px`, zIndex: 1100 } : { position: "fixed", bottom: `${window.innerHeight - rect.top + 4}px`, left: `${rect.left}px`, zIndex: 1100 };
+        })(),
+        onClick: (e) => e.stopPropagation()
+      }, [
+        h2("div", { class: "cli-panel-services-dropdown-header" }, "Server Connections"),
+        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(" ") }),
+              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))
+            ])
+          )
+        ),
+        statusServerDetails.value.length === 0 ? h2("div", { class: "cli-panel-services-dropdown-empty" }, "No servers configured") : null
+      ].filter(Boolean)) : null;
       return h2("div", {}, [
         hideTabEl,
         h2(
@@ -997,14 +1365,16 @@ var CliPanel = defineComponent3({
           {
             class: wrapperClass,
             style: wrapperStyle,
-            "data-position": position.value,
+            "data-position": resolvedPosition.value,
             "data-resizable": String(resizable.value),
             "data-closable": String(closable.value),
             "data-hideable": String(hideable.value)
           },
           [headerEl, contentEl]
         ),
-        contextMenuEl
+        contextMenuEl,
+        servicesDropdownEl,
+        serversDropdownEl
       ]);
     };
   }