@codexhost/cli-darwin-x64 0.1.3 → 0.1.5

package/README.md

@@ -7,7 +7,7 @@ Run Pi and Claude Code as first-class external harnesses inside Codex Desktop.
 ## Install
 
 ```bash
-npm install -g @codexhost/cli@0.1.3
+npm install -g @codexhost/cli@0.1.5
 ```
 
 Do not install this package directly. npm selects it through the optional dependencies of `@codexhost/cli`.

package/app/codexhost-distribution.json

@@ -1 +1 @@
-{"schemaVersion":1,"version":"0.1.3","distribution":"npm","target":"macos-x64"}
+{"schemaVersion":1,"version":"0.1.5","distribution":"npm","target":"macos-x64"}

package/app/desktop-controller.mjs

@@ -788,30 +788,12 @@ async function installRendererDraftPrewarmPolicy(inspector, rendererWebContentsI
 }
 
 // packages/desktop-control/src/renderer-control-session.ts
-var RendererCompatibilityError = class extends Error {
-  constructor(capability, reason, cause) {
-    super(`Renderer compatibility boundary unavailable: ${capability}`, { cause });
-    this.capability = capability;
-    this.reason = reason;
-    this.name = "RendererCompatibilityError";
-  }
-  capability;
-  reason;
-};
 function isRecord4(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function sleep(milliseconds) {
   return new Promise((resolve) => setTimeout(resolve, milliseconds));
 }
-async function requireCompatibilityBoundary(capability, reason, operation) {
-  try {
-    return await operation();
-  } catch (error) {
-    if (error instanceof RendererCompatibilityError) throw error;
-    throw new RendererCompatibilityError(capability, reason, error);
-  }
-}
 function sameAgents(actual, expected) {
   return actual.length === expected.length && actual.every((agent, index) => agent === expected[index]);
 }
@@ -1040,39 +1022,26 @@ var InstalledRendererControlSession = class {
     );
     const existing = await this.operations.readBinding(this.inspector, selected.id).catch(() => null);
     if (existing !== null) {
-      const binding2 = await requireCompatibilityBoundary(
-        "agent-routing",
-        "agent-routing-structure-unavailable",
-        () => validateBindingStatus(existing, this.enabledAgents)
-      );
+      const binding2 = validateBindingStatus(existing, this.enabledAgents);
       this.#snapshot = { ...this.#snapshot, renderer: selected, binding: binding2 };
       return this.#snapshot;
     }
-    const titlePolicyReadiness = await requireCompatibilityBoundary(
-      "title-isolation",
-      "title-isolation-structure-unavailable",
-      () => waitForRendererTitlePolicyReady(
-        () => this.operations.markTitlePolicyReady(this.inspector, selected.id),
-        { timeoutMs: this.timeoutMs, pollIntervalMs: this.pollIntervalMs }
-      )
+    const titlePolicyReadiness = await waitForRendererTitlePolicyReady(
+      () => this.operations.markTitlePolicyReady(this.inspector, selected.id),
+      { timeoutMs: this.timeoutMs, pollIntervalMs: this.pollIntervalMs }
     );
     await this.operations.execute(this.inspector, selected.id, this.rendererSource);
-    const binding = await requireCompatibilityBoundary(
-      "agent-routing",
-      "agent-routing-structure-unavailable",
-      () => waitForBinding(
-        this.inspector,
-        this.operations,
-        selected.id,
-        this.enabledAgents,
-        this.timeoutMs,
-        this.pollIntervalMs
-      )
+    const binding = await waitForBinding(
+      this.inspector,
+      this.operations,
+      selected.id,
+      this.enabledAgents,
+      this.timeoutMs,
+      this.pollIntervalMs
     );
-    const draftPrewarmPolicy = await requireCompatibilityBoundary(
-      "draft-routing",
-      "draft-routing-structure-unavailable",
-      () => this.operations.installDraftPrewarmPolicy(this.inspector, selected.id)
+    const draftPrewarmPolicy = await this.operations.installDraftPrewarmPolicy(
+      this.inspector,
+      selected.id
     );
     this.#snapshot = {
       ...this.#snapshot,
@@ -1118,47 +1087,49 @@ var InstalledRendererControlSession = class {
     this.inspector.close();
   }
 };
+var startupTraceStartedAt = Date.now();
+function startupTrace(stage) {
+  if (process.env.CODEXHOST_STARTUP_TRACE !== "1") return;
+  console.error(
+    `[codexhost startup +${Date.now() - startupTraceStartedAt}ms] renderer-session: ${stage}`
+  );
+}
 async function createRendererControlSession(options) {
   const enabledAgents = options.enabledAgents ?? ["codex", "pi"];
   const timeoutMs = options.timeoutMs ?? 3e4;
   const pollIntervalMs = options.pollIntervalMs ?? 250;
   const operations = options.operations ?? defaultOperations;
+  startupTrace("waiting for initial Renderer");
   const initial = await waitForRenderer(options.inspector, operations, timeoutMs, pollIntervalMs);
-  const titlePolicy = await requireCompatibilityBoundary(
-    "title-isolation",
-    "title-isolation-structure-unavailable",
-    () => operations.installTitlePolicy(options.inspector, initial.id)
-  );
+  startupTrace("installing title policy");
+  const titlePolicy = await operations.installTitlePolicy(options.inspector, initial.id);
+  startupTrace("reloading Renderer");
   await operations.reload(options.inspector, initial.id);
+  startupTrace("waiting for reloaded Renderer");
   const selected = await waitForRenderer(options.inspector, operations, timeoutMs, pollIntervalMs);
-  const titlePolicyReadiness = await requireCompatibilityBoundary(
-    "title-isolation",
-    "title-isolation-structure-unavailable",
-    () => waitForRendererTitlePolicyReady(
-      () => operations.markTitlePolicyReady(options.inspector, selected.id),
-      {
-        timeoutMs,
-        pollIntervalMs
-      }
-    )
-  );
-  await operations.execute(options.inspector, selected.id, options.rendererSource);
-  const binding = await requireCompatibilityBoundary(
-    "agent-routing",
-    "agent-routing-structure-unavailable",
-    () => waitForBinding(
-      options.inspector,
-      operations,
-      selected.id,
-      enabledAgents,
+  startupTrace("waiting for title policy readiness");
+  const titlePolicyReadiness = await waitForRendererTitlePolicyReady(
+    () => operations.markTitlePolicyReady(options.inspector, selected.id),
+    {
       timeoutMs,
       pollIntervalMs
-    )
+    }
+  );
+  startupTrace("injecting Renderer bundle");
+  await operations.execute(options.inspector, selected.id, options.rendererSource);
+  startupTrace("waiting for Renderer binding");
+  const binding = await waitForBinding(
+    options.inspector,
+    operations,
+    selected.id,
+    enabledAgents,
+    timeoutMs,
+    pollIntervalMs
   );
-  const draftPrewarmPolicy = await requireCompatibilityBoundary(
-    "draft-routing",
-    "draft-routing-structure-unavailable",
-    () => operations.installDraftPrewarmPolicy(options.inspector, selected.id)
+  startupTrace("installing draft prewarm policy");
+  const draftPrewarmPolicy = await operations.installDraftPrewarmPolicy(
+    options.inspector,
+    selected.id
   );
   return new InstalledRendererControlSession(
     options.inspector,
@@ -1179,12 +1150,15 @@ async function createRendererControlSession(options) {
 async function installRendererControlSession(options) {
   const timeoutMs = options.timeoutMs ?? 3e4;
   const pollIntervalMs = options.pollIntervalMs ?? 250;
+  startupTrace("waiting for Electron Inspector target");
   const target = await waitForInspectorTarget(options.inspectorEndpoint, {
     timeoutMs,
     pollIntervalMs
   });
+  startupTrace("connecting to Electron Inspector");
   const inspector = await CdpClient.connect(target.webSocketDebuggerUrl);
   try {
+    startupTrace("enabling Inspector Runtime domain");
     await inspector.command("Runtime.enable");
     return await createRendererControlSession({
       ...options,
@@ -1203,6 +1177,16 @@ var PRODUCTION_INSTALL_TIMEOUT_MS = 9e4;
 var DESKTOP_CONTROLLER_READINESS_MAX_BYTES = 512;
 var TRANSIENT_INSTALL_ATTEMPTS = 3;
 var TRANSIENT_INSTALL_RETRY_MS = 250;
+var RECOVERY_RETRY_INITIAL_MS = 3e4;
+var RECOVERY_RETRY_MAX_MS = 3e5;
+var startupTraceStartedAt2 = Date.now();
+function startupTrace2(stage, detail) {
+  if (process.env.CODEXHOST_STARTUP_TRACE !== "1") return;
+  const suffix = detail === void 0 ? "" : `: ${detail instanceof Error ? detail.message : String(detail)}`;
+  console.error(
+    `[codexhost startup +${Date.now() - startupTraceStartedAt2}ms] controller: ${stage}${suffix}`
+  );
+}
 function validCompatibilityIssue(state, issue) {
   const keys = Object.keys(issue);
   if (state === "compatible-with-warning") {
@@ -1217,24 +1201,10 @@ function validCompatibilityIssue(state, issue) {
       "settings-surface"
     ].includes(issue.capability) && issue.reason === "capability-unavailable" && issue.observedIdentity === void 0 && keys.length === 2;
   }
-  if (state === "incompatible") {
-    const pair = `${issue.capability}:${issue.reason}`;
-    return [
-      "title-isolation:title-isolation-structure-unavailable",
-      "draft-routing:draft-routing-structure-unavailable",
-      "agent-routing:agent-routing-structure-unavailable"
-    ].includes(pair) && issue.observedIdentity === void 0 && keys.length === 2;
-  }
-  return state === "detection-failed" && issue.capability === "compatibility-detection" && issue.reason === "inspection-failed" && issue.observedIdentity === void 0 && keys.length === 2;
+  return false;
 }
 function serializeDesktopControllerReadiness(readiness) {
-  if (readiness.schemaVersion !== 2 || ![
-    "compatible",
-    "compatible-with-warning",
-    "degraded",
-    "incompatible",
-    "detection-failed"
-  ].includes(readiness.state) || !Array.isArray(readiness.issues) || readiness.issues.length > 1 || readiness.state === "compatible" && readiness.issues.length !== 0 || readiness.state !== "compatible" && (readiness.issues.length !== 1 || !readiness.issues[0] || !validCompatibilityIssue(readiness.state, readiness.issues[0])) || Object.keys(readiness).length !== 3) {
+  if (readiness.schemaVersion !== 2 || !["compatible", "compatible-with-warning", "degraded"].includes(readiness.state) || !Array.isArray(readiness.issues) || readiness.issues.length > 1 || readiness.state === "compatible" && readiness.issues.length !== 0 || readiness.state !== "compatible" && (readiness.issues.length !== 1 || !readiness.issues[0] || !validCompatibilityIssue(readiness.state, readiness.issues[0])) || Object.keys(readiness).length !== 3) {
     throw new Error("Desktop Controller readiness is invalid");
   }
   const line = JSON.stringify(readiness);
@@ -1344,15 +1314,12 @@ function isTransientElectronInstallError(error) {
   }
   return false;
 }
-function shouldRetryInstallError(error) {
-  return !(error instanceof RendererCompatibilityError) || isTransientElectronInstallError(error);
-}
 async function installProductionSession(options, dependencies) {
   for (let attempt = 1; attempt <= TRANSIENT_INSTALL_ATTEMPTS; attempt += 1) {
     try {
       return await dependencies.install(options);
     } catch (error) {
-      if (attempt === TRANSIENT_INSTALL_ATTEMPTS || !shouldRetryInstallError(error)) {
+      if (attempt === TRANSIENT_INSTALL_ATTEMPTS || !isTransientElectronInstallError(error)) {
         throw error;
       }
       await dependencies.sleep(TRANSIENT_INSTALL_RETRY_MS);
@@ -1361,12 +1328,25 @@ async function installProductionSession(options, dependencies) {
   throw new Error("Desktop Controller exhausted Renderer installation attempts");
 }
 async function runDesktopController(options, signal, dependencies = defaultDependencies) {
+  const configuration = `Object.defineProperty(window, "__codexhostProductionConfigV1", { configurable: true, value: { defaultAgent: ${JSON.stringify(options.defaultAgent)} } });`;
+  const now = dependencies.now ?? Date.now;
   let session;
-  try {
+  let nextRecoveryAt = 0;
+  let recoveryDelayMs = RECOVERY_RETRY_INITIAL_MS;
+  const recordRecoveryFailure = () => {
+    nextRecoveryAt = now() + recoveryDelayMs;
+    recoveryDelayMs = Math.min(recoveryDelayMs * 2, RECOVERY_RETRY_MAX_MS);
+  };
+  const recordRecoverySuccess = () => {
+    nextRecoveryAt = 0;
+    recoveryDelayMs = RECOVERY_RETRY_INITIAL_MS;
+  };
+  const createSession = async () => {
+    startupTrace2("reading Renderer bundle");
     const rendererSource = await dependencies.readRenderer(options.rendererPath);
     if (rendererSource.trim().length === 0) throw new Error("production Renderer Bundle is empty");
-    const configuration = `Object.defineProperty(window, "__codexhostProductionConfigV1", { configurable: true, value: { defaultAgent: ${JSON.stringify(options.defaultAgent)} } });`;
-    session = await installProductionSession(
+    startupTrace2("installing Renderer Session");
+    const installed = await installProductionSession(
       {
         inspectorEndpoint: options.inspectorEndpoint,
         rendererSource: `${configuration}
@@ -1376,19 +1356,17 @@ ${rendererSource}`,
       },
       dependencies
     );
+    startupTrace2("Renderer Session installed");
+    return installed;
+  };
+  startupTrace2("initialization started");
+  try {
+    session = await createSession();
+    recordRecoverySuccess();
   } catch (error) {
-    dependencies.ready(
-      error instanceof RendererCompatibilityError && !isTransientElectronInstallError(error) ? {
-        schemaVersion: 2,
-        state: "incompatible",
-        issues: [{ capability: error.capability, reason: error.reason }]
-      } : {
-        schemaVersion: 2,
-        state: "detection-failed",
-        issues: [{ capability: "compatibility-detection", reason: "inspection-failed" }]
-      }
-    );
-    return;
+    startupTrace2("initial Renderer Session unavailable", error);
+    session = void 0;
+    recordRecoveryFailure();
   }
   let operation = Promise.resolve(void 0);
   const useSession = (callback) => {
@@ -1399,22 +1377,48 @@ ${rendererSource}`,
     );
     return next;
   };
+  const resetSession = () => {
+    session?.close();
+    session = void 0;
+  };
+  const ensureSession = async () => {
+    if (!session) session = await createSession();
+    else await session.ensureInstalled();
+    return session;
+  };
+  const recoverSession = async () => {
+    try {
+      const current = await ensureSession();
+      recordRecoverySuccess();
+      return current;
+    } catch (error) {
+      resetSession();
+      recordRecoveryFailure();
+      throw error;
+    }
+  };
   let attachmentServer;
   try {
+    startupTrace2("starting attachment server");
     attachmentServer = await dependencies.startAttachmentServer({
       port: options.attachmentPort,
       nonce: options.attachmentNonce,
       attach: () => useSession(async () => {
-        await session.ensureInstalled();
-        await session.activateDesktop();
+        const current = await recoverSession();
+        await current.activateDesktop();
       }),
       compatibilityUpdate: () => useSession(async () => {
-        await session.ensureInstalled();
-        return session.requestCompatibilityUpdate();
+        const current = await recoverSession();
+        return current.requestCompatibilityUpdate();
       }),
-      shutdown: () => useSession(() => session.quitDesktop())
+      shutdown: () => useSession(async () => {
+        const current = await recoverSession();
+        await current.quitDesktop();
+      })
     });
-    const issues = session.snapshot.titlePolicy.warnings;
+    startupTrace2("attachment server ready");
+    const issues = session?.snapshot.titlePolicy.warnings ?? [];
+    startupTrace2("publishing readiness");
     dependencies.ready({
       schemaVersion: 2,
       state: issues.length === 0 ? "compatible" : "compatible-with-warning",
@@ -1422,12 +1426,19 @@ ${rendererSource}`,
     });
     while (!signal.aborted) {
       await dependencies.sleep(dependencies.monitorIntervalMs);
-      if (!signal.aborted) await useSession(() => session.ensureInstalled());
+      if (signal.aborted) continue;
+      await useSession(async () => {
+        if (!session && now() < nextRecoveryAt) return;
+        try {
+          await recoverSession();
+        } catch {
+        }
+      });
     }
   } finally {
     await attachmentServer?.close();
     await operation;
-    session.close();
+    resetSession();
   }
 }
 

package/app/host-runtime.mjs

@@ -50582,7 +50582,7 @@ function isHostApprovalRequestId(value) {
 function isHostQuestionRequestId(value) {
   return typeof value === "number" && Number.isSafeInteger(value) && value >= HOST_QUESTION_REQUEST_ID_MIN && value <= HOST_QUESTION_REQUEST_ID_MAX;
 }
-function classifyCreateRequestRoute(request, defaultAgent) {
+function classifyCreateRequestRoute(request, defaultAgent2) {
   const route = decodeCreateRoute(request);
   if (!route) return null;
   if (route.harnessId !== "codex") {
@@ -50596,8 +50596,8 @@ function classifyCreateRequestRoute(request, defaultAgent) {
   return {
     requestMethod: "thread/start",
     modelCarrier: "official-model",
-    selectedHarness: defaultAgent,
-    selectionSource: defaultAgent === "pi" ? "default-agent" : "official-model"
+    selectedHarness: defaultAgent2,
+    selectionSource: defaultAgent2 === "pi" ? "default-agent" : "official-model"
   };
 }
 function requestObject(request) {
@@ -53101,8 +53101,7 @@ function createBackgroundUpdateManager(dependencies = {}) {
           kind: "npm",
           node_path: await requireRegularFile(options.nodePath, "npm Node.js executable"),
           npm_cli_path: await requireRegularFile(options.npmCliPath, "npm CLI"),
-          npm_launcher_path: await requireRegularFile(options.npmLauncherPath, "npm codexhost launcher"),
-          package_root: requireAbsolutePath(options.packageRoot, "npm platform package root")
+          npm_launcher_path: await requireRegularFile(options.npmLauncherPath, "npm codexhost launcher")
         });
       } catch (error52) {
         await writeFailedStatus(common.statusPath, common.version, "npm", error52);
@@ -53164,20 +53163,6 @@ var ERROR_MAX_LENGTH = 500;
 var CONTROLLER_TIMEOUT_MS = 5e3;
 var UPDATER_READY_TIMEOUT_MS = 1e4;
 var UPDATER_READY_POLL_MS = 20;
-async function startCompatibilityUpdate(coordinator) {
-  try {
-    const check2 = await coordinator.check();
-    if (check2.updateAvailable && check2.installationAvailable) {
-      void coordinator.start().catch(() => void 0);
-      return "update-started";
-    }
-    if (check2.error === null && check2.latestVersion !== null && check2.currentVersion === check2.latestVersion) {
-      return "current";
-    }
-  } catch {
-  }
-  return "unavailable";
-}
 function boundedError(error52) {
   const message3 = error52 instanceof Error ? error52.message : String(error52);
   return message3.slice(0, ERROR_MAX_LENGTH) || "Update operation failed";
@@ -53428,31 +53413,25 @@ function createHostUpdateCoordinator(options) {
 // packages/host-runtime/src/release-main.ts
 var STOCK_CODEX_PATH_ENV = "CODEXHOST_STOCK_CODEX_PATH";
 var DEFAULT_AGENT_ENV = "CODEXHOST_DEFAULT_AGENT";
-var COMPATIBILITY_UPDATE_ARGUMENT = "--codexhost-compatibility-update";
 var arguments_ = process.argv.slice(2);
 var updateCoordinator = createHostUpdateCoordinator({
   hostRuntimePath: fileURLToPath(import.meta.url),
   environment: process.env
 });
-if (arguments_.length === 1 && arguments_[0] === COMPATIBILITY_UPDATE_ARGUMENT) {
-  process.stdout.write(`${await startCompatibilityUpdate(updateCoordinator)}
-`);
-} else {
-  const stockCodexPath = process.env[STOCK_CODEX_PATH_ENV];
-  if (!stockCodexPath) throw new Error(`${STOCK_CODEX_PATH_ENV} is required`);
-  const defaultAgent = process.env[DEFAULT_AGENT_ENV];
-  if (defaultAgent !== "codex" && defaultAgent !== "pi") {
-    throw new Error(`${DEFAULT_AGENT_ENV} must be 'codex' or 'pi'`);
-  }
-  const externalAdapters = createExternalHarnessAdapters(process.env);
-  const host = new AppServerHost({
-    stockCodexPath,
-    arguments: arguments_,
-    defaultAgent,
-    environment: process.env,
-    externalAdapters,
-    updateCoordinator
-  });
-  void prefetchClaudeCodeModelCatalog(externalAdapters);
-  process.exitCode = await host.run();
-}
+var stockCodexPath = process.env[STOCK_CODEX_PATH_ENV];
+if (!stockCodexPath) throw new Error(`${STOCK_CODEX_PATH_ENV} is required`);
+var defaultAgent = process.env[DEFAULT_AGENT_ENV];
+if (defaultAgent !== "codex" && defaultAgent !== "pi") {
+  throw new Error(`${DEFAULT_AGENT_ENV} must be 'codex' or 'pi'`);
+}
+var externalAdapters = createExternalHarnessAdapters(process.env);
+var host = new AppServerHost({
+  stockCodexPath,
+  arguments: arguments_,
+  defaultAgent,
+  environment: process.env,
+  externalAdapters,
+  updateCoordinator
+});
+void prefetchClaudeCodeModelCatalog(externalAdapters);
+process.exitCode = await host.run();

package/app/renderer-extension.js

@@ -17223,9 +17223,52 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   var THREAD_PERMISSION_MODE_SELECT_METHOD = "codexhost/thread/permission-mode/select";
   var THREAD_OWNERSHIP_LIST_METHOD = "codexhost/thread/ownership/list";
   var THREAD_USAGE_INSPECT_METHOD = "codexhost/thread/usage/inspect";
+  var THREAD_TOKEN_USAGE_UPDATED_METHOD = "thread/tokenUsage/updated";
   var UPDATE_CHECK_METHOD = "codexhost/update/check";
   var UPDATE_START_METHOD = "codexhost/update/start";
   var UPDATE_STATUS_METHOD = "codexhost/update/status";
+  function isRecord4(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  }
+  function notifiedThreadId(notification) {
+    if (!isRecord4(notification) || notification.method !== THREAD_TOKEN_USAGE_UPDATED_METHOD) {
+      return null;
+    }
+    const params = notification.params;
+    if (!isRecord4(params)) return null;
+    const parsed = hostThreadIdSchema.safeParse(params.threadId);
+    return parsed.success ? parsed.data : null;
+  }
+  function createThreadUsageSubscriptionRelay() {
+    const listeners = /* @__PURE__ */ new Set();
+    let removeNotificationCallback = null;
+    return {
+      connect(client) {
+        if (removeNotificationCallback || listeners.size === 0) return;
+        try {
+          removeNotificationCallback = client.subscribeThreadUsage?.((update) => {
+            for (const listener of listeners) listener(update);
+          }) ?? null;
+        } catch {
+          removeNotificationCallback = null;
+        }
+      },
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+          if (listeners.size > 0) return;
+          removeNotificationCallback?.();
+          removeNotificationCallback = null;
+        };
+      },
+      dispose() {
+        removeNotificationCallback?.();
+        removeNotificationCallback = null;
+        listeners.clear();
+      }
+    };
+  }
   function createRendererModelClient(candidates) {
     const managers = candidates.filter(
       (candidate) => typeof candidate.sendRequest === "function"
@@ -17279,6 +17322,29 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         return result;
       },
       inspectThreadUsage,
+      subscribeThreadUsage(listener) {
+        if (typeof manager.addNotificationCallback !== "function") return () => void 0;
+        let disposed = false;
+        const generations = /* @__PURE__ */ new Map();
+        const removeNotificationCallback = manager.addNotificationCallback(
+          THREAD_TOKEN_USAGE_UPDATED_METHOD,
+          (notification) => {
+            const threadId = notifiedThreadId(notification);
+            if (!threadId) return;
+            const generation = (generations.get(threadId) ?? 0) + 1;
+            generations.set(threadId, generation);
+            void inspectThreadUsage({ threadId }).then((update) => {
+              if (!disposed && generations.get(threadId) === generation) listener(update);
+            }).catch(() => void 0);
+          }
+        );
+        return () => {
+          if (disposed) return;
+          disposed = true;
+          generations.clear();
+          removeNotificationCallback();
+        };
+      },
       selectThreadModel,
       selectThreadThinking,
       selectThreadPermissionMode,
@@ -17331,7 +17397,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   function isTransportModelId(model) {
     return isPiTransportModelId(model) || isClaudeTransportModelId(model);
   }
-  function isRecord4(value) {
+  function isRecord5(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
   }
   function piTransportModelId(model, thinkingOptionId) {
@@ -17402,7 +17468,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     return (typeof value === "object" || typeof value === "function") && value !== null && typeof value.prewarmThreadStart === "function";
   }
   function isActiveRequestManager(value) {
-    if (!isRecord4(value) || typeof value.sendRequest !== "function") return false;
+    if (!isRecord5(value) || typeof value.sendRequest !== "function") return false;
     const source = Function.prototype.toString.call(value.sendRequest);
     return source.includes("send-cli-request-for-host") && hasPrewarmMethod(value.requestClient);
   }
@@ -17438,7 +17504,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       let hook = fiber.memoizedState;
       for (let hookIndex = 0; hook && hookIndex < 100; hookIndex += 1) {
         const hookState = hook.memoizedState;
-        if (isRecord4(hookState)) {
+        if (isRecord5(hookState)) {
           const requestClient = hookState.requestClient;
           if (isActiveRequestManager(hookState) && matchesCurrentPrewarmSignature(hookState)) {
             targets.add(hookState);
@@ -17455,10 +17521,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     return [...targets];
   }
   function isModelAtomState(value) {
-    return isRecord4(value) && isRecord4(value.atom) && typeof value.get === "function" && typeof value.set === "function";
+    return isRecord5(value) && isRecord5(value.atom) && typeof value.get === "function" && typeof value.set === "function";
   }
   function isModelSelection(value) {
-    return value === null || isRecord4(value) && "model" in value && "reasoningEffort" in value;
+    return value === null || isRecord5(value) && "model" in value && "reasoningEffort" in value;
   }
   function sameModelPowerSelection(left, right) {
     return left === right || left !== null && right !== null && left.model === right.model && left.reasoningEffort === right.reasoningEffort;
@@ -17470,7 +17536,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     const first = pairs[0];
     if (!first) return null;
     const value = first.optimistic.get();
-    if (isRecord4(value) && "modelSettings" in value) return first.optimistic;
+    if (isRecord5(value) && "modelSettings" in value) return first.optimistic;
     if (first.optimistic.atom === first.committed.atom) return null;
     if (!pairs.every(
       (pair) => pair.optimistic.atom === first.optimistic.atom && pair.committed.atom === first.committed.atom && sameTarget2(pair.target, first.target)
@@ -17504,7 +17570,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       let fiber = fiberName ? Object.getOwnPropertyDescriptor(button, fiberName)?.value : null;
       for (let depth = 0; fiber && depth < 60; depth += 1) {
         const props = fiber.memoizedProps;
-        if (isRecord4(props) && typeof props.onSelectModel === "function" && typeof props.onSelectReasoningEffort === "function" && "reasoningEffort" in props && isRecord4(props.fallbackPowerSelection)) {
+        if (isRecord5(props) && typeof props.onSelectModel === "function" && typeof props.onSelectReasoningEffort === "function" && "reasoningEffort" in props && isRecord5(props.fallbackPowerSelection)) {
           matches.push({ callback: props.onSelectModel, value: props.reasoningEffort });
         }
         const parent = fiber.return;
@@ -17529,9 +17595,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       let fiber = fiberName ? Object.getOwnPropertyDescriptor(button, fiberName)?.value : null;
       for (let depth = 0; fiber && depth < 60; depth += 1) {
         const props = fiber.memoizedProps;
-        if (!control && isRecord4(props) && "model" in props && "reasoningEffort" in props && typeof props.onSelectModel === "function") {
+        if (!control && isRecord5(props) && "model" in props && "reasoningEffort" in props && typeof props.onSelectModel === "function") {
           const selection = { model: props.model, reasoningEffort: props.reasoningEffort };
-          const fallbackSelection = isRecord4(props.fallbackPowerSelection) ? props.fallbackPowerSelection : null;
+          const fallbackSelection = isRecord5(props.fallbackPowerSelection) ? props.fallbackPowerSelection : null;
           control = {
             codexSelection: isTransportModelId(selection.model) ? fallbackSelection : selection,
             selection,
@@ -17557,8 +17623,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     let fiber = findComposerFiber(composer);
     for (let depth = 0; fiber && depth < 120; depth += 1) {
       const updateQueue = fiber.updateQueue;
-      const memoCache = isRecord4(updateQueue) ? updateQueue.memoCache : null;
-      const data = isRecord4(memoCache) && Array.isArray(memoCache.data) ? memoCache.data : [];
+      const memoCache = isRecord5(updateQueue) ? updateQueue.memoCache : null;
+      const data = isRecord5(memoCache) && Array.isArray(memoCache.data) ? memoCache.data : [];
       for (let index = 0; index + 1 < data.length; index += 1) {
         const compact = data[index];
         const resolved = data[index + 1];
@@ -17571,7 +17637,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         } catch {
           continue;
         }
-        if (!isRecord4(value) || !("modelSettings" in value)) continue;
+        if (!isRecord5(value) || !("modelSettings" in value)) continue;
         const target = resolved[2] === null || resolved[2].startsWith("client-new-thread:") ? ["default", resolved[2]] : ["conversation", resolved[2]];
         compactPairs.push({ optimistic: compact[1], committed: resolved[3], target });
       }
@@ -17633,7 +17699,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         reasoningEffort: reasoningEffort.value
       };
     }
-    if (!isRecord4(current) || !("modelSettings" in current)) return null;
+    if (!isRecord5(current) || !("modelSettings" in current)) return null;
     const picker = findModelPickerControl(composer);
     if (!picker.found) return null;
     return {
@@ -17648,10 +17714,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     };
   }
   function isMainProcessTitlePolicyReady(value) {
-    return isRecord4(value) && value.state === "ready";
+    return isRecord5(value) && value.state === "ready";
   }
   function isDraftPrewarmPolicyReady(value) {
-    return isRecord4(value) && value.state === "ready" && typeof value.clear === "function";
+    return isRecord5(value) && value.state === "ready" && typeof value.clear === "function";
   }
   async function waitForRendererDraftPrewarmPolicy(target) {
     const deadline = Date.now() + DRAFT_PREWARM_POLICY_WAIT_TIMEOUT_MS;
@@ -17695,9 +17761,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       dispose() {
       }
     });
+    const usageSubscription = createThreadUsageSubscriptionRelay();
     const currentModelClient = () => {
       const client = createRendererModelClient(findActivePrewarmTargets(document));
       if (!client) throw new Error("Renderer Model request manager is unavailable");
+      usageSubscription.connect(client);
       return client;
     };
     const modelControl = Object.freeze({
@@ -17705,6 +17773,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       inspectHarness: (input) => currentModelClient().inspectHarness(input),
       inspectThread: (input) => currentModelClient().inspectThread(input),
       inspectThreadUsage: (input) => currentModelClient().inspectThreadUsage(input),
+      subscribeThreadUsage: (listener) => usageSubscription.subscribe(listener),
       listThreadOwnership: (input) => currentModelClient().listThreadOwnership(input),
       selectThreadModel: (input) => currentModelClient().selectThreadModel(input),
       selectThreadThinking: (input) => currentModelClient().selectThreadThinking(input),
@@ -17783,6 +17852,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         disposed = true;
         observer.disconnect();
         forkControl.dispose();
+        usageSubscription.dispose();
         modelController = null;
         officialSelection = null;
         hasOfficialSelection = false;
@@ -17827,11 +17897,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       return null;
     }
   }
-  function isRecord5(value) {
+  function isRecord6(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
   }
   function parseExternalConfiguration(value) {
-    if (!isRecord5(value)) return void 0;
+    if (!isRecord6(value)) return void 0;
     const model = harnessModelRefSchema.safeParse(value.model);
     if (!model.success) return void 0;
     const thinkingOptionId = harnessThinkingOptionIdSchema.safeParse(value.thinkingOptionId);
@@ -17846,9 +17916,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       const raw = storage.getItem(RENDERER_NEW_THREAD_PREFERENCE_KEY);
       if (!raw) return void 0;
       const parsed = JSON.parse(raw);
-      if (!isRecord5(parsed) || parsed.version !== 1) return void 0;
+      if (!isRecord6(parsed) || parsed.version !== 1) return void 0;
       if (!KNOWN_RENDERER_AGENTS.some((agent) => agent === parsed.lastAgent)) return void 0;
-      const externalByAgent = isRecord5(parsed.externalByAgent) ? parsed.externalByAgent : {};
+      const externalByAgent = isRecord6(parsed.externalByAgent) ? parsed.externalByAgent : {};
       const pi = parseExternalConfiguration(externalByAgent.pi);
       const claudeCode = parseExternalConfiguration(externalByAgent["claude-code"]);
       return {
@@ -17918,7 +17988,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   var GET_LOCALE_OVERRIDE_URL = "vscode://codex/get-setting";
   var GET_LOCALE_INFO_URL = "vscode://codex/locale-info";
   var DEFAULT_LOCALE_REQUEST_TIMEOUT_MS = 750;
-  function isRecord6(value) {
+  function isRecord7(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
   }
   function canonicalLocale(value) {
@@ -17940,7 +18010,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     return new DOMException("The operation was aborted", "AbortError");
   }
   function parseLocaleOverride(value) {
-    if (!isRecord6(value) || !("value" in value)) {
+    if (!isRecord7(value) || !("value" in value)) {
       throw new Error("Codex locale override response is malformed");
     }
     if (value.value === null) return { value: null };
@@ -17955,7 +18025,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     return locale;
   }
   function parseLocaleInfo(value) {
-    if (!isRecord6(value)) throw new Error("Codex locale info response is malformed");
+    if (!isRecord7(value)) throw new Error("Codex locale info response is malformed");
     return {
       ideLocale: optionalLocale(value.ideLocale, "IDE locale"),
       systemLocale: optionalLocale(value.systemLocale, "system locale")
@@ -17984,7 +18054,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       const onAbort = () => settle(() => reject(abortError()));
       const onMessage = (event) => {
         const message2 = event.data;
-        if (!isRecord6(message2) || message2.type !== "fetch-response") return;
+        if (!isRecord7(message2) || message2.type !== "fetch-response") return;
         if (message2.requestId !== requestId) return;
         if (message2.responseType !== "success" || typeof message2.status !== "number" || message2.status < 200 || message2.status >= 300 || typeof message2.bodyJsonString !== "string") {
           settle(() => reject(new Error("Codex locale request failed")));
@@ -18098,15 +18168,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     locale: "en",
     title: "Settings",
     close: "Close settings",
-    interfaceLanguage: "Interface language",
-    automaticLanguage: "Automatic (follow Codex)",
-    englishLanguage: "English",
-    simplifiedChineseLanguage: "Simplified Chinese",
-    otherCodexLanguage: "Other Codex language",
-    languageUpdateFailed: "Could not update the language setting.",
+    starOnGitHub: "Give us a Star~",
     sectionsLabel: "Settings sections",
     pageUnavailable: "Page unavailable",
-    availability: "Availability",
+    inDevelopment: "In development",
     notAvailable: "Not available",
     runtimeCapabilityNotInstalled: "This runtime capability is not installed yet.",
     openSettings: "Open codexhost settings",
@@ -18125,11 +18190,15 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     updateChecking: "Checking for updates...",
     updateDownloading: "Downloading update...",
     updatePreparing: "Preparing update...",
+    updateWaitingForExit: "Waiting for the application to close...",
+    updateInstalling: "Installing update...",
+    updateInstallingNpm: "Installing update through npm...",
     updateRequestTimeout: "The update service did not respond. Try again.",
     updateRestarting: "Restarting to finish the update...",
     updateSucceeded: "Update installed successfully.",
     updateFailed: "Update failed.",
     updateRetry: "Retry",
+    updateManualNpmDescription: "To update manually, quit codexhost and run this command:",
     updateDownloadFromReleases: "Download from GitHub Releases",
     pageLabels: Object.freeze({
       connections: "Connections",
@@ -18143,15 +18212,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     locale: "zh-CN",
     title: "\u8BBE\u7F6E",
     close: "\u5173\u95ED\u8BBE\u7F6E",
-    interfaceLanguage: "\u754C\u9762\u8BED\u8A00",
-    automaticLanguage: "\u81EA\u52A8\uFF08\u8DDF\u968F Codex\uFF09",
-    englishLanguage: "English",
-    simplifiedChineseLanguage: "\u7B80\u4F53\u4E2D\u6587",
-    otherCodexLanguage: "\u5176\u4ED6 Codex \u8BED\u8A00",
-    languageUpdateFailed: "\u65E0\u6CD5\u66F4\u65B0\u8BED\u8A00\u8BBE\u7F6E\u3002",
+    starOnGitHub: "\u70B9\u4E2A Star~",
     sectionsLabel: "\u8BBE\u7F6E\u5206\u7C7B",
     pageUnavailable: "\u9875\u9762\u4E0D\u53EF\u7528",
-    availability: "\u53EF\u7528\u6027",
+    inDevelopment: "\u5F00\u53D1\u4E2D",
     notAvailable: "\u6682\u4E0D\u53EF\u7528",
     runtimeCapabilityNotInstalled: "\u8FD0\u884C\u65F6\u5C1A\u672A\u5B89\u88C5\u8BE5\u9879\u80FD\u529B\uFF0C\u56E0\u6B64\u6682\u4E0D\u53EF\u7528\u3002",
     openSettings: "\u6253\u5F00 codexhost \u8BBE\u7F6E",
@@ -18170,11 +18234,15 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     updateChecking: "\u6B63\u5728\u68C0\u67E5\u66F4\u65B0...",
     updateDownloading: "\u6B63\u5728\u4E0B\u8F7D\u66F4\u65B0...",
     updatePreparing: "\u6B63\u5728\u51C6\u5907\u66F4\u65B0...",
+    updateWaitingForExit: "\u6B63\u5728\u7B49\u5F85\u5E94\u7528\u9000\u51FA...",
+    updateInstalling: "\u6B63\u5728\u5B89\u88C5\u66F4\u65B0...",
+    updateInstallingNpm: "\u6B63\u5728\u901A\u8FC7 npm \u5B89\u88C5...",
     updateRequestTimeout: "\u66F4\u65B0\u670D\u52A1\u672A\u54CD\u5E94\uFF0C\u8BF7\u91CD\u8BD5\u3002",
     updateRestarting: "\u6B63\u5728\u91CD\u542F\u4EE5\u5B8C\u6210\u66F4\u65B0...",
     updateSucceeded: "\u66F4\u65B0\u5B89\u88C5\u6210\u529F\u3002",
     updateFailed: "\u66F4\u65B0\u5931\u8D25\u3002",
     updateRetry: "\u91CD\u8BD5",
+    updateManualNpmDescription: "\u5982\u9700\u624B\u52A8\u66F4\u65B0\uFF0C\u8BF7\u5728\u7EC8\u7AEF\u8FD0\u884C\u4EE5\u4E0B\u547D\u4EE4\u3002\u66F4\u65B0\u5B8C\u6210\u540E\uFF0C\u8BF7\u9000\u51FA Codex \u5E76\u901A\u8FC7 codexhost \u91CD\u65B0\u542F\u52A8\u3002",
     updateDownloadFromReleases: "\u524D\u5F80 GitHub Releases \u4E0B\u8F7D",
     pageLabels: Object.freeze({
       connections: "\u8FDE\u63A5",
@@ -18310,6 +18378,16 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     ["circle", { cx: "12", cy: "12", r: "3" }]
   ];
 
+  // ../../node_modules/lucide/dist/esm/icons/star.mjs
+  var Star = [
+    [
+      "path",
+      {
+        d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
+      }
+    ]
+  ];
+
   // ../../node_modules/lucide/dist/esm/icons/x.mjs
   var X = [
     ["path", { d: "M18 6 6 18" }],
@@ -18323,6 +18401,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   var RENDERER_SETTINGS_ICON_NAMES = [
     "settings",
     "close",
+    "star",
     "language",
     "connections",
     "model-pool",
@@ -18336,6 +18415,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   var iconNodes = {
     settings: Settings,
     close: X,
+    star: Star,
     language: Languages,
     connections: PlugZap,
     "model-pool": Boxes,
@@ -18522,6 +18602,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 
   // src/settings/pages.ts
   var CODEXHOST_RELEASES_LATEST_URL = "https://github.com/BytePioneer-AI/codex-host/releases/latest";
+  var CODEXHOST_NPM_MANUAL_UPDATE_COMMAND = "npm install -g @codexhost/cli@latest";
   var DEFAULT_RENDERER_SETTINGS_PAGE_IDS = [
     "connections",
     "model-pool",
@@ -18530,19 +18611,14 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     "updates"
   ];
   function appendUnavailableStatus(content, messages) {
-    const heading = content.ownerDocument.createElement("div");
-    heading.className = "settings-section-label";
-    heading.textContent = messages.availability;
     const status = content.ownerDocument.createElement("div");
     status.className = "settings-empty";
     const copy = content.ownerDocument.createElement("div");
     const title = content.ownerDocument.createElement("strong");
-    title.textContent = messages.notAvailable;
-    const detail = content.ownerDocument.createElement("span");
-    detail.textContent = messages.runtimeCapabilityNotInstalled;
-    copy.append(title, detail);
+    title.textContent = messages.inDevelopment;
+    copy.append(title);
     status.append(copy);
-    content.append(heading, status);
+    content.append(status);
   }
   function unavailablePage(id, messages) {
     return Object.freeze({
@@ -18580,6 +18656,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     if (!status) return null;
     if (status.phase === "succeeded") return messages.updateSucceeded;
     if (status.phase === "failed") return status.error ?? messages.updateFailed;
+    if (status.phase === "waiting-for-exit") return messages.updateWaitingForExit;
+    if (status.phase === "installing") {
+      return status.installation === "npm" ? messages.updateInstallingNpm : messages.updateInstalling;
+    }
     if (status.phase === "restarting") return messages.updateRestarting;
     if (status.phase === "downloading") return messages.updateDownloading;
     return messages.updatePreparing;
@@ -18626,6 +18706,14 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         const panel = document2.createElement("section");
         panel.className = "settings-update-panel";
         panel.setAttribute("aria-live", "polite");
+        const manualNpm = document2.createElement("div");
+        manualNpm.className = "settings-update-manual";
+        manualNpm.hidden = true;
+        const manualNpmDescription = document2.createElement("span");
+        manualNpmDescription.textContent = messages.updateManualNpmDescription;
+        const manualNpmCommand = document2.createElement("code");
+        manualNpmCommand.textContent = CODEXHOST_NPM_MANUAL_UPDATE_COMMAND;
+        manualNpm.append(manualNpmDescription, manualNpmCommand);
         const actions = document2.createElement("div");
         actions.className = "settings-update-actions";
         const releaseLink = document2.createElement("a");
@@ -18638,7 +18726,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
           createRendererSettingsIcon("external-link", 14)
         );
         actions.append(releaseLink);
-        context.content.append(heading, metadata, panel, actions);
+        context.content.append(heading, metadata, panel, manualNpm, actions);
         let pollTimer;
         let pollAttempts = 0;
         let pending = false;
@@ -18743,6 +18831,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         const renderCheck = (result, client) => {
           currentVersionValue.textContent = `v${result.currentVersion}`;
           installationValue.textContent = installationLabel(result.installation, messages);
+          manualNpm.hidden = result.installation !== "npm";
           if (result.releaseNotesUrl) releaseLink.href = result.releaseNotesUrl;
           const operationMessage = statusMessage(result.status, messages);
           if (isPendingStatus(result.status)) {
@@ -18834,10 +18923,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   }
 
   // src/settings/shell.css
-  var shell_default = ':host {\n  --settings-bg: #181818;\n  --settings-sidebar: #1c1c1c;\n  --settings-panel: transparent;\n  --settings-text: #f5f5f5;\n  --settings-muted: #a1a1a1;\n  --settings-border: rgb(255 255 255 / 10%);\n  --settings-divider: rgb(255 255 255 / 10%);\n  --settings-hover: rgb(255 255 255 / 6%);\n  --settings-active: rgb(51 156 255 / 12%);\n  --settings-focus: #339cff;\n  color: var(--settings-text);\n  color-scheme: dark;\n  font:\n    14px/1.5 system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  letter-spacing: 0;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  letter-spacing: 0;\n}\n\nbutton,\ninput,\nselect {\n  font: inherit;\n}\n\nbutton {\n  color: inherit;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n.codexhost-settings-dialog {\n  width: min(1120px, calc(100vw - 32px));\n  height: min(780px, calc(100vh - 32px));\n  max-width: none;\n  max-height: none;\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--settings-text);\n  background: var(--settings-bg);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n  box-shadow: 0 24px 64px rgb(0 0 0 / 38%);\n}\n\n.codexhost-settings-dialog::backdrop {\n  background: rgb(0 0 0 / 52%);\n}\n\n.settings-frame,\n.settings-layout {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.settings-frame {\n  display: flex;\n  flex-direction: column;\n}\n\n.settings-layout {\n  flex: 1;\n  display: grid;\n  grid-template-columns: 240px minmax(0, 1fr);\n  background: var(--settings-bg);\n}\n\n.settings-sidebar {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--settings-sidebar);\n  border-right: 1px solid var(--settings-border);\n  padding-top: 28px;\n}\n\n.settings-header {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  height: 64px;\n  flex: none;\n  padding: 0 16px;\n  border-bottom: 1px solid var(--settings-border);\n}\n\n.settings-brand {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 8px;\n}\n\n.settings-brand__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex: none;\n  color: var(--settings-text);\n}\n\n.settings-brand__mark .codexhost-settings-icon {\n  width: 32px;\n  height: 32px;\n  object-fit: contain;\n}\n\n.settings-brand__copy {\n  display: flex;\n  min-width: 0;\n  align-items: baseline;\n  gap: 0;\n  line-height: 20px;\n}\n\n.settings-brand__name {\n  overflow: hidden;\n  color: var(--settings-text);\n  font-size: 14px;\n  font-weight: 500;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-brand__title {\n  margin-left: 14px;\n  padding-left: 14px;\n  color: var(--settings-muted);\n  font-size: 14px;\n  font-weight: 400;\n  border-left: 1px solid var(--settings-border);\n}\n\n.settings-nav {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 4px;\n  padding: 0 12px 16px;\n  overflow-y: auto;\n}\n\n.settings-nav-button {\n  display: grid;\n  grid-template-columns: 16px minmax(0, 1fr);\n  align-items: center;\n  width: 100%;\n  position: relative;\n  min-height: 40px;\n  flex: none;\n  gap: 12px;\n  padding: 8px 12px;\n  color: var(--settings-text);\n  font-size: 14px;\n  line-height: 21px;\n  text-align: left;\n  background: transparent;\n  border: 0;\n  border-radius: 10px;\n  cursor: pointer;\n}\n\n.settings-nav-button .codexhost-settings-icon {\n  width: 18px;\n  height: 18px;\n  opacity: 0.9;\n}\n\n.settings-nav-button:hover {\n  background: var(--settings-hover);\n}\n\n.settings-nav-button[aria-current="page"] {\n  background: var(--settings-active);\n  color: var(--settings-focus);\n}\n\n.settings-nav-button[aria-current="page"]::before {\n  position: absolute;\n  left: 0;\n  width: 3px;\n  height: 22px;\n  content: "";\n  background: var(--settings-focus);\n  border-radius: 0 3px 3px 0;\n}\n\n.settings-nav-button span {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex: none;\n  padding: 0;\n  color: var(--settings-muted);\n  background: transparent;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.settings-icon-button:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-icon-button:focus-visible,\n.settings-nav-button:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 1px;\n}\n\n.settings-page {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  overflow-y: auto;\n  background: var(--settings-bg);\n  scrollbar-gutter: stable;\n}\n\n.settings-page__content {\n  width: min(930px, calc(100% - 80px));\n  margin-inline: auto;\n}\n\n.settings-page__content {\n  min-width: 0;\n  padding: 44px 0 56px;\n}\n\n.settings-section-label {\n  min-height: auto;\n  padding: 0 0 28px;\n  color: var(--settings-text);\n  font-size: 24px;\n  font-weight: 600;\n  line-height: 30px;\n}\n\n.settings-status-list,\n.settings-empty {\n  overflow: hidden;\n  background: var(--settings-panel);\n}\n\n.settings-status-row {\n  display: grid;\n  grid-template-columns: minmax(170px, 1fr) auto minmax(280px, 1.45fr);\n  position: relative;\n  align-items: center;\n  min-height: 88px;\n  gap: 28px;\n  padding: 16px 0;\n}\n\n.settings-status-row:not(:last-child)::after {\n  content: "";\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 1px;\n  background: var(--settings-divider);\n}\n\n.settings-status-row__identity {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  color: var(--settings-text);\n  gap: 14px;\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n}\n\n.settings-status-row__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  flex: none;\n  color: var(--settings-muted);\n  background: rgb(255 255 255 / 7%);\n  border-radius: 50%;\n}\n\n.settings-status-badge {\n  flex: none;\n  padding: 5px 12px;\n  color: var(--settings-muted);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 18px;\n  background: rgb(255 255 255 / 9%);\n  border: 1px solid rgb(255 255 255 / 6%);\n  border-radius: 6px;\n}\n\n.settings-status-row__detail {\n  min-width: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-empty {\n  display: flex;\n  align-items: center;\n  min-height: 72px;\n  padding: 12px 16px;\n}\n\n.settings-empty > div {\n  display: grid;\n  min-width: 0;\n  gap: 2px;\n}\n\n.settings-empty strong {\n  color: var(--settings-text);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 19px;\n}\n\n.settings-empty span {\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 19px;\n}\n\n.settings-page-error {\n  padding: 16px;\n  color: var(--settings-text);\n  font-size: 13px;\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 20px;\n}\n\n.settings-update-metadata {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 24px;\n  margin-bottom: 24px;\n  padding: 0 4px 20px;\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-update-metadata__item {\n  display: grid;\n  min-width: 0;\n  gap: 4px;\n}\n\n.settings-update-metadata__item span {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-update-metadata__item strong {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n}\n\n.settings-update-panel {\n  display: grid;\n  gap: 16px;\n  min-height: 128px;\n  padding: 20px;\n  color: var(--settings-text);\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n}\n\n.settings-update-panel > strong,\n.settings-update-panel > span,\n.settings-update-summary,\n.settings-update-error {\n  margin: 0;\n  overflow-wrap: anywhere;\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-update-panel > span,\n.settings-update-summary {\n  color: var(--settings-muted);\n}\n\n.settings-update-error {\n  color: #ef4444;\n}\n\n.settings-update-progress {\n  width: 100%;\n  height: 8px;\n  accent-color: #238be8;\n}\n\n.settings-update-progress-detail {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-update-notes {\n  max-height: 240px;\n  padding: 14px;\n  overflow: auto;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  background: rgb(255 255 255 / 4%);\n  border: 1px solid var(--settings-divider);\n  border-radius: 6px;\n}\n\n.settings-update-version-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 20px;\n  min-height: 32px;\n  color: var(--settings-muted);\n  font-size: 13px;\n}\n\n.settings-update-version-row strong {\n  color: var(--settings-text);\n  font-size: 15px;\n}\n\n.settings-update-actions {\n  display: flex;\n  min-width: 0;\n  margin-top: 16px;\n}\n\n.settings-command-button,\n.settings-update-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  min-height: 36px;\n  gap: 8px;\n  padding: 8px 12px;\n  color: white;\n  font: inherit;\n  font-size: 13px;\n  text-decoration: none;\n  background: #1677d2;\n  border: 1px solid #238be8;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.settings-command-button--secondary,\n.settings-update-link {\n  color: var(--settings-text);\n  background: transparent;\n  border-color: var(--settings-border);\n}\n\n.settings-command-button:hover,\n.settings-update-link:hover {\n  filter: brightness(1.08);\n}\n\n.settings-command-button:focus-visible,\n.settings-update-link:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.codexhost-settings-icon {\n  display: block;\n  flex: none;\n  stroke: currentColor;\n}\n\n@media (max-width: 720px) {\n  .codexhost-settings-dialog {\n    width: calc(100vw - 16px);\n    height: calc(100vh - 16px);\n    border-radius: 10px;\n  }\n\n  .settings-layout {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n\n  .settings-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--settings-border);\n  }\n\n  .settings-header {\n    height: 56px;\n    padding-inline: 14px;\n  }\n\n  .settings-sidebar {\n    padding-top: 20px;\n  }\n\n  .settings-nav {\n    flex: none;\n    flex-direction: row;\n    gap: 4px;\n    padding: 7px 8px 8px;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n\n  .settings-nav-button {\n    width: auto;\n    min-width: max-content;\n    min-height: 34px;\n    grid-template-columns: 16px auto;\n    border-radius: 10px;\n  }\n\n  .settings-page__content {\n    width: calc(100% - 40px);\n  }\n\n  .settings-page__content {\n    padding-top: 32px;\n    padding-bottom: 32px;\n  }\n\n  .settings-section-label {\n    padding-bottom: 20px;\n    font-size: 20px;\n    line-height: 26px;\n  }\n\n  .settings-status-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 16px;\n  }\n\n  .settings-status-row__detail {\n    grid-column: 1 / -1;\n    margin: -8px 0 0 58px;\n  }\n}\n\n@media (forced-colors: active) {\n  :host,\n  :host([data-theme="dark"]) {\n    --settings-bg: Canvas;\n    --settings-sidebar: Canvas;\n    --settings-panel: Canvas;\n    --settings-text: CanvasText;\n    --settings-muted: GrayText;\n    --settings-border: ButtonBorder;\n    --settings-divider: ButtonBorder;\n    --settings-hover: Highlight;\n    --settings-active: Highlight;\n    --settings-focus: Highlight;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    scroll-behavior: auto !important;\n  }\n}\n';
+  var shell_default = ':host {\n  --settings-bg: #181818;\n  --settings-sidebar: #1c1c1c;\n  --settings-panel: transparent;\n  --settings-text: #f5f5f5;\n  --settings-muted: #a1a1a1;\n  --settings-border: rgb(255 255 255 / 10%);\n  --settings-divider: rgb(255 255 255 / 10%);\n  --settings-hover: rgb(255 255 255 / 6%);\n  --settings-active: rgb(51 156 255 / 12%);\n  --settings-focus: #339cff;\n  color: var(--settings-text);\n  color-scheme: dark;\n  font:\n    14px/1.5 system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  letter-spacing: 0;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  letter-spacing: 0;\n}\n\nbutton,\ninput,\nselect {\n  font: inherit;\n}\n\nbutton {\n  color: inherit;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n.codexhost-settings-dialog {\n  width: min(1120px, calc(100vw - 32px));\n  height: min(780px, calc(100vh - 32px));\n  max-width: none;\n  max-height: none;\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--settings-text);\n  background: var(--settings-bg);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n  box-shadow: 0 24px 64px rgb(0 0 0 / 38%);\n}\n\n.codexhost-settings-dialog::backdrop {\n  background: rgb(0 0 0 / 52%);\n}\n\n.settings-frame,\n.settings-layout {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.settings-frame {\n  display: flex;\n  flex-direction: column;\n}\n\n.settings-layout {\n  flex: 1;\n  display: grid;\n  grid-template-columns: 240px minmax(0, 1fr);\n  background: var(--settings-bg);\n}\n\n.settings-sidebar {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--settings-sidebar);\n  border-right: 1px solid var(--settings-border);\n  padding-top: 28px;\n}\n\n.settings-header {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  height: 64px;\n  flex: none;\n  padding: 0 16px;\n  border-bottom: 1px solid var(--settings-border);\n}\n\n.settings-header-actions {\n  display: flex;\n  align-items: center;\n  flex: none;\n  gap: 12px;\n  margin-left: auto;\n}\n\n.settings-icon-button.settings-star-link {\n  width: auto;\n  gap: 6px;\n  padding-inline: 8px;\n  font-size: 12px;\n  line-height: 18px;\n  text-decoration: none;\n  border: 2px dashed #f5c542;\n  white-space: nowrap;\n}\n\n.settings-star-link .codexhost-settings-icon {\n  color: #f5c542;\n  fill: currentColor;\n  stroke: currentColor;\n}\n\n.settings-brand {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 8px;\n}\n\n.settings-brand__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex: none;\n  color: var(--settings-text);\n}\n\n.settings-brand__mark .codexhost-settings-icon {\n  width: 32px;\n  height: 32px;\n  object-fit: contain;\n}\n\n.settings-brand__copy {\n  display: flex;\n  min-width: 0;\n  align-items: baseline;\n  gap: 0;\n  line-height: 20px;\n}\n\n.settings-brand__name {\n  overflow: hidden;\n  color: var(--settings-text);\n  font-size: 14px;\n  font-weight: 500;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-brand__title {\n  margin-left: 14px;\n  padding-left: 14px;\n  color: var(--settings-muted);\n  font-size: 14px;\n  font-weight: 400;\n  border-left: 1px solid var(--settings-border);\n}\n\n.settings-nav {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 4px;\n  padding: 0 12px 16px;\n  overflow-y: auto;\n}\n\n.settings-nav-button {\n  display: grid;\n  grid-template-columns: 16px minmax(0, 1fr);\n  align-items: center;\n  width: 100%;\n  position: relative;\n  min-height: 40px;\n  flex: none;\n  gap: 12px;\n  padding: 8px 12px;\n  color: var(--settings-text);\n  font-size: 14px;\n  line-height: 21px;\n  text-align: left;\n  background: transparent;\n  border: 0;\n  border-radius: 10px;\n  cursor: pointer;\n}\n\n.settings-nav-button .codexhost-settings-icon {\n  width: 18px;\n  height: 18px;\n  opacity: 0.9;\n}\n\n.settings-nav-button:hover {\n  background: var(--settings-hover);\n}\n\n.settings-nav-button[aria-current="page"] {\n  background: var(--settings-active);\n  color: var(--settings-focus);\n}\n\n.settings-nav-button[aria-current="page"]::before {\n  position: absolute;\n  left: 0;\n  width: 3px;\n  height: 22px;\n  content: "";\n  background: var(--settings-focus);\n  border-radius: 0 3px 3px 0;\n}\n\n.settings-nav-button span {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex: none;\n  padding: 0;\n  color: var(--settings-muted);\n  background: transparent;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.settings-icon-button:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-icon-button:focus-visible,\n.settings-nav-button:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 1px;\n}\n\n.settings-page {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  overflow-y: auto;\n  background: var(--settings-bg);\n  scrollbar-gutter: stable;\n}\n\n.settings-page__content {\n  width: min(930px, calc(100% - 80px));\n  margin-inline: auto;\n}\n\n.settings-page__content {\n  min-width: 0;\n  padding: 44px 0 56px;\n}\n\n.settings-section-label {\n  min-height: auto;\n  padding: 0 0 28px;\n  color: var(--settings-text);\n  font-size: 24px;\n  font-weight: 600;\n  line-height: 30px;\n}\n\n.settings-status-list,\n.settings-empty {\n  overflow: hidden;\n  background: var(--settings-panel);\n}\n\n.settings-status-row {\n  display: grid;\n  grid-template-columns: minmax(170px, 1fr) auto minmax(280px, 1.45fr);\n  position: relative;\n  align-items: center;\n  min-height: 88px;\n  gap: 28px;\n  padding: 16px 0;\n}\n\n.settings-status-row:not(:last-child)::after {\n  content: "";\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 1px;\n  background: var(--settings-divider);\n}\n\n.settings-status-row__identity {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  color: var(--settings-text);\n  gap: 14px;\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n}\n\n.settings-status-row__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  flex: none;\n  color: var(--settings-muted);\n  background: rgb(255 255 255 / 7%);\n  border-radius: 50%;\n}\n\n.settings-status-badge {\n  flex: none;\n  padding: 5px 12px;\n  color: var(--settings-muted);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 18px;\n  background: rgb(255 255 255 / 9%);\n  border: 1px solid rgb(255 255 255 / 6%);\n  border-radius: 6px;\n}\n\n.settings-status-row__detail {\n  min-width: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-empty {\n  display: flex;\n  align-items: center;\n  min-height: 72px;\n  padding: 12px 16px;\n}\n\n.settings-empty > div {\n  display: grid;\n  min-width: 0;\n  gap: 2px;\n}\n\n.settings-empty strong {\n  color: var(--settings-text);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 19px;\n}\n\n.settings-empty span {\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 19px;\n}\n\n.settings-page-error {\n  padding: 16px;\n  color: var(--settings-text);\n  font-size: 13px;\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 20px;\n}\n\n.settings-update-metadata {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 24px;\n  margin-bottom: 24px;\n  padding: 0 4px 20px;\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-update-metadata__item {\n  display: grid;\n  min-width: 0;\n  gap: 4px;\n}\n\n.settings-update-metadata__item span {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-update-metadata__item strong {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n}\n\n.settings-update-panel {\n  display: grid;\n  gap: 16px;\n  min-height: 128px;\n  padding: 20px;\n  color: var(--settings-text);\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n}\n\n.settings-update-panel > strong,\n.settings-update-panel > span,\n.settings-update-summary,\n.settings-update-error {\n  margin: 0;\n  overflow-wrap: anywhere;\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-update-panel > span,\n.settings-update-summary {\n  color: var(--settings-muted);\n}\n\n.settings-update-error {\n  color: #ef4444;\n}\n\n.settings-update-progress {\n  width: 100%;\n  height: 8px;\n  accent-color: #238be8;\n}\n\n.settings-update-progress-detail {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-update-notes {\n  max-height: 240px;\n  padding: 14px;\n  overflow: auto;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  background: rgb(255 255 255 / 4%);\n  border: 1px solid var(--settings-divider);\n  border-radius: 6px;\n}\n\n.settings-update-version-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 20px;\n  min-height: 32px;\n  color: var(--settings-muted);\n  font-size: 13px;\n}\n\n.settings-update-version-row strong {\n  color: var(--settings-text);\n  font-size: 15px;\n}\n\n.settings-update-manual {\n  display: grid;\n  min-width: 0;\n  gap: 6px;\n  margin-top: 14px;\n  padding-inline: 4px;\n}\n\n.settings-update-manual[hidden] {\n  display: none;\n}\n\n.settings-update-manual span {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-update-manual code {\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-update-actions {\n  display: flex;\n  min-width: 0;\n  margin-top: 16px;\n}\n\n.settings-command-button,\n.settings-update-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  min-height: 36px;\n  gap: 8px;\n  padding: 8px 12px;\n  color: white;\n  font: inherit;\n  font-size: 13px;\n  text-decoration: none;\n  background: #1677d2;\n  border: 1px solid #238be8;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.settings-command-button--secondary,\n.settings-update-link {\n  color: var(--settings-text);\n  background: transparent;\n  border-color: var(--settings-border);\n}\n\n.settings-command-button:hover,\n.settings-update-link:hover {\n  filter: brightness(1.08);\n}\n\n.settings-command-button:focus-visible,\n.settings-update-link:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.codexhost-settings-icon {\n  display: block;\n  flex: none;\n  stroke: currentColor;\n}\n\n@media (max-width: 720px) {\n  .codexhost-settings-dialog {\n    width: calc(100vw - 16px);\n    height: calc(100vh - 16px);\n    border-radius: 10px;\n  }\n\n  .settings-layout {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n\n  .settings-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--settings-border);\n  }\n\n  .settings-header {\n    height: 56px;\n    padding-inline: 14px;\n  }\n\n  .settings-icon-button.settings-star-link {\n    width: 28px;\n    padding: 0;\n  }\n\n  .settings-star-link span {\n    display: none;\n  }\n\n  .settings-sidebar {\n    padding-top: 20px;\n  }\n\n  .settings-nav {\n    flex: none;\n    flex-direction: row;\n    gap: 4px;\n    padding: 7px 8px 8px;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n\n  .settings-nav-button {\n    width: auto;\n    min-width: max-content;\n    min-height: 34px;\n    grid-template-columns: 16px auto;\n    border-radius: 10px;\n  }\n\n  .settings-page__content {\n    width: calc(100% - 40px);\n  }\n\n  .settings-page__content {\n    padding-top: 32px;\n    padding-bottom: 32px;\n  }\n\n  .settings-section-label {\n    padding-bottom: 20px;\n    font-size: 20px;\n    line-height: 26px;\n  }\n\n  .settings-status-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 16px;\n  }\n\n  .settings-status-row__detail {\n    grid-column: 1 / -1;\n    margin: -8px 0 0 58px;\n  }\n}\n\n@media (forced-colors: active) {\n  :host,\n  :host([data-theme="dark"]) {\n    --settings-bg: Canvas;\n    --settings-sidebar: Canvas;\n    --settings-panel: Canvas;\n    --settings-text: CanvasText;\n    --settings-muted: GrayText;\n    --settings-border: ButtonBorder;\n    --settings-divider: ButtonBorder;\n    --settings-hover: Highlight;\n    --settings-active: Highlight;\n    --settings-focus: Highlight;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    scroll-behavior: auto !important;\n  }\n}\n';
 
   // src/settings/shell.ts
   var SETTINGS_SHELL_ATTRIBUTE = "data-codexhost-settings-shell";
+  var CODEXHOST_GITHUB_REPOSITORY_URL = "https://github.com/BytePioneer-AI/codex-host";
   function isRendererSettingsDialogSupported(dialog) {
     return typeof dialog.showModal === "function" && typeof dialog.close === "function";
   }
@@ -18882,13 +18972,26 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     brandTitle.textContent = messages.title;
     brandCopy.append(brandName, brandTitle);
     brand.append(brandMark, brandCopy);
+    const headerActions = ownerDocument.createElement("div");
+    headerActions.className = "settings-header-actions";
+    const starLink = ownerDocument.createElement("a");
+    starLink.className = "settings-icon-button settings-star-link";
+    starLink.href = CODEXHOST_GITHUB_REPOSITORY_URL;
+    starLink.target = "_blank";
+    starLink.rel = "noopener noreferrer";
+    starLink.setAttribute("aria-label", messages.starOnGitHub);
+    starLink.title = messages.starOnGitHub;
+    const starLabel = ownerDocument.createElement("span");
+    starLabel.textContent = messages.starOnGitHub;
+    starLink.append(createRendererSettingsIcon("star", 16), starLabel);
     const closeButton = ownerDocument.createElement("button");
     closeButton.type = "button";
     closeButton.className = "settings-icon-button";
     closeButton.setAttribute("aria-label", messages.close);
     closeButton.title = messages.close;
     closeButton.append(createRendererSettingsIcon("close", 18));
-    header.append(brand, closeButton);
+    headerActions.append(starLink, closeButton);
+    header.append(brand, headerActions);
     const layout = ownerDocument.createElement("div");
     layout.className = "settings-layout";
     const sidebar = ownerDocument.createElement("aside");
@@ -19573,6 +19676,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     let adapterDispose = null;
     let applyAdapterAgent = null;
     let modelControl = null;
+    let usageNotificationDispose = null;
     const sidebarAgentIcons = installRendererSidebarAgentIcons({
       getClient: () => modelControl
     });
@@ -19629,6 +19733,15 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         mounted.usage
       );
     };
+    const applyThreadUsageUpdate = (update) => {
+      for (const mounted of mountedByComposer.values()) {
+        if (threadIdFromComposerModelTarget(mounted.modelTarget) !== update.threadId) continue;
+        mounted.usageRequestGeneration += 1;
+        mounted.usage = update.usage;
+        usageRefreshAttempts.delete(mounted.composer);
+        renderMounted(mounted);
+      }
+    };
     const refreshThreadUsage = async (mounted) => {
       const threadId = threadIdFromComposerModelTarget(mounted.modelTarget);
       if (!threadId || !modelControl || controller.get(mounted.composer).agent === "codex") {
@@ -19692,6 +19805,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         return;
       }
       const generation = controller.beginOwnershipRequest(mounted.composer);
+      const usageGeneration = mounted.usageRequestGeneration;
       mounted.ownershipStatus = "loading";
       renderMounted(mounted);
       try {
@@ -19701,7 +19815,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
           return;
         }
         const { agent, model, thinkingOptionId, permissionModeId } = restoredThreadOwnership(inspection);
-        mounted.usage = inspection.owner === "external" ? inspection.usage ?? null : null;
+        if (mounted.usageRequestGeneration === usageGeneration) {
+          mounted.usage = inspection.owner === "external" ? inspection.usage ?? null : null;
+        }
         const restored = controller.restore(
           mounted.composer,
           agent,
@@ -20602,15 +20718,6 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     };
     const mutationObserver = new MutationObserver((mutations) => {
       transferReplacedComposers(mutations);
-      for (const mounted of mountedByComposer.values()) {
-        const anchor = nativeContextUsageControlForComposer(mounted.composer);
-        if (!anchor) continue;
-        const changed = mutations.some((mutation) => {
-          const target = mutation.target instanceof Element ? mutation.target : mutation.target.parentElement;
-          return target === anchor || target === anchor.parentElement || anchor.contains(target);
-        });
-        if (changed) scheduleThreadUsageRefresh(mounted);
-      }
       scheduleScan(mutations.some(mutationMayChangeComposerTarget));
     });
     const onAdapterStatus = () => {
@@ -20682,10 +20789,17 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         return startCompatibilityUpdate(modelControl);
       },
       setAdapter(status, dispose, applyAgent, nextModelControl) {
+        usageNotificationDispose?.();
+        usageNotificationDispose = null;
         adapterDispose?.();
         adapterDispose = dispose ?? null;
         applyAdapterAgent = applyAgent ?? null;
         modelControl = nextModelControl ?? null;
+        try {
+          usageNotificationDispose = modelControl?.subscribeThreadUsage?.(applyThreadUsageUpdate) ?? null;
+        } catch {
+          usageNotificationDispose = null;
+        }
         adapterStatus = status;
         const installedModelControl = modelControl;
         queueMicrotask(() => {
@@ -20716,6 +20830,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       dispose() {
         if (disposed) return;
         disposed = true;
+        usageNotificationDispose?.();
+        usageNotificationDispose = null;
         adapterDispose?.();
         adapterDispose = null;
         applyAdapterAgent = null;
@@ -20791,6 +20907,7 @@ lucide/dist/esm/icons/plug-zap.mjs:
 lucide/dist/esm/icons/refresh-cw.mjs:
 lucide/dist/esm/icons/route.mjs:
 lucide/dist/esm/icons/settings.mjs:
+lucide/dist/esm/icons/star.mjs:
 lucide/dist/esm/icons/x.mjs:
   (**
    * @license lucide v1.28.0 - ISC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codexhost/cli-darwin-x64",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Run Pi and Claude Code as first-class external harnesses inside Codex Desktop.",
   "type": "module",
   "files": [