neonmeter

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const bandKey = await resolveBandKey($)
    try {
      ensurePolling($)
    } catch {
      // A timer refused from a render dispatch is re-armed at the next session event.
    }

    // `h` is the JSX factory in this environment, so the health value is not named that here.
    const [r, c, hv, t, now] = await Promise.all([read($, reading), read($, context), read($, health), read($, theme), $.clock.now()])
    await read($, tick)

    const palette = THEMES[t ?? 'dark']
    const input = inputOf(r, c, hv ?? DEFAULT_HEALTH, now, env.options)
    const burst = burstOf(env.bursts, bandKey, changeKey(input), now, env.options.pulseMs, env.options.pulseCount)
    const base = { pulse: env.options.pulse, pulseMs: env.options.pulseMs, pulseMode: env.options.pulseMode, burst, ground: palette.bg }
    const single = env.options.layout === 'single'
    const variants = single ? singleVariants(input) : weeklyVariants(input)
    const { Box } = $.ui.resolve(e)

    if (e.surface === 'desktop') {
      // The desktop band is drawn in a proportional font: cells are nominal
      // there, so the row is text pieces plus bars that stretch to fill the
      // band, drawn as dots spread across the bar or as smooth slices. Its
      // neutral colors are theme keys the app paints for its own appearance;
      // the neon palette follows the app's detected appearance under `auto`
      // (else the terminal theme), or the `desktopTheme` option when set.
      // The desktop app starts sessions as an SDK host, whose session start names no
      // surface: the first desktop draw schedules the lookup (a render may not write
      // state, a timer may), instead of leaving it to the minute tick.
      if (!env.onDesktop) {
        env.onDesktop = true
        try {
          $.clock.after(0, () => {
            void refreshAppearance($).catch(() => undefined)
          })
        } catch {
          // The minute tick looks it up instead.
        }
      }
      const seen = await read($, appearance)
      const dt: NeonMeterTheme = env.options.desktopTheme === 'auto' ? (seen ?? t ?? 'dark') : env.options.desktopTheme
      const plain = flexRow(input, dt, env.options.barColoring)
      if (!plain) return next(e)
      const dots = env.options.desktopBars === 'dots'
      // In the single layout each turn's text differs, so each row gets the dots its own text leaves room for.
      const turns = variants
        .map(v => {
          const count = single ? desktopDotCount(flexRow(v, dt, env.options.barColoring) ?? plain, e.props.bodyColumns) : desktopDotCount(plain, e.props.bodyColumns)
          const r = flexRow(v, dt, env.options.barColoring, dots ? count : undefined)
          return r ? { row: r, dotCount: count } : null
        })
        .filter((t): t is { row: FlexRow; dotCount: number } => t !== null)
      ensureRotation($, turns.length)
      const turn = turns[env.turn % Math.max(1, turns.length)]
      const row = turn?.row ?? plain
      const dotCount = turn?.dotCount ?? desktopDotCount(plain, e.props.bodyColumns)
      const { Text, Svg } = $.ui.resolve(e)
      return (
        <Box width="100%">
          {desktopBand(row, { Box, Text, Svg }, { pulse: env.options.pulse, pulseMs: env.options.pulseMs, pulseMode: env.options.pulseMode, burst, glow: env.options.glow, palette: THEMES[dt], dotCount })}
        </Box>
      )
    }

    const cols = Math.max(1, e.props.bodyColumns)
    const rows = variants.map(v => band(v, cols, t ?? 'dark', env.options.barColoring)).filter(r => r !== null)
    const row = rows[0]
    if (!row) return next(e)
    const props: BandProps = { ...base, layout: 'cells', spans: row.spans }
    if (rows.length > 1) Object.assign(props, { alternates: rows.slice(1).map(r => r!.spans), rotateMs: env.options.rotateSeconds * 1000 })
    // Every surface with a `Client` draws the band this way; the desktop returned above.
    const { Text, Client } = $.ui.resolve(e) as ElementTable<'terminal'>
    return (
      <Box flexDirection="column" width={cols}>
        <Text color={RULE_COLOR} wrap="truncate">
          {RULE.repeat(cols)}
        </Text>
        <Client key={bandKey} module="./band.tsx" width="100%" props={props} />
      </Box>
    )
  })

export function desktopBand(row: FlexRow, els: DesktopElements, o: DesktopOptions): RenderElement {
  const { Box, Text, Svg } = els
  const children: RenderElement[] = []
  let lastWin = -1
  row.segments.forEach((seg, n) => {
    if (seg.kind !== 'ctx') lastWin = n
  })
  const fixed = (key: string, el: RenderElement) => (
    <Box key={key} flexShrink={0}>
      {el}
    </Box>
  )
  row.segments.forEach((seg: FlexSegment, n) => {
    if (n > 0) children.push(fixed(`sep-${seg.kind}`, <Text color={THEME_KEYS.dim}> │ </Text>))
    children.push(fixed(`label-${seg.kind}`, <Text color={THEME_KEYS.text}>{seg.label} </Text>))
    if (seg.dots) {
      const filled = seg.dots.filter(d => HEX.test(d.color) && d.color.toUpperCase() !== o.palette.track.toUpperCase()).length
      children.push(
        <Box key={`dots-${seg.kind}`} flexDirection="row" flexGrow={1} flexShrink={1} minWidth={0} overflow="hidden">
          <Svg source={dotBarSvg(seg.dots, o)} alt={`${filled} of ${seg.dots.length} dots`} height={DISPLAY_HEIGHT} />
        </Box>,
      )
      children.push(fixed(`gap-${seg.kind}`, <Text color={THEME_KEYS.text}> </Text>))
    } else if (seg.bar) {
      children.push(
        <Box key={`bar-${seg.kind}`} flexDirection="row" flexGrow={1} flexShrink={1} minWidth={0} overflow="hidden">
          <Svg source={smoothBarSvg(seg.bar, o)} alt={`${seg.kind} bar`} height={DISPLAY_HEIGHT} />
        </Box>,
      )
      children.push(fixed(`gap-${seg.kind}`, <Text color={THEME_KEYS.text}> </Text>))
    }
    if (!seg.pct.live && seg.pct.color.toUpperCase() === o.palette.text.toUpperCase()) {
      children.push(
        fixed(
          `pct-${seg.kind}`,
          <Text color={THEME_KEYS.text} bold>
            {seg.pct.text}
          </Text>,
        ),
      )
    } else {
      children.push(fixed(`pct-${seg.kind}`, <Svg source={pctSvg(seg.pct, o)} alt={seg.pct.text} height={DISPLAY_HEIGHT} />))
    }
    if (seg.extra) children.push(fixed(`extra-${seg.kind}`, <Text color={THEME_KEYS.text}> {seg.extra}</Text>))
    if (n === lastWin && row.stale) {
      children.push(
        fixed(
          `stale-${seg.kind}`,
          <Text color={THEME_KEYS.dim} italic>
            {'  ' + row.stale.text}
          </Text>,
        ),
      )
    }
  })
  return (
    <Box key="band" flexDirection="row" width="100%" alignItems="center">
      {children}
    </Box>
  )
}