@cortexkit/opencode-anthropic-auth 2.1.2 → 2.2.1

package/src/tui.tsx

@@ -1,61 +1,34 @@
 /** @jsxImportSource @opentui/solid */
 
-import { readFileSync } from 'node:fs'
-import { dirname, join } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import {
-  formatCreditAmounts,
-  type QuotaWindowPart,
-  quotaDisplayProjection,
-  quotaWindowParts,
-} from '@cortexkit/anthropic-auth-core'
 import type {
   TuiPlugin,
   TuiPluginApi,
   TuiPluginModule,
 } from '@opencode-ai/plugin/tui'
-import { type BoxRenderable, TextAttributes } from '@opentui/core'
-import {
-  createEffect,
-  createSignal,
-  For,
-  Index,
-  type JSX,
-  onCleanup,
-  Show,
-} from 'solid-js'
+import { createEffect, createSignal, For, onCleanup, Show } from 'solid-js'
 import { createRpcClient } from './rpc/rpc-client.js'
 import { getRpcDir } from './rpc/rpc-dir.js'
 import {
-  type AccountQuota,
-  computeQuotaPacing,
   DEFAULT_SIDEBAR_STATE,
-  FIVE_HOUR_MS,
-  formatPrimeAccountValue,
-  formatQuotaRowLabel,
-  getCollapsedAccounts,
-  getCollapsedQuotaSummary,
-  getFableRecoverySummary,
   getSidebarState,
-  type QuotaPacing,
-  resolveActiveAccount,
-  SEVEN_DAY_MS,
   type SidebarState,
 } from './sidebar-state.js'
+import {
+  AccountBlock,
+  ClaudeSidebar,
+  createSidebarController,
+  type SidebarController,
+} from './tui/claude-sidebar.js'
 import {
   openCommandDialog,
   openNativeMenuDialog,
 } from './tui/command-dialogs.js'
 import {
-  type AnthropicAuthTuiPrefs,
-  type AppearancePrefs,
   computeEffectiveOrder,
   DEFAULT_SLOT_ORDER,
   PLUGIN_KEY,
-  queueTuiPreferenceUpdate,
   readTuiPreferencesFile,
   resolveAnthropicAuthPrefs,
-  watchTuiPreferences,
 } from './tui-preferences.js'
 
 const RPC_POLL_MS = 500
@@ -63,473 +36,6 @@ 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: string = (() => {
-  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) as { version?: string }).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' } as any
-
-type Tone = 'ok' | 'warn' | 'err' | 'muted' | 'accent' | 'text'
-type ThemeCurrent = TuiPluginApi['theme']['current']
-type ThemeColor = ThemeCurrent['text']
-
-// 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: ThemeCurrent, tone: Tone): ThemeColor {
-  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: number, appearance: AppearancePrefs): Tone {
-  if (usedPct < appearance.warnThreshold) return 'ok'
-  if (usedPct < appearance.errorThreshold) return 'warn'
-  return 'err'
-}
-
-interface BarSegment {
-  text: string
-  tone: Tone
-}
-
-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: number,
-  appearance: AppearancePrefs,
-  pacing: QuotaPacing | null,
-): BarSegment[] {
-  const width = appearance.barWidth
-  const cells = (pct: number) =>
-    Math.max(0, Math.min(Math.round((pct / 100) * width), width))
-  const usedCells = cells(usedPct)
-  const fillTone = usageTone(usedPct, appearance)
-  const plain: BarSegment[] = [
-    { 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 },
-    ] as BarSegment[]
-  ).filter((segment) => segment.text.length > 0)
-}
-
-function formatResetIn(resetsAt: string | undefined): string {
-  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: number | undefined): string {
-  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: {
-  theme: ThemeCurrent
-  title: string
-  marginTop?: number
-}) {
-  return (
-    <box width='100%' marginTop={props.marginTop ?? 1}>
-      <text fg={props.theme.text}>
-        <b>{props.title}</b>
-      </text>
-    </box>
-  )
-}
-
-function StatRow(props: {
-  theme: ThemeCurrent
-  label: string
-  value: string
-  tone?: Tone
-}) {
-  return (
-    <box width='100%' flexDirection='row' justifyContent='space-between'>
-      <text fg={props.theme.textMuted}>{props.label}</text>
-      <text fg={toneColor(props.theme, props.tone ?? 'text')}>
-        <b>{props.value}</b>
-      </text>
-    </box>
-  )
-}
-
-// Compact row for the collapsed view: muted label left, caller-provided value
-// right. Mirrors StatRow's layout so columns line up.
-function CollapsedRow(props: {
-  theme: ThemeCurrent
-  label: string
-  children: JSX.Element
-}) {
-  return (
-    <box width='100%' flexDirection='row' justifyContent='space-between'>
-      <text fg={props.theme.textMuted}>{props.label}</text>
-      {props.children}
-    </box>
-  )
-}
-
-function CollapsedAccountRow(props: {
-  theme: ThemeCurrent
-  account: ReturnType<typeof getCollapsedAccounts>[number]
-  tone: Tone
-}) {
-  const [width, setWidth] = createSignal(40)
-  let row: BoxRenderable | undefined
-  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 (
-    <box
-      width='100%'
-      height={1}
-      flexDirection='row'
-      ref={(element: BoxRenderable) => {
-        row = element
-        setWidth(element.width || 40)
-      }}
-      onSizeChange={() => setWidth(row?.width || 40)}
-    >
-      <Show when={labelWidth() > 0}>
-        <text
-          width={labelWidth()}
-          flexShrink={0}
-          wrapMode='none'
-          fg={color()}
-          attributes={attributes()}
-        >
-          {formatQuotaRowLabel(props.account.name, labelWidth())}
-        </text>
-        <text width={1} flexShrink={0}>
-          {' '}
-        </text>
-      </Show>
-      <text
-        width={Bun.stringWidth(value())}
-        flexShrink={0}
-        wrapMode='none'
-        fg={color()}
-        attributes={attributes()}
-      >
-        {value()}
-      </text>
-    </box>
-  )
-}
-
-// 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: {
-  theme: ThemeCurrent
-  appearance: AppearancePrefs
-  label: string
-  part: QuotaWindowPart | undefined
-  usedPercent: number | undefined
-  pacing: QuotaPacing | null
-  binding?: boolean
-}) {
-  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 (
-    <Show
-      when={props.part}
-      fallback={
-        <box width='100%' flexDirection='row'>
-          <text
-            fg={props.theme.textMuted}
-          >{`${formatQuotaRowLabel(props.label)} `}</text>
-          <text fg={props.theme.textMuted}>{'\u2014'}</text>
-        </box>
-      }
-    >
-      {/* Left group (label · bar · figure) stays left-aligned in fixed columns so
-          bars and figures line up across rows; the reset time is pushed to
-          the right edge so reset times align in their own right column. */}
-      <box width='100%' flexDirection='row' justifyContent='space-between'>
-        <box flexDirection='row'>
-          <text
-            fg={props.theme.textMuted}
-          >{`${formatQuotaRowLabel(props.label)} `}</text>
-          <For each={quotaBarSegments(used(), props.appearance, props.pacing)}>
-            {(segment) => (
-              <text fg={toneColor(props.theme, segment.tone)}>
-                {segment.text}
-              </text>
-            )}
-          </For>
-          <text
-            fg={toneColor(props.theme, usageTone(used(), props.appearance))}
-          >
-            {` ${props.part?.figure}${props.binding ? ' •' : ''}`}
-          </text>
-        </box>
-        <Show when={reset()}>
-          <text fg={props.theme.textMuted}>{reset()}</text>
-        </Show>
-      </box>
-      <Show when={paceLine()}>
-        <box width='100%' flexDirection='row'>
-          <text fg={props.theme.textMuted}>{formatQuotaRowLabel('', 11)}</text>
-          <text
-            fg={toneColor(
-              props.theme,
-              props.pacing?.state === 'deficit' ? 'warn' : 'muted',
-            )}
-          >
-            {paceLine()}
-          </text>
-        </box>
-      </Show>
-    </Show>
-  )
-}
-
-// 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: string,
-  extraUsage: AccountQuota['extraUsage'],
-  width: number | undefined,
-) {
-  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: {
-  theme: ThemeCurrent
-  appearance: AppearancePrefs
-  name: string
-  quota: AccountQuota | null
-  active: boolean
-  pacingEnabled: boolean
-  needsReauth?: boolean
-  vaultReauth?: boolean
-  stateLine?: string
-  quotaDated?: boolean
-  tierLabel?: string
-  marginTop?: number
-}) {
-  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 = (): Tone =>
-    props.needsReauth || props.vaultReauth || props.stateLine
-      ? 'warn'
-      : props.active
-        ? 'ok'
-        : 'muted'
-  const pacingFor = (
-    window:
-      | { usedPercent: number; remainingPercent: number; resetsAt?: string }
-      | undefined,
-    windowMs: number,
-  ) =>
-    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: string) =>
-    parts().windows.find((part) => part.name === name)
-  return (
-    <box width='100%' flexDirection='column' marginTop={props.marginTop ?? 0}>
-      <box width='100%' flexDirection='row' justifyContent='space-between'>
-        <text fg={props.theme.text}>
-          <b>{`${props.name}${props.tierLabel ? ` · ${props.tierLabel}` : ''}`}</b>
-        </text>
-        <text fg={toneColor(props.theme, statusTone())}>
-          <b>{statusWord()}</b>
-        </text>
-      </box>
-      <Show when={props.stateLine}>
-        <text fg={props.theme.textMuted}>{props.stateLine}</text>
-      </Show>
-      <Show
-        when={props.quota}
-        fallback={<text fg={props.theme.textMuted}>{'checking\u2026'}</text>}
-      >
-        <QuotaRow
-          theme={props.theme}
-          appearance={props.appearance}
-          label='5h'
-          part={partFor('5h')}
-          usedPercent={props.quota?.five_hour?.usedPercent}
-          pacing={pacingFor(props.quota?.five_hour, FIVE_HOUR_MS)}
-          binding={props.quota?.bindingWindow === 'five_hour'}
-        />
-        <QuotaRow
-          theme={props.theme}
-          appearance={props.appearance}
-          label='7d'
-          part={partFor('7d')}
-          usedPercent={props.quota?.seven_day?.usedPercent}
-          pacing={pacingFor(props.quota?.seven_day, SEVEN_DAY_MS)}
-          binding={props.quota?.bindingWindow === 'seven_day'}
-        />
-        <For each={props.quota?.scoped ?? []}>
-          {(window) => (
-            <QuotaRow
-              theme={props.theme}
-              appearance={props.appearance}
-              label={partFor(window.title)?.name ?? window.title}
-              part={partFor(window.title)}
-              usedPercent={window.usedPercent}
-              pacing={pacingFor(window, SEVEN_DAY_MS)}
-              binding={props.quota?.bindingWindow === window.id}
-            />
-          )}
-        </For>
-        <Show when={partFor('credits')}>
-          {(budget: () => QuotaWindowPart) => {
-            // 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<number>()
-            let line: BoxRenderable | undefined
-            return (
-              <box
-                width='100%'
-                ref={(element: BoxRenderable) => {
-                  line = element
-                  setWidth(element.width || undefined)
-                }}
-                onSizeChange={() => setWidth(line?.width || undefined)}
-              >
-                <text
-                  fg={toneColor(
-                    props.theme,
-                    props.quota?.extraUsage?.severity === 'critical'
-                      ? 'err'
-                      : props.quota?.extraUsage?.severity === 'warning' ||
-                          props.quota?.extraUsage?.exhausted
-                        ? 'warn'
-                        : 'muted',
-                  )}
-                >
-                  {creditLine(
-                    budget().figure,
-                    props.quota?.extraUsage,
-                    width(),
-                  )}
-                </text>
-              </box>
-            )
-          }}
-        </Show>
-        <Show when={parts().age}>
-          <text fg={props.theme.textMuted}>{parts().age}</text>
-        </Show>
-        <Show when={props.quota?.fallbackAdvised === true}>
-          <text fg={props.theme.textMuted}>{'→ fallback advised'}</text>
-        </Show>
-      </Show>
-    </box>
-  )
-}
-
 // --- Quota dialog content ---------------------------------------------------
 
 // Renders the same rich visualization as the sidebar (account blocks with
@@ -576,6 +82,7 @@ function QuotaDialogContent(props: {
           tierLabel={state().main?.tierLabel}
           stateLine={state().main?.stateLine}
           quotaDated={state().main?.quotaDated}
+          now={Date.now()}
         />
         <Show when={prefs().sections.fallbackAccounts}>
           <For each={enabledFallbacks()}>
@@ -593,6 +100,7 @@ function QuotaDialogContent(props: {
                 stateLine={fb.stateLine}
                 quotaDated={fb.quotaDated}
                 marginTop={1}
+                now={Date.now()}
               />
             )}
           </For>
@@ -608,77 +116,12 @@ async function readStateFromFile(): Promise<SidebarState> {
   return getSidebarState()
 }
 
-interface SidebarController {
-  prefs: () => AnthropicAuthTuiPrefs
-  collapsed: () => boolean
-  toggleCollapsed: () => void
-}
-
-// 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: AnthropicAuthTuiPrefs,
-): SidebarController {
-  const [prefs, setPrefs] = createSignal<AnthropicAuthTuiPrefs>(initialPrefs)
-  const seedCollapsed =
-    initialPrefs.rememberCollapsed && initialPrefs.collapsed != null
-      ? initialPrefs.collapsed
-      : initialPrefs.startCollapsed
-  const [collapsed, setCollapsed] = createSignal(seedCollapsed)
-  let lastPersistedCollapsed: boolean | null = 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: {
   api: TuiPluginApi
   controller: SidebarController
   sessionId: string
 }) {
   const prefs = props.controller.prefs
-  const collapsed = props.controller.collapsed
   const [state, setState] = createSignal<SidebarState>(DEFAULT_SIDEBAR_STATE)
   let lastUpdated = 0
   let debounce: ReturnType<typeof setTimeout> | null = null
@@ -716,327 +159,13 @@ 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: Array<
-      [
-        (
-          | { usedPercent: number; remainingPercent: number; resetsAt?: string }
-          | undefined
-        ),
-        number,
-      ]
-    > = [
-      [quota.five_hour, FIVE_HOUR_MS],
-      [quota.seven_day, SEVEN_DAY_MS],
-      ...(quota.scoped ?? []).map((window): [typeof window, number] => [
-        window,
-        SEVEN_DAY_MS,
-      ]),
-    ]
-    return windows.some(
-      ([w, ms]) =>
-        w != null && computeQuotaPacing(w, ms, now)?.state === 'deficit',
-    )
-  }
-  const activeQuotaTone = (): Tone => {
-    const summary = activeQuotaSummary()
-    const values = [
-      summary.fiveHourUsedPercent,
-      summary.sevenDayUsedPercent,
-      ...summary.scopedUsedPercents,
-    ].filter((value): value is number => 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: Tone =
-      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 = (): Tone =>
-    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 (
-    <box
-      width='100%'
-      flexDirection='column'
-      border={SINGLE_BORDER}
-      borderColor={theme().borderActive}
-      paddingTop={1}
-      paddingBottom={1}
-      paddingLeft={1}
-      paddingRight={1}
-    >
-      {/* Header: ▼/▶ CLAUDE badge (click to collapse) + version, or LIMITED badge */}
-      {/* biome-ignore lint/a11y/noStaticElementInteractions: opentui renders to a terminal, not the DOM — ARIA roles do not apply */}
-      <box
-        width='100%'
-        flexDirection='row'
-        justifyContent='space-between'
-        alignItems='center'
-        onMouseDown={() => {
-          if (hasData()) props.controller.toggleCollapsed()
-        }}
-      >
-        <box paddingLeft={1} paddingRight={1} backgroundColor={theme().accent}>
-          <text fg={theme().background}>
-            <b>{headerLabel()}</b>
-          </text>
-        </box>
-        <Show
-          when={degraded()}
-          fallback={
-            <Show when={prefs().header.showVersion && PLUGIN_VERSION !== ''}>
-              <text fg={theme().textMuted}>{`v${PLUGIN_VERSION}`}</text>
-            </Show>
-          }
-        >
-          <box
-            paddingLeft={1}
-            paddingRight={1}
-            backgroundColor={theme().warning}
-          >
-            <text fg={theme().background}>
-              <b>{'LIMITED'}</b>
-            </text>
-          </box>
-        </Show>
-      </box>
-
-      {/* Collapsed accounts keep placement order; only a fresh active row is emphasized. */}
-      <Show when={collapsed() && hasData()}>
-        {/* Index keys rows by position: each state update builds new account
-            objects, so For would rebuild every row and its measured width.
-            Passing the accessor's value as a prop keeps the row reactive. */}
-        <Index
-          each={getCollapsedAccounts(
-            state(),
-            prefs().sections.fallbackAccounts,
-          )}
-        >
-          {(account) => (
-            <CollapsedAccountRow
-              theme={theme()}
-              account={account()}
-              tone={activeQuotaTone()}
-            />
-          )}
-        </Index>
-        <Show when={state().fastMode}>
-          <CollapsedRow theme={theme()} label='Mode'>
-            <text fg={toneColor(theme(), 'accent')}>
-              <b>{'fast'}</b>
-            </text>
-          </CollapsedRow>
-        </Show>
-        <Show when={fableRecoverySummary()}>
-          {(summary: () => string) => (
-            <CollapsedRow theme={theme()} label='Recovery'>
-              <text fg={toneColor(theme(), fableRecoveryTone())}>
-                <b>{summary()}</b>
-              </text>
-            </CollapsedRow>
-          )}
-        </Show>
-      </Show>
-
-      {/* Expanded: full sections. Also render when there's no data so the
-          sidebar can never go blank if data clears while collapsed. */}
-      <Show when={!collapsed() || !hasData()}>
-        <Show
-          when={hasData()}
-          fallback={
-            <box marginTop={1} width='100%'>
-              <text fg={theme().textMuted}>{'Waiting for quota\u2026'}</text>
-            </box>
-          }
-        >
-          {/* Quota */}
-          <Show when={prefs().sections.quota}>
-            <SectionHeader theme={theme()} title='Quota' />
-            <AccountBlock
-              theme={theme()}
-              appearance={prefs().appearance}
-              name='main'
-              quota={state().main?.quota}
-              active={state().activeId === 'main'}
-              pacingEnabled={prefs().sections.pacing}
-              tierLabel={state().main?.tierLabel}
-              stateLine={state().main?.stateLine}
-              quotaDated={state().main?.quotaDated}
-            />
-            <Show when={prefs().sections.fallbackAccounts}>
-              <For each={enabledFallbacks()}>
-                {(fb) => (
-                  <AccountBlock
-                    theme={theme()}
-                    appearance={prefs().appearance}
-                    name={fb.label ?? fb.id}
-                    quota={fb.quota}
-                    active={state().activeId === fb.id}
-                    pacingEnabled={prefs().sections.pacing}
-                    tierLabel={fb.tierLabel}
-                    needsReauth={fb.needsReauth}
-                    vaultReauth={fb.vaultReauth}
-                    stateLine={fb.stateLine}
-                    quotaDated={fb.quotaDated}
-                    marginTop={1}
-                  />
-                )}
-              </For>
-            </Show>
-          </Show>
-        </Show>
-
-        {/* Routing */}
-        <Show when={prefs().sections.routing}>
-          <SectionHeader theme={theme()} title='Routing' />
-          <StatRow
-            theme={theme()}
-            label='Route'
-            value={state().route}
-            tone='accent'
-          />
-          <StatRow
-            theme={theme()}
-            label='Mode'
-            value={state().fastMode ? 'fast' : 'std'}
-            tone={state().fastMode ? 'accent' : 'muted'}
-          />
-          <StatRow
-            theme={theme()}
-            label='Relay'
-            value={relayValue()}
-            tone={state().relay?.enabled ? 'ok' : 'muted'}
-          />
-        </Show>
-
-        <Show when={fableRecoverySummary()}>
-          {(summary: () => string) => (
-            <StatRow
-              theme={theme()}
-              label='Recovery'
-              value={summary()}
-              tone={fableRecoveryTone()}
-            />
-          )}
-        </Show>
-
-        {/* Cache */}
-        <Show when={showCache()}>
-          <SectionHeader theme={theme()} title='Cache' />
-          <StatRow
-            theme={theme()}
-            label='1h cache'
-            value={`${cacheKeep()?.window} \u00b7 ${cacheKeep()?.enabled ? 'on' : 'off'}`}
-            tone={cacheKeep()?.enabled ? 'ok' : 'muted'}
-          />
-          <Show when={(cacheKeep()?.trackedSessions ?? 0) > 0}>
-            <StatRow
-              theme={theme()}
-              label='Tracked'
-              value={String(cacheKeep()?.trackedSessions)}
-              tone='text'
-            />
-          </Show>
-        </Show>
-
-        {/* Prime — only when enabled. Expanded view only (no collapsed surface). */}
-        <Show when={showPrime()}>
-          <StatRow
-            theme={theme()}
-            label='Prime'
-            value={primeHasError() ? 'err' : 'on'}
-            tone={primeHasError() ? 'warn' : 'ok'}
-          />
-          <For each={prime()?.accounts ?? []}>
-            {(account) => {
-              const value = () => formatPrimeAccountValue(account)
-              return (
-                <StatRow
-                  theme={theme()}
-                  label={account.label}
-                  value={value().text}
-                  tone={value().hasError ? 'warn' : 'text'}
-                />
-              )
-            }}
-          </For>
-        </Show>
-
-        {/* Health — only when something is wrong */}
-        <Show when={degraded() && prefs().sections.health}>
-          <SectionHeader theme={theme()} title='Health' />
-          <Show when={quotaBackedOff()}>
-            <StatRow
-              theme={theme()}
-              label='Quota API'
-              value={`backoff ${formatUntil(state().main?.quotaBackoffUntil)}`}
-              tone='warn'
-            />
-          </Show>
-          <Show when={refreshBackedOff()}>
-            <StatRow
-              theme={theme()}
-              label='Token refresh'
-              value={`backoff ${formatUntil(state().main?.refreshBackoffUntil)}`}
-              tone='warn'
-            />
-          </Show>
-        </Show>
-      </Show>
-    </box>
+    <ClaudeSidebar
+      state={state}
+      theme={() => props.api.theme.current}
+      controller={props.controller}
+      sessionId={props.sessionId}
+    />
   )
 }