long-live-the-claude

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)

    return drawBand($, e)
  })

async function drawBand($: Engine, e: ResolveInput) {
  const els = $.ui.resolve(e)
  const { Box, Button, Text } = els
  const Svg = 'Svg' in els ? els.Svg : undefined
  const t = (await read($, now)) || Date.now()
  const list = await read($, limits)
  const hit = await read($, lastHitAt)
  const w = await read($, warm)
  const lr = await read($, longRun)
  const ctx = await read($, context)
  const isIdleTooLong = w.lastTurnAt !== null && t - w.lastTurnAt > IDLE_CAP_MS
  // Keep-alive is actually working: long-run mode on, not stopped, not idle too long
  const isWarming = lr.isOn && !w.isBroken && !isIdleTooLong

  const five = list.find(x => x.kind === 'five_hour')
  const week = list.find(x => x.kind === 'seven_day')
  const left = hit === null ? null : hit + TTL_MS - t
  // The ring's color: first whether the cache is near expiry or expired, then whether keep-alive
  // is failing; otherwise the keep-alive color while it is on
  const cacheTone =
    left === null
      ? MUTED
      : left <= 0
        ? DANGER
        : left <= LEAD_MS
          ? WARN
          : isWarming && w.isFailing
            ? WARN
            : isWarming
              ? WARM
              : OK
  const dot = isWarming ? (w.isFailing ? WARN : WARM) : null

  // SVG on the desktop, characters in the terminal
  const meter = (pct: number, label: string, mark?: number) =>
    Svg ? (
      <Svg source={barSvg(pct, mark)} alt={label} width={BAR_W} height={BAR_H} />
    ) : (
      <Text color={pct <= 20 ? 'error' : undefined} dimColor={pct > 20}>
        {barText(pct)}
      </Text>
    )

  const k = (n: number) => (n >= 1e6 ? `${Math.round(n / 1e5) / 10}M` : `${Math.round(n / 1000)}k`)

  // ---- Main row: the standing readings and the buttons; its width does not change when expanded ----
  const usage = (name: string, win: RateWindow) => {
    // Shows what is left; percentUsed has at most one decimal and exceeds 100 past the limit
    const rest = Math.max(0, Math.round((100 - win.percentUsed) * 10) / 10)
    const resetIn = win.resetsAt === undefined ? null : Date.parse(win.resetsAt) - t
    const p = resetIn === null ? null : project(win.kind, win.percentUsed, resetIn)

    return (
      <Box gap={1} alignItems="center">
        {meter(rest, `${name} ${rest}% left`, p === null ? undefined : Math.max(0, p.restAtReset))}
        <Text bold={rest <= 20}>{`${rest}%`}</Text>
      </Box>
    )
  }

  // Context against the compaction window (the same basis as /context's percentage), with no bar:
  // it answers "how far from auto-compaction", not "how much is left"
  const contextText = (c: ContextState & { tokens: number }) => {
    const used = c.tokens / c.limit
    const tone = used >= CONTEXT_DANGER ? 'error' : used >= CONTEXT_WARN ? 'warning' : undefined

    return (
      <Box gap={1} alignItems="center">
        <Text dimColor>ctx</Text>
        <Text color={tone} bold={tone === 'error'}>{`${k(c.tokens)} / ${k(c.limit)}`}</Text>
      </Box>
    )
  }

  const cacheText = left === null ? '—' : left > 0 ? countdown(left) : 'expired'

  // ---- Details: click the band to expand. Where the surface has Client each detail sits right below
  // its reading; elsewhere they fall back to a row of their own ----
  const resetLines = (win: RateWindow) => {
    if (win.resetsAt === undefined) return []
    const resetIn = Date.parse(win.resetsAt) - t
    const p = project(win.kind, win.percentUsed, resetIn)

    // The bar's translucent part already shows what is projected to be left; here we only warn when it runs out early
    return [`resets in ${roughly(resetIn)}`, p?.runsOutIn != null ? `runs out in ~${roughly(p.runsOutIn)}` : null]
  }

  // Long-run pause: a short badge in the main row
  const wakeAt = lr.resetsAt === null ? null : lr.resetsAt + WAKE_DELAY_MS
  const pauseBadge =
    !lr.isOn || wakeAt === null
      ? null
      : lr.phase === 'winding'
        ? 'Winding down'
        : lr.phase === 'paused'
          ? `Paused · resumes ${hhmm(wakeAt)}${lr.held.length > 0 ? ` · ${lr.held.length} held` : ''}`
          : null
  // The details below the cache column: two lines at most, each truncated rather than wrapped, so
  // they never push the buttons out
  const held = lr.held.length
  const keeperLines: (string | null)[] = !lr.isOn
    ? [w.note]
    : lr.phase === 'winding' && wakeAt !== null
      ? [`Winding down · ${lr.isReminded ? 'model asked to wrap up' : 'asks at the next tool call'} · resumes ${hhmm(wakeAt)}`]
      : lr.phase === 'paused' && wakeAt !== null
        ? [`Paused · resumes in ${roughly(wakeAt - t)} (${hhmm(wakeAt)})`, `${held} notification${held === 1 ? '' : 's'} held`]
        : w.isBroken || w.isFailing
          ? [w.note]
          : isIdleTooLong
            ? [`Idle over ${IDLE_CAP_MS / 3600_000}h, stopped`, 'resumes at the next request']
            : hit === null
              ? ['Waiting for the next request']
              : [`${lr.isIdle ? '[idle] · keep-alive only' : 'no [idle] · check-ins'} · kept warm ${w.count}×`, w.note]

  const compactLine = ctx?.tokens !== undefined ? `${k(Math.max(0, ctx.compactAt - ctx.tokens))} to auto-compact` : null
  const isText = (x: unknown): x is string => typeof x === 'string' && x !== ''

  // Where the surface has Client, a transparent click probe covers the area left of the buttons:
  // a click anywhere toggles the details. Without Client there are no clicks, so we fall back to
  // the host's hover: hovering the band shows the details row.
  // The probe must not cover the buttons: a probe layered above eats the button's click, and no
  // positioning order wins over it
  const Client = 'Client' in els ? els.Client : undefined
  const isExpanded = await read($, expanded)

  const probe = (key: string) =>
    Client ? (
      <Box position="absolute" top={0} left={0} right={0} bottom={0}>
        <Client key={key} module="./click-probe.tsx" props={{ zone: 'band' }} width="100%" height="100%" />
      </Box>
    ) : null

  // One column: the standing reading on top and, when expanded, its details below.
  // 5h and 7d pass a label: it stands on its own at the left (top-aligned, on the reading's line)
  // and the details line up with the bar; ctx and cache pass none: the label is part of the
  // reading and the details start at the column's left edge.
  // The first three columns' details are no wider than their readings, so expanding does not shift
  // the main row; the last column (cache and long run) may shrink and truncate instead of pushing the buttons
  type El = ReturnType<typeof usage>
  const column = (key: string, label: El | null, main: El, lines: unknown[], isLast = false) => {
    const shown = Client && isExpanded ? lines.filter(isText) : []
    const body = (
      <Box key={`${key}-body`} flexDirection="column" flexShrink={isLast ? 1 : 0} minWidth={isLast ? 0 : undefined}>
        {main}
        {shown.map((d, i) => (
          <Text key={`${key}-${i}`} dimColor wrap={isLast ? 'truncate-end' : undefined}>
            {d}
          </Text>
        ))}
      </Box>
    )
    if (label === null) return body

    return (
      <Box key={key} gap={1} alignItems="flex-start" flexShrink={0}>
        {label}
        {body}
      </Box>
    )
  }