band

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // The engine's own truth: every draw re-aligns a flag a missed turn.complete or a hot reload left wrong.
    turn.running = e.props.isWorking
    if (options.disabled === true || e.props.hasSurvey) return next(e)
    const u = await read($, usage)
    const m = await read($, model)
    const c = await read($, cache)
    const now = await read($, tick)
    const isPaneShown = await read($, paneShown)
    const focused = await read($, bandFocused)
    const unfolded = await read($, modelPicker)
    if (u.ctxPct === null && u.rates.length === 0 && m === null && c.anchorMs === null) return next(e)

    const isWorking = e.props.isWorking
    const snapshot = await read($, baseProgress)
    const digest = !isPaneShown ? digestOf(snapshot) : null
    const hasChecklist = toChecklist(snapshot) !== null
    // Short-circuit: while band's own list holds a line the foreign lists are not read, so their writes do not redraw the band.
    const hasEvents =
      take(await read($, events)).length > 0 ||
      anyEvent(
        await read($, baseEvents),
        await read($, slimEvents),
        await read($, feEvents),
        await read($, qaEvents),
        await read($, beEvents),
        await read($, pmEvents),
      )
    const isDesktop = e.surface === 'desktop'
    drawnOn = e.surface
    lastRender.surface = e.surface
    lastRender.bodyColumns = e.props.bodyColumns
    lastRender.maxRows = e.props.maxRows
    // A desktop draws proportional text: its bodyColumns do not measure the row, so nothing is dropped there.
    const segs = layout(bandSegs({ usage: u, model: m, cache: c, nowMs: now, isWorking, digest, hasChecklist, hasEvents }), isDesktop ? undefined : e.props.bodyColumns)
    const { Box, Text, Button } = $.ui.resolve(e)

    const label = (text: string) => (isDesktop ? glyphText(text) : text)
    // Dim label, bold value (`cache` dim, `42m` bold); a desktop glyph label stays at full strength.
    const dimLabel = isDesktop ? {} : { dimColor: true }
    const labeled = (text: string, labelProps: Record<string, unknown>, valueProps: Record<string, unknown>): RenderNode => {
      const [l, v] = splitLabel(text)
      return (
        <Box flexDirection="row">
          <Text {...labelProps} wrap="truncate-end">
            {v ? `${l} ` : l}
          </Text>
          {v ? (
            <Text {...valueProps} wrap="truncate-end">
              {v}
            </Text>
          ) : null}
        </Box>
      )
    }
    const cardMax = e.props.bodyColumns && e.props.bodyColumns > 0 ? e.props.bodyColumns : Infinity
    // A keyed Box is a hover scope; its hidden child is the card. A surface without a pointer never reveals it.
    // The card gets its own width: an absolute Box would otherwise shrink to its segment. The terminal clips
    // it to the segment's columns, so there it pops up a row above, over the rule; the desktop lays it over.
    const hoverable = (key: string, body: RenderNode, card: string): RenderNode => (
      <Box key={key}>
        {body}
        <Box
          position="absolute"
          top={isDesktop ? 0 : -1}
          left={0}
          width={Math.min(cells(card), cardMax)}
          display="none"
          hover={{ display: 'flex' }}
        >
          <Text inverse wrap="truncate-end">
            {card}
          </Text>
        </Box>
      </Box>
    )
    const rate = (r: BandRate, i: number): RenderNode[] => [
      ...(i > 0 ? [<Text dimColor> · </Text>] : []),
      hoverable(`seg-rate-${r.kind}`, labeled(rateText(r), dimLabel, { bold: true, ...LEVEL_PROPS[pctLevel(r.pct)] }), rateCard(r, now)),
    ]

    // A desktop draws a hotkey as a badge on its native button, and its buttons are clicked: no hotkeys there.
    const letters = focused && !isDesktop ? { plain: true as const } : null
    const hot = (k: string) => (isDesktop ? {} : { hotkey: k })
    const ruleCols = e.props.bodyColumns && e.props.bodyColumns > 0 ? Math.min(e.props.bodyColumns, 400) : 80

    // Unfolded, the row holds the models alone: four names plus letters outgrow a row that also holds the figures.
    // The current one is at full strength and only folds. Esc reaches no hook (the engine raises no focus-out),
    // so a close button ends the row; `x` is free here, as Clear is not drawn.
    if (unfolded && !isDesktop && m !== null) {
      const options = modelOptions(m)
      const row: RenderNode[] = [<Text dimColor>model </Text>]
      options.forEach((o, i) => {
        if (i > 0) row.push(<Text>{'  '}</Text>)
        row.push(
          <Button
            key={`model:${o.value}`}
            label={o.label}
            plain
            {...(letters && o.hotkey ? { hotkey: o.hotkey } : {})}
            {...(o.current ? {} : { dimColor: true })}
            onPress={() => pickModel($, o)}
          />,
        )
      })
      row.push(<Text>{'  '}</Text>)
      row.push(<Button key="model-close" label={MODEL_CLOSE} plain {...(letters ? { hotkey: 'x' } : {})} dimColor onPress={() => setPicker($, false)} />)
      return (
        <Box flexDirection="column">
          <Text dimColor>{RULE.repeat(ruleCols)}</Text>
          <Box flexDirection="row">{row}</Box>
        </Box>
      )
    }

    const groups: RenderNode[][] = []
    if (segs.cache !== null) {
      const level = LEVEL_PROPS[cacheView(c, now, isWorking).level]
      groups.push([hoverable('seg-cache', labeled(label(segs.cache), dimLabel, { bold: true, ...level }), cacheCard(c, now))])
    }
    // The terminal has no model menu of its own in reach, so its segment is the picker's button; the desktop app has one.
    if (segs.model !== null && m !== null) {
      groups.push([
        isDesktop ? (
          <Text wrap="truncate-end">{`${GLYPH.model} ${segs.model}`}</Text>
        ) : (
          <Button key="model" label={`${segs.model}${MODEL_MARK}`} plain {...(letters ? { hotkey: 'm' } : {})} onPress={() => setPicker($, true)} />
        ),
      ])
    }
    const ctxLevel = u.ctxPct === null ? {} : CTX_PROPS[pctLevel(u.ctxPct)]
    groups.push([hoverable('seg-ctx', labeled(label(segs.ctx), dimLabel, { bold: true, ...ctxLevel }), ctxCard(u))])
    if (segs.rates.length) {
      groups.push([...(isDesktop ? [<Text>{`${GLYPH.rates} `}</Text>] : []), ...segs.rates.flatMap(rate)])
    }
    if (segs.cost !== null && u.costUsd !== null) {
      groups.push([hoverable('seg-cost', labeled(label(segs.cost), dimLabel, { bold: true }), costCard(u.costUsd))])
    }
    if (segs.digest !== null) {
      groups.push([
        <Box key="seg-digest" flexDirection="row">
          {isDesktop ? <Text>{`${GLYPH.digest} `}</Text> : null}
          {labeled(segs.digest, { bold: true }, {})}
        </Box>,
      ])
    }
    const buttons: RenderNode[] = []
    const look = letters ?? (segs.compact.plain ? {} : { variant: 'primary' as const })
    buttons.push(<Button key="compact" label="Compact" {...hot('c')} {...look} onPress={() => pressCompact($)} />)
    if (segs.clear !== null) {
      buttons.push(<Text>{'  '}</Text>)
      buttons.push(<Button key="clear" label="Clear" {...hot('x')} {...(letters ?? { dimColor: true })} onPress={() => pressClear($)} />)
    }
    if (segs.progress !== null) {
      buttons.push(<Text>{'  '}</Text>)
      buttons.push(<Button key="progress" label="Progress" {...hot('p')} {...(letters ?? { dimColor: true })} onPress={() => {}} />)
    }
    if (segs.log !== null) {
      buttons.push(<Text>{'  '}</Text>)
      buttons.push(<Button key="log" label="Log" {...hot('l')} {...(letters ?? { dimColor: true })} onPress={() => {}} />)

  on('ui.render', { component: 'Pane', requestId: LOG_PANE }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const list = await allEvents($)
    if (list.length === 0) {
      return (
        <Box flexDirection="column" width={e.props.bodyColumns}>
          <Text dimColor wrap="truncate-end">
            no events yet
          </Text>
        </Box>
      )
    }
    // The engine's window starts at the top and never follows the end: keep the newest rows in view,
    // counting the rows a wrapped text takes.
    const rows = e.props.scroll?.bodyRows ?? 0
    const textCols = Math.max(1, e.props.bodyColumns - PREFIX_COLS)
    const shown = newestFitting(list, rows, textCols)
    const cut = shown.length < list.length
    return (
      <Box flexDirection="column" width={e.props.bodyColumns}>
        {cut ? <Text dimColor wrap="truncate-end">{`… ${list.length - shown.length} earlier`}</Text> : null}
        {shown.map((ev, i) => (
          <Box key={`ev-${i}`} flexDirection="row">
            <Box width={PREFIX_COLS} flexShrink={0}>
              <Text dimColor>{`${hhmm(ev.atMs)}  `}</Text>
              <Text dimColor>{`${pluginCell(ev.plugin)}  `}</Text>
              <Text dimColor>{`${kindCell(ev.kind)}  `}</Text>
            </Box>
            <Box width={textCols}>
              <Text wrap="wrap">{ev.text}</Text>
            </Box>
          </Box>
        ))}
      </Box>
    )
  })