@cortexkit/opencode-anthropic-auth 2.1.2 → 2.2.1

package/src/tui-compiled/tui.tsx

@@ -1,602 +1,24 @@
 import { memo as _$memo } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { effect as _$effect } from "opentui:runtime-module:%40opentui%2Fsolid";
+import { insert as _$insert } 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 { use as _$use } 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";
 import { setProp as _$setProp } from "opentui:runtime-module:%40opentui%2Fsolid";
 import { createElement as _$createElement } from "opentui:runtime-module:%40opentui%2Fsolid";
 /** @jsxImportSource @opentui/solid */
 
-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, createSignal, For, Index, onCleanup, Show } from "opentui:runtime-module:solid-js";
+import { createEffect, createSignal, For, onCleanup, Show } from "opentui:runtime-module:solid-js";
 import { createRpcClient } from "./rpc/rpc-client.js";
 import { getRpcDir } from "./rpc/rpc-dir.js";
-import { computeQuotaPacing, DEFAULT_SIDEBAR_STATE, FIVE_HOUR_MS, formatPrimeAccountValue, formatQuotaRowLabel, getCollapsedAccounts, getCollapsedQuotaSummary, getFableRecoverySummary, getSidebarState, resolveActiveAccount, SEVEN_DAY_MS } from "./sidebar-state.js";
+import { DEFAULT_SIDEBAR_STATE, getSidebarState } from "./sidebar-state.js";
+import { AccountBlock, ClaudeSidebar, createSidebarController } from "./tui/claude-sidebar.js";
 import { openCommandDialog, openNativeMenuDialog } from "./tui/command-dialogs.js";
-import { computeEffectiveOrder, DEFAULT_SLOT_ORDER, PLUGIN_KEY, queueTuiPreferenceUpdate, readTuiPreferencesFile, resolveAnthropicAuthPrefs, watchTuiPreferences } from "./tui-preferences.js";
+import { computeEffectiveOrder, DEFAULT_SLOT_ORDER, PLUGIN_KEY, readTuiPreferencesFile, resolveAnthropicAuthPrefs } from "./tui-preferences.js";
 const RPC_POLL_MS = 500;
 let rpcPollStarted = false;
 const ID = 'cortexkit.anthropic-auth';
 
-// Read package metadata from either the raw src/ entry or its generated
-// src/tui-compiled/ counterpart. Avoid a JSON import because package.json sits
-// outside the declaration build's rootDir.
-const PLUGIN_VERSION = (() => {
-  const here = dirname(fileURLToPath(import.meta.url));
-  for (const packageFile of [join(here, '..', 'package.json'), join(here, '..', '..', 'package.json')]) {
-    try {
-      const raw = readFileSync(packageFile, 'utf8');
-      const version = JSON.parse(raw).version;
-      if (version) return version;
-    } catch {
-      // Try the path for the other TUI entry layout.
-    }
-  }
-  return '';
-})();
-
-// biome-ignore lint/suspicious/noExplicitAny: opentui border prop not typed in plugin tui surface
-const SINGLE_BORDER = {
-  type: 'single'
-};
-// Tone -> theme token. Theme tokens only — never hardcoded colors. Fallbacks
-// resolve to other theme tokens so the sidebar always tracks the active theme.
-function toneColor(theme, tone) {
-  switch (tone) {
-    case 'ok':
-      return theme.success ?? theme.accent;
-    case 'warn':
-      return theme.warning ?? theme.accent;
-    case 'err':
-      return theme.error ?? theme.accent;
-    case 'muted':
-      return theme.textMuted ?? theme.text;
-    case 'accent':
-      return theme.accent ?? theme.text;
-    default:
-      return theme.text;
-  }
-}
-function usageTone(usedPct, appearance) {
-  if (usedPct < appearance.warnThreshold) return 'ok';
-  if (usedPct < appearance.errorThreshold) return 'warn';
-  return 'err';
-}
-const PACE_RESERVE_CHAR = '\u2592';
-const PACE_DEFICIT_CHAR = '\u2593';
-
-// Variant C pacing bar: normal fill up to min(used, pace), then a pace
-// segment covering the gap — headroom being banked (reserve, ok tone) or the
-// overshoot itself (deficit, err tone) — then empty cells. Without pacing the
-// 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;
-  const cells = pct => Math.max(0, Math.min(Math.round(pct / 100 * width), width));
-  const usedCells = cells(usedPct);
-  const fillTone = usageTone(usedPct, appearance);
-  const plain = [{
-    text: appearance.barFilledChar.repeat(usedCells),
-    tone: fillTone
-  }, {
-    text: appearance.barEmptyChar.repeat(width - usedCells),
-    tone: fillTone
-  }];
-  if (!pacing) return plain.filter(segment => segment.text.length > 0);
-  const paceCells = cells(pacing.pacePercent);
-  const lo = Math.min(usedCells, paceCells);
-  const hi = Math.max(usedCells, paceCells);
-  if (hi === lo) return plain.filter(segment => segment.text.length > 0);
-  const overspent = usedCells > paceCells;
-  return [{
-    text: appearance.barFilledChar.repeat(lo),
-    tone: fillTone
-  }, {
-    text: (overspent ? PACE_DEFICIT_CHAR : PACE_RESERVE_CHAR).repeat(hi - lo),
-    tone: overspent ? 'err' : 'ok'
-  }, {
-    text: appearance.barEmptyChar.repeat(width - hi),
-    tone: fillTone
-  }].filter(segment => segment.text.length > 0);
-}
-function formatResetIn(resetsAt) {
-  if (!resetsAt) return '';
-  const ms = new Date(resetsAt).getTime() - Date.now();
-  if (ms <= 0) return 'now';
-  const mins = Math.floor(ms / 60_000);
-  if (mins < 60) return `${mins}m`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) {
-    const rm = mins % 60;
-    return rm > 0 ? `${hrs}h${rm}m` : `${hrs}h`;
-  }
-  const days = Math.floor(hrs / 24);
-  const rh = hrs % 24;
-  return rh > 0 ? `${days}d${rh}h` : `${days}d`;
-}
-function formatUntil(until) {
-  if (!until) return '';
-  const ms = until - Date.now();
-  if (ms <= 0) return 'now';
-  const mins = Math.ceil(ms / 60_000);
-  if (mins < 60) return `${mins}m`;
-  const hrs = Math.floor(mins / 60);
-  const rm = mins % 60;
-  return rm > 0 ? `${hrs}h${rm}m` : `${hrs}h`;
-}
-
-// --- Reusable components (aft-style) ---------------------------------------
-
-function SectionHeader(props) {
-  return (() => {
-    var _el$ = _$createElement("box"),
-      _el$2 = _$createElement("text"),
-      _el$3 = _$createElement("b");
-    _$insertNode(_el$, _el$2);
-    _$setProp(_el$, "width", '100%');
-    _$insertNode(_el$2, _el$3);
-    _$insert(_el$3, () => props.title);
-    _$effect(_p$ => {
-      var _v$ = props.marginTop ?? 1,
-        _v$2 = props.theme.text;
-      _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "marginTop", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$2, "fg", _v$2, _p$.t));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$;
-  })();
-}
-function StatRow(props) {
-  return (() => {
-    var _el$4 = _$createElement("box"),
-      _el$5 = _$createElement("text"),
-      _el$6 = _$createElement("text"),
-      _el$7 = _$createElement("b");
-    _$insertNode(_el$4, _el$5);
-    _$insertNode(_el$4, _el$6);
-    _$setProp(_el$4, "width", '100%');
-    _$setProp(_el$4, "flexDirection", 'row');
-    _$setProp(_el$4, "justifyContent", 'space-between');
-    _$insert(_el$5, () => props.label);
-    _$insertNode(_el$6, _el$7);
-    _$insert(_el$7, () => props.value);
-    _$effect(_p$ => {
-      var _v$3 = props.theme.textMuted,
-        _v$4 = toneColor(props.theme, props.tone ?? 'text');
-      _v$3 !== _p$.e && (_p$.e = _$setProp(_el$5, "fg", _v$3, _p$.e));
-      _v$4 !== _p$.t && (_p$.t = _$setProp(_el$6, "fg", _v$4, _p$.t));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$4;
-  })();
-}
-
-// Compact row for the collapsed view: muted label left, caller-provided value
-// right. Mirrors StatRow's layout so columns line up.
-function CollapsedRow(props) {
-  return (() => {
-    var _el$8 = _$createElement("box"),
-      _el$9 = _$createElement("text");
-    _$insertNode(_el$8, _el$9);
-    _$setProp(_el$8, "width", '100%');
-    _$setProp(_el$8, "flexDirection", 'row');
-    _$setProp(_el$8, "justifyContent", 'space-between');
-    _$insert(_el$9, () => props.label);
-    _$insert(_el$8, () => props.children, null);
-    _$effect(_$p => _$setProp(_el$9, "fg", props.theme.textMuted, _$p));
-    return _el$8;
-  })();
-}
-function CollapsedAccountRow(props) {
-  const [width, setWidth] = createSignal(40);
-  let row;
-  const summary = () => getCollapsedQuotaSummary(props.account.quota);
-  const value = () => summary().text ?? '—';
-  const labelWidth = () => Math.max(0, width() - Bun.stringWidth(value()) - 1);
-  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");
-    _$insertNode(_el$0, _el$12);
-    _$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);
-    _$effect(_p$ => {
-      var _v$8 = Bun.stringWidth(value()),
-        _v$9 = color(),
-        _v$0 = 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));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    return _el$0;
-  })();
-}
-
-// 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.
-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)}` : `deficit ${pct}% \u00b7 lasts`;
-  };
-  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;
-      })();
-    },
-    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');
-        _$insertNode(_el$14, _el$15);
-        _$insertNode(_el$14, _el$16);
-        _$setProp(_el$14, "flexDirection", 'row');
-        _$insert(_el$15, () => `${formatQuotaRowLabel(props.label)} `);
-        _$insert(_el$14, _$createComponent(For, {
-          get each() {
-            return quotaBarSegments(used(), props.appearance, props.pacing);
-          },
-          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();
-          },
-          get children() {
-            var _el$17 = _$createElement("text");
-            _$insert(_el$17, reset);
-            _$effect(_$p => _$setProp(_el$17, "fg", props.theme.textMuted, _$p));
-            return _el$17;
-          }
-        }), 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;
-      })(), _$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;
-        }
-      })];
-    }
-  });
-}
-
-// The shared credit figure followed by the spent and limit amounts:
-// `credits 75% left · $25.00/$100.00`. When that line is wider than the
-// measured width, the amounts drop their cents (`$1,250/$5,000`) instead of
-// wrapping onto a second line.
-function creditLine(figure, extraUsage, width) {
-  const amounts = formatCreditAmounts(extraUsage);
-  if (!amounts) return figure;
-  const line = `${figure} · ${amounts}`;
-  if (width === undefined || Bun.stringWidth(line) <= width) return line;
-  return `${figure} · ${formatCreditAmounts(extraUsage, {
-    wholeUnits: true
-  })}`;
-}
-
-// Account block: header row (name + status word) then per-window quota rows.
-// Pacing is computed here — per window, against the wall clock at render time
-// (re-evaluated on every state poll) — and disabled by passing false.
-function AccountBlock(props) {
-  const statusWord = () => props.quotaDated && props.quota ? 'dated' : props.needsReauth ? 're-login' : props.vaultReauth ? 'needs sign-in in the vault' : props.active ? 'active' : 'idle';
-  const statusTone = () => props.needsReauth || props.vaultReauth || props.stateLine ? 'warn' : props.active ? 'ok' : 'muted';
-  const pacingFor = (window, windowMs) => props.pacingEnabled && !props.quotaDated && window ? computeQuotaPacing(window, windowMs, Date.now()) : null;
-  const parts = () => {
-    const now = Date.now();
-    return quotaWindowParts(quotaDisplayProjection(props.quota, now), {
-      now
-    });
-  };
-  const partFor = name => parts().windows.find(part => part.name === name);
-  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, {
-      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;
-      }
-    }), null);
-    _$insert(_el$26, _$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;
-        })();
-      },
-      get children() {
-        return [_$createComponent(QuotaRow, {
-          get theme() {
-            return props.theme;
-          },
-          get appearance() {
-            return props.appearance;
-          },
-          label: "5h",
-          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';
-          }
-        }), _$createComponent(QuotaRow, {
-          get theme() {
-            return props.theme;
-          },
-          get appearance() {
-            return props.appearance;
-          },
-          label: "7d",
-          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(For, {
-          get each() {
-            return props.quota?.scoped ?? [];
-          },
-          children: window => _$createComponent(QuotaRow, {
-            get theme() {
-              return props.theme;
-            },
-            get appearance() {
-              return props.appearance;
-            },
-            get label() {
-              return partFor(window.title)?.name ?? window.title;
-            },
-            get part() {
-              return partFor(window.title);
-            },
-            get usedPercent() {
-              return window.usedPercent;
-            },
-            get pacing() {
-              return pacingFor(window, SEVEN_DAY_MS);
-            },
-            get binding() {
-              return props.quota?.bindingWindow === window.id;
-            }
-          })
-        }), _$createComponent(Show, {
-          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;
-            })();
-          }
-        }), _$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;
-          }
-        }), _$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;
-          }
-        })];
-      }
-    }), 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));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    return _el$26;
-  })();
-}
-
 // --- Quota dialog content ---------------------------------------------------
 
 // Renders the same rich visualization as the sidebar (account blocks with
@@ -620,26 +42,26 @@ function QuotaDialogContent(props) {
   const theme = () => props.api.theme.current;
   const enabledFallbacks = () => (state().fallbacks ?? []).filter(f => f.enabled || f.custodyState && f.custodyState !== '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, "flexDirection", 'column');
-    _$setProp(_el$40, "padding", 2);
-    _$setProp(_el$40, "width", '100%');
-    _$setProp(_el$40, "alignItems", 'center');
-    _$insertNode(_el$41, _el$42);
-    _$setProp(_el$41, "flexDirection", 'column');
-    _$setProp(_el$41, "width", 58);
-    _$insertNode(_el$42, _el$43);
-    _$setProp(_el$42, "width", '100%');
-    _$setProp(_el$42, "justifyContent", 'center');
-    _$setProp(_el$42, "marginBottom", 1);
-    _$insertNode(_el$43, _el$44);
-    _$insertNode(_el$44, _$createTextNode(`Quota`));
-    _$insert(_el$41, _$createComponent(AccountBlock, {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("box"),
+      _el$3 = _$createElement("box"),
+      _el$4 = _$createElement("text"),
+      _el$5 = _$createElement("b");
+    _$insertNode(_el$, _el$2);
+    _$setProp(_el$, "flexDirection", 'column');
+    _$setProp(_el$, "padding", 2);
+    _$setProp(_el$, "width", '100%');
+    _$setProp(_el$, "alignItems", 'center');
+    _$insertNode(_el$2, _el$3);
+    _$setProp(_el$2, "flexDirection", 'column');
+    _$setProp(_el$2, "width", 58);
+    _$insertNode(_el$3, _el$4);
+    _$setProp(_el$3, "width", '100%');
+    _$setProp(_el$3, "justifyContent", 'center');
+    _$setProp(_el$3, "marginBottom", 1);
+    _$insertNode(_el$4, _el$5);
+    _$insertNode(_el$5, _$createTextNode(`Quota`));
+    _$insert(_el$2, _$createComponent(AccountBlock, {
       get theme() {
         return theme();
       },
@@ -664,9 +86,12 @@ function QuotaDialogContent(props) {
       },
       get quotaDated() {
         return state().main?.quotaDated;
+      },
+      get now() {
+        return Date.now();
       }
     }), null);
-    _$insert(_el$41, _$createComponent(Show, {
+    _$insert(_el$2, _$createComponent(Show, {
       get when() {
         return prefs().sections.fallbackAccounts;
       },
@@ -709,13 +134,16 @@ function QuotaDialogContent(props) {
             get quotaDated() {
               return fb.quotaDated;
             },
-            marginTop: 1
+            marginTop: 1,
+            get now() {
+              return Date.now();
+            }
           })
         });
       }
     }), null);
-    _$effect(_$p => _$setProp(_el$43, "fg", theme().text, _$p));
-    return _el$40;
+    _$effect(_$p => _$setProp(_el$4, "fg", theme().text, _$p));
+    return _el$;
   })();
 }
 
@@ -724,57 +152,8 @@ function QuotaDialogContent(props) {
 async function readStateFromFile() {
   return getSidebarState();
 }
-// The TUI may unmount and remount sidebar_content when the user switches
-// views (e.g. main -> subagent -> main). A remount re-runs the component
-// body, so any signal created inside the component would reset to its
-// seed. The controller lives in the plugin closure (process lifetime)
-// and owns the durable prefs/collapse signals plus the single shared
-// watcher subscription, so collapse and live pref reloads survive the
-// remount. No effects or memos here — those need a Solid owner, so the
-// poll-interval createEffect stays inside the component.
-function createSidebarController(initialPrefs) {
-  const [prefs, setPrefs] = createSignal(initialPrefs);
-  const seedCollapsed = initialPrefs.rememberCollapsed && initialPrefs.collapsed != null ? initialPrefs.collapsed : initialPrefs.startCollapsed;
-  const [collapsed, setCollapsed] = createSignal(seedCollapsed);
-  let lastPersistedCollapsed = initialPrefs.collapsed;
-  let lastApplied = JSON.stringify(initialPrefs);
-
-  // The watcher lives for the plugin/process lifetime — it is intentionally
-  // never disposed. Collapse guard mirrors the race-fix in toggleCollapsed:
-  // lastPersistedCollapsed is advanced only once our own write lands, so
-  // watcher echoes of the previous persisted value are rejected by the
-  // `!==` check and cannot revert a user click.
-  watchTuiPreferences(() => {
-    void (async () => {
-      const next = resolveAnthropicAuthPrefs(await readTuiPreferencesFile());
-      const serialized = JSON.stringify(next);
-      if (serialized === lastApplied) return;
-      lastApplied = serialized;
-      setPrefs(next);
-      if (next.rememberCollapsed && next.collapsed != null && next.collapsed !== lastPersistedCollapsed) {
-        lastPersistedCollapsed = next.collapsed;
-        setCollapsed(next.collapsed);
-      }
-    })();
-  });
-  function toggleCollapsed() {
-    const next = !collapsed();
-    setCollapsed(next);
-    if (prefs().rememberCollapsed) {
-      void queueTuiPreferenceUpdate(PLUGIN_KEY, ['collapsed'], next).then(() => {
-        lastPersistedCollapsed = next;
-      });
-    }
-  }
-  return {
-    prefs,
-    collapsed,
-    toggleCollapsed
-  };
-}
 function QuotaSidebar(props) {
   const prefs = props.controller.prefs;
-  const collapsed = props.controller.collapsed;
   const [state, setState] = createSignal(DEFAULT_SIDEBAR_STATE);
   let lastUpdated = 0;
   let debounce = null;
@@ -806,486 +185,16 @@ function QuotaSidebar(props) {
     if (debounce) clearTimeout(debounce);
     for (const u of unsubs) u();
   });
-  const theme = () => props.api.theme.current;
-  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;
-  const headerLabel = () => {
-    const name = prefs().header.label;
-    return !hasData() ? name : collapsed() ? `\u25b6 ${name}` : `\u25bc ${name}`;
-  };
-  const activeAccount = () => resolveActiveAccount(state());
-  const activeQuotaSummary = () => getCollapsedQuotaSummary(activeAccount().quota);
-  const activePacingDeficit = () => {
-    if (!prefs().sections.pacing) return false;
-    if (activeAccount().quotaDated) return null;
-    const quota = activeAccount().quota;
-    if (!quota) return false;
-    const now = Date.now();
-    const windows = [[quota.five_hour, FIVE_HOUR_MS], [quota.seven_day, SEVEN_DAY_MS], ...(quota.scoped ?? []).map(window => [window, SEVEN_DAY_MS])];
-    return windows.some(([w, ms]) => w != null && computeQuotaPacing(w, ms, now)?.state === 'deficit');
-  };
-  const activeQuotaTone = () => {
-    const summary = activeQuotaSummary();
-    const values = [summary.fiveHourUsedPercent, summary.sevenDayUsedPercent, ...summary.scopedUsedPercents].filter(value => value != null);
-    // Pacing deficit is an advisory projection, not actual quota exhaustion,
-    // so it can only BUMP the usage tone up to warn at most — never soften a
-    // real warn/err usage reading and never paint a true red.
-    const base = values.length > 0 ? usageTone(Math.max(...values), prefs().appearance) : 'muted';
-    if (!activePacingDeficit()) return base;
-    return base === 'ok' || base === 'muted' ? 'warn' : base;
-  };
-  const quotaBackedOff = () => state().main?.quotaBackedOff === true;
-  const refreshBackedOff = () => state().main?.refreshBackedOff === true;
-  const needsReauth = () => enabledFallbacks().some(f => f.needsReauth);
-  const vaultReauth = () => enabledFallbacks().some(f => f.vaultReauth);
-  const degraded = () => quotaBackedOff() || refreshBackedOff() || needsReauth() || vaultReauth();
-  const fableRecoverySummary = () => getFableRecoverySummary(state(), props.sessionId);
-  const fableRecoveryTone = () => state().fableRecoveries?.find(recovery => recovery.sessionId === props.sessionId)?.mode === 'fable' ? 'ok' : 'warn';
-  const cacheKeep = () => state().cacheKeep;
-  const showCache = () => prefs().sections.cache && cacheKeep() != null && cacheKeep()?.window != null;
-  const prime = () => state().prime;
-  const showPrime = () => prime() != null;
-  const primeHasError = () => prime()?.accounts.some(account => account.lastResult === 'error') ?? false;
-  const relayValue = () => {
-    const r = state().relay;
-    if (!r) return '\u2014';
-    return `${r.transport} \u00b7 ${r.enabled ? 'on' : 'off'}`;
-  };
-  return (() => {
-    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$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();
-      },
-      get fallback() {
-        return _$createComponent(Show, {
-          get when() {
-            return prefs().header.showVersion && PLUGIN_VERSION !== '';
-          },
-          get children() {
-            var _el$58 = _$createElement("text");
-            _$insert(_el$58, `v${PLUGIN_VERSION}`);
-            _$effect(_$p => _$setProp(_el$58, "fg", theme().textMuted, _$p));
-            return _el$58;
-          }
-        });
-      },
-      get children() {
-        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$18 = theme().warning,
-            _v$19 = theme().background;
-          _v$18 !== _p$.e && (_p$.e = _$setProp(_el$51, "backgroundColor", _v$18, _p$.e));
-          _v$19 !== _p$.t && (_p$.t = _$setProp(_el$52, "fg", _v$19, _p$.t));
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        return _el$51;
-      }
-    }), null);
-    _$insert(_el$46, _$createComponent(Show, {
-      get when() {
-        return _$memo(() => !!collapsed())() && hasData();
-      },
-      get children() {
-        return [_$createComponent(Index, {
-          get each() {
-            return getCollapsedAccounts(state(), prefs().sections.fallbackAccounts);
-          },
-          children: account => _$createComponent(CollapsedAccountRow, {
-            get theme() {
-              return theme();
-            },
-            get account() {
-              return account();
-            },
-            get tone() {
-              return activeQuotaTone();
-            }
-          })
-        }), _$createComponent(Show, {
-          get when() {
-            return state().fastMode;
-          },
-          get children() {
-            return _$createComponent(CollapsedRow, {
-              get theme() {
-                return theme();
-              },
-              label: "Mode",
-              get children() {
-                var _el$55 = _$createElement("text"),
-                  _el$56 = _$createElement("b");
-                _$insertNode(_el$55, _el$56);
-                _$insertNode(_el$56, _$createTextNode(`fast`));
-                _$effect(_$p => _$setProp(_el$55, "fg", toneColor(theme(), 'accent'), _$p));
-                return _el$55;
-              }
-            });
-          }
-        }), _$createComponent(Show, {
-          get when() {
-            return fableRecoverySummary();
-          },
-          children: summary => _$createComponent(CollapsedRow, {
-            get theme() {
-              return theme();
-            },
-            label: "Recovery",
-            get children() {
-              var _el$59 = _$createElement("text"),
-                _el$60 = _$createElement("b");
-              _$insertNode(_el$59, _el$60);
-              _$insert(_el$60, summary);
-              _$effect(_$p => _$setProp(_el$59, "fg", toneColor(theme(), fableRecoveryTone()), _$p));
-              return _el$59;
-            }
-          })
-        })];
-      }
-    }), null);
-    _$insert(_el$46, _$createComponent(Show, {
-      get when() {
-        return !collapsed() || !hasData();
-      },
-      get children() {
-        return [_$createComponent(Show, {
-          get when() {
-            return hasData();
-          },
-          get fallback() {
-            return (() => {
-              var _el$61 = _$createElement("box"),
-                _el$62 = _$createElement("text");
-              _$insertNode(_el$61, _el$62);
-              _$setProp(_el$61, "marginTop", 1);
-              _$setProp(_el$61, "width", '100%');
-              _$insertNode(_el$62, _$createTextNode(`Waiting for quota…`));
-              _$effect(_$p => _$setProp(_el$62, "fg", theme().textMuted, _$p));
-              return _el$61;
-            })();
-          },
-          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 stateLine() {
-                    return state().main?.stateLine;
-                  },
-                  get quotaDated() {
-                    return state().main?.quotaDated;
-                  }
-                }), _$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 needsReauth() {
-                          return fb.needsReauth;
-                        },
-                        get vaultReauth() {
-                          return fb.vaultReauth;
-                        },
-                        get stateLine() {
-                          return fb.stateLine;
-                        },
-                        get quotaDated() {
-                          return fb.quotaDated;
-                        },
-                        marginTop: 1
-                      })
-                    });
-                  }
-                })];
-              }
-            });
-          }
-        }), _$createComponent(Show, {
-          get when() {
-            return prefs().sections.routing;
-          },
-          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, {
-              get theme() {
-                return theme();
-              },
-              label: "Mode",
-              get value() {
-                return state().fastMode ? 'fast' : 'std';
-              },
-              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';
-              }
-            })];
-          }
-        }), _$createComponent(Show, {
-          get when() {
-            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(SectionHeader, {
-              get theme() {
-                return theme();
-              },
-              title: "Cache"
-            }), _$createComponent(StatRow, {
-              get theme() {
-                return theme();
-              },
-              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 (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 showPrime();
-          },
-          get children() {
-            return [_$createComponent(StatRow, {
-              get theme() {
-                return theme();
-              },
-              label: "Prime",
-              get value() {
-                return primeHasError() ? 'err' : 'on';
-              },
-              get tone() {
-                return primeHasError() ? 'warn' : 'ok';
-              }
-            }), _$createComponent(For, {
-              get each() {
-                return prime()?.accounts ?? [];
-              },
-              children: account => {
-                const value = () => formatPrimeAccountValue(account);
-                return _$createComponent(StatRow, {
-                  get theme() {
-                    return theme();
-                  },
-                  get label() {
-                    return account.label;
-                  },
-                  get value() {
-                    return value().text;
-                  },
-                  get tone() {
-                    return value().hasError ? 'warn' : '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 quotaBackedOff();
-              },
-              get children() {
-                return _$createComponent(StatRow, {
-                  get theme() {
-                    return theme();
-                  },
-                  label: "Quota API",
-                  get value() {
-                    return `backoff ${formatUntil(state().main?.quotaBackoffUntil)}`;
-                  },
-                  tone: "warn"
-                });
-              }
-            }), _$createComponent(Show, {
-              get when() {
-                return refreshBackedOff();
-              },
-              get children() {
-                return _$createComponent(StatRow, {
-                  get theme() {
-                    return theme();
-                  },
-                  label: "Token refresh",
-                  get value() {
-                    return `backoff ${formatUntil(state().main?.refreshBackoffUntil)}`;
-                  },
-                  tone: "warn"
-                });
-              }
-            })];
-          }
-        })];
-      }
-    }), null);
-    _$effect(_p$ => {
-      var _v$20 = theme().borderActive,
-        _v$21 = theme().accent,
-        _v$22 = theme().background;
-      _v$20 !== _p$.e && (_p$.e = _$setProp(_el$46, "borderColor", _v$20, _p$.e));
-      _v$21 !== _p$.t && (_p$.t = _$setProp(_el$48, "backgroundColor", _v$21, _p$.t));
-      _v$22 !== _p$.a && (_p$.a = _$setProp(_el$49, "fg", _v$22, _p$.a));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    return _el$46;
-  })();
+  return _$createComponent(ClaudeSidebar, {
+    state: state,
+    theme: () => props.api.theme.current,
+    get controller() {
+      return props.controller;
+    },
+    get sessionId() {
+      return props.sessionId;
+    }
+  });
 }
 const tui = async api => {
   const root = await readTuiPreferencesFile();