your-call

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Input } = $.ui.resolve(e)
    const v = await read($, view)

    if (!v) return <Text dimColor>No decision pending.</Text>

    const set = (fn: (x: View) => View) => update($, view, x => (x ? fn(x) : x))
    const step = v.steps[v.idx]
    const picks = v.picks[step.id] ?? []

    const toggle = (id: string) =>
      set(x => {
        const cur = x.picks[step.id] ?? []
        const next_ =
          step.kind === 'many' ? (cur.includes(id) ? cur.filter(c => c !== id) : [...cur, id]) : [id]
        return { ...x, picks: { ...x.picks, [step.id]: next_ } }
      })

    const move = (id: string, d: number) =>
      set(x => {
        const o = [...(x.picks[step.id] ?? [])]
        const i = o.indexOf(id)
        const j = i + d
        if (j < 0 || j >= o.length) return x
        ;[o[i], o[j]] = [o[j], o[i]]
        return { ...x, picks: { ...x.picks, [step.id]: o } }
      })

    const decisions = () =>
      v.steps.map(s => ({
        step: s.id,
        picks: v.picks[s.id],
        notes: Object.fromEntries(
          Object.entries(v.notes).filter(([k]) => k.startsWith(`${s.id}:`)).map(([k, t]) => [k.slice(s.id.length + 1), t]),
        ),
      }))

    if (v.phase === 'review') {
      return (
        <Box flexDirection="column">
          <Text>{v.title}: review</Text>
          {v.steps.map(s => (
            <Text key={`r-${s.id}`}>
              {s.question} {'->'} {(v.picks[s.id] ?? []).map(id => s.options.find(o => o.id === id)?.label ?? id).join(', ') || '(none)'}
            </Text>
          ))}
          <Box>
            <Button key="back" label="Back" onPress={() => set(x => ({ ...x, phase: 'step' }))} />
            <Button key="confirm" label="Confirm" onPress={() => finish?.({ decisions: decisions() })} />
          </Box>
        </Box>
      )
    }

    const ready = step.kind === 'rank' || picks.length > 0
    const isLast = v.idx === v.steps.length - 1
    const total = (id: string) => (step.criteria ?? []).reduce((a, c) => a + (c.scores[id] ?? 0), 0)

    return (
      <Box flexDirection="column">
        <Text>
          {v.title} {v.steps.length > 1 ? `(${v.idx + 1}/${v.steps.length})` : ''}
        </Text>
        <Text>{step.question}</Text>

        {step.viz && (
          <Box flexDirection="column">
            {textLines(step.viz, step.options, picks).map((l, i) => (
              <Text key={`v-${i}`} dimColor>{l}</Text>
            ))}
          </Box>
        )}

        {step.kind === 'compare' && step.criteria && (
          <Box flexDirection="column">
            {step.criteria.map(c => (
              <Text key={`c-${c.name}`} dimColor>
                {c.name}: {step.options.map(o => `${o.label} ${c.scores[o.id] ?? '-'}`).join(' | ')}
              </Text>
            ))}
            <Text dimColor>total: {step.options.map(o => `${o.label} ${total(o.id)}`).join(' | ')}</Text>
          </Box>
        )}

        {step.kind === 'rank'
          ? picks.map((id, i) => {
              const o = step.options.find(x => x.id === id)
              return (
                <Box key={`k-${id}`}>
                  <Text>
                    {i + 1}. {o?.label ?? id}{' '}
                  </Text>
                  <Button key={`u-${id}`} label="Up" onPress={() => move(id, -1)} />
                  <Button key={`d-${id}`} label="Down" onPress={() => move(id, 1)} />
                </Box>
              )
            })
          : step.options.map(o => {
              const on_ = picks.includes(o.id)
              const mark = step.kind === 'many' ? (on_ ? '[x]' : '[ ]') : on_ ? '(*)' : '( )'
              return (
                <Box key={`o-${o.id}`} flexDirection="column">
                  <Button key={`p-${o.id}`} label={`${mark} ${o.label}`} onPress={() => toggle(o.id)} />
                  {o.detail && <Text dimColor>    {o.detail}</Text>}
                  {o.pros?.map(p => <Text key={`+${o.id}${p}`} dimColor>    + {p}</Text>)}
                  {o.cons?.map(c => <Text key={`-${o.id}${c}`} dimColor>    - {c}</Text>)}
                  {on_ && (
                    <Input
                      key={`n-${step.id}-${o.id}`}
                      label="    tweak:"
                      placeholder="optional note"
                      value={v.notes[`${step.id}:${o.id}`] ?? ''}
                      submitLabel="save"
                      onInput={t => set(x => ({ ...x, notes: { ...x.notes, [`${step.id}:${o.id}`]: t } }))}
                      onSubmit={() => undefined}
                    />
                  )}
                </Box>
              )
            })}

        <Input
          key="regen"
          label="none fit? say what you want instead:"
          placeholder="then Enter to regenerate"
          value={v.regen}
          submitLabel="regenerate"
          onInput={t => set(x => ({ ...x, regen: t }))}
          onSubmit={t => finish?.({ regenerate: t.trim() || 'propose different options' })}
        />

        <Box>
          {v.idx > 0 && <Button key="prev" label="Back" onPress={() => set(x => ({ ...x, idx: x.idx - 1 }))} />}
          <Button
            key="next"
            label={isLast ? (v.steps.length > 1 ? 'Review' : 'Confirm') : 'Next'}
            onPress={() => {
              if (!ready) return
              if (!isLast) return set(x => ({ ...x, idx: x.idx + 1 }))
              if (v.steps.length > 1) return set(x => ({ ...x, phase: 'review' }))
              finish?.({ decisions: decisions() })
            }}
          />
          <Button key="skip" label="Skip" onPress={() => finish?.({ cancelled: true })} />
        </Box>
      </Box>
    )
  })