@cortexkit/opencode-anthropic-auth 2.2.0 → 2.2.2

package/src/tui/claude-sidebar.tsx

@@ -29,15 +29,19 @@ import {
   computeQuotaPacing,
   DEFAULT_SIDEBAR_STATE,
   FIVE_HOUR_MS,
+  fitPaceLine,
+  fitQuotaRow,
   formatPrimeAccountValue,
   formatQuotaRowLabel,
   getCollapsedAccounts,
   getCollapsedQuotaSummary,
   getFableRecoverySummary,
   type QuotaPacing,
+  quotaLabelColumnWidth,
   resolveActiveAccount,
   SEVEN_DAY_MS,
   type SidebarState,
+  scopedQuotaShortNames,
 } from '../sidebar-state.js'
 import {
   type AnthropicAuthTuiPrefs,
@@ -131,8 +135,9 @@ function quotaBarSegments(
   usedPct: number,
   appearance: AppearancePrefs,
   pacing: QuotaPacing | null,
+  width: number,
 ): BarSegment[] {
-  const width = appearance.barWidth
+  if (width <= 0) return []
   const cells = (pct: number) =>
     Math.max(0, Math.min(Math.round((pct / 100) * width), width))
   const usedCells = cells(usedPct)
@@ -292,14 +297,35 @@ function CollapsedAccountRow(props: {
   )
 }
 
-// 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.
+// One cell run of a single-line row: drawn at its own width, never shrunk and
+// never wrapped, so the row's layout is exactly what `fitQuotaRow` measured.
+function Cell(props: { fg: SidebarColor; text: string }) {
+  return (
+    <text
+      width={Bun.stringWidth(props.text)}
+      flexShrink={0}
+      wrapMode='none'
+      fg={props.fg}
+    >
+      {props.text}
+    </text>
+  )
+}
+
+// Quota window row: muted label left in a column `labelWidth` wide, then the
+// tone-colored bar and the shared figure, and the muted reset at the right
+// edge. The row is one line: `fitQuotaRow` drops detail to fit `width`
+// instead of letting it wrap. When pacing data is present, the bar gains a
+// pace segment and an off-pace window adds a one-line subline under the bar
+// with the reserve/deficit delta and either the projected runout or
+// `lasts to reset`.
 function QuotaRow(props: {
   theme: SidebarTheme
   appearance: AppearancePrefs
   label: string
+  labelWidth: number
+  /** The row's laid-out width, undefined until the first layout. */
+  width: number | undefined
   part: QuotaWindowPart | undefined
   usedPercent: number | undefined
   pacing: QuotaPacing | null
@@ -307,68 +333,86 @@ function QuotaRow(props: {
   now: number
 }) {
   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`
-  }
+  const labelCell = () =>
+    `${props.label}${' '.repeat(Math.max(0, props.labelWidth - Bun.stringWidth(props.label)))} `
+  const figure = () =>
+    `${props.part?.figure ?? ''}${props.binding ? ' \u2022' : ''}`
+  const fit = () =>
+    fitQuotaRow({
+      width: props.width,
+      labelWidth: props.labelWidth,
+      barWidth: props.appearance.barWidth,
+      figure: figure(),
+      reset: props.part?.resetIn,
+    })
+  const paceLine = () =>
+    fitPaceLine(
+      props.pacing,
+      props.width === undefined
+        ? undefined
+        : props.width - props.labelWidth - 1,
+      props.pacing?.runsOutAt
+        ? formatResetIn(props.pacing.runsOutAt, props.now)
+        : undefined,
+    )
   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 width='100%' height={1} flexDirection='row'>
+          <Cell fg={props.theme.textMuted} text={`${labelCell()}\u2014`} />
         </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>
-          {/* Index: the clock rebuilds the segments, which must not remount. */}
-          <Index
-            each={quotaBarSegments(used(), props.appearance, props.pacing)}
-          >
-            {(segment) => (
-              <text fg={toneColor(props.theme, segment().tone)}>
-                {segment().text}
-              </text>
-            )}
-          </Index>
-          <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>
+      {/* The label column is the same width in every row, so bars start in
+          one column; a bar shrinks only when its row needs the room. The
+          reset is pushed to the right edge, always at least one space after
+          the figure. */}
+      <box width='100%' height={1} flexDirection='row'>
+        <Cell fg={props.theme.textMuted} text={labelCell()} />
+        {/* Index: the clock rebuilds the segments, which must not remount. */}
+        <Index
+          each={quotaBarSegments(
+            used(),
+            props.appearance,
+            props.pacing,
+            fit().barCells,
+          )}
+        >
+          {(segment) => (
+            <Cell
+              fg={toneColor(props.theme, segment().tone)}
+              text={segment().text}
+            />
+          )}
+        </Index>
+        <Cell
+          fg={toneColor(props.theme, usageTone(used(), props.appearance))}
+          text={`${fit().barCells > 0 ? ' ' : ''}${figure()}`}
+        />
+        <box flexGrow={1} />
+        <Show when={fit().reset}>
+          {(reset: () => string) => (
+            <Cell fg={props.theme.textMuted} text={` ${reset()}`} />
+          )}
         </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>
+        {(line: () => string) => (
+          <box width='100%' height={1} flexDirection='row'>
+            <Cell
+              fg={props.theme.textMuted}
+              text={' '.repeat(props.labelWidth + 1)}
+            />
+            <Cell
+              fg={toneColor(
+                props.theme,
+                props.pacing?.state === 'deficit' ? 'warn' : 'muted',
+              )}
+              text={line()}
+            />
+          </box>
+        )}
       </Show>
     </Show>
   )
@@ -405,6 +449,11 @@ export function AccountBlock(props: {
   stateLine?: string
   quotaDated?: boolean
   tierLabel?: string
+  /**
+   * The quota rows' label column width, shared across the sidebar's accounts
+   * so their bars line up; defaults to this account's own longest label.
+   */
+  labelWidth?: number
   marginTop?: number
   now: number
 }) {
@@ -439,8 +488,25 @@ export function AccountBlock(props: {
     })
   const partFor = (name: string) =>
     parts().windows.find((part) => part.name === name)
+  const scopedLabels = () => scopedQuotaShortNames(props.quota, props.now)
+  const labelWidth = () =>
+    props.labelWidth ?? quotaLabelColumnWidth([props.quota], props.now)
+  // The block's laid-out width, read when it mounts and on each resize. Quota
+  // rows drop or shrink detail to fit it (and are cut at the edge when even
+  // that is not enough); pacing sublines are cut to fit. Undefined until layout.
+  const [width, setWidth] = createSignal<number>()
+  let block: BoxRenderable | undefined
   return (
-    <box width='100%' flexDirection='column' marginTop={props.marginTop ?? 0}>
+    <box
+      width='100%'
+      flexDirection='column'
+      marginTop={props.marginTop ?? 0}
+      ref={(element: BoxRenderable) => {
+        block = element
+        setWidth(element.width || undefined)
+      }}
+      onSizeChange={() => setWidth(block?.width || undefined)}
+    >
       <box width='100%' flexDirection='row' justifyContent='space-between'>
         <text fg={props.theme.text}>
           <b>{`${props.name}${props.tierLabel ? ` · ${props.tierLabel}` : ''}`}</b>
@@ -460,6 +526,8 @@ export function AccountBlock(props: {
           theme={props.theme}
           appearance={props.appearance}
           label='5h'
+          labelWidth={labelWidth()}
+          width={width()}
           part={partFor('5h')}
           usedPercent={props.quota?.five_hour?.usedPercent}
           pacing={pacingFor(props.quota?.five_hour, FIVE_HOUR_MS)}
@@ -470,6 +538,8 @@ export function AccountBlock(props: {
           theme={props.theme}
           appearance={props.appearance}
           label='7d'
+          labelWidth={labelWidth()}
+          width={width()}
           part={partFor('7d')}
           usedPercent={props.quota?.seven_day?.usedPercent}
           pacing={pacingFor(props.quota?.seven_day, SEVEN_DAY_MS)}
@@ -477,11 +547,13 @@ export function AccountBlock(props: {
           now={props.now}
         />
         <For each={props.quota?.scoped ?? []}>
-          {(window) => (
+          {(window, index) => (
             <QuotaRow
               theme={props.theme}
               appearance={props.appearance}
-              label={partFor(window.title)?.name ?? window.title}
+              label={scopedLabels()[index()] ?? window.title}
+              labelWidth={labelWidth()}
+              width={width()}
               part={partFor(window.title)}
               usedPercent={window.usedPercent}
               pacing={pacingFor(window, SEVEN_DAY_MS)}
@@ -491,40 +563,26 @@ export function AccountBlock(props: {
           )}
         </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)}
+          {(budget: () => QuotaWindowPart) => (
+            // One line in the block's width: amounts drop their cents rather
+            // than wrap, and keep them until the first layout.
+            <box width='100%' height={1} flexDirection='row'>
+              <text
+                wrapMode='none'
+                fg={toneColor(
+                  props.theme,
+                  props.quota?.extraUsage?.severity === 'critical'
+                    ? 'err'
+                    : props.quota?.extraUsage?.severity === 'warning' ||
+                        props.quota?.extraUsage?.exhausted
+                      ? 'warn'
+                      : 'muted',
+                )}
               >
-                <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>
-            )
-          }}
+                {creditLine(budget().figure, props.quota?.extraUsage, width())}
+              </text>
+            </box>
+          )}
         </Show>
         <Show when={parts().age}>
           <text fg={props.theme.textMuted}>{parts().age}</text>
@@ -634,6 +692,17 @@ export function ClaudeSidebar(props: {
     state().main?.quota != null ||
     state().main?.stateLine != null ||
     enabledFallbacks().length > 0
+  // One label column for every expanded account, so all their bars line up.
+  const quotaLabelWidth = () =>
+    quotaLabelColumnWidth(
+      [
+        state().main?.quota,
+        ...(prefs().sections.fallbackAccounts
+          ? enabledFallbacks().map((fallback) => fallback.quota)
+          : []),
+      ],
+      now(),
+    )
 
   const headerLabel = () => {
     const name = prefs().header.label
@@ -821,6 +890,7 @@ export function ClaudeSidebar(props: {
               active={state().activeId === 'main'}
               pacingEnabled={prefs().sections.pacing}
               tierLabel={state().main?.tierLabel}
+              labelWidth={quotaLabelWidth()}
               stateLine={state().main?.stateLine}
               quotaDated={state().main?.quotaDated}
               now={now()}
@@ -836,6 +906,7 @@ export function ClaudeSidebar(props: {
                     active={state().activeId === fb.id}
                     pacingEnabled={prefs().sections.pacing}
                     tierLabel={fb.tierLabel}
+                    labelWidth={quotaLabelWidth()}
                     needsReauth={fb.needsReauth}
                     vaultReauth={fb.vaultReauth}
                     stateLine={fb.stateLine}

package/src/tui-compiled/sidebar-state.ts

@@ -132,6 +132,7 @@ import {
   isQuotaStale,
   logger,
   quotaDisplayProjection,
+  quotaWindowParts,
 } from '@cortexkit/anthropic-auth-core'
 
 const STATE_FILE_ENV = 'OPENCODE_ANTHROPIC_AUTH_SIDEBAR_STATE_FILE'
@@ -951,6 +952,122 @@ export function formatQuotaRowLabel(name: string, width = 10): string {
   return label + ' '.repeat(Math.max(0, width - Bun.stringWidth(label)))
 }
 
+/**
+ * The short names model-scoped rows read under, in the order of `quota.scoped`:
+ * each window part's `short`, the same label common-auth's narrow one-line
+ * form uses (`Fa` for Fable; models whose short names would collide are
+ * extended until they differ, as `Fabl` and `Fabr`), so the expanded rows and
+ * the collapsed line agree. Short names are worked out over every model window
+ * in the reading, so all scoped windows are projected together. A part is
+ * matched to its window by the window's title, which is the name a
+ * model-scoped part carries; a window with no part keeps its title.
+ */
+export function scopedQuotaShortNames(
+  quota: Pick<AccountQuota, 'scoped'> | null | undefined,
+  now = Date.now(),
+): string[] {
+  const scoped = quota?.scoped ?? []
+  if (!scoped.length) return []
+  const { windows } = quotaWindowParts(
+    quotaDisplayProjection({ scoped }, now),
+    { now },
+  )
+  return scoped.map(
+    (window) =>
+      windows.find(
+        (part) => part.kind === 'window' && part.name === window.title,
+      )?.short || window.title,
+  )
+}
+
+/**
+ * The width of the quota rows' label column: the longest label any of these
+ * accounts shows. `5h` and `7d` always show, so it is at least 2.
+ */
+export function quotaLabelColumnWidth(
+  quotas: readonly (AccountQuota | null | undefined)[],
+  now = Date.now(),
+): number {
+  return Math.max(
+    2,
+    ...quotas.flatMap((quota) =>
+      scopedQuotaShortNames(quota, now).map((name) => Bun.stringWidth(name)),
+    ),
+  )
+}
+
+/** The narrowest a quota row's bar shrinks to. */
+export const QUOTA_BAR_MIN_CELLS = 3
+
+export interface QuotaRowFit {
+  /** Bar cells to draw. */
+  barCells: number
+  /** The reset text to draw at the right edge, or undefined for none. */
+  reset?: string
+}
+
+/**
+ * Fits one quota row into `width` cells. The row reads `label bar figure` on
+ * the left and the reset at the right edge, with a one-cell gap before the
+ * reset that the caller always draws. When the full row is too wide, the
+ * reset is dropped first, so the figure (the percent left) is never cut to
+ * keep it; then the bar shrinks, down to `QUOTA_BAR_MIN_CELLS`. A row still
+ * too wide at that point keeps the minimum bar and is cut at the right edge
+ * by the caller's no-wrap text, which cuts the figure's end. Without a
+ * measured width the full row is used.
+ */
+export function fitQuotaRow(input: {
+  width: number | undefined
+  labelWidth: number
+  barWidth: number
+  /** The figure with any binding marker, such as `97% left •`. */
+  figure: string
+  reset?: string
+}): QuotaRowFit {
+  const { width, labelWidth, barWidth, figure, reset } = input
+  const full: QuotaRowFit = { barCells: barWidth, reset: reset || undefined }
+  if (width === undefined) return full
+  const cells = (fit: QuotaRowFit) =>
+    labelWidth +
+    1 +
+    (fit.barCells > 0 ? fit.barCells + 1 : 0) +
+    Bun.stringWidth(figure) +
+    (fit.reset ? 1 + Bun.stringWidth(fit.reset) : 0)
+  const minimum = Math.min(QUOTA_BAR_MIN_CELLS, barWidth)
+  const candidates: QuotaRowFit[] = [full]
+  for (let barCells = barWidth; barCells >= minimum; barCells--) {
+    candidates.push({ barCells })
+  }
+  return candidates.find((fit) => cells(fit) <= width) ?? { barCells: minimum }
+}
+
+/**
+ * The pacing subline for a window that is off pace: `deficit 12% · out in
+ * 1d23h` for a deficit that runs out before the reset, otherwise the delta
+ * and `lasts to reset` (`reserve 4% · lasts to reset`). When it is wider than
+ * `width` cells it is cut to fit and ends in `…` rather than wrapping. Null
+ * when there is no pacing or the window is on pace.
+ */
+export function fitPaceLine(
+  pacing: QuotaPacing | null,
+  width: number | undefined,
+  runsOutIn: string | undefined,
+): string | null {
+  if (!pacing || pacing.state === 'on-pace') return null
+  const head = `${pacing.state} ${Math.round(Math.abs(pacing.deltaPercent))}%`
+  const line = runsOutIn
+    ? `${head} \u00b7 out in ${runsOutIn}`
+    : `${head} \u00b7 lasts to reset`
+  if (width === undefined || Bun.stringWidth(line) <= width) return line
+  if (width <= 0) return ''
+  let cut = ''
+  for (const character of line) {
+    if (Bun.stringWidth(cut + character) > width - 1) break
+    cut += character
+  }
+  return `${cut.trimEnd()}\u2026`
+}
+
 export function getCollapsedQuotaSummary(
   quota: AccountQuota | null,
   now = Date.now(),