best-of-n

  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, Code } = $.ui.resolve(e)
    const r = await read($, run)
    const shown = await read($, diff)
    const close = <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
    if (r === null) {
      return (
        <Box flexDirection="column">
          <Text dimColor>No attempts yet. Run /attempts [2-4] &lt;task&gt; to try a task several ways in parallel git worktrees.</Text>
          <Box marginTop={1}>{close}</Box>
        </Box>
      )
    }
    const now = await $.clock.now()
    const paneRows = e.props.scroll.bodyRows > 0 ? e.props.scroll.bodyRows : (e.viewport?.rows ?? 40)
    const statLines = Math.max(2, Math.min(8, Math.floor((paneRows - 10) / Math.max(1, r.attempts.length)) - 4))

    const isFull = (e.surface === 'terminal' ? glyphMode : 'full') === 'full'
    const g = (full: string, safe: string) => (isFull ? full : safe)
    const card = (a: Attempt) => {
      const elapsed = fmtElapsed((a.endedAt ?? now) - a.startedAt)
      const head =
        a.status === 'starting'
          ? { glyph: g('…', '•'), color: 'cyan', text: 'starting' }
          : a.status === 'running'
            ? { glyph: g('◉', '►'), color: 'cyan', text: `running ${elapsed}` }
            : a.status === 'done'
              ? { glyph: g('✓', '√'), color: 'green', text: `done in ${elapsed}` }
              : a.status === 'failed'
                ? { glyph: g('✗', '×'), color: 'red', text: `failed after ${elapsed}` }
                : a.status === 'adopted'
                  ? { glyph: g('★', '♦'), color: 'green', text: 'adopted' }
                  : { glyph: g('−', '○'), color: 'gray', text: 'discarded' }
      const checks = a.checks === 'pass' ? { text: 'checks pass', color: 'green' } : a.checks === 'fail' ? { text: 'checks fail', color: 'red' } : a.checks === 'none' ? { text: 'no checks', color: 'gray' } : null
      const stat = (a.stat ?? '').split('\n').filter(l => l.trim() !== '')
      const files = stat.slice(0, -1)
      const canAct = a.worktree !== null && a.status !== 'discarded' && !isLive(a)
      return (
        <Box flexDirection="column" marginTop={1} borderStyle="round" borderColor={head.color} paddingX={1}>
          <Text wrap="wrap">
            <Text color={head.color}>{head.glyph}</Text> <Text bold>{a.id}</Text> · {a.approach} · <Text color={head.color}>{head.text}</Text>
            {checks !== null && (
              <Text color={checks.color}>
                {' · '}
                {checks.text}
              </Text>
            )}
          </Text>
          {a.summary !== null && <Text>{a.summary}</Text>}
          {a.shortstat !== null && <Text dimColor>{a.shortstat}</Text>}
          {files.slice(0, statLines).map(line => (
            <Text dimColor wrap="truncate-end">
              {line}
            </Text>
          ))}
          {files.length > statLines && <Text dimColor> … {files.length - statLines} more files</Text>}
          {a.note !== null && <Text color={a.status === 'failed' ? 'red' : 'yellow'}>{a.note}</Text>}
          {canAct && (
            <Box gap={1}>
              {a.shortstat !== null && (
                <Button key={`diff-${a.id}`} label={shown?.attempt === a.id ? 'Hide diff' : 'Diff'} onPress={() => void toggleDiff($, a.id)} />
              )}
              {a.shortstat !== null && a.status !== 'adopted' && (
                <Button key={`adopt-${a.id}`} label="Adopt" variant="primary" onPress={() => void adopt($, a.id)} />
              )}
              <Button key={`discard-${a.id}`} label="Discard" dimColor onPress={() => void discard($, a.id)} />
            </Box>
          )}
          {!canAct && a.status !== 'discarded' && !isLive(a) && (
            <Box gap={1}>
              <Button key={`discard-${a.id}`} label="Remove" dimColor onPress={() => void discard($, a.id)} />
            </Box>
          )}
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
        <Text bold wrap="wrap">
          {r.task.split('\n')[0]}
        </Text>
        <Text dimColor>
          {r.attempts.length} attempts from {r.base.slice(0, 8)} · nothing is applied until you press Adopt
        </Text>
        {r.attempts.map(card)}
        {shown !== null && (
          <Box flexDirection="column" marginTop={1}>
            <Box gap={1}>
              <Text bold>Diff of {shown.attempt}</Text>
              <Button key="close-diff" label="Hide" dimColor onPress={() => void update($, diff, () => null)} />
            </Box>
            {shown.sections.map(section => (
              <Box flexDirection="column" marginTop={1}>
                <Text color="cyan" wrap="truncate-end">
                  {section.kind === 'added' ? '+' : section.kind === 'deleted' ? g('−', '-') : '~'} {section.path}
                  {section.note === null ? '' : `  (${section.note})`}
                </Text>
                {section.source !== null && <Code source={section.source} format="diff" path={section.path} />}
              </Box>
            ))}
            {shown.omitted > 0 && <Text dimColor>{shown.omitted} more files not shown: open the worktree to see them.</Text>}
          </Box>
        )}
        <Box marginTop={1}>{close}</Box>
      </Box>
    )
  })