@codexhost/cli-darwin-x64 0.3.2 → 0.3.3

package/app/renderer-extension.js

@@ -14950,7 +14950,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     totalCostUsd: finiteNonNegativeNumberSchema.optional(),
     cacheHitRatePercent: cacheHitRatePercentSchema.optional(),
     contextWindowTokens: nonNegativeSafeIntegerSchema.optional(),
-    contextUsedTokens: nonNegativeSafeIntegerSchema.optional()
+    contextUsedTokens: nonNegativeSafeIntegerSchema.optional(),
+    planFiveHourUsedPercent: cacheHitRatePercentSchema.optional(),
+    planFiveHourResetsAtUnix: nonNegativeSafeIntegerSchema.optional(),
+    planSevenDayUsedPercent: cacheHitRatePercentSchema.optional(),
+    planSevenDayResetsAtUnix: nonNegativeSafeIntegerSchema.optional()
   }).strict().superRefine((usage, context) => {
     if (Object.keys(usage).length === 0) {
       context.addIssue({ code: "custom", message: "Thread Usage must contain a reliable field" });
@@ -14971,16 +14975,31 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         path: ["contextWindowTokens"]
       });
     }
+    if (usage.planFiveHourResetsAtUnix !== void 0 && usage.planFiveHourUsedPercent === void 0) {
+      context.addIssue({
+        code: "custom",
+        message: "Thread Usage planFiveHourResetsAtUnix must be provided with planFiveHourUsedPercent",
+        path: ["planFiveHourResetsAtUnix"]
+      });
+    }
+    if (usage.planSevenDayResetsAtUnix !== void 0 && usage.planSevenDayUsedPercent === void 0) {
+      context.addIssue({
+        code: "custom",
+        message: "Thread Usage planSevenDayResetsAtUnix must be provided with planSevenDayUsedPercent",
+        path: ["planSevenDayResetsAtUnix"]
+      });
+    }
   });
   var usagePercentSchema = external_exports.number().finite().min(0).max(100);
   var accountCreditsProductUsageSchema = external_exports.object({
     product: external_exports.string().min(1),
-    usagePercent: usagePercentSchema
+    usagePercent: usagePercentSchema,
+    resetsAt: external_exports.string().min(1).optional()
   }).strict();
   var accountCreditsSnapshotSchema = external_exports.object({
     usedPercent: usagePercentSchema,
     resetsAt: external_exports.string().min(1).optional(),
-    periodType: external_exports.enum(["weekly", "monthly", "unknown"]),
+    periodType: external_exports.enum(["weekly", "monthly", "five_hour", "seven_day", "unknown"]),
     productUsage: external_exports.array(accountCreditsProductUsageSchema).min(1).optional()
   }).strict();
   var threadUsageInspectionParamsSchema = external_exports.object({
@@ -15094,7 +15113,14 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       selectThinkingOption: external_exports.boolean(),
       selectPermissionMode: external_exports.boolean()
     }).strict(),
-    history: harnessHistoryCapabilitiesSchema
+    history: harnessHistoryCapabilitiesSchema,
+    subagents: external_exports.object({
+      observe: external_exports.boolean(),
+      readTranscript: external_exports.boolean()
+    }).strict().optional(),
+    autonomousTurns: external_exports.object({
+      observe: external_exports.boolean()
+    }).strict().optional()
   }).strict();
   var harnessConfigurationStateSchema = external_exports.object({
     effectiveModel: harnessModelRefSchema.optional(),
@@ -15506,6 +15532,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     root.setAttribute(CONTROL_ATTRIBUTE, composerId);
     root.style.display = "inline-flex";
     root.style.alignItems = "center";
+    root.style.alignSelf = "center";
+    root.style.verticalAlign = "middle";
     root.style.width = "30px";
     root.style.height = "28px";
     root.style.marginInline = "4px";
@@ -15877,8 +15905,44 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     };
   }
 
+  // src/renderer-trigger-chip-style.ts
+  var STYLE_ATTRIBUTE = "data-codexhost-trigger-chip-style";
+  var TRIGGER_CHIP_CLASS = "codexhost-trigger-chip";
+  function ensureRendererTriggerChipStyle(ownerDocument) {
+    if (ownerDocument.querySelector(`style[${STYLE_ATTRIBUTE}]`)) return;
+    const style = ownerDocument.createElement("style");
+    style.setAttribute(STYLE_ATTRIBUTE, "true");
+    style.textContent = `
+    .${TRIGGER_CHIP_CLASS} {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border: 0;
+      border-radius: 9999px;
+      background: transparent;
+      color: inherit;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+    .${TRIGGER_CHIP_CLASS}:hover:not(:disabled) {
+      background: rgba(127, 127, 127, 0.08);
+    }
+    .${TRIGGER_CHIP_CLASS}:active:not(:disabled) {
+      background: rgba(127, 127, 127, 0.16);
+    }
+    .${TRIGGER_CHIP_CLASS}[data-state="open"] {
+      background: rgba(127, 127, 127, 0.08);
+    }
+    .${TRIGGER_CHIP_CLASS}:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  `;
+    (ownerDocument.head ?? ownerDocument.documentElement).append(style);
+  }
+
   // src/renderer-model-picker.ts
-  var RENDERER_MODEL_TRIGGER_FALLBACK_CLASSES = "border-token-border no-drag cursor-interaction items-center gap-1 border whitespace-nowrap select-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-40 flex rounded-full text-token-text-tertiary enabled:hover:bg-token-list-hover-background enabled:active:bg-token-foreground/15 data-[state=open]:bg-token-list-hover-background border-transparent h-token-button-composer px-2 py-0 text-sm leading-[18px] min-w-0";
   var MENU_CLASSES = "fixed z-50 overflow-hidden rounded-xl bg-token-dropdown-background/90 text-token-foreground shadow-lg backdrop-blur-xl";
   var SEARCH_INPUT_CLASSES = "mb-1 w-full shrink-0 rounded-lg border border-token-border bg-token-dropdown-background/95 px-2 py-1.5 text-sm text-token-foreground outline-none placeholder:text-token-text-tertiary disabled:cursor-not-allowed disabled:opacity-40";
   var OPTION_CLASSES = "flex w-full cursor-interaction items-center gap-2 rounded-lg px-2 py-2 text-left text-sm text-token-foreground outline-none enabled:hover:bg-token-list-hover-background enabled:active:bg-token-foreground/15 disabled:cursor-not-allowed disabled:opacity-40";
@@ -15996,8 +16060,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     control.modelMenu.style.top = placement.top === void 0 ? "auto" : `${placement.top}px`;
     control.modelMenu.style.bottom = placement.bottom === void 0 ? "auto" : `${placement.bottom}px`;
   }
-  function syncRendererModelTriggerClass(control, nativeClassName) {
-    control.trigger.className = nativeClassName?.trim() || RENDERER_MODEL_TRIGGER_FALLBACK_CLASSES;
+  function syncRendererModelTriggerClass(control) {
+    control.trigger.className = TRIGGER_CHIP_CLASS;
     control.trigger.style.width = "fit-content";
     control.trigger.style.maxWidth = MODEL_TRIGGER_MAX_WIDTH;
   }
@@ -16032,7 +16096,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     }
     control.searchEmpty.hidden = query.length === 0 || visibleCount > 0;
   }
-  function mountRendererModelPicker(composerId, nativeClassName, onSelectModel, onSelectThinking) {
+  function mountRendererModelPicker(composerId, onSelectModel, onSelectThinking) {
+    ensureRendererTriggerChipStyle(document);
     const root = document.createElement("div");
     root.setAttribute("data-codexhost-model-control", composerId);
     root.className = "relative min-w-0";
@@ -16042,14 +16107,19 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     trigger.setAttribute("aria-haspopup", "menu");
     trigger.setAttribute("aria-expanded", "false");
     trigger.setAttribute("data-state", "closed");
+    trigger.style.height = "28px";
+    trigger.style.padding = "0 8px";
+    trigger.style.gap = "4px";
+    trigger.style.font = "400 13px/18px system-ui, sans-serif";
+    trigger.style.letterSpacing = "0";
     const label = document.createElement("span");
-    label.className = "truncate text-token-foreground";
+    label.style.color = "inherit";
     label.style.minWidth = "0";
     label.style.overflow = "hidden";
     label.style.textOverflow = "ellipsis";
     label.style.whiteSpace = "nowrap";
     const thinkingLabel = document.createElement("span");
-    thinkingLabel.className = "shrink-0 truncate text-token-text-tertiary";
+    thinkingLabel.style.color = "var(--color-text-tertiary, #8f8f8f)";
     thinkingLabel.style.flex = "none";
     thinkingLabel.style.maxWidth = "96px";
     thinkingLabel.style.overflow = "hidden";
@@ -16276,7 +16346,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         root.remove();
       }
     };
-    syncRendererModelTriggerClass(control, nativeClassName);
+    syncRendererModelTriggerClass(control);
     return control;
   }
   function rebuildOptions(control, view) {
@@ -16343,7 +16413,12 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     if (popoverOpen2(control.modelMenu)) control.searchInput.focus();
   }
   function renderRendererModelPicker(control, view, visible) {
-    control.root.style.display = visible ? "block" : "none";
+    control.root.style.display = visible ? "inline-flex" : "none";
+    control.root.style.alignItems = "center";
+    control.root.style.alignSelf = "center";
+    control.root.style.height = "28px";
+    control.root.style.flex = "0 0 auto";
+    control.root.style.verticalAlign = "middle";
     if (!visible) {
       control.close();
       return;
@@ -16456,7 +16531,6 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   ];
 
   // src/renderer-permission-mode-picker.ts
-  var FALLBACK_TRIGGER_CLASSES = "no-drag cursor-interaction items-center gap-1 border whitespace-nowrap select-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-40 flex rounded-full text-token-text-tertiary enabled:hover:bg-token-list-hover-background enabled:active:bg-token-foreground/15 data-[state=open]:bg-token-list-hover-background border-transparent h-token-button-composer-sm px-1.5 py-0 text-sm leading-[18px] outline-hidden min-w-0";
   var MENU_CLASSES2 = "fixed z-50 overflow-hidden rounded-lg bg-token-dropdown-background/95 text-token-foreground shadow-lg ring-[0.5px] ring-token-border backdrop-blur-xl";
   var OPTION_CLASSES2 = "flex w-full cursor-interaction items-start gap-2 rounded-md px-2 py-2 text-left text-sm text-token-foreground outline-none enabled:hover:bg-token-list-hover-background enabled:active:bg-token-foreground/15 disabled:cursor-not-allowed disabled:opacity-40";
   function icon(node, size) {
@@ -16498,12 +16572,13 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     control.menu.style.left = `${left}px`;
     control.menu.style.bottom = `${Math.max(8, window.innerHeight - rect.top + 6)}px`;
   }
-  function syncRendererPermissionModeTriggerClass(control, nativeClassName) {
-    control.trigger.className = nativeClassName?.trim() || FALLBACK_TRIGGER_CLASSES;
+  function syncRendererPermissionModeTriggerClass(control) {
+    control.trigger.className = TRIGGER_CHIP_CLASS;
     control.trigger.style.maxWidth = "min(220px, 34vw)";
     control.trigger.style.letterSpacing = "0";
   }
-  function mountRendererPermissionModePicker(composerId, nativeClassName, onSelect) {
+  function mountRendererPermissionModePicker(composerId, onSelect) {
+    ensureRendererTriggerChipStyle(document);
     const root = document.createElement("div");
     root.setAttribute("data-codexhost-permission-mode-control", composerId);
     root.className = "relative min-w-0";
@@ -16513,6 +16588,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     trigger.setAttribute("aria-haspopup", "menu");
     trigger.setAttribute("aria-expanded", "false");
     trigger.setAttribute("data-state", "closed");
+    trigger.style.height = "28px";
+    trigger.style.padding = "0 6px";
+    trigger.style.gap = "4px";
+    trigger.style.font = "400 13px/18px system-ui, sans-serif";
     const shield = document.createElement("span");
     shield.className = "inline-flex shrink-0 items-center";
     shield.append(icon(Shield, 15));
@@ -16523,7 +16602,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     label.style.textOverflow = "ellipsis";
     label.style.whiteSpace = "nowrap";
     const chevron = document.createElement("span");
-    chevron.className = "inline-flex shrink-0 items-center text-token-text-tertiary";
+    chevron.className = "inline-flex shrink-0 items-center";
+    chevron.style.color = "var(--color-text-tertiary, #8f8f8f)";
     chevron.append(icon(ChevronDown, 14));
     trigger.append(shield, label, chevron);
     const menu = document.createElement("div");
@@ -16632,7 +16712,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         root.remove();
       }
     };
-    syncRendererPermissionModeTriggerClass(control, nativeClassName);
+    syncRendererPermissionModeTriggerClass(control);
     return control;
   }
   function rebuildOptions2(control, catalog) {
@@ -16674,7 +16754,12 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     }
   }
   function renderRendererPermissionModePicker(control, view, visible) {
-    control.root.style.display = visible ? "block" : "none";
+    control.root.style.display = visible ? "inline-flex" : "none";
+    control.root.style.alignItems = "center";
+    control.root.style.alignSelf = "center";
+    control.root.style.height = "28px";
+    control.root.style.flex = "0 0 auto";
+    control.root.style.verticalAlign = "middle";
     if (!visible) {
       control.close();
       return;
@@ -16721,9 +16806,72 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   function formatRendererCreditsPercent(value) {
     return `${decimal(value, 1)}%`;
   }
+  var SVG_NS = "http://www.w3.org/2000/svg";
+  function createRendererUsageRing(percent, options) {
+    const { size, strokeWidth, color } = options;
+    const trackColor = options.trackColor ?? "color-mix(in srgb, currentColor 18%, transparent)";
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const clamped = Math.min(100, Math.max(0, percent));
+    const offset = circumference * (1 - clamped / 100);
+    const center = size / 2;
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("width", String(size));
+    svg.setAttribute("height", String(size));
+    svg.setAttribute("viewBox", `0 0 ${size} ${size}`);
+    svg.setAttribute("aria-hidden", "true");
+    svg.style.display = "block";
+    svg.style.flex = "0 0 auto";
+    svg.style.transform = "rotate(-90deg)";
+    const track = document.createElementNS(SVG_NS, "circle");
+    track.setAttribute("cx", String(center));
+    track.setAttribute("cy", String(center));
+    track.setAttribute("r", String(radius));
+    track.setAttribute("fill", "none");
+    track.setAttribute("stroke", trackColor);
+    track.setAttribute("stroke-width", String(strokeWidth));
+    const fill = document.createElementNS(SVG_NS, "circle");
+    fill.setAttribute("cx", String(center));
+    fill.setAttribute("cy", String(center));
+    fill.setAttribute("r", String(radius));
+    fill.setAttribute("fill", "none");
+    fill.setAttribute("stroke", color);
+    fill.setAttribute("stroke-width", String(strokeWidth));
+    fill.setAttribute("stroke-linecap", "round");
+    fill.setAttribute("stroke-dasharray", String(circumference));
+    fill.setAttribute("stroke-dashoffset", String(offset));
+    svg.append(track, fill);
+    return svg;
+  }
+  function formatRendererPlanReset(unixSeconds) {
+    const date5 = new Date(unixSeconds * 1e3);
+    if (Number.isNaN(date5.getTime())) return "";
+    return date5.toLocaleString(void 0, {
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    });
+  }
+  function formatRendererPlanWindow(usedPercent, resetsAtUnix) {
+    const percent = formatRendererCreditsPercent(usedPercent);
+    if (resetsAtUnix === void 0) return percent;
+    const reset = formatRendererPlanReset(resetsAtUnix);
+    return reset.length > 0 ? `${percent} \xB7 ${reset}` : percent;
+  }
   function rendererUsageTriggerMaxWidth() {
     return "min(180px, 30vw)";
   }
+  function rendererUsageHasDisplayData(usage) {
+    return usage?.cacheHitRatePercent !== void 0 || usage?.outputTokensPerSecond !== void 0 || usage?.totalCostUsd !== void 0 || usage?.contextUsedTokens !== void 0 && usage.contextWindowTokens !== void 0 || usage?.totalTokens !== void 0 || usage?.inputTokens !== void 0 || usage?.cachedInputTokens !== void 0 || usage?.cacheWriteInputTokens !== void 0 || usage?.outputTokens !== void 0 || usage?.reasoningOutputTokens !== void 0 || usage?.planFiveHourUsedPercent !== void 0 || usage?.planSevenDayUsedPercent !== void 0;
+  }
+  function applyRendererPopoverChrome(popover) {
+    popover.style.border = "1px solid light-dark(rgba(15, 23, 42, 0.10), color-mix(in srgb, CanvasText 16%, transparent))";
+    popover.style.borderRadius = "14px";
+    popover.style.backgroundColor = "light-dark(Canvas, color-mix(in srgb, Canvas 88%, white 12%))";
+    popover.style.color = "CanvasText";
+    popover.style.boxShadow = "light-dark(0 10px 24px rgba(15, 23, 42, 0.12), 0 20px 45px rgba(0, 0, 0, 0.42)), 0 2px 8px light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.28))";
+  }
   function addDetailRow(parent, label, value) {
     const row = document.createElement("div");
     row.style.display = "grid";
@@ -16774,6 +16922,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     if (usage?.reasoningOutputTokens !== void 0) {
       addDetailRow(popover, "Reasoning", formatRendererTokenCount(usage.reasoningOutputTokens));
     }
+    if (usage?.totalTokens !== void 0) {
+      addDetailRow(popover, "Total tokens", formatRendererTokenCount(usage.totalTokens));
+    }
     if (usage?.inputTokens !== void 0 || usage?.outputTokens !== void 0) {
       addDetailRow(
         popover,
@@ -16781,6 +16932,20 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         `${formatRendererTokenCount(usage.inputTokens ?? 0)} / ${formatRendererTokenCount(usage.outputTokens ?? 0)}`
       );
     }
+    if (usage?.planFiveHourUsedPercent !== void 0) {
+      addDetailRow(
+        popover,
+        "5-hour limit",
+        formatRendererPlanWindow(usage.planFiveHourUsedPercent, usage.planFiveHourResetsAtUnix)
+      );
+    }
+    if (usage?.planSevenDayUsedPercent !== void 0) {
+      addDetailRow(
+        popover,
+        "7-day limit",
+        formatRendererPlanWindow(usage.planSevenDayUsedPercent, usage.planSevenDayResetsAtUnix)
+      );
+    }
     if (usage?.totalCostUsd !== void 0) {
       addDetailRow(popover, "Session cost estimate", formatRendererCost(usage.totalCostUsd));
     }
@@ -16821,34 +16986,35 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     if (control.trigger.getAttribute("aria-expanded") === "true") closePopover(control);
     else openPopover(control);
   }
-  function mountRendererUsageControl(composerId, nativeModelClassName) {
+  function mountRendererUsageControl(composerId) {
+    ensureRendererTriggerChipStyle(document);
     const root = document.createElement("div");
     root.dataset.codexhostUsageControl = composerId;
     root.className = "relative min-w-0";
     root.style.display = "none";
+    root.style.alignItems = "center";
+    root.style.alignSelf = "center";
+    root.style.height = "28px";
+    root.style.flex = "0 0 auto";
+    root.style.verticalAlign = "middle";
     const trigger = document.createElement("button");
-    const syncNativeModelClassName = (className) => {
-      trigger.className = className?.trim() || RENDERER_MODEL_TRIGGER_FALLBACK_CLASSES;
-    };
-    syncNativeModelClassName(nativeModelClassName);
+    trigger.className = TRIGGER_CHIP_CLASS;
     trigger.type = "button";
     trigger.setAttribute("aria-haspopup", "dialog");
     trigger.setAttribute("aria-expanded", "false");
     trigger.setAttribute("aria-label", "Thread Usage");
     trigger.title = "Thread Usage";
-    trigger.style.display = "inline-flex";
-    trigger.style.alignItems = "center";
+    trigger.style.color = "var(--color-text-tertiary, #8f8f8f)";
+    trigger.style.gap = "4px";
     trigger.style.width = "fit-content";
     trigger.style.maxWidth = rendererUsageTriggerMaxWidth();
-    trigger.style.height = "24px";
-    trigger.style.padding = "0 4px";
-    trigger.style.borderRadius = "9999px";
+    trigger.style.height = "28px";
+    trigger.style.padding = "0 8px";
+    trigger.style.verticalAlign = "middle";
     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 label = document.createElement("span");
     label.style.display = "inline-block";
     label.style.maxWidth = "100%";
@@ -16867,11 +17033,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     popover.style.width = "260px";
     popover.style.maxWidth = "min(320px, 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)";
+    applyRendererPopoverChrome(popover);
     popover.style.font = "13px/1.35 system-ui, sans-serif";
     popover.style.letterSpacing = "0";
     popover.style.zIndex = "2147483647";
@@ -16883,7 +17045,6 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       popover,
       anchor: null,
       label,
-      syncNativeModelClassName,
       dispose() {
         closePopover(control);
         if (closeTimer !== null) window.clearTimeout(closeTimer);
@@ -16893,18 +17054,13 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       },
       place(anchor) {
         if (!anchor?.parentElement) return false;
-        let reference = anchor;
-        let container = anchor.parentElement;
-        while (container.parentElement && (getComputedStyle(container).display === "inline" || container.tagName === "SPAN" && container.attributes.length === 0)) {
-          reference = container;
-          container = container.parentElement;
-        }
-        if (control.anchor === anchor && placementReference === reference && root.parentElement === container && root.nextElementSibling === reference) {
+        const container = anchor.parentElement;
+        if (control.anchor === anchor && placementReference === anchor && root.parentElement === container && root.nextElementSibling === anchor) {
           return true;
         }
         control.anchor = anchor;
-        placementReference = reference;
-        container.insertBefore(root, reference);
+        placementReference = anchor;
+        container.insertBefore(root, anchor);
         return true;
       }
     };
@@ -16946,10 +17102,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     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 hasContext = usage?.contextUsedTokens !== void 0 && usage.contextWindowTokens !== void 0;
+    const hasTokenUsage = usage?.totalTokens !== void 0 || usage?.inputTokens !== void 0 || usage?.cachedInputTokens !== void 0 || usage?.cacheWriteInputTokens !== void 0 || usage?.outputTokens !== void 0 || usage?.reasoningOutputTokens !== void 0;
+    const hasPlanLimit = usage?.planFiveHourUsedPercent !== void 0 || usage?.planSevenDayUsedPercent !== void 0;
+    const visible = rendererUsageHasDisplayData(usage);
     control.root.style.display = visible ? "inline-flex" : "none";
     if (!visible) {
       closePopover(control);
@@ -16960,6 +17116,24 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       outputTokensPerSecond !== void 0 ? formatRendererTokenRate(outputTokensPerSecond) : null,
       totalCostUsd !== void 0 ? formatRendererCost(totalCostUsd) : null
     ].filter((value) => value !== null);
+    if (summary.length === 0 && hasContext && usage?.contextWindowTokens !== void 0 && usage.contextWindowTokens > 0) {
+      summary.push(
+        `${decimal((usage.contextUsedTokens ?? 0) / usage.contextWindowTokens * 100, 1)}% context`
+      );
+    }
+    if (summary.length === 0 && usage?.totalTokens !== void 0) {
+      summary.push(`${formatRendererTokenCount(usage.totalTokens)} tokens`);
+    }
+    if (summary.length === 0 && hasTokenUsage) {
+      summary.push(
+        `${formatRendererTokenCount((usage?.inputTokens ?? 0) + (usage?.outputTokens ?? 0))} tokens`
+      );
+    }
+    if (summary.length === 0 && hasPlanLimit) {
+      summary.push(
+        usage?.planFiveHourUsedPercent !== void 0 ? `5h ${formatRendererCreditsPercent(usage.planFiveHourUsedPercent)}` : `7d ${formatRendererCreditsPercent(usage?.planSevenDayUsedPercent ?? 0)}`
+      );
+    }
     const compactSummary = summary.join(" \xB7 ");
     const accessibleSummary = `Thread Usage: ${compactSummary}`;
     control.trigger.style.maxWidth = rendererUsageTriggerMaxWidth();
@@ -16976,11 +17150,15 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     if (usedPercent >= 70) return "warn";
     return "ok";
   }
-  function formatRendererCreditsReset(value) {
+  function formatRendererCreditsReset(value, now = /* @__PURE__ */ new Date()) {
     const date5 = new Date(value);
     if (Number.isNaN(date5.getTime())) return value;
+    const isToday = date5.getFullYear() === now.getFullYear() && date5.getMonth() === now.getMonth() && date5.getDate() === now.getDate();
+    if (isToday) {
+      return `${date5.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" })} today`;
+    }
     return date5.toLocaleString(void 0, {
-      month: "long",
+      month: "short",
       day: "numeric",
       hour: "numeric",
       minute: "2-digit"
@@ -16989,6 +17167,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   function creditsPeriodLabel(periodType) {
     if (periodType === "weekly") return "Weekly limit";
     if (periodType === "monthly") return "Monthly limit";
+    if (periodType === "five_hour") return "5-hour limit";
+    if (periodType === "seven_day") return "7-day limit";
     return "Account limit";
   }
   function productLabel(product) {
@@ -17003,40 +17183,97 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     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 renderCreditsBar(usagePercent, color) {
+    const track = document.createElement("div");
+    track.dataset.codexhostCreditsBar = "";
+    track.style.height = "6px";
+    track.style.borderRadius = "9999px";
+    track.style.background = "color-mix(in srgb, currentColor 16%, transparent)";
+    track.style.overflow = "hidden";
+    const fill = document.createElement("span");
+    fill.style.display = "block";
+    fill.style.height = "100%";
+    fill.style.borderRadius = "9999px";
+    fill.style.width = `${Math.min(100, Math.max(0, usagePercent))}%`;
+    fill.style.background = color;
+    track.append(fill);
+    return track;
+  }
+  function renderCreditsHeader(credits) {
+    const wrapper = document.createElement("div");
+    wrapper.style.marginBottom = "11px";
+    const top = document.createElement("div");
+    top.style.display = "flex";
+    top.style.alignItems = "flex-start";
+    top.style.justifyContent = "space-between";
+    top.style.gap = "12px";
+    top.style.marginBottom = "5px";
+    const left = document.createElement("div");
+    const label = document.createElement("div");
+    label.textContent = creditsPeriodLabel(credits.periodType);
+    label.style.fontSize = "12.5px";
+    label.style.fontWeight = "600";
+    left.append(label);
+    if (credits.resetsAt) {
+      const reset = document.createElement("div");
+      reset.textContent = `resets ${formatRendererCreditsReset(credits.resetsAt)}`;
+      reset.style.fontSize = "11px";
+      reset.style.color = "color-mix(in srgb, currentColor 62%, transparent)";
+      left.append(reset);
+    }
+    const color = toneColor(rendererCreditsTone(credits.usedPercent));
+    const percent = document.createElement("span");
+    percent.textContent = formatRendererCreditsPercent(credits.usedPercent);
+    percent.style.fontSize = "26px";
+    percent.style.fontWeight = "700";
+    percent.style.fontVariantNumeric = "tabular-nums";
+    percent.style.color = color;
+    top.append(left, percent);
+    wrapper.append(top, renderCreditsBar(credits.usedPercent, color));
+    return wrapper;
+  }
+  function renderCreditsTile(label, usagePercent, resetsAt) {
+    const color = toneColor(rendererCreditsTone(usagePercent));
+    const tile = document.createElement("div");
+    tile.style.marginBottom = "11px";
+    const top = document.createElement("div");
+    top.style.display = "flex";
+    top.style.alignItems = "flex-start";
+    top.style.justifyContent = "space-between";
+    top.style.gap = "12px";
+    top.style.marginBottom = "5px";
+    const left = document.createElement("div");
+    const name = document.createElement("span");
+    name.textContent = label;
+    name.style.fontSize = "12px";
+    left.append(name);
+    if (resetsAt) {
+      const reset = document.createElement("div");
+      reset.textContent = `resets ${formatRendererCreditsReset(resetsAt)}`;
+      reset.style.fontSize = "10.5px";
+      reset.style.color = "color-mix(in srgb, currentColor 62%, transparent)";
+      left.append(reset);
+    }
+    const percent = document.createElement("span");
+    percent.textContent = formatRendererCreditsPercent(usagePercent);
+    percent.style.fontSize = "12px";
+    percent.style.fontVariantNumeric = "tabular-nums";
+    percent.style.color = color;
+    top.append(left, percent);
+    tile.append(top, renderCreditsBar(usagePercent, color));
+    return tile;
   }
   function renderDetails2(popover, credits) {
+    const glowColor = toneColor(rendererCreditsTone(credits.usedPercent));
+    popover.style.backgroundImage = `radial-gradient(160px 100px at 18% -10%, color-mix(in srgb, ${glowColor} 20%, transparent), transparent 70%)`;
     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)
-      );
-    }
+    popover.append(renderCreditsHeader(credits));
+    const tiles = (credits.productUsage ?? []).map(
+      (product) => renderCreditsTile(productLabel(product.product), product.usagePercent, product.resetsAt)
+    );
+    const lastTile = tiles.at(-1);
+    if (lastTile) lastTile.style.marginBottom = "0";
+    popover.append(...tiles);
   }
   function popoverIsOpen2(popover) {
     try {
@@ -17074,43 +17311,38 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     if (control.trigger.getAttribute("aria-expanded") === "true") closePopover2(control);
     else openPopover2(control);
   }
-  function mountRendererCreditsControl(composerId, nativeModelClassName) {
+  function mountRendererCreditsControl(composerId) {
+    ensureRendererTriggerChipStyle(document);
     const root = document.createElement("div");
     root.dataset.codexhostCreditsControl = composerId;
     root.className = "relative min-w-0";
     root.style.display = "none";
+    root.style.alignItems = "center";
+    root.style.alignSelf = "center";
+    root.style.height = "28px";
+    root.style.flex = "0 0 auto";
+    root.style.verticalAlign = "middle";
     const trigger = document.createElement("button");
-    const syncNativeModelClassName = (className) => {
-      trigger.className = className?.trim() || RENDERER_MODEL_TRIGGER_FALLBACK_CLASSES;
-    };
-    syncNativeModelClassName(nativeModelClassName);
+    trigger.className = TRIGGER_CHIP_CLASS;
     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.height = "28px";
+    trigger.style.padding = "0 8px";
+    trigger.style.verticalAlign = "middle";
     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 ringSlot = document.createElement("span");
+    ringSlot.dataset.codexhostCreditsRing = "";
+    ringSlot.style.display = "inline-flex";
+    ringSlot.style.flex = "0 0 auto";
     const label = document.createElement("span");
     label.dataset.codexhostCreditsLabel = "";
     label.style.display = "inline-block";
@@ -17118,7 +17350,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     label.style.overflow = "hidden";
     label.style.textOverflow = "ellipsis";
     label.style.whiteSpace = "nowrap";
-    trigger.append(dot, label);
+    trigger.append(ringSlot, label);
     const popover = document.createElement("div");
     popover.id = `${composerId}-credits-popover`;
     popover.setAttribute("role", "dialog");
@@ -17130,11 +17362,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     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)";
+    applyRendererPopoverChrome(popover);
     popover.style.font = "13px/1.35 system-ui, sans-serif";
     popover.style.letterSpacing = "0";
     popover.style.zIndex = "2147483647";
@@ -17145,7 +17373,6 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       trigger,
       popover,
       anchor: null,
-      syncNativeModelClassName,
       dispose() {
         closePopover2(control);
         if (closeTimer !== null) window.clearTimeout(closeTimer);
@@ -17156,14 +17383,12 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       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) {
+        if (control.anchor === anchor && placementReference === anchor && root.parentElement === parent && root.nextElementSibling === anchor) {
           return true;
         }
         control.anchor = anchor;
         placementReference = anchor;
-        if (next && next !== root) parent.insertBefore(root, next);
-        else if (next !== root) parent.append(root);
+        if (root !== anchor) parent.insertBefore(root, anchor);
         return true;
       }
     };
@@ -17209,9 +17434,17 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     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 ringSlot = control.trigger.querySelector("[data-codexhost-credits-ring]");
     const label = control.trigger.querySelector("[data-codexhost-credits-label]");
-    if (dot) dot.style.background = toneColor(tone);
+    if (ringSlot) {
+      ringSlot.replaceChildren(
+        createRendererUsageRing(accountCredits.usedPercent, {
+          size: 14,
+          strokeWidth: 2.4,
+          color: toneColor(tone)
+        })
+      );
+    }
     if (label) label.textContent = percent;
     control.root.style.display = "inline-flex";
     control.trigger.setAttribute("aria-label", title);
@@ -17226,21 +17459,21 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   var MENU_WIDTH = 320;
   var VIEWPORT_MARGIN = 8;
   var MENU_GAP2 = 8;
-  var SVG_NS = "http://www.w3.org/2000/svg";
+  var SVG_NS2 = "http://www.w3.org/2000/svg";
   var COMMAND_ICON_PATHS = [
     "M409.6 377.6h204.8a32 32 0 0 1 32 32v204.8a32 32 0 0 1-32 32H409.6a32 32 0 0 1-32-32V409.6a32 32 0 0 1 32-32z m172.8 64h-140.8v140.8h140.8z",
     "M332.8 800a108.8 108.8 0 0 1 0-217.6h76.8a32 32 0 0 1 32 32v76.8a108.928 108.928 0 0 1-108.8 108.8z m0-153.6a44.8 44.8 0 1 0 44.8 44.8v-44.8zM409.6 441.6H332.8a108.8 108.8 0 1 1 108.8-108.8v76.8a32 32 0 0 1-32 32z m-76.8-153.6a44.8 44.8 0 0 0 0 89.6h44.8V332.8A44.842667 44.842667 0 0 0 332.8 288zM691.2 441.6h-76.8a32 32 0 0 1-32-32V332.8a108.8 108.8 0 1 1 108.8 108.8z m-44.8-64h44.8a44.8 44.8 0 1 0-44.8-44.8zM691.2 800a108.928 108.928 0 0 1-108.8-108.8v-76.8a32 32 0 0 1 32-32h76.8a108.8 108.8 0 0 1 0 217.6z m-44.8-153.6v44.8a44.8 44.8 0 1 0 44.8-44.8z",
     "M640 970.666667H384c-118.186667 0-198.272-25.002667-251.946667-78.72S53.333333 758.186667 53.333333 640V384c0-118.186667 25.002667-198.272 78.72-251.946667S265.813333 53.333333 384 53.333333h256c118.186667 0 198.272 25.002667 251.946667 78.72S970.666667 265.813333 970.666667 384v256c0 118.186667-25.002667 198.272-78.72 251.946667S758.186667 970.666667 640 970.666667z m-256-853.333334c-100.096 0-165.802667 19.2-206.72 59.946667S117.333333 283.904 117.333333 384v256c0 100.096 19.072 165.802667 59.946667 206.72S283.904 906.666667 384 906.666667h256c100.096 0 165.802667-19.072 206.72-59.946667S906.666667 740.096 906.666667 640V384c0-100.096-19.072-165.802667-59.946667-206.72S740.096 117.333333 640 117.333333z"
   ];
   function commandIcon(ownerDocument) {
-    const svg = ownerDocument.createElementNS(SVG_NS, "svg");
+    const svg = ownerDocument.createElementNS(SVG_NS2, "svg");
     svg.setAttribute("viewBox", "0 0 1024 1024");
     svg.setAttribute("width", "15");
     svg.setAttribute("height", "15");
     svg.setAttribute("fill", "currentColor");
     svg.setAttribute("aria-hidden", "true");
     for (const path of COMMAND_ICON_PATHS) {
-      const element = ownerDocument.createElementNS(SVG_NS, "path");
+      const element = ownerDocument.createElementNS(SVG_NS2, "path");
       element.setAttribute("d", path);
       svg.append(element);
     }
@@ -17560,7 +17793,6 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   }
   var VOICE_CONTROL_PATTERN = /(dictat|microphone|speech(?:[-_\s]?to[-_\s]?text)?|voice[-_\s]?input|(^|\s)voice(\s|$)|composer[-_](?:speech|dictat|mic)|语音|听写|麦克风|pause|暂停|stop recording|stop dictation|停止录音|停止听写|(^|\s)stop(\s|$))/iu;
   var CANCEL_CONTROL_PATTERN = /(cancel|discard|close|dismiss|取消|关闭|丢弃)/iu;
-  var ATTACH_CONTROL_PATTERN = /(add files|attach files|attach file|attachment|composer[-_]attach|添加文件|附件)/iu;
   var TRAILING_ACTION_WALK_DEPTH = 3;
   function isComposerCancelButton(element) {
     if (isOwnedRendererControl(element)) return false;
@@ -17572,10 +17804,6 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     if (/(^|\s)(send|submit|发送|提交)(\s|$)/u.test(description)) return false;
     return VOICE_CONTROL_PATTERN.test(description);
   }
-  function isComposerAttachButton(element) {
-    if (isOwnedRendererControl(element)) return false;
-    return ATTACH_CONTROL_PATTERN.test(controlDescription(element));
-  }
   function isComposerTrailingActionButton(element) {
     return isComposerVoiceButton(element) || isComposerSubmitButton(element);
   }
@@ -17586,14 +17814,6 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     const buttons = [...element.querySelectorAll("button")];
     return buttons.length > 0 && buttons.every((button) => isComposerTrailingActionButton(button));
   }
-  function attachControlWithin(root) {
-    if (isComposerAttachButton(root)) return root;
-    if (typeof root.querySelectorAll !== "function") return null;
-    const matches = [
-      ...root.querySelectorAll("button, [aria-label], [title], [data-testid]")
-    ].filter(isComposerAttachButton);
-    return matches.length === 1 ? matches[0] ?? null : null;
-  }
   function sendButtonWithin(root) {
     return [...root.querySelectorAll("button")].find(
       (button) => isComposerSubmitButton(button)
@@ -17708,23 +17928,15 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     ].filter((element) => isNativeModelControlCandidate(element));
     return candidates.length === 1 ? candidates[0] ?? null : null;
   }
-  var contextUsageDescriptionPattern = /(context|token|上下文|令牌)/iu;
   function isNativeContextUsageControlCandidate(element) {
     if (element.hasAttribute("data-codexhost-usage-control") || element.hasAttribute("data-codexhost-credits-control")) {
       return false;
     }
-    const description = [
-      element.getAttribute("aria-label"),
-      element.getAttribute("title"),
-      element.getAttribute("data-testid")
-    ].filter((value) => value !== null).join(" ");
-    return contextUsageDescriptionPattern.test(description);
+    return element.matches('span[role="img"][aria-label]') && element.querySelectorAll("svg > circle").length === 2;
   }
   function nativeContextUsageControlForComposer(composer) {
     const candidates = [
-      ...composer.querySelectorAll(
-        'button, [role="button"], [aria-label], [title], [data-testid]'
-      )
+      ...composer.querySelectorAll('span[role="img"][aria-label]')
     ].filter(isNativeContextUsageControlCandidate);
     return candidates.length === 1 ? candidates[0] ?? null : null;
   }
@@ -17741,53 +17953,29 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     if (state.ariaHidden === null) state.element.removeAttribute("aria-hidden");
     else state.element.setAttribute("aria-hidden", state.ariaHidden);
   }
+  function refreshNativeContextUsageControl(control) {
+    const candidate = nativeContextUsageControlForComposer(control.composer);
+    if (candidate === control.nativeContextUsageControl?.element) return;
+    restoreNativeControl(control.nativeContextUsageControl);
+    control.nativeContextUsageControl = captureNativeControl(candidate);
+  }
   function refreshNativeModelControl(control) {
     const candidate = nativeModelControlForComposer(control.composer);
-    if (!candidate) {
-      control.usage.syncNativeModelClassName();
-      control.credits.syncNativeModelClassName();
-      return;
-    }
+    if (!candidate) return;
     if (candidate !== control.nativeModelControl?.element) {
       restoreNativeControl(control.nativeModelControl);
       control.nativeModelControl = captureNativeControl(candidate);
-      syncRendererModelTriggerClass(control.modelPicker, candidate.className);
+      syncRendererModelTriggerClass(control.modelPicker);
     }
-    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") || element.hasAttribute("data-codexhost-harness-command-control") || isTrailingActionNode(element)) {
-        continue;
-      }
-      return element;
-    }
-    return null;
+    const context = control.nativeContextUsageControl?.element;
+    const contextWrapper = context?.parentElement;
+    return contextWrapper?.parentElement ? contextWrapper : null;
   }
-  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 attachControlWithin(first) ?? first;
-      }
-      if (parent === composer) break;
-      current = parent;
-    }
-    return null;
+  function creditsPlacementAnchor(control) {
+    const root = control.permissionModePicker?.root;
+    return root?.parentElement ? root : null;
   }
   function refreshTrailingClusterPlacement(control) {
     const sendButton = control.sendButton;
@@ -17805,11 +17993,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   }
   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;
+    if (!anchor || !control.usage) {
+      if (control.usage?.anchor) control.usage.root.remove();
+      if (control.usage) control.usage.anchor = null;
       return;
     }
     const previousUsageParent = control.usage.root.parentElement;
@@ -17817,13 +18003,15 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     control.usage.place(anchor);
     const usagePositionChanged = previousUsageParent !== control.usage.root.parentElement || previousUsageNextSibling !== control.usage.root.nextElementSibling;
     if (usagePositionChanged) control.harnessCommands?.placeBefore(control.usage.root);
-    const leading = creditsPlacementAnchor(control.composer, control.usage.root);
-    if (!leading) {
+  }
+  function refreshCreditsPlacement(control) {
+    const anchor = creditsPlacementAnchor(control);
+    if (!anchor) {
       if (control.credits.anchor) control.credits.root.remove();
       control.credits.anchor = null;
       return;
     }
-    control.credits.place(leading);
+    control.credits.place(anchor);
   }
   function refreshNativePermissionModeControl(control) {
     const semanticCandidate = semanticNativePermissionModeControlForComposer(control.composer);
@@ -17834,7 +18022,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     const candidate = nativePermissionModeControlForComposer(control.composer);
     control.nativePermissionModeControlVerified = candidate === semanticCandidate && candidate !== null;
     if (!candidate) return;
-    syncRendererPermissionModeTriggerClass(control.permissionModePicker, candidate.className);
+    syncRendererPermissionModeTriggerClass(control.permissionModePicker);
     const parent = candidate.parentElement;
     if (parent && (control.permissionModePicker.root.parentElement !== parent || control.permissionModePicker.root.nextElementSibling !== candidate)) {
       parent.insertBefore(control.permissionModePicker.root, candidate);
@@ -17847,39 +18035,40 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       return;
     }
     if (state.element.hidden && state.element.getAttribute("aria-hidden") === "true") return;
-    const active = document.activeElement;
-    if (active instanceof HTMLElement && state.element.contains(active)) active.blur();
+    const active = typeof document !== "undefined" ? document.activeElement : null;
+    if (active && typeof active.blur === "function" && state.element.contains(active)) {
+      active.blur();
+    }
     if (state.element.getAttribute("aria-expanded") === "true") state.element.click();
     state.element.hidden = true;
     state.element.setAttribute("aria-hidden", "true");
   }
   function reconcileComposerNativeControls(control, hideModel, hidePermissionMode) {
+    refreshNativeContextUsageControl(control);
     refreshNativeModelControl(control);
+    refreshNativePermissionModeControl(control);
     refreshTrailingClusterPlacement(control);
     refreshUsagePlacement(control);
-    refreshNativePermissionModeControl(control);
+    refreshCreditsPlacement(control);
     setNativeControlHidden(control.nativeModelControl, hideModel);
+    setNativeControlHidden(control.nativeContextUsageControl, false);
     setNativeControlHidden(control.nativePermissionModeControl, hidePermissionMode);
   }
   function mountComposerAgentControl(composer, composerId, sendButton, enabledAgents, onSelect, onDownload, onSelectModel, onSelectThinking, onSelectPermissionMode, onSelectCommand) {
     const nativeModelControl = captureNativeControl(nativeModelControlForComposer(composer));
+    const nativeContextUsageControl = captureNativeControl(
+      nativeContextUsageControlForComposer(composer)
+    );
     const semanticNativePermissionModeControl = semanticNativePermissionModeControlForComposer(composer);
     const nativePermissionModeControl = captureNativeControl(semanticNativePermissionModeControl);
     const nativePermissionModeControlVerified = semanticNativePermissionModeControl !== null && nativePermissionModeControlForComposer(composer) === semanticNativePermissionModeControl;
     const picker = mountRendererAgentPicker(composerId, enabledAgents, onSelect, onDownload);
-    const modelPicker = mountRendererModelPicker(
-      composerId,
-      nativeModelControl?.element.className,
-      onSelectModel,
-      onSelectThinking
-    );
+    const modelPicker = mountRendererModelPicker(composerId, onSelectModel, onSelectThinking);
     const permissionModePicker = mountRendererPermissionModePicker(
       composerId,
-      nativePermissionModeControl?.element.className,
       onSelectPermissionMode
     );
-    const usage = mountRendererUsageControl(composerId, nativeModelControl?.element.className);
-    const credits = mountRendererCreditsControl(composerId, nativeModelControl?.element.className);
+    const credits = mountRendererCreditsControl(composerId);
     const toolbar = sendButton.parentElement;
     const harnessCommands = mountRendererHarnessCommandControl(
       toolbar ?? composer,
@@ -17895,24 +18084,30 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     if (!toolbar) composer.append(modelPicker.root, picker.root);
     const control = {
       composer,
+      composerId,
       root: picker.root,
       picker,
       modelPicker,
       permissionModePicker,
       nativeModelControl,
       nativePermissionModeControl,
+      nativeContextUsageControl,
       nativePermissionModeControlVerified,
       credits,
-      usage,
+      usage: null,
       harnessCommands,
       sendButton,
       sendDisabledBeforeSwitch: null
     };
     refreshTrailingClusterPlacement(control);
     refreshUsagePlacement(control);
+    refreshCreditsPlacement(control);
     return control;
   }
   function renderComposerAgentControl(control, state, adapterState, switching, availability = {}, modelView = { status: "idle" }, permissionModeView = { status: "idle" }, usage = null, accountCredits = null) {
+    if (control.usage === null) {
+      control.usage = mountRendererUsageControl(control.composerId);
+    }
     const selectedModel = modelView.selected;
     const selectedCatalogModel = modelView.catalog?.models.find(
       (model) => model.ref.id === selectedModel?.id
@@ -17949,7 +18144,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       permissionModeView,
       permissionModeVisible
     );
-    renderRendererUsageControl(control.usage, usage);
+    if (control.usage) renderRendererUsageControl(control.usage, usage);
     renderRendererCreditsControl(control.credits, accountCredits);
   }
   function disposeComposerAgentControl(control) {
@@ -17957,9 +18152,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       control.sendButton.disabled = control.sendDisabledBeforeSwitch;
     }
     restoreNativeControl(control.nativeModelControl);
+    restoreNativeControl(control.nativeContextUsageControl);
     restoreNativeControl(control.nativePermissionModeControl);
     control.credits.dispose();
-    control.usage.dispose();
+    control.usage?.dispose();
+    control.usage = null;
     control.harnessCommands.dispose();
     control.permissionModePicker.dispose();
     control.modelPicker.dispose();
@@ -21274,6 +21471,8 @@ ${error51.stderrTail}`] : []
         clearUpdateRetry();
         retryUpdateClient = client;
         updateRetryAttempt = 0;
+      } else if (updateRetryTimer !== null) {
+        return;
       }
       checkedUpdateClient = client;
       const generation = ++updateCheckGeneration;
@@ -21353,15 +21552,33 @@ ${error51.stderrTail}`] : []
     "deepseek-harness",
     "grok"
   ];
+  function isRetryableHarnessAvailability(availability, error51) {
+    return availability !== void 0 && availability !== "ready" && availability !== "notInstalled" && error51?.retryable === true;
+  }
+  function retryableHarnessAvailabilityAgents(availability, errors) {
+    return externalAgents.filter(
+      (agent) => isRetryableHarnessAvailability(availability[agent], errors[agent])
+    );
+  }
+  function passiveHarnessAvailabilityAgents(availability, errors) {
+    return externalAgents.filter(
+      (agent) => availability[agent] === "checking" || isRetryableHarnessAvailability(availability[agent], errors[agent])
+    );
+  }
   var rendererUsageRefreshDelays = [250, 500, 1e3, 2e3, 4e3, 8e3];
   function rendererUsageRefreshDelay(attempt) {
     const index = Math.max(0, Math.min(Math.trunc(attempt), rendererUsageRefreshDelays.length - 1));
     return rendererUsageRefreshDelays[index] ?? rendererUsageRefreshDelays[0];
   }
+  function externalAgentHasAccountCredits(agent) {
+    return agent === "codex" || agent === "grok" || agent === "claude-code";
+  }
   function shouldRetryExternalThreadUsage(agent, usage, accountCredits = null) {
-    if (agent === "codex") return false;
     if (usage === null) return true;
-    return agent === "grok" && accountCredits === null;
+    return externalAgentHasAccountCredits(agent) && accountCredits === null;
+  }
+  function shouldReloadExternalCatalogAfterAvailabilityRefresh(previous, next, configurationReady) {
+    return previous !== next || !configurationReady;
   }
   function selectableThinkingOptionId(state) {
     return state.effectiveThinkingOptionId && state.availableThinkingOptions?.some(({ id }) => id === state.effectiveThinkingOptionId) ? state.effectiveThinkingOptionId : void 0;
@@ -21662,7 +21879,7 @@ ${error51.stderrTail}`] : []
     };
     const refreshThreadUsage = async (mounted) => {
       const threadId = threadIdFromComposerModelTarget(mounted.modelTarget);
-      if (!threadId || !modelControl || controller.get(mounted.composer).agent === "codex") {
+      if (!threadId || !modelControl) {
         mounted.usage = null;
         mounted.accountCredits = null;
         usageRefreshAttempts.delete(mounted.composer);
@@ -21678,7 +21895,7 @@ ${error51.stderrTail}`] : []
         mounted.usage = result.usage;
         mounted.accountCredits = result.accountCredits ?? null;
         const agent = controller.get(mounted.composer).agent;
-        if (result.usage !== null && (agent !== "grok" || result.accountCredits)) {
+        if (result.usage !== null && (!externalAgentHasAccountCredits(agent) || result.accountCredits)) {
           usageRefreshAttempts.delete(mounted.composer);
         }
         renderMounted(mounted);
@@ -21787,12 +22004,13 @@ ${error51.stderrTail}`] : []
           renderMounted(mounted);
           if (mounted.ownershipStatus !== "error") void refreshCommands(mounted);
           sidebarAgentIcons.refresh();
-          if (mounted.ownershipStatus !== "error" && shouldRetryExternalThreadUsage(
-            controller.get(mounted.composer).agent,
-            mounted.usage,
-            mounted.accountCredits
-          )) {
-            scheduleThreadUsageRefresh(mounted);
+          if (mounted.ownershipStatus !== "error") {
+            const agent = controller.get(mounted.composer).agent;
+            if (agent === "codex" && mounted.usage === null) {
+              void refreshThreadUsage(mounted);
+            } else if (shouldRetryExternalThreadUsage(agent, mounted.usage, mounted.accountCredits)) {
+              scheduleThreadUsageRefresh(mounted);
+            }
           }
         }
       }
@@ -22432,7 +22650,7 @@ ${error51.stderrTail}`] : []
       const currentHostId = modelControl.currentHostId?.() ?? "local";
       return currentHostId === hostId ? modelControl : null;
     }
-    function refreshHarnessAvailabilityForHost(hostId, refresh = false, retry = false) {
+    function refreshHarnessAvailabilityForHost(hostId, refresh = false, retry = false, force = false) {
       const state = hostHarnessAvailabilityState(hostId);
       if (!retry) resetHarnessAvailabilityRetry(hostId);
       const client = modelClientForHost(hostId);
@@ -22441,12 +22659,16 @@ ${error51.stderrTail}`] : []
         return Promise.resolve();
       }
       if (state.request?.client === client) return state.request.promise;
-      state.availability = Object.fromEntries(
-        externalAgents.map((agent) => [
-          agent,
-          state.availability[agent] === "ready" ? "ready" : "checking"
-        ])
-      );
+      const agentsToInspect = force ? externalAgents : passiveHarnessAvailabilityAgents(state.availability, state.errors);
+      if (agentsToInspect.length === 0) {
+        resetHarnessAvailabilityRetry(hostId);
+        return Promise.resolve();
+      }
+      const nextAvailability = { ...state.availability };
+      for (const agent of agentsToInspect) {
+        if (nextAvailability[agent] !== "ready") nextAvailability[agent] = "checking";
+      }
+      state.availability = nextAvailability;
       if (hostId === activeAvailabilityHostId) {
         publishConnectionStatus();
         for (const mounted of mountedByComposer.values()) renderMounted(mounted);
@@ -22454,7 +22676,7 @@ ${error51.stderrTail}`] : []
       const generation = ++state.requestGeneration;
       const promise2 = (async () => {
         await Promise.all(
-          externalAgents.map(async (agent) => {
+          agentsToInspect.map(async (agent) => {
             let status = "error";
             let nextError;
             try {
@@ -22485,6 +22707,7 @@ ${error51.stderrTail}`] : []
               };
             }
             if (generation !== state.requestGeneration || disposed) return;
+            const previousStatus = state.availability[agent];
             state.errors[agent] = nextError;
             state.availability = { ...state.availability, [agent]: status };
             if (hostId !== activeAvailabilityHostId) {
@@ -22499,7 +22722,11 @@ ${error51.stderrTail}`] : []
             }
             for (const mounted of mountedByComposer.values()) {
               const composerState = controller.get(mounted.composer);
-              if (composerState.agent === agent) {
+              if (composerState.agent === agent && shouldReloadExternalCatalogAfterAvailabilityRefresh(
+                previousStatus,
+                status,
+                isExternalConfigurationReady(mounted)
+              )) {
                 void loadExternalCatalog(mounted);
               }
               renderMounted(mounted);
@@ -22508,7 +22735,7 @@ ${error51.stderrTail}`] : []
           })
         );
         if (generation !== state.requestGeneration || disposed) return;
-        if (externalAgents.every((agent) => state.availability[agent] === "ready")) {
+        if (retryableHarnessAvailabilityAgents(state.availability, state.errors).length === 0) {
           resetHarnessAvailabilityRetry(hostId);
         } else {
           scheduleHarnessAvailabilityRetry(hostId);
@@ -22595,7 +22822,7 @@ ${error51.stderrTail}`] : []
       },
       refresh() {
         for (const hostId of harnessAvailabilityByHost.keys()) {
-          void refreshHarnessAvailabilityForHost(hostId, true);
+          void refreshHarnessAvailabilityForHost(hostId, true, false, true);
         }
         return Promise.resolve();
       },
@@ -22727,8 +22954,8 @@ ${error51.stderrTail}`] : []
           continue;
         }
         const state = controller.get(composer);
-        const hideNativeControls = controller.isSwitching(composer) || state.agent !== "codex";
-        reconcileComposerNativeControls(mounted.control, hideNativeControls, hideNativeControls);
+        const hideCodexControls = controller.isSwitching(composer) || state.agent !== "codex";
+        reconcileComposerNativeControls(mounted.control, hideCodexControls, hideCodexControls);
         if (refreshTargets) refreshMountedConversationTarget(mounted);
       }
       for (const editor of document.querySelectorAll(EDITOR_SELECTOR)) {