spec-runner

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const r = await read($, run)
    if (r === null || (r.phase !== 'running' && r.phase !== 'paused')) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const below = await next(e)
    const item = r.current === null ? undefined : r.items[r.current]
    const position = r.current === null ? Math.min(r.items.length, countDone(r) + 1) : r.current + 1
    const isRunning = r.phase === 'running'
    const what =
      r.verifying !== null ? `checking: ${r.verifying}` : isRunning ? (item?.text ?? 'next item…') : `paused: ${r.reason ?? 'waiting'}`
    const row: BandRow = {
      key: 'spec-runner-item',
      tone: isRunning ? 'active' : /^Claude asks/.test(r.reason ?? '') ? 'ask' : 'warn',
      icon: isRunning ? ['▶', '►'] : ['⏸', /^Claude asks/.test(r.reason ?? '') ? '?' : '▲'],
      title: `Spec ${position}/${r.items.length}`,
      text: what,
      actions: [
        isRunning ? { key: 'pause', label: 'Pause', onPress: () => void pressPause($) } : { key: 'resume', label: 'Resume', isPrimary: true, onPress: () => void pressStart($) },
        { key: 'skip', label: 'Skip', isQuiet: true, onPress: () => void pressSkip($) },
        { key: 'stop', label: 'Stop', isQuiet: true, onPress: () => void pressStop($) },
      ],
    }
    return band({ Box, Text, Button } as unknown as BandMake, [row], e.props.bodyColumns, below, e.surface === 'terminal' ? glyphMode : 'full')
  })

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 } = $.ui.resolve(e)
    const r = await read($, run)
    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 spec loaded. Run /spec-run &lt;path.md&gt; with a Markdown checklist (- [ ] lines).</Text>
          <Box marginTop={1}>{close}</Box>
        </Box>
      )
    }
    const done = countDone(r)
    const check = verifyCommand()
    const state =
      r.phase === 'running'
        ? r.verifying !== null
          ? `checking with ${r.verifying}`
          : 'running'
        : r.phase === 'paused'
          ? `paused: ${r.reason ?? ''}`
          : r.phase === 'done'
            ? 'done'
            : r.phase === 'stopped'
              ? 'stopped'
              : 'ready'
    return (
      <Box flexDirection="column">
        <Text>
          <Text bold>{fileName(r.path)}</Text>
          <Text dimColor>
            {'  '}
            {done}/{r.items.length} done{r.checkedAtStart > 0 ? ` (+${r.checkedAtStart} checked before)` : ''} ·{' '}
          </Text>
          <Text color={r.phase === 'paused' ? 'yellow' : r.phase === 'running' ? 'cyan' : r.phase === 'done' ? 'green' : undefined}>{state}</Text>
        </Text>
        <Text dimColor>
          {check === '' ? 'No check command: an item is ticked when Claude says DONE.' : `Check: ${check} (up to ${maxFixes()} fix-up prompts per item)`}
        </Text>
        <Box flexDirection="column" marginTop={1}>
          {r.items.map((item, index) => (
            <Box flexDirection="column">
              <Text bold={index === r.current} dimColor={item.status === 'skipped'} wrap="wrap">
                <Text color={COLOR[item.status]}>{GLYPH[item.status][(e.surface === 'terminal' ? glyphMode : 'full') === 'full' ? 0 : 1]}</Text> {item.text}
              </Text>
              {item.note !== null && (
                <Text dimColor color={COLOR[item.status]}>
                  {'    '}
                  {item.note}
                </Text>
              )}
            </Box>
          ))}
        </Box>
        <Box marginTop={1} gap={1}>
          {r.phase === 'running' ? (
            <Button key="pause" hotkey="p" label="Pause" onPress={() => void pressPause($)} />
          ) : r.phase === 'done' ? null : (
            <Button
              key="start"
              hotkey="s"
              variant="primary"
              label={r.phase === 'paused' ? 'Resume' : r.phase === 'ready' ? 'Start' : 'Start again'}
              onPress={() => void pressStart($)}
            />
          )}
          {(r.phase === 'running' || r.phase === 'paused') && <Button key="skip" hotkey="k" label="Skip" onPress={() => void pressSkip($)} />}
          {(r.phase === 'running' || r.phase === 'paused') && <Button key="stop" hotkey="t" label="Stop" onPress={() => void pressStop($)} />}
          {r.phase !== 'running' && <Button key="reload" hotkey="r" label="Reload file" dimColor onPress={() => void reload($)} />}
          {close}
        </Box>
      </Box>
    )
  })