savant-code 0.0.19 → 0.0.20

package/cli/src/components/savant-free-model-selector.tsx

@@ -1,815 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import { useKeyboard } from '@opentui/react'
-import {
-  FALLBACK_SAVANT_FREE_MODEL_ID,
-  SAVANT_FREE_PREMIUM_SESSION_LIMIT,
-  getSavantFreeDeploymentAvailabilityLabel,
-  getSavantFreeModelsForAccessTier,
-  getRecommendedSavantFreeModelId,
-  isSavantFreeGlmV52ModelId,
-  isSavantFreeModelAvailable,
-  isSavantFreePremiumModelId,
-} from '@savant-code/common/constants/savant-free-models'
-import {
-  getRateLimitsByModel,
-  getReferralInfo,
-} from '@savant-code/common/types/savant-free-session'
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import { Button } from './button'
-import { SavantFreeReferralBanner } from './savant-free-referral-banner'
-import { useNow } from '../hooks/use-now'
-import { startSavantFreeSession } from '../hooks/use-savant-free-session'
-import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
-import { useTheme } from '../hooks/use-theme'
-import { useSavantFreeModelStore } from '../state/savant-free-model-store'
-import { useSavantFreeSessionStore } from '../state/savant-free-session-store'
-import { formatSessionUnits } from '../utils/format-session-units'
-import {
-  savantFreeModelNavigationDirectionForKey,
-  nextSavantFreeModelId,
-} from '../utils/savant-free-model-navigation'
-import {
-  formatSavantFreePremiumResetCountdown,
-  getSavantFreePremiumResetAt,
-} from '../utils/savant-free-premium-reset'
-import { isPlainEnterKey } from '../utils/terminal-enter-detection'
-
-import type { SavantFreeReferralFocusTarget } from './savant-free-referral-banner'
-import type {
-  BoxRenderable,
-  KeyEvent,
-  ScrollBoxRenderable,
-} from '@opentui/core'
-import type { SavantFreeModel } from '@savant-code/common/constants/savant-free-models'
-
-// The picker opens collapsed to a single recommended hero so a new user can
-// start with one Enter press without reading six boxes. The "see all models"
-// toggle reveals the rest, grouped into the same product/availability tiers.
-//
-// Section grouping (expanded view): model rows keep their tiers, but the
-// premium models share one daily session quota while the unlimited ones have
-// none. Putting the tier on a section header lets each row drop its redundant
-// "Premium"/"Unlimited" chip. The PREMIUM header carries the shared quota
-// inline — "N of M used · resets in …" — once any session is spent (turning
-// amber when exhausted, the moment its rows grey out). When collapsed there's
-// no PREMIUM header, but the recommended hero is unlimited, so the premium
-// count is irrelevant and simply doesn't show; only the limited tier (no
-// premium section) keeps a parent-rendered below-picker counter. UNLIMITED
-// needs no annotation. Empty sections are filtered so a model set with no
-// premium (or no unlimited) entries doesn't render an orphan header.
-//
-// `label` may be empty: limited-tier users only see the constrained model set,
-// so the "LIMITED" header would just leak the internal tier name without
-// organizing anything. Renderer treats an empty label as "no header row".
-type Section = {
-  key: 'premium' | 'unlimited' | 'limited'
-  label: string
-  models: readonly SavantFreeModel[]
-}
-
-// Sentinel id for the expand/collapse toggle so it can ride the same
-// keyboard-navigation list as the model rows (Tab/arrow to it, Enter to fire).
-const TOGGLE_ID = '__savant_free_toggle__'
-
-// Right-aligned CTA shown on the focused, joinable row so the highlighted card
-// reads as a button ("you can press Enter here") instead of just a selection.
-// Its width is reserved in the one-line width budget below so the cue never
-// overflows or wraps the row (a wrap would desync the focused-row scroll math).
-const FOCUS_CUE = 'Press Enter ↵'
-const CUE_GAP = 2 // min gap between a row's details and the focused-row cue
-
-/**
- * Pre-chat model picker (session 'none'): user hasn't started a session yet.
- * Picking a model is their explicit commitment to enter — this triggers the
- * POST, which admits them straight to an active session. Opens collapsed to
- * the recommended hero; Enter starts immediately.
- *
- * Keyboard navigation: Tab / arrow keys move the green highlight; Enter (or
- * Space) commits the focused row — or, on the toggle, expands/collapses the
- * list. Mouse click commits in one step.
- *
- * Layout: the recommended model renders as a titled "RECOMMENDED" card with a
- * bright border. When expanded, the remaining rows are grouped into PREMIUM /
- * UNLIMITED sections so the tier is visible without a per-row chip; the shared
- * premium-session quota rides the PREMIUM header. Names align in a column
- * so taglines line up across rows. On narrow terminals the secondary details
- * (warning / deployment hours) drop onto an indented second line under the row.
- *
- * On short terminals the parent passes `maxHeight`: the model rows and the
- * referral/GLM controls live in one scrollbox capped at that many rows. A
- * scrollbar appears when the whole menu doesn't fit, and Tab/arrow navigation
- * keeps the focused control scrolled into view.
- */
-interface SavantFreeModelSelectorProps {
-  /** Max vertical rows the picker may occupy. When the rendered rows exceed
-   *  this, the list scrolls (scrollbar shown, focused row kept in view);
-   *  otherwise the scrollbox shrinks to fit and no scrollbar appears. */
-  maxHeight: number
-  /** Notifies the parent whenever the picker expands/collapses. The landing
-   *  screen uses it to promote the wordmark to the full ASCII logo while the
-   *  picker is collapsed (the freed rows make room). */
-  onExpandedChange?: (expanded: boolean) => void
-}
-
-export const SavantFreeModelSelector: React.FC<
-  SavantFreeModelSelectorProps
-> = ({ maxHeight, onExpandedChange }) => {
-  const theme = useTheme()
-  // contentMaxWidth (not terminalWidth) is the real budget — the parent
-  // landing screen wraps this picker in a `maxWidth: contentMaxWidth`
-  // box (capped at 80 cols), so a wide terminal doesn't actually let us
-  // sprawl the buttons across it.
-  const { contentMaxWidth } = useTerminalDimensions()
-  const selectedModel = useSavantFreeModelStore((s) => s.selectedModel)
-  const setSelectedModel = useSavantFreeModelStore((s) => s.setSelectedModel)
-  const session = useSavantFreeSessionStore((s) => s.session)
-  const accessTier =
-    (session && 'accessTier' in session ? session.accessTier : undefined) ??
-    'full'
-  const now = useNow(60_000)
-  const deploymentAvailabilityLabel = useMemo(
-    () => getSavantFreeDeploymentAvailabilityLabel(new Date(now)),
-    [now],
-  )
-  const [pending, setPending] = useState<string | null>(null)
-  const [hoveredId, setHoveredId] = useState<string | null>(null)
-
-  const availableModels = useMemo(
-    // GLM 5.2 is a referral reward, not a freely-pickable model, so it's
-    // surfaced by the separate SavantFreeReferralBanner rather than this grid.
-    () =>
-      getSavantFreeModelsForAccessTier(accessTier).filter(
-        (m) => !isSavantFreeGlmV52ModelId(m.id),
-      ),
-    [accessTier],
-  )
-  const recommendedModel = useMemo(() => {
-    const id = getRecommendedSavantFreeModelId(accessTier)
-    return availableModels.find((m) => m.id === id) ?? availableModels[0]!
-  }, [accessTier, availableModels])
-  const otherModels = useMemo(
-    () => availableModels.filter((m) => m.id !== recommendedModel.id),
-    [availableModels, recommendedModel],
-  )
-  // Only worth collapsing when the toggle actually hides something. With a
-  // single "other" model (limited tier) we just show both — a "see 1 more
-  // model" toggle is noise.
-  const canCollapse = otherModels.length >= 2
-
-  // Default collapsed only on the landing screen and only when the saved/active
-  // selection IS the recommended model — a returning user whose preference is a
-  // different model gets the expanded list so their pick is visible and focused.
-  const isLanding = session?.status === 'none' || !session
-  const [expanded, setExpanded] = useState(
-    () => !canCollapse || !isLanding || selectedModel !== recommendedModel.id,
-  )
-  // Mirror the expanded state up to the landing screen (collapsed → it
-  // promotes the wordmark to the full ASCII logo). useLayoutEffect so the
-  // parent's logo decision settles before paint, both on mount and on toggle.
-  useLayoutEffect(() => {
-    onExpandedChange?.(expanded)
-  }, [expanded, onExpandedChange])
-
-  // Keyboard cursor — separate from the actually-selected model so that
-  // Tab/arrow navigation can preview without committing. Starts on the user's
-  // saved/active pick (the recommended hero for a new user, since that's the
-  // default selection; their own model when expanded for a returning user).
-  const [focusedId, setFocusedId] = useState<string>(() => selectedModel)
-
-  // The referral banner contributes its GLM/copy actions to the selector's
-  // navigation order. Keeping them local avoids a global focus bridge now that
-  // the banner renders inside this selector.
-  const [extraTargets, setExtraTargets] = useState<
-    SavantFreeReferralFocusTarget[]
-  >([])
-  const extraTargetIds = useMemo(
-    () => extraTargets.map((t) => t.id),
-    [extraTargets],
-  )
-  const contentRef = useRef<BoxRenderable | null>(null)
-  const [measuredContentHeight, setMeasuredContentHeight] = useState<
-    number | null
-  >(null)
-  const syncContentHeight = useCallback(() => {
-    const nextHeight = contentRef.current?.height
-    if (!nextHeight) return
-    setMeasuredContentHeight((current) =>
-      current === nextHeight ? current : nextHeight,
-    )
-  }, [])
-  const sections = useMemo(() => {
-    if (!expanded) return [] as readonly Section[]
-    if (accessTier === 'limited') {
-      return [
-        { key: 'limited', label: '', models: otherModels },
-      ] satisfies readonly Section[]
-    }
-    return (
-      [
-        {
-          key: 'premium',
-          label: 'PREMIUM',
-          models: otherModels.filter((m) => isSavantFreePremiumModelId(m.id)),
-        },
-        {
-          key: 'unlimited',
-          label: 'UNLIMITED',
-          models: otherModels.filter((m) => !isSavantFreePremiumModelId(m.id)),
-        },
-      ] satisfies readonly Section[]
-    ).filter((section) => section.models.length > 0)
-  }, [expanded, accessTier, otherModels])
-
-  // Model rows in render order: the recommended hero first, then (when
-  // expanded) the grouped rest.
-  const renderedModelIds = useMemo(
-    () => [
-      recommendedModel.id,
-      ...sections.flatMap((section) => section.models.map((m) => m.id)),
-    ],
-    [recommendedModel, sections],
-  )
-  // Keyboard-navigable ids: the model rows, then the toggle, then any focus
-  // targets the referral banner registered (so arrowing down past "see all
-  // models" reaches its buttons; nextSavantFreeModelId wraps back to the top).
-  const navIds = useMemo(
-    () => [
-      ...renderedModelIds,
-      ...(canCollapse ? [TOGGLE_ID] : []),
-      ...extraTargetIds,
-    ],
-    [canCollapse, renderedModelIds, extraTargetIds],
-  )
-
-  // Keep focus valid as the list expands/collapses or the selection changes
-  // server-side. An explicit, still-valid focus (e.g. just set by the toggle)
-  // is preserved; only an out-of-range focus snaps back to the selection.
-  useEffect(() => {
-    setFocusedId((curr) =>
-      navIds.includes(curr)
-        ? curr
-        : navIds.includes(selectedModel)
-          ? selectedModel
-          : navIds[0]!,
-    )
-  }, [navIds, selectedModel])
-
-  useEffect(() => {
-    // Landing-screen safety net: if the in-memory selection becomes
-    // unavailable (e.g. deployment hours close while the picker is open),
-    // swap to the always-available fallback so Enter doesn't POST a model
-    // the server will immediately reject. In-memory only — the user's saved
-    // preference (e.g. Kimi or DeepSeek) is preserved for the next launch.
-    if (
-      (session?.status === 'none' || !session) &&
-      (!renderedModelIds.includes(selectedModel) ||
-        !isSavantFreeModelAvailable(selectedModel, new Date(now)))
-    ) {
-      setSelectedModel(renderedModelIds[0] ?? FALLBACK_SAVANT_FREE_MODEL_ID)
-    }
-  }, [renderedModelIds, now, selectedModel, session, setSelectedModel])
-
-  // No queued state any more: there's never a model the user is "already in"
-  // the queue for, so re-picking is always meaningful.
-  const committedModelId: string | null = null
-  const rateLimitsByModel = getRateLimitsByModel(session)
-  const referral = getReferralInfo(session)
-
-  // Premium-session quota, surfaced on the PREMIUM header itself: "N of M used
-  // · resets in …". All premium models share one pool; the server replicates
-  // the same snapshot under every model id, so any entry has the right count.
-  // The count shows from the start — even at "0 of M" — so full-access users
-  // can see the daily pool and reset cadence before they spend anything; it
-  // turns amber when the pool is exhausted — the same moment the premium rows
-  // grey out — so the header explains why they're disabled. (The PREMIUM
-  // section only renders for the full-access tier, so this is scoped to it.)
-  const sharedRateLimit = rateLimitsByModel
-    ? Object.values(rateLimitsByModel)[0]
-    : undefined
-  const premiumUsed = sharedRateLimit?.recentCount ?? 0
-  const premiumExhausted = premiumUsed >= SAVANT_FREE_PREMIUM_SESSION_LIMIT
-  // The pool resets daily on a Pacific-day boundary regardless of usage, so the
-  // countdown is meaningful even at zero used — getSavantFreePremiumResetAt falls
-  // back to the next day boundary when the server hasn't sent a resetAt yet.
-  const premiumResetCountdown = formatSavantFreePremiumResetCountdown(
-    getSavantFreePremiumResetAt({ rateLimitsByModel, nowMs: now }),
-    now,
-  )
-
-  const BUTTON_CHROME = 4 // 2 border + 2 padding
-  const NAME_GAP = 2 // spaces between name column and details column
-
-  // Two-column layout: a fixed name column (padded to the longest displayName
-  // across all rows) followed by a details column (tagline · warning ·
-  // deployment-hours/closed). Falls back to single-column mode on narrow
-  // terminals where the secondary details spill to an indented second line.
-  // Computed across ALL models (not just the expanded ones) so the recommended
-  // hero and the revealed rows share one width and nothing reflows on toggle.
-  const {
-    wrapDetails,
-    buttonOuterWidth,
-    nameColumnWidth,
-    recommendedOneLineLen,
-  } = useMemo(() => {
-    const nameLen = (m: SavantFreeModel) => m.displayName.length
-    const maxNameLen = Math.max(...availableModels.map(nameLen))
-
-    const detailsParts = (model: SavantFreeModel): number[] => {
-      const parts: number[] = []
-      parts.push(model.tagline.length)
-      if (model.warning) parts.push(model.warning.length)
-      if (model.availability === 'deployment_hours') {
-        parts.push(deploymentAvailabilityLabel.length)
-      }
-      return parts
-    }
-
-    const joinedLen = (parts: number[]): number =>
-      parts.reduce((a, b) => a + b, 0) + Math.max(0, parts.length - 1) * 3 // " · "
-
-    const oneLineLen = (model: SavantFreeModel): number =>
-      2 /* indicator + space */ +
-      maxNameLen +
-      NAME_GAP +
-      joinedLen(detailsParts(model))
-
-    // The cue lives only on the recommended hero, so only its line needs to fit
-    // the "Press Enter ↵" gutter. Folding that into the max means longer rows
-    // (e.g. DeepSeek Pro's data-collection warning) keep their natural width —
-    // the buttons widen only if the recommended row + cue is the longest line.
-    // Returned so the render path can right-align the cue against the same
-    // length the gutter was reserved for — one formula, no reserve/consume drift.
-    const recommendedOneLineLen = oneLineLen(recommendedModel)
-    const maxOneLineOuter =
-      Math.max(
-        ...availableModels.map(oneLineLen),
-        recommendedOneLineLen + CUE_GAP + FOCUS_CUE.length,
-      ) + BUTTON_CHROME
-    if (maxOneLineOuter <= contentMaxWidth) {
-      return {
-        wrapDetails: false,
-        buttonOuterWidth: maxOneLineOuter,
-        nameColumnWidth: maxNameLen,
-        recommendedOneLineLen,
-      }
-    }
-
-    // Narrow: line 1 = "indicator name · tagline", line 2 (if any) =
-    // "  warning · hours". Compute the max of both so all buttons stay the
-    // same width.
-    const labelLineLen = (m: SavantFreeModel) =>
-      2 + m.displayName.length + 3 + m.tagline.length
-    const detailsLineLen = (m: SavantFreeModel) => {
-      const parts: number[] = []
-      if (m.warning) parts.push(m.warning.length)
-      if (m.availability === 'deployment_hours') {
-        parts.push(deploymentAvailabilityLabel.length)
-      }
-      return parts.length === 0 ? 0 : 2 /* indent */ + joinedLen(parts)
-    }
-    const maxTwoLineInner = Math.max(
-      ...availableModels.map((m) =>
-        Math.max(labelLineLen(m), detailsLineLen(m)),
-      ),
-    )
-    return {
-      wrapDetails: true,
-      buttonOuterWidth: Math.min(
-        maxTwoLineInner + BUTTON_CHROME,
-        contentMaxWidth,
-      ),
-      nameColumnWidth: maxNameLen,
-      recommendedOneLineLen,
-    }
-  }, [
-    availableModels,
-    contentMaxWidth,
-    deploymentAvailabilityLabel,
-    recommendedModel,
-  ])
-
-  const rowWraps = useCallback(
-    (m: SavantFreeModel) =>
-      wrapDetails && (!!m.warning || m.availability === 'deployment_hours'),
-    [wrapDetails],
-  )
-
-  // Initial model-only height estimate. The content wrapper below reports its
-  // actual laid-out height, including wrapped referral copy and responsive
-  // action rows; this estimate only avoids a zero-height first frame.
-  // Headers add 1 row; sections after the first add 1 row of marginTop; the
-  // toggle adds its marginTop + 1.
-  const SECTION_GAP = 1
-  const TOGGLE_MARGIN = 1
-  const estimatedModelHeight = useMemo(() => {
-    let y = 0
-    const heroHeight = 2 + (rowWraps(recommendedModel) ? 2 : 1)
-    y += heroHeight
-    sections.forEach((section) => {
-      y += SECTION_GAP // every section sits below the hero (or prior one) with a gap
-      if (section.label) y += 1
-      section.models.forEach((m) => {
-        y += 2 + (rowWraps(m) ? 2 : 1)
-      })
-    })
-    if (canCollapse) {
-      y += TOGGLE_MARGIN
-      y += 1
-    }
-    return y
-  }, [sections, rowWraps, recommendedModel, canCollapse])
-
-  // When a referral exists, start at the parent's full allowance until the
-  // wrapper reports its intrinsic height. This is conservative for the first
-  // layout pass and cannot clip wrapped copy on a narrow terminal.
-  const contentHeight =
-    measuredContentHeight ?? (referral ? maxHeight : estimatedModelHeight)
-
-  const needsScroll = contentHeight > maxHeight
-  const scrollViewportHeight = Math.max(1, Math.min(contentHeight, maxHeight))
-  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
-
-  // Keep the keyboard-focused element inside the viewport as the user
-  // Tabs/arrows through a list taller than the available rows. Child ids let
-  // OpenTUI use the real post-wrap geometry instead of a second hand-maintained
-  // row model. Reset a stale offset when a resize makes everything fit.
-  useLayoutEffect(() => {
-    const sb = scrollRef.current
-    if (!sb) return
-    if (!needsScroll) {
-      sb.scrollTop = 0
-      return
-    }
-    sb.scrollChildIntoView(focusedId)
-    // The final referral action has explanatory/footer content after it. When
-    // it is focused, reveal the real bottom of the measured content as well as
-    // the button itself so the card does not look cut off.
-    if (focusedId === extraTargetIds.at(-1)) {
-      sb.scrollTop = Math.max(0, sb.scrollHeight - sb.viewport.height)
-    }
-  }, [focusedId, contentHeight, needsScroll, extraTargetIds])
-
-  const isJoinable = useCallback(
-    (modelId: string) => {
-      if (!isSavantFreeModelAvailable(modelId, new Date(now))) return false
-      const rateLimit = rateLimitsByModel?.[modelId]
-      return !rateLimit || rateLimit.recentCount < rateLimit.limit
-    },
-    [now, rateLimitsByModel],
-  )
-
-  const pick = useCallback(
-    (modelId: string) => {
-      if (pending) return
-      if (modelId === committedModelId) return
-      if (!isJoinable(modelId)) return
-      setPending(modelId)
-      startSavantFreeSession(modelId).finally(() => setPending(null))
-    },
-    [pending, committedModelId, isJoinable],
-  )
-
-  const toggleExpanded = useCallback(() => {
-    setExpanded((prev) => {
-      const next = !prev
-      // After revealing the list, drop focus onto the first newly-shown row so
-      // the next arrow press walks into it; after collapsing, return to the
-      // hero so Enter starts.
-      setFocusedId(
-        next
-          ? (otherModels[0]?.id ?? recommendedModel.id)
-          : recommendedModel.id,
-      )
-      return next
-    })
-  }, [otherModels, recommendedModel])
-
-  // Tab / Shift+Tab and arrow keys move the focus highlight only; Enter or
-  // Space commits the focused row (or fires the toggle). Two-step navigation
-  // lets the user preview the highlight before committing.
-  useKeyboard(
-    useCallback(
-      (key: KeyEvent) => {
-        if (pending) return
-        const name = key.name ?? ''
-        const direction = savantFreeModelNavigationDirectionForKey(key)
-        // Use the shared Enter detector so the keypad Enter and the niche
-        // Linux terminals that send \n (linefeed) for Enter also commit; a
-        // raw name === 'return' check silently ignores those, which looks
-        // like a frozen menu (arrows move the highlight, Enter does nothing).
-        const isCommit = isPlainEnterKey(key) || name === 'space'
-        if (isCommit) {
-          if (focusedId === TOGGLE_ID) {
-            key.preventDefault?.()
-            key.stopPropagation?.()
-            toggleExpanded()
-            return
-          }
-          // A referral-banner button (copy invite link / use GLM) is focused —
-          // fire its registered action instead of joining a queue.
-          const extraTarget = extraTargets.find((t) => t.id === focusedId)
-          if (extraTarget) {
-            key.preventDefault?.()
-            key.stopPropagation?.()
-            extraTarget.activate()
-            return
-          }
-          if (isJoinable(focusedId) && focusedId !== committedModelId) {
-            key.preventDefault?.()
-            key.stopPropagation?.()
-            pick(focusedId)
-          }
-          return
-        }
-        if (!direction) return
-        const targetId = nextSavantFreeModelId({
-          modelIds: navIds,
-          focusedId,
-          direction,
-        })
-        if (targetId) {
-          key.preventDefault?.()
-          key.stopPropagation?.()
-          setFocusedId(targetId)
-        }
-      },
-      [
-        pending,
-        pick,
-        toggleExpanded,
-        focusedId,
-        committedModelId,
-        isJoinable,
-        navIds,
-        extraTargets,
-      ],
-    ),
-  )
-
-  const renderModelButton = (
-    model: SavantFreeModel,
-    options: { recommended?: boolean } = {},
-  ) => {
-    // Single visual state: the focused row IS the highlight. The user's
-    // saved/committed pick is not shown separately — it just sets where
-    // focus lands when the picker opens. Pressing Enter on the focused
-    // row commits it.
-    const { recommended = false } = options
-    const isHovered = hoveredId === model.id
-    const isFocused = focusedId === model.id
-    const canJoin = isJoinable(model.id)
-    // Clickable whenever picking would actually do something — i.e.
-    // anything except re-picking the queue we're already in.
-    const interactable = !pending && canJoin && model.id !== committedModelId
-
-    // Focused row: green border + arrow indicator + bold name. The name
-    // itself stays the normal foreground color so it doesn't shout — the
-    // border and arrow do the highlighting. Off-focus rows are default.
-    const indicator = isFocused ? '›' : ' '
-    const fgColor = canJoin ? theme.foreground : theme.muted
-    const mutedColor = theme.muted
-    const warningColor = theme.secondary
-
-    // Focused row gets the bright primary border (and arrow). Every other row —
-    // including the recommended card when the cursor has moved elsewhere — stays
-    // quiet (gray border, brightening only on hover) so it never competes with
-    // the user's current selection. The recommended card still reads as special
-    // via its "RECOMMENDED" border title, which the border color carries.
-    const borderColor = isFocused
-      ? theme.primary
-      : isHovered
-        ? theme.foreground
-        : theme.border
-
-    // Deployment-hours rows show "until 5pm PT" while open and "opens 9am ET"
-    // while closed (the label flips inside getSavantFreeDeploymentAvailabilityLabel),
-    // so the same string carries both the in-hours and out-of-hours signals
-    // without a separate "Closed" chip. Greyed-out fgColor handles the rest.
-    const hasHours = model.availability === 'deployment_hours'
-    const hasWarning = !!model.warning
-
-    // Spaces inside <span>s render verbatim, so we hand-pad the name to align
-    // taglines into a column. nameColumnWidth is the longest name across all
-    // rows, so the diff is >= 0; +NAME_GAP guarantees breathing room even on
-    // the widest row.
-    const namePadding = ' '.repeat(
-      nameColumnWidth - model.displayName.length + NAME_GAP,
-    )
-
-    // Right-aligned "Press Enter ↵" cue on the focused recommended row only.
-    // Right-align against recommendedOneLineLen — the exact length the gutter was
-    // reserved against above — so reserve and consume can't drift. The reservation
-    // guarantees cuePad >= CUE_GAP in one-line mode; the guard keeps it safe in
-    // wrap mode (no gutter reserved there) and against any contentMaxWidth clamp.
-    const cuePad =
-      buttonOuterWidth -
-      BUTTON_CHROME -
-      recommendedOneLineLen -
-      FOCUS_CUE.length
-    const showCue =
-      recommended &&
-      isFocused &&
-      interactable &&
-      !wrapDetails &&
-      cuePad >= CUE_GAP
-
-    return (
-      <Button
-        key={model.id}
-        id={model.id}
-        title={recommended ? ' RECOMMENDED ' : undefined}
-        titleAlignment={recommended ? 'left' : undefined}
-        onClick={() => {
-          setFocusedId(model.id)
-          if (canJoin) pick(model.id)
-        }}
-        onMouseOver={() => interactable && setHoveredId(model.id)}
-        onMouseOut={() =>
-          setHoveredId((curr) => (curr === model.id ? null : curr))
-        }
-        style={{
-          borderStyle: 'single',
-          borderColor,
-          paddingLeft: 1,
-          paddingRight: 1,
-          width: buttonOuterWidth,
-        }}
-        border={['top', 'bottom', 'left', 'right']}
-      >
-        <text>
-          <span fg={fgColor}>{indicator} </span>
-          <span
-            fg={fgColor}
-            attributes={isFocused ? TextAttributes.BOLD : TextAttributes.NONE}
-          >
-            {model.displayName}
-          </span>
-          {wrapDetails ? (
-            <span fg={mutedColor}> · {model.tagline}</span>
-          ) : (
-            <>
-              <span fg={mutedColor}>{namePadding + model.tagline}</span>
-              {hasWarning && <span fg={warningColor}> · {model.warning}</span>}
-              {hasHours && (
-                <span fg={mutedColor}> · {deploymentAvailabilityLabel}</span>
-              )}
-              {showCue && (
-                <span fg={theme.primary} attributes={TextAttributes.BOLD}>
-                  {' '.repeat(cuePad) + FOCUS_CUE}
-                </span>
-              )}
-            </>
-          )}
-        </text>
-        {wrapDetails && (hasWarning || hasHours) && (
-          <text>
-            <span> </span>
-            {hasWarning && <span fg={warningColor}>{model.warning}</span>}
-            {hasWarning && hasHours && <span fg={mutedColor}> · </span>}
-            {hasHours && (
-              <span fg={mutedColor}>{deploymentAvailabilityLabel}</span>
-            )}
-          </text>
-        )}
-      </Button>
-    )
-  }
-
-  const sectionsContent = sections.map((section) => (
-    <box
-      key={section.key}
-      style={{
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        gap: 0,
-        marginTop: SECTION_GAP,
-      }}
-    >
-      {/* wrapMode 'none' pins headers to one row — the offset math above
-          assumes exactly 1 row per header, so a wrap would desync the
-          focused-row auto-scroll. */}
-      {section.label && (
-        <text style={{ fg: theme.muted, wrapMode: 'none' }}>
-          {section.label}
-          {section.key === 'premium' && (
-            <span fg={premiumExhausted ? theme.secondary : theme.muted}>
-              {' '}
-              · {formatSessionUnits(premiumUsed)} of{' '}
-              {SAVANT_FREE_PREMIUM_SESSION_LIMIT} used
-            </span>
-          )}
-          {section.key === 'premium' && premiumResetCountdown && (
-            <span fg={theme.muted}> · resets in {premiumResetCountdown}</span>
-          )}
-        </text>
-      )}
-      {section.models.map((m) => renderModelButton(m))}
-    </box>
-  ))
-
-  // Expand/collapse affordance. Collapsed: "see all N models" invites the user
-  // to browse past the recommended pick. Expanded: a quiet way back to the
-  // single-card view.
-  const toggleFocused = focusedId === TOGGLE_ID
-  const toggleHovered = hoveredId === TOGGLE_ID
-  const toggleColor = toggleFocused
-    ? theme.primary
-    : toggleHovered
-      ? theme.foreground
-      : theme.muted
-  const toggleLabel = expanded
-    ? '↑  Show fewer'
-    : `↓  See all ${availableModels.length} models`
-  const toggleContent = canCollapse ? (
-    <Button
-      id={TOGGLE_ID}
-      onClick={toggleExpanded}
-      onMouseOver={() => setHoveredId(TOGGLE_ID)}
-      onMouseOut={() =>
-        setHoveredId((curr) => (curr === TOGGLE_ID ? null : curr))
-      }
-      style={{ marginTop: TOGGLE_MARGIN }}
-    >
-      <text style={{ wrapMode: 'none' }}>
-        <span
-          fg={toggleColor}
-          attributes={toggleFocused ? TextAttributes.BOLD : TextAttributes.NONE}
-        >
-          {toggleLabel}
-        </span>
-      </text>
-    </Button>
-  ) : null
-
-  // Scrollbox clamped to the rows the parent can spare. When everything fits
-  // it shrinks to the content height and no scrollbar shows, so tall
-  // terminals look exactly like a plain column.
-  return (
-    <scrollbox
-      ref={scrollRef}
-      scrollX={false}
-      scrollbarOptions={{ visible: false }}
-      verticalScrollbarOptions={{
-        visible: needsScroll,
-        trackOptions: { width: 1 },
-      }}
-      style={{
-        height: scrollViewportHeight,
-        // A scrollbox stretches to fill its parent, which would left-align
-        // the picker; pin it to the button column width (plus a gutter for
-        // the scrollbar) so the landing block stays content-sized and the
-        // parent can center it as it did before this was a scrollbox.
-        width: buttonOuterWidth + (needsScroll ? 1 : 0),
-        flexShrink: 0,
-        rootOptions: {
-          flexDirection: 'row',
-          backgroundColor: 'transparent',
-        },
-        wrapperOptions: {
-          border: false,
-          backgroundColor: 'transparent',
-          flexDirection: 'column',
-        },
-        contentOptions: {
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          gap: 0,
-          backgroundColor: 'transparent',
-        },
-      }}
-    >
-      <box
-        ref={contentRef}
-        onSizeChange={syncContentHeight}
-        style={{
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          gap: 0,
-          width: buttonOuterWidth,
-          flexShrink: 0,
-        }}
-      >
-        {renderModelButton(recommendedModel, { recommended: true })}
-        {sectionsContent}
-        {toggleContent}
-        {referral && (
-          <SavantFreeReferralBanner
-            width={buttonOuterWidth}
-            referral={referral}
-            accessTier={accessTier}
-            focusedId={focusedId}
-            onFocusTargetsChange={setExtraTargets}
-          />
-        )}
-      </box>
-    </scrollbox>
-  )
-}