null-radio

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    try {
      const playing = (await read($, isPlaying)) === true
      const curId = (await read($, current)) as string | null
      const vol = (await read($, volume)) as number
      const np = (await read($, nowPlaying)) as RadioNowPlaying | null
      const err = (await read($, lastError)) as string | null
      await read($, vuTick) // subscribes the pane to the VU animation clock

      const body = e.props.bodyColumns ?? e.viewport?.columns ?? 60
      const nameW = Math.max(12, Math.min(18, body - 30))
      const genreW = Math.max(8, Math.min(22, body - nameW - 10))

      // One Text per same-color run keeps the tree small.
      const vuRuns: Array<{ text: string; color: string }> = []
      for (const l of vuLevels) {
        const color = vuColor(l)
        const g = vuGlyph(l)
        const last = vuRuns[vuRuns.length - 1]
        if (last !== undefined && last.color === color) last.text += g
        else vuRuns.push({ text: g, color })
      }

      return (
        <Box flexDirection="column">
          <Box>
            <Text color={NEON.magenta} bold>
              ▚▞ NULL RADIO{'  '}
            </Text>
            {playing ? <Text color={NEON.green}>● ON AIR</Text> : <Text dimColor>○ off air</Text>}
            <Text dimColor> · vol {String(vol)}</Text>
          </Box>
          <Box>
            {playing ? (
              vuRuns.map((r, i) => (
                <Text key={'vu' + String(i)} color={r.color}>
                  {r.text}
                </Text>
              ))
            ) : (
              <Text dimColor>{'▁'.repeat(VU_COLS)}</Text>
            )}
          </Box>
          {np !== null ? (
            <Box>
              <Text color={NEON.cyan} wrap="truncate-end">
                ♪ {np.title}
              </Text>
              {np.artist !== '' ? <Text color={NEON.violet} wrap="truncate-end">{'  '}{np.artist}</Text> : null}
            </Box>
          ) : playing ? (
            <Text dimColor>♪ tuning…</Text>
          ) : null}
          <Text dimColor>── dial ─────────────</Text>
          {channels.map((ch, i) => {
            const isCur = curId === ch.id
            return (
              <Box key={ch.id}>
                <Button key={'ch-' + ch.id} plain hotkey={hotkeyFor(i)} onPress={() => void startPlayback($, ch)}>
                  {isCur && playing ? (
                    <Text color={NEON.magenta} bold>
                      ▸ {clip(ch.name, nameW)}
                    </Text>
                  ) : isCur ? (
                    <Text color={NEON.violet}>▹ {clip(ch.name, nameW)}</Text>
                  ) : (
                    <Text color={NEON.cyan}>{'  '}{clip(ch.name, nameW)}</Text>
                  )}
                  <Text dimColor> {clip(ch.genre, genreW)}</Text>
                </Button>
              </Box>
            )
          })}
          <Box>
            {playing ? (
              <Button key="stop" plain hotkey="s" onPress={() => void stopPlayback($)}>
                <Text color={NEON.red}>■ stop</Text>
              </Button>
            ) : curId !== null ? (
              <Button key="play" plain hotkey="p" onPress={() => {
                const ch = channelById(curId)
                if (ch !== undefined) void startPlayback($, ch)
              }}>
                <Text color={NEON.green}>▶ play</Text>
              </Button>
            ) : null}
            <Text> </Text>
            <Button key="vol-down" plain hotkey="d" onPress={() => void setVolume($, -VOL_STEP)}>
              <Text color={NEON.yellow}>vol−</Text>
            </Button>
            <Text> </Text>
            <Button key="vol-up" plain hotkey="u" onPress={() => void setVolume($, VOL_STEP)}>
              <Text color={NEON.yellow}>vol+</Text>
            </Button>
          </Box>
          {err !== null ? (
            <Text color={NEON.red} wrap="truncate-end">
              ⚠ {err}
            </Text>
          ) : null}
          <Text dimColor>1–0 tune · s stop · u/d vol · /{hasRadioCmd ? 'radio' : 'nullradio'} reopens</Text>
        </Box>
      )
    } catch {
      return <Text dimColor>null-radio: render error (the pane will recover next redraw)</Text>
    }
  })