bullswarm

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (stripLevel === 'off' || e.surface === 'mobile' || e.props.hasSurvey || pools.length === 0)
      return next(e)

    const { Box, Text, Button } = await $.ui.resolve(e)
    const h = host

    return strip(
      { ui: { Box, Text, Button }, columns: e.props.bodyColumns, maxRows: e.props.maxRows },
      {
        pools,
        runs,
        assignments,
        autoRoute,
        routedCount: routed.length,
        lastError,
        paneOpen,
        selectedShortId,
        names,
        level: stripLevel,
      },
      {
        pane: () => {
          if (!h) return
          void (paneOpen ? closePane(h) : openPane(h, null))
        },
        open: shortId => {
          if (!h) return
          void (paneOpen && selectedShortId === shortId ? closePane(h) : openPane(h, shortId))
        },
      },
    )
  })

export function strip(
  kit: { ui: StripUi; columns: number; maxRows: number },
  model: StripModel,
  actions: StripActions,
): RenderElement {
  const { Box, Text, Button } = kit.ui
  const budget = Math.max(1, kit.maxRows - 1)
  const pools = model.level === 'full' ? model.pools.filter(p => p.enabled).slice(0, budget) : []
  const loose = looseOf(model.runs, model.assignments)
  const runRows = Math.max(0, budget - pools.length)
  const runs = model.runs.slice(0, runRows)
  const looseShown = loose.slice(0, Math.max(0, runRows - runs.length))
  const nameOf = (pool: string) => model.names.get(pool) ?? pool

  const summary = [
    model.runs.length ? `${model.runs.length} run${model.runs.length === 1 ? '' : 's'}` : 'no runs',
    model.assignments.length ? `${model.assignments.length} in flight` : '',
    model.routedCount ? `${model.routedCount} routed` : '',
    model.autoRoute ? '' : 'route off',
  ]
    .filter(Boolean)
    .join(' · ')

  return (
    <Box flexDirection="column">
      <Box flexDirection="row" flexWrap="nowrap" gap={1} marginRight={4}>
        <Box flexShrink={1} overflow="hidden">
          <Text wrap="truncate-end">
            <Text bold color="magenta">
              bullswarm
            </Text>
            <Text dimColor> {summary}{model.level === 'full' ? ' · used/elapsed · pace' : ''}</Text>
          </Text>
        </Box>
        <Box flexShrink={0} flexDirection="row" gap={1}>
          <Button
            key="pane"
            hotkey="w"
            label={model.paneOpen ? '[w] close' : '[w] runs'}
            onPress={actions.pane}
          />
        </Box>
      </Box>
      {model.lastError ? (
        <Text color="red" wrap="truncate-end">
          {model.lastError}
        </Text>
      ) : null}
      {poolRows({ Box, Text }, pools, model.assignments, model.names)}
      {runs.map((run, i) => {
        const steps = stepsOf(run, model.assignments)
        const done = `${run.actionsSucceeded}/${run.actionsTotal}`
        // One step in flight is named; the rest are counted, so the goal
        // that says which run this is always stays on the row.
        const named = steps
          .slice(0, 1)
          .map(a => `${a.actionId ?? '?'}@${nameOf(a.pool)}${timingOf(a) ? ` ${timingOf(a)}` : ''}`)
          .join(', ')
        const running = steps.length > 1 ? `${named}, and ${String(steps.length - 1)} more` : named
        const finished = run.status !== 'running'
        // A parked v3 run waits for the caller at a gate or loop.
        const waiting = (run.waitingFor ?? []).length > 0
        const selected = model.selectedShortId === run.shortId && model.paneOpen

        return (
          <Box key={run.runId} flexDirection="row">
            <Button
              key={`open-${run.shortId}`}
              plain
              hotkey={i < 9 ? String(i + 1) : undefined}
              label={`${waiting ? '⧖' : finished ? '◼' : '▶'} ${run.shortId}`}
              onPress={() => actions.open(run.shortId)}
            />
            <Text wrap="truncate-end">
              <Text color="magenta">{selected ? ' ●' : ''}</Text>
              <Text color="green">
                {'  '}
                {done}
              </Text>
              {finished ? <Text color="yellow">  {runStatusText(run)}</Text> : null}
              <Text color="cyan">{running ? `  ${running}` : ''}</Text>
              <Text dimColor>  {run.goal}</Text>
            </Text>
          </Box>
        )
      })}
      {looseShown.map((a, i) => (
        <Box key={`loose-${String(i)}`} flexDirection="row">
          <Text wrap="truncate-end">
            <Text color="cyan" bold>
              ▶ run
            </Text>
            <Text>
              {'  '}
              {a.lane}@{nameOf(a.pool)}
            </Text>
            <Text dimColor>
              {timingOf(a) ? `  ${timingOf(a)}` : ''}
              {a.source ? `  ${a.source}` : ''}
            </Text>
          </Text>
        </Box>
      ))}
    </Box>
  )
}

export function poolRows(
  ui: RowsUi,
  pools: readonly BullswarmPool[],
  assignments: readonly BullswarmAssignment[],
  names: ReadonlyMap<string, string>,
): RenderElement[] {
  const { Box, Text } = ui
  return pools
    .filter(p => p.enabled)
    .map(p => {
      const state = stateOf(p)
      const name = (names.get(p.name) ?? p.name).padEnd(NAME_WIDTH).slice(0, NAME_WIDTH)
      const used = p.usedPct === null ? '  —' : `${String(Math.round(p.usedPct)).padStart(3)}%`
      const elapsed = p.elapsedPct === null ? '' : `/${String(Math.round(p.elapsedPct)).padStart(2)}%`
      const busy = assignments.filter(a => a.pool === p.name)
      const running = busy.length ? `  ${busy.map(a => a.actionId ?? a.lane).join(', ')}` : ''
      return (
        <Box key={p.name} flexDirection="row">
          <Text wrap="truncate-end">
            <Text>{name}</Text>
            {meterBar(Text, p.usedPct, p.elapsedPct, BAR_WIDTH)}
            <Text> {used}</Text>
            <Text dimColor>{elapsed}</Text>
            <Text color={state.color} bold>
              {'  '}
              {p.quarantine ? 'quarantined' : paceText(p)}
            </Text>
            {running ? <Text color="cyan">{running}</Text> : null}
          </Text>
        </Box>
      )
    })
}

export function meterBar(
  Text: RowsUi['Text'],
  usedPct: number | null,
  elapsedPct: number | null,
  width: number,
  key?: string,
): RenderElement {
  if (usedPct === null) return <Text key={key} backgroundColor={TRACK}>{'·'.repeat(width)}</Text>
  const fill = severityColor(usedPct)
  const filled = Math.max(0, Math.min(width, Math.floor((usedPct / 100) * width)))
  let mark = -1
  let glyph = '▏'
  if (elapsedPct !== null) {
    mark = Math.floor((elapsedPct / 100) * width)
    if (mark >= width) {
      mark = width - 1
      glyph = '▕'
    }
  }
  const cells: RenderElement[] = []
  let i = 0
  while (i < width) {
    const bg = i < filled ? fill : TRACK
    if (i === mark) {
      cells.push(
        <Text key={`m${String(i)}`} color="white" backgroundColor={bg}>
          {glyph}
        </Text>,
      )
      i += 1
      continue
    }
    let j = i
    while (j < width && j !== mark && (j < filled) === (i < filled)) j += 1
    cells.push(
      <Text key={`c${String(i)}`} backgroundColor={bg}>
        {' '.repeat(j - i)}
      </Text>,
    )
    i = j
  }
  return <Text key={key}>{cells}</Text>
}