@cortexkit/opencode-anthropic-auth 2.1.2 → 2.2.0

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

@@ -0,0 +1,1253 @@
+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 { 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 */
+
+// The CLAUDE quota sidebar, shared by the OpenCode 1 and OpenCode 2 TUIs.
+// Each host supplies the sidebar state, a flat theme token set and the
+// preference controller; this module only renders.
+
+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, formatPrimeAccountValue, formatQuotaRowLabel, getCollapsedAccounts, getCollapsedQuotaSummary, getFableRecoverySummary, resolveActiveAccount, SEVEN_DAY_MS } from "../sidebar-state.js";
+import { PLUGIN_KEY, queueTuiPreferenceUpdate, readTuiPreferencesFile, resolveAnthropicAuthPrefs, watchTuiPreferences } from "../tui-preferences.js";
+
+// Read package metadata from either the raw src/ entry or its generated
+// src/tui-compiled/tui/ 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'
+};
+
+/** The flat theme tokens the sidebar draws with; OpenCode 1's `theme.current` has them all. */
+
+// 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, now) {
+  if (!resetsAt) return '';
+  const ms = new Date(resetsAt).getTime() - 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, now) {
+  if (!until) return '';
+  const ms = until - 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, props.now);
+  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, props.now)}` : `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(Index, {
+          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.
+export 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, props.now) : null;
+  const parts = () => quotaWindowParts(quotaDisplayProjection(props.quota, props.now), {
+    now: props.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';
+          },
+          get now() {
+            return props.now;
+          }
+        }), _$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';
+          },
+          get now() {
+            return props.now;
+          }
+        }), _$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;
+            },
+            get now() {
+              return props.now;
+            }
+          })
+        }), _$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;
+  })();
+}
+// 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.
+export 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);
+
+  // OpenCode 1 keeps the watcher for the process lifetime; OpenCode 2 calls
+  // dispose when the plugin unloads. 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.
+  const dispose = 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,
+    dispose
+  };
+}
+
+/** The sidebar panel for one session; the host owns polling and the theme. */
+export function ClaudeSidebar(props) {
+  const prefs = props.controller.prefs;
+  const collapsed = props.controller.collapsed;
+  const state = props.state;
+  const theme = props.theme;
+  // Countdowns, reading ages and pacing read this clock, so they advance on
+  // each tick and state change without a new answer or rebuilt rows.
+  const [tick, setTick] = createSignal(0);
+  createEffect(() => {
+    const timer = setInterval(() => setTick(n => n + 1), prefs().pollMs);
+    onCleanup(() => clearInterval(timer));
+  });
+  const now = createMemo(() => {
+    tick();
+    state();
+    return Date.now();
+  });
+  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, now());
+  const activePacingDeficit = () => {
+    if (!prefs().sections.pacing) return false;
+    if (activeAccount().quotaDated) return null;
+    const quota = activeAccount().quota;
+    if (!quota) return false;
+    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$40 = _$createElement("box"),
+      _el$41 = _$createElement("box"),
+      _el$42 = _$createElement("box"),
+      _el$43 = _$createElement("text"),
+      _el$44 = _$createElement("b");
+    _$insertNode(_el$40, _el$41);
+    _$setProp(_el$40, "width", '100%');
+    _$setProp(_el$40, "flexDirection", 'column');
+    _$setProp(_el$40, "border", SINGLE_BORDER);
+    _$setProp(_el$40, "paddingTop", 1);
+    _$setProp(_el$40, "paddingBottom", 1);
+    _$setProp(_el$40, "paddingLeft", 1);
+    _$setProp(_el$40, "paddingRight", 1);
+    _$insertNode(_el$41, _el$42);
+    _$setProp(_el$41, "width", '100%');
+    _$setProp(_el$41, "flexDirection", 'row');
+    _$setProp(_el$41, "justifyContent", 'space-between');
+    _$setProp(_el$41, "alignItems", 'center');
+    _$setProp(_el$41, "onMouseDown", () => {
+      if (hasData()) props.controller.toggleCollapsed();
+    });
+    _$insertNode(_el$42, _el$43);
+    _$setProp(_el$42, "paddingLeft", 1);
+    _$setProp(_el$42, "paddingRight", 1);
+    _$insertNode(_el$43, _el$44);
+    _$insert(_el$44, headerLabel);
+    _$insert(_el$41, _$createComponent(Show, {
+      get when() {
+        return degraded();
+      },
+      get fallback() {
+        return _$createComponent(Show, {
+          get when() {
+            return prefs().header.showVersion && PLUGIN_VERSION !== '';
+          },
+          get children() {
+            var _el$52 = _$createElement("text");
+            _$insert(_el$52, `v${PLUGIN_VERSION}`);
+            _$effect(_$p => _$setProp(_el$52, "fg", theme().textMuted, _$p));
+            return _el$52;
+          }
+        });
+      },
+      get children() {
+        var _el$45 = _$createElement("box"),
+          _el$46 = _$createElement("text"),
+          _el$47 = _$createElement("b");
+        _$insertNode(_el$45, _el$46);
+        _$setProp(_el$45, "paddingLeft", 1);
+        _$setProp(_el$45, "paddingRight", 1);
+        _$insertNode(_el$46, _el$47);
+        _$insertNode(_el$47, _$createTextNode(`LIMITED`));
+        _$effect(_p$ => {
+          var _v$18 = theme().warning,
+            _v$19 = theme().background;
+          _v$18 !== _p$.e && (_p$.e = _$setProp(_el$45, "backgroundColor", _v$18, _p$.e));
+          _v$19 !== _p$.t && (_p$.t = _$setProp(_el$46, "fg", _v$19, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$45;
+      }
+    }), null);
+    _$insert(_el$40, _$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();
+            },
+            get now() {
+              return now();
+            }
+          })
+        }), _$createComponent(Show, {
+          get when() {
+            return state().fastMode;
+          },
+          get children() {
+            return _$createComponent(CollapsedRow, {
+              get theme() {
+                return theme();
+              },
+              label: "Mode",
+              get children() {
+                var _el$49 = _$createElement("text"),
+                  _el$50 = _$createElement("b");
+                _$insertNode(_el$49, _el$50);
+                _$insertNode(_el$50, _$createTextNode(`fast`));
+                _$effect(_$p => _$setProp(_el$49, "fg", toneColor(theme(), 'accent'), _$p));
+                return _el$49;
+              }
+            });
+          }
+        }), _$createComponent(Show, {
+          get when() {
+            return fableRecoverySummary();
+          },
+          children: summary => _$createComponent(CollapsedRow, {
+            get theme() {
+              return theme();
+            },
+            label: "Recovery",
+            get children() {
+              var _el$53 = _$createElement("text"),
+                _el$54 = _$createElement("b");
+              _$insertNode(_el$53, _el$54);
+              _$insert(_el$54, summary);
+              _$effect(_$p => _$setProp(_el$53, "fg", toneColor(theme(), fableRecoveryTone()), _$p));
+              return _el$53;
+            }
+          })
+        })];
+      }
+    }), null);
+    _$insert(_el$40, _$createComponent(Show, {
+      get when() {
+        return !collapsed() || !hasData();
+      },
+      get children() {
+        return [_$createComponent(Show, {
+          get when() {
+            return hasData();
+          },
+          get fallback() {
+            return (() => {
+              var _el$55 = _$createElement("box"),
+                _el$56 = _$createElement("text");
+              _$insertNode(_el$55, _el$56);
+              _$setProp(_el$55, "marginTop", 1);
+              _$setProp(_el$55, "width", '100%');
+              _$insertNode(_el$56, _$createTextNode(`Waiting for quota…`));
+              _$effect(_$p => _$setProp(_el$56, "fg", theme().textMuted, _$p));
+              return _el$55;
+            })();
+          },
+          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;
+                  },
+                  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 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();
+                        }
+                      })
+                    });
+                  }
+                })];
+              }
+            });
+          }
+        }), _$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, 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';
+                  }
+                });
+              }
+            })];
+          }
+        }), _$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, now())}`;
+                  },
+                  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, now())}`;
+                  },
+                  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$40, "borderColor", _v$20, _p$.e));
+      _v$21 !== _p$.t && (_p$.t = _$setProp(_el$42, "backgroundColor", _v$21, _p$.t));
+      _v$22 !== _p$.a && (_p$.a = _$setProp(_el$43, "fg", _v$22, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$40;
+  })();
+}
+
+// --- OpenCode 2 -------------------------------------------------------------
+
+/** The OpenCode 2 theme tokens the sidebar reads (`ResolvedTheme` subset). */
+
+/** OpenCode 2's semantic theme as the flat tokens OpenCode 1 provides. */
+export function sidebarThemeFromHost(theme) {
+  return {
+    text: theme.text.base,
+    textMuted: theme.text.muted,
+    success: theme.text.feedback.success.base,
+    warning: theme.text.feedback.warning.base,
+    error: theme.text.feedback.error.base,
+    accent: theme.text.action.primary.base,
+    background: theme.background.base,
+    borderActive: theme.border.base
+  };
+}
+
+/** The OpenCode 2 TUI context members the sidebar uses. */
+
+/** Reads one session's sidebar state from the location's server. */
+
+function HostSidebar(props) {
+  const [state, setState] = createSignal(DEFAULT_SIDEBAR_STATE);
+  const abort = new AbortController();
+  let inFlight = false;
+  let shown = '';
+  const refresh = async () => {
+    if (inFlight || abort.signal.aborted) return;
+    inFlight = true;
+    try {
+      const next = await props.read(props.sessionId, abort.signal);
+      // Every answer is stamped now; redraw only when its content changed.
+      // Countdowns and ages advance on the sidebar's own clock.
+      const content = JSON.stringify({
+        ...next,
+        lastUpdated: 0
+      });
+      if (!abort.signal.aborted && content !== shown) {
+        shown = content;
+        setState(next);
+      }
+    } catch {
+      // Keep the last state; an older server without `sidebar` keeps waiting.
+    } finally {
+      inFlight = false;
+    }
+  };
+  createEffect(() => {
+    const timer = setInterval(refresh, props.controller.prefs().pollMs);
+    onCleanup(() => clearInterval(timer));
+  });
+  void refresh();
+  onCleanup(() => abort.abort());
+  return _$createComponent(ClaudeSidebar, {
+    state: state,
+    theme: () => sidebarThemeFromHost(props.host.theme),
+    get controller() {
+      return props.controller;
+    },
+    get sessionId() {
+      return props.sessionId;
+    }
+  });
+}
+
+/** Claims the OpenCode 2 session sidebar; the returned function releases it. */
+export async function mountClaudeSidebar(host, read) {
+  const controller = createSidebarController(resolveAnthropicAuthPrefs(await readTuiPreferencesFile()));
+  let release;
+  try {
+    release = host.ui.slot({
+      append: 'sidebar.content',
+      render: input => _$createComponent(HostSidebar, {
+        host: host,
+        read: read,
+        controller: controller,
+        get sessionId() {
+          return input.sessionID;
+        }
+      })
+    });
+  } catch (error) {
+    controller.dispose();
+    throw error;
+  }
+  return () => {
+    release();
+    controller.dispose();
+  };
+}