meme-factory

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE) return next(e)
    return drawPane($, e)
  })

function drawPane($, e) {
  const el = $.ui.resolve(e)
  const { Box, Text, Button } = el
  const inline = e.props?.placement === 'inline'
  const children = [header($, el, e)]

  if (job.status === 'idle') {
    const picked = job.pending && TEMPLATES.find((t) => t.id === job.pending)
    if (picked) children.push(Text({ color: 'suggestion', wrap: 'truncate-end', children: [`Next meme uses ${picked.name}`] }))
    else if (!inline) children.push(Text({ dimColor: true, children: ['Ask Claude for a meme, or describe one here.'] }))
  }

  if (job.status === 'working') {
    children.push(stageLine(el))
    // Docked, the old drafts stay put (dimmed) so the panel doesn't jump while it remixes.
    if (!inline && job.drafts.length) {
      const old = job.drafts[job.selected] ?? job.drafts[0]
      children.push(
        Text({ dimColor: true, wrap: 'truncate-end', children: [job.drafts.map((d, i) => `${i + 1}: ○ ${tabLabel(d)}`).join('   ')] }),
        ...caption(el, e, old, { dim: true }),
        Text({ dimColor: true, children: ['These stay until the new drafts land.'] }),
      )
    }
    children.push(...keys($, el, e, []))
  }

  if (job.status === 'error') {
    children.push(
      Text({ color: 'error', wrap: 'wrap', children: [`✗ The factory jammed: ${job.error}`] }),
      ...keys($, el, e, [Button({ key: 'retry', label: 'Try again', hotkey: 'r', plain: true, onPress: () => remix($, '') })]),
    )
  }

  if (job.status === 'review') {
    const draft = job.drafts[job.selected]
    children.push(
      row(
        el,
        job.drafts.map((d, i) =>
          Button({
            key: `draft-${i}`,
            // A Button can't be bold or colored, so the label carries the pick.
            label: `${i === job.selected ? '●' : '○'} ${tabLabel(d)}`,
            hotkey: String(i + 1),
            plain: true,
            dimColor: i !== job.selected,
            onPress: () => select($, i),
          }),
        ),
        3,
      ),
      ...picture(el, e, draft),
      ...caption(el, e, draft),
      ...noPreview(el, e),
      ...checkNote(el),
      ...keys(
        $,
        el,
        e,
        [
          Button({ key: 'approve', label: 'Approve', hotkey: 'a', plain: true, onPress: () => guard($, () => approve($)) }),
          Button({ key: 'remix', label: 'Remix', hotkey: 'r', plain: true, onPress: () => remix($, '') }),
          Button({ key: 'more', label: 'More like this', hotkey: 'm', plain: true, onPress: () => variations($) }),
        ],
        { draft },
      ),
    )
  }

  if (job.status === 'approved') children.push(...postingView($, el, e))

  if (job.status === 'idle') {
    children.push(chatInput($, el), Button({ key: 'gallery', label: 'Gallery and settings in your browser', hotkey: 'v', plain: true, onPress: () => openGallery($) }))
  } else {
    children.push(...chatView($, el, inline))
  }

  // Above the prompt (a narrow terminal) every row counts, so drop the blank lines between sections.
  return Box({ flexDirection: 'column', rowGap: inline ? 0 : 1, children })
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!inBand || job.status === 'idle' || e.props?.hasSurvey) return next(e)
    if ((await $.ui.panes()).some((p) => p.id === PANE && p.isPlaced)) return next(e)
    return drawPane($, { ...e, props: { ...e.props, placement: 'inline' } })
  })