agent-bus

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!cfg.band || paneOpen || e.props.hasSurvey) return next(e)
    const s = await read($, snap)
    const unread = s?.unread ?? 0
    const at = s?.mentions ?? 0
    if (!s?.bus || (unread === 0 && at === 0)) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const t = cfg.theme
    return (
      <Box gap={1}>
        <Text key="bus-band" bold color={t.accent}>bus:</Text>
        <Text key="bus-unread">{unread} unread</Text>
        {at > 0 && <Text key="bus-at" color={t.warn}>· {at} @you</Text>}
        <Button key="bus-open" label="Open" onPress={async () => { await openPane($) }} />
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    ensurePolling($)
    const els = $.ui.resolve(e)
    const { Box, Text, Button } = els
    const Input = 'Input' in els ? els.Input : null
    const Client = 'Client' in els ? els.Client : null
    const t = cfg.theme
    const s = await read($, snap)
    const err = await read($, error)
    const cols = Math.max(20, e.props.bodyColumns)
    const bodyRows = Math.max(8, e.props.scroll?.bodyRows ?? e.viewport?.rows ?? 24)

    if (!s) {
      return (
        <Box flexDirection="column">
          <Text color={err ? t.err : t.dim}>{err ?? 'loading the bus…'}</Text>
          <Button key="retry" hotkey="g" label="retry" onPress={async () => { await refresh($, true) }} />
        </Box>
      )
    }
    if (!s.bus) {
      return (
        <Box flexDirection="column">
          <Text>No bus in this project.</Text>
          <Text dimColor>`/bus init` creates {s.dir ?? '.claude/bus'}</Text>
          <Text dimColor>A bus elsewhere: set "busDir" under "agent-bus" in .claude/claude-mods.json</Text>
        </Box>
      )
    }

    const ms = messages(s)
    const sel = selIndex(ms, await read($, selected))
    const ex = await read($, expanded)
    const md = await read($, mode)
    const dr = await read($, draft)
    const re = await read($, replyTo)
    const note = await read($, notice)
    const roles = (s.roles ?? []).map(r => r.name)
    const health = s.health
    const nameW = cols < 50 ? 8 : 11

    // header: who, unread, @you, bus health
    const header = (
      <Box key="hdr" gap={1}>
        <Text bold color={t.accent}>bus</Text>
        <Text color={t.me}>{ME}</Text>
        {(s.unread ?? 0) > 0 && <Text color={t.ok}>●{s.unread}</Text>}
        {(s.mentions ?? 0) > 0 && <Text color={t.warn}>@{s.mentions}</Text>}
        <Text color={health?.deliver ? t.ok : t.dim}>{health?.deliver ? 'dlv✓' : 'dlv·'}</Text>
        {health?.last_write_age !== null && health?.last_write_age !== undefined && (
          <Text dimColor>{age(health.last_write_age)}</Text>
        )}
      </Box>
    )

    // the expanded message's lines
    const exMsg = ex ? ms.find(m => m.id === ex.id) : undefined
    const detail: RenderChildren[] = []
    if (exMsg && ex) {
      detail.push(<Text key="d-text" wrap="wrap">{exMsg.deleted ? '(deleted)' : exMsg.text}</Text>)
      const dest = [...exMsg.to, ...exMsg.cc.map(c => `cc ${c}`)].join(', ') || (exMsg.chan ? `#${exMsg.chan}` : '#all')
      detail.push(<Text key="d-to" dimColor wrap="truncate-end">{`${exMsg.id} → ${dest}${exMsg.topic ? ` [${exMsg.topic}]` : ''}`}</Text>)
      if (exMsg.receipts.length > 0) {
        detail.push(
          <Text key="d-rc" wrap="wrap" color={t.dim}>
            {exMsg.receipts.map(r => `${r.to} ${r.tick} ${r.r}`).join(' · ')}
          </Text>,
        )
      }
      const rx = Object.entries(exMsg.reactions).filter(([, by]) => by.length > 0)
      if (rx.length > 0) {
        detail.push(<Text key="d-rx" wrap="wrap">{rx.map(([em, by]) => `${em} ${by.join(',')}`).join('  ')}</Text>)
      }
      if (exMsg.body) {
        const lines = ex.loading ? ['(loading body…)'] : (ex.body ?? '').split('\n').slice(0, 60)
        lines.forEach((l, n) => detail.push(<Text key={`d-b${n}`} wrap="wrap">{l === '' ? ' ' : l}</Text>))
      }
    }

    // rows that fit: the bottom block is the composer, the key bar, the key region and one optional row
    const extra = (md === 'react' ? 1 : 0) + (completions(dr, roles).length > 0 ? 1 : 0) + (note || err ? 1 : 0)
    const fit = Math.max(1, bodyRows - 4 - extra - (exMsg ? Math.min(detail.length, bodyRows - 6) : 0))
    const start = Math.max(0, Math.min(sel - Math.floor(fit / 2), ms.length - fit))
    const shown = ms.slice(start, start + fit)

    const rows = shown.map((m, n) => {
      const idx = start + n
      const isSel = idx === sel
      const mine = m.from === ME
      const who = mine ? `→${m.to[0] ?? (m.chan ? `#${m.chan}` : '#all')}` : m.from
      const marks = `${m.unread ? '●' : ' '}${m.mention || m.reply_to_me ? '@' : ' '}`
      const tick = mine ? ` ${tickOf(m)}` : ''
      const rx = Object.entries(m.reactions).filter(([, by]) => by.length > 0).map(([em]) => em).join('')
      return (
        <Box key={`row-${m.id}`} flexDirection="column">
          <Button key={`msg-${m.id}`} plain onPress={async () => { await update($, selected, () => m.id); await expand($, m) }}>
            <Text color={isSel ? t.accent : undefined} bold={isSel}>{isSel ? '›' : ' '}</Text>
            <Text color={m.mention || m.reply_to_me ? t.warn : t.ok}>{marks}</Text>
            <Text dimColor>{m.time.slice(11, 16)} </Text>
            <Text color={mine ? t.me : t.accent}>{short(who, nameW)}</Text>
            <Text color={t.dim}>{tick} </Text>
            <Text backgroundColor={isSel ? t.selBg : undefined} wrap="truncate-end">
              {`${m.reply_to ? '↳' : ''}${m.deleted ? '(deleted)' : m.text}${m.body ? ' ¶' : ''}${rx ? ` ${rx}` : ''}`}
            </Text>
          </Button>
          {ex && ex.id === m.id && (
            <Box key={`det-${m.id}`} flexDirection="column" paddingLeft={2}>
              {detail}
            </Box>
          )}
        </Box>
      )
    })

    const sugg = completions(dr, roles)
    const parent = re ? ms.find(m => m.id === re) : undefined

    return (
      <Box flexDirection="column">
        {header}
        {ms.length === 0 ? <Text key="empty" dimColor>No messages yet.</Text> : <Box key="list" flexDirection="column">{rows}</Box>}
        {(note || err) && <Text key="note" color={err ? t.err : t.dim} wrap="truncate-end">{err ?? note}</Text>}
        {md === 'react' && (
          <Box key="react-row" gap={1}>
            {EMOJI.map((em, n) => (
              <Button key={`rx-${n + 1}`} plain hotkey={String(n + 1)} label={em} onPress={async () => { await react($, em) }} />
            ))}
          </Box>
        )}
        {sugg.length > 0 && (
          <Box key="ac-row" gap={1}>
            {sugg.map(r => (
              <Button
                key={`ac-${r}`}
                plain
                label={`@${r}`}
                onPress={async () => {
                  await update($, draft, d => d.replace(/@[\w.-]*$/, `@${r} `))
                  await focusComposer($)
                }}
              />
            ))}
          </Box>
        )}
        {Input ? (
          <Input
            key="composer"
            label={parent ? `↳${short(parent.from, 10)} ` : '› '}
            placeholder={cols < 50 ? '@role message' : '@role message · Enter sends'}
            value={dr}
            submitLabel="send"
            onInput={async (v: string) => { await update($, draft, () => v) }}
            onSubmit={async (v: string) => { await sendDraft($, v) }}
          />
        ) : (
          <Text key="no-input" dimColor>this surface has no text field: compose with /bus send</Text>
        )}
        <Box key="keybar" gap={1}>
          <Button key="k-down" plain hotkey="j" label="↓" onPress={async () => { await act($, 'down') }} />
          <Button key="k-up" plain hotkey="k" label="↑" onPress={async () => { await act($, 'up') }} />