docs(specs): add fancy music-player UI spec + prototype (DRAFT)

A spec for the hi-fi look Craig picked from the prototype: the EMMS playlist buffer gains names instead of stream URLs, cover art, a serif now-playing hero with a progress bar, and a warm amber palette, degrading to plain text in a terminal frame.

I verified the cover-art path is reachable (radio-browser stations carry a favicon URL, retrievable at search time or by UUID) and framed the work as three layers: a name and text base that ships value on its own and doubles as the terminal fallback, cover-art fetch and cache, then the fancy GUI render. Five design decisions are open, each with a recommended call.

The three-direction prototype (minimal, fancy, modern) lands beside the spec as its companion.

2 files changed, 369 insertions, 0 deletions

diff --git a/docs/specs/2026-07-06-fancy-music-player-ui-spec.org b/docs/specs/2026-07-06-fancy-music-player-ui-spec.org
new file mode 100644
index 00000000..bf9d8466
--- /dev/null
+++ b/docs/specs/2026-07-06-fancy-music-player-ui-spec.org
@@ -0,0 +1,162 @@
+#+TITLE: Fancy music-player UI (hi-fi / vinyl) — Spec
+#+AUTHOR: Craig Jennings
+#+DATE: 2026-07-06
+#+TODO: TODO | DONE
+#+TODO: DRAFT READY DOING | IMPLEMENTED SUPERSEDED CANCELLED
+
+* DRAFT Fancy music-player UI
+:PROPERTIES:
+:ID:       af4f2688-ce7d-43f5-82e5-595a603e2593
+:END:
+- 2026-07-06 Mon @ 14:38:15 -0500 — drafted.
+
+* Metadata
+| Status   | draft                                                             |
+|----------+-------------------------------------------------------------------|
+| Owner    | Craig Jennings                                                    |
+|----------+-------------------------------------------------------------------|
+| Reviewer | Craig Jennings                                                    |
+|----------+-------------------------------------------------------------------|
+| Related  | [[file:2026-07-06-fancy-music-player-ui.prototype.html][prototype (fancy direction)]]; modules/music-config.el          |
+|----------+-------------------------------------------------------------------|
+
+* Summary
+
+Turn the EMMS playlist buffer from a raw-URL text list into a hi-fi "fancy" reading surface: station and track names instead of stream URLs, cover art, a now-playing hero with a serif title and a progress bar, and a warm amber palette, all still inside the Emacs buffer. It degrades cleanly to a plain text version in a terminal frame, where images can't render.
+
+* Problem / Context
+
+The music player is an EMMS playlist buffer with a custom multi-line header (Playlist / Current / Mode / Keys / Radio) drawn by cj/music--header-text as an overlay. The track list shows whatever EMMS stores as the track name, which for internet radio is the raw stream URL (https://ice6.somafm.com/groovesalad-256-mp3). It reads as a debug buffer, not a music player. Craig chose the "fancy" direction from the prototype: cover art, serif titles, a now-playing hero, warm amber.
+
+Two facts shape the design. First, Emacs renders images and variable-pitch faces in a GUI frame but not in a TTY, so the fancy look needs a text fallback. Second, cover art is reachable: radio-browser stations carry a favicon (logo) URL, retrievable at search time from the station plist or later via /json/stations/byuuid/<uuid> (verified live 2026-07-06); local files carry embedded album art. Stations with neither get a generated placeholder.
+
+* Goals and Non-Goals
+
+** Goals
+- Show human names, not URLs: station name for streams (from the .m3u #EXTINF or a radio-browser lookup), artist and title for local files.
+- A now-playing hero: cover art, a serif title, a subtitle (station/album), a progress bar, and a time or "on air" line.
+- A track list with small cover thumbnails, serif names, and right-aligned meta; the current row accented.
+- A warm amber palette, theme-owned (the dupre theme).
+- Degrade to a plain text version (names + a dim glyph + a thin bar) in a TTY or when the fancy view is off.
+
+** Non-Goals
+- No separate EMMS browser pane, library manager, or tag editor.
+- No mouse-first chrome, animated equalizers, or transport buttons you click (keys stay the interface).
+- No change to the radio lookup, playback engine, or keybindings (the n/t/m radio row and the transport keys are untouched).
+- No streaming-service integrations.
+
+** Scope tiers
+- v1: name resolution + the text base (TTY-safe), cover-art fetch + cache, and the fancy GUI render layered on top.
+- Out of scope: album/library browsing, playlists-of-playlists UI, per-track ratings.
+- vNext (log to todo.org): a scrubbable/seekable progress bar, homepage/link affordances in the hero, animated now-playing transitions, per-station color theming from the cover art.
+
+* Design
+
+At a caller's altitude: Craig opens the music player as today (same keys). Instead of URLs he sees named rows with a small logo each; the top of the buffer is a now-playing panel with the current station's cover, its name in a serif face, and a progress bar. In a terminal frame or with the fancy view disabled, the same buffer shows the plain text version (names, a dim glyph, a thin bar) with no images.
+
+At the implementer's altitude, three layers, each shippable on its own:
+
+1. Name resolution (pure + text, TTY-safe). A function maps a track to its display name: for a url track, the #EXTINF label from its .m3u if present, else the station name resolved from radio-browser, else a tidied host; for a file track, artist and title from EMMS track info. The row renders name + a dim nerd-icon glyph (broadcast for streams, note for files) + right-aligned meta. The now-playing line under Current gets a thin faces-drawn bar plus a time / "on air" string. This is the plain text base and the fallback; it has no images.
+
+2. Cover art (image infra). cj/music-art--for-track returns a cached local image path for a track: a station favicon (from the station plist at creation time, or a byuuid lookup for an existing .m3u carrying #RADIOBROWSERUUID), embedded album art for a file, or a generated vinyl placeholder when neither exists. Fetches are asynchronous and written to an on-disk cache keyed by station UUID or file, so a redisplay never blocks on the network and art survives restarts.
+
+3. Fancy render (GUI). When the frame is graphical and the fancy view is on, cj/music--header-text and the row renderer insert the cover images (create-image / insert-image), remap the title to a serif variable-pitch face, and paint the amber palette and the segmented progress bar. A small timer advances the bar during playback. When the frame is a TTY or the fancy view is off, the render falls through to layer 1's text.
+
+Pure pieces (name resolution, the m3u-label extraction, the bar-fill computation, the placeholder-vs-art decision) carry the tests; the image insertion, the fetch, and the timer are exercised live.
+
+* Alternatives Considered
+
+** Layer the fancy view on top of a text base (chosen)
+- Good, because the text base ships value immediately (names beat URLs for everyone), is the honest TTY fallback, and de-risks the image work.
+- Bad, because two render paths to keep in sync.
+- Neutral, because EMMS already separates track-name from display.
+
+** Fancy-only, no text fallback
+- Good, because one render path.
+- Bad, because it breaks in a TTY and forces the image/art work before any value lands.
+
+** A separate dedicated buffer/major-mode instead of the EMMS playlist overlay
+- Good, because full control of layout.
+- Bad, because it abandons EMMS's playlist machinery (marking, reorder, the existing keymap) and doubles maintenance.
+- Neutral, deferred: the overlay approach reuses everything and is enough for v1.
+
+* Decisions [/]
+
+** TODO Cover art for streams — where the favicon comes from
+- Owner / by-when: Craig / before Phase 2
+- Context: a radio-browser search result carries a favicon URL, so a newly-created station can capture it. An existing .m3u only has the stream URL and (on 15 of 73) a #RADIOBROWSERUUID; the other 58 have no UUID. A byuuid lookup gets the favicon for the ones that have a UUID.
+- Decision: We will (a) write a #RADIOBROWSERFAVICON line into new stations at creation so they need no lookup, (b) for an existing station carrying #RADIOBROWSERUUID, fetch the favicon by UUID once and cache it, and (c) for a station with neither, use the generated vinyl placeholder.
+- Consequences: easier — most stations get real art with at most one lookup; harder — a small .m3u format addition (an extra comment line) and a byuuid path for legacy files.
+
+** TODO Image cache location and refresh
+- Owner / by-when: Craig / before Phase 2
+- Context: fetched favicons and extracted album art need to persist so redisplay is instant and offline-safe.
+- Decision: We will cache under data/music-art/ (gitignored runtime state), keyed by station UUID or a file hash, fetched once and reused; a manual command clears the cache, and there is no automatic TTL.
+- Consequences: easier — instant, offline, no invalidation logic; harder — a stale logo persists until the user clears the cache (acceptable for logos).
+
+** TODO Serif title face
+- Owner / by-when: Craig / before Phase 3
+- Context: the fancy titles want a serif variable-pitch face, theme-owned.
+- Decision: We will add a defcustom for the title family (default a widely-available serif, e.g. the same reading serif the nov reading view uses) and a theme-owned face the dupre theme colors.
+- Consequences: easier — one knob, consistent with the nov-reading typography choice; harder — another face to register in theme-studio if we want it tunable there (deferred).
+
+** TODO Progress bar rendering and cadence
+- Owner / by-when: Craig / before Phase 3
+- Context: the bar can be drawn with block-character faces or a small SVG; it advances during playback via a timer.
+- Decision: We will draw the bar with faces (block characters, accent-colored fill) rather than SVG for v1, and redraw on a ~1s timer only while a track is playing, only when the player buffer is visible.
+- Consequences: easier — no SVG dependency, works the moment faces do; harder — a character-cell bar is coarser than an SVG one (fine for v1; SVG is a vNext upgrade).
+
+** TODO Fancy view toggle and TTY fallback
+- Owner / by-when: Craig / before Phase 3
+- Context: images need a GUI frame; a TTY (or a user who wants plain) needs the text version.
+- Decision: We will gate the fancy render on (display-graphic-p) AND a defcustom (default on), falling through to the layer-1 text render otherwise, decided per-redisplay so a frame on a TTY and a frame on a GUI can differ live.
+- Consequences: easier — never broken in a TTY, user can opt out; harder — both render paths stay maintained (already a chosen tradeoff).
+
+* Implementation phases
+
+** Phase 1 — Name resolution + text base (TTY-safe, no images)
+Map a track to a display name (url -> #EXTINF label / radio-browser name / tidy host; file -> artist and title), render rows as name + dim glyph + right-aligned meta, and add the thin now-playing bar + time/on-air line and the header spacing + rule. Unit-test the pure name/label/bar-fill helpers. Ships the "names not URLs" win on its own and is the fallback for later phases.
+
+** Phase 2 — Cover art fetch + cache (image infra)
+cj/music-art--for-track returning a cached local image path: favicon capture at station creation (a #RADIOBROWSERFAVICON line), byuuid favicon fetch for legacy UUID stations, embedded album art for files, and a generated vinyl placeholder. Async fetch into data/music-art/. Unit-test the art-vs-placeholder decision and the cache-key logic; the fetch is a smoke test.
+
+** Phase 3 — Fancy GUI render
+The now-playing hero (cover image + serif title + subtitle + segmented bar) and the thumbnailed serif list with the amber palette, gated on (display-graphic-p) + the toggle, degrading to Phase 1's text. The ~1s playback timer. Live verification (images, faces, the bar advancing) since it can't run headless.
+
+* Acceptance criteria
+- [ ] A radio row shows the station name, not the stream URL; a local track shows artist and title.
+- [ ] Each row shows a dim glyph (broadcast for streams, note for files) and right-aligned meta.
+- [ ] In a GUI frame with the fancy view on, the now-playing hero shows the current station's cover art, a serif title, and a progress bar that advances during playback.
+- [ ] A station with no favicon or embedded art shows the generated vinyl placeholder, not a broken image.
+- [ ] In a TTY frame, or with the fancy view off, the same buffer renders the text version (names + glyph + thin bar) with no images and no errors.
+- [ ] Art is fetched once and cached under data/music-art/; a second open is instant and works offline.
+- [ ] The name/label, bar-fill, and art-decision helpers have Normal/Boundary/Error tests.
+
+* Readiness dimensions
+- Data model & ownership: display names are derived (never stored); .m3u files gain an optional #RADIOBROWSERFAVICON comment (Craig-owned, written at creation); cached art under data/music-art/ is generated and disposable.
+- Errors, empty states & failure: a fetch failure or missing art yields the placeholder, never a broken image; a TTY yields text; an empty playlist yields the header with no rows.
+- Security & privacy: fetching a station's favicon URL hits a third-party host the user chose; fetch with a timeout and cache locally; no credentials; nothing sensitive logged.
+- Observability: the player messages when it can't fetch art (once, quietly); a clear-art-cache command exists.
+- Performance & scale: art fetch is async and cached, never blocking redisplay; the bar timer runs ~1s only while playing and only when the buffer is visible; the list is small (a playlist), so per-row images are cheap.
+- Reuse & lost opportunities: reuses the EMMS playlist buffer + keymap, the existing header overlay (cj/music--header-text / update-header), cj/music--track-description, nerd-icons (already used by dashboard/dirvish), the dupre theme, and the nov-reading serif choice. Images via built-in create-image/insert-image. Nothing new is invented that Emacs already provides.
+- Architecture fit & weak points: layers on music-config.el's existing header/render path; the seam is the header overlay + a per-row renderer. Weak point: keeping the text and fancy render paths in sync — mitigated by making the text render the base and the fancy render an image/face overlay on the same rows.
+- Config surface: cj/music-fancy-ui (default on), the serif title face + family, the amber palette (theme-owned), the art cache dir, the bar redraw interval. All with defaults and doc.
+- Documentation plan: a note in the module commentary and the keybinding/header list; no separate doc.
+- Dev tooling: existing make test / test-file; no new tooling.
+- Rollout, compatibility & rollback: additive; cj/music-fancy-ui off restores the plain text render; the #RADIOBROWSERFAVICON line is an ignorable comment in older readers; deleting data/music-art/ is a safe reset.
+- External APIs & deps: radio-browser favicon field and /json/stations/byuuid/<uuid> VERIFIED live 2026-07-06. Local album-art extraction depends on an image being embedded (or a folder cover.jpg) — the fallback is the placeholder.
+
+* Risks, Rabbit Holes, and Drawbacks
+- Local album-art extraction is the likeliest rabbit hole (embedded art via a tag reader vs a sibling cover.jpg). v1 can start with sibling-cover-file + placeholder and defer embedded-tag extraction if it balloons.
+- Image sizing across frame DPIs: pick a fixed pixel size for the hero and thumbnails, scaled by the frame, and don't chase per-monitor perfection.
+- Two render paths drifting: the text base must stay the source of truth for row content; the fancy path only adds images/faces, never different text.
+
+* References / Appendix
+- Prototype (open in a browser): [[file:2026-07-06-fancy-music-player-ui.prototype.html][2026-07-06-fancy-music-player-ui.prototype.html]] — three directions (minimal / fancy / modern); this spec builds the fancy one, with minimal as the text fallback.
+- radio-browser favicon + byuuid verified live 2026-07-06 against de1.api.radio-browser.info.
+
+* Review and iteration history
+** 2026-07-06 Mon @ 14:38:15 -0500 — Claude (for Craig) — author
+- What: initial draft, after Craig picked the fancy direction from the three-way prototype.
+- Why: the player shows raw stream URLs and reads as a debug buffer; the fancy look needs cover art, serif titles, and a now-playing hero, which is real infrastructure (image fetch/cache, GUI-vs-TTY) worth a spec.
+- Artifacts: the fancy prototype; radio-browser favicon/byuuid verified live.
diff --git a/docs/specs/2026-07-06-fancy-music-player-ui.prototype.html b/docs/specs/2026-07-06-fancy-music-player-ui.prototype.html
new file mode 100644
index 00000000..8b7ddd21
--- /dev/null
+++ b/docs/specs/2026-07-06-fancy-music-player-ui.prototype.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Music player UI — three directions</title>
+<style>
+  :root {
+    --page-bg: #f3f0ea; --page-fg: #29261f; --page-dim: #6b6459; --card-line: #ded8cc; --accent: #9a6b2f;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root { --page-bg: #131210; --page-fg: #d6cfc0; --page-dim: #8a8272; --card-line: #2b271f; --accent: #d8a24f; }
+  }
+  :root[data-theme="light"] { --page-bg: #f3f0ea; --page-fg: #29261f; --page-dim: #6b6459; --card-line: #ded8cc; --accent: #9a6b2f; }
+  :root[data-theme="dark"] { --page-bg: #131210; --page-fg: #d6cfc0; --page-dim: #8a8272; --card-line: #2b271f; --accent: #d8a24f; }
+
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--page-bg); color: var(--page-fg);
+    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.55;
+    padding: 3rem 1.25rem 5rem; }
+  .wrap { max-width: 64rem; margin: 0 auto; }
+  .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--accent); font-weight: 600; margin: 0 0 .5rem; }
+  h1 { font-size: 1.85rem; margin: 0 0 .6rem; text-wrap: balance; font-weight: 650; }
+  header p { margin: .3rem 0; max-width: 64ch; color: var(--page-dim); }
+  header p strong { color: var(--page-fg); font-weight: 600; }
+
+  .dir { margin: 2.6rem 0 0; }
+  .dir > .head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem; }
+  .dir .n { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; }
+  .dir h2 { font-size: 1.15rem; margin: 0; font-weight: 640; }
+  .dir .sub { color: var(--page-dim); font-size: .92rem; }
+  .feas { margin: .55rem 0 0; font-size: .86rem; color: var(--page-dim); }
+  .feas b { color: var(--page-fg); font-weight: 600; }
+  .cost { display: inline-block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
+    border: 1px solid var(--card-line); border-radius: 999px; padding: .06rem .55rem; margin-right: .4rem; color: var(--page-dim); }
+
+  /* shared editor frame */
+  .frame { border-radius: 9px; overflow: hidden; box-shadow: 0 16px 40px -22px rgba(0,0,0,.65); border: 1px solid #0000; }
+  .mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
+
+  /* ---------- CURRENT (reference) ---------- */
+  .cur-ref { background: #15140f; color: #b9b1a1; border-color: #322d25; font-size: 12.5px; }
+  .cur-ref .buf { padding: .6rem 0; }
+  .cur-ref .r { white-space: pre; padding: .05rem 1rem; }
+  .cur-ref .lbl { color: #8a8170; }
+  .cur-ref .play { color: #e6c98a; font-weight: 700; }
+
+  /* ---------- 1 · MINIMAL ---------- */
+  .min { background: #15140f; color: #cfc8b8; border-color: #322d25; font-size: 13px; }
+  .min .buf { padding: .7rem 0 .8rem; }
+  .min .r { white-space: pre; padding: .07rem 1.1rem; }
+  .min .lbl { color: #9a917f; }
+  .min .dim { color: #6f685b; }
+  .min .on { color: #e6c98a; } .min .off { color: #4a453b; }
+  .min .keys { color: #6f685b; } .min .keys .k { color: #9a917f; }
+  .min .rule { color: #4a453b; padding: .12rem 1.1rem .28rem; white-space: pre; }
+  .min .bar-full { color: #8faf7f; } .min .bar-empty { color: #43403a; } .min .time { color: #6f685b; }
+  .min .track { display: grid; grid-template-columns: 1.4ch 1fr auto; gap: .7ch; align-items: baseline; padding: .13rem 1.1rem; }
+  .min .g-radio { color: #8fb0c4; } .min .g-note { color: #a7b58f; }
+  .min .track .name { color: #cfc8b8; } .min .track .meta { color: #6f685b; white-space: pre; }
+  .min .track.cur { background: #262119; } .min .track.cur .name { color: #e6c98a; font-weight: 700; }
+
+  /* ---------- 2 · FANCY (hi-fi / vinyl) ---------- */
+  .fan { background: radial-gradient(120% 90% at 12% 0%, #241a10 0%, #17110a 55%, #120d07 100%); color: #e8d9bd; border-color: #3c2c17; }
+  .fan .top { display: flex; gap: 1rem; padding: 1.1rem 1.2rem 1rem; align-items: center; border-bottom: 1px solid #3a2b18; }
+  .fan .cover { width: 78px; height: 78px; border-radius: 6px; flex: none; position: relative;
+    background: radial-gradient(circle at 50% 50%, #3a2c18 0 22%, #1a130b 23% 26%, #2a2012 27% 46%, #17110a 47% 50%, #2a2012 51%);
+    box-shadow: inset 0 0 0 1px #4a3820, 0 6px 16px -8px #000; }
+  .fan .cover::after { content: ""; position: absolute; inset: 45% 45% auto auto; width: 8px; height: 8px; border-radius: 50%;
+    background: #e6c98a; box-shadow: 0 0 0 3px #17110a; top: 46%; left: 46%; }
+  .fan .np-title { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 1.5rem; font-weight: 600; color: #f2e4c6; line-height: 1.15; }
+  .fan .np-sub { color: #b99a63; font-size: .9rem; margin-top: .15rem; letter-spacing: .02em; }
+  .fan .seg { display: flex; gap: 3px; margin-top: .7rem; }
+  .fan .seg i { height: 6px; flex: 1; border-radius: 2px; background: #3a2c18; }
+  .fan .seg i.on { background: linear-gradient(#f0cf8a, #d8a24f); }
+  .fan .tline { display: flex; justify-content: space-between; color: #a98c58; font-size: .74rem; margin-top: .3rem; font-variant-numeric: tabular-nums; }
+  .fan .list { padding: .55rem .4rem .7rem; }
+  .fan .t { display: grid; grid-template-columns: 30px 1fr auto; gap: .7rem; align-items: center; padding: .34rem .8rem; border-radius: 7px; }
+  .fan .t .th { width: 26px; height: 26px; border-radius: 4px; background: #241a10; box-shadow: inset 0 0 0 1px #4a3820; display: grid; place-items: center; color: #c79a54; font-size: 12px; }
+  .fan .t .nm { font-family: "Iowan Old Style", Georgia, serif; font-size: 1.02rem; color: #ecdcbc; }
+  .fan .t .mt { color: #9c8154; font-size: .8rem; font-variant-numeric: tabular-nums; }
+  .fan .t.cur { background: linear-gradient(90deg, #2a1f10, #201810); box-shadow: inset 2px 0 0 #e6c98a; }
+  .fan .t.cur .nm { color: #f7e7c4; }
+
+  /* ---------- 3 · MODERN (streaming card) ---------- */
+  .mod { background: #0e1013; color: #cdd3da; border-color: #1c2027; }
+  .mod .top { display: flex; gap: .95rem; padding: 1.05rem 1.1rem; align-items: center; }
+  .mod .cover { width: 66px; height: 66px; border-radius: 12px; flex: none;
+    background: linear-gradient(145deg, #2a6f5a, #1b3b6b); box-shadow: 0 8px 20px -10px #000; display: grid; place-items: center; color: #bfeede; font-size: 20px; }
+  .mod .np-title { font-size: 1.28rem; font-weight: 680; color: #f2f5f8; letter-spacing: -.01em; }
+  .mod .np-sub { color: #8b94a0; font-size: .88rem; margin-top: .1rem; }
+  .mod .prog { display: flex; align-items: center; gap: .6rem; padding: 0 1.1rem .2rem; }
+  .mod .track-bar { position: relative; height: 4px; border-radius: 4px; background: #232830; flex: 1; }
+  .mod .track-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; border-radius: 4px; background: #5fd0a8; }
+  .mod .track-bar > b { position: absolute; left: 42%; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: #eafaf3; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(95,208,168,.25); }
+  .mod .tm { color: #7f8894; font-size: .72rem; font-variant-numeric: tabular-nums; }
+  .mod .ctl { display: flex; gap: .5rem; padding: .55rem 1.1rem .1rem; }
+  .mod .ctl .pill { border: 1px solid #262c34; background: #171b21; border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; color: #aeb6c0; }
+  .mod .ctl .pill.main { background: #5fd0a8; color: #08130e; border-color: #5fd0a8; font-weight: 700; }
+  .mod .list { padding: .5rem .45rem .7rem; }
+  .mod .t { display: grid; grid-template-columns: 34px 1fr auto; gap: .7rem; align-items: center; padding: .4rem .7rem; border-radius: 10px; }
+  .mod .t .th { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: #dfe6ee; }
+  .mod .t .th.radio { background: linear-gradient(145deg, #2a6f5a, #1b3b6b); } .mod .t .th.note { background: linear-gradient(145deg, #3a3f4a, #23272e); }
+  .mod .t .nm { color: #dfe4ea; font-weight: 550; } .mod .t .mt { color: #7f8894; font-size: .8rem; font-variant-numeric: tabular-nums; }
+  .mod .t.cur { background: #151b22; } .mod .t.cur .nm { color: #eafaf3; }
+  .mod .t.cur .eq { color: #5fd0a8; }
+
+  .foot { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--card-line); color: var(--page-dim); font-size: .9rem; }
+  .foot b { color: var(--page-fg); }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <p class="eyebrow">EMMS playlist buffer · three directions</p>
+    <h1>Music player: pick a look</h1>
+    <p>Same playlist, three treatments. All are achievable inside an Emacs buffer, but they cost different amounts. Today it shows raw stream URLs (below); each direction fixes that and goes further. Mockups, not live renders.</p>
+    <div class="frame cur-ref mono" style="margin-top:1rem; max-width:34rem">
+      <div class="buf">
+        <div class="r"><span class="lbl">Current :</span> https://ice6.somafm.com/groovesalad-256-mp3</div>
+        <div class="r play">https://ice6.somafm.com/groovesalad-256-mp3</div>
+        <div class="r">https://ice1.somafm.com/groovesalad-256-mp3</div>
+        <div class="r">https://ice2.somafm.com/groovesalad-256-mp3</div>
+      </div>
+    </div>
+  </header>
+
+  <!-- 1 · MINIMAL -->
+  <section class="dir">
+    <div class="head"><span class="n">1</span><h2>Minimal</h2><span class="sub">refined terminal — names, one dim glyph, thin now-playing bar</span></div>
+    <div class="frame min mono">
+      <div class="buf">
+        <div class="r"><span class="lbl">Playlist</span> <span class="lbl">:</span> Evening mix <span class="dim">(5)</span></div>
+        <div class="r"><span class="lbl">Current </span> <span class="lbl">:</span> <span style="color:#8faf7f">▶ </span>Groove Salad <span class="dim">· SomaFM</span></div>
+        <div class="r"><span class="dim">          </span><span class="bar-full">━━━━━━━━━━━━</span><span class="bar-empty">────────────────</span>  <span class="time">live · 256k</span></div>
+        <div class="r keys"><span class="k">Keys    </span> <span class="k">:</span> a:add  c:clear  L:load  S:stop  &lt;&gt;:skip</div>
+        <div class="r keys"><span class="k">Radio   </span> <span class="k">:</span> n:by name  t:by tag  m:enter manually</div>
+        <div class="rule">        ────────────────────────────────────────</div>
+        <div class="track cur"><span class="g-radio">◉</span><span class="name">Groove Salad</span><span class="meta">SomaFM · 256k</span></div>
+        <div class="track"><span class="g-radio">◉</span><span class="name">Drone Zone</span><span class="meta">SomaFM · 256k</span></div>
+        <div class="track"><span class="g-note">♪</span><span class="name">Miles Davis — So What</span><span class="meta">9:22</span></div>
+        <div class="track"><span class="g-note">♪</span><span class="name">Bill Evans — Peace Piece</span><span class="meta">6:41</span></div>
+        <div class="track"><span class="g-radio">◉</span><span class="name">Jazz Radio Blues</span><span class="meta">FR · 128k</span></div>
+      </div>
+    </div>
+    <p class="feas"><span class="cost">low lift</span><b>Faces + text only.</b> Names come from the .m3u #EXTINF and local tags; the glyph is a nerd-icon; the bar is one timer-driven line. No images. Sits naturally in the buffer you already have.</p>
+  </section>
+
+  <!-- 2 · FANCY -->
+  <section class="dir">
+    <div class="head"><span class="n">2</span><h2>Fancy</h2><span class="sub">hi-fi / vinyl — cover art, serif titles, warm amber, a real now-playing hero</span></div>
+    <div class="frame fan">
+      <div class="top">
+        <div class="cover"></div>
+        <div>
+          <div class="np-title">Groove Salad</div>
+          <div class="np-sub">SOMA FM · AMBIENT / DOWNTEMPO · 256K</div>
+          <div class="seg"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
+          <div class="tline"><span>on air</span><span>live stream</span></div>
+        </div>
+      </div>
+      <div class="list">
+        <div class="t cur"><span class="th">◉</span><span class="nm">Groove Salad</span><span class="mt">SomaFM</span></div>
+        <div class="t"><span class="th">◉</span><span class="nm">Drone Zone</span><span class="mt">SomaFM</span></div>
+        <div class="t"><span class="th">♪</span><span class="nm">Miles Davis — So What</span><span class="mt">9:22</span></div>
+        <div class="t"><span class="th">♪</span><span class="nm">Bill Evans — Peace Piece</span><span class="mt">6:41</span></div>
+        <div class="t"><span class="th">◉</span><span class="nm">Jazz Radio Blues</span><span class="mt">FR</span></div>
+      </div>
+    </div>
+    <p class="feas"><span class="cost">medium lift</span><b>Cover art + variable-pitch serif.</b> Emacs shows images (station favicons, embedded album art) and a serif face for titles via `display` and face remaps. The vinyl cover and segmented bar are drawn with faces/SVG. Needs an art fetch-and-cache layer; the warmth is a theme overlay.</p>
+  </section>
+
+  <!-- 3 · MODERN -->
+  <section class="dir">
+    <div class="head"><span class="n">3</span><h2>Modern</h2><span class="sub">streaming-app card — rounded art, sans title, a slim seek bar with a handle, pill controls</span></div>
+    <div class="frame mod">
+      <div class="top">
+        <div class="cover">♪</div>
+        <div>
+          <div class="np-title">Groove Salad</div>
+          <div class="np-sub">SomaFM · ambient · 256 kbps</div>
+        </div>
+      </div>
+      <div class="prog"><span class="tm">LIVE</span><span class="track-bar"><i></i><b></b></span><span class="tm">∞</span></div>
+      <div class="ctl"><span class="pill">shuffle</span><span class="pill">⏮</span><span class="pill main">⏸ pause</span><span class="pill">⏭</span><span class="pill">repeat</span></div>
+      <div class="list">
+        <div class="t cur"><span class="th radio">◉</span><span class="nm">Groove Salad <span class="eq">▎▍▎</span></span><span class="mt">SomaFM</span></div>
+        <div class="t"><span class="th radio">◉</span><span class="nm">Drone Zone</span><span class="mt">SomaFM</span></div>
+        <div class="t"><span class="th note">♪</span><span class="nm">Miles Davis — So What</span><span class="mt">9:22</span></div>
+        <div class="t"><span class="th note">♪</span><span class="nm">Bill Evans — Peace Piece</span><span class="mt">6:41</span></div>
+        <div class="t"><span class="th radio">◉</span><span class="nm">Jazz Radio Blues</span><span class="mt">FR</span></div>
+      </div>
+    </div>
+    <p class="feas"><span class="cost">higher lift</span><b>Pushes hardest against the buffer model.</b> Rounded art, pill controls, the seek-bar dot handle, and rounded rows are easy in a browser but need SVG-rendered widgets or `svg-lib`-style images in Emacs, redrawn on playback. Doable in GUI Emacs, but it's the most code and the least "text buffer." A cool accent (mint) instead of the theme's amber to read contemporary.</p>
+  </section>
+
+  <div class="foot">
+    <p>My read: <b>Minimal</b> is the honest sweet spot for an Emacs player you live in, and it kills the primitive feeling on its own. <b>Fancy</b> is worth it if you want the now-playing moment to feel like hi-fi and you're happy to add cover art. <b>Modern</b> is the most striking but fights Emacs the most, so it's the biggest build for a look that a browser does more naturally. All three keep the n/t/m radio row and the same keys.</p>
+    <p style="margin:.7rem 0 0">Left out of every direction to stay tasteful: animated equalizers everywhere, a separate browser pane, mouse-first chrome. Glyphs shown here (◉ ♪) stand in for nerd-icons.</p>
+  </div>
+</div>
+<script>
+  (function () { var r = document.documentElement;
+    try { var t = localStorage.getItem('theme'); if (t === 'dark' || t === 'light') r.setAttribute('data-theme', t); } catch (e) {} })();
+</script>
+</body>
+</html>