flight-recorder

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const turn = await read($, turnAtom)
    const tick = await read($, tickAtom)
    const now = await $.clock.now()
    const recent = await getHistory($)
    const { Box, Text } = $.ui.resolve(e)
    const kit: Kit = { Box, Text }

    const bodyColumns = e.props.bodyColumns > 0 ? e.props.bodyColumns : (e.viewport?.columns ?? 80)
    const columns = Math.min(512, Math.max(4, bodyColumns - LABEL_WIDTH - 1 - STATS_WIDTH))
    const historyLine = historyRow(kit, recent)

    if (turn === null) {
      return (
        <Box flexDirection="column">
          <Text dimColor>Waiting for the next turn… (ask Claude anything)</Text>
          {historyLine}
        </Box>
      )
    }

    const a = analyze(turn, now)
    const cells = buildCells({
      segments: turn.segments,
      start: a.start,
      end: a.end,
      now,
      columns,
      isShimmer: tick % 2 === 0,
    })

    let grid: JSX.Element
    if (e.surface === 'terminal') {
      const { Raster } = $.ui.resolve(e)
      grid = <Raster key="grid" rows={LANES.length} columns={columns} cells={encodeRaster(cells, columns)} />
    } else {
      // No Raster here: the same cell model as one Text per run of a colour.
      grid = (
        <Box flexDirection="column">
          {cells.map(row => (
            <Box>
              {groupRuns(row).map(run => (
                <Text color={run.color}>{run.text}</Text>
              ))}
            </Box>
          ))}
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
        {headerRow(kit, turn, now, tick)}
        <Box marginTop={1}>
          <Box flexDirection="column" width={LABEL_WIDTH} flexShrink={0}>
            {LANES.map(lane => (
              <Text color={LANE_COLORS[lane]} bold>
                {lane}
              </Text>
            ))}
          </Box>
          <Box marginLeft={1} width={columns} flexShrink={0}>
            {grid}
          </Box>
          <Box flexDirection="column" width={STATS_WIDTH} flexShrink={0}>
            {LANES.map(lane => {
              const stats = statsText(a.totals[lane], a.wallMs)

              return (
                <Box>
                  <Text color={LANE_COLORS[lane]} bold={!stats.isZero} dimColor={stats.isZero}>
                    {stats.pct}
                  </Text>
                  <Text dimColor={stats.isZero}>{stats.duration}</Text>
                </Box>
              )
            })}
          </Box>
        </Box>
        <Text dimColor>{`${' '.repeat(LABEL_WIDTH + 1)}${axisLine(columns, a.end - a.start)}`}</Text>
        {verdictRow(kit, turn, a)}
        {historyLine}
      </Box>
    )
  })

function historyRow(kit: Kit, history: readonly FlightSummary[]) {
  const { Text } = kit
  if (history.length < 3) return null

  const { turns, shares } = historyTop(history)
  if (shares.length === 0) return null

  return (
    <Text dimColor>{`Last ${turns} turns: ${shares.map(s => `${s.lane} ${s.pct}%`).join(' · ')}`}</Text>
  )
}

function headerRow(kit: Kit, turn: FlightTurn, now: number, tick: number) {
  const { Box, Text } = kit
  const subs = turn.subCalls > 0 ? `   ${plural(turn.subCalls, 'sub-agent call')}` : ''
  const counts = `   ${plural(turn.calls, 'call')}   ${plural(turn.steps, 'step')}${subs}`

  if (turn.isRunning) {
    return (
      <Box>
        <Text bold>{'Flight Recorder   '}</Text>
        <Text color={REC_COLOR} dimColor={tick % 2 === 1}>
          ●
        </Text>
        <Text>{' REC  '}</Text>
        <Text bold>{formatClock(now - turn.startedAt)}</Text>
        <Text>{counts}</Text>
      </Box>
    )
  }

  return (
    <Box>
      <Text bold>{'Flight Recorder   '}</Text>
      <Text color={DONE_COLOR}>■</Text>
      <Text>{' '}</Text>
      <Text bold>{formatDuration(turn.durationMs ?? 0)}</Text>
      <Text>{counts}</Text>
    </Box>
  )
}

function verdictRow(kit: Kit, turn: FlightTurn, a: Analysis) {
  const { Box, Text } = kit

  if (turn.isRunning) {
    const now = a.running
    if (!now) {
      return (
        <Box marginTop={1}>
          <Text dimColor>Now: between steps</Text>
        </Box>
      )
    }

    return (
      <Box marginTop={1}>
        <Text dimColor>{'Now: '}</Text>
        <Text color={LANE_COLORS[now.lane]} bold>
          {now.lane}
        </Text>
        <Text>{` · ${now.label} (${formatDuration(now.ms)})`}</Text>
      </Box>
    )
  }

  const top = topLanes(a.totals, a.wallMs, 1)[0]
  if (!top) {
    return (
      <Box marginTop={1}>
        <Text dimColor>Nothing was recorded for this turn.</Text>
      </Box>
    )
  }
  const slowest = a.slowest ? ` · slowest: ${a.slowest.label} ${formatDuration(a.slowest.ms)}` : ''

  return (
    <Box marginTop={1}>
      <Text>{'Most time: '}</Text>
      <Text color={LANE_COLORS[top.lane]} bold>
        {top.lane}
      </Text>
      <Text>{` ${top.pct}%${slowest}`}</Text>
    </Box>
  )
}