barometer

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

    const [usage, rawModel, identity, compacting, compacted, effortReading, remembered, configRows, now] = await Promise.all([
      $.session.usage(),
      $.session.model(),
      read($, account),
      read($, isCompacting),
      read($, compactedTokens),
      read($, effort),
      read($, lastLimits),
      $.config.list().catch((): ConfigRow[] => []),
      $.clock.now(),
    ])
    const { Box, Button, Text } = $.ui.resolve(e)
    const { bodyColumns, isWorking, maxRows } = e.props
    const model = modelName(rawModel)
    const email = identity?.email ?? null
    const plan = identity?.plan ?? null
    const accountLength = (email?.length ?? 0) + (plan === null ? 0 : plan.length + (email === null ? 0 : 3))
    const accountTexts: RenderElement[] = []
    if (email !== null) accountTexts.push(<Text color={ACCOUNT}>{email}</Text>)
    if (plan !== null) accountTexts.push(<Text dimColor>{email === null ? plan : ` · ${plan}`}</Text>)
    const thinkingValue = configRows.find(row => row.key === 'thinking')?.value
    const reasoning = reasoningLine(effortReading, typeof thinkingValue === 'boolean' ? thinkingValue : undefined)
    const contextWindow = usage.context.window
    const contextTokens = usage.context.tokens ?? compacted ?? undefined
    const contextPercent =
      usage.context.percent ?? (compacted === null ? undefined : Math.round((compacted / contextWindow) * 100))
    const plans = plansOf(usage, remembered, now)
    const showHint = plans.length === 0 && contextPercent === undefined
    const isFramed = maxRows >= FRAME_FROM_ROWS
    const columns = isFramed ? bodyColumns - FRAME_COLUMNS : bodyColumns
    const isCompact = columns < COMPACT_BELOW_COLUMNS || maxRows < 3
    const topPadding = maxRows - (isFramed ? FRAME_ROWS : 0) >= PAD_FROM_ROWS ? 1 : 0
    // No bottom margin: Claude Code already leaves a blank row between the band and the prompt
    const frame = (content: RenderElement) =>
      isFramed ? (
        <Box flexDirection="column" borderStyle="round" borderDimColor paddingX={FRAME_PADDING_X} marginLeft={FRAME_MARGIN_LEFT}>
          {content}
        </Box>
      ) : (
        content
      )

    // flexShrink 0 on the bar and its label and percent columns: only the detail text gives way when a row runs long
    const strip = (cells: readonly Cell[]) => (
      <Box flexDirection="row" flexShrink={0}>
        {runs(cells).map(run => (
          <Text {...run.style}>{run.glyphs}</Text>
        ))}
      </Box>
    )
    const separator = <Text dimColor>{' | '}</Text>
    const hint = <Text dimColor>Rate: populates after first API call</Text>
    const contextRedLine = redLine(contextWindow, redLines)
    const isPastRedLine = contextPercent !== undefined && contextRedLine !== null && contextPercent >= contextRedLine
    const compactButton =
      (alwaysShowCompact || isPastRedLine) && !isWorking && !compacting ? [<Button key="compact" label="Compact" onPress={() => void compactNow($)} />] : []

    if (isCompact) {
      const parts: RenderElement[][] = []
      if (columns >= IDENTITY_COLUMN_FROM) {
        if (accountTexts.length > 0) parts.push(accountTexts)
        parts.push([<Text dimColor>{model}</Text>])
        if (reasoning !== null) parts.push([<Text dimColor>{reasoning}</Text>])
      }
      if (contextPercent !== undefined) {
        parts.push([
          <Text {...colorOf(contextColor(contextPercent, contextWindow, redLines))}>{`Context: ${contextPercent}%`}</Text>,
          ...(compactButton.length > 0 ? [<Text> </Text>, ...compactButton] : []),
        ])
      } else if (compactButton.length > 0) {
        parts.push(compactButton)
      }
      for (const plan of plans) {
        const used = Math.round(plan.limit.percentUsed)
        const reset = plan.pace.resetsInMs === undefined ? [] : [<Text dimColor>{` (resets in ${duration(plan.pace.resetsInMs)})`}</Text>]
        parts.push([<Text color={planColor(used)}>{`${plan.label}: ${used}%`}</Text>, ...reset])
      }
      if (showHint) parts.push([hint])
      return (
        <Box flexDirection="column" paddingTop={topPadding}>
          {below}
          {frame(
            // Spaced, not " | "-separated: a separator ends up dangling at the end of a wrapped line
            <Box flexDirection="row" flexWrap="wrap" columnGap={FOLDED_GAP_COLUMNS}>
              {parts.map(part => (
                <Box flexDirection="row" flexShrink={0}>
                  {part}
                </Box>
              ))}
            </Box>,
          )}
        </Box>
      )
    }

    const showIdentityColumn = columns >= IDENTITY_COLUMN_FROM
    const identityColumns = showIdentityColumn ? Math.max(accountLength, model.length, reasoning?.length ?? 0) + 2 : 0
    const available = columns - LABEL_COLUMNS - PERCENT_COLUMNS - 2 - identityColumns
    const barColumns = clamp(Math.floor(available * 0.4), 10, 40)

    const gauge = (label: string, cells: readonly Cell[], percent: RenderElement, detail: RenderElement[]) => (
      <Box flexDirection="row">
        <Box width={LABEL_COLUMNS} flexShrink={0}>
          <Text>{label}</Text>
        </Box>
        {strip(cells)}
        <Box width={PERCENT_COLUMNS} justifyContent="flex-end" flexShrink={0}>
          {percent}
        </Box>
        <Box marginLeft={2} flexGrow={1} flexDirection="row" columnGap={1} overflow="hidden">
          {detail}
        </Box>
      </Box>
    )

    const contextFill = contextColor(contextPercent ?? 0, contextWindow, redLines)
    const tokensShown = contextTokens === undefined ? '?' : tokenCount(contextTokens)
    const contextRow = gauge(
      'Context',
      meterCells(barColumns, contextPercent, contextFill, contextRedLine === null ? undefined : { atPercent: contextRedLine, color: RED }),
      contextPercent === undefined ? <Text dimColor>–</Text> : <Text {...colorOf(contextFill)}>{`${contextPercent}%`}</Text>,
      [<Text dimColor wrap="truncate-end">{`${tokensShown}/${tokenCount(contextWindow)}`}</Text>, ...compactButton],
    )

    const planRows = plans.map(plan => {
      const used = Math.round(plan.limit.percentUsed)
      const color = planColor(used)
      const marker = plan.pace.elapsedPercent === undefined ? undefined : { atPercent: plan.pace.elapsedPercent, color: ELAPSED }
      const detail: RenderElement[] = []
      if (plan.pace.resetsInMs !== undefined) {
        detail.push(
          <Box flexShrink={0}>
            <Text dimColor>{`resets in ${duration(plan.pace.resetsInMs)}`}</Text>
          </Box>,
        )
      }
      if (plan.pace.runsOutInMs !== undefined) {
        detail.push(<Text dimColor>·</Text>)
        detail.push(<Text color={ORANGE} wrap="truncate-end">{`out in ~${duration(plan.pace.runsOutInMs)} at this pace`}</Text>)
      }
      return gauge(plan.label, meterCells(barColumns, used, color, marker), <Text color={color}>{`${used}%`}</Text>, detail)
    })

    const gauges = (
      <Box flexDirection="column" flexGrow={1}>
        {contextRow}
        {planRows}
        {showHint ? hint : null}
      </Box>
    )
    const identityColumn = (
      <Box flexDirection="column" alignItems="flex-end" marginLeft={2} flexShrink={0}>
        {accountTexts.length === 0 ? null : <Box flexDirection="row">{accountTexts}</Box>}
        <Text dimColor>{model}</Text>
        {reasoning === null ? null : <Text dimColor>{reasoning}</Text>}
      </Box>