turn-timeline

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const t = await read($, turn)
    const now = await $.clock.now()
    const w = Math.max(30, e.props.bodyColumns - 1)
    const inner = w - 6
    const isGrid = e.surface === 'terminal'
    if (!t) return <Text dimColor>The timeline starts with the next turn.</Text>

    const draw = (row: Row, width: number) =>
      fit(row, width).map((s, j) => <Text key={String(j)} color={s.c} dimColor={s.d} bold={s.b}>{s.t}</Text>)
    // A row as a flex line, for surfaces that draw text in a proportional font.
    const items = (row: Row) =>
      row.map((s, j) => {
        if ('cells' in s) {
          const total = Math.max(1, s.parts.reduce((n, p) => n + p.n, 0))
          return <Box flexGrow={1} height={0.5}>{s.parts.map(p => <Box flexGrow={(p.n / total) * 1000} backgroundColor={p.c ?? TRACK} />)}</Box>
        }
        if (s.fill) return <Box flexGrow={1} />
        const text = <Text key={String(j)} color={s.c} dimColor={s.d} bold={s.b} wrap="truncate-end">{!s.w ? s.t : s.right ? s.t.trim() : s.t.trimEnd()}</Text>
        return s.w || s.keep ? <Box width={s.w} flexShrink={0} justifyContent={s.right ? 'flex-end' : 'flex-start'}>{text}</Box> : text
      })
    const line = (row: Row) => (row.length ? <Box alignItems="center">{items(row)}</Box> : <Box height={0.5} />)
    const frame = (title: string, tone: string, rows: Row[], right = '') => {
      if (!isGrid)
        return (
          <Box flexDirection="column" marginTop={2} borderStyle="round" borderColor={tone} borderDimColor>
            <Box marginBottom={1}>
              <Box flexShrink={0}>
                <Text color={tone} bold>{title}</Text>
              </Box>
              <Box flexGrow={1} />
              {right ? <Text dimColor wrap="truncate-end">{right}</Text> : null}
            </Box>
            {rows.map(line)}
          </Box>
        )
      const rule = Math.max(0, w - 6 - title.length - (right ? right.length + 2 : 0))
      return (
        <Box key={title} flexDirection="column" marginTop={1}>
          <Text>
            <Text color={tone} dimColor>╭─ </Text>
            <Text color={tone} bold>{title}</Text>
            <Text color={tone} dimColor> {'─'.repeat(rule)}</Text>
            {right ? <Text dimColor> {right} </Text> : null}
            <Text color={tone} dimColor>─╮</Text>
          </Text>
          {rows.map((row, i) => (
            <Text key={String(i)}>
              <Text color={tone} dimColor>│  </Text>
              {draw(row, inner)}
              <Text color={tone} dimColor>  │</Text>
            </Text>
          ))}
          <Text color={tone} dimColor>╰{'─'.repeat(w - 2)}╯</Text>
        </Box>
      )
    }

    // A background subagent outlives the main turn, so the timeline runs until its last step ends too.
    const running = t.end === undefined || t.spans.some(s => s.end === undefined)
    const end = running ? now : Math.max(t.end ?? now, ...t.spans.map(s => s.end ?? 0))
    const duration = end - t.start
    const cols = inner - LABEL_W
    const main = t.spans.filter(s => s.lane === 'main')
    const parts = breakdown(main, t.start, end, now)
    const pct = (name: string) => Math.round(parts.find(p => p.name === name)?.pct ?? 0)
    const toolPct = Math.max(0, 100 - pct('model') - pct('idle'))

    const glance: Row = [
      { t: running ? 'Running ' : 'Last turn ', d: true },
      { t: clock(duration), b: true, keep: true },
      { t: '   model ', d: true },
      { t: `${pct('model')}%`, c: 'suggestion', b: true, keep: true },
      { t: '   tools ', d: true },
      { t: `${toolPct}%`, c: 'success', b: true, keep: true },
      { t: '   idle ', d: true },
      { t: `${pct('idle')}%`, b: true, keep: true },
    ]

    // One row per loop, the busiest first after main; lanes past the room left fold into a count.
    const maxLanes = Math.max(1, Math.floor((e.props.scroll.bodyRows - 20) / 2))
    const lanes = t.lanes.slice(0, maxLanes)
    const laneRows: Row[] = lanes.flatMap((lane, i) => {
      const cells = laneCells(
        t.spans.filter(s => s.lane === lane.id),
        t.start,
        end,
        cols,
        now,
      ).map(k => CELL[k])
      const row: Row = [{ t: column(lane.label, LABEL_W), b: lane.id === 'main', d: lane.id !== 'main', w: LABEL_W }, { cells, parts: runs(cells) }]
      return i ? [[], row] : [row]
    })
    const hidden = t.lanes.length - lanes.length
    const timelineRows: Row[] = [
      ...laneRows,
      ...(hidden > 0 ? [[{ t: `+${hidden} more loops`, d: true }]] : []),
      isGrid ? [{ t: ' '.repeat(LABEL_W) }, { t: axis(duration, cols), d: true }] : [{ t: '', w: LABEL_W }, { t: '0', d: true }, { t: '', fill: true }, { t: clock(duration), d: true }],
      [],
      isGrid
        ? [{ t: '█', c: 'success' }, { t: ' tool   ', d: true }, { t: '▒', c: 'suggestion' }, { t: ' model   ', d: true }, { t: '█', c: 'error' }, { t: ' failed   ', d: true }, { t: '·', d: true }, { t: ' idle', d: true }]
        : [{ t: '■', c: 'success' }, { t: ' tool   ', d: true }, { t: '■', c: 'suggestion' }, { t: ' model   ', d: true }, { t: '■', c: 'error' }, { t: ' failed   ', d: true }, { t: '□', d: true }, { t: ' idle', d: true }],
    ]

    // Each share as a bar against the turn's length, model and idle named, tools by name.
    const barW = inner - 25
    const shareRows: Row[] = parts.slice(0, 6).map(p => {
      const filled = Math.round((p.pct / 100) * barW)
      const tone = p.name === 'model' ? 'suggestion' : p.name === 'idle' ? undefined : 'success'
      const left: Row = [
        { t: column(p.name, LABEL_W), d: p.name === 'idle', w: LABEL_W },
        {
          cells: [{ t: '█'.repeat(filled), c: tone, d: p.name === 'idle' }, { t: '·'.repeat(Math.max(0, barW - filled)), d: true }],
          parts: [{ n: filled, c: tone ?? 'promptBorder' }, { n: Math.max(0, barW - filled) }],
        },
      ]
      const right: Row = [
        { t: clock(p.ms).padStart(6), d: true, w: 6, right: true },
        { t: `${Math.round(p.pct)}%`.padStart(5), b: true, w: 5, right: true },
      ]
      // A real bar stretches by itself; a spacer beside it would take half the room.
      return isGrid ? spread(left, right, inner) : [...left, ...right]
    })

    const slowest = t.spans
      .filter(s => s.end !== undefined)
      .sort((a, b) => (b.end ?? 0) - b.start - ((a.end ?? 0) - a.start))
      .slice(0, 3)
    // A model request has no target of its own, so it is named by its place in its loop: "request 3 of 5".
    const requestOf = (s: TimelineSpan) => {
      const mine = t.spans.filter(x => x.lane === s.lane && x.kind === 'model')
      return `request ${mine.indexOf(s) + 1} of ${mine.length}`
    }
    const slowRows: Row[] = slowest.length
      ? slowest.map(s => {
          const left: Row = [
            { t: s.kind === 'model' ? 'model' : s.name, c: s.kind === 'model' ? 'suggestion' : s.ok === false ? 'error' : 'success', b: true, keep: true },
            { t: `  ${s.lane === 'main' ? '' : `${t.lanes.find(l => l.id === s.lane)?.label ?? ''}  `}${s.kind === 'model' ? requestOf(s) : s.detail}`, d: true },
          ]
          const took = clock((s.end ?? now) - s.start)
          // Off the grid only the target gives way; the name and the duration stay whole.
          return isGrid ? spread(left, [{ t: took, b: true }], inner) : [...left, { t: '', fill: true }, { t: `  ${took}`, b: true, keep: true }]
        })
      : [[{ t: 'Nothing has finished yet.', d: true }]]

    return (
      <Box flexDirection="column" paddingTop={1}>
        {isGrid ? <Text>{draw(glance, w - 3)}</Text> : line(glance)}
        {frame('Timeline', 'suggestion', timelineRows, `${t.lanes.length} ${t.lanes.length === 1 ? 'loop' : 'loops'}`)}
        {frame('Where time went', 'success', shareRows, 'main loop')}
        {frame('Slowest', 'warning', slowRows)}
      </Box>
    )
  })