orbit

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    // Drawn from what this process kept after a /clear; the host gets it back off the render.
    if (!(await read($, seeded))) $.clock.after(0, () => void reseed($).catch(() => {}))
    const { events: shownEvents, mode: m, scope: s, home: h, selectedId: sel, capabilities: c, replay: r, sessions: all, renderer: rend, spin: sp } = await read($, snapshot)
    const listed = replay ? eventsAt(replay, replay.position) : s === 'all' ? shownEvents : shownEvents.filter(ev => ev.sessionPid === c.self || ev.sessionPid === 0)
    let globe: GlobeBox | null = null
    if (e.surface === 'terminal') {
      const width = e.props.bodyColumns
      const sideBySide = width >= 96
      const columns = Math.max(16, Math.min(sideBySide ? 48 : width - 2, 64))
      const rows = Math.max(8, Math.round(columns / 2))
      const view: View = { requestId: PANE, columns, rows, renderer: rend }
      views = [...views.filter(v => v.requestId !== PANE), view]
      const scene = sceneFor(view, now(), replay ? replay.position : now(), listed as TraceEvent[])
      const painted = paint(view, scene)
      globe = { columns, rows, renderer: rend, cells: painted.cells ?? '', png: painted.png ?? '' }
      lastFrameAt = now()
    }
    return drawPane($.ui.resolve(e) as Table, {
      surface: e.surface,
      bodyColumns: e.props.bodyColumns,
      viewportRows: e.viewport?.rows ?? 40,
      events: listed as TraceEvent[],
      summary: summarize(listed as TraceEvent[]),
      scope: s,
      mode: m,
      rules: currentRules,
      home: h,
      selectedId: sel,
      capabilities: c,
      replay: r,
      sessions: all,
      globe,
      isGenerating: now() < generatingUntil,
      spin: sp,
    }, actionsFor($))
  })

export function drawPane(ui: Table, m: PaneModel, a: Actions) {
  const { Box, Text, Button } = ui
  const width = Math.max(30, m.bodyColumns)
  const isAll = m.scope === 'all'
  const sessionPids = [...new Set(m.events.map(ev => ev.sessionPid))].sort((x, y) => x - y)
  const selected = m.events.find(ev => ev.id === m.selectedId)

  const header = (
    <Box flexDirection="row" gap={1} flexWrap="wrap">
      <Button key="scope-session" plain dimColor={isAll} onPress={() => a.setScope('session')}>{isAll ? 'session' : '● session'}</Button>
      <Button key="scope-all" plain dimColor={!isAll} onPress={() => a.setScope('all')}>{isAll ? '● all sessions' : 'all sessions'}</Button>
      <Text dimColor>│</Text>
      <Button key="spin-left" plain onPress={() => a.spin(-20)}>◀</Button>
      <Button key="spin-home" plain dimColor={m.spin === null} onPress={() => a.spin(null)}>⌂</Button>
      <Button key="spin-right" plain onPress={() => a.spin(20)}>▶</Button>
      <Text dimColor>│</Text>
      <Button key="export" plain onPress={a.exportTrace}>export</Button>
      <Button key="clear" plain dimColor onPress={a.clear}>clear</Button>
      <Text dimColor>│ {m.mode === 'off' ? 'watching' : `enforcing: ${m.mode}`}</Text>
    </Box>
  )

  const legend = isAll ? (
    <Box flexDirection="column">
      {sessionPids.map(pid => {
        const s = m.sessions.find(x => x.pid === pid)
        const label = m.events.find(ev => ev.sessionPid === pid)?.session || (s ? `${folder(s.cwd)} ${s.tty}` : `pid ${pid}`)
        return <Text color={hex(sessionColor(pid, sessionPids))} wrap="truncate">{`━ ${label}${pid === m.capabilities.self ? ' (this one)' : ''}`}</Text>
      })}
      <Text dimColor>dashed: inbound</Text>
    </Box>
  ) : (
    <Box flexDirection="row" gap={2}>
      <Text color={hex(OUTBOUND)}>━ out</Text>
      <Text color={hex(INBOUND)}>━ in</Text>
      <Text color={hex(BLOCKED)}>╌ blocked</Text>
      <Text color={hex(HOME)}>● you</Text>
    </Box>
  )

  const homeLine =
    m.home.source === 'none' ? (
      <Text color="#ffa726" wrap="wrap">No home yet: set it in /config → Where you are, or /orbit locate (one public-IP lookup).</Text>
    ) : (
      <Text dimColor wrap="truncate">{`you: ${m.home.label || `${m.home.lat.toFixed(2)}, ${m.home.lon.toFixed(2)}`}${m.home.source === 'lookup' ? ' (from your public IP)' : ''}`}</Text>
    )

  const geoLine =
    m.capabilities.geo === 'ready' ? null : m.capabilities.geo === 'downloading' ? (
      <Text color="#4dd0e1" wrap="wrap">{`Downloading the geo database… ${m.capabilities.geoNote}`}</Text>
    ) : m.capabilities.geo === 'no-node' ? (
      <Text color="#ffa726" wrap="wrap">Places need Node.js for the geo helper: install node, or set its path in /config.</Text>
    ) : (
      <Box flexDirection="column">
        <Text color="#ffa726" wrap="wrap">{`No geo database: connections cannot be placed on the globe yet.${m.capabilities.geoNote ? ' ' + m.capabilities.geoNote : ''}`}</Text>
        <Box flexDirection="row" gap={1}>
          <Button key="geo-city" variant="primary" onPress={() => a.downloadGeo('city')}>Download DB-IP city (~130 MB)</Button>
          <Button key="geo-country" onPress={() => a.downloadGeo('country')}>country only (~10 MB)</Button>
        </Box>
      </Box>
    )

  const replay = m.replay ? (
    <Box flexDirection="column">
      <Text color="#ba68c8" wrap="truncate">{`replay ${m.replay.file.slice(m.replay.file.lastIndexOf('/') + 1)} · ${m.replay.count} events · ${clock(m.replay.position)}`}</Text>
      <Box flexDirection="row" gap={1}>
        <Button key="rp-back" plain onPress={() => a.replaySeek(-1)}>⏮</Button>
        <Button key="rp-toggle" plain onPress={a.replayToggle}>{m.replay.isPlaying ? '⏸' : '▶'}</Button>
        <Button key="rp-fwd" plain onPress={() => a.replaySeek(1)}>⏭</Button>
        <Button key="rp-speed" plain onPress={a.replaySpeed}>{`${m.replay.speed}×`}</Button>
        <Text color="#ba68c8">{scrub(m.replay, Math.max(8, Math.min(width - 24, 60)))}</Text>
        <Button key="rp-close" plain dimColor onPress={a.replayClose}>close</Button>
      </Box>
    </Box>
  ) : null

  const side = (
    <Box flexDirection="column" paddingX={1} flexGrow={1}>
      <Text bold wrap="wrap">{badge(m)}</Text>
      {m.isGenerating && <Text color={hex(OUTBOUND)}>≋ Anthropic stream breathing…</Text>}
      {legend}
      {homeLine}
      {geoLine}
      <Text dimColor wrap="wrap">{capabilityLine(m.capabilities)}</Text>
    </Box>
  )

  let globe: any = null
  if (m.surface === 'terminal' && m.globe) {
    const { Raster, Image } = ui
    globe =
      m.globe.renderer === 'image' ? (
        <Image key="globe" source={{ png: m.globe.png }} columns={m.globe.columns} rows={m.globe.rows} alt="the globe" />
      ) : (
        <Raster key="globe" columns={m.globe.columns} rows={m.globe.rows} cells={m.globe.cells} />
      )
  } else if (m.surface !== 'terminal') {
    globe = <Text dimColor wrap="wrap">The globe draws in the terminal; here is the trace.</Text>
  }

  const sideBySide = m.globe !== null && width >= m.globe.columns + 44
  const globeRows = m.globe ? m.globe.rows : 1
  const used = 2 + (sideBySide ? Math.max(globeRows, 8) : globeRows + 8) + (m.replay ? 2 : 0) + (selected ? 5 : 0) + 2
  const room = Math.max(3, m.viewportRows - used)
  const listed = [...m.events].sort((x, y) => y.t - x.t).slice(0, room)

  const log = (
    <Box flexDirection="column">
      {listed.length === 0 && <Text dimColor>Nothing yet: tool calls, sockets of this session's processes and proxied connections will appear here.</Text>}
      {listed.map(ev => (
        <Button key={`ev:${ev.id}`} plain dimColor={ev.id !== m.selectedId && ev.status !== 'open'} onPress={() => a.select(ev.id)}>
          {eventLine(ev, width - 1, isAll)}
        </Button>
      ))}
    </Box>
  )

  const detail = selected ? (
    <Box flexDirection="column" paddingX={1} borderStyle="round" borderDimColor>
      {detailLines(selected).map(line => (
        <Text wrap="truncate">{line}</Text>
      ))}
      <Box flexDirection="row" gap={1}>
        {(selected.host || selected.ip) && selected.status !== 'blocked' && (
          <Button key="detail-block" plain onPress={() => a.block(selected.host && !selected.host.startsWith('mcp:') ? selected.host : selected.ip)}>block this host</Button>
        )}
        {selected.host.startsWith('mcp:') && <Button key="detail-block-mcp" plain onPress={() => a.block(selected.host)}>block this server</Button>}
        {selected.status === 'blocked' && <Button key="detail-allow" plain onPress={() => a.allow(selected.note.replace(/^.*?(host|mcp|tool):/, '$1:'))}>allow it</Button>}
        <Button key="detail-close" plain dimColor onPress={() => a.select('')}>close</Button>
      </Box>
    </Box>
  ) : null

  const rules =
    m.rules.length > 0 ? (
      <Box flexDirection="row" gap={1} flexWrap="wrap">
        <Text dimColor>rules:</Text>
        {m.rules.slice(0, 8).map(r => (
          <Button key={`rule:${r.kind}:${r.pattern}`} plain dimColor onPress={() => a.unrule(r)}>{`${describeRule(r)} ✕`}</Button>
        ))}
        {m.rules.length > 8 && <Text dimColor>{`+${m.rules.length - 8} more (/orbit rules)`}</Text>}
      </Box>
    ) : null

  return (
    <Box flexDirection="column">
      {header}
      {sideBySide ? (
        <Box flexDirection="row">
          {globe}
          {side}
        </Box>
      ) : (
        <Box flexDirection="column">
          {globe}
          {side}
        </Box>
      )}
      {replay}
      {detail}