tool-timeline

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const kit = $.ui.resolve(e)
    const { Box, Text, Button } = kit
    const list = await read($, calls)
    const at = await read($, now)
    const rows = rowsOf(list, at)
    const sent = await read($, stepStartedAt)
    // The request under way grows up to now, as a running call does
    const requests = [...(await read($, steps)), ...(sent === null ? [] : [{ startedAt: sent, endedAt: Math.max(at, sent) }])]
    const Image = e.surface === 'terminal' ? await picturesImage($, kit) : undefined
    const draw: PaneDraw = {
      Text,
      pictures: Image === undefined ? undefined : { Box, Image },
      // The desktop's font is not one of even letters: there the lines are columns, their bars SVG, as its folds are
      desktop: e.surface === 'desktop' && 'Svg' in kit ? { Box, Text, Svg: kit.Svg as ElementConstructor<SvgProps> } : undefined,
      columns: e.props.bodyColumns,
    }
    const Client = e.surface === 'terminal' && 'Client' in kit ? (kit.Client as ElementConstructor<ClientProps>) : undefined
    const startedAt = await read($, turnStartedAt)
    // Once the turn is done, as long as it took; until then, up to its latest moment known
    const ended = await read($, turnEndedAt)
    const isDone = ended !== null
    // The turns before, newest first; the current one, once done, is the one drawn above
    const time = await $.clock.now()
    const open = await read($, paneOpen)
    const earlier = (await read($, turns))
      .filter(one => !(isDone && one.startedAt === startedAt))
      .slice(-MAX_PANE_TURNS)
      .reverse()
    const history = () =>
      earlier.length > 0 && [
        <Text> </Text>,
        <Text bold>Earlier</Text>,
        ...historyLines({ Box, Text, Button, Client, draw }, earlier, open, time, turnId => togglePaneTurn($, turnId)),
      ]

    if (rows.length === 0 && requests.length === 0) {
      return drawFiled($, () => (
        <Box flexDirection="column">
          <Text dimColor>No tool calls in this turn yet.</Text>
          {history()}
        </Box>
      ))
    }
    const endedAt = ended ?? Math.max(at, ...list.map(call => call.endedAt ?? call.startedAt), ...requests.map(step => step.endedAt))
    const turn: TimelineTurn = { turnId: 'live', durationMs: endedAt - startedAt, startedAt, endedAt, calls: list, steps: requests, answer: '' }
    const running = rows.filter(row => row.call.outcome === 'running').length
    const slowest = rows.length === 0 ? undefined : slowestOf(rows)
    // While it runs its bars change every second, each a new picture: glyphs then, pictures once it is done
    const current: PaneDraw = isDone ? draw : { ...draw, pictures: undefined }

    return drawFiled($, () => (
      <Box flexDirection="column">
        <Text wrap="truncate">
          <Text bold>{isDone ? 'Last turn' : 'This turn'}</Text>
          <Text dimColor>{` · ${formatMs(turn.durationMs)}${rows.length === 0 ? '' : ` · ${countOf(rows)}`}`}</Text>
          {running > 0 && <Text color={SLOW_COLOR}>{` · ${running} running`}</Text>}
          {slowest !== undefined && <Text dimColor>{' · slowest '}</Text>}
          {slowest !== undefined && <Text color={SLOW_COLOR}>{`${slowest.call.tool} ${formatMs(slowest.ms)}`}</Text>}
        </Text>
        <Text> </Text>
        {paneTurnBody(current, turn, rows, true)}
        {history()}
      </Box>
    ))
  })

function historyLines(kit: HistoryKit, earlier: TimelineTurn[], open: string[], time: number, toggle: (turnId: string) => unknown) {
  const { Box, Text, Button, Client, draw } = kit
  const { pictures, desktop } = draw
  const lines = earlier.map(turn => {
    const rows = rowsOf(turn.calls, 0)
    const slowest = slowestOf(rows)

    return {
      turn,
      rows,
      took: formatMs(turn.durationMs),
      age: agoOf(time - turn.endedAt),
      count: countOf(rows),
      slowest: `${slowest.call.tool} ${formatMs(slowest.ms)}`,
    }
  })
  const longest = Math.max(...earlier.map(turn => turn.durationMs))
  const widest = (pick: (line: (typeof lines)[number]) => string) => Math.max(...lines.map(line => pick(line).length))
  // Every column as wide as its widest and its words from its start, the time's too, so each line starts where the
  // heading does
  const [tookWidth, ageWidth, countWidth, slowestWidth] = [
    widest(line => line.took),
    widest(line => line.age),
    widest(line => line.count),
    widest(line => line.slowest),
  ]

  return lines.map(({ turn, rows, took, age, count, slowest }) => {
    const isOpen = open.includes(turn.turnId)
    const prompt = cut(turn.prompt ?? '', MAX_PROMPT_LETTERS)
    const unfolded = isOpen && (
      <Box flexDirection="column" paddingLeft={2}>
        {paneTurnBody({ ...draw, columns: draw.columns - 2 }, turn, rows, false)}
      </Box>
    )
    // The desktop: columns, the bar an SVG, the line a button of blank label laid over it, as its folded line is
    if (desktop !== undefined) {
      const { Svg } = desktop
      const cellsOf = (letters: number) => Math.ceil(letters * DESKTOP_CELLS_PER_LETTER) + 2
      const [tookCells, ageCells, countCells, slowestCells] = [cellsOf(tookWidth), cellsOf(ageWidth), cellsOf(countWidth), cellsOf(slowestWidth)]
      // The button as wide as the whole line: its columns and its bar in cells, the prompt a cell a letter, as its wide
      // letters may take; two no-break spaces a letter, as the folded line's
      const lineCells = tookCells + DESKTOP_ROW_WIDTH / DESKTOP_PX_PER_CELL + 1 + ageCells + countCells + slowestCells + prompt.length
      const blanks = Math.ceil((lineCells / DESKTOP_CELLS_PER_LETTER) * 2) + 4

      return [
        <Box flexDirection="row" alignItems="center">
          <Box width={tookCells}>
            <Text dimColor>{took}</Text>
          </Box>
          <Box>
            <Svg source={rowSvg(turn.durationMs, longest)} width={DESKTOP_ROW_WIDTH} height={12} alt={took} />
          </Box>
          <Box marginLeft={1} width={ageCells}>
            <Text dimColor>{age}</Text>
          </Box>
          <Box width={countCells}>
            <Text dimColor>{count}</Text>
          </Box>
          <Box width={slowestCells}>
            <Text color={SLOW_COLOR}>{slowest}</Text>
          </Box>
          <Text dimColor wrap="truncate">
            {prompt}
          </Text>
          <Box position="absolute" top={0} left={0}>
            <Button key={`history-${turn.turnId}`} plain label={'\u00a0'.repeat(blanks)} onPress={() => toggle(turn.turnId)} />
          </Box>
        </Box>,
        unfolded,
      ]
    }
    const props: HistoryProps = {
      turnId: turn.turnId,
      age: age.padEnd(ageWidth),
      count: count.padEnd(countWidth),
      slowest: slowest.padEnd(slowestWidth),
      prompt,
    }
    // A space in from the heading, so the lines do not crowd its edge
    const head = <Text dimColor>{` ${took.padEnd(tookWidth)} `}</Text>
    const fraction = longest > 0 ? turn.durationMs / longest : 0
    const { filled, track } = gauge(turn.durationMs, longest)
    const bar =
      pictures !== undefined ? (
        <pictures.Image
          source={filed(barPicture(BAR_CELLS, [{ from: 0, to: fraction }], BAR_COLOR, { color: INK_COLOR, alpha: PICTURE_TRACK_ALPHA }))}
          columns={BAR_CELLS}
          rows={1}
          alt={took}
        />
      ) : (
        <Text>
          <Text color={BAR_COLOR}>{filled}</Text>
          <Text dimColor>{track}</Text>
        </Text>
      )
    const words =
      Client !== undefined ? (
        <Client key={`history-${turn.turnId}`} module="./history.tsx" props={props} />
      ) : (
        <Button
          key={`history-${turn.turnId}`}
          plain
          dimColor
          label={` ${props.age}  ${props.count}  ${props.slowest}${prompt === '' ? '' : `  ${prompt}`}`}
          onPress={() => toggle(turn.turnId)}
        />
      )

    return [
      <Box flexDirection="row" overflow="hidden">
        <Box flexShrink={0}>
          {head}
          {bar}
        </Box>
        {words}
      </Box>,
      unfolded,
    ]
  })
}

function paneTurnBody(draw: PaneDraw, turn: TimelineTurn, rows: Row[], isCurrent: boolean) {
  const { Text, pictures, desktop, columns } = draw
  const lanes = lanesOf(turn)
  // As wide as the pane leaves beside a lane's name and the longest totals, so no lane's are cut
  const tail = Math.max(0, ...lanes.map(lane => laneTail(lane).join('').length))
  const cells = Math.max(MIN_PANE_LANE_CELLS, Math.min(LANE_CELLS, columns - LANE_NAME_LETTERS - 1 - tail))
  const laneLines = desktop !== undefined ? desktopLaneLines(desktop, lanes, turn, columns) : lanes.map(lane => laneLine(Text, lane, turn, pictures, { lead: '', cells }))
  if (rows.length === 0) {
    return laneLines
  }
  const shown = isCurrent ? rows.slice(-MAX_UNFOLDED_ROWS) : groupedRows(rows).sort((a, b) => b.ms - a.ms).slice(0, MAX_UNFOLDED_ROWS)
  const hidden = rows.length - shown.reduce((sum, row) => sum + row.count, 0)
  // The bars against the slowest call; an earlier turn's against its first row, which may hold several
  const slowest = isCurrent ? slowestOf(rows) : (shown[0] ?? slowestOf(rows))
  const nameWidth = nameWidthOf(shown)
  // Wide enough for the longest name, as the lanes' count column is, and a gap before what it ran on
  const nameCells = Math.ceil(nameWidth * DESKTOP_CELLS_PER_LETTER) + 3
  // The branch in its column on the desktop, as the rows' is
  const note = (lead: string, words: string) =>
    desktop !== undefined ? (
      <desktop.Box flexDirection="row">
        <desktop.Box width={DESKTOP_MARK_CELLS}>
          <Text dimColor>{lead}</Text>
        </desktop.Box>
        <Text dimColor>{`… ${words}`}</Text>
      </desktop.Box>
    ) : (
      <Text dimColor>{`${lead} … ${words}`}</Text>
    )

  return [
    ...laneLines,
    <Text> </Text>,
    isCurrent && hidden > 0 && note('├', leftOut(hidden, 'earlier')),
    ...shown.map((row, i) => {
      const lead = i === shown.length - 1 && (isCurrent || hidden === 0) ? '└ ' : '├ '

      return desktop !== undefined
        ? desktopRowLine(desktop, row, slowest, nameCells, lead.trim())
        : rowLine(Text, row, slowest, nameWidth, lead, pictures)
    }),
    !isCurrent && hidden > 0 && note('└', leftOut(hidden, 'faster')),
  ]
}

function desktopRowLine(kit: DesktopKit, row: Row, slowest: Row, nameCells: number, lead: string) {
  const { Box, Text, Svg } = kit
  const { call, ms } = row
  const isSlowest = row === slowest
  const tone = isSlowest || call.outcome === 'running' ? { color: SLOW_COLOR } : ms >= 1000 ? {} : { dimColor: true }
  const usual = usualNote(row)
  const progress = call.outcome === 'running' ? progressNote(row).trim() : ''

  return (
    <Box flexDirection="row" alignItems="center">
      {/* The branch and the mark each in a column of its own: `└` is wider than `├`, `✗` than `·` */}
      <Box width={DESKTOP_MARK_CELLS}>
        <Text dimColor>{lead}</Text>
      </Box>
      <Box width={DESKTOP_TIME_CELLS} justifyContent="flex-end">
        <Text {...tone} {...(isSlowest ? { bold: true } : {})}>
          {formatMs(ms)}
        </Text>
      </Box>
      <Box marginLeft={1}>
        <Svg source={rowSvg(ms, slowest.ms)} width={DESKTOP_ROW_WIDTH} height={12} alt={formatMs(ms)} />
      </Box>
      <Box marginLeft={1} width={DESKTOP_MARK_CELLS}>
        <Text {...(call.outcome === 'error' || call.outcome === 'denied' ? { color: 'error' } : { dimColor: true })}>
          {MARKS[call.outcome]}
        </Text>
      </Box>
      <Box width={nameCells}>
        <Text bold={isSlowest} wrap="truncate">
          {labelOf(row)}
        </Text>
      </Box>
      {usual !== '' && <Text color={SLOW_COLOR}>{`${usual}  `}</Text>}
      {progress !== '' && <Text color={SLOW_COLOR}>{`${progress}  `}</Text>}
      <Text dimColor wrap="truncate">
        {call.detail}
      </Text>
    </Box>
  )
}

function rowLine(Text: TextElement, row: Row, slowest: Row, nameWidth: number, lead: string, pictures?: Pictures, region?: Region) {
  const { call, ms } = row
  const isSlowest = row === slowest
  const { filled, track } = gauge(ms, slowest.ms)
  const tone = isSlowest || call.outcome === 'running' ? { color: SLOW_COLOR } : ms >= 1000 ? {} : { dimColor: true }
  const mark = MARKS[call.outcome]
  const usual = usualNote(row)
  const progress = call.outcome === 'running' ? progressNote(row) : ''
  const words =
    region === undefined ? undefined : (
      <region.Client
        key={region.key}
        module="./row.tsx"
        props={{
          turnId: region.turnId,
          callId: call.id,
          mark,
          isFailed: call.outcome === 'error' || call.outcome === 'denied',
          label: labelOf(row),
          pad: ' '.repeat(Math.max(0, nameWidth - labelOf(row).length)),
          isSlowest,
          usual,
          detail: call.detail,
          isOpen: region.isOpen,
          canAsk: canAskWhy(row),
        } satisfies RowProps}
      />
    )

  const head = [
    <Text dimColor>{lead}</Text>,
    <Text {...tone} {...(isSlowest ? { bold: true } : {})}>
      {formatMs(ms).padStart(6)}
    </Text>,
    ' ',
  ]
  const tail = [
    ' ',
    <Text {...(call.outcome === 'error' || call.outcome === 'denied' ? { color: 'error' } : { dimColor: true })}>
      {mark}
    </Text>,
    ' ',
    <Text {...(isSlowest ? { bold: true } : {})}>{labelOf(row).padEnd(nameWidth)}</Text>,
    usual !== '' && <Text color={SLOW_COLOR}>{`  ${usual}`}</Text>,
    progress !== '' && <Text color={SLOW_COLOR}>{progress}</Text>,
    <Text dimColor>{call.detail === '' ? '' : `  ${call.detail}`}</Text>,
  ]
  // Every bar in the same sky: the slowest is told by its violet time and bold name, a block of violet would read
  // as another color than those letters
  if (pictures !== undefined) {
    const { Box, Image } = pictures
    const stretches = ms > 0 ? [{ from: 0, to: slowest.ms > 0 ? ms / slowest.ms : 1 }] : []
    const source = filed(barPicture(BAR_CELLS, stretches, BAR_COLOR, { color: INK_COLOR, alpha: PICTURE_TRACK_ALPHA }))

    // Its branch and time keep their letters on a narrow transcript, the line cut at the edge
    return (
      <Box flexDirection="row" overflow="hidden">
        <Box flexShrink={0}>
          <Text>{head}</Text>
        </Box>
        <Image source={source} columns={BAR_CELLS} rows={1} alt={`${filled}${track}`} />
        {words ?? <Text wrap="truncate">{tail}</Text>}
      </Box>
    )
  }
  const bar = [<Text color={BAR_COLOR}>{filled}</Text>, <Text dimColor>{track}</Text>]
  if (region !== undefined) {
    const { Box } = region

    return (
      <Box flexDirection="row" overflow="hidden">
        <Box flexShrink={0}>
          <Text>
            {head}
            {bar}
          </Text>
        </Box>
        {words}
      </Box>
    )
  }

  return (
    <Text wrap="truncate">
      {head}
      {bar}
      {tail}
    </Text>
  )
}