@qodalis/cli 2.2.0 → 2.4.0

package/public-api.mjs

@@ -518,7 +518,7 @@ var CliKeyValueStore_TOKEN = createCliToken("cli-key-value-store");
 var SyntaxHighlighterRegistry_TOKEN = createCliToken("syntax-highlighter-registry");
 
 // src/lib/version.ts
-var LIBRARY_VERSION = "2.2.0";
+var LIBRARY_VERSION = "2.4.0";
 var API_VERSION = 2;
 var ANONYMOUS = "\0anonymous";
 function aliasOwner(context2) {
@@ -11187,7 +11187,78 @@ var CliServicesCommandProcessor = class {
     );
   }
 };
+var CLI_EVENT_HISTORY_SIZE = 200;
+function matchesEventPattern(type, pattern) {
+  if (pattern === "*") return true;
+  if (pattern.endsWith(":*")) {
+    return type.startsWith(pattern.slice(0, -1));
+  }
+  return type === pattern;
+}
+var CliEventBus = class {
+  constructor(onHandlerError = (error) => console.error("[CLI] Event handler failed:", error), historySize = CLI_EVENT_HISTORY_SIZE) {
+    this.onHandlerError = onHandlerError;
+    this.historySize = historySize;
+    this.subject = new Subject();
+    this.recent = [];
+    this.disposed = false;
+  }
+  emit(type, data, options) {
+    if (this.disposed) return;
+    const event = {
+      type,
+      data,
+      source: options?.source,
+      timestamp: Date.now()
+    };
+    this.recent.push(event);
+    if (this.recent.length > this.historySize) {
+      this.recent.shift();
+    }
+    this.subject.next(event);
+  }
+  on(pattern, handler) {
+    const subscription = this.events$(pattern).subscribe((event) => {
+      try {
+        handler(event);
+      } catch (error) {
+        this.onHandlerError(error, event);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }
+  once(pattern, handler) {
+    let done = false;
+    const unsubscribe = this.on(pattern, (event) => {
+      if (done) return;
+      done = true;
+      unsubscribe();
+      handler(event);
+    });
+    return unsubscribe;
+  }
+  events$(pattern = "*") {
+    return this.subject.asObservable().pipe(filter((event) => matchesEventPattern(event.type, pattern)));
+  }
+  history(pattern = "*", limit) {
+    const matching = this.recent.filter(
+      (event) => matchesEventPattern(event.type, pattern)
+    );
+    return limit !== void 0 ? matching.slice(-limit) : matching;
+  }
+  /** Stop delivering events and complete all observables. */
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.subject.complete();
+    this.recent.length = 0;
+  }
+};
+
+// src/lib/processors/system/cli-events-command-processor.ts
 var DATA_PREVIEW_LENGTH = 120;
+var SERVER_EVENT = "server:event";
+var SERVER_ENVELOPE_FIELDS = /* @__PURE__ */ new Set(["type", "timestamp"]);
 var RESERVED_NAMESPACES = [
   "boot",
   "command",
@@ -11199,26 +11270,83 @@ var RESERVED_NAMESPACES = [
   "session",
   "user"
 ];
+function serverEventOf(event) {
+  return event.type === SERVER_EVENT ? event.data : void 0;
+}
+function matchesFilter(event, filter2) {
+  const remote = serverEventOf(event);
+  if (!remote) {
+    return !filter2.server && matchesEventPattern(event.type, filter2.pattern);
+  }
+  if (filter2.local) return false;
+  if (filter2.server && remote.server.toLowerCase() !== filter2.server.toLowerCase()) return false;
+  return matchesEventPattern(remote.type, filter2.pattern) || matchesEventPattern(SERVER_EVENT, filter2.pattern);
+}
 function canSee(event, context2) {
   return !event.type.startsWith("user:") || cliAuthorize(context2, CliUsersPermissions.AuditRead);
 }
+function formatServerEventFields(data) {
+  if (!data || typeof data !== "object") return "";
+  const parts = [];
+  for (const [key, value] of Object.entries(data)) {
+    if (SERVER_ENVELOPE_FIELDS.has(key) || value === void 0 || value === null) continue;
+    const text = typeof value === "string" ? value : JSON.stringify(value);
+    parts.push(`${key}=${/\s/.test(text) ? JSON.stringify(text) : text}`);
+  }
+  return shorten(parts.join(" "));
+}
+function shorten(text) {
+  return text.length > DATA_PREVIEW_LENGTH ? `${text.slice(0, DATA_PREVIEW_LENGTH - 1)}\u2026` : text;
+}
 function formatEvent(event, context2) {
   const { writer } = context2;
-  const time = new Date(event.timestamp).toISOString().slice(11, 23);
-  const source = event.source ? `  ${writer.wrapInColor(`[${event.source}]`, CliForegroundColor.Blue)}` : "";
+  const remote = serverEventOf(event);
+  let time = event.timestamp;
+  let type = event.type;
+  let source = event.source;
   let data = "";
-  if (event.data !== void 0) {
+  if (remote) {
+    const sent = remote.data?.timestamp;
+    if (typeof sent === "string" && !isNaN(Date.parse(sent))) time = sent;
+    type = remote.type;
+    source = remote.server;
+    data = formatServerEventFields(remote.data);
+  } else if (event.data !== void 0) {
     try {
       data = JSON.stringify(event.data) ?? "";
     } catch {
       data = String(event.data);
     }
-    if (data.length > DATA_PREVIEW_LENGTH) {
-      data = `${data.slice(0, DATA_PREVIEW_LENGTH - 1)}\u2026`;
-    }
+    data = shorten(data);
   }
-  return `${writer.wrapInColor(time, CliForegroundColor.Yellow)}  ${writer.wrapInColor(event.type, CliForegroundColor.Cyan)}${source}${data ? `  ${data}` : ""}`;
+  const when = new Date(time).toISOString().slice(11, 23);
+  const from = source ? `  ${writer.wrapInColor(`[${source}]`, remote ? CliForegroundColor.Magenta : CliForegroundColor.Blue)}` : "";
+  return `${writer.wrapInColor(when, CliForegroundColor.Yellow)}  ${writer.wrapInColor(type, CliForegroundColor.Cyan)}${from}${data ? `  ${data}` : ""}`;
+}
+function filterOf(command2) {
+  const server = command2.args["server"] ?? command2.args["s"];
+  return {
+    pattern: joinShellWords(command2.value ?? "") || "*",
+    server: server === void 0 || server === true ? void 0 : String(server),
+    local: !!(command2.args["local"] || command2.args["l"])
+  };
 }
+var FILTER_PARAMETERS = [
+  {
+    name: "server",
+    aliases: ["s"],
+    type: "string",
+    description: "Only the events of this server",
+    required: false
+  },
+  {
+    name: "local",
+    aliases: ["l"],
+    type: "boolean",
+    description: "Only the terminal's own events",
+    required: false
+  }
+];
 function busOf(context2) {
   if (!context2.events) {
     context2.writer.writeError(
@@ -11230,7 +11358,7 @@ function busOf(context2) {
 var CliEventsCommandProcessor = class {
   constructor() {
     this.command = "events";
-    this.description = "Watch, list and emit events on the event bus";
+    this.description = "Watch, list and emit events of the terminal and the connected servers";
     this.author = DefaultLibraryAuthor;
     this.version = "1.0.0";
     this.metadata = {
@@ -11243,16 +11371,17 @@ var CliEventsCommandProcessor = class {
         command: "watch",
         description: "Print events as they happen (Ctrl+C to stop)",
         acceptsRawInput: true,
+        parameters: FILTER_PARAMETERS,
         processCommand: async (command2, context2) => {
           const bus = busOf(context2);
           if (!bus) return;
-          const pattern = joinShellWords(command2.value ?? "") || "*";
+          const filter2 = filterOf(command2);
           context2.writer.writeInfo(
-            `Watching ${context2.writer.wrapInColor(pattern, CliForegroundColor.Cyan)} \u2014 press Ctrl+C to stop`
+            `Watching ${context2.writer.wrapInColor(filter2.pattern, CliForegroundColor.Cyan)} \u2014 press Ctrl+C to stop`
           );
           await new Promise((resolve) => {
-            const off = bus.on(pattern, (event) => {
-              if (canSee(event, context2)) {
+            const off = bus.on("*", (event) => {
+              if (matchesFilter(event, filter2) && canSee(event, context2)) {
                 context2.writer.writeln(formatEvent(event, context2));
               }
             });
@@ -11278,6 +11407,12 @@ var CliEventsCommandProcessor = class {
           context2.writer.writeln(
             `  events watch boot:completed  ${t.t("cli.events.watch.help.one_type", "One type")}`
           );
+          context2.writer.writeln(
+            `  events watch job:* -s node   ${t.t("cli.events.watch.help.server_jobs", "Job events of the server node")}`
+          );
+          context2.writer.writeln(
+            `  events watch --local         ${t.t("cli.events.watch.help.local_only", "Only the terminal's own events")}`
+          );
         }
       },
       {
@@ -11286,6 +11421,7 @@ var CliEventsCommandProcessor = class {
         description: "Show recent events (kept in memory, not persisted)",
         acceptsRawInput: true,
         parameters: [
+          ...FILTER_PARAMETERS,
           {
             name: "limit",
             aliases: ["n"],
@@ -11297,13 +11433,13 @@ var CliEventsCommandProcessor = class {
         processCommand: async (command2, context2) => {
           const bus = busOf(context2);
           if (!bus) return;
-          const pattern = joinShellWords(command2.value ?? "") || "*";
+          const filter2 = filterOf(command2);
           const limit = Number(
             command2.args["limit"] ?? command2.args["n"] ?? 20
           );
-          const events = bus.history(pattern).filter((event) => canSee(event, context2)).slice(-(limit > 0 ? limit : 20));
+          const events = bus.history("*").filter((event) => matchesFilter(event, filter2) && canSee(event, context2)).slice(-(limit > 0 ? limit : 20));
           if (events.length === 0) {
-            context2.writer.writeInfo(`No events matching ${pattern}`);
+            context2.writer.writeInfo(`No events matching ${filter2.pattern}`);
             return;
           }
           for (const event of events) {
@@ -11322,6 +11458,9 @@ var CliEventsCommandProcessor = class {
           context2.writer.writeln(
             `  events log server:* -n 50    ${t.t("cli.events.log.help.last_50_server", "Last 50 server events")}`
           );
+          context2.writer.writeln(
+            `  events log job:failed        ${t.t("cli.events.log.help.failed_jobs", "Recent failed job runs, on every server")}`
+          );
         }
       },
       {
@@ -11393,6 +11532,9 @@ var CliEventsCommandProcessor = class {
     writer.writeln(
       t.t("cli.events.help.patterns", "Patterns: an exact type (package:installed), a namespace (package:*) or * for all.")
     );
+    writer.writeln(
+      t.t("cli.events.help.servers", "Events of the connected servers (job runs, user, token and file changes, ...) are shown with the server name; each server sends only the events you may see. Filter with --server <name>, or --local for the terminal's own events.")
+    );
     writer.writeln(
       t.t("cli.events.help.in_memory", "Events are kept in memory for this terminal only; nothing is persisted.")
     );
@@ -12164,6 +12306,53 @@ var themeInfos = {
   ...DefaultThemeInfos
 };
 
+// src/lib/processors/theme/terminal-theme.ts
+var records = /* @__PURE__ */ new WeakMap();
+function recordOf(terminal) {
+  let record = records.get(terminal);
+  if (!record) {
+    record = { base: terminal.options.theme ?? {}, userChosen: false };
+    records.set(terminal, record);
+  }
+  return record;
+}
+var CLI_TERMINAL_THEME_EVENT = "qcli-terminal-theme";
+function paintTerminalBackground(terminal) {
+  const container = terminal.element?.closest(".terminal-container");
+  if (!container) return;
+  const theme = terminal.options.theme ?? {};
+  container.style.background = theme.background ?? "";
+  if (typeof CustomEvent === "function") {
+    container.dispatchEvent(new CustomEvent(CLI_TERMINAL_THEME_EVENT, { bubbles: true, detail: theme }));
+  }
+}
+function setHostTerminalTheme(terminal, theme) {
+  const record = recordOf(terminal);
+  record.base = theme;
+  if (!record.userChosen) {
+    terminal.options.theme = theme;
+    paintTerminalBackground(terminal);
+  }
+}
+function applyUserTerminalTheme(terminal, theme) {
+  recordOf(terminal).userChosen = true;
+  terminal.options.theme = theme;
+  paintTerminalBackground(terminal);
+}
+function resetTerminalTheme(terminal) {
+  const record = recordOf(terminal);
+  record.userChosen = false;
+  terminal.options.theme = { ...record.base };
+  paintTerminalBackground(terminal);
+}
+function previewTerminalTheme(terminal, theme) {
+  terminal.options.theme = theme;
+  paintTerminalBackground(terminal);
+}
+function initTerminalTheme(terminal) {
+  recordOf(terminal);
+}
+
 // src/lib/processors/theme/cli-theme-command-processor.ts
 function hexToRgb(hex) {
   const m = /^#?([0-9A-Fa-f]{6})$/.exec(hex);
@@ -12364,15 +12553,19 @@ var CliThemeCommandProcessor = class {
               {
                 onChange: (value) => {
                   if (themes[value]) {
-                    context2.terminal.options.theme = themes[value];
-                    this.applyStyles(context2);
+                    previewTerminalTheme(
+                      context2.terminal,
+                      themes[value]
+                    );
                   }
                 }
               }
             );
             if (!selected) {
-              context2.terminal.options.theme = originalTheme;
-              this.applyStyles(context2);
+              previewTerminalTheme(
+                context2.terminal,
+                originalTheme
+              );
               context2.writer.writeInfo(
                 "Theme selection cancelled"
               );
@@ -12386,13 +12579,12 @@ var CliThemeCommandProcessor = class {
             );
             return;
           }
-          context2.terminal.options.theme = themes[themeName];
+          applyUserTerminalTheme(context2.terminal, themes[themeName]);
           context2.state.updateState({
             selectedTheme: themeName,
             customOptions: null
           });
           await context2.state.persist();
-          this.applyStyles(context2);
           context2.writer.writeSuccess(`Theme "${themeName}" applied`);
         }
       },
@@ -12428,10 +12620,10 @@ var CliThemeCommandProcessor = class {
             );
             return;
           }
-          context2.terminal.options.theme = {
+          applyUserTerminalTheme(context2.terminal, {
             ...context2.terminal.options.theme,
             [key]: value
-          };
+          });
           context2.state.updateState({
             selectedTheme: null,
             customOptions: context2.terminal.options.theme
@@ -12440,7 +12632,6 @@ var CliThemeCommandProcessor = class {
           context2.writer.writeSuccess(
             `Set ${key} to ${swatch} ${value}`
           );
-          this.applyStyles(context2);
           if (command2.args["save"]) {
             await this.saveTheme(context2);
           }
@@ -12466,10 +12657,9 @@ var CliThemeCommandProcessor = class {
         command: "reset",
         description: "Reset the theme to the default",
         processCommand: async (_, context2) => {
-          context2.terminal.options.theme = { ...this.defaultTheme };
+          resetTerminalTheme(context2.terminal);
           context2.state.reset();
           await context2.state.persist();
-          this.applyStyles(context2);
           context2.writer.writeSuccess("Theme reset to default");
         }
       },
@@ -12527,13 +12717,12 @@ var CliThemeCommandProcessor = class {
             );
           }
           const [name, info] = candidates[Math.floor(Math.random() * candidates.length)];
-          context2.terminal.options.theme = info.theme;
+          applyUserTerminalTheme(context2.terminal, info.theme);
           context2.state.updateState({
             selectedTheme: name,
             customOptions: null
           });
           await context2.state.persist();
-          this.applyStyles(context2);
           context2.writer.writeSuccess(
             `Random theme "${name}" applied`
           );
@@ -12584,13 +12773,12 @@ var CliThemeCommandProcessor = class {
             );
             return;
           }
-          context2.terminal.options.theme = imported;
+          applyUserTerminalTheme(context2.terminal, imported);
           context2.state.updateState({
             selectedTheme: null,
             customOptions: imported
           });
           await context2.state.persist();
-          this.applyStyles(context2);
           context2.writer.writeSuccess(
             "Custom theme imported and applied"
           );
@@ -12599,8 +12787,7 @@ var CliThemeCommandProcessor = class {
     ];
   }
   async initialize(context2) {
-    this.defaultTheme = context2.terminal.options.theme;
-    if (context2.options?.theme !== void 0) return;
+    initTerminalTheme(context2.terminal);
     this.applySavedTheme(context2, false);
     context2.state.select(
       (state) => JSON.stringify([
@@ -12612,17 +12799,14 @@ var CliThemeCommandProcessor = class {
   /** Apply the saved theme (or the default one when `reset` and none is saved). */
   applySavedTheme(context2, reset) {
     const state = context2.state.getState();
-    if (state.selectedTheme && state.selectedTheme !== "default") {
-      const theme = themes[state.selectedTheme];
-      if (theme) {
-        context2.terminal.options.theme = theme;
-      }
-    } else if (state.customOptions) {
-      context2.terminal.options.theme = state.customOptions;
+    const saved = state.selectedTheme && state.selectedTheme !== "default" ? themes[state.selectedTheme] : state.customOptions;
+    if (saved) {
+      applyUserTerminalTheme(context2.terminal, saved);
     } else if (reset) {
-      context2.terminal.options.theme = { ...this.defaultTheme };
+      resetTerminalTheme(context2.terminal);
+    } else {
+      paintTerminalBackground(context2.terminal);
     }
-    this.applyStyles(context2);
   }
   async processCommand(command2, context2) {
     context2.executor.showHelp(command2, context2);
@@ -12701,12 +12885,6 @@ var CliThemeCommandProcessor = class {
       );
     }
   }
-  applyStyles(context2) {
-    const parents = document.getElementsByClassName("terminal-container");
-    for (const parent of Array.from(parents)) {
-      parent.style.background = context2.terminal.options.theme?.background || this.defaultTheme.background;
-    }
-  }
   async saveTheme(context2) {
     await context2.state.persist();
     context2.writer.writeSuccess("Theme saved");
@@ -13207,6 +13385,7 @@ var CliEnvCommandProcessor = class {
 var MIN_FONT_SIZE = 8;
 var MAX_FONT_SIZE = 40;
 var STEP = 2;
+var hostFontSizes = /* @__PURE__ */ new WeakMap();
 var CliFontSizeCommandProcessor = class {
   constructor() {
     this.command = "font-size";
@@ -13261,14 +13440,16 @@ var CliFontSizeCommandProcessor = class {
     ];
   }
   async initialize(context2) {
-    this.hostFontSize = context2.terminal?.options?.fontSize;
+    if (context2.terminal) {
+      hostFontSizes.set(context2.terminal, context2.terminal.options?.fontSize);
+    }
     const state = context2.state.getState();
     if (state?.fontSize != null && context2.terminal?.options) {
       context2.terminal.options.fontSize = state.fontSize;
     }
     context2.state.select((s) => s.fontSize ?? null).pipe(skip(1)).subscribe((fontSize) => {
       if (!context2.terminal?.options) return;
-      context2.terminal.options.fontSize = fontSize ?? this.hostFontSize ?? context2.terminal.options.fontSize;
+      context2.terminal.options.fontSize = fontSize ?? this.getDefault(context2);
     });
   }
   async processCommand(_, context2) {
@@ -13286,7 +13467,7 @@ var CliFontSizeCommandProcessor = class {
       `  ${context2.writer.wrapInColor("font-size set <n>", CliForegroundColor.Cyan)}    Set to exact size`
     );
     context2.writer.writeln(
-      `  ${context2.writer.wrapInColor("font-size reset", CliForegroundColor.Cyan)}      Reset to default (${this.getDefault()}px)`
+      `  ${context2.writer.wrapInColor("font-size reset", CliForegroundColor.Cyan)}      Reset to default (${this.getDefault(context2)}px)`
     );
   }
   writeDescription(context2) {
@@ -13319,13 +13500,13 @@ var CliFontSizeCommandProcessor = class {
       return fromTerminal;
     }
     const state = context2.state.getState();
-    return state?.fontSize ?? this.getDefault();
+    return state?.fontSize ?? this.getDefault(context2);
   }
-  getDefault() {
-    return this.hostFontSize ?? defaultFontSize();
+  getDefault(context2) {
+    return (context2.terminal && hostFontSizes.get(context2.terminal)) ?? defaultFontSize();
   }
   async resetFontSize(context2) {
-    const size = this.getDefault();
+    const size = this.getDefault(context2);
     if (context2.terminal?.options) {
       context2.terminal.options.fontSize = size;
     }
@@ -21959,73 +22140,6 @@ function createServerModule() {
     services: []
   };
 }
-var CLI_EVENT_HISTORY_SIZE = 200;
-function matchesEventPattern(type, pattern) {
-  if (pattern === "*") return true;
-  if (pattern.endsWith(":*")) {
-    return type.startsWith(pattern.slice(0, -1));
-  }
-  return type === pattern;
-}
-var CliEventBus = class {
-  constructor(onHandlerError = (error) => console.error("[CLI] Event handler failed:", error), historySize = CLI_EVENT_HISTORY_SIZE) {
-    this.onHandlerError = onHandlerError;
-    this.historySize = historySize;
-    this.subject = new Subject();
-    this.recent = [];
-    this.disposed = false;
-  }
-  emit(type, data, options) {
-    if (this.disposed) return;
-    const event = {
-      type,
-      data,
-      source: options?.source,
-      timestamp: Date.now()
-    };
-    this.recent.push(event);
-    if (this.recent.length > this.historySize) {
-      this.recent.shift();
-    }
-    this.subject.next(event);
-  }
-  on(pattern, handler) {
-    const subscription = this.events$(pattern).subscribe((event) => {
-      try {
-        handler(event);
-      } catch (error) {
-        this.onHandlerError(error, event);
-      }
-    });
-    return () => subscription.unsubscribe();
-  }
-  once(pattern, handler) {
-    let done = false;
-    const unsubscribe = this.on(pattern, (event) => {
-      if (done) return;
-      done = true;
-      unsubscribe();
-      handler(event);
-    });
-    return unsubscribe;
-  }
-  events$(pattern = "*") {
-    return this.subject.asObservable().pipe(filter((event) => matchesEventPattern(event.type, pattern)));
-  }
-  history(pattern = "*", limit) {
-    const matching = this.recent.filter(
-      (event) => matchesEventPattern(event.type, pattern)
-    );
-    return limit !== void 0 ? matching.slice(-limit) : matching;
-  }
-  /** Stop delivering events and complete all observables. */
-  dispose() {
-    if (this.disposed) return;
-    this.disposed = true;
-    this.subject.complete();
-    this.recent.length = 0;
-  }
-};
 
 // src/lib/editor/syntax/registry.ts
 var SyntaxHighlighterRegistry = class {
@@ -23127,12 +23241,13 @@ var CliEngine = class {
     });
   }
   /**
-   * Restyle the terminal: its colors and the background around it.
-   * The `theme` command can still change it afterwards.
+   * The host's theme for this terminal: its colors and the background around it.
+   * A theme the user chose with the `theme` command stays until `theme reset`,
+   * which returns to this one.
    */
   setTheme(theme) {
-    if (this.terminal) this.terminal.options.theme = theme;
-    this.container.style.background = theme.background ?? "";
+    if (this.terminal) setHostTerminalTheme(this.terminal, theme);
+    else this.container.style.background = theme.background ?? "";
   }
   /**
    * Get the underlying xterm.js Terminal instance.
@@ -23237,6 +23352,8 @@ var CliEngine = class {
     window.addEventListener("resize", this.resizeListener);
     this.resizeObserver = new ResizeObserver(() => this.safeFit());
     this.resizeObserver.observe(this.container);
+    const screen2 = this.terminal?.element?.querySelector(".xterm-screen");
+    if (screen2) this.resizeObserver.observe(screen2);
   }
   /**
    * Call fitAddon.fit() only when the container has non-zero dimensions.
@@ -23983,6 +24100,9 @@ function sameJson(a, b) {
 }
 var PANE_RESIZING_BODY_CLASS = "cli-pane-resizing";
 var DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+function asEventTarget(node) {
+  return node && typeof node.addEventListener === "function" ? node : null;
+}
 function followsSystem(input) {
   return input === "auto" || typeof input === "object" && input !== null && input.base === "auto";
 }
@@ -24057,6 +24177,13 @@ var CliPanelController = class {
       this.cancelRename();
     };
     this.onSystemSchemeChange = () => this.applyTheme();
+    /** A terminal in the panel changed theme: follow the first one. */
+    this.onTerminalTheme = (event) => {
+      if (!this.followsTerminalTheme) return;
+      const first = this.rootElement?.querySelector(".terminal-container");
+      if (event.target !== first) return;
+      this.syncThemeFromEngine(event.detail);
+    };
     this.onVisualViewportChange = () => {
       const fields = visualViewportFields();
       const s = this.snapshot;
@@ -24129,7 +24256,7 @@ var CliPanelController = class {
       return;
     }
     this.commit(fields);
-    if (fields.syncTheme) this.startThemeSync();
+    if (this.followsTerminalTheme) this.startThemeSync();
     else this.stopThemeSync();
   }
   /**
@@ -24140,6 +24267,15 @@ var CliPanelController = class {
     this.themeInput = theme;
     this.watchSystemScheme();
     this.applyTheme();
+    if (this.followsTerminalTheme) this.startThemeSync();
+    else this.stopThemeSync();
+  }
+  /**
+   * Whether the panel's colors follow its first terminal: with `syncTheme`, or
+   * with a host theme so a theme the user applies restyles the panel too.
+   */
+  get followsTerminalTheme() {
+    return this.snapshot.syncTheme || this.themeInput !== void 0;
   }
   /** Replace the change callbacks (wrappers call this when their props change). */
   setCallbacks(callbacks) {
@@ -24155,8 +24291,11 @@ var CliPanelController = class {
   }
   /** Element containing the terminals, used for theme sync. */
   setRootElement(element) {
+    if (element === this.rootElement) return;
+    asEventTarget(this.rootElement)?.removeEventListener(CLI_TERMINAL_THEME_EVENT, this.onTerminalTheme);
     this.rootElement = element;
-    if (element && this.snapshot.syncTheme) this.startThemeSync();
+    asEventTarget(element)?.addEventListener(CLI_TERMINAL_THEME_EVENT, this.onTerminalTheme);
+    if (element && this.followsTerminalTheme) this.startThemeSync();
   }
   /**
    * Stop timers, observers and document listeners. Engines are not
@@ -24384,10 +24523,11 @@ var CliPanelController = class {
   /** Called by the view once a pane's terminal engine is running. */
   registerEngine(tabId, paneId, engine) {
     if (!this.findTab(tabId)) return;
+    const known = this.engines.get(paneId) === engine;
     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();
+    if (this.snapshot.terminalTheme && !known) engine.setTheme(this.snapshot.terminalTheme);
+    if (this.followsTerminalTheme) this.startThemeSync();
   }
   getEngine(paneId) {
     return this.engines.get(paneId ?? this.snapshot.activePaneId);
@@ -24532,11 +24672,12 @@ var CliPanelController = class {
     this.documentListenersAttached = false;
   }
   /* ─── Theme sync ────────────────────────────────────────── */
-  /** Read the first terminal's theme and derive the panel colours from it. */
-  syncThemeFromEngine() {
-    const engine = this.engines.values().next().value;
-    if (!engine) return;
-    const theme = engine.getTerminal().options.theme;
+  /** Read the first terminal's theme (or use `theme`) and derive the panel colours from it. */
+  syncThemeFromEngine(theme) {
+    if (!theme) {
+      const engine = this.engines.values().next().value;
+      theme = engine?.getTerminal().options.theme;
+    }
     if (!theme) return;
     const styles = sameTerminalTheme(theme, this.resolvedTheme.terminal) ? this.resolvedTheme.styles : derivePanelThemeStyles(theme);
     if (sameRecord(styles, this.snapshot.themeStyles)) return;
@@ -24563,7 +24704,7 @@ var CliPanelController = class {
     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();
+    if (this.followsTerminalTheme) this.syncThemeFromEngine();
   }
   /** Follow the system's light/dark setting while the theme is 'auto'. */
   watchSystemScheme() {
@@ -24662,7 +24803,7 @@ var CliPanelController = class {
     if (this.themeObserver) {
       this.stopThemeSync();
       setTimeout(() => {
-        if (this.snapshot.syncTheme && !this.themeObserver) this.startThemeSync();
+        if (this.followsTerminalTheme && !this.themeObserver) this.startThemeSync();
       }, 0);
     }
     try {