@qodalis/vue-cli 2.0.0-beta.11 → 2.0.0-beta.13

package/dist/index.js

@@ -304,7 +304,7 @@ var CliPanel = (0, import_vue3.defineComponent)({
   ],
   setup(props, { expose, emit }) {
     const config = (0, import_vue3.inject)(CliConfigKey, null);
-    const mergedOptions = (0, import_vue3.computed)(() => props.options ?? config?.options);
+    const mergedOptions = (0, import_vue3.computed)(() => props.options ? { ...config?.options, ...props.options } : config?.options);
     const mergedModules = (0, import_vue3.computed)(() => props.modules ?? config?.modules);
     const mergedProcessors = (0, import_vue3.computed)(() => props.processors ?? config?.processors);
     const mergedServices = (0, import_vue3.computed)(() => props.services ?? config?.services);
@@ -386,6 +386,107 @@ var CliPanel = (0, import_vue3.defineComponent)({
     };
     const panelResizing = (0, import_vue3.ref)(false);
     let panelResizeState = { startY: 0, startHeight: 0, startX: 0, startWidth: 0 };
+    const statusExecutionState = (0, import_vue3.ref)("idle");
+    const statusLastCommand = (0, import_vue3.ref)(null);
+    const statusServiceCount = (0, import_vue3.ref)({ running: 0, total: 0 });
+    const statusServiceDetails = (0, import_vue3.ref)([]);
+    const statusServerState = (0, import_vue3.ref)("none");
+    const statusServerDetails = (0, import_vue3.ref)([]);
+    const statusUptime = (0, import_vue3.ref)(0);
+    const notification = (0, import_vue3.ref)(null);
+    const servicesDropdownOpen = (0, import_vue3.ref)(false);
+    const serversDropdownOpen = (0, import_vue3.ref)(false);
+    const servicesDropdownTriggerRect = (0, import_vue3.ref)(null);
+    const serversDropdownTriggerRect = (0, import_vue3.ref)(null);
+    const formattedUptime = (0, import_vue3.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 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;
+      }
+    }
+    (0, import_vue3.watch)(initialized, (val) => {
+      if (val) startStatusPolling();
+      else stopStatusPolling();
+    });
     function addTab(title) {
       const tabId = nextTabId++;
       const paneId = nextPaneId++;
@@ -462,6 +563,10 @@ var CliPanel = (0, import_vue3.defineComponent)({
       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 };
       });
@@ -604,6 +709,7 @@ var CliPanel = (0, import_vue3.defineComponent)({
     (0, import_vue3.onBeforeUnmount)(() => {
       document.removeEventListener("mousemove", onPaneResizeMove);
       document.removeEventListener("mouseup", onPaneResizeEnd);
+      stopStatusPolling();
     });
     function toggleMaximize() {
       if (!resolvedMaximized.value) {
@@ -639,6 +745,8 @@ var CliPanel = (0, import_vue3.defineComponent)({
     const positionDropdownOpen = (0, import_vue3.ref)(false);
     function closePositionDropdown() {
       positionDropdownOpen.value = false;
+      servicesDropdownOpen.value = false;
+      serversDropdownOpen.value = false;
     }
     function togglePositionDropdown(e) {
       e.stopPropagation();
@@ -765,6 +873,105 @@ var CliPanel = (0, import_vue3.defineComponent)({
             ]),
             "CLI"
           ]),
+          // Status indicators (bottom/top only)
+          resolvedPosition.value === "bottom" || resolvedPosition.value === "top" ? (0, import_vue3.h)("div", { class: "cli-panel-status-indicators" }, [
+            // Execution state
+            (0, import_vue3.h)("span", { class: ["cli-panel-status-item", statusExecutionState.value === "running" ? "status-running" : ""].filter(Boolean).join(" ") }, [
+              (0, import_vue3.h)("span", { class: ["cli-panel-status-dot", statusExecutionState.value === "running" ? "dot-running" : "dot-idle"].join(" ") }),
+              (0, import_vue3.h)("span", { class: "cli-panel-status-label" }, statusExecutionState.value)
+            ]),
+            // Background services
+            statusServiceCount.value.total > 0 ? (0, import_vue3.h)("span", {
+              class: "cli-panel-status-item status-clickable",
+              onClick: (e) => {
+                e.stopPropagation();
+                servicesDropdownTriggerRect.value = e.currentTarget.getBoundingClientRect();
+                servicesDropdownOpen.value = !servicesDropdownOpen.value;
+                serversDropdownOpen.value = false;
+              }
+            }, [
+              (0, import_vue3.h)("span", { class: "cli-panel-status-icon", innerHTML: "&#9881;" }),
+              (0, import_vue3.h)("span", { class: "cli-panel-status-label" }, `${statusServiceCount.value.running}/${statusServiceCount.value.total} services`)
+            ]) : null,
+            // Last command
+            statusLastCommand.value ? (0, import_vue3.h)("span", { class: "cli-panel-status-item" }, [
+              (0, import_vue3.h)("span", { class: ["cli-panel-status-icon", statusLastCommand.value.success ? "status-success" : "status-error"].join(" "), innerHTML: statusLastCommand.value.success ? "&#10003;" : "&#10005;" }),
+              (0, import_vue3.h)("span", { class: "cli-panel-status-label" }, statusLastCommand.value.name)
+            ]) : null,
+            // Server connection
+            statusServerState.value !== "none" ? (0, import_vue3.h)("span", {
+              class: "cli-panel-status-item status-clickable",
+              onClick: (e) => {
+                e.stopPropagation();
+                serversDropdownTriggerRect.value = e.currentTarget.getBoundingClientRect();
+                serversDropdownOpen.value = !serversDropdownOpen.value;
+                servicesDropdownOpen.value = false;
+              }
+            }, [
+              (0, import_vue3.h)("span", { class: ["cli-panel-status-dot", statusServerState.value === "connected" ? "dot-idle" : "dot-error"].join(" ") }),
+              (0, import_vue3.h)("span", { class: "cli-panel-status-label" }, `${statusServerDetails.value.filter((s) => s.connected).length}/${statusServerDetails.value.length} servers`)
+            ]) : null,
+            // Uptime
+            statusUptime.value > 0 ? (0, import_vue3.h)("span", { class: "cli-panel-status-item status-muted" }, [
+              (0, import_vue3.h)("span", { class: "cli-panel-status-icon", innerHTML: "&uarr;" }),
+              (0, import_vue3.h)("span", { class: "cli-panel-status-label" }, formattedUptime.value)
+            ]) : null,
+            // Custom notification
+            notification.value ? (0, import_vue3.h)("span", { class: `cli-panel-status-item status-text level-${notification.value.level}` }, [
+              (0, import_vue3.h)("span", { class: "cli-panel-status-label" }, notification.value.message)
+            ]) : null
+          ].filter(Boolean)) : null,
+          // Compact status indicators (left/right positions — CSS controls visibility)
+          (0, import_vue3.h)("div", { class: "cli-panel-status-indicators-compact" }, [
+            // Execution state
+            (0, import_vue3.h)("span", { class: "cli-panel-status-compact-item", title: statusExecutionState.value }, [
+              (0, import_vue3.h)("span", { class: ["cli-panel-status-dot", statusExecutionState.value === "running" ? "dot-running" : "dot-idle"].join(" ") })
+            ]),
+            // Background services
+            statusServiceCount.value.total > 0 ? (0, import_vue3.h)("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;
+              }
+            }, [
+              (0, import_vue3.h)("span", { class: "cli-panel-status-icon", innerHTML: "&#9881;" })
+            ]) : null,
+            // Last command
+            statusLastCommand.value ? (0, import_vue3.h)("span", {
+              class: "cli-panel-status-compact-item",
+              title: `${statusLastCommand.value.success ? "\u2713" : "\u2717"} ${statusLastCommand.value.name}`
+            }, [
+              (0, import_vue3.h)("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" ? (0, import_vue3.h)("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;
+              }
+            }, [
+              (0, import_vue3.h)("span", { class: ["cli-panel-status-dot", statusServerState.value === "connected" ? "dot-idle" : "dot-error"].join(" ") })
+            ]) : null,
+            // Uptime
+            statusUptime.value > 0 ? (0, import_vue3.h)("span", { class: "cli-panel-status-compact-item status-muted", title: formattedUptime.value }, [
+              (0, import_vue3.h)("span", { class: "cli-panel-status-icon", innerHTML: "&uarr;" })
+            ]) : null,
+            // Notification
+            notification.value ? (0, import_vue3.h)("span", { class: "cli-panel-status-compact-item", title: notification.value.message }, [
+              (0, import_vue3.h)("span", { class: `cli-panel-status-compact-dot level-${notification.value.level}` })
+            ]) : null
+          ].filter(Boolean)),
           (0, import_vue3.h)("div", { class: "cli-panel-action-buttons" }, [
             (0, import_vue3.h)("div", {
               class: "cli-panel-btn-position-wrapper",
@@ -823,7 +1030,8 @@ var CliPanel = (0, import_vue3.defineComponent)({
               [closeIcon()]
             ) : null
           ])
-        ])
+        ]),
+        (0, import_vue3.h)("div", { class: ["cli-panel-glow-line", statusExecutionState.value === "running" ? "glow-active" : ""].filter(Boolean).join(" ") })
       ]);
       const contentEl = initialized.value ? (0, import_vue3.h)("div", { class: "cli-panel-content", style: resolvedCollapsed.value ? { display: "none" } : void 0 }, [
         // Tab bar
@@ -876,6 +1084,12 @@ var CliPanel = (0, import_vue3.defineComponent)({
                     onDblclick: (e) => e.stopPropagation()
                   })
                 ] : [
+                  (0, import_vue3.h)("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(" ") }),
                   (0, import_vue3.h)(
                     "span",
                     {
@@ -906,7 +1120,7 @@ var CliPanel = (0, import_vue3.defineComponent)({
             {
               class: "cli-panel-add-tab",
               title: "New terminal",
-              onClick: addTab
+              onClick: () => addTab()
             },
             "+"
           )
@@ -1157,6 +1371,82 @@ var CliPanel = (0, import_vue3.defineComponent)({
         (0, import_vue3.h)("span", { class: "cli-panel-hide-tab-label" }, "CLI"),
         hideTabChevron(resolvedPosition.value)
       ]) : null;
+      const servicesDropdownEl = servicesDropdownOpen.value && statusServiceCount.value.total > 0 ? (0, import_vue3.h)("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()
+      }, [
+        (0, import_vue3.h)("div", { class: "cli-panel-services-dropdown-header" }, "Background Services"),
+        (0, import_vue3.h)(
+          "div",
+          { class: "cli-panel-services-dropdown-list" },
+          statusServiceDetails.value.map(
+            (svc, i) => (0, import_vue3.h)("div", { key: i, class: "cli-panel-services-dropdown-item" }, [
+              (0, import_vue3.h)("span", { class: ["cli-panel-svc-dot", svc.status === "running" ? "svc-running" : "svc-stopped"].join(" ") }),
+              (0, import_vue3.h)("div", { class: "cli-panel-svc-info" }, [
+                (0, import_vue3.h)("span", { class: "cli-panel-svc-name" }, svc.name),
+                svc.description ? (0, import_vue3.h)("span", { class: "cli-panel-svc-desc" }, svc.description) : null
+              ].filter(Boolean)),
+              (0, import_vue3.h)("span", { class: "cli-panel-svc-status" }, svc.status)
+            ])
+          )
+        ),
+        statusServiceDetails.value.length === 0 ? (0, import_vue3.h)("div", { class: "cli-panel-services-dropdown-empty" }, "No services registered") : null
+      ].filter(Boolean)) : null;
+      const serversDropdownEl = serversDropdownOpen.value && statusServerState.value !== "none" ? (0, import_vue3.h)("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()
+      }, [
+        (0, import_vue3.h)("div", { class: "cli-panel-services-dropdown-header" }, "Server Connections"),
+        (0, import_vue3.h)(
+          "div",
+          { class: "cli-panel-services-dropdown-list" },
+          statusServerDetails.value.map(
+            (srv, i) => (0, import_vue3.h)("div", { key: i, class: "cli-panel-services-dropdown-item" }, [
+              (0, import_vue3.h)("span", { class: ["cli-panel-svc-dot", srv.connected ? "svc-running" : "svc-stopped"].join(" ") }),
+              (0, import_vue3.h)("div", { class: "cli-panel-svc-info" }, [
+                (0, import_vue3.h)("span", { class: "cli-panel-svc-name" }, srv.name),
+                srv.url ? (0, import_vue3.h)("span", { class: "cli-panel-svc-desc" }, srv.url) : null
+              ].filter(Boolean)),
+              (0, import_vue3.h)("div", { class: "cli-panel-srv-meta" }, [
+                (0, import_vue3.h)("span", { class: "cli-panel-svc-status" }, srv.connected ? "connected" : "disconnected"),
+                srv.apiVersion ? (0, import_vue3.h)("span", { class: "cli-panel-svc-desc" }, `v${srv.apiVersion}`) : null,
+                srv.commandCount ? (0, import_vue3.h)("span", { class: "cli-panel-svc-desc" }, `${srv.commandCount} cmds`) : null
+              ].filter(Boolean))
+            ])
+          )
+        ),
+        statusServerDetails.value.length === 0 ? (0, import_vue3.h)("div", { class: "cli-panel-services-dropdown-empty" }, "No servers configured") : null
+      ].filter(Boolean)) : null;
       return (0, import_vue3.h)("div", {}, [
         hideTabEl,
         (0, import_vue3.h)(
@@ -1171,7 +1461,9 @@ var CliPanel = (0, import_vue3.defineComponent)({
           },
           [headerEl, contentEl]
         ),
-        contextMenuEl
+        contextMenuEl,
+        servicesDropdownEl,
+        serversDropdownEl
       ]);
     };
   }