@qodalis/cli 2.1.0 → 2.2.0

package/public-api.js

@@ -519,7 +519,7 @@ var CliKeyValueStore_TOKEN = cliCore.createCliToken("cli-key-value-store");
 var SyntaxHighlighterRegistry_TOKEN = cliCore.createCliToken("syntax-highlighter-registry");
 
 // src/lib/version.ts
-var LIBRARY_VERSION = "2.1.0";
+var LIBRARY_VERSION = "2.2.0";
 var API_VERSION = 2;
 var ANONYMOUS = "\0anonymous";
 function aliasOwner(context2) {
@@ -5398,6 +5398,7 @@ var CliServerConnection = class _CliServerConnection {
     this._eventServiceRegistered = false;
     this._healthCheckTimer = null;
     this._healthCheckAttempts = 0;
+    this._needsSignIn = false;
   }
   static {
     this.WS_MAX_RECONNECT_ATTEMPTS = 5;
@@ -5414,6 +5415,13 @@ var CliServerConnection = class _CliServerConnection {
   get config() {
     return this._config;
   }
+  /**
+   * The last connect was refused for want of a sign-in (401 or 403 on the
+   * command list): the server is up, and a sign-in reconnects it.
+   */
+  get needsSignIn() {
+    return this._needsSignIn;
+  }
   get connected() {
     return this._connected;
   }
@@ -5453,6 +5461,7 @@ var CliServerConnection = class _CliServerConnection {
     });
   }
   async connect() {
+    this._needsSignIn = false;
     try {
       const baseUrl = this.normalizeUrl(this._config.url);
       const negotiated = await cliCore.ServerVersionNegotiator.discover(
@@ -5535,6 +5544,7 @@ var CliServerConnection = class _CliServerConnection {
     const url = `${this._basePath}/commands`;
     const response = await this.httpFetch(url);
     if (!response.ok) {
+      if (response.status === 401 || response.status === 403) this._needsSignIn = true;
       throw new Error(
         `Server ${this._config.name} returned ${response.status}`
       );
@@ -6225,6 +6235,10 @@ var CliServerManager = class {
         );
         this.registerProxyProcessors(connection, config.name);
         this.emitConnected(connection, false);
+      } else if (connection.needsSignIn) {
+        logger?.info(
+          `Server '${config.name}' needs a sign-in; its commands load once you are signed in.`
+        );
       } else {
         logger?.warn(
           `Could not connect to server '${config.name}' at ${config.url}. Commands from this server will not be available.`
@@ -12587,6 +12601,7 @@ var CliThemeCommandProcessor = class {
   }
   async initialize(context2) {
     this.defaultTheme = context2.terminal.options.theme;
+    if (context2.options?.theme !== void 0) return;
     this.applySavedTheme(context2, false);
     context2.state.select(
       (state) => JSON.stringify([
@@ -19294,8 +19309,9 @@ var welcomeModule = {
       );
       await configureStore.initialize();
       const state = configureStore.getState();
-      if (state?.["system"]?.["welcomeMessage"]) {
-        showOption = state["system"]["welcomeMessage"];
+      const stored = state?.["system"]?.["welcomeMessage"];
+      if (stored && stored !== "always") {
+        showOption = stored;
       }
     }
     if (showOption) {
@@ -19308,10 +19324,11 @@ var welcomeModule = {
       context2.terminal.writeln(config.message);
     } else {
       const branding = resolveCliBranding(context2.options?.branding);
+      const art = branding.art(context2.terminal.cols);
       const lines = [
         `\u{1F680} Welcome to ${branding.name} [Version ${context2.writer.wrapInColor(LIBRARY_VERSION, cliCore.CliForegroundColor.Green)}]`,
         `(c) ${(/* @__PURE__ */ new Date()).getFullYear()} Qodalis Solutions. All rights reserved.`,
-        branding.art(context2.terminal.cols),
+        art,
         "",
         `\u{1F4D6} ${context2.writer.wrapInColor("Documentation:", cliCore.CliForegroundColor.Green)} https://cli.qodalis.com/docs/`,
         "",
@@ -19319,7 +19336,10 @@ var welcomeModule = {
         ""
       ];
       lines.forEach((line2) => {
-        context2.terminal.write(line2 + "\r\n");
+        const wrapped = line2 === art ? [line2] : wrapWelcomeLine(line2, context2.terminal.cols);
+        wrapped.forEach(
+          (part) => context2.terminal.write(part + "\r\n")
+        );
       });
     }
     recordWelcomeMessageDisplay();
@@ -19351,12 +19371,51 @@ var greetingModule = {
     if (host.typedDuringBoot || host.isReadingInput || context2.currentLine) {
       return;
     }
-    await context2.textAnimator?.showText(getGreetingBasedOnTime(), {
+    const buffer = context2.terminal.buffer?.active;
+    const room = context2.terminal.cols - (buffer?.cursorX ?? 0) - 1;
+    const greeting = fitGreeting(getGreetingBasedOnTime(), room);
+    if (!greeting) return;
+    await context2.textAnimator?.showText(greeting, {
       speed: 60,
       removeAfterTyping: true
     });
   }
 };
+function fitGreeting(text, room) {
+  const width = (value) => Array.from(value).reduce(
+    (sum, ch) => sum + (ch.codePointAt(0) > 65535 || /\p{Extended_Pictographic}/u.test(ch) ? 2 : ch === "\uFE0F" ? 0 : 1),
+    0
+  );
+  if (width(text) <= room) return text;
+  const words = text.split(" ");
+  let fitted = "";
+  for (const word of words) {
+    const next = fitted ? `${fitted} ${word}` : word;
+    if (width(next) > room) break;
+    fitted = next;
+  }
+  return fitted.split(" ").length >= 3 ? fitted.replace(/[,;:]$/, "") : null;
+}
+function wrapWelcomeLine(line2, cols) {
+  const width = Math.max(20, cols - 1);
+  const visible = (value) => Array.from(value.replace(/\x1b\[[0-9;]*m/g, "")).reduce(
+    (sum, ch) => sum + (ch.codePointAt(0) > 65535 ? 2 : ch === "\uFE0F" ? 0 : 1),
+    0
+  );
+  if (visible(line2) <= width) return [line2];
+  const lines = [];
+  let current = "";
+  for (const word of line2.split(" ")) {
+    if (current && visible(current) + 1 + visible(word) > width) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = current ? `${current} ${word}` : word;
+    }
+  }
+  if (current) lines.push(current);
+  return lines;
+}
 function shouldDisplayWelcomeMessage(showOption) {
   const lastDisplayed = localStorage.getItem(
     "cliWelcomeMessageLastDisplayed"
@@ -22813,6 +22872,9 @@ var CliEngine = class {
     this.terminalOptions = getTerminalOptions(
       this.options?.terminalOptions
     );
+    if (this.options?.theme !== void 0 && !this.options?.terminalOptions?.theme) {
+      this.terminalOptions.theme = cliCore.resolvePanelTheme(this.options.theme, cliCore.prefersDarkScheme()).terminal;
+    }
     const setup = initializeTerminal(
       this.container,
       this.terminalOptions,
@@ -23065,6 +23127,14 @@ var CliEngine = class {
       this.terminal?.focus();
     });
   }
+  /**
+   * Restyle the terminal: its colors and the background around it.
+   * The `theme` command can still change it afterwards.
+   */
+  setTheme(theme) {
+    if (this.terminal) this.terminal.options.theme = theme;
+    this.container.style.background = theme.background ?? "";
+  }
   /**
    * Get the underlying xterm.js Terminal instance.
    */
@@ -23913,6 +23983,23 @@ function sameJson(a, b) {
   return JSON.stringify(a) === JSON.stringify(b);
 }
 var PANE_RESIZING_BODY_CLASS = "cli-pane-resizing";
+var DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+function followsSystem(input) {
+  return input === "auto" || typeof input === "object" && input !== null && input.base === "auto";
+}
+function themeKey(input) {
+  return input === void 0 ? "" : JSON.stringify(input);
+}
+function sameTerminalTheme(a, b) {
+  return !!a && !!b && a.background === b.background && a.foreground === b.foreground && a.cursor === b.cursor;
+}
+var MIN_KEYBOARD_INSET = 80;
+function visualViewportFields() {
+  const vv = typeof window !== "undefined" ? window.visualViewport : null;
+  if (!vv) return { keyboardInset: 0, visibleHeight: 0 };
+  const inset = Math.round(window.innerHeight - vv.height - vv.offsetTop);
+  return { keyboardInset: inset >= MIN_KEYBOARD_INSET ? inset : 0, visibleHeight: Math.round(vv.height) };
+}
 function defaultViewport() {
   if (typeof window === "undefined") return { width: 0, height: 0 };
   return { width: window.innerWidth, height: window.innerHeight };
@@ -23931,6 +24018,9 @@ var CliPanelController = class {
     /* ─── Subscription ──────────────────────────────────────── */
     this.subscribe = (listener) => {
       this.listeners.add(listener);
+      this.watchSystemScheme();
+      this.watchVisualViewport();
+      this.onVisualViewportChange();
       return () => {
         this.listeners.delete(listener);
       };
@@ -23967,11 +24057,22 @@ var CliPanelController = class {
       this.closeMenus();
       this.cancelRename();
     };
+    this.onSystemSchemeChange = () => this.applyTheme();
+    this.onVisualViewportChange = () => {
+      const fields = visualViewportFields();
+      const s = this.snapshot;
+      if (fields.keyboardInset === s.keyboardInset && fields.visibleHeight === s.visibleHeight) return;
+      this.commit(fields);
+    };
     const config = options.config ?? {};
     this.callbacks = options.callbacks ?? {};
     this.controlled = options.controlled ?? {};
     this.viewport = options.viewport ?? defaultViewport;
     this.persistPosition = options.persistPosition ?? true;
+    this.themeInput = config.theme;
+    this.resolvedTheme = cliCore.resolvePanelTheme(config.theme, cliCore.prefersDarkScheme());
+    this.watchSystemScheme();
+    this.watchVisualViewport();
     this.internal = {
       collapsed: config.isCollapsed ?? true,
       hidden: config.isHidden ?? false,
@@ -23998,7 +24099,11 @@ var CliPanelController = class {
       isHorizontal: false,
       showStatusIndicators: true,
       panelResizing: false,
-      themeStyles: {},
+      // Without a host theme the stylesheet's colors (and its overrides) apply
+      themeStyles: config.theme === void 0 ? {} : this.resolvedTheme.styles,
+      scheme: this.resolvedTheme.scheme,
+      terminalTheme: config.theme === void 0 ? void 0 : this.resolvedTheme.terminal,
+      ...visualViewportFields(),
       ...this.configFields(config),
       tabs: [],
       activeTabId: 0,
@@ -24016,8 +24121,9 @@ var CliPanelController = class {
       formattedUptime: formatUptime2(0)
     });
   }
-  /** Apply a new panel configuration (chrome buttons, theme sync). */
+  /** Apply a new panel configuration (chrome buttons, theme, theme sync). */
   setOptions(config) {
+    if (themeKey(config?.theme) !== themeKey(this.themeInput)) this.setTheme(config?.theme);
     const fields = this.configFields(config ?? {});
     const s = this.snapshot;
     if (fields.closable === s.closable && fields.resizable === s.resizable && fields.hideable === s.hideable && fields.hideAlignment === s.hideAlignment && fields.syncTheme === s.syncTheme) {
@@ -24027,6 +24133,15 @@ var CliPanelController = class {
     if (fields.syncTheme) this.startThemeSync();
     else this.stopThemeSync();
   }
+  /**
+   * Restyle the panel and every terminal in it (see `CliPanelConfig.theme`).
+   * `undefined` returns to the default palette and leaves the terminals' theme alone.
+   */
+  setTheme(theme) {
+    this.themeInput = theme;
+    this.watchSystemScheme();
+    this.applyTheme();
+  }
   /** Replace the change callbacks (wrappers call this when their props change). */
   setCallbacks(callbacks) {
     this.callbacks = callbacks;
@@ -24052,6 +24167,9 @@ var CliPanelController = class {
   destroy() {
     this.tracker.destroy();
     this.stopThemeSync();
+    this.schemeQuery?.removeEventListener("change", this.onSystemSchemeChange);
+    this.schemeQuery = void 0;
+    this.unwatchVisualViewport();
     this.endPanelResize();
     this.endPaneResize();
     this.detachDocumentListeners();
@@ -24088,7 +24206,9 @@ var CliPanelController = class {
   unhide() {
     if (!this.snapshot.hidden) return;
     this.updateHidden(false);
-    if (this.snapshot.collapsed !== this.preHideCollapsed) this.updateCollapsed(this.preHideCollapsed);
+    const collapsed = this.snapshot.initialized ? this.preHideCollapsed : false;
+    if (this.snapshot.collapsed !== collapsed) this.updateCollapsed(collapsed);
+    if (!collapsed) this.ensureInitialized();
   }
   toggleHide() {
     if (this.snapshot.hidden) this.unhide();
@@ -24267,6 +24387,7 @@ var CliPanelController = class {
     if (!this.findTab(tabId)) return;
     this.engines.set(paneId, engine);
     this.tracker.registerEngine(tabId, paneId, engine);
+    if (this.snapshot.terminalTheme) engine.setTheme(this.snapshot.terminalTheme);
     if (this.snapshot.syncTheme) this.startThemeSync();
   }
   getEngine(paneId) {
@@ -24344,7 +24465,7 @@ var CliPanelController = class {
     });
   }
   /* ─── Drag resizing ─────────────────────────────────────── */
-  /** Mouse down on the panel's resize bar. */
+  /** Pointer (mouse, touch or pen) down on the panel's resize bar. */
   startPanelResize(clientX, clientY) {
     if (!this.snapshot.resizable || typeof document === "undefined") return;
     if (this.snapshot.collapsed) this.toggle();
@@ -24355,10 +24476,11 @@ var CliPanelController = class {
       startHeight: this.snapshot.height
     };
     this.commit({ panelResizing: true });
-    document.addEventListener("mousemove", this.onPanelResizeMove);
-    document.addEventListener("mouseup", this.onPanelResizeEnd);
+    document.addEventListener("pointermove", this.onPanelResizeMove);
+    document.addEventListener("pointerup", this.onPanelResizeEnd);
+    document.addEventListener("pointercancel", this.onPanelResizeEnd);
   }
-  /** Mouse down on the divider before pane `dividerIndex + 1` of a tab. */
+  /** Pointer down on the divider before pane `dividerIndex + 1` of a tab. */
   startPaneResize(tabId, dividerIndex, clientX, containerWidth) {
     const tab = this.findTab(tabId);
     if (!tab || typeof document === "undefined") return;
@@ -24371,22 +24493,25 @@ var CliPanelController = class {
     };
     this.commit({ paneResizing: true });
     document.body.classList.add(PANE_RESIZING_BODY_CLASS);
-    document.addEventListener("mousemove", this.onPaneResizeMove);
-    document.addEventListener("mouseup", this.onPaneResizeEnd);
+    document.addEventListener("pointermove", this.onPaneResizeMove);
+    document.addEventListener("pointerup", this.onPaneResizeEnd);
+    document.addEventListener("pointercancel", this.onPaneResizeEnd);
   }
   endPanelResize() {
     if (!this.panelDrag) return;
     this.panelDrag = void 0;
-    document.removeEventListener("mousemove", this.onPanelResizeMove);
-    document.removeEventListener("mouseup", this.onPanelResizeEnd);
+    document.removeEventListener("pointermove", this.onPanelResizeMove);
+    document.removeEventListener("pointerup", this.onPanelResizeEnd);
+    document.removeEventListener("pointercancel", this.onPanelResizeEnd);
     this.commit({ panelResizing: false });
   }
   endPaneResize() {
     if (!this.paneDrag) return;
     this.paneDrag = void 0;
     document.body.classList.remove(PANE_RESIZING_BODY_CLASS);
-    document.removeEventListener("mousemove", this.onPaneResizeMove);
-    document.removeEventListener("mouseup", this.onPaneResizeEnd);
+    document.removeEventListener("pointermove", this.onPaneResizeMove);
+    document.removeEventListener("pointerup", this.onPaneResizeEnd);
+    document.removeEventListener("pointercancel", this.onPaneResizeEnd);
     this.commit({ paneResizing: false });
   }
   syncDocumentListeners() {
@@ -24414,7 +24539,7 @@ var CliPanelController = class {
     if (!engine) return;
     const theme = engine.getTerminal().options.theme;
     if (!theme) return;
-    const styles = cliCore.derivePanelThemeStyles(theme);
+    const styles = sameTerminalTheme(theme, this.resolvedTheme.terminal) ? this.resolvedTheme.styles : cliCore.derivePanelThemeStyles(theme);
     if (sameRecord(styles, this.snapshot.themeStyles)) return;
     this.commit({ themeStyles: styles });
   }
@@ -24431,6 +24556,44 @@ var CliPanelController = class {
     this.themeObserver = new MutationObserver(() => this.syncThemeFromEngine());
     this.themeObserver.observe(container, { attributes: true, attributeFilter: ["style"] });
   }
+  applyTheme() {
+    const resolved = cliCore.resolvePanelTheme(this.themeInput, cliCore.prefersDarkScheme());
+    this.resolvedTheme = resolved;
+    const terminalTheme = this.themeInput === void 0 ? void 0 : resolved.terminal;
+    const terminalChanged = !!terminalTheme && !sameTerminalTheme(terminalTheme, this.snapshot.terminalTheme);
+    const themeStyles = this.themeInput === void 0 ? {} : resolved.styles;
+    this.commit({ themeStyles, scheme: resolved.scheme, terminalTheme });
+    if (terminalChanged) this.engines.forEach((engine) => engine.setTheme(terminalTheme));
+    if (this.snapshot.syncTheme) this.syncThemeFromEngine();
+  }
+  /** Follow the system's light/dark setting while the theme is 'auto'. */
+  watchSystemScheme() {
+    const follow = followsSystem(this.themeInput) && typeof window !== "undefined" && !!window.matchMedia;
+    if (follow && !this.schemeQuery) {
+      this.schemeQuery = window.matchMedia(DARK_SCHEME_QUERY);
+      this.schemeQuery.addEventListener?.("change", this.onSystemSchemeChange);
+    } else if (!follow && this.schemeQuery) {
+      this.schemeQuery.removeEventListener?.("change", this.onSystemSchemeChange);
+      this.schemeQuery = void 0;
+    }
+  }
+  /* ─── On-screen keyboard ────────────────────────────────── */
+  /**
+   * Phone browsers open the keyboard over the page and shrink only the visual
+   * viewport; follow it so the panel stays above the keyboard.
+   */
+  watchVisualViewport() {
+    const vv = typeof window !== "undefined" ? window.visualViewport : null;
+    if (!vv || this.visualViewport) return;
+    this.visualViewport = vv;
+    vv.addEventListener("resize", this.onVisualViewportChange);
+    vv.addEventListener("scroll", this.onVisualViewportChange);
+  }
+  unwatchVisualViewport() {
+    this.visualViewport?.removeEventListener("resize", this.onVisualViewportChange);
+    this.visualViewport?.removeEventListener("scroll", this.onVisualViewportChange);
+    this.visualViewport = void 0;
+  }
   stopThemeSync() {
     this.themeObserver?.disconnect();
     this.themeObserver = void 0;
@@ -24743,6 +24906,8 @@ function positionDropdownItemClass(s, position) {
 }
 function panelWrapperStyle(s) {
   const style = s.isHorizontal ? { width: `${s.width}px` } : { height: `${s.height}px` };
+  if (s.keyboardInset > 0) style["--cli-panel-keyboard-inset"] = `${s.keyboardInset}px`;
+  if (s.visibleHeight > 0) style["--cli-panel-visible-height"] = `${s.visibleHeight}px`;
   if (s.hidden) style["display"] = "none";
   return { ...style, ...s.themeStyles };
 }
@@ -24750,7 +24915,7 @@ function paneStyle(widthPercent) {
   return { flex: `${widthPercent} 1 0` };
 }
 function contextMenuStyle(s) {
-  return { left: `${s.contextMenu.x}px`, top: `${s.contextMenu.y}px` };
+  return { ...s.themeStyles, left: `${s.contextMenu.x}px`, top: `${s.contextMenu.y}px` };
 }
 function statusIndicators(s) {
   const items = [];
@@ -24867,7 +25032,7 @@ function openStatusDropdown(s) {
       kind: "services",
       header: PANEL_LABELS.servicesHeader,
       emptyText: PANEL_LABELS.servicesEmpty,
-      style: s.servicesDropdownStyle,
+      style: { ...s.themeStyles, ...s.servicesDropdownStyle },
       rows: s.global.serviceDetails.map((svc, i) => ({
         key: `${i}-${svc.name}`,
         dotClass: joinClasses("cli-panel-svc-dot", svc.status === "running" ? "svc-running" : "svc-stopped"),
@@ -24883,7 +25048,7 @@ function openStatusDropdown(s) {
       kind: "servers",
       header: PANEL_LABELS.serversHeader,
       emptyText: PANEL_LABELS.serversEmpty,
-      style: s.serversDropdownStyle,
+      style: { ...s.themeStyles, ...s.serversDropdownStyle },
       rows: s.global.serverDetails.map((srv, i) => ({
         key: `${i}-${srv.name}`,
         dotClass: joinClasses("cli-panel-svc-dot", srv.connected ? "svc-running" : "svc-stopped"),