rabe

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const { value: items = [] } = await $.state.get({ plugin: 'rabe', key: 'items' })
    const { value: removed = [] } = await $.state.get({ plugin: 'rabe', key: 'removed' })
    if (!items.some(item => item.status === 'running')) return next(e)
    const usage = await $.session.usage().catch(() => undefined)
    const model = {
      items,
      removed,
      turns: {},
      lines: {},
      now: await $.clock.now(),
      usd: usage?.cost?.usd,
    }
    const size = bounded({
      columns: e.props.bodyColumns,
      rows: e.props.maxRows,
      surface: e.surface,
      hasInput: false,
    })

    return render($.ui.resolve(e), e.surface, bandView(model, size, NO_SELECTION), () => {}, 'band')
  })

export function render(
  ui: Ui,
  surface: RenderSurface,
  drawn: Drawn | Piece[],
  act: Act,
  key = 'cells',
) {
  const { Box, Button, Input, Raster, Text } = ui
  const color = (rgb: number | undefined) => paint(rgb, surface)
  const run =
    (action: Action) =>
    (press: At): void => {
      if (action.type !== 'none') act(action, press)
    }

  const part = (one: Part, hasScope: boolean) =>
    isPress(one) ? (
      <Button
        key={one.key}
        plain
        label={one.label}
        hotkey={one.hotkey}
        autoFocus={one.autoFocus}
        dimColor={one.dim}
        hover={hasScope ? { bold: true } : undefined}
        onPress={run(one.action)}
      />
    ) : (
      <Text color={color(one[1]?.fg)} backgroundColor={color(one[1]?.bg)} wrap="truncate">
        {one[0]}
      </Text>
    )

  // A Button takes no color, so each run of parts on one background sits in
  // a Box of that color. A row with one Button is keyed after it: the hover
  // scope of its label.
  const row = (line: Line) => {
    const presses = line.spans.filter(isPress)
    const scope = presses.length === 1 ? presses[0]?.key : undefined
    const runs: { bg?: number; parts: Part[] }[] = []
    for (const one of line.spans) {
      if (!(isPress(one) ? one.label : one[0])) continue
      const bg = isPress(one) ? one.bg : one[1]?.bg
      const last = runs.at(-1)
      if (last && last.bg === bg) last.parts.push(one)
      else runs.push({ bg, parts: [one] })
    }
    const draw = (parts: Part[]) => parts.map(one => part(one, scope !== undefined))

    return (
      <Box
        {...(scope && { key: `line:${scope}` })}
        flexDirection="row"
        backgroundColor={color(line.bg ?? (runs.length === 1 ? runs[0]?.bg : undefined))}
      >
        {runs.length === 0 && <Text> </Text>}
        {runs.length === 1 && draw(runs[0]?.parts ?? [])}
        {runs.length > 1 &&
          runs.map(run => (
            <Box flexDirection="row" backgroundColor={color(run.bg)}>
              {draw(run.parts)}
            </Box>
          ))}
      </Box>
    )
  }

  const control = (one: ViewButton) => (
    <Button
      key={one.key}
      label={one.label}
      hotkey={one.hotkey}
      autoFocus={one.autoFocus}
      dimColor={one.dim}
      onPress={run(one.action)}
    />
  )

  // Controls side by side wrap as one row.
  const list = Array.isArray(drawn) ? drawn : layout(drawn)
  const runs: (Piece | ViewButton[])[] = []
  for (const piece of list) {
    const last = runs.at(-1)
    if (!('button' in piece)) runs.push(piece)
    else if (Array.isArray(last)) last.push(piece.button)
    else runs.push([piece.button])
  }
  let rows = 0

  return (
    <Box flexDirection="column">
      {runs.flatMap(one => {
        if (Array.isArray(one)) {
          rows += 1
          return [
            <Box
              key={rows > 1 ? `controls-${rows}` : 'controls'}
              flexDirection="row"
              flexWrap="wrap"
              columnGap={1}
            >
              {one.map(control)}
            </Box>,
          ]
        }
        if ('input' in one) {
          const { input } = one
          return Input
            ? [
                <Input
                  key={input.key}
                  label={input.label}
                  placeholder={input.placeholder}
                  value={input.value}
                  submitLabel={input.submitLabel}
                  onInput={input.isLive ? (text, at) => act(input.action(text), at) : undefined}
                  onSubmit={(text, at) => act(input.action(text, at.kind), at)}
                />,
              ]
            : []
        }
        if ('spans' in one) return [row(one)]
        if (!('chart' in one)) return []
        const cut = clamp(one.chart)
        return surface === 'terminal' && Raster
          ? [<Raster key={key} columns={cut.columns} rows={cut.rows} cells={encode(cut)} />]
          : lines(one.chart).map(text => <Text wrap="truncate">{text || ' '}</Text>)
      })}
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const seat = seats.get(e.surface)
    seats.set(e.surface, { placement: e.props.placement, isFocused: e.props.isFocused })
    if (seat?.isFocused && seat.placement !== e.props.placement) {
      $.clock.after(500, () => void refocus($).catch(() => undefined))
    }
    const { model, selection: seen } = await look($, e.props.isFocused)
    const size = bounded({
      columns: e.props.bodyColumns,
      rows: e.props.scroll?.bodyRows || 24,
      surface: e.surface,
      hasInput: 'Input' in ui,
      ...(e.props.scroll && {
        window: { top: e.props.scroll.offset, rows: e.props.scroll.bodyRows },
      }),
    })

    // What x and g would act on decides whether they may.
    const armed = paneView(model, size, { ...seen, isArmed: true, isListArmed: true })
    const { selected } = seen
    feed($, {
      type: 'drawn',
      fallback: fallbackOf(model, seen),
      targets: targetsOf(armed),
      selected,
    })
    const selection = { ...seen, isArmed: arming.isArmed, isListArmed: arming.isListArmed }
    const drawn = arming.isArmed && arming.isListArmed ? armed : paneView(model, size, selection)
    const before = heldOf(e.surface, selection)
    const out = hold(layout(drawn), before, seatsRows(selection))
    holds.set(e.surface, { scope: scopeOf(selection), keys: out.held })
    if (before && ringOn && shifts(before, out.held, ringOn)) {
      shifted = { key: ringOn, isAsked: false, tries: 0 }
    }
    if (shifted && seat && !seat.isFocused && e.props.isFocused) shifted.tries = 0
    if (shifted && !shifted.isAsked && shifted.tries < 3 && e.props.isFocused) {
      shifted.isAsked = true
      shifted.tries += 1
      const want = shifted
      $.clock.after(REGAIN_MS, () => void regain($, want).catch(() => undefined))
    }

    return render(ui, e.surface, out.list, leave)
  })