@codexhost/cli-darwin-x64 0.2.0 → 0.2.1

package/app/renderer-extension.js

@@ -14950,12 +14950,24 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       });
     }
   });
+  var usagePercentSchema = external_exports.number().finite().min(0).max(100);
+  var accountCreditsProductUsageSchema = external_exports.object({
+    product: external_exports.string().min(1),
+    usagePercent: usagePercentSchema
+  }).strict();
+  var accountCreditsSnapshotSchema = external_exports.object({
+    usedPercent: usagePercentSchema,
+    resetsAt: external_exports.string().min(1).optional(),
+    periodType: external_exports.enum(["weekly", "monthly", "unknown"]),
+    productUsage: external_exports.array(accountCreditsProductUsageSchema).min(1).optional()
+  }).strict();
   var threadUsageInspectionParamsSchema = external_exports.object({
     threadId: hostThreadIdSchema
   }).strict();
   var threadUsageInspectionSchema = external_exports.object({
     threadId: hostThreadIdSchema,
-    usage: threadUsageSnapshotSchema.nullable()
+    usage: threadUsageSnapshotSchema.nullable(),
+    accountCredits: accountCreditsSnapshotSchema.optional()
   }).strict();
 
   // ../shared-contracts/dist/harness-models.js
@@ -16414,6 +16426,34 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     if (absolute < 1e3) return `${sign}${Math.round(absolute)}`;
     return `${sign}${decimal(absolute / 1e3, 1)}k`;
   }
+  function formatRendererCreditsPercent(value) {
+    return `${decimal(value, 1)}%`;
+  }
+  function rendererUsageTriggerMaxWidth(hasAccountCredits) {
+    return hasAccountCredits ? "min(300px, 44vw)" : "min(180px, 30vw)";
+  }
+  function formatRendererCreditsReset(value) {
+    const date5 = new Date(value);
+    if (Number.isNaN(date5.getTime())) return value;
+    return date5.toLocaleString(void 0, {
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    });
+  }
+  function creditsPeriodLabel(periodType) {
+    if (periodType === "weekly") return "Weekly limit";
+    if (periodType === "monthly") return "Monthly limit";
+    return "Account limit";
+  }
+  function productLabel(product) {
+    if (product === "GrokBuild") return "Build";
+    if (product === "GrokChat") return "Chat";
+    if (product === "GrokImagine") return "Imagine";
+    if (product === "GrokVoice") return "Voice";
+    return product;
+  }
   function addDetailRow(parent, label, value) {
     const row = document.createElement("div");
     row.style.display = "grid";
@@ -16430,14 +16470,31 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     row.append(labelElement, valueElement);
     parent.append(row);
   }
-  function renderDetails(popover, usage) {
+  function renderDetails(popover, usage, accountCredits) {
     popover.replaceChildren();
     const heading = document.createElement("div");
     heading.textContent = "Usage";
     heading.style.fontWeight = "600";
     heading.style.marginBottom = "6px";
     popover.append(heading);
-    if (usage.contextUsedTokens !== void 0 && usage.contextWindowTokens !== void 0) {
+    if (accountCredits) {
+      addDetailRow(
+        popover,
+        creditsPeriodLabel(accountCredits.periodType),
+        formatRendererCreditsPercent(accountCredits.usedPercent)
+      );
+      if (accountCredits.resetsAt) {
+        addDetailRow(popover, "Resets", formatRendererCreditsReset(accountCredits.resetsAt));
+      }
+      for (const product of accountCredits.productUsage ?? []) {
+        addDetailRow(
+          popover,
+          productLabel(product.product),
+          formatRendererCreditsPercent(product.usagePercent)
+        );
+      }
+    }
+    if (usage?.contextUsedTokens !== void 0 && usage.contextWindowTokens !== void 0) {
       const contextPercent = usage.contextWindowTokens > 0 ? usage.contextUsedTokens / usage.contextWindowTokens * 100 : null;
       addDetailRow(
         popover,
@@ -16445,33 +16502,33 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         contextPercent === null ? `/${formatRendererTokenCount(usage.contextWindowTokens)}` : `${decimal(contextPercent, 1)}% / ${formatRendererTokenCount(usage.contextWindowTokens)}`
       );
     }
-    if (usage.cacheHitRatePercent !== void 0) {
+    if (usage?.cacheHitRatePercent !== void 0) {
       addDetailRow(
         popover,
         "Latest cache hit",
         formatRendererCacheHitRate(usage.cacheHitRatePercent)
       );
     }
-    if (usage.outputTokensPerSecond !== void 0) {
+    if (usage?.outputTokensPerSecond !== void 0) {
       addDetailRow(popover, "Output speed", formatRendererTokenRate(usage.outputTokensPerSecond));
     }
-    if (usage.cachedInputTokens !== void 0) {
+    if (usage?.cachedInputTokens !== void 0) {
       addDetailRow(popover, "Cache read", formatRendererTokenCount(usage.cachedInputTokens));
     }
-    if (usage.cacheWriteInputTokens !== void 0) {
+    if (usage?.cacheWriteInputTokens !== void 0) {
       addDetailRow(popover, "Cache write", formatRendererTokenCount(usage.cacheWriteInputTokens));
     }
-    if (usage.reasoningOutputTokens !== void 0) {
+    if (usage?.reasoningOutputTokens !== void 0) {
       addDetailRow(popover, "Reasoning", formatRendererTokenCount(usage.reasoningOutputTokens));
     }
-    if (usage.inputTokens !== void 0 || usage.outputTokens !== void 0) {
+    if (usage?.inputTokens !== void 0 || usage?.outputTokens !== void 0) {
       addDetailRow(
         popover,
         "Input / output",
         `${formatRendererTokenCount(usage.inputTokens ?? 0)} / ${formatRendererTokenCount(usage.outputTokens ?? 0)}`
       );
     }
-    if (usage.totalCostUsd !== void 0) {
+    if (usage?.totalCostUsd !== void 0) {
       addDetailRow(popover, "Session cost estimate", formatRendererCost(usage.totalCostUsd));
     }
   }
@@ -16529,7 +16586,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     trigger.style.display = "inline-flex";
     trigger.style.alignItems = "center";
     trigger.style.width = "fit-content";
-    trigger.style.maxWidth = "min(180px, 30vw)";
+    trigger.style.maxWidth = rendererUsageTriggerMaxWidth(false);
     trigger.style.height = "24px";
     trigger.style.padding = "0 4px";
     trigger.style.borderRadius = "9999px";
@@ -16632,30 +16689,33 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     document.body.append(popover);
     return control;
   }
-  function renderRendererUsageControl(control, usage) {
+  function renderRendererUsageControl(control, usage, accountCredits = null) {
     const cacheHitRatePercent = usage?.cacheHitRatePercent;
     const outputTokensPerSecond = usage?.outputTokensPerSecond;
     const totalCostUsd = usage?.totalCostUsd;
     const hasCacheHitRate = cacheHitRatePercent !== void 0;
     const hasOutputSpeed = outputTokensPerSecond !== void 0;
     const hasCost = totalCostUsd !== void 0;
-    const visible = hasCacheHitRate || hasOutputSpeed || hasCost;
+    const hasCredits = accountCredits !== null;
+    const visible = hasCacheHitRate || hasOutputSpeed || hasCost || hasCredits;
     control.root.style.display = visible ? "inline-flex" : "none";
-    if (!visible || !usage) {
+    if (!visible) {
       closePopover(control);
       return false;
     }
     const summary = [
+      accountCredits ? `${creditsPeriodLabel(accountCredits.periodType)} ${formatRendererCreditsPercent(accountCredits.usedPercent)}` : null,
       cacheHitRatePercent !== void 0 ? formatRendererCacheHitRate(cacheHitRatePercent) : null,
       outputTokensPerSecond !== void 0 ? formatRendererTokenRate(outputTokensPerSecond) : null,
       totalCostUsd !== void 0 ? formatRendererCost(totalCostUsd) : null
     ].filter((value) => value !== null);
     const compactSummary = summary.join(" \xB7 ");
     const accessibleSummary = `Thread Usage: ${compactSummary}`;
+    control.trigger.style.maxWidth = rendererUsageTriggerMaxWidth(hasCredits);
     control.trigger.setAttribute("aria-label", accessibleSummary);
     control.trigger.title = accessibleSummary;
     control.label.textContent = compactSummary;
-    renderDetails(control.popover, usage);
+    renderDetails(control.popover, usage, accountCredits);
     return true;
   }
 
@@ -16812,14 +16872,22 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     }
     control.usage.syncNativeModelClassName(candidate.className);
   }
-  function refreshNativeContextUsageControl(control) {
-    const candidate = nativeContextUsageControlForComposer(control.composer);
-    if (!candidate) {
+  function usagePlacementAnchor(control) {
+    const context = nativeContextUsageControlForComposer(control.composer);
+    if (context?.parentElement) return context;
+    const modelRoot = control.modelPicker.root;
+    if (modelRoot.parentElement) return modelRoot;
+    const native = control.nativeModelControl?.element;
+    return native?.parentElement ? native : null;
+  }
+  function refreshUsagePlacement(control) {
+    const anchor = usagePlacementAnchor(control);
+    if (!anchor) {
       if (control.usage.anchor) control.usage.root.remove();
       control.usage.anchor = null;
       return;
     }
-    control.usage.place(candidate);
+    control.usage.place(anchor);
   }
   function refreshNativePermissionModeControl(control) {
     const semanticCandidate = semanticNativePermissionModeControlForComposer(control.composer);
@@ -16851,7 +16919,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   }
   function reconcileComposerNativeControls(control, hideModel, hidePermissionMode) {
     refreshNativeModelControl(control);
-    refreshNativeContextUsageControl(control);
+    refreshUsagePlacement(control);
     refreshNativePermissionModeControl(control);
     setNativeControlHidden(control.nativeModelControl, hideModel);
     setNativeControlHidden(control.nativePermissionModeControl, hidePermissionMode);
@@ -16900,10 +16968,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       sendButton,
       sendDisabledBeforeSwitch: null
     };
-    refreshNativeContextUsageControl(control);
+    refreshUsagePlacement(control);
     return control;
   }
-  function renderComposerAgentControl(control, state, adapterState, switching, availability = {}, modelView = { status: "idle" }, permissionModeView = { status: "idle" }, usage = null) {
+  function renderComposerAgentControl(control, state, adapterState, switching, availability = {}, modelView = { status: "idle" }, permissionModeView = { status: "idle" }, usage = null, accountCredits = null) {
     const selectedModel = modelView.selected;
     const selectedCatalogModel = modelView.catalog?.models.find(
       (model) => model.ref.id === selectedModel?.id
@@ -16940,7 +17008,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       permissionModeView,
       permissionModeVisible
     );
-    renderRendererUsageControl(control.usage, usage);
+    renderRendererUsageControl(control.usage, usage, accountCredits);
   }
   function disposeComposerAgentControl(control) {
     if (control.sendDisabledBeforeSwitch !== null) {
@@ -18540,6 +18608,124 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     }
   };
 
+  // src/settings/release-notes.ts
+  var HEADING_PATTERN = /^(#{1,6})[ \t]+(.+?)\s*$/u;
+  var UNORDERED_ITEM_PATTERN = /^[-*][ \t]+(.+?)\s*$/u;
+  var ORDERED_ITEM_PATTERN = /^\d+[.)][ \t]+(.+?)\s*$/u;
+  var FENCE_PATTERN = /^```([\w+-]*)\s*$/u;
+  var INLINE_PATTERN = /(`+)((?:(?!\1).)+)\1|\*\*(.+?)\*\*|\[([^\]]+)\]\(([^)\s]+)\)/gu;
+  function createReleaseNotesElement(document2, markdown) {
+    const root = document2.createElement("div");
+    root.className = "settings-update-notes";
+    appendReleaseNotesBlocks(document2, root, markdown);
+    return root;
+  }
+  function appendReleaseNotesBlocks(document2, root, markdown) {
+    const lines = markdown.replaceAll("\r\n", "\n").split("\n");
+    let index = 0;
+    while (index < lines.length) {
+      const line = lines[index] ?? "";
+      if (line.trim().length === 0) {
+        index += 1;
+        continue;
+      }
+      const fence = FENCE_PATTERN.exec(line);
+      if (fence) {
+        index = appendFencedCode(document2, root, lines, index, fence[1] ?? "");
+        continue;
+      }
+      const heading = HEADING_PATTERN.exec(line);
+      if (heading?.[1] && heading[2]) {
+        const tag = `h${heading[1].length}`;
+        const element = document2.createElement(tag);
+        appendInline(document2, element, heading[2]);
+        root.append(element);
+        index += 1;
+        continue;
+      }
+      if (UNORDERED_ITEM_PATTERN.test(line)) {
+        index = appendList(document2, root, lines, index, "ul", UNORDERED_ITEM_PATTERN);
+        continue;
+      }
+      if (ORDERED_ITEM_PATTERN.test(line)) {
+        index = appendList(document2, root, lines, index, "ol", ORDERED_ITEM_PATTERN);
+        continue;
+      }
+      index = appendParagraph(document2, root, lines, index);
+    }
+  }
+  function appendFencedCode(document2, root, lines, start, language) {
+    const body = [];
+    let index = start + 1;
+    while (index < lines.length && !FENCE_PATTERN.test(lines[index] ?? "")) {
+      body.push(lines[index] ?? "");
+      index += 1;
+    }
+    if (index < lines.length) index += 1;
+    const pre = document2.createElement("pre");
+    const code = document2.createElement("code");
+    if (language.length > 0) code.className = `language-${language}`;
+    code.textContent = body.join("\n");
+    pre.append(code);
+    root.append(pre);
+    return index;
+  }
+  function appendList(document2, root, lines, start, tag, pattern) {
+    const list = document2.createElement(tag);
+    let index = start;
+    while (index < lines.length) {
+      const item = pattern.exec(lines[index] ?? "");
+      if (!item?.[1]) break;
+      const entry = document2.createElement("li");
+      appendInline(document2, entry, item[1]);
+      list.append(entry);
+      index += 1;
+    }
+    root.append(list);
+    return index;
+  }
+  function appendParagraph(document2, root, lines, start) {
+    const paragraphLines = [];
+    let index = start;
+    while (index < lines.length) {
+      const current = lines[index] ?? "";
+      if (current.trim().length === 0 || FENCE_PATTERN.test(current) || HEADING_PATTERN.test(current) || UNORDERED_ITEM_PATTERN.test(current) || ORDERED_ITEM_PATTERN.test(current)) {
+        break;
+      }
+      paragraphLines.push(current.trim());
+      index += 1;
+    }
+    const paragraph = document2.createElement("p");
+    appendInline(document2, paragraph, paragraphLines.join(" "));
+    root.append(paragraph);
+    return index;
+  }
+  function appendInline(document2, parent, text) {
+    let lastIndex = 0;
+    for (const match of text.matchAll(INLINE_PATTERN)) {
+      const index = match.index ?? 0;
+      if (index > lastIndex) parent.append(text.slice(lastIndex, index));
+      if (match[2] !== void 0) {
+        const code = document2.createElement("code");
+        code.textContent = match[2];
+        parent.append(code);
+      } else if (match[3] !== void 0) {
+        const strong = document2.createElement("strong");
+        strong.textContent = match[3];
+        parent.append(strong);
+      } else {
+        const link = document2.createElement("a");
+        link.textContent = match[4] ?? "";
+        link.setAttribute("href", match[5] ?? "");
+        link.setAttribute("target", "_blank");
+        link.setAttribute("rel", "noopener noreferrer");
+        parent.append(link);
+      }
+      lastIndex = index + match[0].length;
+    }
+    if (lastIndex < text.length) parent.append(text.slice(lastIndex));
+  }
+
   // src/settings/update-request.ts
   var RENDERER_UPDATE_REQUEST_TIMEOUT_MS = 15e3;
   var RendererUpdateRequestTimeoutError = class extends Error {
@@ -18832,10 +19018,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
           summary.textContent = operationMessage ?? (result.error ? messages.updateFailed : result.updateAvailable ? messages.updateAvailable : messages.updateUpToDate);
           panel.append(summary);
           if (result.releaseNotes) {
-            const releaseNotes = document2.createElement("div");
-            releaseNotes.className = "settings-update-notes";
-            releaseNotes.textContent = result.releaseNotes;
-            panel.append(releaseNotes);
+            panel.append(createReleaseNotesElement(document2, result.releaseNotes));
           }
           if (result.status?.phase === "failed" && result.status.error) {
             const error51 = document2.createElement("p");
@@ -18906,7 +19089,7 @@ 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-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';
+  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  display: grid;\n  gap: 10px;\n  max-height: 320px;\n  overflow: auto;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n  overflow-wrap: anywhere;\n}\n\n.settings-update-notes > :first-child {\n  margin-top: 0;\n}\n\n.settings-update-notes > :last-child {\n  margin-bottom: 0;\n}\n\n.settings-update-notes h1,\n.settings-update-notes h2,\n.settings-update-notes h3,\n.settings-update-notes h4,\n.settings-update-notes h5,\n.settings-update-notes h6 {\n  margin: 6px 0 0;\n  color: var(--settings-text);\n  font-weight: 600;\n}\n\n.settings-update-notes h1 {\n  font-size: 16px;\n  line-height: 24px;\n}\n\n.settings-update-notes h2 {\n  font-size: 15px;\n  line-height: 22px;\n}\n\n.settings-update-notes h3,\n.settings-update-notes h4,\n.settings-update-notes h5,\n.settings-update-notes h6 {\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-update-notes p,\n.settings-update-notes ul,\n.settings-update-notes ol,\n.settings-update-notes pre {\n  margin: 0;\n}\n\n.settings-update-notes ul,\n.settings-update-notes ol {\n  padding-left: 20px;\n}\n\n.settings-update-notes li + li {\n  margin-top: 4px;\n}\n\n.settings-update-notes strong {\n  color: var(--settings-text);\n  font-weight: 600;\n}\n\n.settings-update-notes a {\n  color: #7cb8ff;\n  text-decoration: none;\n}\n\n.settings-update-notes a:hover {\n  text-decoration: underline;\n}\n\n.settings-update-notes code {\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  font-size: 12px;\n}\n\n.settings-update-notes :not(pre) > code {\n  padding: 1px 5px;\n  background: rgb(255 255 255 / 8%);\n  border-radius: 4px;\n}\n\n.settings-update-notes pre {\n  padding: 10px 12px;\n  overflow: auto;\n  background: rgb(0 0 0 / 28%);\n  border-radius: 6px;\n}\n\n.settings-update-notes pre code {\n  line-height: 18px;\n  white-space: pre-wrap;\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";
@@ -19553,8 +19736,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     const index = Math.max(0, Math.min(Math.trunc(attempt), rendererUsageRefreshDelays.length - 1));
     return rendererUsageRefreshDelays[index] ?? rendererUsageRefreshDelays[0];
   }
-  function shouldRetryExternalThreadUsage(agent, usage) {
-    return agent !== "codex" && usage === null;
+  function shouldRetryExternalThreadUsage(agent, usage, accountCredits = null) {
+    if (agent === "codex") return false;
+    if (usage === null) return true;
+    return agent === "grok" && accountCredits === null;
   }
   function selectableThinkingOptionId(state) {
     return state.effectiveThinkingOptionId && state.availableThinkingOptions?.some(({ id }) => id === state.effectiveThinkingOptionId) ? state.effectiveThinkingOptionId : void 0;
@@ -19742,7 +19927,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         harnessAvailability,
         mounted.modelView,
         mounted.permissionModeView,
-        mounted.usage
+        mounted.usage,
+        mounted.accountCredits
       );
     };
     const applyThreadUsageUpdate = (update) => {
@@ -19750,6 +19936,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         if (threadIdFromComposerModelTarget(mounted.modelTarget) !== update.threadId) continue;
         mounted.usageRequestGeneration += 1;
         mounted.usage = update.usage;
+        mounted.accountCredits = update.accountCredits ?? null;
         usageRefreshAttempts.delete(mounted.composer);
         renderMounted(mounted);
       }
@@ -19758,6 +19945,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       const threadId = threadIdFromComposerModelTarget(mounted.modelTarget);
       if (!threadId || !modelControl || controller.get(mounted.composer).agent === "codex") {
         mounted.usage = null;
+        mounted.accountCredits = null;
         usageRefreshAttempts.delete(mounted.composer);
         renderMounted(mounted);
         return;
@@ -19769,15 +19957,23 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
           return;
         }
         mounted.usage = result.usage;
-        if (result.usage !== null) usageRefreshAttempts.delete(mounted.composer);
+        mounted.accountCredits = result.accountCredits ?? null;
+        const agent = controller.get(mounted.composer).agent;
+        if (result.usage !== null && (agent !== "grok" || result.accountCredits)) {
+          usageRefreshAttempts.delete(mounted.composer);
+        }
         renderMounted(mounted);
-        if (shouldRetryExternalThreadUsage(controller.get(mounted.composer).agent, result.usage)) {
+        if (shouldRetryExternalThreadUsage(
+          controller.get(mounted.composer).agent,
+          result.usage,
+          result.accountCredits ?? null
+        )) {
           scheduleThreadUsageRefresh(mounted);
         }
       } catch {
         if (mountedByComposer.get(mounted.composer) === mounted && mounted.usageRequestGeneration === generation) {
           renderMounted(mounted);
-          if (shouldRetryExternalThreadUsage(controller.get(mounted.composer).agent, null)) {
+          if (shouldRetryExternalThreadUsage(controller.get(mounted.composer).agent, null, null)) {
             scheduleThreadUsageRefresh(mounted);
           }
         }
@@ -19866,7 +20062,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       } finally {
         if (isCurrentOwnershipRequest(mounted, generation)) {
           renderMounted(mounted);
-          if (mounted.ownershipStatus !== "error" && shouldRetryExternalThreadUsage(controller.get(mounted.composer).agent, mounted.usage)) {
+          if (mounted.ownershipStatus !== "error" && shouldRetryExternalThreadUsage(
+            controller.get(mounted.composer).agent,
+            mounted.usage,
+            mounted.accountCredits
+          )) {
             scheduleThreadUsageRefresh(mounted);
           }
         }
@@ -19891,7 +20091,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       if (resolution === "transfer") {
         mounted.ownershipStatus = "ready";
         renderMounted(mounted);
-        if (shouldRetryExternalThreadUsage(controller.get(mounted.composer).agent, null)) {
+        if (shouldRetryExternalThreadUsage(controller.get(mounted.composer).agent, null, null)) {
           scheduleThreadUsageRefresh(mounted);
         }
       } else {
@@ -19901,6 +20101,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         mounted.threadConfiguration = void 0;
         mounted.ownershipStatus = "loading";
         mounted.usage = null;
+        mounted.accountCredits = null;
         mounted.usageRequestGeneration += 1;
         usageRefreshAttempts.delete(mounted.composer);
         if (previousTarget?.[0] === "conversation") renderMounted(mounted);
@@ -20438,11 +20639,14 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     const refreshHarnessAvailability = (refresh = false) => {
       if (!modelControl) return Promise.resolve();
       const client = modelControl;
+      if (availabilityRequest?.client === client) return availabilityRequest.promise;
       harnessAvailability = Object.fromEntries(
-        externalAgents.map((agent) => [agent, "checking"])
+        externalAgents.map((agent) => [
+          agent,
+          harnessAvailability[agent] === "ready" ? "ready" : "checking"
+        ])
       );
       for (const mounted of mountedByComposer.values()) renderMounted(mounted);
-      if (availabilityRequest?.client === client) return availabilityRequest.promise;
       const generation = ++availabilityRequestGeneration;
       const promise2 = (async () => {
         await Promise.all(
@@ -20538,6 +20742,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         ownershipStatus: threadIdFromComposerModelTarget(modelTarget) ? inherited ? "ready" : "loading" : "not-required",
         threadConfiguration: inherited?.threadConfiguration,
         usage: inherited?.usage ?? null,
+        accountCredits: inherited?.accountCredits ?? null,
         usageRequestGeneration: 0
       };
       mountedByComposer.set(composer, mounted);
@@ -20553,7 +20758,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       renderMounted(mounted);
       if (threadIdFromComposerModelTarget(modelTarget) && !inherited) {
         void loadThreadOwnership(mounted);
-      } else if (threadIdFromComposerModelTarget(modelTarget) && inherited && shouldRetryExternalThreadUsage(state.agent, mounted.usage)) {
+      } else if (threadIdFromComposerModelTarget(modelTarget) && inherited && shouldRetryExternalThreadUsage(state.agent, mounted.usage, mounted.accountCredits)) {
         scheduleThreadUsageRefresh(mounted);
       } else if (state.agent !== "codex" && !isExternalConfigurationReady(mounted)) {
         void loadExternalCatalog(mounted);

package/package.json

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