dev-band

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const [s, g, rep, busy, pinned] = await Promise.all([
      read($, snap), read($, git), read($, sitrep), read($, isBusy), read($, isPinned),
    ])
    const { Box, Button, Text } = $.ui.resolve(e)
    const now = Math.max(s.now, s.lastAt)
    const cols = e.props.bodyColumns || 120

    // One model for both surfaces. Lower prio drops first when the line won't fit.
    type Spec = { key: string; prio: number; alt: string; runs: Run[] }
    const specs: Spec[] = []
    const tok = s.ctxTok ?? 0
    const cp = s.ctxPct ?? 0

    if (g && !g.isRepo) {
      specs.push({ key: 'git', prio: 3, alt: `${g.dir}, not a git repo`, runs: [{ text: shortDir(g.dir, MAX_DIR), color: ACCENT }] })
    } else if (g) {
      const r: Run[] = [{ text: `⎇ ${mid(g.branch, MAX_BRANCH)}`, color: ACCENT }]
      if (g.dirty) r.push({ text: ` ±${g.dirty}`, color: WARN })
      if (g.ahead) r.push({ text: ` ↑${g.ahead}`, dim: true })
      if (g.behind) r.push({ text: ` ↓${g.behind}`, dim: true })
      specs.push({ key: 'git', prio: 3, alt: `branch ${g.branch}, ${g.dirty} changed`, runs: r })
    }

    // Bars start at their minimum; whatever room is left after the text is theirs.
    const BW = 24
    const limit = (key: string, label: string, prio: number, pct?: number, reset?: string) => {
      if (pct === undefined) return
      const isReset = !!reset && Date.parse(reset) <= now
      const p = isReset ? 0 : pct
      const color = tone(p)
      const tail = reset && !isReset ? ` ${left(Date.parse(reset) - now)}` : ''
      specs.push({
        key, prio, alt: `${label} limit ${Math.round(p)}%${tail}`,
        runs: [{ text: `${label} `, dim: true }, { bar: p / 100, color, width: BW }, { text: `${Math.round(p)}%`, color, bold: true }, ...(tail ? [{ text: tail, dim: true }] : [])],
      })
    }
    limit('h5', '5h', 5, s.h5, s.h5Reset)
    limit('wk', '7d', 2, s.wk, s.wkReset)

    const ttl = (s.ttl ?? (s.sub ? '1h' : '5m')) === '1h' ? TTL_SUB : TTL_API
    const rem = s.lastAt ? s.lastAt + ttl - now : 0
    // Only a miss is worth the space; a hit is the normal case.
    const miss = s.missTok ? ` ✗${k(s.missTok)}` : ''
    const cache: Run[] = e.props.isWorking
      ? [{ text: 'cache ', dim: true }, { dot: WARM }, { text: 'hot', color: WARM }]
      : rem > 0
        ? [{ text: 'cache ', dim: true }, { dot: WARM }, { text: 'warm', color: WARM }, { text: ` ${Math.max(0, Math.ceil(rem / 60_000))}m`, dim: true }, ...(miss ? [{ text: miss, color: BAD }] : [])]
        : [{ text: 'cache ', dim: true }, { dot: COOL }, { text: s.lastAt ? 'cold' : '—', color: COOL }]
    specs.push({ key: 'cache', prio: 4, alt: 'prompt cache', runs: cache })

    // Width of a spec in cells (terminal) or px (desktop).
    const isTerm = e.surface === 'terminal'
    let TW = 3
    const cells = (r: Run[]) => r.reduce((n, x) => n + ('bar' in x ? (TW ? TW + 3 : 0) : 'dot' in x ? 2 : [...x.text].length), 0)
    const GAP_T = 3
    const GAP_PX = 24
    const avail = isTerm ? cols - 2 : cols * 8 - 24
    const width = (list: Spec[]) =>
      list.reduce((n, x) => n + (isTerm ? cells(x.runs) : seg(x.runs).w), 0) + Math.max(0, list.length - 1) * (isTerm ? GAP_T : GAP_PX)
    let shown = [...specs]
    // First shorten the cache to its state, then drop whole segments by priority.
    if (width(shown) > avail) {
      shown = shown.map(x => (x.key === 'cache' ? { ...x, runs: x.runs.filter(r => !('text' in r) || !r.dim || r.text === 'cache ') } : x))
    }
    while (width(shown) > avail && shown.length > 1) {
      const lowest = shown.reduce((m, x) => (x.prio < m.prio ? x : m))
      shown = shown.filter(x => x !== lowest)
    }
    // Spare room goes to the bars, up to a cap, leaving a little air.
    const nBars = shown.reduce((n, x) => n + x.runs.filter(r => 'bar' in r).length, 0)
    if (nBars) {
      const spare = avail - width(shown) - (isTerm ? 4 : 48)
      if (isTerm && TW) TW = Math.min(24, TW + Math.max(0, Math.floor(spare / nBars)))
      if (!isTerm) {
        const grow = Math.max(0, Math.floor(spare / nBars))
        shown = shown.map(x => ({ ...x, runs: x.runs.map(r => ('bar' in r ? { ...r, width: Math.min(220, r.width + grow) } : r)) }))
      }
    }

    // Big-context row: the cheapest move given the cache.
    const isCold = s.lastAt > 0 && rem <= 0
    const isExpiring = !isCold && rem > 0 && rem <= 10 * 60_000
    const nag = !e.props.isWorking && tok >= Math.max(NAG, s.snooze ?? 0)
    const nagRow = nag ? (
      <Box key="nag" flexDirection="row" alignItems="center" gap={1} paddingX={1}>
        <Text color={isCold ? COOL : tok >= NAG_HARD ? BAD : WARN}>!</Text>
        <Text dimColor wrap="truncate-end">
          {isCold
            ? `cache cold: next message re-reads ${k(tok)}; clear is free`
            : isExpiring
              ? `cache expires in ${left(rem)}: compact while it's cheap`
              : `${k(tok)} in context: every turn re-sends it`}
        </Text>
        <Button key="compact" label="compact" hotkey="c" variant={isCold ? 'secondary' : 'primary'} onPress={() => compactNow($)} />
        <Button key="clear" label="clear" hotkey="x" variant={isCold ? 'primary' : 'secondary'} onPress={() => void $.prompt.fill({ text: '/clear' })} />
        <Button key="later" label="later" hotkey="l" onPress={() => update($, snap, x => ({ ...x, snooze: tok + 100_000 }))} />
      </Box>
    ) : null

    // The sitrep unfolds under the metrics.
    const showRep = rep && (!e.props.isWorking || pinned)
    const bullets = (items: string[], p: string) =>
      items.map((t, i) => (
        <Text key={`${p}${i}`} wrap="wrap">
          <Text dimColor>{'    · '}</Text>
          {t}
        </Text>
      ))
    const repView = showRep && rep ? (
      <Box key="rep" flexDirection="column" paddingX={1} marginTop={1}>
        <Box flexDirection="row" justifyContent="space-between">
          <Text dimColor>
            {`── sitrep @ ${hhmm(rep.at)}${pinned ? ' · pinned' : ''} ──`}
          </Text>
          <Box flexDirection="row" gap={1}>
            <Button key="pin" label={pinned ? 'unpin' : 'pin'} hotkey="p" onPress={() => update($, isPinned, v => !v)} />
            <Button key="close" label="close" hotkey="d" role="dismiss" onPress={() => closeSitrep($)} />
          </Box>
        </Box>
        <Text wrap="wrap">
          <Text color={COOL} bold>{'  now  '}</Text>
          {rep.now}
        </Text>
        {rep.last.length > 0 && <Text color={COOL} bold>{'  last'}</Text>}
        {bullets(rep.last, 'l')}
        {rep.needsYou && (
          <Text wrap="wrap">
            <Text color={WARN} bold>{'  you  '}</Text>
            <Text color={WARN}>{rep.needsYou}</Text>
          </Text>
        )}
        {rep.next.length > 0 && <Text color={COOL} bold>{'  next'}</Text>}
        {bullets(rep.next, 'n')}
      </Box>
    ) : busy ? (
      <Box key="rep" paddingX={1}>
        <Text dimColor>── sitrep: writing…</Text>
      </Box>
    ) : sitrepError ? (
      <Box key="rep" paddingX={1}>
        <Text color={BAD}>{`── ${sitrepError}`}</Text>
      </Box>
    ) : null

    if (!isTerm) {
      const { Svg } = $.ui.resolve(e) as unknown as { Svg: (p: { source: string; alt: string; width?: number; height?: number }) => unknown }
      const svgRow = (key: string, runs: Run[], alt: string) => {
        const d = seg(runs)
        return <Svg key={key} source={d.svg} alt={alt || ' '} width={d.w} height={H} />
      }
      // A label column, then text wrapped to the band's width:
      //   now   one sentence
      //   last  · bullet
      const LABEL = 6
      // bodyColumns is in the app's own monospace cells, which are at least as wide as ours.
      const textCells = Math.max(20, cols - LABEL - 6)
      const block = (key: string, label: string, color: string, items: string[], bullet: boolean, textColor?: string) => {
        const rows: unknown[] = []