@cortexkit/opencode-openai-auth 1.3.0 → 1.5.0

package/src/tui-compiled/runtime/tui.js

@@ -13,12 +13,12 @@ import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { formatQuota, quotaTextParts, quotaWindowParts } from "./shared/d5a8f1061ee2f114-index.js";
-import { createEffect, createSignal, For, Index, onCleanup, Show } from "opentui:runtime-module:solid-js";
+import { createEffect, createMemo, createSignal, For, Index, onCleanup, Show } from "opentui:runtime-module:solid-js";
 import { createLogger } from "./logger.js";
 import { isNotifyPayload } from "./rpc/protocol.js";
 import { createRpcClient } from "./rpc/rpc-client.js";
 import { resolveRpcDir } from "./rpc/rpc-dir.js";
-import { computeQuotaPacing, DEFAULT_SIDEBAR_STATE, displayWidth, fitCollapsedLabel, getCollapsedAccountLines, getCollapsedQuotaSummary, getPresentQuotaWindows, getSidebarState, resolveActiveAccount, resolveSessionSidebarRouting, resolveSessionStickyAccount, sidebarQuotaProjection } from "./sidebar-state.js";
+import { accountCreditsText, accountServesOnCredits, computeQuotaPacing, DEFAULT_SIDEBAR_STATE, displayWidth, fitCollapsedLabel, getCollapsedAccountLines, getCollapsedQuotaSummary, getPresentQuotaWindows, getSidebarState, resolveActiveAccount, resolveSessionSidebarRouting, resolveSessionStickyAccount, sidebarQuotaProjection } from "./sidebar-state.js";
 import { openCommandDialog } from "./tui/command-dialogs.js";
 import { setupTui } from "./tui/v2.js";
 import { computeEffectiveOrder, DEFAULT_SLOT_ORDER, PLUGIN_KEY, queueTuiPreferenceUpdate, readTuiPreferencesFile, resolveOpenaiAuthPrefs, watchTuiPreferences } from "./tui-preferences.js";
@@ -204,6 +204,53 @@ function StatRow(props) {
   })();
 }
 
+// One of an account's own rows under its quota bars (budget amounts, prepaid
+// credits, reset credits): muted label left, value right. Like the quota rows
+// it stays on one line: it measures its own width and, when both do not fit,
+// cuts only the label (with …), keeping one blank cell before the value.
+function AccountMetaRow(props) {
+  const [width, setWidth] = createSignal(0);
+  let row;
+  const label = () => {
+    const columns = width();
+    if (columns <= 0) return props.label;
+    return fitCollapsedLabel(props.label, columns - displayWidth(props.value) - 1);
+  };
+  return (() => {
+    var _el$8 = _$createElement("box"),
+      _el$9 = _$createElement("text"),
+      _el$0 = _$createElement("text"),
+      _el$1 = _$createElement("b");
+    _$insertNode(_el$8, _el$9);
+    _$insertNode(_el$8, _el$0);
+    _$use(element => {
+      row = element;
+    }, _el$8);
+    _$setProp(_el$8, "onSizeChange", () => setWidth(row?.width ?? 0));
+    _$setProp(_el$8, "width", '100%');
+    _$setProp(_el$8, "flexDirection", 'row');
+    _$setProp(_el$8, "justifyContent", 'space-between');
+    _$setProp(_el$9, "wrapMode", 'none');
+    _$setProp(_el$9, "flexShrink", 1);
+    _$insert(_el$9, label);
+    _$insertNode(_el$0, _el$1);
+    _$setProp(_el$0, "wrapMode", 'none');
+    _$setProp(_el$0, "flexShrink", 0);
+    _$insert(_el$1, () => props.value);
+    _$effect(_p$ => {
+      var _v$5 = props.theme.textMuted,
+        _v$6 = props.theme.text;
+      _v$5 !== _p$.e && (_p$.e = _$setProp(_el$9, "fg", _v$5, _p$.e));
+      _v$6 !== _p$.t && (_p$.t = _$setProp(_el$0, "fg", _v$6, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$8;
+  })();
+}
+
 // One account in the collapsed view: label left; narrow quota text and the
 // status dot right (red ⊘ when killed). The session's account keeps the
 // usage tone; other accounts, and any account whose reading is stale, are
@@ -222,65 +269,65 @@ function CollapsedAccountRow(props) {
     return fitCollapsedLabel(props.line.name, columns - value - 1);
   };
   return (() => {
-    var _el$8 = _$createElement("box"),
-      _el$9 = _$createElement("text");
-    _$insertNode(_el$8, _el$9);
+    var _el$10 = _$createElement("box"),
+      _el$11 = _$createElement("text");
+    _$insertNode(_el$10, _el$11);
     _$use(element => {
       row = element;
-    }, _el$8);
-    _$setProp(_el$8, "onSizeChange", () => setWidth(row?.width ?? 0));
-    _$setProp(_el$8, "width", '100%');
-    _$setProp(_el$8, "flexDirection", 'row');
-    _$setProp(_el$8, "justifyContent", 'space-between');
-    _$setProp(_el$9, "wrapMode", 'none');
-    _$setProp(_el$9, "flexShrink", 1);
-    _$insert(_el$9, label);
-    _$insert(_el$8, _$createComponent(Show, {
+    }, _el$10);
+    _$setProp(_el$10, "onSizeChange", () => setWidth(row?.width ?? 0));
+    _$setProp(_el$10, "width", '100%');
+    _$setProp(_el$10, "flexDirection", 'row');
+    _$setProp(_el$10, "justifyContent", 'space-between');
+    _$setProp(_el$11, "wrapMode", 'none');
+    _$setProp(_el$11, "flexShrink", 1);
+    _$insert(_el$11, label);
+    _$insert(_el$10, _$createComponent(Show, {
       get when() {
         return props.line.text !== null;
       },
       get fallback() {
         return (() => {
-          var _el$12 = _$createElement("text");
-          _$insertNode(_el$12, _$createTextNode(`—`));
-          _$effect(_$p => _$setProp(_el$12, "fg", props.theme.textMuted, _$p));
-          return _el$12;
+          var _el$16 = _$createElement("text");
+          _$insertNode(_el$16, _$createTextNode(`—`));
+          _$effect(_$p => _$setProp(_el$16, "fg", props.theme.textMuted, _$p));
+          return _el$16;
         })();
       },
       get children() {
-        var _el$0 = _$createElement("box"),
-          _el$11 = _$createElement("text");
-        _$insertNode(_el$0, _el$11);
-        _$setProp(_el$0, "flexDirection", 'row');
-        _$setProp(_el$0, "flexShrink", 0);
-        _$insert(_el$0, _$createComponent(Show, {
+        var _el$12 = _$createElement("box"),
+          _el$15 = _$createElement("text");
+        _$insertNode(_el$12, _el$15);
+        _$setProp(_el$12, "flexDirection", 'row');
+        _$setProp(_el$12, "flexShrink", 0);
+        _$insert(_el$12, _$createComponent(Show, {
           get when() {
             return !dim();
           },
           get fallback() {
             return (() => {
-              var _el$14 = _$createElement("text");
-              _$insert(_el$14, () => props.line.text);
-              _$effect(_$p => _$setProp(_el$14, "fg", toneColor(props.theme, 'muted'), _$p));
-              return _el$14;
+              var _el$18 = _$createElement("text");
+              _$insert(_el$18, () => props.line.text);
+              _$effect(_$p => _$setProp(_el$18, "fg", toneColor(props.theme, 'muted'), _$p));
+              return _el$18;
             })();
           },
           get children() {
-            var _el$1 = _$createElement("text"),
-              _el$10 = _$createElement("b");
-            _$insertNode(_el$1, _el$10);
-            _$insert(_el$10, () => props.line.text);
-            _$effect(_$p => _$setProp(_el$1, "fg", toneColor(props.theme, props.tone), _$p));
-            return _el$1;
+            var _el$13 = _$createElement("text"),
+              _el$14 = _$createElement("b");
+            _$insertNode(_el$13, _el$14);
+            _$insert(_el$14, () => props.line.text);
+            _$effect(_$p => _$setProp(_el$13, "fg", toneColor(props.theme, props.tone), _$p));
+            return _el$13;
           }
-        }), _el$11);
-        _$insert(_el$11, () => props.line.killed ? ' \u2298' : ' \u25cf');
-        _$effect(_$p => _$setProp(_el$11, "fg", toneColor(props.theme, props.line.killed ? 'err' : dim() ? 'muted' : props.tone), _$p));
-        return _el$0;
+        }), _el$15);
+        _$insert(_el$15, () => props.line.killed ? ' \u2298' : ' \u25cf');
+        _$effect(_$p => _$setProp(_el$15, "fg", toneColor(props.theme, props.line.killed ? 'err' : dim() ? 'muted' : props.tone), _$p));
+        return _el$12;
       }
     }), null);
-    _$effect(_$p => _$setProp(_el$9, "fg", toneColor(props.theme, dim() ? 'muted' : 'text'), _$p));
-    return _el$8;
+    _$effect(_$p => _$setProp(_el$11, "fg", toneColor(props.theme, dim() ? 'muted' : 'text'), _$p));
+    return _el$10;
   })();
 }
 const SPEND_CONTROL_LABEL = 'credits';
@@ -399,12 +446,6 @@ export function getQuotaMetadataRows(state) {
     label: 'Plan',
     value: state.planType
   });
-  if (state.credits !== undefined) {
-    rows.push({
-      label: 'Credits',
-      value: String(state.credits)
-    });
-  }
   return rows;
 }
 function formatGroupedAmount(value) {
@@ -421,7 +462,15 @@ export function formatSpendControlAmounts(spendControl) {
   const unit = pluralizeUnit(spendControl.unit ?? 'unit', spendControl.limit);
   return `${formatGroupedAmount(spendControl.used)} / ${formatGroupedAmount(spendControl.limit)} ${unit}`;
 }
-export function getAccountMetadataRows(resetCredits, spendControl) {
+
+/**
+ * The account's own rows under its quota bars: the workspace budget's amounts
+ * (`credits`), the prepaid credits (`prepaid`, worded by `accountCreditsText`)
+ * and the reset-credit count (`resets`), each only when known. While the
+ * account is serving the session on its prepaid credits (its free quota is
+ * used up), the prepaid row says so in place of its `prepaid` label.
+ */
+export function getAccountMetadataRows(resetCredits, spendControl, prepaidCredits, servingOnCredits = false) {
   const rows = [];
   if (spendControl) {
     rows.push({
@@ -429,6 +478,12 @@ export function getAccountMetadataRows(resetCredits, spendControl) {
       value: formatSpendControlAmounts(spendControl)
     });
   }
+  if (prepaidCredits !== undefined) {
+    rows.push({
+      label: servingOnCredits ? 'serving on credits' : 'prepaid',
+      value: prepaidCredits
+    });
+  }
   if (resetCredits !== undefined) {
     rows.push({
       label: 'resets',
@@ -438,12 +493,74 @@ export function getAccountMetadataRows(resetCredits, spendControl) {
   return rows;
 }
 
+/** The fewest cells a shortened quota bar keeps; below this it is dropped. */
+const MIN_QUOTA_BAR_CELLS = 3;
+/**
+ * How an expanded quota row fits on one line `columns` cells wide. The row is
+ * the padded label, the bar, the " N% left" figure and, at the right edge, the
+ * reset time. When it does not fit, the reset time goes first, then the bar
+ * shrinks (to no fewer than MIN_QUOTA_BAR_CELLS cells, else it is dropped).
+ * The label and the figure are never cut. `columns` of 0 means the row has not
+ * been measured yet, and everything is drawn.
+ */
+export function fitQuotaRow(input) {
+  const {
+    columns,
+    barWidth
+  } = input;
+  const reset = input.resetText ? displayWidth(input.resetText) : 0;
+  if (columns <= 0) return {
+    barCells: barWidth,
+    showReset: reset > 0
+  };
+  const fixed = displayWidth(input.label) + displayWidth(input.figure);
+  // The reset sits at the right edge with at least one blank cell before it,
+  // so it never runs into the figure.
+  if (reset > 0 && fixed + barWidth + 1 + reset <= columns) return {
+    barCells: barWidth,
+    showReset: true
+  };
+  const room = columns - fixed;
+  if (room >= barWidth) return {
+    barCells: barWidth,
+    showReset: false
+  };
+  return {
+    barCells: room >= MIN_QUOTA_BAR_CELLS ? room : 0,
+    showReset: false
+  };
+}
+
 // Quota window row: muted label left, tone-colored usage bar and shared quota text.
 // 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.
+// The row measures its own width and never wraps: fitQuotaRow decides what is
+// left out when it is too narrow, and the pacing subline is cut with ….
 function QuotaRow(props) {
   const used = () => props.window?.usedPercent ?? 0;
+  const [columns, setColumns] = createSignal(0);
+  let row;
+  const label = () => props.label.padEnd(props.labelWidth);
+  const figure = () => ` ${props.text.slice(props.label.length + 1)}`;
+  const fit = () => fitQuotaRow({
+    columns: columns(),
+    label: label(),
+    barWidth: props.appearance.barWidth,
+    figure: figure(),
+    resetText: props.resetText
+  });
+  // Memos, so a new measured width that leaves the fit unchanged (as the
+  // first measurement usually does) does not rebuild the bar's text nodes:
+  // rebuilt nodes are blank until the next frame is drawn.
+  const barCells = createMemo(() => fit().barCells);
+  const showReset = createMemo(() => fit().showReset);
+  const fittedPaceLine = () => {
+    const line = paceLine();
+    if (line === null || columns() <= 0) return line;
+    // The subline is indented by the label column; cut it to the rest.
+    return fitCollapsedLabel(line, columns() - props.labelWidth);
+  };
   const paceLine = () => {
     const pacing = props.pacing;
     if (!pacing || pacing.state === 'on-pace') return null;
@@ -457,102 +574,117 @@ function QuotaRow(props) {
     },
     get fallback() {
       return (() => {
-        var _el$23 = _$createElement("box"),
-          _el$24 = _$createElement("text"),
-          _el$25 = _$createElement("text");
-        _$insertNode(_el$23, _el$24);
-        _$insertNode(_el$23, _el$25);
-        _$setProp(_el$23, "width", '100%');
-        _$setProp(_el$23, "flexDirection", 'row');
-        _$insert(_el$24, () => props.label.padEnd(props.labelWidth));
-        _$insertNode(_el$25, _$createTextNode(`—`));
+        var _el$24 = _$createElement("box"),
+          _el$25 = _$createElement("text"),
+          _el$26 = _$createElement("text");
+        _$insertNode(_el$24, _el$25);
+        _$insertNode(_el$24, _el$26);
+        _$setProp(_el$24, "width", '100%');
+        _$setProp(_el$24, "flexDirection", 'row');
+        _$insert(_el$25, () => props.label.padEnd(props.labelWidth));
+        _$insertNode(_el$26, _$createTextNode(`—`));
         _$effect(_p$ => {
           var _v$9 = props.theme.textMuted,
             _v$0 = props.theme.textMuted;
-          _v$9 !== _p$.e && (_p$.e = _$setProp(_el$24, "fg", _v$9, _p$.e));
-          _v$0 !== _p$.t && (_p$.t = _$setProp(_el$25, "fg", _v$0, _p$.t));
+          _v$9 !== _p$.e && (_p$.e = _$setProp(_el$25, "fg", _v$9, _p$.e));
+          _v$0 !== _p$.t && (_p$.t = _$setProp(_el$26, "fg", _v$0, _p$.t));
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$23;
+        return _el$24;
       })();
     },
     get children() {
       return [(() => {
-        var _el$15 = _$createElement("box"),
-          _el$16 = _$createElement("box"),
-          _el$17 = _$createElement("text"),
-          _el$18 = _$createElement("text");
-        _$insertNode(_el$15, _el$16);
-        _$setProp(_el$15, "width", '100%');
-        _$setProp(_el$15, "flexDirection", 'row');
-        _$setProp(_el$15, "justifyContent", 'space-between');
-        _$insertNode(_el$16, _el$17);
-        _$insertNode(_el$16, _el$18);
-        _$setProp(_el$16, "flexDirection", 'row');
-        _$insert(_el$17, () => props.label.padEnd(props.labelWidth));
-        _$insert(_el$16, _$createComponent(For, {
+        var _el$19 = _$createElement("box"),
+          _el$20 = _$createElement("box"),
+          _el$21 = _$createElement("text"),
+          _el$22 = _$createElement("text");
+        _$insertNode(_el$19, _el$20);
+        _$use(element => {
+          row = element;
+        }, _el$19);
+        _$setProp(_el$19, "onSizeChange", () => setColumns(row?.width ?? 0));
+        _$setProp(_el$19, "width", '100%');
+        _$setProp(_el$19, "flexDirection", 'row');
+        _$setProp(_el$19, "justifyContent", 'space-between');
+        _$insertNode(_el$20, _el$21);
+        _$insertNode(_el$20, _el$22);
+        _$setProp(_el$20, "flexDirection", 'row');
+        _$setProp(_el$20, "flexShrink", 0);
+        _$setProp(_el$21, "wrapMode", 'none');
+        _$insert(_el$21, label);
+        _$insert(_el$20, _$createComponent(For, {
           get each() {
-            return quotaBarSegments(used(), props.appearance, props.pacing);
+            return quotaBarSegments(used(), {
+              ...props.appearance,
+              barWidth: barCells()
+            }, props.pacing);
           },
           children: segment => (() => {
-            var _el$27 = _$createElement("text");
-            _$insert(_el$27, () => segment.text);
-            _$effect(_$p => _$setProp(_el$27, "fg", toneColor(props.theme, segment.tone), _$p));
-            return _el$27;
+            var _el$28 = _$createElement("text");
+            _$setProp(_el$28, "wrapMode", 'none');
+            _$insert(_el$28, () => segment.text);
+            _$effect(_$p => _$setProp(_el$28, "fg", toneColor(props.theme, segment.tone), _$p));
+            return _el$28;
           })()
-        }), _el$18);
-        _$insert(_el$18, () => ` ${props.text.slice(props.label.length + 1)}`);
-        _$insert(_el$15, _$createComponent(Show, {
+        }), _el$22);
+        _$setProp(_el$22, "wrapMode", 'none');
+        _$insert(_el$22, figure);
+        _$insert(_el$19, _$createComponent(Show, {
           get when() {
-            return props.resetText;
+            return showReset();
           },
           get children() {
-            var _el$19 = _$createElement("text");
-            _$insert(_el$19, () => props.resetText);
-            _$effect(_$p => _$setProp(_el$19, "fg", props.theme.textMuted, _$p));
-            return _el$19;
+            var _el$23 = _$createElement("text");
+            _$setProp(_el$23, "wrapMode", 'none');
+            _$setProp(_el$23, "flexShrink", 0);
+            _$insert(_el$23, () => props.resetText);
+            _$effect(_$p => _$setProp(_el$23, "fg", props.theme.textMuted, _$p));
+            return _el$23;
           }
         }), null);
         _$effect(_p$ => {
-          var _v$5 = props.theme.textMuted,
-            _v$6 = toneColor(props.theme, usageTone(used(), props.appearance));
-          _v$5 !== _p$.e && (_p$.e = _$setProp(_el$17, "fg", _v$5, _p$.e));
-          _v$6 !== _p$.t && (_p$.t = _$setProp(_el$18, "fg", _v$6, _p$.t));
+          var _v$7 = props.theme.textMuted,
+            _v$8 = toneColor(props.theme, usageTone(used(), props.appearance));
+          _v$7 !== _p$.e && (_p$.e = _$setProp(_el$21, "fg", _v$7, _p$.e));
+          _v$8 !== _p$.t && (_p$.t = _$setProp(_el$22, "fg", _v$8, _p$.t));
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$15;
+        return _el$19;
       })(), _$createComponent(Show, {
         get when() {
-          return paceLine();
+          return fittedPaceLine();
         },
-        get children() {
-          var _el$20 = _$createElement("box"),
-            _el$21 = _$createElement("text"),
-            _el$22 = _$createElement("text");
-          _$insertNode(_el$20, _el$21);
-          _$insertNode(_el$20, _el$22);
-          _$setProp(_el$20, "width", '100%');
-          _$setProp(_el$20, "flexDirection", 'row');
-          _$insert(_el$21, () => ''.padEnd(props.labelWidth));
-          _$insert(_el$22, paceLine);
+        keyed: true,
+        children: line => (() => {
+          var _el$29 = _$createElement("box"),
+            _el$30 = _$createElement("text"),
+            _el$31 = _$createElement("text");
+          _$insertNode(_el$29, _el$30);
+          _$insertNode(_el$29, _el$31);
+          _$setProp(_el$29, "width", '100%');
+          _$setProp(_el$29, "flexDirection", 'row');
+          _$insert(_el$30, () => ''.padEnd(props.labelWidth));
+          _$setProp(_el$31, "wrapMode", 'none');
+          _$insert(_el$31, line);
           _$effect(_p$ => {
-            var _v$7 = props.theme.textMuted,
-              _v$8 = toneColor(props.theme, props.pacing?.state === 'deficit' ? 'warn' : 'muted');
-            _v$7 !== _p$.e && (_p$.e = _$setProp(_el$21, "fg", _v$7, _p$.e));
-            _v$8 !== _p$.t && (_p$.t = _$setProp(_el$22, "fg", _v$8, _p$.t));
+            var _v$1 = props.theme.textMuted,
+              _v$10 = toneColor(props.theme, props.pacing?.state === 'deficit' ? 'warn' : 'muted');
+            _v$1 !== _p$.e && (_p$.e = _$setProp(_el$30, "fg", _v$1, _p$.e));
+            _v$10 !== _p$.t && (_p$.t = _$setProp(_el$31, "fg", _v$10, _p$.t));
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$20;
-        }
+          return _el$29;
+        })()
       })];
     }
   });
@@ -566,56 +698,56 @@ function AccountBlock(props) {
   const statusTone = () => props.killed ? 'err' : props.active ? 'ok' : 'muted';
   const rows = () => buildQuotaRowsForDisplay(props.quota, Date.now(), props.pacingEnabled, props.labelWidth);
   return (() => {
-    var _el$28 = _$createElement("box"),
-      _el$29 = _$createElement("box"),
-      _el$30 = _$createElement("text"),
-      _el$31 = _$createElement("b"),
-      _el$32 = _$createElement("text"),
-      _el$33 = _$createElement("b");
-    _$insertNode(_el$28, _el$29);
-    _$setProp(_el$28, "width", '100%');
-    _$setProp(_el$28, "flexDirection", 'column');
-    _$insertNode(_el$29, _el$30);
-    _$insertNode(_el$29, _el$32);
-    _$setProp(_el$29, "width", '100%');
-    _$setProp(_el$29, "flexDirection", 'row');
-    _$setProp(_el$29, "justifyContent", 'space-between');
-    _$insertNode(_el$30, _el$31);
-    _$insert(_el$31, () => props.name);
+    var _el$32 = _$createElement("box"),
+      _el$33 = _$createElement("box"),
+      _el$34 = _$createElement("text"),
+      _el$35 = _$createElement("b"),
+      _el$36 = _$createElement("text"),
+      _el$37 = _$createElement("b");
     _$insertNode(_el$32, _el$33);
-    _$insert(_el$33, statusWord);
-    _$insert(_el$28, _$createComponent(Show, {
+    _$setProp(_el$32, "width", '100%');
+    _$setProp(_el$32, "flexDirection", 'column');
+    _$insertNode(_el$33, _el$34);
+    _$insertNode(_el$33, _el$36);
+    _$setProp(_el$33, "width", '100%');
+    _$setProp(_el$33, "flexDirection", 'row');
+    _$setProp(_el$33, "justifyContent", 'space-between');
+    _$insertNode(_el$34, _el$35);
+    _$insert(_el$35, () => props.name);
+    _$insertNode(_el$36, _el$37);
+    _$insert(_el$37, statusWord);
+    _$insert(_el$32, _$createComponent(Show, {
       get when() {
         return props.vaultState;
       },
       get children() {
-        var _el$34 = _$createElement("text");
-        _$insert(_el$34, () => props.vaultState);
-        _$effect(_$p => _$setProp(_el$34, "fg", props.theme.warning, _$p));
-        return _el$34;
+        var _el$38 = _$createElement("text");
+        _$insert(_el$38, () => props.vaultState);
+        _$effect(_$p => _$setProp(_el$38, "fg", props.theme.warning, _$p));
+        return _el$38;
       }
     }), null);
-    _$insert(_el$28, _$createComponent(Show, {
+    _$insert(_el$32, _$createComponent(Show, {
       get when() {
         return props.hostDisabled;
       },
       get children() {
-        var _el$35 = _$createElement("text");
-        _$insertNode(_el$35, _$createTextNode(`off in /openai`));
-        _$effect(_$p => _$setProp(_el$35, "fg", props.theme.textMuted, _$p));
-        return _el$35;
+        var _el$39 = _$createElement("text");
+        _$insertNode(_el$39, _$createTextNode(`off in /openai`));
+        _$effect(_$p => _$setProp(_el$39, "fg", props.theme.textMuted, _$p));
+        return _el$39;
       }
     }), null);
-    _$insert(_el$28, _$createComponent(Show, {
+    _$insert(_el$32, _$createComponent(Show, {
       get when() {
         return isQuotaLoaded(props.quota);
       },
       get fallback() {
         return (() => {
-          var _el$37 = _$createElement("text");
-          _$insertNode(_el$37, _$createTextNode(`checking…`));
-          _$effect(_$p => _$setProp(_el$37, "fg", props.theme.textMuted, _$p));
-          return _el$37;
+          var _el$41 = _$createElement("text");
+          _$insertNode(_el$41, _$createTextNode(`checking…`));
+          _$effect(_$p => _$setProp(_el$41, "fg", props.theme.textMuted, _$p));
+          return _el$41;
         })();
       },
       get children() {
@@ -625,10 +757,10 @@ function AccountBlock(props) {
           },
           get fallback() {
             return (() => {
-              var _el$39 = _$createElement("text");
-              _$insertNode(_el$39, _$createTextNode(`—`));
-              _$effect(_$p => _$setProp(_el$39, "fg", props.theme.textMuted, _$p));
-              return _el$39;
+              var _el$43 = _$createElement("text");
+              _$insertNode(_el$43, _$createTextNode(`—`));
+              _$effect(_$p => _$setProp(_el$43, "fg", props.theme.textMuted, _$p));
+              return _el$43;
             })();
           },
           get children() {
@@ -667,7 +799,7 @@ function AccountBlock(props) {
         });
       }
     }), null);
-    _$insert(_el$28, _$createComponent(For, {
+    _$insert(_el$32, _$createComponent(For, {
       get each() {
         return quotaTextParts(sidebarQuotaProjection(props.quota, Date.now()), {
           now: Date.now(),
@@ -675,17 +807,17 @@ function AccountBlock(props) {
         }).filter(part => part.startsWith('checked '));
       },
       children: age => (() => {
-        var _el$41 = _$createElement("text");
-        _$insert(_el$41, age);
-        _$effect(_$p => _$setProp(_el$41, "fg", props.theme.textMuted, _$p));
-        return _el$41;
+        var _el$45 = _$createElement("text");
+        _$insert(_el$45, age);
+        _$effect(_$p => _$setProp(_el$45, "fg", props.theme.textMuted, _$p));
+        return _el$45;
       })()
     }), null);
-    _$insert(_el$28, _$createComponent(For, {
+    _$insert(_el$32, _$createComponent(For, {
       get each() {
-        return getAccountMetadataRows(props.resetCredits, props.quota?.spendControl);
+        return getAccountMetadataRows(props.resetCredits, props.quota?.spendControl, accountCreditsText(props.quota), props.active && accountServesOnCredits(props.quota, Date.now()));
       },
-      children: row => _$createComponent(StatRow, {
+      children: row => _$createComponent(AccountMetaRow, {
         get theme() {
           return props.theme;
         },
@@ -694,24 +826,23 @@ function AccountBlock(props) {
         },
         get value() {
           return row.value;
-        },
-        tone: "text"
+        }
       })
     }), null);
     _$effect(_p$ => {
-      var _v$1 = props.marginTop ?? 0,
-        _v$10 = props.theme.text,
-        _v$11 = toneColor(props.theme, statusTone());
-      _v$1 !== _p$.e && (_p$.e = _$setProp(_el$28, "marginTop", _v$1, _p$.e));
-      _v$10 !== _p$.t && (_p$.t = _$setProp(_el$30, "fg", _v$10, _p$.t));
-      _v$11 !== _p$.a && (_p$.a = _$setProp(_el$32, "fg", _v$11, _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$32, "marginTop", _v$11, _p$.e));
+      _v$12 !== _p$.t && (_p$.t = _$setProp(_el$34, "fg", _v$12, _p$.t));
+      _v$13 !== _p$.a && (_p$.a = _$setProp(_el$36, "fg", _v$13, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$28;
+    return _el$32;
   })();
 }
 
@@ -874,33 +1005,33 @@ function QuotaSidebar(props) {
   const refreshBackedOff = () => state().main?.refreshBackedOff === true;
   const degraded = () => killedNames().length > 0 || quotaBackedOff() || refreshBackedOff();
   return (() => {
-    var _el$42 = _$createElement("box"),
-      _el$43 = _$createElement("box"),
-      _el$44 = _$createElement("box"),
-      _el$45 = _$createElement("text"),
-      _el$46 = _$createElement("b");
-    _$insertNode(_el$42, _el$43);
-    _$setProp(_el$42, "width", '100%');
-    _$setProp(_el$42, "flexDirection", 'column');
-    _$setProp(_el$42, "border", SINGLE_BORDER);
-    _$setProp(_el$42, "paddingTop", 1);
-    _$setProp(_el$42, "paddingBottom", 1);
-    _$setProp(_el$42, "paddingLeft", 1);
-    _$setProp(_el$42, "paddingRight", 1);
-    _$insertNode(_el$43, _el$44);
-    _$setProp(_el$43, "width", '100%');
-    _$setProp(_el$43, "flexDirection", 'row');
-    _$setProp(_el$43, "justifyContent", 'space-between');
-    _$setProp(_el$43, "alignItems", 'center');
-    _$setProp(_el$43, "onMouseDown", () => {
+    var _el$46 = _$createElement("box"),
+      _el$47 = _$createElement("box"),
+      _el$48 = _$createElement("box"),
+      _el$49 = _$createElement("text"),
+      _el$50 = _$createElement("b");
+    _$insertNode(_el$46, _el$47);
+    _$setProp(_el$46, "width", '100%');
+    _$setProp(_el$46, "flexDirection", 'column');
+    _$setProp(_el$46, "border", SINGLE_BORDER);
+    _$setProp(_el$46, "paddingTop", 1);
+    _$setProp(_el$46, "paddingBottom", 1);
+    _$setProp(_el$46, "paddingLeft", 1);
+    _$setProp(_el$46, "paddingRight", 1);
+    _$insertNode(_el$47, _el$48);
+    _$setProp(_el$47, "width", '100%');
+    _$setProp(_el$47, "flexDirection", 'row');
+    _$setProp(_el$47, "justifyContent", 'space-between');
+    _$setProp(_el$47, "alignItems", 'center');
+    _$setProp(_el$47, "onMouseDown", () => {
       if (hasData()) props.controller.toggleCollapsed();
     });
-    _$insertNode(_el$44, _el$45);
-    _$setProp(_el$44, "paddingLeft", 1);
-    _$setProp(_el$44, "paddingRight", 1);
-    _$insertNode(_el$45, _el$46);
-    _$insert(_el$46, headerLabel);
-    _$insert(_el$43, _$createComponent(Show, {
+    _$insertNode(_el$48, _el$49);
+    _$setProp(_el$48, "paddingLeft", 1);
+    _$setProp(_el$48, "paddingRight", 1);
+    _$insertNode(_el$49, _el$50);
+    _$insert(_el$50, headerLabel);
+    _$insert(_el$47, _$createComponent(Show, {
       get when() {
         return degraded();
       },
@@ -910,36 +1041,36 @@ function QuotaSidebar(props) {
             return prefs().header.showVersion && PLUGIN_VERSION !== '';
           },
           get children() {
-            var _el$51 = _$createElement("text");
-            _$insert(_el$51, `v${PLUGIN_VERSION}`);
-            _$effect(_$p => _$setProp(_el$51, "fg", theme().textMuted, _$p));
-            return _el$51;
+            var _el$55 = _$createElement("text");
+            _$insert(_el$55, `v${PLUGIN_VERSION}`);
+            _$effect(_$p => _$setProp(_el$55, "fg", theme().textMuted, _$p));
+            return _el$55;
           }
         });
       },
       get children() {
-        var _el$47 = _$createElement("box"),
-          _el$48 = _$createElement("text"),
-          _el$49 = _$createElement("b");
-        _$insertNode(_el$47, _el$48);
-        _$setProp(_el$47, "paddingLeft", 1);
-        _$setProp(_el$47, "paddingRight", 1);
-        _$insertNode(_el$48, _el$49);
-        _$insertNode(_el$49, _$createTextNode(`LIMITED`));
+        var _el$51 = _$createElement("box"),
+          _el$52 = _$createElement("text"),
+          _el$53 = _$createElement("b");
+        _$insertNode(_el$51, _el$52);
+        _$setProp(_el$51, "paddingLeft", 1);
+        _$setProp(_el$51, "paddingRight", 1);
+        _$insertNode(_el$52, _el$53);
+        _$insertNode(_el$53, _$createTextNode(`LIMITED`));
         _$effect(_p$ => {
-          var _v$12 = theme().warning,
-            _v$13 = theme().background;
-          _v$12 !== _p$.e && (_p$.e = _$setProp(_el$47, "backgroundColor", _v$12, _p$.e));
-          _v$13 !== _p$.t && (_p$.t = _$setProp(_el$48, "fg", _v$13, _p$.t));
+          var _v$14 = theme().warning,
+            _v$15 = theme().background;
+          _v$14 !== _p$.e && (_p$.e = _$setProp(_el$51, "backgroundColor", _v$14, _p$.e));
+          _v$15 !== _p$.t && (_p$.t = _$setProp(_el$52, "fg", _v$15, _p$.t));
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$47;
+        return _el$51;
       }
     }), null);
-    _$insert(_el$42, _$createComponent(Show, {
+    _$insert(_el$46, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!collapsed())() && hasData();
       },
@@ -962,7 +1093,7 @@ function QuotaSidebar(props) {
         });
       }
     }), null);
-    _$insert(_el$42, _$createComponent(Show, {
+    _$insert(_el$46, _$createComponent(Show, {
       get when() {
         return !collapsed() || !hasData();
       },
@@ -973,14 +1104,14 @@ function QuotaSidebar(props) {
           },
           get fallback() {
             return (() => {
-              var _el$52 = _$createElement("box"),
-                _el$53 = _$createElement("text");
-              _$insertNode(_el$52, _el$53);
-              _$setProp(_el$52, "marginTop", 1);
-              _$setProp(_el$52, "width", '100%');
-              _$insertNode(_el$53, _$createTextNode(`Waiting for quota…`));
-              _$effect(_$p => _$setProp(_el$53, "fg", theme().textMuted, _$p));
-              return _el$52;
+              var _el$56 = _$createElement("box"),
+                _el$57 = _$createElement("text");
+              _$insertNode(_el$56, _el$57);
+              _$setProp(_el$56, "marginTop", 1);
+              _$setProp(_el$56, "width", '100%');
+              _$insertNode(_el$57, _$createTextNode(`Waiting for quota…`));
+              _$effect(_$p => _$setProp(_el$57, "fg", theme().textMuted, _$p));
+              return _el$56;
             })();
           },
           get children() {
@@ -1227,19 +1358,19 @@ function QuotaSidebar(props) {
       }
     }), null);
     _$effect(_p$ => {
-      var _v$14 = theme().borderActive,
-        _v$15 = theme().accent,
-        _v$16 = theme().background;
-      _v$14 !== _p$.e && (_p$.e = _$setProp(_el$42, "borderColor", _v$14, _p$.e));
-      _v$15 !== _p$.t && (_p$.t = _$setProp(_el$44, "backgroundColor", _v$15, _p$.t));
-      _v$16 !== _p$.a && (_p$.a = _$setProp(_el$45, "fg", _v$16, _p$.a));
+      var _v$16 = theme().borderActive,
+        _v$17 = theme().accent,
+        _v$18 = theme().background;
+      _v$16 !== _p$.e && (_p$.e = _$setProp(_el$46, "borderColor", _v$16, _p$.e));
+      _v$17 !== _p$.t && (_p$.t = _$setProp(_el$48, "backgroundColor", _v$17, _p$.t));
+      _v$18 !== _p$.a && (_p$.a = _$setProp(_el$49, "fg", _v$18, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$42;
+    return _el$46;
   })();
 }
 const tui = async api => {