@cortexkit/opencode-anthropic-auth 2.0.2 → 2.1.0

package/src/tui.tsx

@@ -3,16 +3,23 @@
 import { readFileSync } from 'node:fs'
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { formatQuotaMoney } from '@cortexkit/anthropic-auth-core'
+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,
@@ -25,7 +32,8 @@ import {
   DEFAULT_SIDEBAR_STATE,
   FIVE_HOUR_MS,
   formatPrimeAccountValue,
-  formatScopedQuotaLabel,
+  formatQuotaRowLabel,
+  getCollapsedAccounts,
   getCollapsedQuotaSummary,
   getFableRecoverySummary,
   getSidebarState,
@@ -232,7 +240,60 @@ function CollapsedRow(props: {
   )
 }
 
-// Quota window row: muted label left, tone-colored bar + percentage right,
+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.
@@ -240,12 +301,13 @@ function QuotaRow(props: {
   theme: ThemeCurrent
   appearance: AppearancePrefs
   label: string
-  window: { usedPercent: number; resetsAt?: string } | undefined
+  part: QuotaWindowPart | undefined
+  usedPercent: number | undefined
   pacing: QuotaPacing | null
   binding?: boolean
 }) {
-  const used = () => props.window?.usedPercent ?? 0
-  const reset = () => formatResetIn(props.window?.resetsAt)
+  const used = () => props.usedPercent ?? 0
+  const reset = () => props.part?.resetIn
   const paceLine = () => {
     const pacing = props.pacing
     if (!pacing || pacing.state === 'on-pace') return null
@@ -257,20 +319,24 @@ function QuotaRow(props: {
   }
   return (
     <Show
-      when={props.window}
+      when={props.part}
       fallback={
         <box width='100%' flexDirection='row'>
-          <text fg={props.theme.textMuted}>{props.label.padEnd(3)}</text>
+          <text
+            fg={props.theme.textMuted}
+          >{`${formatQuotaRowLabel(props.label)} `}</text>
           <text fg={props.theme.textMuted}>{'\u2014'}</text>
         </box>
       }
     >
-      {/* Left group (label · bar · pct) stays left-aligned in fixed columns so
-          bars and percentages line up across rows; the reset time is pushed to
+      {/* 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}>{props.label.padEnd(3)}</text>
+          <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)}>
@@ -281,7 +347,7 @@ function QuotaRow(props: {
           <text
             fg={toneColor(props.theme, usageTone(used(), props.appearance))}
           >
-            {` ${String(Math.round(used())).padStart(3)}%${props.binding ? ' •' : ''}`}
+            {` ${props.part?.figure}${props.binding ? ' •' : ''}`}
           </text>
         </box>
         <Show when={reset()}>
@@ -290,7 +356,7 @@ function QuotaRow(props: {
       </box>
       <Show when={paceLine()}>
         <box width='100%' flexDirection='row'>
-          <text fg={props.theme.textMuted}>{'   '}</text>
+          <text fg={props.theme.textMuted}>{formatQuotaRowLabel('', 11)}</text>
           <text
             fg={toneColor(
               props.theme,
@@ -305,6 +371,22 @@ function QuotaRow(props: {
   )
 }
 
+// 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.
@@ -317,19 +399,23 @@ function AccountBlock(props: {
   pacingEnabled: boolean
   needsReauth?: boolean
   vaultReauth?: boolean
+  stateLine?: string
+  quotaDated?: boolean
   tierLabel?: string
   marginTop?: number
 }) {
   const statusWord = () =>
-    props.needsReauth
-      ? 're-login'
-      : props.vaultReauth
-        ? 'vault reauth'
-        : props.active
-          ? 'active'
-          : 'idle'
+    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.needsReauth || props.vaultReauth || props.stateLine
       ? 'warn'
       : props.active
         ? 'ok'
@@ -340,9 +426,15 @@ function AccountBlock(props: {
       | undefined,
     windowMs: number,
   ) =>
-    props.pacingEnabled && window
+    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'>
@@ -353,6 +445,9 @@ function AccountBlock(props: {
           <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>}
@@ -361,7 +456,8 @@ function AccountBlock(props: {
           theme={props.theme}
           appearance={props.appearance}
           label='5h'
-          window={props.quota?.five_hour}
+          part={partFor('5h')}
+          usedPercent={props.quota?.five_hour?.usedPercent}
           pacing={pacingFor(props.quota?.five_hour, FIVE_HOUR_MS)}
           binding={props.quota?.bindingWindow === 'five_hour'}
         />
@@ -369,7 +465,8 @@ function AccountBlock(props: {
           theme={props.theme}
           appearance={props.appearance}
           label='7d'
-          window={props.quota?.seven_day}
+          part={partFor('7d')}
+          usedPercent={props.quota?.seven_day?.usedPercent}
           pacing={pacingFor(props.quota?.seven_day, SEVEN_DAY_MS)}
           binding={props.quota?.bindingWindow === 'seven_day'}
         />
@@ -378,29 +475,52 @@ function AccountBlock(props: {
             <QuotaRow
               theme={props.theme}
               appearance={props.appearance}
-              label={formatScopedQuotaLabel(window.title)}
-              window={window}
+              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={props.quota?.extraUsage}>
-          {(extraUsage: () => NonNullable<AccountQuota['extraUsage']>) => (
-            <text
-              fg={toneColor(
-                props.theme,
-                extraUsage().severity === 'critical'
-                  ? 'err'
-                  : extraUsage().severity === 'warning' ||
-                      extraUsage().exhausted
-                    ? 'warn'
-                    : 'muted',
-              )}
-            >
-              {`credits ${formatQuotaMoney(extraUsage().used)}/${formatQuotaMoney(extraUsage().limit)}${extraUsage().exhausted ? ' · exhausted' : ''}`}
-            </text>
-          )}
+        <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>
@@ -410,8 +530,6 @@ function AccountBlock(props: {
   )
 }
 
-export { formatQuotaMoney }
-
 // --- Quota dialog content ---------------------------------------------------
 
 // Renders the same rich visualization as the sidebar (account blocks with
@@ -437,7 +555,9 @@ function QuotaDialogContent(props: {
   setTimeout(refresh, 0)
   const theme = () => props.api.theme.current
   const enabledFallbacks = () =>
-    (state().fallbacks ?? []).filter((f) => f.enabled)
+    (state().fallbacks ?? []).filter(
+      (f) => f.enabled || (f.custodyState && f.custodyState !== 'off'),
+    )
   return (
     <box flexDirection='column' padding={2} width='100%' alignItems='center'>
       <box flexDirection='column' width={58}>
@@ -454,6 +574,8 @@ function QuotaDialogContent(props: {
           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()}>
@@ -467,6 +589,9 @@ function QuotaDialogContent(props: {
                 pacingEnabled={prefs().sections.pacing}
                 tierLabel={fb.tierLabel}
                 needsReauth={fb.needsReauth}
+                vaultReauth={fb.vaultReauth}
+                stateLine={fb.stateLine}
+                quotaDated={fb.quotaDated}
                 marginTop={1}
               />
             )}
@@ -594,9 +719,13 @@ function QuotaSidebar(props: {
 
   const theme = () => props.api.theme.current
   const enabledFallbacks = () =>
-    (state().fallbacks ?? []).filter((f) => f.enabled)
+    (state().fallbacks ?? []).filter(
+      (f) => f.enabled || (f.custodyState && f.custodyState !== 'off'),
+    )
   const hasData = () =>
-    state().main?.quota != null || enabledFallbacks().length > 0
+    state().main?.quota != null ||
+    state().main?.stateLine != null ||
+    enabledFallbacks().length > 0
 
   const headerLabel = () => {
     const name = prefs().header.label
@@ -607,6 +736,7 @@ function QuotaSidebar(props: {
     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()
@@ -724,18 +854,25 @@ function QuotaSidebar(props: {
         </Show>
       </box>
 
-      {/* Collapsed: active account 5h + 7d quota, plus fast-mode when on */}
+      {/* Collapsed accounts keep placement order; only a fresh active row is emphasized. */}
       <Show when={collapsed() && hasData()}>
-        <CollapsedRow theme={theme()} label={activeAccount().name}>
-          <Show
-            when={activeQuotaSummary().text != null}
-            fallback={<text fg={theme().textMuted}>{'\u2014'}</text>}
-          >
-            <text fg={toneColor(theme(), activeQuotaTone())}>
-              <b>{activeQuotaSummary().text}</b>
-            </text>
-          </Show>
-        </CollapsedRow>
+        {/* 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')}>
@@ -776,6 +913,8 @@ function QuotaSidebar(props: {
               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()}>
@@ -790,6 +929,8 @@ function QuotaSidebar(props: {
                     tierLabel={fb.tierLabel}
                     needsReauth={fb.needsReauth}
                     vaultReauth={fb.vaultReauth}
+                    stateLine={fb.stateLine}
+                    quotaDated={fb.quotaDated}
                     marginTop={1}
                   />
                 )}