boot-sequence

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const b = await read($, boot)
    if (b === null || e.props.hasSurvey || (await read($, isHidden))) return next(e)
    const below = await next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    // The rows the band shows at once, less what the mods beneath it need and the skip row.
    const window = Math.max(1, e.props.scroll?.bodyRows ?? e.props.maxRows)
    const cols = Math.max(20, e.props.bodyColumns)
    const room = window - heightOf(below, cols) - 1
    const collapsed = (await read($, isCollapsed)) || b.where === 'pane' || room < 4
    if (collapsed) {
      if (!b.isDone && b.where === 'pane') return below
      // The band is full with the mods beneath: add nothing rather than push them out.
      if (room < 0) return below
      const full = b.isDone ? summaryText(b) : `▣ BOOT  running ${b.lines.filter(l => l.status !== 'run').length}/${IDS.length}`
      const label = full.length > cols - 10 ? `${full.slice(0, Math.max(10, cols - 11))}…` : full
      return (
        <Box flexDirection="column">
          <Box>
            <Text color={b.isDone ? summaryColor(b) : COLOR.run}>{label}</Text>
            <Text dimColor>{'  /boot '}</Text>
            <Button key="hide" label="x" plain onPress={() => update($, isHidden, () => true)} />
          </Box>
          {below}
        </Box>
      )
    }
    const at = await read($, tick)
    const columns = Math.max(20, e.props.bodyColumns)
    return (
      <Box flexDirection="column">
        {logTree($.ui.resolve(e), b, at, columns, Math.min(room, 16), e.surface === 'terminal')}
        <Box>
          <Button key="skip" label="skip" hotkey="s" onPress={() => update($, isCollapsed, () => true)} />
        </Box>
        {below}
      </Box>
    )
  })

function logTree(els: Els, b: Boot, at: number, columns: number, room: number, isTerminal: boolean): RenderElement[] {
  const { Box, Text } = els
  const rows: RenderElement[] = []
  let used = 0
  const hasRaster = isTerminal && 'Raster' in els && columns >= LOGO_COLS + 2 && room >= LOGO_ROWS + 4
  if (hasRaster) {
    const Raster = (els as { Raster: (p: { key: string; columns: number; rows: number; cells: string }) => RenderElement }).Raster
    rows.push(<Raster key="logo" columns={LOGO_COLS} rows={LOGO_ROWS} cells={logoCells(at)} />)
    used += LOGO_ROWS
  } else {
    rows.push(<Text key="logo" color="#89dceb" bold>{'▓▒░ CLAUDE CODE ░▒▓'}</Text>)
    used += 1
  }
  const sinceLogo = Math.max(0, at - LOGO_TICKS)
  let budget = sinceLogo * CHARS_PER_TICK
  const header = 'CLAUDE CODE BIOS · POWER-ON SELF TEST'
  if (room - used >= 2) {
    rows.push(<Text key="hdr" color="#94e2d5">{typed(header, budget)}</Text>)
    used += 1
  }
  budget -= header.length
  if (b.memoryMb > 0 && budget > 0 && room - used >= 2) {
    const target = b.memoryMb * 1024
    const shown = Math.min(target, Math.round((target * Math.min(sinceLogo, 30)) / 30))
    const done = shown >= target
    rows.push(
      <Box key="mem">
        <Text color="#cdd6f4">{`MEMORY TEST  ${String(shown).padStart(9)}K `}</Text>
        <Text color={done ? COLOR.ok : COLOR.run}>{done ? 'OK' : '..'}</Text>
      </Box>,
    )
    used += 1
  }
  const lineRows: RenderElement[] = []
  // Short of room, warnings and failures come first, then the rest in check order.
  const keep = Math.max(1, room - used)
  const ordered = b.lines.length <= keep ? b.lines : [...b.lines.filter(l => l.status === 'fail' || l.status === 'warn'), ...b.lines.filter(l => l.status !== 'fail' && l.status !== 'warn')].slice(0, keep)
  const shownIds = new Set(ordered.map(l => l.id))
  for (const l of b.lines.filter(x => shownIds.has(x.id))) {
    if (budget <= 0) break
    const left = `${l.label.padEnd(10)} `
    const detailRoom = Math.max(8, columns - left.length - 11)
    const detail = l.detail.length > detailRoom ? `${l.detail.slice(0, detailRoom - 1)}…` : l.detail
    const shownLeft = typed(left + detail, budget)
    budget -= left.length + detail.length
    const finished = budget >= 0
    const spin = '⣾⣽⣻⢿⡿⣟⣯⣷'[at % 8] as string
    const badge = l.status === 'run' ? `[ ${spin}${spin}${spin}${spin} ]` : BADGE[l.status]
    lineRows.push(
      <Box key={`l-${l.id}`}>
        <Text color={COLOR[l.status]}>{finished ? badge : '[      ]'}</Text>
        <Text color="#cdd6f4">{` ${shownLeft}`}</Text>
        {!finished && <Text color="#a6e3a1">{at % 2 === 0 ? '█' : ' '}</Text>}
      </Box>,
    )
  }
  return [...rows, ...lineRows]
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const b = await read($, boot)
    if (b === null) return <Text dimColor>Starting…</Text>
    const at = await read($, tick)
    const columns = Math.max(20, e.props.bodyColumns)
    const room = Math.max(6, (e.viewport?.rows ?? 30) - 4)
    return (
      <Box flexDirection="column">
        {logTree($.ui.resolve(e), b, at, columns, room, e.surface === 'terminal')}
        {b.isDone && <Text color="#94e2d5">{`\n${summaryText(b)}  ·  READY.`}</Text>}
      </Box>
    )
  })