tool-stopwatch

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const text = r.text
    if ((await isHostedNow($, r)) || r.look.place !== 'top' || text === null || e.props.hasSurvey) return next(e)
    const below = await next(e)
    const { Box, Text } = $.ui.resolve(e)
    return withReadout({ Box: Box as Make['Box'], Text: Text as Make['Text'] }, below, r.name, text, r.look, e.props.isWorking, e.surface === 'terminal' ? r.glyphs : 'full')
  })

export function withReadout(make: Make, below: RenderElement | null | undefined, name: string, text: string, look: Look, isWorking = false, glyphs: IconGlyphs = 'full'): RenderElement {
  if (isWorking && look.whileWorking === 'hide') return below ?? make.Box({ children: [] })
  const piece = pieceElement(make, { name, text, color: look.color }, look, isWorking && look.whileWorking === 'dim', glyphs)
  const justify = justifyOf(look.align)
  const ownRow = (key: string) => make.Box({ key, flexDirection: 'row', justifyContent: justify, children: [make.Text({ wrap: 'wrap', children: [piece] })] })

  const isOurs = below !== null && below !== undefined && below.type === 'Box' && keyOf(below) === BAND_KEY
  const rest: RenderNode[] = isOurs ? [...(below.children ?? [])] : isEmpty(below) ? [] : [below as RenderElement]

  if (look.layout === 'merged') {
    const at = rest.findIndex(n => keyOf(n) === ROW_KEY)
    const row = at >= 0 ? rest[at] : undefined
    if (row !== undefined && typeof row !== 'string' && row.type === 'Box') {
      const line = row.children?.[0]
      if (line !== undefined && typeof line !== 'string' && line.type === 'Text') {
        const sep = make.Text({ dimColor: true, children: [separatorOf(look)] })
        const joined = make.Text({ ...line.props, children: [piece, sep, ...(line.children ?? [])] })
        rest[at] = make.Box({ ...row.props, children: [joined] })
        return make.Box({ key: BAND_KEY, flexDirection: 'column', children: rest })
      }
    }
    return make.Box({ key: BAND_KEY, flexDirection: 'column', children: [ownRow(ROW_KEY), ...rest] })
  }
  return make.Box({ key: BAND_KEY, flexDirection: 'column', children: [ownRow(`${ROW_KEY}:${name}`), ...rest] })
}

function pieceElement(make: Make, p: Piece, look: Look, isDimmed: boolean, glyphs: IconGlyphs = 'full'): RenderElement {
  const text = pieceText(p.name, p.text, look, glyphs)
  return make.Text({ ...pieceProps(p.color, look, isDimmed), children: [look.style === 'pills' ? ` ${text} ` : text] })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const all = await read($, stats)
    const slow = await read($, slowest)
    const live = await read($, running)
    const now = await $.clock.now()
    const rows = Object.entries(all).sort((a, b) => b[1].totalMs - a[1].totalMs || b[1].calls - a[1].calls)
    const calls = rows.reduce((n, [, s]) => n + s.calls, 0)
    const errors = rows.reduce((n, [, s]) => n + s.errors, 0)
    const waited = rows.reduce((n, [, s]) => n + s.prompted, 0)
    const withP50 = e.props.bodyColumns >= 84
    // Narrow panes keep calls, errors, p95 and total, so a row stays one line.
    const isNarrow = e.props.bodyColumns < 60
    const nameW = Math.max(8, Math.min(24, e.props.bodyColumns - (withP50 ? 60 : isNarrow ? 36 : 52)))
    const header =
      fit('tool', nameW) +
      'calls'.padStart(6) +
      'err'.padStart(5) +
      (isNarrow ? '' : 'avg'.padStart(8)) +
      (withP50 ? 'p50'.padStart(8) : '') +
      'p95'.padStart(8) +
      (isNarrow ? '' : 'max'.padStart(8)) +
      'total'.padStart(9)
    const cell = (has: boolean, ms: number, width: number) => (has ? fmtMs(ms) : '–').padStart(width)

    return (
      <Box flexDirection="column">
        <Text bold wrap="wrap">
          Tool latency · {calls} {calls === 1 ? 'call' : 'calls'} · {errors} {errors === 1 ? 'error' : 'errors'}
        </Text>
        {waited > 0 && (
          <Text dimColor wrap="wrap">
            {waited} waited on you (a permission prompt or a question): counted, not timed
          </Text>
        )}
        <Text> </Text>
        <Text dimColor>{header}</Text>
        {rows.length === 0 && (
          <Text dimColor wrap="wrap">
            No tool calls yet: each tool Claude runs is timed here.
          </Text>
        )}
        {rows.map(([tool, s]) => (
          <Text>
            {fit(displayName(tool), nameW)}
            {String(s.calls).padStart(6)}
            {s.errors > 0 ? <Text color="red">{String(s.errors).padStart(5)}</Text> : String(s.errors).padStart(5)}
            {isNarrow ? '' : cell(s.timed > 0, s.timed > 0 ? s.totalMs / s.timed : 0, 8)}
            {withP50 ? cell(s.timed > 0, percentile(s.recent, 50), 8) : ''}
            {cell(s.timed > 0, percentile(s.recent, 95), 8)}
            {isNarrow ? '' : cell(s.timed > 0, s.maxMs, 8)}
            {cell(s.timed > 0, s.totalMs, 9)}
          </Text>
        ))}
        {slow.length > 0 && (
          <Box flexDirection="column" marginTop={1}>
            <Text bold>Slowest calls</Text>
            {slow.map(c => (
              <Text wrap="truncate-end">
                {fmtMs(c.ms).padStart(7)} {fit(displayName(c.tool), 12)} {c.summary === '' ? '' : `${c.summary} `}
                <Text dimColor>
                  {hhmmss(c.at)}
                  {c.isAgent ? ' · subagent' : ''}
                  {c.isError ? ' · error' : ''}
                </Text>
              </Text>
            ))}
          </Box>
        )}
        {live.length > 0 && (
          <Box flexDirection="column" marginTop={1}>
            <Text bold>Running</Text>
            {live.map(c => (
              <Text wrap="truncate-end">
                {fmtLive(now - c.startedAt).padStart(7)} {fit(displayName(c.tool), 12)} {c.summary}
                {c.isPrompted ? <Text dimColor> (asked you first)</Text> : ''}
              </Text>
            ))}
          </Box>
        )}
        <Box marginTop={1} gap={1}>
          <Button key="reset" hotkey="r" label="Reset" onPress={() => void resetStats($)} />
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })