status-band

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const s = await read($, snap)
    if (s === null) return next(e)
    const p = await read($, pr)
    const { Box, Text, Link } = $.ui.resolve(e)

    const ctxColor = s.ctxPercent === null ? C.grey : s.ctxPercent >= 85 ? C.bad : s.ctxPercent >= 60 ? C.warn : C.grey
    const cwd = tilde(s.cwd, s.home)
    const fromRoot = s.cwd !== s.root ? ` (from ${tilde(s.root, s.home)})` : ''

    const gitText = s.git ? `𖠰 ${s.git.worktree} ⎇ ${s.git.branch} (+${s.git.ins},-${s.git.del})` : '𖠰 no git'
    const ctxText = s.ctxTokens !== null && s.ctxPercent !== null ? ` ${tokens(s.ctxTokens)}/${s.ctxPercent}%` : ''
    const modelText = `✳ ${s.model} ${s.effort}${ctxText}`
    const pathLong = `⌘ ${cwd}${fromRoot}`
    const width = e.props.bodyColumns - 4 // the border and its padding
    const oneLine = `${gitText}  ${modelText}  ${pathLong}`.length <= width
    const path = oneLine || pathLong.length <= width ? pathLong : `⌘ ${cwd}`

    const gitRow = s.git ? (
      <Text>
        <Text color={C.worktree}>𖠰 {s.git.worktree}</Text> <Text color={C.branch}>⎇ {s.git.branch}</Text>{' '}
        <Text color={C.changes}>(+{s.git.ins},-{s.git.del})</Text>
      </Text>
    ) : (
      <Text color={C.worktree}>𖠰 no git</Text>
    )
    const modelRow = (
      <Text>
        <Text color={C.model}>✳ {s.model}</Text> <Text color={C.effort}>{s.effort}</Text>
        {ctxText && <Text color={ctxColor}>{ctxText}</Text>}
      </Text>
    )
    const pathRow = <Text color={C.path}>{path}</Text>

    // The PR row: only what needs attention.
    const parts: { text: string; color: string }[] = []
    if (p !== null) {
      const ready = p.state === 'OPEN' && !p.isDraft && p.mergeState === 'CLEAN' && p.reviewDecision !== 'CHANGES_REQUESTED'
      if (p.state !== 'OPEN') parts.push({ text: p.state.toLowerCase(), color: C.grey })
      else if (p.isDraft) parts.push({ text: 'draft', color: C.grey })
      if (!ready && p.state === 'OPEN') {
        if (p.reviewDecision === 'REVIEW_REQUIRED') parts.push({ text: 'review required', color: C.warn })
        if (p.reviewDecision === 'CHANGES_REQUESTED') parts.push({ text: 'changes requested', color: C.bad })
        if (p.mergeState === 'DIRTY') parts.push({ text: 'conflicts', color: C.bad })
        if (p.mergeState === 'BEHIND') parts.push({ text: 'behind', color: C.warn })
      }
      // CI shows on every open PR, ready or not, so a passing run stays visible.
      if (p.state === 'OPEN') {
        if (p.ci === 'fail') parts.push({ text: `CI ${G.ciFail} ${p.ciFailed} failed`, color: C.bad })
        if (p.ci === 'pending') parts.push({ text: `CI ${G.ciPending}`, color: C.warn })
        if (p.ci === 'pass') parts.push({ text: `CI ${G.ciPass}`, color: C.good })
      }
      if (p.unresolved > 0) parts.push({ text: `${p.unresolved} unresolved`, color: C.warn })
      if (p.approvals > 0) parts.push({ text: `${p.approvals} approval${p.approvals === 1 ? '' : 's'}`, color: C.good })
      if (parts.length === 0 && p.state === 'OPEN' && p.mergeState === 'UNKNOWN') parts.push({ text: 'checking', color: C.grey })
      // Last, so the row reads as its verdict.
      if (ready) parts.push({ text: 'ready to merge', color: C.good })
    }

    const prRow =
      p === null ? null : (
        <Text wrap="truncate">
          <Link href={p.url}>
            <Text underline>{`${G.pr} #${p.number}`}</Text>
          </Link>
          {parts.map(part => (
            <Text color={part.color}>{`  ${part.text}`}</Text>
          ))}
        </Text>
      )

    // Framed like the engine's own panels: a round, dim border with a cell
    // of padding each side.
    return (
      <Box flexDirection="column" borderStyle="round" borderDimColor paddingX={1}>
        {oneLine ? (
          <Text wrap="truncate">
            {gitRow}  {modelRow}  {pathRow}
          </Text>
        ) : (
          <Box flexDirection="column">
            <Text wrap="truncate">
              {gitRow}  {modelRow}
            </Text>
            <Text wrap="truncate">{pathRow}</Text>
          </Box>
        )}
        {prRow}
      </Box>
    )
  })