ci-autopilot

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // A drawing is a hook frame: a reviewer spawned here runs past this hook alone (see spawnReviewer).
    if (reviewRequest !== null && !isSpawning) await spawnReviewer($)
    const failure = await read($, failureAtom)
    const feedback = await read($, feedbackAtom)
    if (e.props.hasSurvey || (failure === null && feedback === null)) return next(e)
    const { Box, Text, Button, Link } = $.ui.resolve(e)
    const mode = e.surface === 'terminal' ? glyphMode : 'full'
    const below = await next(e)
    const make = { Box, Text, Button } as unknown as BandMake
    const count = feedback?.items.length ?? 0
    return (
      <Box flexDirection="column">
        {failure !== null &&
          bandRow(
            make,
            {
              key: 'ci-autopilot-failure',
              tone: 'error',
              icon: GLYPHS.cross,
              title: 'CI failed',
              text: `${failure.workflow} · ${failure.job}`,
              actions: [
                { key: 'ci-fix', label: 'Fix it', isPrimary: true, onPress: () => void sendFix($, false) },
                { key: 'ci-logs', label: 'Logs', isQuiet: true, onPress: () => void openLogs($) },
                { key: 'ci-dismiss', label: 'Dismiss', isQuiet: true, isDismiss: true, onPress: () => void dismissFailure($) },
              ],
            },
            e.props.bodyColumns,
            mode,
          )}
        {feedback !== null && (
          // the shared row's look by hand: it has a Link, which the helper's buttons can't be
          <Box key="ci-autopilot-feedback" flexDirection="row" columnGap={1}>
            <Text color="magenta" bold>
              {glyphOf('speech', mode)}
            </Text>
            <Box flexShrink={1} flexGrow={1}>
              <Text wrap="wrap">
                <Text bold>{`${count} new review ${count === 1 ? 'comment' : 'comments'}`}</Text>
                <Text dimColor> · </Text>
                {`on PR #${feedback.pr}`}
              </Text>
            </Box>
            <Button key="ci-address" label="Address them" variant="primary" onPress={() => void addressFeedback($)} />
            <Link href={feedback.url} label="Open" />
            <Button key="ci-feedback-dismiss" label="Dismiss" dimColor onPress={() => void dismissFeedback($)} />
          </Box>
        )}
        {below}
      </Box>
    )
  })

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, Link } = $.ui.resolve(e)
    const mode = e.surface === 'terminal' ? glyphMode : 'full'
    const failure = await read($, failureAtom)
    const watch = await read($, watchAtom)
    if (failure === null) {
      return (
        <Box flexDirection="column">
          <Text bold>CI</Text>
          <Text dimColor wrap="wrap">
            {watch === null ? 'No CI failure to show: a failed run after a push, or on your open PR, appears here.' : `Watching ${watch.workflow ?? 'for a run'} on ${watch.branch}…`}
          </Text>
          <Box marginTop={1}>
            <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void closeLogs($)} />
          </Box>
        </Box>
      )
    }
    return (
      <Box flexDirection="column">
        <Text bold wrap="wrap">
          <Text color="red">{glyphOf('cross', mode)}</Text> {failure.workflow} · {failure.job}
        </Text>
        <Text dimColor wrap="wrap">
          {failure.branch} · {failure.sha.slice(0, 7)} · failed at {hhmm(failure.at)}
        </Text>
        {failure.url !== '' && <Link href={failure.url} label="Open the run on GitHub" />}
        <Box gap={1} marginTop={1}>
          <Button key="pane-fix" hotkey="f" label="Fix it" variant="primary" onPress={() => void sendFix($, false)} />
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void closeLogs($)} />
        </Box>
        <Box marginTop={1}>
          <Code source={failure.excerpt.slice(0, 9800) || '(no log available)'} language="text" />
        </Box>
      </Box>
    )
  })