departure-board

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const all = await read($, rows)
    const room = Math.min(3, e.props.maxRows)
    if (e.props.hasSurvey || all.length === 0 || room < 1 || (await read($, isBandHidden))) return next(e)
    const list = shownRows(all)
    const picked = boardOrder(list, Math.min(room, list.length))
    // Reserve the board's rows: the mods beneath get what is left of the band.
    const below = await next({ ...e, props: { ...e.props, maxRows: e.props.maxRows - picked.length } })
    const columns = Math.min(512, e.props.bodyColumns)

    if (e.surface !== 'terminal' || columns < MIN_COLUMNS) {
      const { Box, Text } = $.ui.resolve(e)
      return (
        <Box flexDirection="column">
          {picked.map(r => (
            <Text>{clip(`${r.status} ${r.time} ${r.destination}`, Math.max(10, columns))}</Text>
          ))}
          {below}
        </Box>
      )
    }

    const { Box, Raster } = $.ui.resolve(e)
    const site = place('band', e.requestId, 'mini', columns, picked.length, picked, false)
    schedule($)
    return (
      <Box flexDirection="column">
        <Raster key="mini" columns={columns} rows={picked.length} cells={site.flaps.encode()} />
        {below}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const all = shownRows(await read($, rows))
    const { Box, Text } = $.ui.resolve(e)
    const columns = Math.min(512, e.props.bodyColumns)
    // The pane's own body, less the title and the footer: never the whole terminal.
    const given = e.props.scroll?.bodyRows ?? 0
    const asked = askedRows ?? wantedRows(await read($, rows))
    // 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 wins. Docked, the body is the real allocation.
    const body = e.props.placement === 'inline' ? (given > 0 && given < lastPaneHeight ? given : asked) : given > 0 ? given : Math.max(6, Math.floor((e.viewport?.rows ?? 24) / 3))
    const isRaster = e.surface === 'terminal' && columns >= MIN_COLUMNS
    // Short of room for every departure, drop the title line and give its row to the board; tighter still, the footer.
    const isCompact = body < all.length + PANE_CHROME_ROWS
    const hasFooter = body >= (isRaster ? 3 : 2)
    const boardRows = Math.max(1, Math.min(256, body - (isCompact ? 0 : 1) - (hasFooter ? 1 : 0)))
    // The flap board spends one row on its column header; the text board does not.
    const list = boardOrder(all, Math.max(0, isRaster ? boardRows - 1 : boardRows))
    const boarding = all.filter(r => r.status === 'BOARDING').length
    const departed = all.filter(r => r.status === 'DEPARTED').length
    const delayed = all.filter(r => r.status === 'DELAYED').length
    const more = all.length - list.length
    const footer = `${all.length} departures · ${boarding} boarding · ${departed} departed · ${delayed} delayed${more > 0 ? ` · ${more} not shown` : ''}`

    if (!isRaster) {
      lastPaneHeight = (isCompact ? 0 : 1) + Math.max(1, list.length) + (hasFooter ? 1 : 0)
      const l = layout(Math.max(MIN_COLUMNS, columns))
      return (
        <Box flexDirection="column">
          {!isCompact && <Text bold>DEPARTURES</Text>}
          {list.length === 0 && <Text dimColor>No departures yet. Give Claude a task.</Text>}
          {list.map(r => (
            <Text>
              {r.time} {clip(r.destination, Math.max(20, l.destination))} · {clip(r.platform, 24)} · {r.status}
            </Text>
          ))}
          {hasFooter && <Text dimColor>{footer}</Text>}
        </Box>
      )
    }

    const { Raster } = $.ui.resolve(e)
    const height = Math.max(1, Math.min(boardRows, list.length + 1))
    lastPaneHeight = (isCompact ? 0 : 1) + height + (hasFooter ? 1 : 0)
    const site = place(PANE, e.requestId, 'board', columns, height, list, true)
    schedule($)
    return (
      <Box flexDirection="column">
        {!isCompact && (
          <Text bold color="#ffb000">
            ✈ DEPARTURES
          </Text>
        )}
        <Raster key="board" columns={columns} rows={height} cells={site.flaps.encode()} />
        {hasFooter && <Text dimColor>{list.length === 0 ? 'No departures yet. Give Claude a task.' : `${isCompact ? '✈ ' : ''}${footer}`}</Text>}
      </Box>
    )
  })