@codexhost/cli-darwin-x64 0.2.0 → 0.2.2

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,12 @@ 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() {
+    return "min(180px, 30vw)";
+  }
   function addDetailRow(parent, label, value) {
     const row = document.createElement("div");
     row.style.display = "grid";
@@ -16437,7 +16455,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     heading.style.fontWeight = "600";
     heading.style.marginBottom = "6px";
     popover.append(heading);
-    if (usage.contextUsedTokens !== void 0 && usage.contextWindowTokens !== void 0) {
+    if (usage?.contextUsedTokens !== void 0 && usage.contextWindowTokens !== void 0) {
       const contextPercent = usage.contextWindowTokens > 0 ? usage.contextUsedTokens / usage.contextWindowTokens * 100 : null;
       addDetailRow(
         popover,
@@ -16445,33 +16463,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 +16547,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();
     trigger.style.height = "24px";
     trigger.style.padding = "0 4px";
     trigger.style.borderRadius = "9999px";
@@ -16641,7 +16659,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     const hasCost = totalCostUsd !== void 0;
     const visible = hasCacheHitRate || hasOutputSpeed || hasCost;
     control.root.style.display = visible ? "inline-flex" : "none";
-    if (!visible || !usage) {
+    if (!visible) {
       closePopover(control);
       return false;
     }
@@ -16652,6 +16670,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     ].filter((value) => value !== null);
     const compactSummary = summary.join(" \xB7 ");
     const accessibleSummary = `Thread Usage: ${compactSummary}`;
+    control.trigger.style.maxWidth = rendererUsageTriggerMaxWidth();
     control.trigger.setAttribute("aria-label", accessibleSummary);
     control.trigger.title = accessibleSummary;
     control.label.textContent = compactSummary;
@@ -16659,6 +16678,256 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     return true;
   }
 
+  // src/renderer-credits-control.ts
+  function rendererCreditsTone(usedPercent) {
+    if (usedPercent >= 90) return "hot";
+    if (usedPercent >= 70) return "warn";
+    return "ok";
+  }
+  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 toneColor(tone) {
+    if (tone === "hot") return "#c45c4a";
+    if (tone === "warn") return "#c9a227";
+    return "#3d9a64";
+  }
+  function addDetailRow2(parent, label, value) {
+    const row = document.createElement("div");
+    row.style.display = "grid";
+    row.style.gridTemplateColumns = "minmax(0, 1fr) auto";
+    row.style.gap = "20px";
+    row.style.padding = "4px 0";
+    const labelElement = document.createElement("span");
+    labelElement.textContent = label;
+    labelElement.style.color = "color-mix(in srgb, currentColor 68%, transparent)";
+    const valueElement = document.createElement("span");
+    valueElement.textContent = value;
+    valueElement.style.fontVariantNumeric = "tabular-nums";
+    valueElement.style.textAlign = "right";
+    row.append(labelElement, valueElement);
+    parent.append(row);
+  }
+  function renderDetails2(popover, credits) {
+    popover.replaceChildren();
+    const heading = document.createElement("div");
+    heading.textContent = creditsPeriodLabel(credits.periodType);
+    heading.style.fontWeight = "600";
+    heading.style.marginBottom = "6px";
+    popover.append(heading);
+    addDetailRow2(popover, "Used", formatRendererCreditsPercent(credits.usedPercent));
+    if (credits.resetsAt) {
+      addDetailRow2(popover, "Resets", formatRendererCreditsReset(credits.resetsAt));
+    }
+    for (const product of credits.productUsage ?? []) {
+      addDetailRow2(
+        popover,
+        productLabel(product.product),
+        formatRendererCreditsPercent(product.usagePercent)
+      );
+    }
+  }
+  function popoverIsOpen2(popover) {
+    try {
+      return popover.matches(":popover-open");
+    } catch {
+      return !popover.hidden;
+    }
+  }
+  function positionPopover2(control) {
+    const triggerRect = control.trigger.getBoundingClientRect();
+    const width = Math.min(280, Math.max(220, window.innerWidth - 24));
+    const left = Math.max(12, Math.min(triggerRect.left, window.innerWidth - width - 12));
+    control.popover.style.width = `${width}px`;
+    control.popover.style.left = `${left}px`;
+    control.popover.style.right = "auto";
+    control.popover.style.top = "auto";
+    control.popover.style.bottom = `${Math.max(12, window.innerHeight - triggerRect.top + 8)}px`;
+  }
+  function closePopover2(control) {
+    if (popoverIsOpen2(control.popover) && typeof control.popover.hidePopover === "function") {
+      control.popover.hidePopover();
+    }
+    control.popover.hidden = true;
+    control.trigger.setAttribute("aria-expanded", "false");
+  }
+  function openPopover2(control) {
+    positionPopover2(control);
+    control.popover.hidden = false;
+    if (typeof control.popover.showPopover === "function" && !popoverIsOpen2(control.popover)) {
+      control.popover.showPopover();
+    }
+    control.trigger.setAttribute("aria-expanded", "true");
+  }
+  function togglePopover2(control) {
+    if (control.trigger.getAttribute("aria-expanded") === "true") closePopover2(control);
+    else openPopover2(control);
+  }
+  function mountRendererCreditsControl(composerId, nativeModelClassName) {
+    const root = document.createElement("div");
+    root.dataset.codexhostCreditsControl = composerId;
+    root.className = "relative min-w-0";
+    root.style.display = "none";
+    const trigger = document.createElement("button");
+    const syncNativeModelClassName = (className) => {
+      trigger.className = className?.trim() || RENDERER_MODEL_TRIGGER_FALLBACK_CLASSES;
+    };
+    syncNativeModelClassName(nativeModelClassName);
+    trigger.type = "button";
+    trigger.setAttribute("aria-haspopup", "dialog");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("aria-label", "Account limit");
+    trigger.title = "Account limit";
+    trigger.style.display = "inline-flex";
+    trigger.style.alignItems = "center";
+    trigger.style.gap = "5px";
+    trigger.style.width = "fit-content";
+    trigger.style.maxWidth = "min(72px, 18vw)";
+    trigger.style.height = "24px";
+    trigger.style.padding = "0 6px";
+    trigger.style.borderRadius = "9999px";
+    trigger.style.fontSize = "12px";
+    trigger.style.lineHeight = "16px";
+    trigger.style.fontVariantNumeric = "tabular-nums";
+    trigger.style.letterSpacing = "0";
+    trigger.style.whiteSpace = "nowrap";
+    trigger.style.cursor = "pointer";
+    const dot = document.createElement("span");
+    dot.dataset.codexhostCreditsDot = "";
+    dot.setAttribute("aria-hidden", "true");
+    dot.style.display = "inline-block";
+    dot.style.width = "7px";
+    dot.style.height = "7px";
+    dot.style.borderRadius = "9999px";
+    dot.style.flex = "0 0 auto";
+    const label = document.createElement("span");
+    label.dataset.codexhostCreditsLabel = "";
+    label.style.display = "inline-block";
+    label.style.maxWidth = "100%";
+    label.style.overflow = "hidden";
+    label.style.textOverflow = "ellipsis";
+    label.style.whiteSpace = "nowrap";
+    trigger.append(dot, label);
+    const popover = document.createElement("div");
+    popover.id = `${composerId}-credits-popover`;
+    popover.setAttribute("role", "dialog");
+    popover.setAttribute("aria-label", "Account limit details");
+    popover.setAttribute("popover", "auto");
+    popover.hidden = typeof popover.showPopover !== "function";
+    popover.style.position = "fixed";
+    popover.style.inset = "auto";
+    popover.style.width = "240px";
+    popover.style.maxWidth = "min(280px, calc(100vw - 24px))";
+    popover.style.padding = "10px 12px";
+    popover.style.border = "1px solid rgba(127, 127, 127, 0.35)";
+    popover.style.borderRadius = "6px";
+    popover.style.background = "Canvas";
+    popover.style.color = "CanvasText";
+    popover.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.28)";
+    popover.style.font = "13px/1.35 system-ui, sans-serif";
+    popover.style.letterSpacing = "0";
+    popover.style.zIndex = "2147483647";
+    trigger.setAttribute("aria-controls", popover.id);
+    let placementReference = null;
+    const control = {
+      root,
+      trigger,
+      popover,
+      anchor: null,
+      syncNativeModelClassName,
+      dispose() {
+        closePopover2(control);
+        if (closeTimer !== null) window.clearTimeout(closeTimer);
+        root.remove();
+        popover.remove();
+        placementReference = null;
+      },
+      place(anchor) {
+        if (!anchor?.parentElement) return false;
+        const parent = anchor.parentElement;
+        const next = anchor.nextElementSibling;
+        if (control.anchor === anchor && placementReference === anchor && root.parentElement === parent && root.previousElementSibling === anchor) {
+          return true;
+        }
+        control.anchor = anchor;
+        placementReference = anchor;
+        if (next && next !== root) parent.insertBefore(root, next);
+        else if (next !== root) parent.append(root);
+        return true;
+      }
+    };
+    let closeTimer = null;
+    const cancelClose = () => {
+      if (closeTimer === null) return;
+      window.clearTimeout(closeTimer);
+      closeTimer = null;
+    };
+    const scheduleClose = () => {
+      cancelClose();
+      closeTimer = window.setTimeout(() => {
+        closeTimer = null;
+        if (!trigger.matches(":hover") && !popover.matches(":hover")) closePopover2(control);
+      }, 140);
+    };
+    trigger.addEventListener("click", () => togglePopover2(control));
+    trigger.addEventListener("pointerenter", () => {
+      cancelClose();
+      openPopover2(control);
+    });
+    trigger.addEventListener("pointerleave", scheduleClose);
+    trigger.addEventListener("focus", () => {
+      cancelClose();
+      openPopover2(control);
+    });
+    trigger.addEventListener("blur", scheduleClose);
+    popover.addEventListener("pointerenter", cancelClose);
+    popover.addEventListener("pointerleave", scheduleClose);
+    popover.addEventListener("toggle", () => {
+      trigger.setAttribute("aria-expanded", String(popoverIsOpen2(popover)));
+    });
+    root.append(trigger);
+    document.body.append(popover);
+    return control;
+  }
+  function renderRendererCreditsControl(control, accountCredits) {
+    if (accountCredits === null) {
+      control.root.style.display = "none";
+      closePopover2(control);
+      return false;
+    }
+    const percent = formatRendererCreditsPercent(accountCredits.usedPercent);
+    const title = `${creditsPeriodLabel(accountCredits.periodType)} ${percent}`;
+    const tone = rendererCreditsTone(accountCredits.usedPercent);
+    const dot = control.trigger.querySelector("[data-codexhost-credits-dot]");
+    const label = control.trigger.querySelector("[data-codexhost-credits-label]");
+    if (dot) dot.style.background = toneColor(tone);
+    if (label) label.textContent = percent;
+    control.root.style.display = "inline-flex";
+    control.trigger.setAttribute("aria-label", title);
+    control.trigger.title = title;
+    renderDetails2(control.popover, accountCredits);
+    return true;
+  }
+
   // src/renderer-composer-dom.ts
   var CODEX_COMPOSER_SELECTOR = "[data-codex-composer-root]";
   var EDITOR_SELECTOR = 'textarea, [contenteditable="true"], [role="textbox"]';
@@ -16770,7 +17039,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   }
   var contextUsageDescriptionPattern = /(context|token|上下文|令牌)/iu;
   function isNativeContextUsageControlCandidate(element) {
-    if (element.hasAttribute("data-codexhost-usage-control")) return false;
+    if (element.hasAttribute("data-codexhost-usage-control") || element.hasAttribute("data-codexhost-credits-control")) {
+      return false;
+    }
     const description = [
       element.getAttribute("aria-label"),
       element.getAttribute("title"),
@@ -16803,6 +17074,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     const candidate = nativeModelControlForComposer(control.composer);
     if (!candidate) {
       control.usage.syncNativeModelClassName();
+      control.credits.syncNativeModelClassName();
       return;
     }
     if (candidate !== control.nativeModelControl?.element) {
@@ -16811,15 +17083,54 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       syncRendererModelTriggerClass(control.modelPicker, candidate.className);
     }
     control.usage.syncNativeModelClassName(candidate.className);
+    control.credits.syncNativeModelClassName(candidate.className);
+  }
+  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 firstMaterialChild(parent) {
+    for (const child of parent.children) {
+      if (typeof child.hasAttribute !== "function") continue;
+      const element = child;
+      if (element.hasAttribute("data-codexhost-credits-control")) continue;
+      return element;
+    }
+    return null;
   }
-  function refreshNativeContextUsageControl(control) {
-    const candidate = nativeContextUsageControlForComposer(control.composer);
-    if (!candidate) {
+  function creditsPlacementAnchor(composer, usageRoot) {
+    let current = usageRoot;
+    while (current && current !== composer) {
+      const parent = current.parentElement;
+      if (!parent) break;
+      const first = firstMaterialChild(parent);
+      if (first && first !== current && !first.contains(usageRoot)) return first;
+      if (parent === composer) break;
+      current = parent;
+    }
+    return null;
+  }
+  function refreshUsagePlacement(control) {
+    const anchor = usagePlacementAnchor(control);
+    if (!anchor) {
       if (control.usage.anchor) control.usage.root.remove();
       control.usage.anchor = null;
+      if (control.credits.anchor) control.credits.root.remove();
+      control.credits.anchor = null;
+      return;
+    }
+    control.usage.place(anchor);
+    const leading = creditsPlacementAnchor(control.composer, control.usage.root);
+    if (!leading) {
+      if (control.credits.anchor) control.credits.root.remove();
+      control.credits.anchor = null;
       return;
     }
-    control.usage.place(candidate);
+    control.credits.place(leading);
   }
   function refreshNativePermissionModeControl(control) {
     const semanticCandidate = semanticNativePermissionModeControlForComposer(control.composer);
@@ -16851,7 +17162,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);
@@ -16874,6 +17185,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       onSelectPermissionMode
     );
     const usage = mountRendererUsageControl(composerId, nativeModelControl?.element.className);
+    const credits = mountRendererCreditsControl(composerId, nativeModelControl?.element.className);
     const permissionParent = nativePermissionModeControl?.element.parentElement;
     if (permissionParent && nativePermissionModeControl && nativePermissionModeControlVerified) {
       permissionParent.insertBefore(permissionModePicker.root, nativePermissionModeControl.element);
@@ -16896,14 +17208,15 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       nativeModelControl,
       nativePermissionModeControl,
       nativePermissionModeControlVerified,
+      credits,
       usage,
       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
@@ -16941,6 +17254,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       permissionModeVisible
     );
     renderRendererUsageControl(control.usage, usage);
+    renderRendererCreditsControl(control.credits, accountCredits);
   }
   function disposeComposerAgentControl(control) {
     if (control.sendDisabledBeforeSwitch !== null) {
@@ -16948,6 +17262,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     }
     restoreNativeControl(control.nativeModelControl);
     restoreNativeControl(control.nativePermissionModeControl);
+    control.credits.dispose();
     control.usage.dispose();
     control.permissionModePicker.dispose();
     control.modelPicker.dispose();
@@ -18540,6 +18855,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 +19265,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 +19336,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 +19983,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 +20174,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 +20183,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 +20192,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 +20204,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 +20309,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 +20338,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 +20348,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 +20886,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 +20989,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 +21005,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);