codebase-galaxy

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const g = await read($, graph)
    const evs = await read($, events)
    const note = await read($, status)
    const name = g === null ? '' : g.root.slice(g.root.lastIndexOf('/') + 1)
    const header = (
      <Box key="hdr" flexDirection="row">
        <Text color="#ff3df0" bold>
          ◉ CODEBASE GALAXY{' '}
        </Text>
        <Text color="#5ef1ff">{name}</Text>
        <Text dimColor> {note}</Text>
      </Box>
    )
    if (e.surface !== 'terminal' && e.surface !== 'desktop') {
      // Surfaces without a Client get a text chart of the systems instead.
      const systems = g === null ? [] : g.dirs.map((d, i) => ({ d: d.replace(/[\u0000-\u001f\u007f-\u009f]/g, '?'), n: g.cluster.filter(c => c === i).length }))
      return (
        <Box flexDirection="column">
          {header}
          {g === null && <Text dimColor>No galaxy yet: run /galaxy to scan the repo.</Text>}
          {systems.slice(0, 20).map(s => (
            <Text key={`sys-${s.d}`}>
              {s.d.padEnd(24)} {'★'.repeat(Math.min(40, Math.ceil(s.n / 3)))} {s.n}
            </Text>
          ))}
        </Box>
      )
    }
    const { Client } = $.ui.resolve(e)
    // Inline, the pane's body follows its content's height, so sizing the Client from bodyRows
    // would feed back into itself and collapse it: take a share of the viewport instead.
    // One body budget for header + Client: no taller than the open request (28) or the surface,
    // about half the surface otherwise, and never under 6 so a short terminal still fits.
    const vp = e.viewport?.rows ?? 40
    const inlineBody = Math.min(28, vp, Math.max(6, Math.floor(vp * 0.5)))
    const rows = e.props.placement === 'inline'
      ? inlineBody - 1
      : Math.max(1, (e.props.scroll?.bodyRows ?? vp) - 1)
    return (
      <Box flexDirection="column">
        {header}
        <Client key="galaxy" module="./view.tsx" props={{ graph: g, events: evs }} width="100%" height={rows} />
      </Box>
    )
  })