jukebox7

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Input } = $.ui.resolve(e)
    const p = await read($, player)
    const level = await read($, volume)
    const now = p.tracks[p.index]
    const { value: avatar } = await $.state.get(onDuty)
    const { value: onAir } = await $.state.get(onStation)
    const station = onAir !== undefined && onAir.artists.length > 0 ? onAir : undefined
    const isTerminal = e.surface === 'terminal'
    // The border and the play glyph take three columns on the terminal.
    const width = Math.max(10, (e.props.bodyColumns ?? 40) - (isTerminal ? 5 : 2))
    const title = now === undefined ? 'Nothing plays.' : now.title.length > width ? `${now.title.slice(0, width - 1)}…` : now.title
    const where = p.genre === null || p.genre === undefined ? `${p.index + 1}/${p.tracks.length}` : (GENRES.some(g => g.label === p.genre) ? p.genre : (onAir?.name || p.genre))

    // A list, not a fragment: the terminal lays a fragment out as a column of
    // its own, which stacked the controls one per row and cut off `u: vol+`.
    const controls = [
      <Button key="toggle" label={p.isPlaying ? 'pause' : 'play'} hotkey="p" plain onPress={() => void toggle($)} />,
      <Button key="next" label="next" hotkey="n" plain onPress={() => void once($, () => skip($, 1))} />,
      <Button key="similar" label="similar" hotkey="r" plain onPress={() => void once($, () => playSimilar($))} />,
      <Button key="stop" label="stop" hotkey="s" plain dimColor onPress={() => void stop($)} />,
      <Button key="quieter" label="vol−" hotkey="d" plain dimColor onPress={() => void louder($, -VOLUME_STEP)} />,
      <Button key="louder" label="vol+" hotkey="u" plain dimColor onPress={() => void louder($, VOLUME_STEP)} />,
    ]
    const f = await read($, found)
    const isSearching = await read($, searching)
    const fit = (t: string, room: number): string => (t.length > room ? `${t.slice(0, room - 1)}…` : t)
    const reopen = (open: boolean, results: number) => void $.ui.open({ id: PANE, title: 'jukebox7', rows: paneRows(open, results) })
    const finder = (
      <Button
        key="find"
        label={isSearching ? 'close search' : 'find'}
        hotkey="f"
        plain
        dimColor={!isSearching}
        onPress={() => {
          void (async () => {
            await update($, searching, () => !isSearching)
            reopen(!isSearching, f.tracks.length)
          })()
        }}
      />
    )
    const search = isSearching ? (
      <Box flexDirection="column" backgroundColor={isTerminal ? BLACK : undefined}>
        <Input
          key="query"
          label="find: "
          placeholder={f.query === '' ? 'ctrl+x tab, a search, Enter' : f.query}
          submitLabel="find"
          autoFocus
          onSubmit={value => {
            const query = value.replace(/\s+/g, ' ').trim()
            if (query === '' || isFinding) return
            void (async () => {
              const pending = find($, query)
              $.ui.invalidate('ui.render')
              const tracks = await pending
              reopen(true, tracks?.length ?? 1)
              $.ui.invalidate('ui.render')
            })()
          }}
        />
        {isFinding ? (
          <Text dimColor>searching…</Text>
        ) : f.query !== '' && f.tracks.length === 0 ? (
          <Text dimColor>{`nothing found for "${f.query}"`}</Text>
        ) : (
          f.tracks.slice(0, PICK_KEYS.length).map((t, i) => (
            <Button
              key={`pick-${t.id}`}
              label={fit(`${t.title}${t.seconds === null ? '' : ` (${clock(t.seconds)})`}`, width - 3)}
              hotkey={PICK_KEYS[i]}
              plain
              dimColor={now?.id !== t.id}
              onPress={() => void once($, () => pick($, i))}
            />
          ))
        )}
      </Box>
    ) : null

    const stations = (
      <Box flexDirection="row" flexWrap="wrap" columnGap={2} backgroundColor={isTerminal ? BLACK : undefined}>
        {GENRES.map(g => (
          <Button key={g.label} label={g.label} hotkey={g.key} plain dimColor onPress={() => void once($, () => playGenre($, g.label))} />
        ))}
        {station !== undefined && avatar !== undefined && (
          <Button key="avatar" label={`${station.name}'s pick`} hotkey="a" plain onPress={() => void once($, () => playGenre($, avatar))} />
        )}
        {isTerminal && finder}
      </Box>
    )

    if (!isTerminal) {
      return (
        <Box flexDirection="column">
          <Text dimColor={now === undefined || !p.isPlaying}>{title}</Text>
          {now !== undefined && (
            <Box flexDirection="row" gap={2}>
              <Text dimColor>
                {p.isPlaying ? 'playing' : 'paused'} {where} · vol {level}%
              </Text>
              {controls}
            </Box>
          )}
          {stations}
          {finder}
          {search}
        </Box>
      )
    }

    // The terminal: black, framed and lit in the color of the avatar on duty.
    const { value: color } = await $.state.get(tint)
    const accent = typeof color === 'string' && color !== '' ? color : PHOSPHOR
    const bar = progress(p, await $.clock.now(), now?.seconds ?? null)
    const rows = e.props.scroll?.bodyRows ?? 0
    // The frame, the title, the bar, the controls and the stations; the rain
    // takes what is left of the pane's height.
    // The controls and the stations wrap inside the frame (border and padding:
    // four columns); each row they take comes out of the rain.
    const inner = Math.max(10, (e.props.bodyColumns ?? 40) - 4)
    const controlRows = now === undefined ? 0 : buttonRows([p.isPlaying ? 'pause' : 'play', 'next', 'similar', 'stop', 'vol−', 'vol+'], inner)
    const stationRows = buttonRows(
      [...GENRES.map(g => g.label), ...(station !== undefined ? [`${station.name}'s pick`] : []), isSearching ? 'close search' : 'find'],
      inner,
    )
    // The field, then a result a row (or the one line saying why there are none).
    const searchRows = isSearching ? 1 + (isFinding || f.tracks.length === 0 ? (f.query === '' && !isFinding ? 0 : 1) : Math.min(f.tracks.length, PICK_KEYS.length)) : 0
    // The frame's two borders, the title, the bar when something plays.
    const rainRows = Math.max(0, rows - 3 - (now === undefined ? 0 : 1) - controlRows - stationRows - searchRows)
    const rainColumns = Math.max(0, (e.props.bodyColumns ?? 40) - 2)
    return (
      <Box flexDirection="column" width="100%" height={rows > 0 ? rows : undefined} backgroundColor={BLACK}>
        <Box flexDirection="column" borderStyle="round" borderColor={accent} backgroundColor={BLACK} paddingX={1}>
          <Text color={accent} backgroundColor={BLACK} dimColor={now === undefined || !p.isPlaying}>
            {now === undefined ? '■ ' : p.isPlaying ? '▶ ' : '❚❚ '}
            {title}
          </Text>
          {now !== undefined && (
            <Text backgroundColor={BLACK}>
              <Text color={accent}>{bar.done}</Text>
              <Text dimColor>{bar.left}</Text>
              <Text dimColor>{` ${bar.time}  ${where}  vol ${level}%`}</Text>
            </Text>
          )}
          {now !== undefined && (
            <Box flexDirection="row" flexWrap="wrap" columnGap={2} backgroundColor={BLACK}>
              {controls}
            </Box>
          )}
          {stations}
          {search}
        </Box>
        <Box flexDirection="column" flexGrow={1} paddingX={1} backgroundColor={BLACK}>
          {rain(rainColumns, rainRows, frame).map((runs, r) => (
            <Text key={String(r)} backgroundColor={BLACK}>
              {runs.map((run, i) => (
                <Text key={String(i)} color={run.level === 2 ? '#e8fff4' : accent} dimColor={run.level === 1}>