hush

  on("ui.render", { component: "AbovePrompt" }, async ($, e, next) => {
    lastSurface = e.surface;
    if (e.props.hasSurvey || !isActive()) {
      leavePanel($, e);
      return next(e);
    }
    const ui = $.ui.resolve(e);
    const width = e.props.bodyColumns ?? 80;
    const columns = Math.min(width - COLLAPSE_CELLS, MAX_COLUMNS);
    const panelColumns = Math.min(width - COLLAPSE_CELLS, PANEL_MAX_COLUMNS);
    const song = source === "hum" && finding === "" ? humView(hum, now()) : null;
    const layout = chooseLayout({
      big,
      isSong: song !== null,
      surface: e.surface,
      columns: width,
      rows: e.props.maxRows ?? 0,
      canImages: canImages && !imagesBlocked,
    });
    const beneath = await next(e);
    if (layout.mode === "panel") {
      const drawn = e.surface === "desktop" ? desktopPanel($, ui, song, columns) : terminalPanel($, ui, e, layout, song, panelColumns);
      return ui.Box({ flexDirection: "column", children: [drawn, beneath] });
    }
    leavePanel($, e);
    return ui.Box({ flexDirection: "column", children: [band($, ui, columns), beneath] });
  });

function band($, ui, columns) {
  const { Box, Text, Button } = ui;
  const song = source === "hum" ? humView(hum, now()) : null;
  const isSong = song !== null;
  const view = song ?? status;
  const station = STATIONS[stationIndex];
  const accent = isSong ? HUM_COLOR : station.color;
  const ducked = isDucked();
  const quiet = ducked || view.state === "paused";
  const loading = finding !== "" || view.state === "loading";
  let title = status.title || `${station.name} radio`;
  if (finding) {
    title = finding;
  } else if (isSong) {
    title = song.name;
  } else if (status.state === "loading") {
    title = "tuning…";
  }
  const tag = isSong ? (view.dur > 0 ? `${clock(view.pos)} / ${clock(view.dur)}` : "") : `${station.name} · live`;
  // A song with lyrics gives the bar's room to the lyric line; the clock in the tag shows progress.
  const showBar = columns >= 70 && !(isSong && song.hasLyrics);
  const showTag = columns >= 56 && tag !== "";
  const showButtons = columns >= 44;
  const showClawd = clawdOn && columns >= 84 && view.state === "playing" && !finding;
  const lit = isLit && showButtons;
  const showVolButtons = lit && columns >= 70;
  const barText = showBar ? BAR_CELLS + 1 : 0;
  const tagText = showTag ? tag.length + 2 : 0;
  let buttonsText = 0;
  if (showButtons) {
    buttonsText = showVolButtons ? 40 : lit ? 24 : 12;
  }
  const clawdText = showClawd ? CLAWD_ZONE + 2 : 0;
  const titleCells = Math.max(8, columns - 2 - tagText - barText - buttonsText - clawdText - 1);

  const parts = [Text({ color: accent, dimColor: quiet, children: "♪ " })];
  if (isSong && song.hasLyrics && !finding && titleCells >= 40) {
    // Title and artist keep a fixed share, so the buttons stay put while the lyric changes.
    const nameCells = Math.min(song.name.length, Math.max(16, Math.floor(titleCells * 0.5)));
    const lyricCells = titleCells - nameCells - 2;
    parts.push(Text({ dimColor: quiet, children: fit(song.name, nameCells).padEnd(nameCells) }));
    parts.push(Text({ children: "  " }));
    parts.push(Text({ color: accent, dimColor: quiet, italic: true, children: fit(song.line, lyricCells).padEnd(lyricCells) }));
  } else {
    parts.push(Text({ dimColor: quiet || loading, children: fit(title, titleCells).padEnd(titleCells) }));
  }
  if (showTag) {
    parts.push(Text({ dimColor: true, children: `  ${tag}` }));
  }
  if (showBar) {
    let filled;
    if (isSong) {
      filled = view.dur > 0 ? Math.round((view.pos / view.dur) * BAR_CELLS) : 0;
    } else {
      const effective = ducked ? Math.round(status.volume * 0.35) : status.volume;
      filled = status.state === "paused" ? 0 : Math.round((effective / 100) * BAR_CELLS);
    }
    filled = clamp(filled, 0, BAR_CELLS);
    parts.push(Text({ children: " " }));
    parts.push(Text({ color: accent, dimColor: quiet, children: "━".repeat(filled) }));
    parts.push(Text({ dimColor: true, children: "─".repeat(BAR_CELLS - filled) }));
  }
  if (showButtons) {
    parts.push(Text({ children: "  " }));
    parts.push(
      Button({ key: "prev", label: "‹", ...keyed("h"), plain: true, dimColor: !lit, onPress: () => void press($, "prev") }),
    );
    parts.push(Text({ children: " " }));
    parts.push(
      Button({
        key: "play",
        label: view.state === "paused" ? "play" : "pause",
        ...keyed("p"),
        plain: true,
        autoFocus: true,
        dimColor: !lit,
        onPress: () => void press($, "pause"),
      }),
    );
    parts.push(Text({ children: " " }));
    parts.push(
      Button({ key: "next", label: "›", ...keyed("l"), plain: true, dimColor: !lit, onPress: () => void press($, "next") }),
    );
    if (showVolButtons) {
      parts.push(Text({ children: "  " }));
      parts.push(Button({ key: "down", label: "-", hotkey: "j", plain: true, onPress: () => void press($, "down") }));
      parts.push(Text({ dimColor: true, children: ` vol ${view.volume} ` }));
      parts.push(Button({ key: "up", label: "+", hotkey: "k", plain: true, onPress: () => void press($, "up") }));
    }
  }
  if (showClawd) {
    parts.push(Text({ children: " ".repeat(Math.max(1, walk + 1)) }));
    parts.push(Text({ color: CLAWD_COLOR, children: clawdFace() }));
  }
  const row = Box({ flexDirection: "row", paddingX: 1, children: parts });
  if (!lit) {
    return row;
  }
  const hint = Text({
    dimColor: true,
    children: showVolButtons
      ? ` p pause · h l ${isSong ? "song" : "station"} · j k volume · esc back to the prompt`
      : ` p pause · h l ${isSong ? "song" : "station"} · esc back to the prompt`,
  });
  return Box({ flexDirection: "column", children: [row, hint] });
}