test-radar

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const run = await read($, runAtom)
    if (e.props.hasSurvey || run === null || run.isDismissed || (run.status !== 'failed' && run.status !== 'passed')) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const below = await next(e)
    const make = { Box, Text, Button } as unknown as BandMake
    const mode = e.surface === 'terminal' ? glyphMode : 'full'
    if (run.status === 'passed') return band(make, [{ key: 'test-radar-passed', tone: 'done', icon: GLYPHS.test, text: passText(run) }], e.props.bodyColumns, below, mode)
    return band(
      make,
      [
        {
          key: 'test-radar-failed',
          tone: 'error',
          icon: GLYPHS.cross,
          text: failText(run),
          actions: [
            { key: 'radar-show', label: 'Show', isQuiet: true, onPress: () => void openPane($) },
            { key: 'radar-fix', label: 'Fix it', isPrimary: true, onPress: () => void fixIt($) },
            { key: 'radar-dismiss', label: 'Dismiss', isQuiet: true, isDismiss: true, onPress: () => void dismiss($) },
          ],
        },
      ],
      e.props.bodyColumns,
      below,
      mode,
    )
  })

export function band(make: BandMake, rows: readonly BandRow[], columns: number, below?: RenderElement | null, glyphs: BandGlyphs = 'full'): RenderElement {
  const drawn = rows.map(r => bandRow(make, r, columns, glyphs))
  return make.Box({ flexDirection: 'column', children: isNothing(below) ? drawn : [...drawn, below as RenderElement] })
}

export function bandRow(make: BandMake, row: BandRow, columns: number, glyphs: BandGlyphs = 'full'): RenderElement {
  const tone = TONES[row.tone]
  const mark = glyphs === 'full' && row.icon ? row.icon[0] : tone.glyph
  const actions = row.actions ?? []
  const buttons = actions.reduce((n, a) => n + buttonWidth(a) + 1, 0)
  // a full icon (an emoji, say) may take two cells
  const markWidth = glyphs === 'full' && row.icon ? 3 : 2
  const head = row.title ? row.title.length + 3 : 0
  const tail = row.note ? row.note.length + 3 : 0
  const isStacked = actions.length > 0 && columns - markWidth - buttons - head - tail < 24
  const lines = Math.max(1, row.maxLines ?? 2)
  // the first line shares its width with the glyph, the title, the note and (beside it) the buttons; the others have it all
  const firstLine = Math.max(10, columns - markWidth - (isStacked ? 0 : buttons) - head - tail)
  const room = firstLine + (lines - 1) * Math.max(10, columns - markWidth)
  const children: RenderElement[] = []
  if (row.title) children.push(make.Text({ bold: true, children: [row.title] }), make.Text({ dimColor: true, children: [' · '] }))
  children.push(make.Text({ children: [clipText(row.text, room)] }))
  if (row.note) children.push(make.Text({ dimColor: true, children: [` · ${row.note}`] }))
  const glyph = make.Text({ color: tone.color, bold: true, children: [mark] })
  const text = make.Box({ flexShrink: 1, flexGrow: 1, children: [make.Text({ wrap: 'wrap', children })] })
  const drawn = actions.map(a =>
    make.Button({
      key: a.key,
      label: a.label,
      ...(a.hotkey ? { hotkey: a.hotkey } : {}),
      ...(a.isPrimary ? { variant: 'primary' } : {}),
      ...(a.isQuiet ? { dimColor: true } : {}),
      ...(a.isDismiss ? { role: 'dismiss' } : {}),
      onPress: a.onPress,
    }),
  )
  if (!isStacked) return make.Box({ key: row.key, flexDirection: 'row', columnGap: 1, children: [glyph, text, ...drawn] })
  return make.Box({
    key: row.key,
    flexDirection: 'column',
    children: [
      make.Box({ flexDirection: 'row', columnGap: 1, children: [glyph, text] }),
      make.Box({ flexDirection: 'row', flexWrap: 'wrap', columnGap: 1, paddingLeft: 2, children: drawn }),
    ],
  })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Code } = $.ui.resolve(e)
    const run = await read($, runAtom)
    const active = await read($, activeAtom)
    const labels = await read($, runnersAtom)
    const now = await $.clock.now()
    const color = run?.status === 'passed' ? 'green' : run?.status === 'failed' ? 'red' : 'yellow'
    const mode = e.surface === 'terminal' ? glyphMode : 'full'
    const mark = run?.status === 'passed' ? glyphOf('check', mode) : run?.status === 'failed' ? glyphOf('cross', mode) : '–'
    return (
      <Box flexDirection="column">
        <Text bold>Test radar</Text>
        <Text dimColor wrap="wrap">
          {labels.length > 0 ? `Runners: ${labels.join(' · ')}` : 'No test runner detected.'}
        </Text>
        {active !== null ? (
          <Text color="cyan" wrap="wrap">
            {`${RUNNING[mode === 'full' ? 0 : 1]} running for ${active.files.join(', ')} · ${fmtDuration(now - active.startedAt)}`}
          </Text>
        ) : null}
        {run === null ? (
          <Text dimColor wrap="wrap">
            No run yet: the related tests run 3 s after a file changes.
          </Text>
        ) : (
          <Box flexDirection="column" marginTop={1}>
            <Text bold color={color} wrap="wrap">
              {`${mark} ${run.summary}${run.failing.length > 0 ? ` · ${run.failing.join(', ')}` : ''} · ${fmtDuration(run.durationMs)}`}
            </Text>
            <Text dimColor wrap="wrap">
              {`after ${run.trigger === 'claude' ? "Claude's" : run.trigger === 'outside' ? 'your' : 'a'} edit to ${run.files.join(', ')} · ${fmtDuration(now - run.startedAt)} ago`}
            </Text>
            {run.commands.map((c, i) => (
              <Text key={`cmd${i}`} dimColor wrap="truncate-end">{`$ ${c}`}</Text>
            ))}
            <Code key="radar-tail" source={run.tail === '' ? '(no output)' : run.tail} wrap="wrap" />
          </Box>
        )}
        <Box flexDirection="row" gap={1} marginTop={1}>
          {run?.status === 'failed' ? <Button key="radar-fix" hotkey="f" label="Fix it" variant="primary" onPress={() => void fixIt($)} /> : null}
          {run !== null ? <Button key="radar-again" hotkey="r" label="Run again" onPress={() => void runAgain($)} /> : null}
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })