auto-polish

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || e.props.view.agentId !== undefined) return next(e)
    const offer = await read($, offerAtom)
    const note = await read($, noteAtom)
    if (offer === null && note === null) 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 columns = e.props.bodyColumns
    const off: BandAction = { key: 'polish-off', label: 'Off', isQuiet: true, onPress: () => void turnOff($) }

    if (offer !== null) {
      if (offer.status === 'working') {
        const working: BandRow = { key: 'auto-polish-offer', tone: 'active', title: 'auto-polish', text: 'improving your prompt…', actions: [{ key: 'polish-mine', hotkey: 'm', label: 'Send mine', onPress: () => void sendOffer($, 'mine') }] }
        return band(make, [working], columns, below)
      }
      // The whole improved prompt shows before it can go as your words; with [placeholders?] left, only Edit can send it.
      const blanks = placeholdersIn(offer.improved)
      const head: BandRow = {
        key: 'auto-polish-offer',
        tone: 'ask',
        title: 'auto-polish',
        text: offer.goal === '' ? 'improved prompt' : `improved prompt — ${offer.goal}`,
        actions: [
          ...(blanks.length === 0 ? [{ key: 'polish-send', hotkey: 'i', isPrimary: true, label: 'Send improved', onPress: () => void sendOffer($, 'improved') }] : []),
          { key: 'polish-mine', hotkey: 'm', label: 'Send mine', onPress: () => void sendOffer($, 'mine') },
          { key: 'polish-edit', isPrimary: blanks.length > 0, label: 'Edit', onPress: () => void editOffer($) },
          off,
        ],
      }
      return (
        <Box flexDirection="column">
          {bandRow(make, head, columns)}
          {offer.improved
            .split('\n')
            .filter(line => line.trim() !== '')
            .map(line => (
              <Text wrap="wrap">{`  ${line}`}</Text>
            ))}
          {blanks.length > 0 && <Text dimColor wrap="wrap">{`  ${blanks.length === 1 ? 'one blank' : `${blanks.length} blanks`} to fill (${blanks.join(' ')}): Edit puts it in the prompt box`}</Text>}
          {below}
        </Box>
      )
    }

    if (note === null) return below
    const isExpanded = await read($, expandedAtom)
    if (note.isWithdrawn) {
      return band(make, [{ key: 'auto-polish-note', tone: 'idle', title: 'auto-polish', text: 'reading withdrawn; Claude was told to follow your words as written' }], columns, below)
    }
    const details = [
      ...(note.scope.length > 0 ? [`Likely scope: ${note.scope.join(', ')}`] : []),
      ...(note.constraints.length > 0 ? [`Constraints: ${note.constraints.join('; ')}`] : []),
      ...(note.done !== '' ? [`Done when: ${note.done}`] : []),
    ]
    const row: BandRow = {
      key: 'auto-polish-note',
      tone: 'info',
      title: 'auto-polish',
      text: `read as — ${note.goal}`,
      actions: [
        { key: 'polish-see', label: isExpanded ? 'Hide' : 'See', isQuiet: true, onPress: () => void update($, expandedAtom, v => !v) },
        { key: 'polish-undo', hotkey: 'u', label: 'Undo for this prompt', onPress: () => void undo($) },
        off,
      ],
    }
    return (
      <Box flexDirection="column">
        {bandRow(make, row, columns)}
        {isExpanded && details.map(line => <Text dimColor wrap="wrap">{`  ${line}`}</Text>)}
        {isExpanded && <Text dimColor>{`  (${note.source === 'haiku' ? 'read by haiku' : 'read by the rules, no model call'})`}</Text>}
        {below}
      </Box>
    )
  })

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 }),
    ],
  })
}