@alumbwe/anvil 1.0.0

package/src/components/freebuff-landing-screen.tsx

@@ -0,0 +1,865 @@
+import { TextAttributes } from '@opentui/core'
+import { useKeyboard, useRenderer } from '@opentui/react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import { Button } from './button'
+import { ChoiceAdBanner, AD_CARD_HEIGHT } from './ad-banner'
+import { FreebuffModelSelector } from './freebuff-model-selector'
+import { ShimmerText } from './shimmer-text'
+import {
+  refreshFreebuffLandingMetadata,
+  takeOverFreebuffSession,
+} from '../hooks/use-freebuff-session'
+import { useFreebuffCtrlCExit } from '../hooks/use-freebuff-ctrl-c-exit'
+import { useFreebuffStreakQuery } from '../hooks/use-freebuff-streak-query'
+import { useGravityAd } from '../hooks/use-gravity-ad'
+import { useLogo } from '../hooks/use-logo'
+import { useNow } from '../hooks/use-now'
+import { useSheenAnimation } from '../hooks/use-sheen-animation'
+import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
+import { useTheme } from '../hooks/use-theme'
+import { exitCliCleanly } from '../utils/exit-cleanly'
+import {
+  formatFreebuffPremiumResetCountdown,
+  getFreebuffPremiumResetAt,
+} from '../utils/freebuff-premium-reset'
+import {
+  FREEBUFF_STREAK_INLINE_GAP,
+  FREEBUFF_STREAK_LABEL_GAP,
+  fitsFreebuffStreakOnHeadingRow,
+  getFreebuffStreakBonusNoteForLayout,
+  getFreebuffStreakLine,
+} from '../utils/freebuff-streak-line'
+import { formatSessionUnits } from '../utils/format-session-units'
+import { isPlainEnterKey } from '../utils/terminal-enter-detection'
+import { getLogoAccentColor, getLogoBlockColor } from '../utils/theme-system'
+import { INVERTED_CTA_FG } from '../utils/ui-constants'
+import {
+  FREEBUFF_ENABLE_STREAK_IN_UI,
+  FREEBUFF_LIMITED_SESSION_LIMIT,
+  FREEBUFF_PREMIUM_SESSION_LIMIT,
+} from '@anvil/common/constants/freebuff-models'
+import {
+  getRateLimitsByModel,
+  getReferralInfo,
+} from '@anvil/common/types/freebuff-session'
+import { getFreebuffModelAvailabilityNotice } from '@anvil/common/util/freebuff-model-availability'
+import { formatFreebuffHardBlockedPrivacySignals } from '@anvil/common/util/freebuff-privacy'
+
+import type { FreebuffStreakLine } from '../utils/freebuff-streak-line'
+import type { FreebuffSessionFailure } from '../state/freebuff-session-store'
+import type { FreebuffSessionResponse } from '../types/freebuff-session'
+import type { KeyEvent } from '@opentui/core'
+
+interface FreebuffLandingScreenProps {
+  session: FreebuffSessionResponse | null
+  failure: FreebuffSessionFailure | null
+}
+
+/** Landing-screen heading. Referenced both as rendered text and by the
+ *  picker's height-budget math (wrappedRows), so it lives in one place to keep
+ *  the two from drifting. */
+const LANDING_HEADING = 'Start coding for free'
+const COLLAPSED_LOGO_MIN_HEIGHT = 26
+
+/** "in ~3h 20m" / "in ~45 min" / "in under a minute". Used on the
+ *  rate-limited screen so users know when they can try again. */
+const formatRetryAfter = (ms: number): string => {
+  if (!Number.isFinite(ms) || ms <= 0) return 'any moment now'
+  const minutes = Math.round(ms / 60_000)
+  if (minutes < 1) return 'under a minute'
+  if (minutes < 60) return `${minutes} min`
+  const hours = Math.floor(minutes / 60)
+  const rem = minutes % 60
+  return rem === 0 ? `${hours}h` : `${hours}h ${rem}m`
+}
+
+// Rendered directly under the model list — that's where "why these models?"
+// gets asked. The copy itself is shared with Freebuff Desktop's model menu; see
+// `getFreebuffModelAvailabilityNotice` for the tone rules it follows.
+const getLimitedModeNotice = (
+  session: FreebuffSessionResponse | null,
+): string | null =>
+  getFreebuffModelAvailabilityNotice(
+    session && 'countryBlockReason' in session ? session : null,
+  )
+
+function getTakeoverErrorMessage(failure: FreebuffSessionFailure): string {
+  if (failure.type === 'http' && failure.statusCode === 503) {
+    return "Freebuff is busy and couldn't complete the takeover yet."
+  }
+  if (failure.type === 'timeout') {
+    return failure.outcomeUnknown
+      ? 'The takeover request timed out and may have succeeded. Check the warning, then retry if you still want to take over.'
+      : failure.retry
+        ? 'The takeover request timed out while Freebuff was busy.'
+        : 'The takeover request timed out.'
+  }
+  if (failure.outcomeUnknown) {
+    return "Freebuff couldn't confirm whether the takeover succeeded. Check the warning, then retry if you still want to take over."
+  }
+  return failure.message.trim()
+    ? `Takeover failed: ${failure.message}`
+    : 'The takeover failed unexpectedly.'
+}
+
+export const TakeoverPrompt: React.FC<{
+  failure: FreebuffSessionFailure | null
+  onTakeOver?: () => Promise<void>
+}> = ({ failure, onTakeOver = takeOverFreebuffSession }) => {
+  const theme = useTheme()
+  const [pending, setPending] = useState(false)
+  const [focusedIndex, setFocusedIndex] = useState(0) // 0 = Take over, 1 = Exit
+  const takeoverInFlightRef = useRef(false)
+  const retry = failure?.retry ?? null
+  const retryTick = useNow(1_000, retry !== null)
+  // `useNow` freezes while disabled. Use the current time when a retry first
+  // appears so a long-open prompt cannot render a stale countdown for a frame.
+  const retryNow = retry ? Math.max(retryTick, Date.now()) : retryTick
+  const retrySeconds = retry
+    ? Math.max(0, Math.ceil((retry.retryAtMs - retryNow) / 1_000))
+    : 0
+  const outcomeUnknown = failure?.outcomeUnknown ?? false
+  const blocked = pending
+  const displayError = failure ? getTakeoverErrorMessage(failure) : null
+
+  const handleTakeover = useCallback(async () => {
+    // `pending` updates on the next render. The ref closes the gap where two
+    // keyboard/mouse events arrive in the same frame and would both POST.
+    if (takeoverInFlightRef.current) return
+    takeoverInFlightRef.current = true
+    setPending(true)
+    try {
+      await onTakeOver()
+    } finally {
+      takeoverInFlightRef.current = false
+      setPending(false)
+    }
+  }, [onTakeOver])
+
+  useKeyboard(
+    useCallback(
+      (key: KeyEvent) => {
+        const name = key.name ?? ''
+        const isConfirm = isPlainEnterKey(key)
+        const isExit = name === 'escape' || name === 'esc'
+        const isTab = name === 'tab'
+        const isShiftTab = key.shift === true && isTab
+        const isRight = name === 'right'
+        const isLeft = name === 'left'
+
+        if (isExit) {
+          key.preventDefault?.()
+          void exitCliCleanly()
+          return
+        }
+
+        if (isConfirm) {
+          key.preventDefault?.()
+          if (focusedIndex === 0) {
+            void handleTakeover()
+          } else {
+            void exitCliCleanly()
+          }
+          return
+        }
+
+        if (isRight || isTab) {
+          key.preventDefault?.()
+          setFocusedIndex((prev) => (prev + 1) % 2)
+          return
+        }
+
+        if (isLeft || isShiftTab) {
+          key.preventDefault?.()
+          setFocusedIndex((prev) => (prev - 1 + 2) % 2)
+          return
+        }
+      },
+      [focusedIndex, handleTakeover],
+    ),
+  )
+
+  const isTakeoverFocused = focusedIndex === 0
+  const isExitFocused = focusedIndex === 1
+  const takeoverLabel = pending
+    ? 'Taking over...'
+    : outcomeUnknown
+      ? 'Try takeover again'
+      : retry
+        ? 'Retry now'
+        : 'Take over'
+  const takeoverForeground = blocked
+    ? theme.muted
+    : isTakeoverFocused
+      ? INVERTED_CTA_FG
+      : theme.foreground
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 1,
+        width: '100%',
+      }}
+    >
+      <text style={{ fg: theme.foreground }} attributes={TextAttributes.BOLD}>
+        Freebuff is already running
+      </text>
+
+      <text style={{ fg: theme.muted }}>
+        Only one freebuff instance is allowed at a time.
+      </text>
+
+      {displayError && (
+        <text style={{ fg: theme.secondary, wrapMode: 'word' }}>
+          ⚠ {displayError}
+        </text>
+      )}
+
+      {retry && (
+        <text style={{ fg: theme.muted }}>
+          {retrySeconds > 0
+            ? `Retrying automatically in ${retrySeconds}s (attempt ${retry.attempt}).`
+            : `Retrying automatically now (attempt ${retry.attempt}).`}
+        </text>
+      )}
+
+      <box style={{ flexDirection: 'row', gap: 2, marginTop: 1 }}>
+        <Button
+          onClick={blocked ? undefined : handleTakeover}
+          onMouseOver={() => setFocusedIndex(0)}
+          style={{ paddingLeft: 1, paddingRight: 1 }}
+          border={['top', 'bottom', 'left', 'right']}
+          borderStyle="single"
+          borderColor={blocked ? theme.muted : theme.primary}
+        >
+          <text
+            style={{
+              // theme.background is 'transparent' and can't serve as inverted
+              // text — on the green fill it renders the label invisible.
+              fg: takeoverForeground,
+              bg: isTakeoverFocused && !blocked ? theme.primary : undefined,
+            }}
+            attributes={TextAttributes.BOLD}
+          >
+            {takeoverLabel}
+          </text>
+        </Button>
+        <Button
+          onClick={() => exitCliCleanly()}
+          onMouseOver={() => setFocusedIndex(1)}
+          style={{ paddingLeft: 1, paddingRight: 1 }}
+          border={['top', 'bottom', 'left', 'right']}
+          borderStyle="single"
+          borderColor={isExitFocused ? theme.foreground : theme.muted}
+        >
+          <text
+            style={{ fg: isExitFocused ? theme.foreground : theme.muted }}
+            attributes={
+              isExitFocused ? TextAttributes.BOLD : TextAttributes.NONE
+            }
+          >
+            Exit
+          </text>
+        </Button>
+      </box>
+    </box>
+  )
+}
+
+/** "N day streak" then its progress dots, as spans so both placements (beside
+ *  the heading, or its own line under it) draw the streak identically. */
+const streakSpans = (
+  line: FreebuffStreakLine,
+  theme: ReturnType<typeof useTheme>,
+) => [
+  <span key="label" fg={theme.foreground}>
+    {line.label}
+  </span>,
+  <span key="dots" fg={theme.primary}>
+    {`${' '.repeat(FREEBUFF_STREAK_LABEL_GAP)}${line.dots}`}
+  </span>,
+]
+
+/** Streak on its own line under the heading, for terminals too narrow to
+ *  share the row. For streak === 0 the line is rendered blank so new / lapsed
+ *  users are nudged to start using the product rather than shown an empty
+ *  streak (and so the picker doesn't jump once they earn their first day). */
+const StreakInlineLine: React.FC<{
+  line: FreebuffStreakLine | null
+}> = ({ line }) => {
+  const theme = useTheme()
+
+  if (!line) {
+    return <text style={{ flexShrink: 0 }}> </text>
+  }
+
+  return (
+    <text style={{ flexShrink: 0, wrapMode: 'none' }}>
+      {streakSpans(line, theme)}
+    </text>
+  )
+}
+
+/** Heading row: the title, with the streak beside it when the caller passes
+ *  one (only when it fits — see fitsFreebuffStreakOnHeadingRow).
+ *
+ *  Deliberately ONE text rather than a space-between flex row. The row this
+ *  replaces put the two in a stretched row inside a shrink-to-fit column,
+ *  which had two problems: with nothing wider on screen there was no free
+ *  space to distribute, so the two rendered flush ("Start coding for
+ *  free18 day streak"), and a space-between row whose content overflows its
+ *  container segfaults the renderer — reachable by dragging the terminal
+ *  narrower, since the native layout runs against the old tree before React
+ *  re-renders. A single text just wraps, and the gap is explicit.
+ *
+ *  Exported for the layout test. */
+export const LandingHeadingRow: React.FC<{
+  streakLine: FreebuffStreakLine | null
+  marginBottom: number
+}> = ({ streakLine, marginBottom }) => {
+  const theme = useTheme()
+
+  return (
+    <text style={{ marginBottom, wrapMode: 'word' }}>
+      <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
+        {LANDING_HEADING}
+      </span>
+      {streakLine && [
+        <span key="gap">{' '.repeat(FREEBUFF_STREAK_INLINE_GAP)}</span>,
+        ...streakSpans(streakLine, theme),
+      ]}
+    </text>
+  )
+}
+
+export const FreebuffLandingScreen: React.FC<FreebuffLandingScreenProps> = ({
+  session,
+  failure,
+}) => {
+  const theme = useTheme()
+  const renderer = useRenderer()
+  const { terminalWidth, terminalHeight, contentMaxWidth } =
+    useTerminalDimensions()
+
+  // Progressive disclosure as the terminal gets shorter. The picker is the
+  // only thing the user must be able to reach, so chrome is shed first:
+  //   tall   (>=40): full 6-line ASCII logo + roomy spacing, content anchored low
+  //   shorter      : no logo — the heading already identifies the experience
+  //   tiny   (<18) : also drop the ad banner
+  // The big logo is reserved for genuinely tall windows; at the common ~30-row
+  // height we hide the branding so more models fit without scrolling.
+  // Section headers always show — the picker scrolls within whatever rows
+  // remain (see selectorMaxHeight below), so there's no need to hide them.
+  //
+  // Exception: when the picker is collapsed it shrinks to ~5 rows, freeing the
+  // ~6 rows the big logo needs. So on a mid-height window with a collapsed,
+  // referral-free picker we still show the full ASCII logo — it fills what
+  // would otherwise be dead space above the card. A referral card or expanded
+  // list gives those rows back to the scrollable menu. 26 is the smallest
+  // window where the logo block,
+  // heading, collapsed picker, streak, and ad all coexist without scrolling.
+  //
+  // The picker (rendered below) owns this and reports it via onExpandedChange;
+  // we default to collapsed so the first paint reserves logo space correctly.
+  const [selectorExpanded, setSelectorExpanded] = useState(false)
+  const hasReferralMenu =
+    session?.status === 'none' && Boolean(getReferralInfo(session))
+  const logoHeightFits =
+    terminalHeight >= 40 ||
+    (!selectorExpanded &&
+      !hasReferralMenu &&
+      terminalHeight >= COLLAPSED_LOGO_MIN_HEIGHT)
+  const compact = terminalHeight < 22
+  const showAds = terminalHeight >= 18
+  const textMarginBottom = 1
+
+  const [sheenPosition, setSheenPosition] = useState(0)
+  const blockColor = getLogoBlockColor(theme.name)
+  const accentColor = getLogoAccentColor(theme.name)
+  const { applySheenToChar } = useSheenAnimation({
+    logoColor: theme.foreground,
+    accentColor,
+    blockColor,
+    terminalWidth: renderer?.width ?? terminalWidth,
+    sheenPosition,
+    setSheenPosition,
+  })
+  const { component: logoComponent, textBlock: logoTextBlock } = useLogo({
+    availableWidth: contentMaxWidth,
+    accentColor,
+    blockColor,
+    applySheenToChar,
+  })
+  // useLogo falls back to a one-line brand label when the ASCII variants do
+  // not fit horizontally. This landing screen intentionally hides that label.
+  const showFullLogo = logoHeightFits && logoTextBlock.length > 0
+
+  // Always enable ads on the landing screen — this is where monetization lives.
+  // forceStart bypasses the "wait for first user message" gate inside the hook,
+  // which would otherwise block ads here since no conversation exists yet.
+  // The server tries Gravity first, then falls back to ZeroClick and Carbon.
+  const { ads, recordClick, recordImpression } = useGravityAd({
+    enabled: true,
+    forceStart: true,
+    provider: 'gravity',
+    // Legacy wire name for this surface — the ads API maps it to placements,
+    // so it must not change with the component rename.
+    surface: 'waiting_room',
+  })
+
+  useFreebuffCtrlCExit()
+
+  const [exitHover, setExitHover] = useState(false)
+
+  const accessTier =
+    session && 'accessTier' in session ? session.accessTier : 'full'
+  // Hidden in compact terminals: the notice is nice-to-have context, and
+  // below 22 rows every line competes with the picker itself.
+  const limitedModeNotice =
+    accessTier === 'limited' && !compact ? getLimitedModeNotice(session) : null
+  // 'none' = user hasn't started a session yet. We're in the pre-chat landing
+  // state: show the picker with a prompt. Picking a model triggers
+  // startFreebuffSession, which POSTs and transitions straight to 'active' (chat).
+  const isLanding = session?.status === 'none'
+  const streakQuery = useFreebuffStreakQuery({
+    enabled: FREEBUFF_ENABLE_STREAK_IN_UI && isLanding,
+  })
+  const streak = streakQuery.data?.streak ?? 0
+  // The indicator normally shares the heading row, so keep its slot even in
+  // compact-height terminals. It renders blank space until a streak is active.
+  const showStreakIndicator = FREEBUFF_ENABLE_STREAK_IN_UI && isLanding
+  // Once a full week is earned, explain the recurring perk under the picker so
+  // the streak reads as worth keeping. Pre-milestone countdown copy stays
+  // hidden; this dedicated row is only for a bonus the user has already earned.
+  const streakBonusNote = showStreakIndicator
+    ? getFreebuffStreakBonusNoteForLayout({
+        streak,
+        accessTier: accessTier === 'limited' ? 'limited' : 'full',
+        terminalHeight,
+        availableWidth: contentMaxWidth,
+      })
+    : null
+  // On the landing screen the streak rides on the heading row, a fixed gap
+  // after the title. Measured against the real strings (the label grows with
+  // the day count), so
+  // a streak that can't clear the inline gap drops to its own line under the
+  // heading instead of colliding with it. With no streak yet, the day-one line
+  // stands in, reserving the slot where the streak will land.
+  const streakLine = showStreakIndicator ? getFreebuffStreakLine(streak) : null
+  const streakOnHeadingRow =
+    showStreakIndicator &&
+    fitsFreebuffStreakOnHeadingRow({
+      line: streakLine,
+      headingWidth: LANDING_HEADING.length,
+      availableWidth: contentMaxWidth,
+    })
+  // On the landing picker we tick once a minute so the session reset countdown
+  // stays fresh.
+  const now = useNow(60_000, isLanding)
+
+  // Free-session quota counter for the title line. All free models share one
+  // pool; the server replicates the same snapshot under each free model
+  // id, so any entry has the right count. Renders amber when exhausted so
+  // the limit reads as "you've hit it" rather than just another count.
+  const rateLimitsByModel = getRateLimitsByModel(session)
+  const sessionRateLimit = rateLimitsByModel
+    ? Object.values(rateLimitsByModel)[0]
+    : undefined
+  const sharedSessionUsed = sessionRateLimit?.recentCount ?? 0
+  // Hide the "0 of N … used" line entirely for a fresh user — a zeroed counter
+  // is noise on the landing screen. It appears once any session is consumed.
+  //
+  // For the regular tiers the PREMIUM section header inside the expanded
+  // picker carries this quota inline, so the below-picker line survives for
+  // the limited tier (which has no premium section to host it) and for the
+  // collapsed picker. When the collapsed recommended hero is a premium model
+  // (getRecommendedFreebuffModelId, while the pool has sessions left) the count
+  // is exactly what Enter is about to spend.
+  const showSessionCounter = sharedSessionUsed > 0
+  const showBelowPickerCounter =
+    showSessionCounter && (accessTier === 'limited' || !selectorExpanded)
+  // Prefer the server-sent limit (base + streak/referral bonuses) so the
+  // counter and its amber exhausted cue match what admission will enforce;
+  // the static constants only cover the pre-snapshot fallback.
+  const sessionLimit =
+    sessionRateLimit?.limit ??
+    (accessTier === 'limited'
+      ? FREEBUFF_LIMITED_SESSION_LIMIT
+      : FREEBUFF_PREMIUM_SESSION_LIMIT)
+  const isSessionExhausted = sharedSessionUsed >= sessionLimit
+  const sessionUsedColor = isSessionExhausted ? theme.secondary : theme.muted
+  const sessionLabel =
+    accessTier === 'limited' ? 'sessions' : 'premium sessions'
+  const formattedSharedSessionUsed = formatSessionUnits(sharedSessionUsed)
+  const sessionResetAt = getFreebuffPremiumResetAt({
+    rateLimitsByModel,
+    nowMs: now,
+  })
+  const sessionResetAtMs = sessionResetAt.getTime()
+  const sessionResetCountdown = formatFreebuffPremiumResetCountdown(
+    sessionResetAt,
+    now,
+  )
+
+  // Rows the picker may occupy = terminal height minus the fixed chrome
+  // around it. Each term mirrors the real layout exactly (no padded
+  // estimate, no blanket safety row) so the scrollbox fills the available
+  // space with no dead band below it:
+  //   - top bar: paddingTop 1 + the ✕ row = 2
+  //   - ad banner: AD_CARD_HEIGHT, only when shown
+  //   - main box: paddingBottom 1
+  //   - logo block: lines + marginBottom 1 (always, when shown) + gap (full)
+  //   - the prompt/counter (landing)
+  // Line wrapping is derived from the actual strings vs contentMaxWidth, so
+  // a wrapped counter is accounted for precisely instead of guessed at.
+  const wrappedRows = (text: string) =>
+    Math.max(1, Math.ceil(text.length / contentMaxWidth))
+  const logoBlockRows = showFullLogo
+    ? 8 /* 6 logo lines + marginBottom + gap */
+    : 0
+  const adRows = showAds ? AD_CARD_HEIGHT : 0
+  // Status lines render below the picker, each with marginTop 1: the
+  // limited-mode notice, then the streak. They still eat into the picker's
+  // height budget regardless of being above or below it. (The session counter
+  // used to sit here too; it now rides inside the selector — see below.)
+  // Placement varies: on a wide landing screen the streak shares
+  // the heading row (0 extra rows, already counted in landingTextRows); on a
+  // narrow landing screen it drops to its own line under the heading (1 row,
+  // no top margin).
+  const streakRows = !showStreakIndicator ? 0 : streakOnHeadingRow ? 0 : 1
+  const noticeRows = limitedModeNotice
+    ? 1 /* marginTop */ + wrappedRows(limitedModeNotice)
+    : 0
+  // Earned streak perk note: one marginTop row + wrap.
+  const streakBonusRows = streakBonusNote
+    ? 1 /* marginTop */ + wrappedRows(streakBonusNote)
+    : 0
+  // The referral/GLM card and the session counter both live inside the model
+  // selector's scrollbox now (the counter rides `belowToggle`, between the
+  // expand toggle and the referral pitch), so only genuinely fixed status
+  // lines below the selector reduce its viewport. Anything inside the
+  // scrollbox is measured by the selector itself and must NOT be reserved
+  // here as well, or the viewport shrinks while the content grows.
+  const belowPickerRows = streakRows + noticeRows + streakBonusRows
+  const reservedChrome = 2 + adRows + 1 /* main paddingBottom */ + logoBlockRows
+  const landingTextRows =
+    wrappedRows(LANDING_HEADING) + textMarginBottom + belowPickerRows
+  // Floor = one whole recommended card: 2 border rows + its 2 text lines (name
+  // + tagline, then the AI-training warning on its own line). Rows grew from
+  // one text line to two when the warning stopped inlining, so the old floor of
+  // 3 left the card's bottom border clipped on a very short terminal. (The
+  // warning itself stays visible either way — scrollTop starts at 0, so it is
+  // the last row that gets cut, not the first.)
+  const MIN_SELECTOR_ROWS = 4
+  const selectorMaxHeight = Math.max(
+    MIN_SELECTOR_ROWS,
+    terminalHeight - reservedChrome - landingTextRows,
+  )
+
+  useEffect(() => {
+    if (!isLanding || !sessionRateLimit) return
+
+    const delayMs = Math.max(0, sessionResetAtMs - Date.now() + 1_000)
+    const timer = setTimeout(() => {
+      refreshFreebuffLandingMetadata().catch(() => {})
+    }, delayMs)
+
+    return () => clearTimeout(timer)
+  }, [isLanding, sessionRateLimit, sessionResetAtMs])
+
+  return (
+    <box
+      style={{
+        width: '100%',
+        height: '100%',
+        flexDirection: 'column',
+        backgroundColor: theme.background,
+      }}
+    >
+      {/* Top-right exit affordance so mouse users have a clear way out even
+          when they don't know Ctrl+C works. width: '100%' is required for
+          justifyContent to actually push the X to the right. */}
+      <box
+        style={{
+          width: '100%',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          paddingTop: 1,
+          paddingLeft: 2,
+          paddingRight: 2,
+          flexShrink: 0,
+        }}
+      >
+        {/* Empty spacer: justifyContent space-between needs a left sibling to
+            keep the ✕ pushed to the right. */}
+        <box />
+        <Button
+          onClick={() => exitCliCleanly()}
+          onMouseOver={() => setExitHover(true)}
+          onMouseOut={() => setExitHover(false)}
+          style={{ paddingLeft: 1, paddingRight: 1 }}
+        >
+          <text
+            style={{ fg: exitHover ? theme.foreground : theme.muted }}
+            attributes={TextAttributes.BOLD}
+          >
+            ✕
+          </text>
+        </Button>
+      </box>
+
+      <box
+        style={{
+          flexGrow: 1,
+          flexDirection: 'column',
+          alignItems: 'center',
+          // Full logo: anchor the clump low (flex-end), matching how chat pins
+          // its header/messages to the input bar. Without a logo, hug the top
+          // so the freed rows remain available to the picker.
+          justifyContent: showFullLogo ? 'flex-end' : 'flex-start',
+          paddingLeft: 2,
+          paddingRight: 2,
+          paddingBottom: 1,
+          gap: showFullLogo ? 1 : 0,
+        }}
+      >
+        {showFullLogo && (
+          <box style={{ marginBottom: 1, flexShrink: 0 }}>{logoComponent}</box>
+        )}
+
+        <box
+          style={{
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 0,
+            maxWidth: contentMaxWidth,
+          }}
+        >
+          {failure && (!session || session.status === 'none') && (
+            <text style={{ fg: theme.secondary, wrapMode: 'word' }}>
+              ⚠ {failure.message}
+            </text>
+          )}
+
+          {!session && !failure && (
+            <text style={{ fg: theme.muted }}>
+              <ShimmerText text="Connecting…" />
+            </text>
+          )}
+
+          {isLanding && (
+            <box
+              style={{
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                gap: 0,
+              }}
+            >
+              <LandingHeadingRow
+                streakLine={streakOnHeadingRow ? streakLine : null}
+                marginBottom={textMarginBottom}
+              />
+              {showStreakIndicator && !streakOnHeadingRow && (
+                <StreakInlineLine line={streakLine} />
+              )}
+              <FreebuffModelSelector
+                maxHeight={selectorMaxHeight}
+                onExpandedChange={setSelectorExpanded}
+                belowToggle={
+                  showBelowPickerCounter ? (
+                    <text
+                      style={{
+                        fg: theme.muted,
+                        marginTop: 1,
+                        wrapMode: 'word',
+                      }}
+                    >
+                      <span fg={sessionUsedColor}>
+                        {formattedSharedSessionUsed} of {sessionLimit}{' '}
+                        {sessionLabel} used
+                      </span>
+                      <span fg={theme.muted}>
+                        {', '}
+                        resets in {sessionResetCountdown}
+                      </span>
+                    </text>
+                  ) : null
+                }
+              />
+              {limitedModeNotice && (
+                <text
+                  style={{ fg: theme.muted, wrapMode: 'word', marginTop: 1 }}
+                >
+                  {limitedModeNotice}
+                </text>
+              )}
+              {streakBonusNote && (
+                <text
+                  style={{ fg: theme.primary, wrapMode: 'word', marginTop: 1 }}
+                >
+                  {streakBonusNote}
+                </text>
+              )}
+            </box>
+          )}
+
+          {session?.status === 'takeover_prompt' && (
+            <TakeoverPrompt failure={failure} />
+          )}
+
+          {/* Country outside the free-mode allowlist. Terminal — polling has
+              stopped. Tell the user up front rather than letting them send a
+              request that the chat/completions gate would reject. */}
+          {session?.status === 'country_blocked' && (
+            <>
+              <text style={{ fg: theme.secondary, marginBottom: 1 }}>
+                ⚠ Free mode isn't available in your region
+              </text>
+              <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+                {session.countryBlockReason === 'anonymous_network' ? (
+                  <>
+                    We detected{' '}
+                    {formatFreebuffHardBlockedPrivacySignals(
+                      session.ipPrivacySignals,
+                    )}{' '}
+                    traffic
+                    {session.countryCode === 'UNKNOWN' ? (
+                      ''
+                    ) : (
+                      <>
+                        {' '}
+                        from{' '}
+                        <span fg={theme.foreground}>{session.countryCode}</span>
+                      </>
+                    )}
+                    . Freebuff can't be used from VPN, proxy, or Tor traffic.
+                    Disable it and restart Freebuff to try again.
+                  </>
+                ) : session.countryCode === 'UNKNOWN' ? (
+                  <>
+                    We couldn't verify an eligible location for this request.
+                    VPN, Tor, proxy, or unknown-location traffic can't use
+                    freebuff. Press Ctrl+C to exit.
+                  </>
+                ) : (
+                  <>
+                    We detected your location as{' '}
+                    <span fg={theme.foreground}>{session.countryCode}</span>,
+                    which is outside the countries where freebuff is currently
+                    offered. Press Ctrl+C to exit.
+                  </>
+                )}
+              </text>
+            </>
+          )}
+
+          {/* Account banned. Terminal — polling has stopped. Blocking here
+              stops banned bots from re-entering free mode. */}
+          {session?.status === 'banned' && (
+            <>
+              <text style={{ fg: theme.secondary, marginBottom: 1 }}>
+                ⚠ Account unavailable
+              </text>
+              <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+                This account has been suspended and can't use freebuff. If you
+                think this is a mistake, contact support@codebuff.com. Press
+                Ctrl+C to exit.
+              </text>
+            </>
+          )}
+
+          {/* Shared free-session quota exhausted. Terminal for this run —
+              the user can exit and return after its daily or weekly reset. */}
+          {session?.status === 'rate_limited' && (
+            <>
+              <text style={{ fg: theme.secondary, marginBottom: 1 }}>
+                ⚠ Session limit reached
+              </text>
+              <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+                You've used{' '}
+                <span fg={theme.foreground}>
+                  {formatSessionUnits(session.recentCount)} of {session.limit}
+                </span>{' '}
+                sessions{' '}
+                {session.period === 'pacific_week' ? 'this week' : 'today'}.
+                Try again in{' '}
+                <span fg={theme.foreground}>
+                  {formatRetryAfter(session.retryAfterMs)}
+                </span>
+                . Press Ctrl+C to exit.
+              </text>
+            </>
+          )}
+
+          {/* Daily provider-spend admission budget reached. Existing sessions
+              are never interrupted; this screen only follows a rejected fresh
+              admission and gives the user a friendly, concrete return time. */}
+          {session?.status === 'spend_limited' && (
+            <>
+              <text style={{ fg: theme.secondary, marginBottom: 1 }}>
+                ☕ Daily Freebuff limit reached
+              </text>
+              <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+                {session.message} Come back in{' '}
+                <span fg={theme.foreground}>
+                  {formatRetryAfter(session.retryAfterMs)}
+                </span>
+                {' — '}your free usage resets automatically at midnight Pacific.
+                Press Ctrl+C to exit.
+              </text>
+            </>
+          )}
+
+          {/* Too many distinct users hold a free session on this egress IP.
+              Unlike the quota screens above there is no reset time — a slot
+              frees as soon as any session on the IP ends — so this offers a
+              short retry rather than a "come back tomorrow". */}
+          {session?.status === 'ip_capped' && (
+            <>
+              <text style={{ fg: theme.secondary, marginBottom: 1 }}>
+                🚦 Too many Freebuff sessions on this network
+              </text>
+              <text style={{ fg: theme.muted, wrapMode: 'word' }}>
+                {session.activeUsersForIp} other people are already using
+                Freebuff from your network, which is the most we allow at once.
+                Try again in{' '}
+                <span fg={theme.foreground}>
+                  {formatRetryAfter(session.retryAfterMs)}
+                </span>
+                {' — '}a slot opens as soon as one of them finishes. Press
+                Ctrl+C to exit.
+              </text>
+            </>
+          )}
+        </box>
+      </box>
+
+      {/* Reserve the ad banner slot before the async ad fetch resolves so the
+          landing content does not jump when the banner fills. On very
+          short terminals the banner is dropped entirely to give the picker
+          back its 5 rows. */}
+      {showAds && (
+        <box
+          style={{
+            width: '100%',
+            flexShrink: 0,
+            height: AD_CARD_HEIGHT,
+          }}
+        >
+          {ads ? (
+            <ChoiceAdBanner
+              ads={ads}
+              onClick={recordClick}
+              onImpression={recordImpression}
+            />
+          ) : (
+            <text style={{ fg: theme.muted }}>{'─'.repeat(terminalWidth)}</text>
+          )}
+        </box>
+      )}
+    </box>
+  )
+}