@cortexkit/opencode-anthropic-auth 2.4.6 → 2.4.8

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

@@ -1,7 +1,7 @@
-import { memo as _$memo } from "opentui:runtime-module:%40opentui%2Fsolid";
-import { createComponent as _$createComponent } from "opentui:runtime-module:%40opentui%2Fsolid";
 import { createTextNode as _$createTextNode } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { memo as _$memo } from "opentui:runtime-module:%40opentui%2Fsolid";
 import { use as _$use } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { createComponent as _$createComponent } from "opentui:runtime-module:%40opentui%2Fsolid";
 import { effect as _$effect } from "opentui:runtime-module:%40opentui%2Fsolid";
 import { insertNode as _$insertNode } from "opentui:runtime-module:%40opentui%2Fsolid";
 import { insert as _$insert } from "opentui:runtime-module:%40opentui%2Fsolid";
@@ -17,10 +17,11 @@ import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 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, fitPaceLine, fitQuotaRow, formatPrimeAccountValue, formatQuotaRowLabel, getCollapsedAccounts, getCollapsedQuotaSummary, getFableRecoverySummary, quotaLabelColumnWidth, resolveActiveAccount, SEVEN_DAY_MS, scopedQuotaShortNames } from "../sidebar-state.js";
+import { createStore, reconcile } from "opentui:runtime-module:solid-js%2Fstore";
+import { computeQuotaPacing, DEFAULT_SIDEBAR_STATE, FIVE_HOUR_MS, fitPaceLine, fitQuotaRow, formatPrimeAccountValue, getCollapsedAccounts, getCollapsedQuotaSummary, getFableRecoverySummary, quotaLabelColumnWidth, resolveActiveAccount, SEVEN_DAY_MS, scopedQuotaShortNames } from "../sidebar-state.js";
 import { PLUGIN_KEY, queueTuiPreferenceUpdate, readTuiPreferencesFile, resolveAnthropicAuthPrefs, watchTuiPreferences } from "../tui-preferences.js";
+import { SidebarFrame, SidebarTextRow } from "./../quota-sidebar.js";
 
 // Read package metadata from either the raw src/ entry or its generated
 // src/tui-compiled/tui/ counterpart. Avoid a JSON import because package.json sits
@@ -64,6 +65,9 @@ function usageTone(usedPct, appearance) {
   if (usedPct < appearance.errorThreshold) return 'warn';
   return 'err';
 }
+function sharedTone(tone) {
+  return tone === 'ok' ? 'success' : tone === 'warn' ? 'warning' : tone === 'err' ? 'error' : tone === 'muted' ? 'textMuted' : tone;
+}
 const PACE_RESERVE_CHAR = '\u2592';
 const PACE_DEFICIT_CHAR = '\u2593';
 
@@ -198,111 +202,26 @@ function CollapsedRow(props) {
     return _el$8;
   })();
 }
-function CollapsedAccountRow(props) {
-  const [width, setWidth] = createSignal(40);
-  let row;
-  const summary = () => getCollapsedQuotaSummary(props.account.quota, props.now);
-  const value = () => summary().text ?? '—';
-  // Keep the quota and its two-cell status suffix intact; only the label shrinks.
-  const labelWidth = () => Math.max(0, width() - 1 - Bun.stringWidth(value()) - 2);
-  const dim = () => !props.account.active || props.account.quotaDated || summary().stale;
-  const attributes = () => dim() ? TextAttributes.DIM : TextAttributes.BOLD;
-  const color = () => dim() ? props.theme.textMuted : toneColor(props.theme, props.tone);
-  return (() => {
-    var _el$0 = _$createElement("box"),
-      _el$12 = _$createElement("text"),
-      _el$13 = _$createElement("text");
-    _$insertNode(_el$0, _el$12);
-    _$insertNode(_el$0, _el$13);
-    _$use(element => {
-      row = element;
-      setWidth(element.width || 40);
-    }, _el$0);
-    _$setProp(_el$0, "width", '100%');
-    _$setProp(_el$0, "height", 1);
-    _$setProp(_el$0, "flexDirection", 'row');
-    _$setProp(_el$0, "onSizeChange", () => setWidth(row?.width || 40));
-    _$insert(_el$0, _$createComponent(Show, {
-      get when() {
-        return labelWidth() > 0;
-      },
-      get children() {
-        return [(() => {
-          var _el$1 = _$createElement("text");
-          _$setProp(_el$1, "flexShrink", 0);
-          _$setProp(_el$1, "wrapMode", 'none');
-          _$insert(_el$1, () => formatQuotaRowLabel(props.account.name, labelWidth()));
-          _$effect(_p$ => {
-            var _v$5 = labelWidth(),
-              _v$6 = color(),
-              _v$7 = attributes();
-            _v$5 !== _p$.e && (_p$.e = _$setProp(_el$1, "width", _v$5, _p$.e));
-            _v$6 !== _p$.t && (_p$.t = _$setProp(_el$1, "fg", _v$6, _p$.t));
-            _v$7 !== _p$.a && (_p$.a = _$setProp(_el$1, "attributes", _v$7, _p$.a));
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined,
-            a: undefined
-          });
-          return _el$1;
-        })(), (() => {
-          var _el$10 = _$createElement("text");
-          _$insertNode(_el$10, _$createTextNode(` `));
-          _$setProp(_el$10, "width", 1);
-          _$setProp(_el$10, "flexShrink", 0);
-          return _el$10;
-        })()];
-      }
-    }), _el$12);
-    _$setProp(_el$12, "flexShrink", 0);
-    _$setProp(_el$12, "wrapMode", 'none');
-    _$insert(_el$12, value);
-    _$setProp(_el$13, "width", 2);
-    _$setProp(_el$13, "flexShrink", 0);
-    _$insert(_el$13, () => props.account.blocked ? ' ⊘' : ' ●');
-    _$effect(_p$ => {
-      var _v$8 = Bun.stringWidth(value()),
-        _v$9 = color(),
-        _v$0 = attributes(),
-        _v$1 = toneColor(props.theme, props.account.blocked ? 'warn' : props.account.active ? 'ok' : 'muted'),
-        _v$10 = attributes();
-      _v$8 !== _p$.e && (_p$.e = _$setProp(_el$12, "width", _v$8, _p$.e));
-      _v$9 !== _p$.t && (_p$.t = _$setProp(_el$12, "fg", _v$9, _p$.t));
-      _v$0 !== _p$.a && (_p$.a = _$setProp(_el$12, "attributes", _v$0, _p$.a));
-      _v$1 !== _p$.o && (_p$.o = _$setProp(_el$13, "fg", _v$1, _p$.o));
-      _v$10 !== _p$.i && (_p$.i = _$setProp(_el$13, "attributes", _v$10, _p$.i));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined,
-      i: undefined
-    });
-    return _el$0;
-  })();
-}
 
 // 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$14 = _$createElement("text");
-    _$setProp(_el$14, "flexShrink", 0);
-    _$setProp(_el$14, "wrapMode", 'none');
-    _$insert(_el$14, () => props.text);
+    var _el$0 = _$createElement("text");
+    _$setProp(_el$0, "flexShrink", 0);
+    _$setProp(_el$0, "wrapMode", 'none');
+    _$insert(_el$0, () => props.text);
     _$effect(_p$ => {
-      var _v$11 = Bun.stringWidth(props.text),
-        _v$12 = props.fg;
-      _v$11 !== _p$.e && (_p$.e = _$setProp(_el$14, "width", _v$11, _p$.e));
-      _v$12 !== _p$.t && (_p$.t = _$setProp(_el$14, "fg", _v$12, _p$.t));
+      var _v$5 = Bun.stringWidth(props.text),
+        _v$6 = props.fg;
+      _v$5 !== _p$.e && (_p$.e = _$setProp(_el$0, "width", _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$14;
+    return _el$0;
   })();
 }
 
@@ -332,11 +251,11 @@ function QuotaRow(props) {
     },
     get fallback() {
       return (() => {
-        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, {
+        var _el$11 = _$createElement("box");
+        _$setProp(_el$11, "width", '100%');
+        _$setProp(_el$11, "height", 1);
+        _$setProp(_el$11, "flexDirection", 'row');
+        _$insert(_el$11, _$createComponent(Cell, {
           get fg() {
             return props.theme.textMuted;
           },
@@ -344,26 +263,26 @@ function QuotaRow(props) {
             return `${labelCell()}\u2014`;
           }
         }));
-        return _el$17;
+        return _el$11;
       })();
     },
     get children() {
       return [(() => {
-        var _el$15 = _$createElement("box"),
-          _el$16 = _$createElement("box");
-        _$insertNode(_el$15, _el$16);
-        _$setProp(_el$15, "width", '100%');
-        _$setProp(_el$15, "height", 1);
-        _$setProp(_el$15, "flexDirection", 'row');
-        _$insert(_el$15, _$createComponent(Cell, {
+        var _el$1 = _$createElement("box"),
+          _el$10 = _$createElement("box");
+        _$insertNode(_el$1, _el$10);
+        _$setProp(_el$1, "width", '100%');
+        _$setProp(_el$1, "height", 1);
+        _$setProp(_el$1, "flexDirection", 'row');
+        _$insert(_el$1, _$createComponent(Cell, {
           get fg() {
             return props.theme.textMuted;
           },
           get text() {
             return labelCell();
           }
-        }), _el$16);
-        _$insert(_el$15, _$createComponent(Index, {
+        }), _el$10);
+        _$insert(_el$1, _$createComponent(Index, {
           get each() {
             return quotaBarSegments(used(), props.appearance, props.pacing, fit().barCells);
           },
@@ -375,17 +294,17 @@ function QuotaRow(props) {
               return segment().text;
             }
           })
-        }), _el$16);
-        _$insert(_el$15, _$createComponent(Cell, {
+        }), _el$10);
+        _$insert(_el$1, _$createComponent(Cell, {
           get fg() {
             return toneColor(props.theme, usageTone(used(), props.appearance));
           },
           get text() {
             return `${fit().barCells > 0 ? ' ' : ''}${figure()}`;
           }
-        }), _el$16);
-        _$setProp(_el$16, "flexGrow", 1);
-        _$insert(_el$15, _$createComponent(Show, {
+        }), _el$10);
+        _$setProp(_el$10, "flexGrow", 1);
+        _$insert(_el$1, _$createComponent(Show, {
           get when() {
             return fit().reset;
           },
@@ -398,17 +317,17 @@ function QuotaRow(props) {
             }
           })
         }), null);
-        return _el$15;
+        return _el$1;
       })(), _$createComponent(Show, {
         get when() {
           return paceLine();
         },
         children: line => (() => {
-          var _el$18 = _$createElement("box");
-          _$setProp(_el$18, "width", '100%');
-          _$setProp(_el$18, "height", 1);
-          _$setProp(_el$18, "flexDirection", 'row');
-          _$insert(_el$18, _$createComponent(Cell, {
+          var _el$12 = _$createElement("box");
+          _$setProp(_el$12, "width", '100%');
+          _$setProp(_el$12, "height", 1);
+          _$setProp(_el$12, "flexDirection", 'row');
+          _$insert(_el$12, _$createComponent(Cell, {
             get fg() {
               return props.theme.textMuted;
             },
@@ -416,7 +335,7 @@ function QuotaRow(props) {
               return ' '.repeat(props.labelWidth + 1);
             }
           }), null);
-          _$insert(_el$18, _$createComponent(Cell, {
+          _$insert(_el$12, _$createComponent(Cell, {
             get fg() {
               return toneColor(props.theme, props.pacing?.state === 'deficit' ? 'warn' : 'muted');
             },
@@ -424,7 +343,7 @@ function QuotaRow(props) {
               return line();
             }
           }), null);
-          return _el$18;
+          return _el$12;
         })()
       })];
     }
@@ -464,110 +383,124 @@ export function AccountBlock(props) {
   const [width, setWidth] = createSignal();
   let block;
   return (() => {
-    var _el$19 = _$createElement("box"),
-      _el$20 = _$createElement("box"),
-      _el$21 = _$createElement("text"),
-      _el$22 = _$createElement("b"),
-      _el$23 = _$createElement("text"),
-      _el$24 = _$createElement("b");
-    _$insertNode(_el$19, _el$20);
+    var _el$13 = _$createElement("box"),
+      _el$14 = _$createElement("box"),
+      _el$15 = _$createElement("text"),
+      _el$16 = _$createElement("b"),
+      _el$17 = _$createElement("text"),
+      _el$18 = _$createElement("b");
+    _$insertNode(_el$13, _el$14);
     _$use(element => {
       block = element;
       setWidth(element.width || undefined);
-    }, _el$19);
-    _$setProp(_el$19, "width", '100%');
-    _$setProp(_el$19, "flexDirection", 'column');
-    _$setProp(_el$19, "onSizeChange", () => setWidth(block?.width || undefined));
-    _$insertNode(_el$20, _el$21);
-    _$insertNode(_el$20, _el$23);
-    _$setProp(_el$20, "width", '100%');
-    _$setProp(_el$20, "flexDirection", 'row');
-    _$setProp(_el$20, "justifyContent", 'space-between');
-    _$insertNode(_el$21, _el$22);
-    _$insert(_el$22, () => `${props.name}${props.tierLabel ? ` · ${props.tierLabel}` : ''}`);
-    _$insertNode(_el$23, _el$24);
-    _$insert(_el$24, statusWord);
-    _$insert(_el$19, _$createComponent(Show, {
+    }, _el$13);
+    _$setProp(_el$13, "width", '100%');
+    _$setProp(_el$13, "flexDirection", 'column');
+    _$setProp(_el$13, "onSizeChange", () => setWidth(block?.width || undefined));
+    _$insertNode(_el$14, _el$15);
+    _$insertNode(_el$14, _el$17);
+    _$setProp(_el$14, "width", '100%');
+    _$setProp(_el$14, "flexDirection", 'row');
+    _$setProp(_el$14, "justifyContent", 'space-between');
+    _$insertNode(_el$15, _el$16);
+    _$insert(_el$16, () => `${props.name}${props.tierLabel ? ` · ${props.tierLabel}` : ''}`);
+    _$insertNode(_el$17, _el$18);
+    _$insert(_el$18, statusWord);
+    _$insert(_el$13, _$createComponent(Show, {
       get when() {
         return props.stateLine;
       },
       get children() {
-        var _el$25 = _$createElement("text");
-        _$insert(_el$25, () => props.stateLine);
-        _$effect(_$p => _$setProp(_el$25, "fg", props.theme.textMuted, _$p));
-        return _el$25;
+        var _el$19 = _$createElement("text");
+        _$insert(_el$19, () => props.stateLine);
+        _$effect(_$p => _$setProp(_el$19, "fg", props.theme.textMuted, _$p));
+        return _el$19;
       }
     }), null);
-    _$insert(_el$19, _$createComponent(Show, {
+    _$insert(_el$13, _$createComponent(Show, {
       get when() {
         return props.quota;
       },
       get fallback() {
         return (() => {
-          var _el$29 = _$createElement("text");
-          _$insertNode(_el$29, _$createTextNode(`checking…`));
-          _$effect(_$p => _$setProp(_el$29, "fg", props.theme.textMuted, _$p));
-          return _el$29;
+          var _el$23 = _$createElement("text");
+          _$insertNode(_el$23, _$createTextNode(`checking…`));
+          _$effect(_$p => _$setProp(_el$23, "fg", props.theme.textMuted, _$p));
+          return _el$23;
         })();
       },
       get children() {
-        return [_$createComponent(QuotaRow, {
-          get theme() {
-            return props.theme;
-          },
-          get appearance() {
-            return props.appearance;
-          },
-          label: "5h",
-          get labelWidth() {
-            return labelWidth();
-          },
-          get width() {
-            return width();
-          },
-          get part() {
-            return partFor('5h');
-          },
-          get usedPercent() {
-            return props.quota?.five_hour?.usedPercent;
-          },
-          get pacing() {
-            return pacingFor(props.quota?.five_hour, FIVE_HOUR_MS);
-          },
-          get binding() {
-            return props.quota?.bindingWindow === 'five_hour';
+        return [_$createComponent(Show, {
+          get when() {
+            return props.quota?.five_hour;
           },
-          get now() {
-            return props.now;
+          get children() {
+            return _$createComponent(QuotaRow, {
+              get theme() {
+                return props.theme;
+              },
+              get appearance() {
+                return props.appearance;
+              },
+              label: "5h",
+              get labelWidth() {
+                return labelWidth();
+              },
+              get width() {
+                return width();
+              },
+              get part() {
+                return partFor('5h');
+              },
+              get usedPercent() {
+                return props.quota?.five_hour?.usedPercent;
+              },
+              get pacing() {
+                return pacingFor(props.quota?.five_hour, FIVE_HOUR_MS);
+              },
+              get binding() {
+                return props.quota?.bindingWindow === 'five_hour';
+              },
+              get now() {
+                return props.now;
+              }
+            });
           }
-        }), _$createComponent(QuotaRow, {
-          get theme() {
-            return props.theme;
-          },
-          get appearance() {
-            return props.appearance;
-          },
-          label: "7d",
-          get labelWidth() {
-            return labelWidth();
-          },
-          get width() {
-            return width();
-          },
-          get part() {
-            return partFor('7d');
-          },
-          get usedPercent() {
-            return props.quota?.seven_day?.usedPercent;
-          },
-          get pacing() {
-            return pacingFor(props.quota?.seven_day, SEVEN_DAY_MS);
-          },
-          get binding() {
-            return props.quota?.bindingWindow === 'seven_day';
+        }), _$createComponent(Show, {
+          get when() {
+            return props.quota?.seven_day;
           },
-          get now() {
-            return props.now;
+          get children() {
+            return _$createComponent(QuotaRow, {
+              get theme() {
+                return props.theme;
+              },
+              get appearance() {
+                return props.appearance;
+              },
+              label: "7d",
+              get labelWidth() {
+                return labelWidth();
+              },
+              get width() {
+                return width();
+              },
+              get part() {
+                return partFor('7d');
+              },
+              get usedPercent() {
+                return props.quota?.seven_day?.usedPercent;
+              },
+              get pacing() {
+                return pacingFor(props.quota?.seven_day, SEVEN_DAY_MS);
+              },
+              get binding() {
+                return props.quota?.bindingWindow === 'seven_day';
+              },
+              get now() {
+                return props.now;
+              }
+            });
           }
         }), _$createComponent(For, {
           get each() {
@@ -612,54 +545,99 @@ export function AccountBlock(props) {
           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$31 = _$createElement("box"),
-              _el$32 = _$createElement("text");
-            _$insertNode(_el$31, _el$32);
-            _$setProp(_el$31, "width", '100%');
-            _$setProp(_el$31, "height", 1);
-            _$setProp(_el$31, "flexDirection", 'row');
-            _$setProp(_el$32, "wrapMode", 'none');
-            _$insert(_el$32, () => creditLine(budget().figure, props.quota?.extraUsage, width()));
-            _$effect(_$p => _$setProp(_el$32, "fg", toneColor(props.theme, props.quota?.extraUsage?.severity === 'critical' ? 'err' : props.quota?.extraUsage?.severity === 'warning' || props.quota?.extraUsage?.exhausted ? 'warn' : 'muted'), _$p));
-            return _el$31;
+            var _el$25 = _$createElement("box"),
+              _el$26 = _$createElement("text");
+            _$insertNode(_el$25, _el$26);
+            _$setProp(_el$25, "width", '100%');
+            _$setProp(_el$25, "height", 1);
+            _$setProp(_el$25, "flexDirection", 'row');
+            _$setProp(_el$26, "wrapMode", 'none');
+            _$insert(_el$26, () => creditLine(budget().figure, props.quota?.extraUsage, width()));
+            _$effect(_$p => _$setProp(_el$26, "fg", toneColor(props.theme, props.quota?.extraUsage?.severity === 'critical' ? 'err' : props.quota?.extraUsage?.severity === 'warning' || props.quota?.extraUsage?.exhausted ? 'warn' : 'muted'), _$p));
+            return _el$25;
           })()
         }), _$createComponent(Show, {
           get when() {
             return parts().age;
           },
           get children() {
-            var _el$26 = _$createElement("text");
-            _$insert(_el$26, () => parts().age);
-            _$effect(_$p => _$setProp(_el$26, "fg", props.theme.textMuted, _$p));
-            return _el$26;
+            var _el$20 = _$createElement("text");
+            _$insert(_el$20, () => parts().age);
+            _$effect(_$p => _$setProp(_el$20, "fg", props.theme.textMuted, _$p));
+            return _el$20;
           }
         }), _$createComponent(Show, {
           get when() {
             return props.quota?.fallbackAdvised === true;
           },
           get children() {
-            var _el$27 = _$createElement("text");
-            _$insertNode(_el$27, _$createTextNode(`→ fallback advised`));
-            _$effect(_$p => _$setProp(_el$27, "fg", props.theme.textMuted, _$p));
-            return _el$27;
+            var _el$21 = _$createElement("text");
+            _$insertNode(_el$21, _$createTextNode(`→ fallback advised`));
+            _$effect(_$p => _$setProp(_el$21, "fg", props.theme.textMuted, _$p));
+            return _el$21;
           }
         })];
       }
     }), null);
     _$effect(_p$ => {
-      var _v$13 = props.marginTop ?? 0,
-        _v$14 = props.theme.text,
-        _v$15 = toneColor(props.theme, statusTone());
-      _v$13 !== _p$.e && (_p$.e = _$setProp(_el$19, "marginTop", _v$13, _p$.e));
-      _v$14 !== _p$.t && (_p$.t = _$setProp(_el$21, "fg", _v$14, _p$.t));
-      _v$15 !== _p$.a && (_p$.a = _$setProp(_el$23, "fg", _v$15, _p$.a));
+      var _v$7 = props.marginTop ?? 0,
+        _v$8 = props.theme.text,
+        _v$9 = toneColor(props.theme, statusTone());
+      _v$7 !== _p$.e && (_p$.e = _$setProp(_el$13, "marginTop", _v$7, _p$.e));
+      _v$8 !== _p$.t && (_p$.t = _$setProp(_el$15, "fg", _v$8, _p$.t));
+      _v$9 !== _p$.a && (_p$.a = _$setProp(_el$17, "fg", _v$9, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$19;
+    return _el$13;
+  })();
+}
+function AccountExtras(props) {
+  const [width, setWidth] = createSignal();
+  let block;
+  const budget = () => quotaWindowParts(quotaDisplayProjection(props.quota, props.now), {
+    now: props.now
+  }).windows.find(part => part.kind === 'budget');
+  return (() => {
+    var _el$27 = _$createElement("box");
+    _$use(element => {
+      block = element;
+      setWidth(element.width || undefined);
+    }, _el$27);
+    _$setProp(_el$27, "width", '100%');
+    _$setProp(_el$27, "flexDirection", 'column');
+    _$setProp(_el$27, "onSizeChange", () => setWidth(block?.width || undefined));
+    _$insert(_el$27, _$createComponent(Show, {
+      get when() {
+        return budget();
+      },
+      children: part => (() => {
+        var _el$28 = _$createElement("box"),
+          _el$29 = _$createElement("text");
+        _$insertNode(_el$28, _el$29);
+        _$setProp(_el$28, "width", '100%');
+        _$setProp(_el$28, "height", 1);
+        _$setProp(_el$28, "flexDirection", 'row');
+        _$setProp(_el$29, "wrapMode", 'none');
+        _$insert(_el$29, () => creditLine(part().figure, props.quota?.extraUsage, width()));
+        _$effect(_$p => _$setProp(_el$29, "fg", toneColor(props.theme, props.quota?.extraUsage?.severity === 'critical' ? 'err' : props.quota?.extraUsage?.severity === 'warning' || props.quota?.extraUsage?.exhausted ? 'warn' : 'muted'), _$p));
+        return _el$28;
+      })()
+    }), null);
+    _$insert(_el$27, _$createComponent(Show, {
+      get when() {
+        return props.quota?.fallbackAdvised === true;
+      },
+      get children() {
+        return _$createComponent(SidebarTextRow, {
+          text: "\u2192 fallback advised"
+        });
+      }
+    }), null);
+    return _el$27;
   })();
 }
 // The TUI may unmount and remount sidebar_content when the user switches
@@ -733,12 +711,6 @@ 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}`;
-  };
   const activeAccount = () => resolveActiveAccount(state());
   const activeQuotaSummary = () => getCollapsedQuotaSummary(activeAccount().quota, now());
   const activePacingDeficit = () => {
@@ -776,420 +748,354 @@ export function ClaudeSidebar(props) {
     if (!r) return '\u2014';
     return `${r.transport} \u00b7 ${r.enabled ? 'on' : 'off'}`;
   };
-  return (() => {
-    var _el$33 = _$createElement("box"),
-      _el$34 = _$createElement("box"),
-      _el$35 = _$createElement("box"),
-      _el$36 = _$createElement("text"),
-      _el$37 = _$createElement("b");
-    _$insertNode(_el$33, _el$34);
-    _$setProp(_el$33, "width", '100%');
-    _$setProp(_el$33, "flexDirection", 'column');
-    _$insertNode(_el$34, _el$35);
-    _$setProp(_el$34, "width", '100%');
-    _$setProp(_el$34, "flexDirection", 'row');
-    _$setProp(_el$34, "justifyContent", 'space-between');
-    _$setProp(_el$34, "alignItems", 'center');
-    _$setProp(_el$34, "onMouseDown", () => {
-      if (hasData()) props.controller.toggleCollapsed();
+  const accountDetail = id => id === 'main' ? state().main : state().fallbacks?.find(account => account.id === id);
+  const accountViews = createMemo(() => {
+    if (!hasData()) return [];
+    return getCollapsedAccounts(state(), prefs().sections.fallbackAccounts).map(account => {
+      const detail = accountDetail(account.id);
+      const quota = quotaDisplayProjection(account.quota, now());
+      const needsReauth = detail && 'needsReauth' in detail && detail.needsReauth;
+      const vaultReauth = detail && 'vaultReauth' in detail && detail.vaultReauth;
+      const active = state().activeId === account.id;
+      const status = account.quotaDated && account.quota ? 'dated' : needsReauth ? 're-login' : vaultReauth ? 'needs sign-in in the vault' : active ? 'active' : 'idle';
+      const groups = [{
+        rows: quotaWindowParts(quota, {
+          now: now()
+        }).windows.filter(part => part.kind === 'window').map(part => {
+          const scoped = account.quota?.scoped?.find(window => window.title === part.name);
+          const window = part.name === '5h' ? account.quota?.five_hour : part.name === '7d' ? account.quota?.seven_day : scoped;
+          const pacing = prefs().sections.pacing && !account.quotaDated && window ? computeQuotaPacing(window, part.name === '5h' ? FIVE_HOUR_MS : SEVEN_DAY_MS, now()) : null;
+          const text = fitPaceLine(pacing, undefined, pacing?.runsOutAt ? formatResetIn(pacing.runsOutAt, now()) : undefined, part.resetIn, part.remainingPercent);
+          const pace = pacing ? {
+            text: text ?? '',
+            tone: pacing.state === 'deficit' ? 'warning' : 'textMuted',
+            overlay: {
+              kind: pacing.deltaPercent > 0 ? 'deficit' : 'reserve',
+              percent: pacing.pacePercent
+            }
+          } : undefined;
+          const binding = account.quota?.bindingWindow === (part.name === '5h' ? 'five_hour' : part.name === '7d' ? 'seven_day' : scoped?.id);
+          return {
+            part: {
+              ...part,
+              name: part.short,
+              figure: `${part.figure}${binding ? ' •' : ''}`
+            },
+            pace
+          };
+        })
+      }];
+      return {
+        id: account.id,
+        label: account.name,
+        titleSuffix: detail?.tierLabel,
+        quota,
+        groups,
+        status: {
+          text: status,
+          tone: needsReauth || vaultReauth || detail?.stateLine ? 'warning' : active ? 'success' : 'textMuted'
+        },
+        blocked: Boolean(account.blocked),
+        indicatorTone: account.blocked ? 'warning' : account.active ? 'success' : 'textMuted',
+        collapsed: {
+          muted: Boolean(!account.active || account.quotaDated || getCollapsedQuotaSummary(account.quota, now()).stale),
+          quotaTone: sharedTone(activeQuotaTone())
+        },
+        emptyQuotaText: {
+          expanded: 'checking…',
+          collapsed: '—'
+        }
+      };
     });
-    _$insertNode(_el$35, _el$36);
-    _$setProp(_el$35, "paddingLeft", 1);
-    _$setProp(_el$35, "paddingRight", 1);
-    _$insertNode(_el$36, _el$37);
-    _$insert(_el$37, headerLabel);
-    _$insert(_el$34, _$createComponent(Show, {
+  });
+  // Polls rebuild snapshots, but account ids keep the shared frame's rows mounted.
+  const [accounts, setAccounts] = createStore([]);
+  createEffect(() => setAccounts(reconcile(accountViews(), {
+    key: 'id'
+  })));
+  return _$createComponent(SidebarFrame, {
+    get header() {
+      return {
+        badge: prefs().header.label,
+        version: prefs().header.showVersion && PLUGIN_VERSION !== '' ? `v${PLUGIN_VERSION}` : undefined
+      };
+    },
+    accounts: accounts,
+    get theme() {
+      return theme();
+    },
+    get appearance() {
+      return prefs().appearance;
+    },
+    get showQuota() {
+      return prefs().sections.quota;
+    },
+    get now() {
+      return now();
+    },
+    get collapsed() {
+      return collapsed();
+    },
+    get onToggle() {
+      return props.controller.toggleCollapsed;
+    },
+    beforeQuota: account => _$createComponent(Show, {
       get when() {
-        return prefs().header.showVersion && PLUGIN_VERSION !== '';
+        return accountDetail(account.id)?.stateLine;
+      },
+      children: text => _$createComponent(SidebarTextRow, {
+        get text() {
+          return text();
+        }
+      })
+    }),
+    afterQuota: account => _$createComponent(AccountExtras, {
+      get quota() {
+        return accountDetail(account.id)?.quota ?? null;
+      },
+      get now() {
+        return now();
+      },
+      get theme() {
+        return theme();
+      }
+    }),
+    collapsedSections: () => [_$createComponent(Show, {
+      get when() {
+        return state().fastMode;
       },
       get children() {
-        var _el$38 = _$createElement("text");
-        _$insert(_el$38, `v${PLUGIN_VERSION}`);
-        _$effect(_$p => _$setProp(_el$38, "fg", theme().textMuted, _$p));
-        return _el$38;
+        return _$createComponent(CollapsedRow, {
+          get theme() {
+            return theme();
+          },
+          label: "Mode",
+          get children() {
+            var _el$30 = _$createElement("text"),
+              _el$31 = _$createElement("b");
+            _$insertNode(_el$30, _el$31);
+            _$insertNode(_el$31, _$createTextNode(`fast`));
+            _$effect(_$p => _$setProp(_el$30, "fg", toneColor(theme(), 'accent'), _$p));
+            return _el$30;
+          }
+        });
       }
-    }), null);
-    _$insert(_el$33, _$createComponent(Show, {
+    }), _$createComponent(Show, {
+      get when() {
+        return fableRecoverySummary();
+      },
+      children: summary => _$createComponent(CollapsedRow, {
+        get theme() {
+          return theme();
+        },
+        label: "Recovery",
+        get children() {
+          var _el$33 = _$createElement("text"),
+            _el$34 = _$createElement("b");
+          _$insertNode(_el$33, _el$34);
+          _$insert(_el$34, summary);
+          _$effect(_$p => _$setProp(_el$33, "fg", toneColor(theme(), fableRecoveryTone()), _$p));
+          return _el$33;
+        }
+      })
+    })],
+    sections: () => [_$createComponent(Show, {
       get when() {
-        return _$memo(() => !!collapsed())() && hasData();
+        return !hasData();
       },
       get children() {
-        return [_$createComponent(Index, {
-          get each() {
-            return getCollapsedAccounts(state(), prefs().sections.fallbackAccounts);
+        var _el$35 = _$createElement("box"),
+          _el$36 = _$createElement("text");
+        _$insertNode(_el$35, _el$36);
+        _$setProp(_el$35, "marginTop", 1);
+        _$setProp(_el$35, "width", '100%');
+        _$insertNode(_el$36, _$createTextNode(`Waiting for quota…`));
+        _$effect(_$p => _$setProp(_el$36, "fg", theme().textMuted, _$p));
+        return _el$35;
+      }
+    }), _$createComponent(Show, {
+      get when() {
+        return prefs().sections.routing;
+      },
+      get children() {
+        return [_$createComponent(SectionHeader, {
+          get theme() {
+            return theme();
           },
-          children: account => _$createComponent(CollapsedAccountRow, {
-            get theme() {
-              return theme();
-            },
-            get account() {
-              return account();
-            },
-            get tone() {
-              return activeQuotaTone();
-            },
-            get now() {
-              return now();
-            }
-          })
-        }), _$createComponent(Show, {
-          get when() {
-            return state().fastMode;
+          title: "Routing"
+        }), _$createComponent(StatRow, {
+          get theme() {
+            return theme();
           },
-          get children() {
-            return _$createComponent(CollapsedRow, {
-              get theme() {
-                return theme();
-              },
-              label: "Mode",
-              get children() {
-                var _el$39 = _$createElement("text"),
-                  _el$40 = _$createElement("b");
-                _$insertNode(_el$39, _el$40);
-                _$insertNode(_el$40, _$createTextNode(`fast`));
-                _$effect(_$p => _$setProp(_el$39, "fg", toneColor(theme(), 'accent'), _$p));
-                return _el$39;
-              }
-            });
+          label: "Route",
+          get value() {
+            return state().route;
+          },
+          tone: "accent"
+        }), _$createComponent(StatRow, {
+          get theme() {
+            return theme();
+          },
+          label: "Mode",
+          get value() {
+            return state().fastMode ? 'fast' : 'std';
+          },
+          get tone() {
+            return state().fastMode ? 'accent' : 'muted';
           }
-        }), _$createComponent(Show, {
-          get when() {
-            return fableRecoverySummary();
+        }), _$createComponent(StatRow, {
+          get theme() {
+            return theme();
           },
-          children: summary => _$createComponent(CollapsedRow, {
-            get theme() {
-              return theme();
-            },
-            label: "Recovery",
-            get children() {
-              var _el$42 = _$createElement("text"),
-                _el$43 = _$createElement("b");
-              _$insertNode(_el$42, _el$43);
-              _$insert(_el$43, summary);
-              _$effect(_$p => _$setProp(_el$42, "fg", toneColor(theme(), fableRecoveryTone()), _$p));
-              return _el$42;
-            }
-          })
+          label: "Relay",
+          get value() {
+            return relayValue();
+          },
+          get tone() {
+            return state().relay?.enabled ? 'ok' : 'muted';
+          }
         })];
       }
-    }), null);
-    _$insert(_el$33, _$createComponent(Show, {
+    }), _$createComponent(Show, {
       get when() {
-        return !collapsed() || !hasData();
+        return fableRecoverySummary();
+      },
+      children: summary => _$createComponent(StatRow, {
+        get theme() {
+          return theme();
+        },
+        label: "Recovery",
+        get value() {
+          return summary();
+        },
+        get tone() {
+          return fableRecoveryTone();
+        }
+      })
+    }), _$createComponent(Show, {
+      get when() {
+        return showCache();
       },
       get children() {
-        return [_$createComponent(Show, {
-          get when() {
-            return hasData();
+        return [_$createComponent(SectionHeader, {
+          get theme() {
+            return theme();
           },
-          get fallback() {
-            return (() => {
-              var _el$44 = _$createElement("box"),
-                _el$45 = _$createElement("text");
-              _$insertNode(_el$44, _el$45);
-              _$setProp(_el$44, "marginTop", 1);
-              _$setProp(_el$44, "width", '100%');
-              _$insertNode(_el$45, _$createTextNode(`Waiting for quota…`));
-              _$effect(_$p => _$setProp(_el$45, "fg", theme().textMuted, _$p));
-              return _el$44;
-            })();
+          title: "Cache"
+        }), _$createComponent(StatRow, {
+          get theme() {
+            return theme();
           },
-          get children() {
-            return _$createComponent(Show, {
-              get when() {
-                return prefs().sections.quota;
-              },
-              get children() {
-                return [_$createComponent(SectionHeader, {
-                  get theme() {
-                    return theme();
-                  },
-                  title: "Quota"
-                }), _$createComponent(AccountBlock, {
-                  get theme() {
-                    return theme();
-                  },
-                  get appearance() {
-                    return prefs().appearance;
-                  },
-                  name: "main",
-                  get quota() {
-                    return state().main?.quota;
-                  },
-                  get active() {
-                    return state().activeId === 'main';
-                  },
-                  get pacingEnabled() {
-                    return prefs().sections.pacing;
-                  },
-                  get tierLabel() {
-                    return state().main?.tierLabel;
-                  },
-                  get labelWidth() {
-                    return quotaLabelWidth();
-                  },
-                  get stateLine() {
-                    return state().main?.stateLine;
-                  },
-                  get quotaDated() {
-                    return state().main?.quotaDated;
-                  },
-                  get now() {
-                    return now();
-                  }
-                }), _$createComponent(Show, {
-                  get when() {
-                    return prefs().sections.fallbackAccounts;
-                  },
-                  get children() {
-                    return _$createComponent(For, {
-                      get each() {
-                        return enabledFallbacks();
-                      },
-                      children: fb => _$createComponent(AccountBlock, {
-                        get theme() {
-                          return theme();
-                        },
-                        get appearance() {
-                          return prefs().appearance;
-                        },
-                        get name() {
-                          return fb.label ?? fb.id;
-                        },
-                        get quota() {
-                          return fb.quota;
-                        },
-                        get active() {
-                          return state().activeId === fb.id;
-                        },
-                        get pacingEnabled() {
-                          return prefs().sections.pacing;
-                        },
-                        get tierLabel() {
-                          return fb.tierLabel;
-                        },
-                        get labelWidth() {
-                          return quotaLabelWidth();
-                        },
-                        get needsReauth() {
-                          return fb.needsReauth;
-                        },
-                        get vaultReauth() {
-                          return fb.vaultReauth;
-                        },
-                        get stateLine() {
-                          return fb.stateLine;
-                        },
-                        get quotaDated() {
-                          return fb.quotaDated;
-                        },
-                        marginTop: 1,
-                        get now() {
-                          return now();
-                        }
-                      })
-                    });
-                  }
-                })];
-              }
-            });
+          label: "1h cache",
+          get value() {
+            return `${cacheKeep()?.window} \u00b7 ${cacheKeep()?.enabled ? 'on' : 'off'}`;
+          },
+          get tone() {
+            return cacheKeep()?.enabled ? 'ok' : 'muted';
           }
         }), _$createComponent(Show, {
           get when() {
-            return prefs().sections.routing;
+            return (cacheKeep()?.trackedSessions ?? 0) > 0;
           },
           get children() {
-            return [_$createComponent(SectionHeader, {
-              get theme() {
-                return theme();
-              },
-              title: "Routing"
-            }), _$createComponent(StatRow, {
-              get theme() {
-                return theme();
-              },
-              label: "Route",
-              get value() {
-                return state().route;
-              },
-              tone: "accent"
-            }), _$createComponent(StatRow, {
+            return _$createComponent(StatRow, {
               get theme() {
                 return theme();
               },
-              label: "Mode",
+              label: "Tracked",
               get value() {
-                return state().fastMode ? 'fast' : 'std';
+                return String(cacheKeep()?.trackedSessions);
               },
-              get tone() {
-                return state().fastMode ? 'accent' : 'muted';
-              }
-            }), _$createComponent(StatRow, {
-              get theme() {
-                return theme();
-              },
-              label: "Relay",
-              get value() {
-                return relayValue();
-              },
-              get tone() {
-                return state().relay?.enabled ? 'ok' : 'muted';
-              }
-            })];
+              tone: "text"
+            });
           }
-        }), _$createComponent(Show, {
-          get when() {
-            return fableRecoverySummary();
+        })];
+      }
+    }), _$createComponent(Show, {
+      get when() {
+        return showPrime();
+      },
+      get children() {
+        return [_$createComponent(StatRow, {
+          get theme() {
+            return theme();
           },
-          children: summary => _$createComponent(StatRow, {
-            get theme() {
-              return theme();
-            },
-            label: "Recovery",
-            get value() {
-              return summary();
-            },
-            get tone() {
-              return fableRecoveryTone();
-            }
-          })
-        }), _$createComponent(Show, {
-          get when() {
-            return showCache();
+          label: "Prime",
+          get value() {
+            return primeHasError() ? 'err' : 'on';
           },
-          get children() {
-            return [_$createComponent(SectionHeader, {
+          get tone() {
+            return primeHasError() ? 'warn' : 'ok';
+          }
+        }), _$createComponent(For, {
+          get each() {
+            return prime()?.accounts ?? [];
+          },
+          children: account => {
+            const value = () => formatPrimeAccountValue(account, now());
+            return _$createComponent(StatRow, {
               get theme() {
                 return theme();
               },
-              title: "Cache"
-            }), _$createComponent(StatRow, {
-              get theme() {
-                return theme();
+              get label() {
+                return account.label;
               },
-              label: "1h cache",
               get value() {
-                return `${cacheKeep()?.window} \u00b7 ${cacheKeep()?.enabled ? 'on' : 'off'}`;
+                return value().text;
               },
               get tone() {
-                return cacheKeep()?.enabled ? 'ok' : 'muted';
+                return value().hasError ? 'warn' : 'text';
               }
-            }), _$createComponent(Show, {
-              get when() {
-                return (cacheKeep()?.trackedSessions ?? 0) > 0;
-              },
-              get children() {
-                return _$createComponent(StatRow, {
-                  get theme() {
-                    return theme();
-                  },
-                  label: "Tracked",
-                  get value() {
-                    return String(cacheKeep()?.trackedSessions);
-                  },
-                  tone: "text"
-                });
-              }
-            })];
+            });
           }
+        })];
+      }
+    }), _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!degraded())() && prefs().sections.health;
+      },
+      get children() {
+        return [_$createComponent(SectionHeader, {
+          get theme() {
+            return theme();
+          },
+          title: "Health"
         }), _$createComponent(Show, {
           get when() {
-            return showPrime();
+            return quotaBackedOff();
           },
           get children() {
-            return [_$createComponent(StatRow, {
+            return _$createComponent(StatRow, {
               get theme() {
                 return theme();
               },
-              label: "Prime",
+              label: "Quota API",
               get value() {
-                return primeHasError() ? 'err' : 'on';
+                return `backoff ${formatUntil(state().main?.quotaBackoffUntil, now())}`;
               },
-              get tone() {
-                return primeHasError() ? 'warn' : 'ok';
-              }
-            }), _$createComponent(For, {
-              get each() {
-                return prime()?.accounts ?? [];
-              },
-              children: account => {
-                const value = () => formatPrimeAccountValue(account, now());
-                return _$createComponent(StatRow, {
-                  get theme() {
-                    return theme();
-                  },
-                  get label() {
-                    return account.label;
-                  },
-                  get value() {
-                    return value().text;
-                  },
-                  get tone() {
-                    return value().hasError ? 'warn' : 'text';
-                  }
-                });
-              }
-            })];
+              tone: "warn"
+            });
           }
         }), _$createComponent(Show, {
           get when() {
-            return _$memo(() => !!degraded())() && prefs().sections.health;
+            return refreshBackedOff();
           },
           get children() {
-            return [_$createComponent(SectionHeader, {
+            return _$createComponent(StatRow, {
               get theme() {
                 return theme();
               },
-              title: "Health"
-            }), _$createComponent(Show, {
-              get when() {
-                return quotaBackedOff();
-              },
-              get children() {
-                return _$createComponent(StatRow, {
-                  get theme() {
-                    return theme();
-                  },
-                  label: "Quota API",
-                  get value() {
-                    return `backoff ${formatUntil(state().main?.quotaBackoffUntil, now())}`;
-                  },
-                  tone: "warn"
-                });
-              }
-            }), _$createComponent(Show, {
-              get when() {
-                return refreshBackedOff();
+              label: "Token refresh",
+              get value() {
+                return `backoff ${formatUntil(state().main?.refreshBackoffUntil, now())}`;
               },
-              get children() {
-                return _$createComponent(StatRow, {
-                  get theme() {
-                    return theme();
-                  },
-                  label: "Token refresh",
-                  get value() {
-                    return `backoff ${formatUntil(state().main?.refreshBackoffUntil, now())}`;
-                  },
-                  tone: "warn"
-                });
-              }
-            })];
+              tone: "warn"
+            });
           }
         })];
       }
-    }), null);
-    _$effect(_p$ => {
-      var _v$16 = theme().accent,
-        _v$17 = theme().background;
-      _v$16 !== _p$.e && (_p$.e = _$setProp(_el$35, "backgroundColor", _v$16, _p$.e));
-      _v$17 !== _p$.t && (_p$.t = _$setProp(_el$36, "fg", _v$17, _p$.t));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$33;
-  })();
+    })]
+  });
 }
 
 // --- OpenCode 2 -------------------------------------------------------------