after

  on('ui.render', { component: 'AbovePrompt' }, ($, e, next) => drawBand($, e, next))

async function drawBand ($: Engine, e: RenderOf<'AbovePrompt'>, next: Next<'AbovePrompt'>) {
  if (settings.display !== 'band' || e.props.hasSurvey) return next(e)
  const state = await read($, QUEUE)
  if (!state || (state.items.length === 0 && !state.running) || (await read($, PANE_OPEN))) return next(e)

  const { Box, Button, Text } = $.ui.resolve(e)
  const width = Math.max(32, e.props.bodyColumns)
  const tagColor = state.paused ? 'yellow' : state.running ? 'green' : state.busy ? 'cyan' : undefined
  const lead = state.paused
    ? { color: 'yellow', text: 'paused' }
    : state.running
      ? { color: 'green', text: `▶ ${shorten(state.running.text, Math.max(12, Math.floor(width * 0.3)))}` }
      : state.busy ? null : { color: undefined, text: 'idle · /after resume' }
  const count = Math.min(3, state.items.length, Math.max(1, Math.floor((width - 40) / 18)))
  const more = state.items.length > count ? `+${state.items.length - count} more` : ''
  // The tag, the edit button, the gaps, then what the lead and "+n more" take
  const room = width - 18 - (lead ? lead.text.length + 8 : 0) - (more ? more.length + 2 : 0)
  const each = Math.max(8, Math.floor(room / Math.max(1, count)) - 4)

  return (
    <Box flexDirection="row" justifyContent="space-between" width={width}>
      <Box flexDirection="row" columnGap={2} flexShrink={1}>
        <Text key="tag" color={tagColor} inverse bold>{' after '}</Text>
        {lead && <Text key="lead" color={lead.color} dimColor={!lead.color} wrap="truncate-end">{lead.text}</Text>}
        {state.items.length === 0 && <Text dimColor>nothing else queued</Text>}
        {state.running && !state.paused && state.items.length > 0 && <Text dimColor>then</Text>}
        {state.items.slice(0, count).map((item, i) => (
          <Text key={`next-${item.id}`} wrap="truncate-end">
            <Text color="cyan" bold>{`${i + 1} `}</Text>
            <Text>{shorten(item.text, each)}</Text>
          </Text>
        ))}
        {more && <Text dimColor>{more}</Text>}
      </Box>
      <Button key="view" label="✎ edit" plain dimColor onPress={() => openPane($)} />
    </Box>
  )
}

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

async function drawPane ($: Engine, e: RenderOf<'Pane'>) {
  const elements = $.ui.resolve(e)
  const { Box, Button, Text } = elements
  const Input = 'Input' in elements ? elements.Input : undefined
  const state = (await read($, QUEUE)) ?? (createState({}) as AfterQueue)
  const note = await read($, NOTE)
  const draft = await read($, DRAFT)
  const selectedId = await read($, SELECTED)
  const status = describeStatus(state)
  const editing = draft.editId === null ? -1 : state.items.findIndex(item => item.id === draft.editId)
  const selected = state.items.find(item => item.id === selectedId) ?? state.items[0] ?? null
  const digits = String(state.items.length).length
  // "❯ 12 " before a task, its tag after it
  const room = (tag?: string) => Math.max(12, e.props.bodyColumns - digits - 3 - (tag ? tag.length + 2 : 0))
  const edit = (id?: number) => Input && editTask($, id)

  return (
    <Box flexDirection="column">
      <Text color={STATUS_COLOR[status.tone]} dimColor={status.tone === 'dim'} wrap="truncate-end">{status.text}</Text>
      <Text> </Text>
      {state.done.slice(0, 2).reverse().map(task => (
        <Text key={`done-${task.id}`} dimColor wrap="truncate-end">
          {`  ${task.status === 'stopped' ? '■' : '✓'} ${' '.repeat(digits - 1)}${shorten(task.text, room())}`}
        </Text>
      ))}
      {state.running && (
        <Text wrap="truncate-end">
          <Text color="green">{`  ▶ ${' '.repeat(digits - 1)}`}</Text>
          <Text>{shorten(state.running.text, room('running'))}</Text>
          <Text color="green" dimColor>{'  running'}</Text>
        </Text>
      )}
      {state.items.length === 0 && <Text dimColor>  Nothing queued · type a task below</Text>}
      {state.items.map((item, i) => {
        const isSelected = item.id === selected?.id
        const isEditing = i === editing
        const mark = note?.marks[String(item.id)]
        const tag = isEditing ? '✎ editing' : mark ? PANE_TAG[mark] : undefined
        const color = isEditing ? 'cyan' : mark ? CHANGE_COLOR[mark] : undefined
        return (
          <Box key={`line-${item.id}`} flexDirection="row">
            <Text color="cyan" bold>{isSelected ? '❯ ' : '  '}</Text>
            <Text color={isSelected ? 'cyan' : undefined} dimColor={!isSelected} bold={isSelected}>
              {`${String(i + 1).padStart(digits)} `}
            </Text>
            <Button key={`row-${item.id}`} label={shorten(item.text, room(tag))} plain
              autoFocus={isSelected && editing < 0 ? true : undefined} onPress={() => edit(item.id)} />
            {tag && <Text color={color}>{`  ${tag}`}</Text>}
          </Box>
        )
      })}
      {Input && (
        <Box marginTop={1}>
          <Input
            key="task"
            label={editing >= 0 ? `✎ #${editing + 1}` : '+'}
            placeholder="a task, or rm 2 · mv 3 1 · remove the tests one"
            value={draft.text}
            submitLabel={editing >= 0 ? 'save' : 'queue'}
            autoFocus={state.items.length === 0 ? true : undefined}
            onSubmit={(value: string) => void submitDraft($, value, draft.editId).catch(error => debug($, error))}
          />
        </Box>
      )}
      <Box flexDirection="row" flexWrap="wrap" columnGap={2} marginTop={1}>
        {selected && Input && <Button key="edit" label="edit" hotkey="e" plain onPress={() => edit()} />}
        {selected && <Button key="delete" label="delete" hotkey="d" plain onPress={() => removeSelected($)} />}
        {selected && <Button key="up" label="up" hotkey="k" plain onPress={() => moveSelected($, -1)} />}
        {selected && <Button key="down" label="down" hotkey="j" plain onPress={() => moveSelected($, 1)} />}
        {Input && <Button key="add" label="add" hotkey="a" plain onPress={() => focusPane($, 'task')} />}
        <Button key="pause" label={state.paused ? 'resume' : 'pause'} hotkey="p" plain
          onPress={() => runIntent($, state.paused ? 'resume' : 'pause')} />
        <Button key="undo" label="undo" hotkey="u" plain onPress={() => runIntent($, 'undo')} />
        {state.items.length > 1 && <Button key="clear" label="clear all" plain dimColor onPress={() => runOps($, [{ type: 'clear' }])} />}
        {editing >= 0 && <Button key="cancel" label="cancel edit" plain dimColor onPress={() => update($, DRAFT, () => EMPTY_DRAFT)} />}
      </Box>
      {note && (
        <Text color={NOTE_COLOR[note.kind]} dimColor={note.kind === 'info'} wrap="truncate-end">
          {renderMessage(note, { via: note.via, note: note.note }).split('\n').slice(0, 2).join(' ')}
        </Text>
      )}
    </Box>
  )
}