alarum

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!config || e.props.hasSurvey) return next(e)
    // The pane shows the list: the band leaves it the place. A pane still
    // waiting for room leaves the band standing in.
    if (await read($, layout) === 'pane' && (await $.ui.panes()).some(p => p.id === PANE && p.isPlaced)) return next(e)

    // What the plugins beneath drew (the Floatee mod, a bleh kit band, the
    // engine's own). Answering without it would make this mod the only band
    // anyone can see, which is not ours to decide: we stack under it instead,
    // and ask for the room it did not take.
    const below = await next(e)
    const others = isBlank(below) ? null : below
    const maxRows = Math.max(0, e.props.maxRows - (others ? rowsOf(others) : 0))
    const tree = await draw($, e, { isPane: false, maxRows, columns: e.props.bodyColumns })
    if (!tree || !others) return tree ?? below
    const { Box } = $.ui.resolve(e)
    return <Box flexDirection="column">{others}{tree}</Box>
  })

async function draw(
  $: EngineInterface,
  e: Parameters<EngineInterface['ui']['resolve']>[0],
  opts: { isPane: boolean; maxRows: number; columns: number },
): Promise<RenderNode | null> {
  if (!config) return null
  const { Box, Text, Button } = $.ui.resolve(e)

  // Claude Desktop draws every Button as a native one, in its own font, where
  // a bare glyph reads as nothing: the brackets and the glyph-only labels are
  // the terminal's alone. Two widths matter, not one: the header's labels give
  // way first, the rows' later, since a row carries more of them.
  const isTerminal = e.surface === 'terminal'
  const narrow = isTerminal && opts.columns < (opts.isPane ? NARROW_PANE : NARROW)
  const tight = isTerminal && opts.columns < (opts.isPane ? TIGHT_PANE : TIGHT)
  const glyph = (g: string) => (isTerminal ? `[${g}]` : g)
  const chip = narrow ? true : undefined

  const where = await read($, scope)
  // The window held is account-wide, shared with the other sessions: the scope
  // is a filter here, like the levels, not a query over there.
  const all = inScope(await read($, events), where)
  const shown = await read($, levels)
  const onlyUnread = await read($, unreadOnly)
  const rows = group(visible(all, shown, onlyUnread))
  const at = await read($, now)
  const problem = await read($, error)
  const paused = await read($, pausedUntil)
  const projectList = await read($, projects)
  const workspaceList = await read($, workspaces)
  const picking = await read($, isPickingScope)
  const open = await read($, selected)

  // The orange frame, the band's look, in the pane too (inside the engine's).
  const frame = { borderStyle: 'round' as const, borderColor: brand, paddingX: 1 }

  const state = (
    <Box gap={1} flexShrink={0}>
      <Text color={brand} bold>⩄ Alarum</Text>
      {problem ? <Text color="error">{problem}</Text> : null}
      {!problem && paused > at ? <Text color="warning">{narrow ? '⏸' : `⏸ paused ${Math.ceil((paused - at) / 1000)}s`}</Text> : null}
    </Box>
  )

  // What a row says about itself besides its title, and never wraps.
  const factsOf = (row: Row) => [
    row.repeats > 1 ? `×${row.repeats}` : '',
    where.kind !== 'project' && row.projectName ? row.projectName : '',
    row.source ? row.source : '',
    ago(row.receivedAt, at),
  ].filter(Boolean).join(' · ')

  // ── The band: one line, always ────────────────────────────────────────────
  // It sits above the prompt, where every other plugin also wants room, so it
  // takes one row and keeps it: the title, the latest event the filters leave,
  // the counters, and the way into the pane, where the work happens.
  if (!opts.isPane) {
    const latest = rows[0] ?? null
    const counters: RenderNode[] = []
    for (const l of [...LEVELS].reverse()) {
      const n = all.filter(x => x.level === l).length
      if (!n) continue
      if (counters.length) counters.push(<Text dimColor> · </Text>)
      counters.push(<Text color={COLOR[l]}>{n} {GLYPH[l]}</Text>)
    }
    return (
      <Box {...frame} flexDirection="column">
        <Box justifyContent="space-between" gap={1}>
          <Box gap={1} flexShrink={1} overflow="hidden">
            {state}
            {latest ? (
              <Box gap={1} flexShrink={1} overflow="hidden">
                <Box flexShrink={0}><Text color={COLOR[latest.level]} bold={BOLD[latest.level]}>{GLYPH[latest.level]}</Text></Box>
                <Text dimColor={latest.read} wrap="truncate-end">{latest.title}</Text>
                <Box flexShrink={0}><Text dimColor>{factsOf(latest)}</Text></Box>
              </Box>
            ) : <Text dimColor>{problem ? '' : 'nothing yet'}</Text>}
          </Box>
          <Box gap={1} flexShrink={0}>
            {counters.length ? <Box gap={0} flexShrink={0}>{counters}</Box> : null}
            <Button key="layout" label={narrow ? glyph('⇥') : '⇥ Pane'} plain={chip} dimColor onPress={() => toggleLayout($)} />
          </Box>
        </Box>
      </Box>
    )
  }

  // ── The pane ──────────────────────────────────────────────────────────────
  // Two header lines, so the title always has its room: six buttons on one
  // line pushed it out of a docked pane, which is how this ended up split.
  const header = (
    <Box flexDirection="column">
      <Box justifyContent="space-between" gap={1}>
        <Box gap={1} flexShrink={1} overflow="hidden">
          {state}
          <Box flexShrink={1} overflow="hidden">
            <Text dimColor wrap="truncate-end">
              {scopeLabel(where, projectList, workspaceList)}{rows.length ? ` · ${rows.length}` : ' · nothing yet'}
            </Text>
          </Box>
        </Box>
        <Box gap={narrow ? 0 : 1} flexShrink={0}>
          <Button key="refresh" label={narrow ? glyph('⟳') : '⟳ Refresh'} plain={chip} dimColor onPress={() => refresh($, { force: true })} />
          <Button key="layout" label={narrow ? glyph('⇤') : '⇤ Band'} plain={chip} dimColor onPress={() => toggleLayout($)} />
        </Box>
      </Box>
      <Box justifyContent="space-between" gap={1}>
        {/* One chip per level, as the web inbox filters them: its own glyph in
            its own colour, lit when the level is on and dim when it is not.
            Glyphs rather than names, so five chips cost five cells. */}
        <Box gap={narrow ? 0 : 1} flexShrink={0}>
          {LEVELS.map(l => {
            const on = shown.includes(l)
            return (
              <Button
                key={`level:${l}`}
                label={glyph(GLYPH[l])}
                plain
                dimColor={!on}
                onPress={() => toggleLevel($, l)}
              >
                <Text color={on ? COLOR[l] : undefined} bold={on && BOLD[l]} dimColor={!on}>{glyph(GLYPH[l])}</Text>
              </Button>
            )
          })}
        </Box>
        {/* An active filter is drawn as the surface marks a control that is on. */}
        <Box gap={narrow ? 0 : 1} flexShrink={0}>
          <Button
            key="scope"
            label={narrow ? glyph('⊙') : '⊙ Scope'}
            plain={where.kind === 'all' ? chip : undefined}
            variant={where.kind === 'all' ? undefined : 'primary'}
            dimColor={where.kind === 'all'}
            onPress={() => update($, isPickingScope, v => !v)}
          />
          <Button
            key="unread"
            label={narrow ? glyph(onlyUnread ? '●' : '○') : (onlyUnread ? '● unread' : '○ all')}
            plain={onlyUnread ? undefined : chip}
            variant={onlyUnread ? 'primary' : undefined}
            dimColor={!onlyUnread}
            onPress={() => toggleUnread($)}
          />
          <Button key="allread" label={narrow ? glyph('✓') : '✓ Mark all'} plain={chip} dimColor onPress={() => markAllRead($)} />
        </Box>
      </Box>
    </Box>
  )

  // A dim rule sets the controls apart from what they act on, after a blank
  // line: the rule hard against the buttons reads as their underline.
  const rule = (
    <Box marginTop={1}>
      <Text dimColor wrap="truncate-end">{'─'.repeat(Math.max(10, opts.columns - 4))}</Text>
    </Box>
  )
  // ── The scope picker takes the list's place while it is open ──────────────
  if (picking) {
    const choices: RenderNode[] = [

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const tree = await draw($, e, { isPane: true, maxRows: e.props.scroll.bodyRows, columns: e.props.bodyColumns })
    const { Text } = $.ui.resolve(e)
    return tree ?? <Text dimColor>No .alarum here: nothing to show.</Text>
  })