statusbar

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (!everywhere && e.surface !== 'desktop')) return next(e)

    const snap = await read($, snapshot)
    if (snap === null) return next(e)

    const [work, turnStart, lastTurn, now] = await Promise.all([
      read($, activity),
      read($, turnStartedAt),
      read($, lastTurnMs),
      $.clock.now(),
    ])

    const { Box, Text } = $.ui.resolve(e)
    const { place } = snap
    // Desktop already shows the repo, branch, model and context fill around the prompt.
    const showSessionFacts = e.surface !== 'desktop'

    // The terminal is monospaced already; elsewhere figures switch to monospace glyphs so they do not jitter.
    const figures = e.surface === 'terminal' ? (text: string) => text : mono
    const label = (text: string) => <Text bold dimColor>{text} </Text>
    const spacing = e.surface === 'terminal' ? SPACING.monospaced : SPACING.proportional
    // Bars and clocks get air on each side, beyond the label's own space.
    const AIR = spacing.air
    const fact = (key: string, name: string, value: string, { isDim = false, isClock = false } = {}) => (
      <Text key={key}>
        {label(name)}
        {isClock ? AIR : null}
        <Text dimColor={isDim}>{figures(value)}</Text>
        {isClock ? AIR : null}
      </Text>
    )

    const head = place.isRepo ? (
      <Text>
        <Text bold color="warning">{place.name}</Text>
        {place.worktree ? <Text dimColor> ▸ </Text> : null}
        {place.worktree ? <Text color="claude">{place.worktree}</Text> : null}
        {place.branch ? <Text dimColor> (</Text> : null}
        {place.branch ? <Text color="suggestion">{place.branch}</Text> : null}
        {place.branch ? <Text dimColor>)</Text> : null}
      </Text>
    ) : (
      <Text bold color="warning">{place.name}</Text>
    )

    const limit = (l: Limit, cells: number) => {
      const [filled, empty] = barOf(l.percentUsed, cells)
      const left = remainingOf(l.resetsAt, now)
      return (
        <Text key={l.kind}>
          {label(labelOf(l.kind))}
          {AIR}
          <Text color={levelColor(l.percentUsed)}>{filled}</Text>
          <Text dimColor>{empty}</Text>
          {AIR}
          {left ? <Text dimColor> ↻ </Text> : null}
          {left ? <Text dimColor>{figures(left)}</Text> : null}
          {left ? AIR : null}
        </Text>
      )
    }

    const facts = showSessionFacts ? (
      <Text key="facts">
        {head}
        {snap.model ? <Text dimColor> · </Text> : null}
        {snap.model ? <Text>{snap.model}</Text> : null}
        {snap.contextPercent !== undefined ? (
          <Text dimColor> (ctx {Math.round(snap.contextPercent)}%)</Text>
        ) : null}
      </Text>
    ) : null
    const isTurnRunning = e.props.isWorking && turnStart !== null

    const leftOf = (cells: number) => [
      ...snap.limits.map(l => limit(l, cells)),
      work.agents > 0 ? fact('agents', 'AGENTS', String(work.agents)) : null,
      work.tasks > 0 ? fact('tasks', 'TASKS', String(work.tasks)) : null,
      work.crons > 0 ? fact('crons', 'CRON', String(work.crons)) : null,
      showCost && snap.costUsd !== undefined ? fact('cost', 'COST', usdOf(snap.costUsd)) : null,
    ]
    // The clocks sit at the right edge, apart from the figures that change by the turn.
    const right = [
      fact('time', 'TOTAL TIME', hmsOf(now - snap.startedAt), { isClock: true }),
      // Between turns, the last one's length, dimmed: it is not running.
      isTurnRunning
        ? fact('turn', 'CURRENT', clockOf(now - turnStart), { isClock: true })
        : fact('turn', 'CURRENT', clockOf(lastTurn), { isDim: true, isClock: true }),
    ]

    const joined = (side: string, segments: (RenderElement | null)[]) =>
      segments
        .filter(s => s !== null)
        .flatMap((segment, i) =>
          i === 0 ? [segment] : [<Text key={`${side}-sep-${i}`} dimColor>{spacing.separator}</Text>, segment],
        )

    // The bars take what the line leaves free, so it fits on one row as long as it can.
    const fixed = widthOf(joined('left', leftOf(0))) + widthOf(joined('right', right)) + spacing.minGap
    const cells = barCellsFor(e.props.bodyColumns, fixed, snap.limits.length)

    const usageRow = (
      <Box key="usage" flexDirection="row" flexWrap="wrap" justifyContent="space-between" width="100%">
        <Box key="left" flexDirection="row" flexWrap="wrap">
          {joined('left', leftOf(cells))}
        </Box>
        <Box key="right" flexDirection="row">
          {joined('right', right)}
        </Box>
      </Box>
    )

    // Where the session facts show (the terminal), they take a row of their own above,
    // so the usage row reads the same on every surface and keeps the whole width.
    return facts === null ? (
      usageRow
    ) : (
      <Box flexDirection="column" width="100%">
        {facts}
        {usageRow}
      </Box>
    )
  })