sidecard

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!band || e.props.hasSurvey || e.props.isWorking || !settings.enabled) return next(e)
    const now = await $.clock.now()
    if (now - band.at > holdMs(band.card)) {
      band = null
      return next(e)
    }
    const ui = $.ui.resolve(e)
    return drawCard(ui, band.card, {
      label: labelOf(band.cat),
      color: colorOf(band.cat),
      shownFor: (now - band.at) / 1000,
      columns: e.props.bodyColumns,
    })
  })

export function drawCard(
  ui: { Box: any; Text: any },
  card: Card,
  opts: { label: string; color: string; shownFor: number; columns: number },
) {
  const { Box, Text } = ui
  const { color } = opts
  const maxInner = Math.max(24, Math.min(MAX_INNER, opts.columns - 6))
  const body = card.body.split('\n').flatMap((l) => wrap(l, maxInner))
  const f = footer(card, opts.shownFor)
  const answer = f.answer.flatMap((l) => wrap(l, maxInner))
  const title = ' sidecard · ' + opts.label + ' '
  const hint = f.hint ? '┄ ' + f.hint : ''
  const inner = Math.max(title.length + 2, hint.length, ...body.map((l) => l.length), ...answer.map((l) => l.length))
  const W = inner + 2

  const edge = (s: string) => Text({ color, dimColor: true, children: [s] })
  const row = (text: string, o: Record<string, unknown> = {}) =>
    Box({
      flexDirection: 'row',
      children: [edge('│ '), Text({ ...o, children: [pad(text, inner)] }), edge(' │')],
    })

  return Box({
    flexDirection: 'column',
    children: [
      Box({
        flexDirection: 'row',
        children: [
          edge('╭─'),
          Text({ color, bold: true, children: [title] }),
          edge('─'.repeat(Math.max(0, W - 2 - title.length)) + '╮'),
        ],
      }),
      ...body.map((l, i) => row(l, i === 0 ? { bold: true } : {})),
      ...(hint ? [row(hint, { dimColor: true, italic: true })] : []),
      ...(answer.length
        ? [edge('├' + '┄'.repeat(W) + '┤'), ...answer.map((l) => row(l, { color: 'green' }))]
        : []),
      edge('╰' + '─'.repeat(W) + '╯'),
    ],
  })
}

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE) return next(e)
    const { Box, Text, Button, Select } = $.ui.resolve(e)
    const redraw = () => $.ui.invalidate('ui.render')

    const toggle = async (name: string) => {
      settings.off = isOn(name) ? [...settings.off, name] : settings.off.filter((n) => n !== name)
      redraw()
      await save($)
      const c = cats.find((x) => x.name === name)
      if (c && isOn(name)) void refill($, c)
    }
    const setInput = async (c: Category, key: string, value: string) => {
      settings.values[c.name] = { ...settings.values[c.name], [key]: value }
      bufs.delete(c.name)
      redraw()
      await save($)
      void refill($, c)
    }

    const blocks = cats.map((c, i) => {
      const vals = valuesOf(c)
      return Box({
        key: 'cat-' + c.name,
        flexDirection: 'column',
        children: [
          Box({
            flexDirection: 'row',
            columnGap: 2,
            children: [
              Button({
                key: 'toggle-' + c.name,
                label: (isOn(c.name) ? '✓ ' : '☐ ') + c.title,
                hotkey: i < 9 ? String(i + 1) : undefined,
                plain: true,
                dimColor: !isOn(c.name),
                onPress: () => toggle(c.name),
              }),
              Text({ dimColor: true, children: [c.mode === 'delayed' ? 'answer after ' + c.revealAfter + 's' : 'read only'] }),
            ],
          }),
          ...c.inputs.map((inp) =>
            Select({
              key: `input-${c.name}-${inp.key}`,
              label: '    ' + inp.key,
              options: inp.options.map((o) => ({ value: o, label: o })),
              value: vals[inp.key],
              onSelect: (v: string) => setInput(c, inp.key, v),
            }),
          ),
        ],
      })
    })

    return Box({
      flexDirection: 'column',
      children: [
        Text({ bold: true, children: ['sidecard · pick categories'] }),
        Text({ children: [' '] }),
        ...(blocks.length ? blocks : [Text({ dimColor: true, children: ['No categories found.'] })]),
        Text({ children: [' '] }),
        Box({
          flexDirection: 'row',
          columnGap: 3,
          children: [
            Button({
              key: 'generate',
              label: 'generate with haiku: ' + (settings.generate ? 'on' : 'off'),
              hotkey: 'g',
              onPress: async () => {
                settings.generate = !settings.generate
                redraw()
                await save($)
                if (settings.generate) refillAll($)
              },
            }),
            Button({
              key: 'now',
              label: 'show a card now',
              hotkey: 'n',
              onPress: async () => {
                await $.ui.close({ id: PANE })
                await showNow($)
              },
            }),
          ],
        }),
        Text({ dimColor: true, children: ['Add a category: drop a .md file in ~/.claude/sidecard/categories (or git clone a repo of them there).'] }),
      ],
    })
  })