@qodalis/vue-cli 2.0.0-beta.11 → 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
@@ -285,7 +286,7 @@ var CliPanel = defineComponent3({
   ],
   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);
@@ -367,6 +368,107 @@ var CliPanel = defineComponent3({
     };
     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 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 paneId = nextPaneId++;
@@ -443,6 +545,10 @@ var CliPanel = defineComponent3({
       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 };
       });
@@ -585,6 +691,7 @@ var CliPanel = defineComponent3({
     onBeforeUnmount2(() => {
       document.removeEventListener("mousemove", onPaneResizeMove);
       document.removeEventListener("mouseup", onPaneResizeEnd);
+      stopStatusPolling();
     });
     function toggleMaximize() {
       if (!resolvedMaximized.value) {
@@ -620,6 +727,8 @@ var CliPanel = defineComponent3({
     const positionDropdownOpen = ref2(false);
     function closePositionDropdown() {
       positionDropdownOpen.value = false;
+      servicesDropdownOpen.value = false;
+      serversDropdownOpen.value = false;
     }
     function togglePositionDropdown(e) {
       e.stopPropagation();
@@ -746,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",
@@ -804,7 +961,8 @@ 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: resolvedCollapsed.value ? { display: "none" } : void 0 }, [
         // Tab bar
@@ -857,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",
                     {
@@ -887,7 +1051,7 @@ var CliPanel = defineComponent3({
             {
               class: "cli-panel-add-tab",
               title: "New terminal",
-              onClick: addTab
+              onClick: () => addTab()
             },
             "+"
           )
@@ -1138,6 +1302,62 @@ var CliPanel = defineComponent3({
         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 {};
+          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(
@@ -1152,7 +1372,9 @@ var CliPanel = defineComponent3({
           },
           [headerEl, contentEl]
         ),
-        contextMenuEl
+        contextMenuEl,
+        servicesDropdownEl,
+        serversDropdownEl
       ]);
     };
   }