@qodalis/react-cli 2.0.0-beta.11 → 2.0.0-beta.12

package/dist/index.mjs

@@ -207,7 +207,7 @@ var CliPanel = React3.forwardRef(
   function CliPanel2(props, ref) {
     const { options: optionsProp, modules: modulesProp, processors: processorsProp, services: servicesProp, onClose, style, className } = props;
     const config = useCliConfig();
-    const options = optionsProp ?? config.options;
+    const options = optionsProp ? { ...config.options, ...optionsProp } : config.options;
     const modules = modulesProp ?? config.modules;
     const processors = processorsProp ?? config.processors;
     const services = servicesProp ?? config.services;
@@ -282,6 +282,18 @@ var CliPanel = React3.forwardRef(
     const panelResizeRef = useRef3({ startY: 0, startHeight: 0, startX: 0, startWidth: 0 });
     const prevHeightRef = useRef3(600);
     const prevWidthRef = useRef3(400);
+    const [statusExecutionState, setStatusExecutionState] = useState2("idle");
+    const [statusLastCommand, setStatusLastCommand] = useState2(null);
+    const [statusServiceCount, setStatusServiceCount] = useState2({ running: 0, total: 0 });
+    const [statusServiceDetails, setStatusServiceDetails] = useState2([]);
+    const [statusServerState, setStatusServerState] = useState2("none");
+    const [statusServerDetails, setStatusServerDetails] = useState2([]);
+    const [statusUptime, setStatusUptime] = useState2(0);
+    const [statusText, setStatusText] = useState2(null);
+    const [servicesDropdownOpen, setServicesDropdownOpen] = useState2(false);
+    const [serversDropdownOpen, setServersDropdownOpen] = useState2(false);
+    const servicesDropdownRef = useRef3(null);
+    const serversDropdownRef = useRef3(null);
     const normalizePanes = useCallback((panes) => {
       const total = panes.reduce((s, p) => s + p.widthPercent, 0);
       if (total === 0) return;
@@ -364,6 +376,10 @@ var CliPanel = React3.forwardRef(
       setTabs((prev) => prev.map((t) => {
         if (t.id !== targetTabId) return t;
         const newPanes = [...t.panes.map((p) => ({ ...p })), { id: paneId, widthPercent: 0 }];
+        const evenWidth = 100 / newPanes.length;
+        newPanes.forEach((p) => {
+          p.widthPercent = evenWidth;
+        });
         normalizePanes(newPanes);
         return { ...t, panes: newPanes };
       }));
@@ -513,6 +529,81 @@ var CliPanel = React3.forwardRef(
       }, 200);
       return () => clearTimeout(timer);
     }, [syncTheme, initialized]);
+    useEffect3(() => {
+      if (!initialized) return;
+      const pollExec = setInterval(() => {
+        const tab = tabs.find((t) => t.id === activeTabIdRef.current);
+        if (!tab) return;
+        const engine = engineMapRef.current.get(tab.panes[0]?.id);
+        if (!engine) return;
+        const context = engine.getContext();
+        if (!context) return;
+        const running = !!context.isExecuting || !!context.contextProcessor;
+        setStatusExecutionState(running ? "running" : "idle");
+        const result = context.lastCommandResult;
+        setStatusLastCommand(result ? { name: result.command, success: result.success } : null);
+        const text = context.getStatusText?.();
+        setStatusText(text || null);
+      }, 300);
+      const pollGlobal = setInterval(() => {
+        const tab = tabs.find((t) => t.id === activeTabIdRef.current);
+        if (!tab) return;
+        const engine = engineMapRef.current.get(tab.panes[0]?.id);
+        if (!engine) return;
+        const context = engine.getContext();
+        if (!context) return;
+        try {
+          const services2 = context.backgroundServices?.list() ?? [];
+          setStatusServiceCount({ running: services2.filter((s) => s.status === "running").length, total: services2.length });
+          setStatusServiceDetails(services2.map((s) => ({ name: s.name, status: s.status, description: s.description })));
+        } catch {
+        }
+        try {
+          let serverManager;
+          try {
+            serverManager = context.services?.get?.("cli-server-manager");
+          } catch {
+          }
+          const details = [];
+          if (serverManager?.connections?.size > 0) {
+            let anyConnected = false;
+            for (const [name, conn] of serverManager.connections) {
+              if (conn.connected) anyConnected = true;
+              details.push({
+                name,
+                url: conn.config?.url ?? "",
+                connected: !!conn.connected,
+                apiVersion: conn.connected ? conn.apiVersion : void 0,
+                commandCount: conn.connected ? conn.commands?.length : void 0
+              });
+            }
+            setStatusServerState(anyConnected ? "connected" : "disconnected");
+          } else {
+            const configuredServers = engine.options?.servers;
+            if (Array.isArray(configuredServers) && configuredServers.length > 0) {
+              for (const srv of configuredServers) {
+                if (srv.enabled === false) continue;
+                details.push({
+                  name: srv.name,
+                  url: srv.url ?? "",
+                  connected: false
+                });
+              }
+              setStatusServerState("disconnected");
+            } else {
+              setStatusServerState("none");
+            }
+          }
+          setStatusServerDetails(details);
+        } catch {
+        }
+        setStatusUptime(engine.startedAt ? Date.now() - engine.startedAt : 0);
+      }, 2e3);
+      return () => {
+        clearInterval(pollExec);
+        clearInterval(pollGlobal);
+      };
+    }, [initialized, tabs]);
     const toggleMaximize = useCallback(() => {
       const nextMaximized = !maximized;
       if (nextMaximized) {
@@ -551,6 +642,15 @@ var CliPanel = React3.forwardRef(
       document.addEventListener("click", closePositionDropdown);
       return () => document.removeEventListener("click", closePositionDropdown);
     }, [positionDropdownOpen, closePositionDropdown]);
+    useEffect3(() => {
+      if (!servicesDropdownOpen && !serversDropdownOpen) return;
+      const handler = () => {
+        setServicesDropdownOpen(false);
+        setServersDropdownOpen(false);
+      };
+      document.addEventListener("click", handler);
+      return () => document.removeEventListener("click", handler);
+    }, [servicesDropdownOpen, serversDropdownOpen]);
     const handlePositionButtonClick = useCallback((e) => {
       e.stopPropagation();
       setPositionDropdownOpen((prev) => !prev);
@@ -661,6 +761,12 @@ var CliPanel = React3.forwardRef(
       getEngine,
       getState
     ]);
+    const formattedUptime = (() => {
+      const mins = Math.floor(statusUptime / 6e4);
+      if (mins < 60) return `${mins}m`;
+      const hrs = Math.floor(mins / 60);
+      return `${hrs}h${mins % 60}m`;
+    })();
     if (!visible) return null;
     const wrapperStyle = {
       ...isHorizontal ? { width: `${panelWidth}px` } : { height: `${panelHeight}px` },
@@ -706,6 +812,63 @@ var CliPanel = React3.forwardRef(
                   /* @__PURE__ */ jsx3("span", { className: "cli-panel-title-icon", children: /* @__PURE__ */ jsx3(TerminalIcon, {}) }),
                   "CLI"
                 ] }),
+                (position === "bottom" || position === "top") && /* @__PURE__ */ jsxs("div", { className: "cli-panel-status-indicators", children: [
+                  /* @__PURE__ */ jsxs("span", { className: `cli-panel-status-item${statusExecutionState === "running" ? " status-running" : ""}`, children: [
+                    /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-dot ${statusExecutionState === "running" ? "dot-running" : "dot-idle"}` }),
+                    /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-label", children: statusExecutionState })
+                  ] }),
+                  statusServiceCount.total > 0 && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      ref: servicesDropdownRef,
+                      className: "cli-panel-status-item status-clickable",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setServicesDropdownOpen((prev) => !prev);
+                        setServersDropdownOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-icon", children: "\u2699" }),
+                        /* @__PURE__ */ jsxs("span", { className: "cli-panel-status-label", children: [
+                          statusServiceCount.running,
+                          "/",
+                          statusServiceCount.total,
+                          " services"
+                        ] })
+                      ]
+                    }
+                  ),
+                  statusLastCommand && /* @__PURE__ */ jsxs("span", { className: "cli-panel-status-item", children: [
+                    /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-icon ${statusLastCommand.success ? "status-success" : "status-error"}`, children: statusLastCommand.success ? "\u2713" : "\u2717" }),
+                    /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-label", children: statusLastCommand.name })
+                  ] }),
+                  statusServerState !== "none" && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      ref: serversDropdownRef,
+                      className: "cli-panel-status-item status-clickable",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setServersDropdownOpen((prev) => !prev);
+                        setServicesDropdownOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx3("span", { className: `cli-panel-status-dot ${statusServerState === "connected" ? "dot-idle" : "dot-error"}` }),
+                        /* @__PURE__ */ jsxs("span", { className: "cli-panel-status-label", children: [
+                          statusServerDetails.filter((s) => s.connected).length,
+                          "/",
+                          statusServerDetails.length,
+                          " servers"
+                        ] })
+                      ]
+                    }
+                  ),
+                  statusUptime > 0 && /* @__PURE__ */ jsxs("span", { className: "cli-panel-status-item status-muted", children: [
+                    /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-icon", children: "\u2191" }),
+                    /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-label", children: formattedUptime })
+                  ] }),
+                  statusText && /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-item status-text", children: /* @__PURE__ */ jsx3("span", { className: "cli-panel-status-label", children: statusText }) })
+                ] }),
                 /* @__PURE__ */ jsxs("div", { className: "cli-panel-action-buttons", children: [
                   /* @__PURE__ */ jsxs("div", { className: "cli-panel-btn-position-wrapper", onClick: (e) => e.stopPropagation(), children: [
                     /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-position", title: "Move panel", onClick: handlePositionButtonClick, children: /* @__PURE__ */ jsx3(PositionIcon, { position }) }),
@@ -727,7 +890,8 @@ var CliPanel = React3.forwardRef(
                   /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn", title: collapsed ? "Expand" : "Collapse", onClick: toggle, children: /* @__PURE__ */ jsx3(CollapseChevron, { position, isCollapsed: collapsed }) }),
                   closable && /* @__PURE__ */ jsx3("button", { className: "cli-panel-btn cli-panel-btn-close", title: "Close", onClick: handleClose, children: /* @__PURE__ */ jsx3(CloseIcon, {}) })
                 ] })
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx3("div", { className: `cli-panel-glow-line${statusExecutionState === "running" ? " glow-active" : ""}` })
             ] }),
             initialized && /* @__PURE__ */ jsxs("div", { className: "cli-panel-content", style: collapsed ? { display: "none" } : void 0, children: [
               /* @__PURE__ */ jsxs("div", { className: "cli-panel-tabs", children: [
@@ -758,6 +922,12 @@ var CliPanel = React3.forwardRef(
                         onDoubleClick: (e) => e.stopPropagation()
                       }
                     ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+                      /* @__PURE__ */ jsx3("span", { className: `cli-panel-tab-dot ${(() => {
+                        if (tab.id !== activeTabId) return "dot-idle";
+                        if (statusExecutionState === "running") return "dot-running";
+                        if (statusLastCommand && !statusLastCommand.success) return "dot-error";
+                        return "dot-idle";
+                      })()}` }),
                       /* @__PURE__ */ jsx3("span", { className: "cli-panel-tab-title", children: tab.title }),
                       /* @__PURE__ */ jsx3(
                         "button",
@@ -883,6 +1053,66 @@ var CliPanel = React3.forwardRef(
             }, children: "Close All" })
           ]
         }
+      ),
+      servicesDropdownOpen && statusServiceCount.total > 0 && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "cli-panel-services-dropdown",
+          style: (() => {
+            const el = servicesDropdownRef.current;
+            if (!el) return {};
+            const rect = el.getBoundingClientRect();
+            return position === "top" ? { position: "fixed", top: rect.bottom + 4, left: rect.left, zIndex: 1100 } : { position: "fixed", bottom: window.innerHeight - rect.top + 4, left: rect.left, zIndex: 1100 };
+          })(),
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-header", children: "Background Services" }),
+            /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-list", children: statusServiceDetails.map((svc, i) => /* @__PURE__ */ jsxs("div", { className: "cli-panel-services-dropdown-item", children: [
+              /* @__PURE__ */ jsx3("span", { className: `cli-panel-svc-dot ${svc.status === "running" ? "svc-running" : "svc-stopped"}` }),
+              /* @__PURE__ */ jsxs("div", { className: "cli-panel-svc-info", children: [
+                /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-name", children: svc.name }),
+                svc.description && /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-desc", children: svc.description })
+              ] }),
+              /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-status", children: svc.status })
+            ] }, i)) }),
+            statusServiceDetails.length === 0 && /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-empty", children: "No services registered" })
+          ]
+        }
+      ),
+      serversDropdownOpen && statusServerState !== "none" && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "cli-panel-services-dropdown",
+          style: (() => {
+            const el = serversDropdownRef.current;
+            if (!el) return {};
+            const rect = el.getBoundingClientRect();
+            return position === "top" ? { position: "fixed", top: rect.bottom + 4, left: rect.left, zIndex: 1100 } : { position: "fixed", bottom: window.innerHeight - rect.top + 4, left: rect.left, zIndex: 1100 };
+          })(),
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-header", children: "Server Connections" }),
+            /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-list", children: statusServerDetails.map((srv, i) => /* @__PURE__ */ jsxs("div", { className: "cli-panel-services-dropdown-item", children: [
+              /* @__PURE__ */ jsx3("span", { className: `cli-panel-svc-dot ${srv.connected ? "svc-running" : "svc-stopped"}` }),
+              /* @__PURE__ */ jsxs("div", { className: "cli-panel-svc-info", children: [
+                /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-name", children: srv.name }),
+                srv.url && /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-desc", children: srv.url })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "cli-panel-srv-meta", children: [
+                /* @__PURE__ */ jsx3("span", { className: "cli-panel-svc-status", children: srv.connected ? "connected" : "disconnected" }),
+                srv.apiVersion && /* @__PURE__ */ jsxs("span", { className: "cli-panel-svc-desc", children: [
+                  "v",
+                  srv.apiVersion
+                ] }),
+                srv.commandCount && /* @__PURE__ */ jsxs("span", { className: "cli-panel-svc-desc", children: [
+                  srv.commandCount,
+                  " cmds"
+                ] })
+              ] })
+            ] }, i)) }),
+            statusServerDetails.length === 0 && /* @__PURE__ */ jsx3("div", { className: "cli-panel-services-dropdown-empty", children: "No servers configured" })
+          ]
+        }
       )
     ] });
   }