transit-map

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const graph = await read($, graphAtom)
    const detail = await read($, detailAtom)
    const error = await read($, errorAtom)
    const where = graph === null
      ? ''
      : `${graph.branch ?? 'detached HEAD'}${graph.upstream === null ? '' : ` → ${graph.upstream}`}${graph.ahead > 0 ? ` ↑${graph.ahead}` : ''}${graph.behind > 0 ? ` ↓${graph.behind}` : ''}`
    const header = (
      <Box key="hdr" flexDirection="row" overflow="hidden">
        <Text color="#EE352E" bold>{'Ⓜ TRANSIT MAP '}</Text>
        <Text color="#FFFFFF" bold>{graph?.repo ?? ''}</Text>
        <Text dimColor>{graph === null ? ` ${error ?? 'loading…'}` : `  ${where} · ${graph.cars.length} car${graph.cars.length === 1 ? '' : 's'} on the train`}</Text>
      </Box>
    )
    if (e.surface !== 'terminal' && e.surface !== 'desktop') {
      // No Client here: a timetable of the newest stations instead.
      return (
        <Box flexDirection="column">
          {header}
          {(graph?.commits ?? []).slice(0, 15).map(c => (
            <Text key={`t${c.sha}`}>{`${c.sha === graph?.head ? '●' : c.parents.length > 1 ? '◎' : '○'} ${c.sha.slice(0, 7)} ${[...c.refs, ...c.tags.map(t => `⚑${t}`)].join(' ')} ${c.subject}`}</Text>
          ))}
        </Box>
      )
    }
    const { Client } = $.ui.resolve(e)
    const given = e.props.scroll?.bodyRows ?? 0
    // Inline, lay out to the height asked for (the host may report the body it measured, not the rows it granted);
    // a smaller real window (the person dragged the block down) wins. Docked, the body is the real allocation.
    const asked = askedRows ?? (graph === null ? 9 : paneRows(graph))
    const body = e.props.placement === 'inline'
      ? (given > 0 && given < lastPaneHeight ? given : asked)
      : given > 0 ? given : e.viewport?.rows ?? 24
    // The header takes one row; the Client gets the rest, never more than the body.
    const rows = Math.max(1, body - 1)
    lastPaneHeight = 1 + rows
    return (
      <Box flexDirection="column">
        {header}
        <Client key="metro" module="./map.tsx" props={{ graph, detail }} width="100%" height={rows} />
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const strip = await read($, stripAtom)
    const graph = await read($, graphAtom)
    if (!strip || graph === null || e.props.hasSurvey) return next(e)
    const below = await next(e)
    const { Box, Text } = $.ui.resolve(e)
    const lit = graph.cars.filter(c => c.lit).length
    const shown = graph.cars.slice(0, 8)
    return (
      <Box flexDirection="column">
        <Box flexDirection="row">
          <Text color="#EE352E" bold>{'Ⓜ '}</Text>
          <Text bold>{graph.branch ?? 'detached'}</Text>
          <Text dimColor>{' ━━○━━○━━● '}</Text>
          <Text color="#FFFFFF" bold>{'▶▶▶'}</Text>
          {shown.map((car, k) => (
            <Text key={`car${k}`} color={car.lit ? '#FCCC0A' : '#A7A9AC'}>{'▮'}</Text>
          ))}
          <Text dimColor>{`  ${graph.cars.length} uncommitted${lit > 0 ? `, ${lit} edited by Claude` : ''}${graph.ahead > 0 ? ` · ↑${graph.ahead}` : ''}${graph.behind > 0 ? ` · ↓${graph.behind}` : ''} · /metro`}</Text>
        </Box>
        {below}
      </Box>
    )
  })