@cortexkit/opencode-anthropic-auth 2.2.0 → 2.2.1

package/src/tui-compiled/tui/claude-sidebar.tsx

@@ -19,7 +19,7 @@ import { fileURLToPath } from "node:url";
 import { formatCreditAmounts, quotaDisplayProjection, quotaWindowParts } from "@cortexkit/anthropic-auth-core";
 import { TextAttributes } from "opentui:runtime-module:%40opentui%2Fcore";
 import { createEffect, createMemo, createSignal, For, Index, onCleanup, Show } from "opentui:runtime-module:solid-js";
-import { computeQuotaPacing, DEFAULT_SIDEBAR_STATE, FIVE_HOUR_MS, formatPrimeAccountValue, formatQuotaRowLabel, getCollapsedAccounts, getCollapsedQuotaSummary, getFableRecoverySummary, resolveActiveAccount, SEVEN_DAY_MS } from "../sidebar-state.js";
+import { computeQuotaPacing, DEFAULT_SIDEBAR_STATE, FIVE_HOUR_MS, fitPaceLine, fitQuotaRow, formatPrimeAccountValue, formatQuotaRowLabel, getCollapsedAccounts, getCollapsedQuotaSummary, getFableRecoverySummary, quotaLabelColumnWidth, resolveActiveAccount, SEVEN_DAY_MS, scopedQuotaShortNames } from "../sidebar-state.js";
 import { PLUGIN_KEY, queueTuiPreferenceUpdate, readTuiPreferencesFile, resolveAnthropicAuthPrefs, watchTuiPreferences } from "../tui-preferences.js";
 
 // Read package metadata from either the raw src/ entry or its generated
@@ -78,8 +78,8 @@ const PACE_DEFICIT_CHAR = '\u2593';
 // bar renders as a single fill+empty pair, identical to the pre-pacing look.
 // Empty text nodes still occupy a phantom cell in the opentui flex row, so
 // zero-length segments are dropped from every return path (plain and pacing).
-function quotaBarSegments(usedPct, appearance, pacing) {
-  const width = appearance.barWidth;
+function quotaBarSegments(usedPct, appearance, pacing, width) {
+  if (width <= 0) return [];
   const cells = pct => Math.max(0, Math.min(Math.round(pct / 100 * width), width));
   const usedCells = cells(usedPct);
   const fillTone = usageTone(usedPct, appearance);
@@ -275,122 +275,147 @@ function CollapsedAccountRow(props) {
   })();
 }
 
-// Quota window row: muted label left, tone-colored bar + shared figure right,
-// with an optional muted reset suffix. When pacing data is present, the bar
-// gains a pace segment and an off-pace window adds a muted subline with the
-// reserve/deficit delta and the projected runout.
+// One cell run of a single-line row: drawn at its own width, never shrunk and
+// never wrapped, so the row's layout is exactly what `fitQuotaRow` measured.
+function Cell(props) {
+  return (() => {
+    var _el$13 = _$createElement("text");
+    _$setProp(_el$13, "flexShrink", 0);
+    _$setProp(_el$13, "wrapMode", 'none');
+    _$insert(_el$13, () => props.text);
+    _$effect(_p$ => {
+      var _v$1 = Bun.stringWidth(props.text),
+        _v$10 = props.fg;
+      _v$1 !== _p$.e && (_p$.e = _$setProp(_el$13, "width", _v$1, _p$.e));
+      _v$10 !== _p$.t && (_p$.t = _$setProp(_el$13, "fg", _v$10, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$13;
+  })();
+}
+
+// Quota window row: muted label left in a column `labelWidth` wide, then the
+// tone-colored bar and the shared figure, and the muted reset at the right
+// edge. The row is one line: `fitQuotaRow` drops detail to fit `width`
+// instead of letting it wrap. When pacing data is present, the bar gains a
+// pace segment and an off-pace window adds a one-line subline under the bar
+// with the reserve/deficit delta and either the projected runout or
+// `lasts to reset`.
 function QuotaRow(props) {
   const used = () => props.usedPercent ?? 0;
-  const reset = () => props.part?.resetIn;
-  const paceLine = () => {
-    const pacing = props.pacing;
-    if (!pacing || pacing.state === 'on-pace') return null;
-    const pct = Math.round(Math.abs(pacing.deltaPercent));
-    if (pacing.state === 'reserve') return `reserve ${pct}% \u00b7 lasts`;
-    return pacing.runsOutAt ? `deficit ${pct}% \u00b7 out in ${formatResetIn(pacing.runsOutAt, props.now)}` : `deficit ${pct}% \u00b7 lasts`;
-  };
+  const labelCell = () => `${props.label}${' '.repeat(Math.max(0, props.labelWidth - Bun.stringWidth(props.label)))} `;
+  const figure = () => `${props.part?.figure ?? ''}${props.binding ? ' \u2022' : ''}`;
+  const fit = () => fitQuotaRow({
+    width: props.width,
+    labelWidth: props.labelWidth,
+    barWidth: props.appearance.barWidth,
+    figure: figure(),
+    reset: props.part?.resetIn
+  });
+  const paceLine = () => fitPaceLine(props.pacing, props.width === undefined ? undefined : props.width - props.labelWidth - 1, props.pacing?.runsOutAt ? formatResetIn(props.pacing.runsOutAt, props.now) : undefined);
   return _$createComponent(Show, {
     get when() {
       return props.part;
     },
     get fallback() {
       return (() => {
-        var _el$21 = _$createElement("box"),
-          _el$22 = _$createElement("text"),
-          _el$23 = _$createElement("text");
-        _$insertNode(_el$21, _el$22);
-        _$insertNode(_el$21, _el$23);
-        _$setProp(_el$21, "width", '100%');
-        _$setProp(_el$21, "flexDirection", 'row');
-        _$insert(_el$22, () => `${formatQuotaRowLabel(props.label)} `);
-        _$insertNode(_el$23, _$createTextNode(`—`));
-        _$effect(_p$ => {
-          var _v$13 = props.theme.textMuted,
-            _v$14 = props.theme.textMuted;
-          _v$13 !== _p$.e && (_p$.e = _$setProp(_el$22, "fg", _v$13, _p$.e));
-          _v$14 !== _p$.t && (_p$.t = _$setProp(_el$23, "fg", _v$14, _p$.t));
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        return _el$21;
+        var _el$16 = _$createElement("box");
+        _$setProp(_el$16, "width", '100%');
+        _$setProp(_el$16, "height", 1);
+        _$setProp(_el$16, "flexDirection", 'row');
+        _$insert(_el$16, _$createComponent(Cell, {
+          get fg() {
+            return props.theme.textMuted;
+          },
+          get text() {
+            return `${labelCell()}\u2014`;
+          }
+        }));
+        return _el$16;
       })();
     },
     get children() {
       return [(() => {
-        var _el$13 = _$createElement("box"),
-          _el$14 = _$createElement("box"),
-          _el$15 = _$createElement("text"),
-          _el$16 = _$createElement("text");
-        _$insertNode(_el$13, _el$14);
-        _$setProp(_el$13, "width", '100%');
-        _$setProp(_el$13, "flexDirection", 'row');
-        _$setProp(_el$13, "justifyContent", 'space-between');
+        var _el$14 = _$createElement("box"),
+          _el$15 = _$createElement("box");
         _$insertNode(_el$14, _el$15);
-        _$insertNode(_el$14, _el$16);
+        _$setProp(_el$14, "width", '100%');
+        _$setProp(_el$14, "height", 1);
         _$setProp(_el$14, "flexDirection", 'row');
-        _$insert(_el$15, () => `${formatQuotaRowLabel(props.label)} `);
+        _$insert(_el$14, _$createComponent(Cell, {
+          get fg() {
+            return props.theme.textMuted;
+          },
+          get text() {
+            return labelCell();
+          }
+        }), _el$15);
         _$insert(_el$14, _$createComponent(Index, {
           get each() {
-            return quotaBarSegments(used(), props.appearance, props.pacing);
+            return quotaBarSegments(used(), props.appearance, props.pacing, fit().barCells);
           },
-          children: segment => (() => {
-            var _el$25 = _$createElement("text");
-            _$insert(_el$25, () => segment().text);
-            _$effect(_$p => _$setProp(_el$25, "fg", toneColor(props.theme, segment().tone), _$p));
-            return _el$25;
-          })()
-        }), _el$16);
-        _$insert(_el$16, () => ` ${props.part?.figure}${props.binding ? ' •' : ''}`);
-        _$insert(_el$13, _$createComponent(Show, {
-          get when() {
-            return reset();
+          children: segment => _$createComponent(Cell, {
+            get fg() {
+              return toneColor(props.theme, segment().tone);
+            },
+            get text() {
+              return segment().text;
+            }
+          })
+        }), _el$15);
+        _$insert(_el$14, _$createComponent(Cell, {
+          get fg() {
+            return toneColor(props.theme, usageTone(used(), props.appearance));
           },
-          get children() {
-            var _el$17 = _$createElement("text");
-            _$insert(_el$17, reset);
-            _$effect(_$p => _$setProp(_el$17, "fg", props.theme.textMuted, _$p));
-            return _el$17;
+          get text() {
+            return `${fit().barCells > 0 ? ' ' : ''}${figure()}`;
           }
+        }), _el$15);
+        _$setProp(_el$15, "flexGrow", 1);
+        _$insert(_el$14, _$createComponent(Show, {
+          get when() {
+            return fit().reset;
+          },
+          children: reset => _$createComponent(Cell, {
+            get fg() {
+              return props.theme.textMuted;
+            },
+            get text() {
+              return ` ${reset()}`;
+            }
+          })
         }), null);
-        _$effect(_p$ => {
-          var _v$1 = props.theme.textMuted,
-            _v$10 = toneColor(props.theme, usageTone(used(), props.appearance));
-          _v$1 !== _p$.e && (_p$.e = _$setProp(_el$15, "fg", _v$1, _p$.e));
-          _v$10 !== _p$.t && (_p$.t = _$setProp(_el$16, "fg", _v$10, _p$.t));
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        return _el$13;
+        return _el$14;
       })(), _$createComponent(Show, {
         get when() {
           return paceLine();
         },
-        get children() {
-          var _el$18 = _$createElement("box"),
-            _el$19 = _$createElement("text"),
-            _el$20 = _$createElement("text");
-          _$insertNode(_el$18, _el$19);
-          _$insertNode(_el$18, _el$20);
-          _$setProp(_el$18, "width", '100%');
-          _$setProp(_el$18, "flexDirection", 'row');
-          _$insert(_el$19, () => formatQuotaRowLabel('', 11));
-          _$insert(_el$20, paceLine);
-          _$effect(_p$ => {
-            var _v$11 = props.theme.textMuted,
-              _v$12 = toneColor(props.theme, props.pacing?.state === 'deficit' ? 'warn' : 'muted');
-            _v$11 !== _p$.e && (_p$.e = _$setProp(_el$19, "fg", _v$11, _p$.e));
-            _v$12 !== _p$.t && (_p$.t = _$setProp(_el$20, "fg", _v$12, _p$.t));
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$18;
-        }
+        children: line => (() => {
+          var _el$17 = _$createElement("box");
+          _$setProp(_el$17, "width", '100%');
+          _$setProp(_el$17, "height", 1);
+          _$setProp(_el$17, "flexDirection", 'row');
+          _$insert(_el$17, _$createComponent(Cell, {
+            get fg() {
+              return props.theme.textMuted;
+            },
+            get text() {
+              return ' '.repeat(props.labelWidth + 1);
+            }
+          }), null);
+          _$insert(_el$17, _$createComponent(Cell, {
+            get fg() {
+              return toneColor(props.theme, props.pacing?.state === 'deficit' ? 'warn' : 'muted');
+            },
+            get text() {
+              return line();
+            }
+          }), null);
+          return _el$17;
+        })()
       })];
     }
   });
@@ -421,46 +446,58 @@ export function AccountBlock(props) {
     now: props.now
   });
   const partFor = name => parts().windows.find(part => part.name === name);
+  const scopedLabels = () => scopedQuotaShortNames(props.quota, props.now);
+  const labelWidth = () => props.labelWidth ?? quotaLabelColumnWidth([props.quota], props.now);
+  // The block's laid-out width, read when it mounts and on each resize. Quota
+  // rows drop or shrink detail to fit it (and are cut at the edge when even
+  // that is not enough); pacing sublines are cut to fit. Undefined until layout.
+  const [width, setWidth] = createSignal();
+  let block;
   return (() => {
-    var _el$26 = _$createElement("box"),
-      _el$27 = _$createElement("box"),
-      _el$28 = _$createElement("text"),
-      _el$29 = _$createElement("b"),
-      _el$30 = _$createElement("text"),
-      _el$31 = _$createElement("b");
-    _$insertNode(_el$26, _el$27);
-    _$setProp(_el$26, "width", '100%');
-    _$setProp(_el$26, "flexDirection", 'column');
-    _$insertNode(_el$27, _el$28);
-    _$insertNode(_el$27, _el$30);
-    _$setProp(_el$27, "width", '100%');
-    _$setProp(_el$27, "flexDirection", 'row');
-    _$setProp(_el$27, "justifyContent", 'space-between');
-    _$insertNode(_el$28, _el$29);
-    _$insert(_el$29, () => `${props.name}${props.tierLabel ? ` · ${props.tierLabel}` : ''}`);
-    _$insertNode(_el$30, _el$31);
-    _$insert(_el$31, statusWord);
-    _$insert(_el$26, _$createComponent(Show, {
+    var _el$18 = _$createElement("box"),
+      _el$19 = _$createElement("box"),
+      _el$20 = _$createElement("text"),
+      _el$21 = _$createElement("b"),
+      _el$22 = _$createElement("text"),
+      _el$23 = _$createElement("b");
+    _$insertNode(_el$18, _el$19);
+    _$use(element => {
+      block = element;
+      setWidth(element.width || undefined);
+    }, _el$18);
+    _$setProp(_el$18, "width", '100%');
+    _$setProp(_el$18, "flexDirection", 'column');
+    _$setProp(_el$18, "onSizeChange", () => setWidth(block?.width || undefined));
+    _$insertNode(_el$19, _el$20);
+    _$insertNode(_el$19, _el$22);
+    _$setProp(_el$19, "width", '100%');
+    _$setProp(_el$19, "flexDirection", 'row');
+    _$setProp(_el$19, "justifyContent", 'space-between');
+    _$insertNode(_el$20, _el$21);
+    _$insert(_el$21, () => `${props.name}${props.tierLabel ? ` · ${props.tierLabel}` : ''}`);
+    _$insertNode(_el$22, _el$23);
+    _$insert(_el$23, statusWord);
+    _$insert(_el$18, _$createComponent(Show, {
       get when() {
         return props.stateLine;
       },
       get children() {
-        var _el$32 = _$createElement("text");
-        _$insert(_el$32, () => props.stateLine);
-        _$effect(_$p => _$setProp(_el$32, "fg", props.theme.textMuted, _$p));
-        return _el$32;
+        var _el$24 = _$createElement("text");
+        _$insert(_el$24, () => props.stateLine);
+        _$effect(_$p => _$setProp(_el$24, "fg", props.theme.textMuted, _$p));
+        return _el$24;
       }
     }), null);
-    _$insert(_el$26, _$createComponent(Show, {
+    _$insert(_el$18, _$createComponent(Show, {
       get when() {
         return props.quota;
       },
       get fallback() {
         return (() => {
-          var _el$36 = _$createElement("text");
-          _$insertNode(_el$36, _$createTextNode(`checking…`));
-          _$effect(_$p => _$setProp(_el$36, "fg", props.theme.textMuted, _$p));
-          return _el$36;
+          var _el$28 = _$createElement("text");
+          _$insertNode(_el$28, _$createTextNode(`checking…`));
+          _$effect(_$p => _$setProp(_el$28, "fg", props.theme.textMuted, _$p));
+          return _el$28;
         })();
       },
       get children() {
@@ -472,6 +509,12 @@ export function AccountBlock(props) {
             return props.appearance;
           },
           label: "5h",
+          get labelWidth() {
+            return labelWidth();
+          },
+          get width() {
+            return width();
+          },
           get part() {
             return partFor('5h');
           },
@@ -495,6 +538,12 @@ export function AccountBlock(props) {
             return props.appearance;
           },
           label: "7d",
+          get labelWidth() {
+            return labelWidth();
+          },
+          get width() {
+            return width();
+          },
           get part() {
             return partFor('7d');
           },
@@ -514,7 +563,7 @@ export function AccountBlock(props) {
           get each() {
             return props.quota?.scoped ?? [];
           },
-          children: window => _$createComponent(QuotaRow, {
+          children: (window, index) => _$createComponent(QuotaRow, {
             get theme() {
               return props.theme;
             },
@@ -522,7 +571,13 @@ export function AccountBlock(props) {
               return props.appearance;
             },
             get label() {
-              return partFor(window.title)?.name ?? window.title;
+              return scopedLabels()[index()] ?? window.title;
+            },
+            get labelWidth() {
+              return labelWidth();
+            },
+            get width() {
+              return width();
             },
             get part() {
               return partFor(window.title);
@@ -544,63 +599,57 @@ export function AccountBlock(props) {
           get when() {
             return partFor('credits');
           },
-          children: budget => {
-            // The line box's laid-out width, read when it mounts and on each
-            // resize. It is undefined (amounts keep their cents) until layout.
-            const [width, setWidth] = createSignal();
-            let line;
-            return (() => {
-              var _el$38 = _$createElement("box"),
-                _el$39 = _$createElement("text");
-              _$insertNode(_el$38, _el$39);
-              _$use(element => {
-                line = element;
-                setWidth(element.width || undefined);
-              }, _el$38);
-              _$setProp(_el$38, "width", '100%');
-              _$setProp(_el$38, "onSizeChange", () => setWidth(line?.width || undefined));
-              _$insert(_el$39, () => creditLine(budget().figure, props.quota?.extraUsage, width()));
-              _$effect(_$p => _$setProp(_el$39, "fg", toneColor(props.theme, props.quota?.extraUsage?.severity === 'critical' ? 'err' : props.quota?.extraUsage?.severity === 'warning' || props.quota?.extraUsage?.exhausted ? 'warn' : 'muted'), _$p));
-              return _el$38;
-            })();
-          }
+          children: budget => // One line in the block's width: amounts drop their cents rather
+          // than wrap, and keep them until the first layout.
+          (() => {
+            var _el$30 = _$createElement("box"),
+              _el$31 = _$createElement("text");
+            _$insertNode(_el$30, _el$31);
+            _$setProp(_el$30, "width", '100%');
+            _$setProp(_el$30, "height", 1);
+            _$setProp(_el$30, "flexDirection", 'row');
+            _$setProp(_el$31, "wrapMode", 'none');
+            _$insert(_el$31, () => creditLine(budget().figure, props.quota?.extraUsage, width()));
+            _$effect(_$p => _$setProp(_el$31, "fg", toneColor(props.theme, props.quota?.extraUsage?.severity === 'critical' ? 'err' : props.quota?.extraUsage?.severity === 'warning' || props.quota?.extraUsage?.exhausted ? 'warn' : 'muted'), _$p));
+            return _el$30;
+          })()
         }), _$createComponent(Show, {
           get when() {
             return parts().age;
           },
           get children() {
-            var _el$33 = _$createElement("text");
-            _$insert(_el$33, () => parts().age);
-            _$effect(_$p => _$setProp(_el$33, "fg", props.theme.textMuted, _$p));
-            return _el$33;
+            var _el$25 = _$createElement("text");
+            _$insert(_el$25, () => parts().age);
+            _$effect(_$p => _$setProp(_el$25, "fg", props.theme.textMuted, _$p));
+            return _el$25;
           }
         }), _$createComponent(Show, {
           get when() {
             return props.quota?.fallbackAdvised === true;
           },
           get children() {
-            var _el$34 = _$createElement("text");
-            _$insertNode(_el$34, _$createTextNode(`→ fallback advised`));
-            _$effect(_$p => _$setProp(_el$34, "fg", props.theme.textMuted, _$p));
-            return _el$34;
+            var _el$26 = _$createElement("text");
+            _$insertNode(_el$26, _$createTextNode(`→ fallback advised`));
+            _$effect(_$p => _$setProp(_el$26, "fg", props.theme.textMuted, _$p));
+            return _el$26;
           }
         })];
       }
     }), null);
     _$effect(_p$ => {
-      var _v$15 = props.marginTop ?? 0,
-        _v$16 = props.theme.text,
-        _v$17 = toneColor(props.theme, statusTone());
-      _v$15 !== _p$.e && (_p$.e = _$setProp(_el$26, "marginTop", _v$15, _p$.e));
-      _v$16 !== _p$.t && (_p$.t = _$setProp(_el$28, "fg", _v$16, _p$.t));
-      _v$17 !== _p$.a && (_p$.a = _$setProp(_el$30, "fg", _v$17, _p$.a));
+      var _v$11 = props.marginTop ?? 0,
+        _v$12 = props.theme.text,
+        _v$13 = toneColor(props.theme, statusTone());
+      _v$11 !== _p$.e && (_p$.e = _$setProp(_el$18, "marginTop", _v$11, _p$.e));
+      _v$12 !== _p$.t && (_p$.t = _$setProp(_el$20, "fg", _v$12, _p$.t));
+      _v$13 !== _p$.a && (_p$.a = _$setProp(_el$22, "fg", _v$13, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$26;
+    return _el$18;
   })();
 }
 // The TUI may unmount and remount sidebar_content when the user switches
@@ -673,6 +722,8 @@ export function ClaudeSidebar(props) {
   });
   const enabledFallbacks = () => (state().fallbacks ?? []).filter(f => f.enabled || f.custodyState && f.custodyState !== 'off');
   const hasData = () => state().main?.quota != null || state().main?.stateLine != null || enabledFallbacks().length > 0;
+  // One label column for every expanded account, so all their bars line up.
+  const quotaLabelWidth = () => quotaLabelColumnWidth([state().main?.quota, ...(prefs().sections.fallbackAccounts ? enabledFallbacks().map(fallback => fallback.quota) : [])], now());
   const headerLabel = () => {
     const name = prefs().header.label;
     return !hasData() ? name : collapsed() ? `\u25b6 ${name}` : `\u25bc ${name}`;
@@ -715,33 +766,33 @@ export function ClaudeSidebar(props) {
     return `${r.transport} \u00b7 ${r.enabled ? 'on' : 'off'}`;
   };
   return (() => {
-    var _el$40 = _$createElement("box"),
-      _el$41 = _$createElement("box"),
-      _el$42 = _$createElement("box"),
-      _el$43 = _$createElement("text"),
-      _el$44 = _$createElement("b");
-    _$insertNode(_el$40, _el$41);
-    _$setProp(_el$40, "width", '100%');
-    _$setProp(_el$40, "flexDirection", 'column');
-    _$setProp(_el$40, "border", SINGLE_BORDER);
-    _$setProp(_el$40, "paddingTop", 1);
-    _$setProp(_el$40, "paddingBottom", 1);
-    _$setProp(_el$40, "paddingLeft", 1);
-    _$setProp(_el$40, "paddingRight", 1);
-    _$insertNode(_el$41, _el$42);
-    _$setProp(_el$41, "width", '100%');
-    _$setProp(_el$41, "flexDirection", 'row');
-    _$setProp(_el$41, "justifyContent", 'space-between');
-    _$setProp(_el$41, "alignItems", 'center');
-    _$setProp(_el$41, "onMouseDown", () => {
+    var _el$32 = _$createElement("box"),
+      _el$33 = _$createElement("box"),
+      _el$34 = _$createElement("box"),
+      _el$35 = _$createElement("text"),
+      _el$36 = _$createElement("b");
+    _$insertNode(_el$32, _el$33);
+    _$setProp(_el$32, "width", '100%');
+    _$setProp(_el$32, "flexDirection", 'column');
+    _$setProp(_el$32, "border", SINGLE_BORDER);
+    _$setProp(_el$32, "paddingTop", 1);
+    _$setProp(_el$32, "paddingBottom", 1);
+    _$setProp(_el$32, "paddingLeft", 1);
+    _$setProp(_el$32, "paddingRight", 1);
+    _$insertNode(_el$33, _el$34);
+    _$setProp(_el$33, "width", '100%');
+    _$setProp(_el$33, "flexDirection", 'row');
+    _$setProp(_el$33, "justifyContent", 'space-between');
+    _$setProp(_el$33, "alignItems", 'center');
+    _$setProp(_el$33, "onMouseDown", () => {
       if (hasData()) props.controller.toggleCollapsed();
     });
-    _$insertNode(_el$42, _el$43);
-    _$setProp(_el$42, "paddingLeft", 1);
-    _$setProp(_el$42, "paddingRight", 1);
-    _$insertNode(_el$43, _el$44);
-    _$insert(_el$44, headerLabel);
-    _$insert(_el$41, _$createComponent(Show, {
+    _$insertNode(_el$34, _el$35);
+    _$setProp(_el$34, "paddingLeft", 1);
+    _$setProp(_el$34, "paddingRight", 1);
+    _$insertNode(_el$35, _el$36);
+    _$insert(_el$36, headerLabel);
+    _$insert(_el$33, _$createComponent(Show, {
       get when() {
         return degraded();
       },
@@ -751,36 +802,36 @@ export function ClaudeSidebar(props) {
             return prefs().header.showVersion && PLUGIN_VERSION !== '';
           },
           get children() {
-            var _el$52 = _$createElement("text");
-            _$insert(_el$52, `v${PLUGIN_VERSION}`);
-            _$effect(_$p => _$setProp(_el$52, "fg", theme().textMuted, _$p));
-            return _el$52;
+            var _el$44 = _$createElement("text");
+            _$insert(_el$44, `v${PLUGIN_VERSION}`);
+            _$effect(_$p => _$setProp(_el$44, "fg", theme().textMuted, _$p));
+            return _el$44;
           }
         });
       },
       get children() {
-        var _el$45 = _$createElement("box"),
-          _el$46 = _$createElement("text"),
-          _el$47 = _$createElement("b");
-        _$insertNode(_el$45, _el$46);
-        _$setProp(_el$45, "paddingLeft", 1);
-        _$setProp(_el$45, "paddingRight", 1);
-        _$insertNode(_el$46, _el$47);
-        _$insertNode(_el$47, _$createTextNode(`LIMITED`));
+        var _el$37 = _$createElement("box"),
+          _el$38 = _$createElement("text"),
+          _el$39 = _$createElement("b");
+        _$insertNode(_el$37, _el$38);
+        _$setProp(_el$37, "paddingLeft", 1);
+        _$setProp(_el$37, "paddingRight", 1);
+        _$insertNode(_el$38, _el$39);
+        _$insertNode(_el$39, _$createTextNode(`LIMITED`));
         _$effect(_p$ => {
-          var _v$18 = theme().warning,
-            _v$19 = theme().background;
-          _v$18 !== _p$.e && (_p$.e = _$setProp(_el$45, "backgroundColor", _v$18, _p$.e));
-          _v$19 !== _p$.t && (_p$.t = _$setProp(_el$46, "fg", _v$19, _p$.t));
+          var _v$14 = theme().warning,
+            _v$15 = theme().background;
+          _v$14 !== _p$.e && (_p$.e = _$setProp(_el$37, "backgroundColor", _v$14, _p$.e));
+          _v$15 !== _p$.t && (_p$.t = _$setProp(_el$38, "fg", _v$15, _p$.t));
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$45;
+        return _el$37;
       }
     }), null);
-    _$insert(_el$40, _$createComponent(Show, {
+    _$insert(_el$32, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!collapsed())() && hasData();
       },
@@ -814,12 +865,12 @@ export function ClaudeSidebar(props) {
               },
               label: "Mode",
               get children() {
-                var _el$49 = _$createElement("text"),
-                  _el$50 = _$createElement("b");
-                _$insertNode(_el$49, _el$50);
-                _$insertNode(_el$50, _$createTextNode(`fast`));
-                _$effect(_$p => _$setProp(_el$49, "fg", toneColor(theme(), 'accent'), _$p));
-                return _el$49;
+                var _el$41 = _$createElement("text"),
+                  _el$42 = _$createElement("b");
+                _$insertNode(_el$41, _el$42);
+                _$insertNode(_el$42, _$createTextNode(`fast`));
+                _$effect(_$p => _$setProp(_el$41, "fg", toneColor(theme(), 'accent'), _$p));
+                return _el$41;
               }
             });
           }
@@ -833,18 +884,18 @@ export function ClaudeSidebar(props) {
             },
             label: "Recovery",
             get children() {
-              var _el$53 = _$createElement("text"),
-                _el$54 = _$createElement("b");
-              _$insertNode(_el$53, _el$54);
-              _$insert(_el$54, summary);
-              _$effect(_$p => _$setProp(_el$53, "fg", toneColor(theme(), fableRecoveryTone()), _$p));
-              return _el$53;
+              var _el$45 = _$createElement("text"),
+                _el$46 = _$createElement("b");
+              _$insertNode(_el$45, _el$46);
+              _$insert(_el$46, summary);
+              _$effect(_$p => _$setProp(_el$45, "fg", toneColor(theme(), fableRecoveryTone()), _$p));
+              return _el$45;
             }
           })
         })];
       }
     }), null);
-    _$insert(_el$40, _$createComponent(Show, {
+    _$insert(_el$32, _$createComponent(Show, {
       get when() {
         return !collapsed() || !hasData();
       },
@@ -855,14 +906,14 @@ export function ClaudeSidebar(props) {
           },
           get fallback() {
             return (() => {
-              var _el$55 = _$createElement("box"),
-                _el$56 = _$createElement("text");
-              _$insertNode(_el$55, _el$56);
-              _$setProp(_el$55, "marginTop", 1);
-              _$setProp(_el$55, "width", '100%');
-              _$insertNode(_el$56, _$createTextNode(`Waiting for quota…`));
-              _$effect(_$p => _$setProp(_el$56, "fg", theme().textMuted, _$p));
-              return _el$55;
+              var _el$47 = _$createElement("box"),
+                _el$48 = _$createElement("text");
+              _$insertNode(_el$47, _el$48);
+              _$setProp(_el$47, "marginTop", 1);
+              _$setProp(_el$47, "width", '100%');
+              _$insertNode(_el$48, _$createTextNode(`Waiting for quota…`));
+              _$effect(_$p => _$setProp(_el$48, "fg", theme().textMuted, _$p));
+              return _el$47;
             })();
           },
           get children() {
@@ -896,6 +947,9 @@ export function ClaudeSidebar(props) {
                   get tierLabel() {
                     return state().main?.tierLabel;
                   },
+                  get labelWidth() {
+                    return quotaLabelWidth();
+                  },
                   get stateLine() {
                     return state().main?.stateLine;
                   },
@@ -936,6 +990,9 @@ export function ClaudeSidebar(props) {
                         get tierLabel() {
                           return fb.tierLabel;
                         },
+                        get labelWidth() {
+                          return quotaLabelWidth();
+                        },
                         get needsReauth() {
                           return fb.needsReauth;
                         },
@@ -1144,19 +1201,19 @@ export function ClaudeSidebar(props) {
       }
     }), null);
     _$effect(_p$ => {
-      var _v$20 = theme().borderActive,
-        _v$21 = theme().accent,
-        _v$22 = theme().background;
-      _v$20 !== _p$.e && (_p$.e = _$setProp(_el$40, "borderColor", _v$20, _p$.e));
-      _v$21 !== _p$.t && (_p$.t = _$setProp(_el$42, "backgroundColor", _v$21, _p$.t));
-      _v$22 !== _p$.a && (_p$.a = _$setProp(_el$43, "fg", _v$22, _p$.a));
+      var _v$16 = theme().borderActive,
+        _v$17 = theme().accent,
+        _v$18 = theme().background;
+      _v$16 !== _p$.e && (_p$.e = _$setProp(_el$32, "borderColor", _v$16, _p$.e));
+      _v$17 !== _p$.t && (_p$.t = _$setProp(_el$34, "backgroundColor", _v$17, _p$.t));
+      _v$18 !== _p$.a && (_p$.a = _$setProp(_el$35, "fg", _v$18, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$40;
+    return _el$32;
   })();
 }