rebound

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || e.props.view.agentId !== undefined) return next(e)
    const d = await read($, draftAtom)
    if (d === null) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const why = d.why.replace(/`/g, '')
    const below = await next(e)
    const isHeld = d.heldMessage !== null
    const make = { Box, Text, Button } as unknown as BandMake
    const dismissAction: BandAction = { key: 'rebound-dismiss', hotkey: 'd', label: isHeld ? 'Send mine' : 'Dismiss', isQuiet: !isHeld, isDismiss: !isHeld, onPress: () => void dismiss($) }
    if (d.status === 'drafting') {
      return band(make, [{ key: 'rebound-offer', tone: 'active', title: 'rebound', text: 'drafting a retry from what failed…', note: why, actions: [dismissAction] }], e.props.bodyColumns, below)
    }
    if (d.dueAt !== null) {
      const left = Math.max(0, Math.ceil((d.dueAt - (await $.clock.now())) / SEC))
      const countdown: BandRow = {
        key: 'rebound-offer',
        tone: 'active',
        title: 'rebound',
        text: `retrying with a different approach in ${left} s`,
        note: why,
        actions: [
          { key: 'rebound-stop', hotkey: 's', label: 'Stop', onPress: () => void stopAuto($) },
          { key: 'rebound-retry', hotkey: 'r', isPrimary: true, label: 'Retry now', onPress: () => void retry($, false) },
        ],
      }
      return band(make, [countdown], e.props.bodyColumns, below)
    }
    const offer: BandRow = {
      key: 'rebound-offer',
      tone: 'ask',
      title: 'rebound',
      text: 'retry with a different approach?',
      note: `${why}${d.hasLesson ? '' : ' (no lesson: haiku unavailable)'}`,
      actions: [
        { key: 'rebound-retry', hotkey: 'r', isPrimary: true, label: 'Retry', onPress: () => void retry($, false) },
        { key: 'rebound-edit', hotkey: 'e', label: 'Edit', onPress: () => void edit($) },
        { key: 'rebound-see', label: 'See', isQuiet: true, onPress: () => void openPane($) },
        dismissAction,
      ],
    }
    return band(make, [offer], e.props.bodyColumns, below)
  })

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, Markdown } = $.ui.resolve(e)
    const isEnabled = await isOn($)
    const isAutoOn = await isAuto($)
    const d = await read($, draftAtom)
    const task = await read($, taskAtom)
    const ledger = await read($, ledgerAtom)
    const history = await read($, historyAtom)
    return (
      <Box flexDirection="column">
        <Text bold>
          rebound <Text color={isEnabled ? 'green' : 'yellow'}>{isEnabled ? 'on' : 'off'}</Text>
          <Text dimColor>{` · auto ${isAutoOn ? 'on' : 'off'} · retries this task ${task.retries}/${maxRetries()}`}</Text>
        </Text>
        <Text dimColor wrap="wrap">
          {ledgerLine(ledger)}
        </Text>
        <Text> </Text>
        {d === null && <Text dimColor>No retry offered. When a turn ends with checks still failing, Claude giving up, or a loop of errors, a sharper retry is drafted here.</Text>}
        {d !== null && d.status === 'drafting' && <Text dimColor>{`Drafting a retry (${d.why.replace(/`/g, '')})…`}</Text>}
        {d !== null && d.status === 'ready' && (
          <Box flexDirection="column">
            <Text wrap="wrap">
              <Text color="yellow">{`Why: ${d.why.replace(/`/g, '')}`}</Text>
              <Text dimColor>{` · ${d.hasLesson ? `lesson by haiku, ${fmtUsd(d.usd)}` : 'plain draft (no lesson)'}`}</Text>
            </Text>
            {d.heldMessage !== null && <Text dimColor wrap="wrap">{`Holding your message: "${clip(d.heldMessage.replace(/\s+/g, ' '), 300)}"`}</Text>}
            <Box marginTop={1}>
              <Markdown text={d.text.length > 9_000 ? `${d.text.slice(0, 9_000)}\n…` : d.text} />
            </Box>
            <Box gap={1} marginTop={1}>
              <Button key="retry" hotkey="r" variant="primary" label="Retry" onPress={() => void retry($, false)} />
              <Button key="edit" hotkey="e" label="Edit" onPress={() => void edit($)} />
              <Button key="dismiss" hotkey="d" label={d.heldMessage !== null ? 'Send mine' : 'Dismiss'} onPress={() => void dismiss($)} />
            </Box>
          </Box>
        )}
        {history.length > 0 && (
          <Box flexDirection="column" marginTop={1}>
            <Text bold>Recent</Text>
            {history
              .slice(-8)
              .reverse()
              .map(h => (
                <Text dimColor wrap="truncate-end">{`${hhmmss(h.at)}  ${h.action.padEnd(12)} ${h.why.replace(/`/g, '')}${h.usd > 0 ? ` · ${fmtUsd(h.usd)}` : ''}`}</Text>
              ))}
          </Box>
        )}
        <Box gap={1} marginTop={1}>
          <Button key="auto" hotkey="a" label={isAutoOn ? 'Auto: on' : 'Auto: off'} onPress={() => void toggleAuto($)} />
          <Button key="toggle" hotkey="t" label={isEnabled ? 'Turn off' : 'Turn on'} onPress={() => void toggleOn($)} />
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })