chore: v0.5.0 — bump version + CHANGELOG entry

manifest.json 0.4.0 → 0.5.0. CHANGELOG.md entry documents three bundled UX improvements: - Light mode (Phase 1 auto-follow + Phase 2 manual toggle) - Options → Tuner back-link - Theme sync across all three surfaces Zero new permissions, zero new dependencies, zero behaviour change for existing users (theme defaults to auto = matches v0.4.0 in dark-OS browsers, which is most installs). Bundled because v0.4.0 was still in re-review during the work + ship discipline calls for fewer larger updates over rapid-fire micro- updates. Same-account re-review window per Web Store rules.
Merge v0.5.0-prep — light mode + back-link + theme toggle
2026-06-10 00:22:16 +01:00 · 2026-06-10 00:21:11 +01:00 · 2026-06-10 00:13:07 +01:00 · 2026-06-09 23:54:09 +01:00 · 2026-06-09 23:51:11 +01:00 · 2026-06-09 23:42:42 +01:00
32 changed files with 3331 additions and 44 deletions
@@ -7,3 +7,9 @@ dist/
 # so it lives outside git and gets backed up separately.
 *.crx
 *.pem
+
+# Internal submission notes — paste copy for the Chrome Web Store
+# Dashboard. Lives locally so we can quick-reference it during
+# updates, but not for the public repo (random visitors don't need
+# to see internal listing copy or reviewer-targeted justifications).
+WEB_STORE_SUBMISSION.md
@@ -7,10 +7,253 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi

 ## [Unreleased]

-### Planned — New Tab Page override (Tier 2.5)
- Replace Chrome's default New Tab Page with a RangerHQ-branded version that surfaces the player, current track, and a quick-station picker.
- Adds `chrome_url_overrides.newtab` to `manifest.json` pointing at `src/newtab/newtab.html`.
- Reuses the popup's CSS palette + source-adapter pattern — no new architectural concepts.
+### Planned — Future polish
+- `.m3u` parser alongside `.pls` to widen future-adapter compatibility
+- Station artwork lazy-load + fallback to family helmet
+- Better error UI for failed streams ("Stream unavailable, try another")
+- `.crx` packaging instructions in README for sideload users
+- Second source adapter stub to exercise the multi-source UI
+
+---
+
+## [0.5.0] — 2026-06-10 — Light mode + theme toggle + Options back-link
+
+Second post-launch update, ~36 hours after v0.4.0 cleared the Chrome Web Store. Three bundled improvements, all UX polish:
+
+### Added — Light mode support across all three surfaces
+
+**Phase 1 — Auto-follow OS theme.** Each stylesheet (popup, NewTab, Options) gets a `@media (prefers-color-scheme: light)` block that flips the `:root` CSS variables to a light palette while preserving brand identity. Every existing rule using `var(--*)` tokens carries over unchanged.
+
+Light palette:
+- `--bg` `#f6f4ed` cream-leaning off-white
+- `--bg-soft` `#ece5d2` slightly darker for header bars
+- `--bg-row` `#ddd6c0` hover backgrounds
+- `--bg-row-hi` `#c8c0a8` active rows
+- `--fg` `#2a2f28` dark forest-green-leaning text
+- `--accent` `#2a7d3e` darker brand green (preserves "RangerHQ green" identity)
+- `--cream` `#b8861a` darker amber (readable on light)
+- `--danger` `#b53a2b` darker red (readable on light)
+
+NewTab helmet watermark opacity bumped 0.025 → 0.04 in light mode (helmet contrasts differently on light bg). Wired via a new `--watermark-opacity` CSS variable.
+
+State pills, primary play button, toasts, and danger button hover all get text-colour overrides for both modes so they stay readable when their background becomes solid accent / cream / danger.
+
+### Added — Manual Auto / Dark / Light theme toggle (Phase 2)
+
+**Three-radio group in a new "Appearance" card on the Options page.** Stored in `chrome.storage.local` under `tuner.theme`. Defaults to "auto" (follow OS).
+
+- **Auto** — follows OS via `@media (prefers-color-scheme: light)` (covers ~95% of users)
+- **Dark** — forces dark palette regardless of OS
+- **Light** — forces light palette regardless of OS
+
+This exists because there are three independent theme layers (OS, browser-chrome, page CSS) that can disagree. `@media (prefers-color-scheme: ...)` reads the OS layer only, NOT the browser-chrome theme. So users with mismatched layers (e.g. macOS light + Chrome dark theme installed) can override the auto-follow.
+
+Implementation: `data-theme` attribute on `<html>` ( "light" / "dark" / removed for auto). `html[data-theme="..."]` CSS selectors beat both the default `:root` and the `@media :root` on specificity.
+
+New file: `src/lib/theme.js` — shared `getTheme/setTheme/applyTheme/initTheme` helpers used by all three entry-point scripts.
+
+The choice syncs across surfaces via `chrome.storage.onChanged`: pick Light in Options → popup + NewTab flip instantly without reload. Theme applies BEFORE first paint (each init() calls `initTheme()` first) so there's no dark flash on light-mode-preferring browsers.
+
+### Added — Options page → Tuner back-link
+
+The Options page header (helmet + "RangerHQ Tuner — Options") is now a single clickable anchor pointing at `newtab.html`. Subtle `←` glyph to the left of the helmet; hover shifts the arrow left and tints it accent green. Same-tab navigation — user came IN via Options, goes OUT into the player UI in the same tab. No accumulating Tuner tabs.
+
+Fixes UX gap David flagged on 2026-06-09 night: *"when i click the settings button i go to settings but we have no back link to radio."*
+
+### Files touched
+
+- `src/lib/theme.js` (NEW, ~55 lines)
+- `src/popup/popup.css` (+50 lines — light + dark override blocks)
+- `src/popup/popup.js` (+8 lines — initTheme call + storage.onChanged hook)
+- `src/newtab/newtab.css` (+50 lines — light + dark override blocks)
+- `src/newtab/newtab.js` (+8 lines — same wiring)
+- `src/options/options.html` (+24 lines — Appearance card)
+- `src/options/options.css` (+90 lines — light + dark blocks + radio styling)
+- `src/options/options.js` (+32 lines — radio handlers + cross-surface sync)
+
+Total: 8 files, ~340 lines added.
+
+### Not changed
+
+- No new permissions
+- No new host_permissions
+- No new external libraries
+- No data migration required
+- Existing user state (current station / volume / history / favourites) survives intact
+
+### Reviewer expectations
+
+Same-account update with no permission change. Same-day review expected (~hours to 24h), similar to v0.4.0's 24h-ish re-review window per [[reference_chrome_web_store_rules]].
+
+---
+
+## [0.4.0] — 2026-06-09 — First-run UX hint
+
+First post-launch update, shipped the same day v0.3.0 went LIVE on the Chrome Web Store. Pure UX polish — zero new permissions, zero new code dependencies, zero behaviour change for existing users.
+
+### Added — Discoverable "pick a station to begin" affordance
+
+Triggered by David's own 30-second panic on first Web Store install (uninstalled the dev build, installed from the Web Store fresh, hit Play, got nothing, then realised "ah, I need to pick a station first"). The product worked correctly — the dev build had a seeded station from hours of testing, the fresh install does not — but the 30-second panic exposed a real first-run-UX gap.
+
+**Two layered cues, both pure CSS driven by a `body.is-first-run` class:**
+
+1. **Subtle accent-green glow pulses** around the station list (popup) and the Quick Stations chip row (NewTab). Uses a 2.4-second `box-shadow` keyframe at low alpha (0.18-0.25) — visible but not noisy.
+2. **Bouncing ↓ arrow** appended to the "Pick a station to begin" text in both surfaces. Uses an `::after` pseudo-element with a 1.8-second `translateY` keyframe.
+
+The `is-first-run` class is toggled by a tiny `reflectFirstRunHint()` function called from:
+- `init()` once stations + `currentStation` are resolved
+- `onPickStation()` the moment a user picks
+- the `chrome.storage.onChanged` listener when another surface picks (so the hint disappears on both surfaces simultaneously via cross-surface sync)
+
+Existing users with a stored `tuner.currentStationId` never see either cue — the class only attaches when `currentStation` is null.
+
+### Files touched
+
+- `src/popup/popup.css` (+35 lines — keyframes + `.is-first-run` rules)
+- `src/popup/popup.js` (+11 lines — `reflectFirstRunHint()` + 3 call sites)
+- `src/newtab/newtab.css` (+36 lines — same idea, NewTab-namespaced)
+- `src/newtab/newtab.js` (+10 lines — same pattern)
+
+Total: 4 files, +92 lines, 0 deletions.
+
+### Not changed
+
+- No new permissions
+- No new host_permissions
+- No new external libraries
+- No change to `manifest.json` beyond the version bump and CHANGELOG-referenced URL
+- No data migration required (no storage shape change)
+
+### Same-day context
+
+This update ships the same day:
+- v0.3.0 went LIVE on the Chrome Web Store (~17:08 Dublin, ~15.5h after submission)
+- RangerHQ Radio v1.0.0 stability milestone went LIVE on WordPress.org (~21:51 Dublin)
+- David received a PhD-prep signal from his Research in Computing lecturer at NCI Dublin
+
+A solid day.
+
+---
+
+## [0.3.0] — 2026-06-08
+
+### Added — Track history + 4-button search + Options page (Web Store target)
+
+This is the version that goes to the Chrome Web Store. Mirrors the rangerhq-radio WordPress plugin's history feature so the family stays coherent across surfaces.
+
+#### Track history
+- **`src/lib/history.js`** — helpers for history/favourites/search-URL/dedup/cap/clear, mirroring `inc/history.php` in the WP plugin.
+- **Storage:** `tuner.history` (FIFO, capped at 500 by default) and `tuner.favourites` (uncapped) in `chrome.storage.local`. Cap configurable 50–500 on the Options page.
+- **Entry shape** (mirror WP plugin exactly): `{ artist, title, station, stationId, at }` where `at = Date.now()`.
+- **Dedup against the LAST entry only** so consecutive identical now-playing reads don't pile up.
+- **Skip `(unknown)` artist** — SomaFM's dead-air/promo placeholder doesn't pollute the log.
+
+#### Metadata polling
+- **`src/offscreen/offscreen.js`** — the offscreen document (where audio lives) now polls SomaFM's per-channel song endpoint every 25 s while playing. On `PLAY`, polling starts (immediate first fetch + interval). On `PAUSE` or `ERROR`, polling stops. Within-session dedup prevents redundant logs when the same song stays current across polls.
+- **Why the offscreen doc, not the SW:** the SW gets killed when idle; the offscreen doc is alive while audio plays. This is the right home for the loop.
+- New message types in `src/lib/messages.js`: `TRACK_LOGGED`, `FAVOURITE_TOGGLED`, `STORAGE_WIPED`.
+
+#### 4-button search (the headline feature)
+- Every track row in History and Favourites gets four search-link buttons that open the major services' public search pages in a new tab:
+
+  | Service | URL pattern |
+  |---|---|
+  | Spotify | `https://open.spotify.com/search/{enc}` |
+  | YouTube | `https://www.youtube.com/results?search_query={enc}` |
+  | Apple Music | `https://music.apple.com/search?term={enc}` |
+  | Bandcamp | `https://bandcamp.com/search?q={enc}` |
+
+  Where `enc = encodeURIComponent(artist + " " + title)`. **Zero auth, zero API keys, zero quota, zero ToS gray area.** RangerHQ Tuner doesn't play these services — it opens the search results page and the user picks. Same approach as the rangerhq-radio WP plugin.
+
+- Each link is brand-coloured (muted on the dark palette) — Spotify green, YouTube red, Apple pink, Bandcamp cyan. `target="_blank"` + `rel="noopener noreferrer"`.
+
+#### Tabbed New Tab Page
+- The New Tab Page's bottom section is now a **3-tab control**: **Stations · History · Favourites**, plus a ⚙ icon that opens the Options page.
+- History tab: newest first, with track title, artist (accent green), `station · 2m ago` meta line, star toggle, and the 4 search links.
+- Favourites tab: same shape, all your starred tracks.
+- Each tab has its own "Clear …" button in the toolbar (confirm dialog).
+
+#### Options page (NEW)
+- Registered via `"options_page": "src/options/options.html"` in the manifest. Opens via `chrome://extensions` → details → Extension options OR via the ⚙ on the New Tab Page.
+- **Local data card:** live stats (History size, Favourites size, Stations cached, Total `tuner.*` bytes), history-cap slider (50–500 step 50), and three buttons:
+  - `Clear history` — drops `tuner.history` only.
+  - `Clear favourites` — drops `tuner.favourites` only.
+  - `Clear EVERYTHING` (danger styling) — wipes every `tuner.*` key in `chrome.storage.local`.
+- **Playback card:** current volume %, last-played station name (read-only).
+- **About card:** version, Gitea repo link, davidtkeane.com link, SomaFM link, licence reminder.
+- A small toast message confirms each destructive action.
+- The page listens for `chrome.storage.onChanged` so stats stay live if you wipe from somewhere else.
+
+#### Manifest
+
+- Version: `0.2.0` → `0.3.0`.
+- Description updated to mention the 4-button search affordance (helps Web Store reviewers see the single-purpose statement matches the listing).
+- Added `"options_page": "src/options/options.html"`.
+- **No new permissions, no new host permissions.** Still `["offscreen", "storage"]` + `somafm.com` only. Search-link clicks open in a new browser tab — that's the user's navigation, not an API call from the extension.
+
+#### Cross-surface state sync
+
+The popup and the New Tab Page now stay in lockstep without manual reloads. Both surfaces subscribe to `chrome.storage.onChanged` and re-render when:
+
+- `tuner.currentStationId` changes (someone in the other surface picked a station)
+- `tuner.isPlaying` changes (play/pause from anywhere)
+- `tuner.history` or `tuner.favourites` mutates (re-render the relevant tab)
+
+Single source of truth = `chrome.storage.local`. No more drift between popup and New Tab.
+
+#### Storage gateway architecture (MV3 safety net)
+
+Offscreen documents don't reliably have access to `chrome.storage` across Chrome versions, so all storage writes from the offscreen audio host are routed through the service worker via a new `LOG_TRACK_REQUEST` message type. The SW (which always has `chrome.storage`) does the actual `tuner.history` write and broadcasts `TRACK_LOGGED` back to the UI surfaces.
+
+As belt-and-braces, every function in `src/lib/history.js` now checks for `chrome.storage` availability before using it and returns sensible defaults if absent — so the module is safe to import from any extension context.
+
+#### Metadata latency fix (parallelised audio + polling)
+
+When PLAY arrives at the offscreen doc, metadata polling now starts **immediately** in parallel with the audio HTTP buffer fill, rather than waiting for `audio.play()` to resolve. First-track display time drops from ~10-15 seconds (audio buffer + then poll) to ~1-2 seconds (poll racing in parallel with buffer fill).
+
+#### Popup quick-link nav
+
+The toolbar popup now has a three-button nav row above the footer:
+
+- **⎘ Open in tab** — `chrome.tabs.create({url: chrome.runtime.getURL('src/newtab/newtab.html')})` opens the full Tuner UI as a regular pinnable tab.
+- **♪ History** — same as Open in tab but with `#history` hash so the History pane is pre-selected. `newtab.js` reads `location.hash` on init and respects it.
+- **⚙ Settings** — `chrome.runtime.openOptionsPage()` opens the Options page directly.
+
+No new permissions: `chrome.tabs.create()` works on our own extension URLs without the `tabs` permission. The Web Store permission profile stays `["offscreen", "storage"]` + `somafm.com` host only.
+
+#### Why this is the Web Store version
+
+- Clear single-purpose statement now obvious: *"Plays SomaFM internet radio, logs heard tracks, and provides search-link shortcuts to Spotify/YouTube/Apple Music/Bandcamp."*
+- Privacy story stays clean: "collects nothing, stores everything locally, no remote storage" — every Options-page checkbox stays "does not collect" on the Dashboard.
+- The four service buttons are pure `<a href>` link-outs — Web Store reviewers can verify they don't embed third-party SDKs.
+- All inline styles are gone (lessons from `rangerhq-buddy v0.1.5`).
+- Accessibility: every button has an `aria-label`, every interactive element is reachable by keyboard, focus rings visible, contrast ≥ 4.5:1.
+- Storage operations are SW-gated, so even Chrome versions with the offscreen-doc storage quirk run cleanly.
+
+---
+
+## [0.2.0] — 2026-06-08
+
+### Added — New Tab Page override (Tier 2.5)
+
+Replace Chrome's default New Tab Page with a RangerHQ-branded landing that surfaces the player, current track, a quick-station chip row, and a searchable browse list. Same `chrome.offscreen` audio pipeline as the popup — the New Tab Page is just a second view onto the same playback state. Live ticking clock (HH:MM in bold + small dim seconds) updates every second; date renders in the user's locale.
+
+Note: v0.2.0 was a working local build but was never tagged on Gitea — its features ship to the world together with v0.3.0 in a single commit.
+
+- **`manifest.json`**: added
+  ```json
+  "chrome_url_overrides": { "newtab": "src/newtab/newtab.html" }
+  ```
+  Description string updated to mention the optional New Tab Page replacement (Web Store reviewers prefer overrides to be disclosed in the description).
+- **`src/newtab/newtab.html`** — full-viewport landing with header (helmet + clock), large now-playing block, generous Play/Volume controls, quick-station chips, searchable browse list, footer linking to `davidtkeane.com` + Gitea.
+- **`src/newtab/newtab.css`** — same earthy palette as the popup but laid out for a full screen. Subtle helmet watermark (2.5% opacity) in the background. Responsive shrink-to-fit at `max-height: 700px`.
+- **`src/newtab/newtab.js`** — reuses `src/lib/messages.js`, `src/sources/index.js`, and the same `chrome.storage.local` keys as the popup. State stays consistent: pick a station in the popup, refresh new tab → same station selected, same play state. Adds a clock that updates every 30 s.
+
+**Quick-pick stations:** the chip row surfaces the 8 most-loved SomaFM channels (Groove Salad, Drone Zone, Indie Pop Rocks!, Secret Agent, Space Station Soma, Lush, Deep Space One, Fluid). One click → playing.
+
+**Why this feature exists:** validates [[user_browser_resident_tools]] — David has the browser open all day, every new tab is a touchpoint. Every `Cmd+T` now opens a RangerHQ-branded landing that's one click from playing radio. The Web Store reviewer is also more likely to grant a clear single-purpose override than a vague one — having a useful New Tab Page is good signal alongside the toolbar player.
+
+**Permissions unchanged:** no new permissions or hosts added. The override is a pure UI choice; no expanded API surface.

 ---

@@ -0,0 +1,338 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
+ <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Lesser General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                    GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+                            NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License along
+    with this program; if not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) year name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  <signature of Moe Ghoul>, 1 April 1989
+  Moe Ghoul, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.
@@ -0,0 +1,121 @@
+# Privacy Policy — RangerHQ Tuner
+
+**Effective date:** 2026-06-09
+**Maintainer:** David Keane — <david@davidtkeane.com>
+**Extension homepage:** https://davidtkeane.com/rangerhq-tuner
+**Source code:** https://git.davidtkeane.com/ranger/rangerhq-tuner
+
+---
+
+## TL;DR
+
+**RangerHQ Tuner collects no personal data. Nothing leaves your device.**
+
+The extension stores a small amount of data in your browser's local storage on your own computer — your track history, your favourites, your last-played station, your volume preference, and a cached copy of the SomaFM station catalogue. That data never leaves your machine and is never sent to David Keane, RangerHQ, Anthropic, Google, or anyone else.
+
+---
+
+## Data we do not collect
+
+Using the Chrome Web Store's standard data category vocabulary, RangerHQ Tuner does **not** collect any of the following:
+
+| Category | Collected? |
+|---|---|
+| Personally identifiable information | ❌ No |
+| Health information | ❌ No |
+| Financial and payment information | ❌ No |
+| Authentication information | ❌ No |
+| Personal communications | ❌ No |
+| Location | ❌ No |
+| Web history | ❌ No |
+| User activity | ❌ No |
+| Website content | ❌ No |
+
+No account is required. No login. No telemetry. No analytics. No third-party tracking scripts. No advertising network code.
+
+---
+
+## Data stored locally on your device
+
+RangerHQ Tuner uses Chrome's `chrome.storage.local` API to persist a small amount of state across browser sessions. **All of this lives on your computer only.** It is never transmitted to any server. You can wipe it at any time from the extension's Options page.
+
+| Key | What it holds | Why |
+|---|---|---|
+| `tuner.stationsCache` | A cached copy of SomaFM's public channel list | So the popup opens instantly instead of fetching the catalogue every time |
+| `tuner.cachedAt` | Timestamp of the cache | To expire the cache after 6 hours |
+| `tuner.currentStationId` | ID of the station you last picked | So you can resume where you left off |
+| `tuner.volume` | Your last-set volume (0.0–1.0) | So volume persists across sessions |
+| `tuner.isPlaying` | Whether playback was active | UI state sync |
+| `tuner.history` | A capped log of artist + title pairs heard while playing | The History tab on the New Tab Page |
+| `tuner.favourites` | Track entries you have starred | The Favourites tab |
+| `tuner.historyCap` | Your chosen history-cap value (default 500) | Configurable on the Options page |
+
+The history and favourites entries contain: artist name, track title, station display name, station ID, and a local timestamp. **They are stored in your browser only.** They are never sent to the extension author or any third party.
+
+You can clear any of this data at any time:
+
+- **Options page** → "Clear history", "Clear favourites", or "Clear EVERYTHING" (wipes all `tuner.*` keys).
+- Or: Chrome → `chrome://extensions` → RangerHQ Tuner → Remove. Removing the extension wipes its local storage.
+
+---
+
+## Outbound network requests
+
+RangerHQ Tuner contacts only one external network — **SomaFM (somafm.com)** — and only for the following purposes:
+
+| Endpoint | Purpose | Frequency |
+|---|---|---|
+| `https://somafm.com/channels.json` | Fetch the public list of SomaFM stations | At most once every 6 hours |
+| `https://somafm.com/{...}.pls` | Resolve the streaming URL for the station you picked | Once per station change |
+| Direct stream URLs (e.g. `https://ice1.somafm.com/groovesalad-128-mp3`) | The actual audio stream | Continuous while playing |
+| `https://somafm.com/songs/{id}.json` | Read the public "now playing" track for the current station | Every 25 seconds while playing |
+
+These requests are made by your browser the same way it makes any other web request. SomaFM may log your IP address as part of routine HTTP serving — that is between you and SomaFM, the same as visiting their website. RangerHQ Tuner does not add tracking parameters, identifiers, or authentication tokens to these requests.
+
+SomaFM is a listener-supported independent radio network. Their content policies are theirs alone: <https://somafm.com>.
+
+---
+
+## "Search this track" link-outs
+
+The History and Favourites tabs offer four buttons next to each track: **Spotify**, **YouTube**, **Apple Music**, **Bandcamp**. Each is a plain HTML link (`<a href>` with `target="_blank" rel="noopener noreferrer"`) that opens the corresponding service's public search results page in a new browser tab.
+
+RangerHQ Tuner does **not** embed any third-party SDK, player, tracker, or analytics code. The extension does not communicate with Spotify, YouTube, Apple Music, or Bandcamp servers in any way. When you click one of the buttons, you are simply navigating to a public search URL. Anything that happens after that is between you, your browser, and the destination site.
+
+---
+
+## Permissions and why we ask for them
+
+| Permission | Why RangerHQ Tuner needs it |
+|---|---|
+| `offscreen` | Manifest V3 service workers cannot host an `<audio>` element. The `chrome.offscreen` API lets us create a hidden DOM document that holds the audio player. No user data is collected through this. |
+| `storage` | Persist your settings, last station, volume, history, and favourites in `chrome.storage.local` on your own device. |
+| Host: `https://somafm.com/*` and `https://*.somafm.com/*` | Fetch the public station catalogue, playlist files, stream URLs, and now-playing metadata from SomaFM. No authentication is used, no user data is sent. |
+
+We do not request `tabs`, `activeTab`, `<all_urls>`, `webRequest`, `cookies`, or any other broad permission.
+
+---
+
+## Children's privacy
+
+RangerHQ Tuner is a general-purpose audio player and does not knowingly process data of children under 13. It collects nothing about anyone of any age.
+
+---
+
+## Changes to this policy
+
+If this policy ever changes in a material way, the effective date at the top will be updated and the change will be reflected in `CHANGELOG.md` in the project's public repository (linked above). Because RangerHQ Tuner does not collect personal data, material privacy changes would generally only happen if the architecture itself changes — which is unlikely.
+
+---
+
+## Contact
+
+For questions about this policy or the extension's data handling:
+
+- **Email:** <david@davidtkeane.com>
+- **Issues / source:** <https://git.davidtkeane.com/ranger/rangerhq-tuner>
+- **Author:** David Keane, Dublin, Ireland
+
+---
+
+*This policy is published under GPL v2 or later, the same licence as the extension itself. Verbatim copies and adaptations are permitted.*
@@ -1,5 +1,16 @@
 # RangerHQ Tuner

+[![Chrome Web Store version](https://img.shields.io/chrome-web-store/v/bmdmepddehnpbdffkblbjofgkllmpkgp?style=flat-square&logo=googlechrome&logoColor=white&color=6dbf7a&label=chrome%20web%20store)](https://chromewebstore.google.com/detail/bmdmepddehnpbdffkblbjofgkllmpkgp)
+[![users](https://img.shields.io/chrome-web-store/users/bmdmepddehnpbdffkblbjofgkllmpkgp?style=flat-square&logo=googlechrome&logoColor=white&color=2a7d3e)](https://chromewebstore.google.com/detail/bmdmepddehnpbdffkblbjofgkllmpkgp)
+[![rating](https://img.shields.io/chrome-web-store/rating/bmdmepddehnpbdffkblbjofgkllmpkgp?style=flat-square&color=6dbf7a)](https://chromewebstore.google.com/detail/bmdmepddehnpbdffkblbjofgkllmpkgp/reviews)
+[![license](https://img.shields.io/badge/license-GPL%20v2%2B-2a7d3e?style=flat-square)](LICENSE)
+[![manifest V3](https://img.shields.io/badge/manifest-V3-orange?style=flat-square&logo=googlechrome&logoColor=white)](manifest.json)
+[![last commit](https://img.shields.io/gitea/last-commit/ranger/rangerhq-tuner?gitea_url=https%3A%2F%2Fgit.davidtkeane.com&style=flat-square&color=6dbf7a)](https://git.davidtkeane.com/ranger/rangerhq-tuner/commits/branch/main)
+[![no telemetry](https://img.shields.io/badge/telemetry-none-6dbf7a?style=flat-square)](PRIVACY.md)
+[![made in Dublin](https://img.shields.io/badge/made%20in-Dublin%2C%20Ireland-2a7d3e?style=flat-square)](https://davidtkeane.com)
+
+**🎉 [Install from the Chrome Web Store →](https://chromewebstore.google.com/detail/bmdmepddehnpbdffkblbjofgkllmpkgp)**
+
 Lightweight indie internet radio player for Chrome. Plays SomaFM in any browser tab. Manifest V3, vanilla JS, no telemetry.

 Sibling to [rangerhq-radio](https://git.davidtkeane.com/ranger/rangerhq-radio) (the WordPress version).
@@ -1,8 +1,8 @@
 {
  "manifest_version": 3,
  "name": "RangerHQ Tuner",
-  "version": "0.1.0",
-  "description": "Lightweight indie internet radio player. Starts with SomaFM, extensible to more networks.",
+  "version": "0.5.0",
+  "description": "Lightweight SomaFM radio player. Logs what plays. One-click search to Spotify, YouTube, Apple Music, Bandcamp. No telemetry.",
  "author": "David Keane",
  "homepage_url": "https://davidtkeane.com/rangerhq-tuner",
  "icons": {
@@ -23,6 +23,10 @@
    "service_worker": "src/background/service-worker.js",
    "type": "module"
  },
+  "chrome_url_overrides": {
+    "newtab": "src/newtab/newtab.html"
+  },
+  "options_page": "src/options/options.html",
  "permissions": ["offscreen", "storage"],
  "host_permissions": [
    "https://somafm.com/*",
@@ -1,7 +1,12 @@
 // RangerHQ Tuner — Service Worker.
 // Job: open the offscreen audio document on demand and route messages
-// between the popup (UI) and the offscreen document (audio engine).
-// We hold no state here — Chrome will kill this worker at any time.
+// between the popup/newtab (UI) and the offscreen document (audio engine).
+// Also acts as the storage gateway for the offscreen doc — offscreen
+// docs don't reliably have chrome.storage, so they message us instead.
+// We hold no in-memory state here — Chrome will kill this worker at any time.
+
+import { TARGETS, TYPES } from '../lib/messages.js';
+import { logTrack } from '../lib/history.js';

 const OFFSCREEN_PATH = 'src/offscreen/offscreen.html';

@@ -19,15 +24,29 @@ async function ensureOffscreen() {

 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  // Only react to messages targeted at the service worker.
-  if (msg.target !== 'sw') return;
+  if (msg.target !== TARGETS.SW) return;

  (async () => {
    try {
+      // Storage-gateway path: write to chrome.storage on behalf of the
+      // offscreen document, which can't always reach it directly.
+      if (msg.type === TYPES.LOG_TRACK_REQUEST) {
+        const appended = await logTrack(msg.entry || {});
+        if (appended) {
+          chrome.runtime.sendMessage({
+            target: TARGETS.POPUP,
+            type:   TYPES.TRACK_LOGGED,
+          }).catch(() => {}); // no UI listening is fine
+        }
+        sendResponse({ ok: true, appended });
+        return;
+      }
+
+      // Default: forward audio-control messages to the offscreen doc.
      await ensureOffscreen();
-      // Re-route the message to the offscreen document.
      const response = await chrome.runtime.sendMessage({
        ...msg,
-        target: 'offscreen',
+        target: TARGETS.OFFSCREEN,
      });
      sendResponse(response);
    } catch (err) {
@@ -0,0 +1,191 @@
+// RangerHQ Tuner — History, Favourites, and 4-button search URLs.
+//
+// Mirrors rangerhq-radio's inc/history.php exactly (verified 2026-06-08).
+// Differences from the WP plugin:
+//   • Chrome has one user per profile, so we use chrome.storage.local,
+//     not per-user usermeta.
+//   • All keys are namespaced under "tuner.*" so clearAll() is trivial.
+//
+// Entry shape (mirror WP plugin):
+//   { artist: string, title: string, station: string, stationId: string, at: number }
+//
+// Rules (mirror WP plugin):
+//   • Cap at historyCap entries (default 500), FIFO.
+//   • Dedup against the LAST entry only (sig = lower(artist|title|stationId)).
+//   • Skip entries where artist === "(unknown)" (SomaFM dead-air placeholder).
+
+export const HISTORY_KEY  = 'tuner.history';
+export const FAVS_KEY     = 'tuner.favourites';
+export const CAP_KEY      = 'tuner.historyCap';
+export const DEFAULT_CAP  = 500;
+export const MIN_CAP      = 50;
+export const MAX_CAP      = 500;
+
+/* ---------- Safe storage accessor ----------
+ * chrome.storage is not guaranteed in every extension context (e.g. some
+ * older Chrome versions hide it from offscreen documents). Anywhere it
+ * isn't present, our readers return empty defaults and writers no-op
+ * instead of throwing. This way history.js is safe to import from any
+ * surface — UI pages get real storage, edge contexts degrade silently.
+ */
+function storage() {
+  if (typeof chrome === 'undefined') return null;
+  if (!chrome.storage || !chrome.storage.local) return null;
+  return chrome.storage.local;
+}
+
+/* ---------- Readers ---------- */
+
+export async function getHistory() {
+  const s = storage();
+  if (!s) return [];
+  const o = await s.get(HISTORY_KEY);
+  return Array.isArray(o[HISTORY_KEY]) ? o[HISTORY_KEY] : [];
+}
+
+export async function getFavourites() {
+  const s = storage();
+  if (!s) return [];
+  const o = await s.get(FAVS_KEY);
+  return Array.isArray(o[FAVS_KEY]) ? o[FAVS_KEY] : [];
+}
+
+export async function getHistoryCap() {
+  const s = storage();
+  if (!s) return DEFAULT_CAP;
+  const o = await s.get(CAP_KEY);
+  const n = o[CAP_KEY];
+  return (typeof n === 'number' && n >= MIN_CAP && n <= MAX_CAP) ? n : DEFAULT_CAP;
+}
+
+/* ---------- Sanitisation + dedup ---------- */
+
+function sanitizeEntry(entry) {
+  if (!entry || typeof entry !== 'object') return null;
+  const artist    = String(entry.artist    || '').trim().slice(0, 200);
+  const title     = String(entry.title     || '').trim().slice(0, 200);
+  const station   = String(entry.station   || '').trim().slice(0, 100);
+  const stationId = String(entry.stationId || '').trim().slice(0, 100);
+  if (!artist || !title) return null;
+  if (artist.toLowerCase() === '(unknown)') return null;
+  return { artist, title, station, stationId, at: Date.now() };
+}
+
+export function entrySignature(e) {
+  return [
+    (e.artist    || '').toLowerCase().trim(),
+    (e.title     || '').toLowerCase().trim(),
+    (e.stationId || '').toLowerCase().trim(),
+  ].join('|');
+}
+
+/* ---------- Mutations ---------- */
+
+/** Append a track to history (deduped + capped). Returns true if appended. */
+export async function logTrack(entry) {
+  const s = storage();
+  if (!s) return false;
+
+  const clean = sanitizeEntry(entry);
+  if (!clean) return false;
+
+  const history = await getHistory();
+  if (history.length > 0) {
+    const lastSig = entrySignature(history[history.length - 1]);
+    if (entrySignature(clean) === lastSig) return false;
+  }
+
+  history.push(clean);
+  const cap = await getHistoryCap();
+  if (history.length > cap) history.splice(0, history.length - cap);
+  await s.set({ [HISTORY_KEY]: history });
+  return true;
+}
+
+/** Toggle favourite. Returns new state: true = now favourited, false = removed. */
+export async function toggleFavourite(entry) {
+  const s = storage();
+  if (!s) return false;
+
+  const clean = sanitizeEntry({ ...entry, at: 0 }); // at gets reset
+  if (!clean) return false;
+  const sig = entrySignature(clean);
+
+  const favs = await getFavourites();
+  const found = favs.findIndex(f => entrySignature(f) === sig);
+  if (found >= 0) {
+    favs.splice(found, 1);
+    await s.set({ [FAVS_KEY]: favs });
+    return false;
+  }
+  clean.at = Date.now();
+  favs.push(clean);
+  await s.set({ [FAVS_KEY]: favs });
+  return true;
+}
+
+export async function isFavourited(entry) {
+  const clean = sanitizeEntry({ ...entry, at: 0 });
+  if (!clean) return false;
+  const sig = entrySignature(clean);
+  const favs = await getFavourites();
+  return favs.some(f => entrySignature(f) === sig);
+}
+
+export async function clearHistory() {
+  const s = storage();
+  if (!s) return;
+  await s.remove(HISTORY_KEY);
+}
+
+export async function clearFavourites() {
+  const s = storage();
+  if (!s) return;
+  await s.remove(FAVS_KEY);
+}
+
+/** Wipe every `tuner.*` key. Used by the "Clear EVERYTHING" button. */
+export async function clearAll() {
+  const s = storage();
+  if (!s) return;
+  const all = await s.get(null);
+  const keys = Object.keys(all).filter(k => k.startsWith('tuner.'));
+  if (keys.length) await s.remove(keys);
+}
+
+export async function setHistoryCap(n) {
+  const s = storage();
+  if (!s) return DEFAULT_CAP;
+  const cap = Math.max(MIN_CAP, Math.min(MAX_CAP, Math.round(Number(n) || DEFAULT_CAP)));
+  await s.set({ [CAP_KEY]: cap });
+  const history = await getHistory();
+  if (history.length > cap) {
+    await s.set({ [HISTORY_KEY]: history.slice(-cap) });
+  }
+  return cap;
+}
+
+/* ---------- 4-button search URLs ---------- */
+// Mirrors WP plugin lines 126-129 verbatim. NO auth, NO API key, NO quota.
+// Public search URLs that open in a new tab — user picks what to listen to.
+
+export function searchUrls(artist, title) {
+  const enc = encodeURIComponent(`${artist || ''} ${title || ''}`.trim());
+  return {
+    spotify:  `https://open.spotify.com/search/${enc}`,
+    youtube:  `https://www.youtube.com/results?search_query=${enc}`,
+    apple:    `https://music.apple.com/search?term=${enc}`,
+    bandcamp: `https://bandcamp.com/search?q=${enc}`,
+  };
+}
+
+/* ---------- Display helpers ---------- */
+
+export function formatRelativeTime(ts) {
+  const diffSec = Math.floor((Date.now() - ts) / 1000);
+  if (diffSec < 60)         return 'just now';
+  if (diffSec < 3600)       return `${Math.floor(diffSec / 60)}m ago`;
+  if (diffSec < 86400)      return `${Math.floor(diffSec / 3600)}h ago`;
+  if (diffSec < 604800)     return `${Math.floor(diffSec / 86400)}d ago`;
+  return new Date(ts).toLocaleDateString();
+}
@@ -15,5 +15,9 @@ export const TYPES = Object.freeze({
  GET_STATE:          'GET_STATE',
  STATE_CHANGED:      'STATE_CHANGED',
  METADATA_UPDATED:   'METADATA_UPDATED',
+  LOG_TRACK_REQUEST:  'LOG_TRACK_REQUEST', // offscreen → SW: please write this entry to tuner.history
+  TRACK_LOGGED:       'TRACK_LOGGED',      // SW → UI: a new entry was appended to tuner.history
+  FAVOURITE_TOGGLED:  'FAVOURITE_TOGGLED', // UI → UI: re-render any visible fav lists
+  STORAGE_WIPED:      'STORAGE_WIPED',     // options → UI: catastrophic reset, re-init from defaults
  ERROR:              'ERROR',
 });
@@ -0,0 +1,55 @@
+// RangerHQ Tuner — Theme helpers (v0.5.0)
+//
+// Three modes:
+//   auto   — follow OS via @media (prefers-color-scheme: light)
+//   dark   — force dark regardless of OS
+//   light  — force light regardless of OS
+//
+// Stored in chrome.storage.local under `tuner.theme`. Default: auto.
+//
+// Application strategy: set/remove `data-theme` attribute on <html>.
+//   - "auto" → attribute removed → @media in each stylesheet decides
+//   - "dark" → data-theme="dark" → CSS forces dark vars
+//   - "light" → data-theme="light" → CSS forces light vars
+//
+// Used from popup.js, newtab.js, and options.js on init + on cross-surface
+// sync.
+
+export const THEME_KEY = 'tuner.theme';
+export const THEME_AUTO  = 'auto';
+export const THEME_DARK  = 'dark';
+export const THEME_LIGHT = 'light';
+export const THEME_DEFAULT = THEME_AUTO;
+export const VALID_THEMES = [THEME_AUTO, THEME_DARK, THEME_LIGHT];
+
+/** Read the stored theme preference, falling back to "auto". */
+export async function getTheme() {
+  if (typeof chrome === 'undefined' || !chrome.storage?.local) return THEME_DEFAULT;
+  const o = await chrome.storage.local.get(THEME_KEY);
+  const v = o[THEME_KEY];
+  return VALID_THEMES.includes(v) ? v : THEME_DEFAULT;
+}
+
+/** Persist a theme preference. Any cross-surface listeners will pick it up. */
+export async function setTheme(theme) {
+  if (!VALID_THEMES.includes(theme)) theme = THEME_DEFAULT;
+  if (typeof chrome === 'undefined' || !chrome.storage?.local) return theme;
+  await chrome.storage.local.set({ [THEME_KEY]: theme });
+  return theme;
+}
+
+/** Apply a theme to the current document. Pass "auto" to clear the override. */
+export function applyTheme(theme) {
+  const t = VALID_THEMES.includes(theme) ? theme : THEME_DEFAULT;
+  const html = document.documentElement;
+  if (t === THEME_AUTO) {
+    html.removeAttribute('data-theme');
+  } else {
+    html.setAttribute('data-theme', t);
+  }
+}
+
+/** Convenience: read the stored theme and apply it. */
+export async function initTheme() {
+  applyTheme(await getTheme());
+}
@@ -0,0 +1,673 @@
+/* RangerHQ Tuner — New Tab Page.
+   Full-viewport landing that replaces Chrome's default new tab.
+   Same earthy palette as the popup, but laid out as a focal page
+   (player centered + quick stations + browsable list).
+*/
+
+:root {
+  --bg:         #0f1411;
+  --bg-soft:    #1a221c;
+  --bg-row:     #1f2823;
+  --bg-row-hi:  #2a3530;
+  --fg:         #e8e4d4;
+  --fg-muted:   #97a094;
+  --accent:     #6dbf7a;
+  --accent-dim: #2a7d3e;
+  --cream:      #f4e9b7;
+  --danger:     #c9685b;
+  --radius:     8px;
+  --maxw:       760px;
+  --watermark-opacity: 0.025;
+}
+
+/* ──────────────────────────────────────────────────────────────────────
+   Light mode (v0.5.0) — auto-follows OS theme. Same approach as popup:
+   override :root vars so every existing rule using var(--*) keeps
+   working unchanged. Watermark opacity bumped slightly since the
+   helmet contrasts more against light bg.
+   ────────────────────────────────────────────────────────────────────── */
+/* OS-follow light mode */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg:         #f6f4ed;
+    --bg-soft:    #ece5d2;
+    --bg-row:     #ddd6c0;
+    --bg-row-hi:  #c8c0a8;
+    --fg:         #2a2f28;
+    --fg-muted:   #6a7064;
+    --accent:     #2a7d3e;
+    --accent-dim: #6dbf7a;
+    --cream:      #b8861a;
+    --danger:     #b53a2b;
+    --watermark-opacity: 0.04;
+  }
+  .nt-state-pill[data-state="playing"]   { color: #fff; }
+  .nt-state-pill[data-state="buffering"] { color: #fff; }
+  .nt-state-pill[data-state="error"]     { color: #fff; }
+  .nt-btn--primary[aria-pressed="true"]  { color: #fff; }
+}
+
+/* Manual override — force LIGHT */
+html[data-theme="light"] {
+  --bg: #f6f4ed; --bg-soft: #ece5d2; --bg-row: #ddd6c0; --bg-row-hi: #c8c0a8;
+  --fg: #2a2f28; --fg-muted: #6a7064; --accent: #2a7d3e; --accent-dim: #6dbf7a;
+  --cream: #b8861a; --danger: #b53a2b; --watermark-opacity: 0.04;
+}
+html[data-theme="light"] .nt-state-pill[data-state="playing"]   { color: #fff; }
+html[data-theme="light"] .nt-state-pill[data-state="buffering"] { color: #fff; }
+html[data-theme="light"] .nt-state-pill[data-state="error"]     { color: #fff; }
+html[data-theme="light"] .nt-btn--primary[aria-pressed="true"]  { color: #fff; }
+
+/* Manual override — force DARK */
+html[data-theme="dark"] {
+  --bg: #0f1411; --bg-soft: #1a221c; --bg-row: #1f2823; --bg-row-hi: #2a3530;
+  --fg: #e8e4d4; --fg-muted: #97a094; --accent: #6dbf7a; --accent-dim: #2a7d3e;
+  --cream: #f4e9b7; --danger: #c9685b; --watermark-opacity: 0.025;
+}
+html[data-theme="dark"] .nt-state-pill[data-state="playing"]   { color: var(--bg); }
+html[data-theme="dark"] .nt-state-pill[data-state="buffering"] { color: var(--bg); }
+html[data-theme="dark"] .nt-state-pill[data-state="error"]     { color: var(--cream); }
+html[data-theme="dark"] .nt-btn--primary[aria-pressed="true"]  { color: var(--bg); }
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* Subtle background watermark — the helmet, very faint */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-image: url('../assets/img/ranger.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: min(60vh, 600px);
+  opacity: var(--watermark-opacity);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Everything else sits on top */
+.nt-header, .nt-main, .nt-footer { position: relative; z-index: 1; }
+
+/* ========== Header ========== */
+.nt-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 18px 28px;
+  border-bottom: 1px solid var(--bg-soft);
+}
+
+.nt-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.nt-helmet {
+  width: 26px;
+  height: 26px;
+  object-fit: contain;
+}
+
+.nt-brand-name {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+
+.nt-clock {
+  text-align: right;
+}
+
+.nt-time {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  font-variant-numeric: tabular-nums;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.nt-secs {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fg-muted);
+  letter-spacing: 0.5px;
+}
+
+.nt-date {
+  font-size: 11px;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-top: 2px;
+}
+
+/* ========== Main ========== */
+.nt-main {
+  max-width: var(--maxw);
+  margin: 0 auto;
+  padding: 40px 28px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+
+/* Now playing — large + centered */
+.nt-now {
+  text-align: center;
+  padding: 24px 0 8px;
+}
+
+.nt-station {
+  font-size: 26px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  margin-bottom: 6px;
+}
+
+.nt-track {
+  font-size: 15px;
+  color: var(--fg-muted);
+  min-height: 1.4em;
+  margin-bottom: 16px;
+}
+
+.nt-state-pill {
+  display: inline-block;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: var(--bg-row);
+  color: var(--fg-muted);
+}
+
+.nt-state-pill[data-state="playing"] {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.nt-state-pill[data-state="buffering"] {
+  background: var(--cream);
+  color: var(--bg);
+}
+
+.nt-state-pill[data-state="error"] {
+  background: var(--danger);
+  color: var(--cream);
+}
+
+/* Controls — generous click targets */
+.nt-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 0;
+}
+
+.nt-btn {
+  font-size: 15px;
+  font-weight: 500;
+  padding: 10px 22px;
+  border: 1px solid var(--accent-dim);
+  border-radius: var(--radius);
+  background: var(--bg-row);
+  color: var(--fg);
+  cursor: pointer;
+}
+
+.nt-btn:hover:not(:disabled) {
+  background: var(--bg-row-hi);
+}
+
+.nt-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.nt-btn--primary {
+  background: var(--accent-dim);
+  min-width: 120px;
+}
+
+.nt-btn--primary[aria-pressed="true"] {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.nt-vol-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 240px;
+}
+
+.nt-vol-label {
+  font-size: 11px;
+  color: var(--fg-muted);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+#nt-volume {
+  flex: 1;
+  accent-color: var(--accent);
+}
+
+/* Quick stations — chip row */
+.nt-quick {
+  border-top: 1px solid var(--bg-soft);
+  padding-top: 18px;
+}
+
+.nt-quick-label {
+  font-size: 11px;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 10px;
+}
+
+.nt-quick-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.nt-quick-chip {
+  font-size: 12px;
+  padding: 6px 12px;
+  border: 1px solid var(--bg-row-hi);
+  border-radius: 999px;
+  background: var(--bg-row);
+  color: var(--fg);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.nt-quick-chip:hover {
+  background: var(--bg-row-hi);
+  border-color: var(--accent-dim);
+}
+
+.nt-quick-chip.is-active {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+}
+
+.nt-quick-empty {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+/* ========== Tabs (Stations / History / Favourites) ========== */
+.nt-tabs {
+  border-top: 1px solid var(--bg-soft);
+  padding-top: 18px;
+}
+
+.nt-tab-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--bg-soft);
+}
+
+.nt-tab {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 8px 14px;
+  background: transparent;
+  color: var(--fg-muted);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+  text-decoration: none;
+}
+
+.nt-tab:hover { color: var(--fg); }
+
+.nt-tab.is-active {
+  color: var(--fg);
+  border-bottom-color: var(--accent);
+}
+
+.nt-tab--link {
+  margin-left: auto;
+  font-size: 16px;
+  padding: 6px 10px;
+  line-height: 1;
+  border-bottom: none;
+}
+
+.nt-tab--link:hover { color: var(--accent); }
+
+.nt-tab-pane[hidden] { display: none; }
+
+.nt-pane-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.nt-pane-count {
+  font-size: 11px;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.nt-pane-action {
+  font-size: 11px;
+  padding: 4px 10px;
+  background: var(--bg-row);
+  color: var(--fg-muted);
+  border: 1px solid var(--bg-row-hi);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.nt-pane-action:hover {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
+/* ========== Track list (History + Favourites) ========== */
+.nt-track-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  max-height: 380px;
+  overflow-y: auto;
+  border: 1px solid var(--bg-soft);
+  border-radius: var(--radius);
+}
+
+.nt-track-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px 14px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--bg-soft);
+}
+
+.nt-track-row:last-child { border-bottom: none; }
+.nt-track-row:hover { background: var(--bg-row); }
+
+.nt-track-main { min-width: 0; }
+
+.nt-track-title {
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nt-track-artist {
+  font-size: 12px;
+  color: var(--accent);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nt-track-meta {
+  font-size: 10px;
+  color: var(--fg-muted);
+  letter-spacing: 0.3px;
+  margin-top: 2px;
+}
+
+.nt-track-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+}
+
+.nt-fav-btn {
+  background: transparent;
+  border: 1px solid var(--bg-row-hi);
+  border-radius: 999px;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+  color: var(--fg-muted);
+  font-size: 14px;
+  line-height: 1;
+  padding: 0;
+}
+
+.nt-fav-btn:hover { color: var(--cream); border-color: var(--cream); }
+
+.nt-fav-btn[aria-pressed="true"] {
+  color: var(--cream);
+  border-color: var(--cream);
+  background: rgba(244, 233, 183, 0.08);
+}
+
+.nt-search-row {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding-top: 4px;
+}
+
+.nt-search-link {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: 3px;
+  text-decoration: none;
+  color: var(--fg);
+  letter-spacing: 0.3px;
+  border: 1px solid transparent;
+  text-transform: uppercase;
+}
+
+/* Service-specific brand-leaning colours — kept muted so they don't shout */
+.nt-search-link--spotify  { background: #1ed76015; color: #1ed760; border-color: #1ed76040; }
+.nt-search-link--youtube  { background: #ff000015; color: #ff5a5a; border-color: #ff5a5a40; }
+.nt-search-link--apple    { background: #fa57c115; color: #fa57c1; border-color: #fa57c140; }
+.nt-search-link--bandcamp { background: #629aa915; color: #6dbdd0; border-color: #6dbdd040; }
+
+.nt-search-link:hover { filter: brightness(1.3); }
+
+.nt-track-empty {
+  padding: 28px 16px;
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
+/* (Legacy alias — older code referenced .nt-browse for the bottom section.
+   Keep here in case any styles bleed through during transition.) */
+.nt-browse {
+  border-top: 1px solid var(--bg-soft);
+  padding-top: 18px;
+}
+
+.nt-search-wrap {
+  display: block;
+  margin-bottom: 10px;
+}
+
+#nt-search {
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 13px;
+  background: var(--bg-row);
+  color: var(--fg);
+  border: 1px solid var(--bg-row-hi);
+  border-radius: var(--radius);
+}
+
+#nt-search:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.nt-station-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  max-height: 320px;
+  overflow-y: auto;
+  border: 1px solid var(--bg-soft);
+  border-radius: var(--radius);
+}
+
+.nt-station-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--bg-soft);
+  cursor: pointer;
+}
+
+.nt-station-row:last-child { border-bottom: none; }
+
+.nt-station-row:hover {
+  background: var(--bg-row);
+}
+
+.nt-station-row.is-active {
+  background: var(--bg-row-hi);
+  border-left: 3px solid var(--accent);
+  padding-left: 11px;
+}
+
+.nt-station-art {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  background: var(--bg-soft);
+  flex-shrink: 0;
+  object-fit: cover;
+}
+
+.nt-station-meta {
+  flex: 1;
+  min-width: 0;
+}
+
+.nt-station-name {
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nt-station-genre {
+  font-size: 11px;
+  color: var(--fg-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ========== Footer ========== */
+.nt-footer {
+  max-width: var(--maxw);
+  margin: 0 auto;
+  padding: 20px 28px 28px;
+  text-align: center;
+  font-size: 11px;
+  color: var(--fg-muted);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.nt-footer a {
+  color: var(--fg-muted);
+  text-decoration: none;
+  border-bottom: 1px dotted var(--bg-row-hi);
+}
+
+.nt-footer a:hover {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.nt-dot { opacity: 0.5; }
+
+/* Scrollbar — subtle */
+.nt-station-list::-webkit-scrollbar {
+  width: 8px;
+}
+.nt-station-list::-webkit-scrollbar-thumb {
+  background: var(--bg-row-hi);
+  border-radius: 4px;
+}
+.nt-station-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Tighter spacing on smaller windows */
+@media (max-height: 700px) {
+  .nt-main { padding-top: 24px; gap: 18px; }
+  .nt-now  { padding: 12px 0 4px; }
+  .nt-station { font-size: 22px; }
+  .nt-station-list { max-height: 220px; }
+}
+
+/* ──────────────────────────────────────────────────────────────────────
+   First-run UX hint (v0.4.0)
+   Subtle accent-green pulse around the Quick Stations row + a bouncing
+   ↓ arrow on the now-playing area. Both disappear the moment a station
+   is picked. Existing users never see them.
+   ────────────────────────────────────────────────────────────────────── */
+
+@keyframes nt-pulse-glow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(109, 191, 122, 0); }
+  50%      { box-shadow: 0 0 0 6px rgba(109, 191, 122, 0.18); }
+}
+
+@keyframes nt-bounce {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(4px); }
+}
+
+body.is-first-run .nt-quick {
+  animation: nt-pulse-glow 2.4s ease-in-out infinite;
+  border-radius: var(--radius);
+  padding: 14px;
+  margin: 0 -14px;
+}
+
+body.is-first-run .nt-track {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+body.is-first-run .nt-track::after {
+  content: " ↓";
+  display: inline-block;
+  animation: nt-bounce 1.8s ease-in-out infinite;
+  margin-left: 6px;
+}
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>RangerHQ Tuner — New Tab</title>
+  <link rel="stylesheet" href="newtab.css">
+  <link rel="icon" href="../assets/icons/icon-48.png">
+</head>
+<body>
+
+  <header class="nt-header">
+    <div class="nt-brand">
+      <img src="../assets/img/ranger.png" alt="" class="nt-helmet">
+      <span class="nt-brand-name">RangerHQ Tuner</span>
+    </div>
+    <div class="nt-clock" aria-live="off">
+      <div class="nt-time"  id="nt-time">
+        <span id="nt-hm">--:--</span><span class="nt-secs" id="nt-secs">--</span>
+      </div>
+      <div class="nt-date"  id="nt-date">—</div>
+    </div>
+  </header>
+
+  <main class="nt-main">
+
+    <section class="nt-now" aria-label="Now playing">
+      <div class="nt-station" id="nt-station">Pick a station to begin</div>
+      <div class="nt-track"   id="nt-track">—</div>
+      <span class="nt-state-pill" id="nt-state" aria-live="polite">idle</span>
+    </section>
+
+    <section class="nt-controls" aria-label="Playback controls">
+      <button id="nt-play" class="nt-btn nt-btn--primary" aria-pressed="false" disabled>▶ Play</button>
+      <label class="nt-vol-wrap">
+        <span class="nt-vol-label">Vol</span>
+        <input type="range" id="nt-volume" min="0" max="100" value="70" aria-label="Volume">
+      </label>
+    </section>
+
+    <section class="nt-quick" aria-label="Quick stations">
+      <div class="nt-quick-label">Quick stations</div>
+      <div class="nt-quick-list" id="nt-quick-list">
+        <span class="nt-quick-empty">Loading…</span>
+      </div>
+    </section>
+
+    <section class="nt-tabs" aria-label="Browse">
+      <div class="nt-tab-bar" role="tablist">
+        <button class="nt-tab is-active" role="tab" aria-selected="true"  data-tab="stations">Stations</button>
+        <button class="nt-tab"           role="tab" aria-selected="false" data-tab="history">History</button>
+        <button class="nt-tab"           role="tab" aria-selected="false" data-tab="favourites">Favourites</button>
+        <a class="nt-tab nt-tab--link"   href="#" id="nt-open-options" title="Open settings">⚙</a>
+      </div>
+
+      <div class="nt-tab-pane" id="nt-pane-stations" role="tabpanel">
+        <label class="nt-search-wrap">
+          <input type="search" id="nt-search" placeholder="Search all stations…" aria-label="Search stations">
+        </label>
+        <ul id="nt-station-list" class="nt-station-list" role="listbox"></ul>
+      </div>
+
+      <div class="nt-tab-pane" id="nt-pane-history" role="tabpanel" hidden>
+        <div class="nt-pane-toolbar">
+          <span class="nt-pane-count" id="nt-history-count">—</span>
+          <button class="nt-pane-action" id="nt-history-clear" type="button">Clear history</button>
+        </div>
+        <ul id="nt-history-list" class="nt-track-list" role="list"></ul>
+      </div>
+
+      <div class="nt-tab-pane" id="nt-pane-favourites" role="tabpanel" hidden>
+        <div class="nt-pane-toolbar">
+          <span class="nt-pane-count" id="nt-favs-count">—</span>
+          <button class="nt-pane-action" id="nt-favs-clear" type="button">Clear favourites</button>
+        </div>
+        <ul id="nt-favs-list" class="nt-track-list" role="list"></ul>
+      </div>
+    </section>
+
+  </main>
+
+  <footer class="nt-footer">
+    <a href="https://davidtkeane.com" target="_blank" rel="noopener">davidtkeane.com</a>
+    <span class="nt-dot">·</span>
+    <a href="https://git.davidtkeane.com/ranger/rangerhq-tuner" target="_blank" rel="noopener">Gitea</a>
+    <span class="nt-dot">·</span>
+    <span>SomaFM · indie radio · no telemetry</span>
+  </footer>
+
+  <script type="module" src="newtab.js"></script>
+</body>
+</html>
@@ -0,0 +1,534 @@
+// RangerHQ Tuner — New Tab Page controller.
+// Replaces Chrome's default new tab with the player as a focal landing.
+// Same underlying mechanics as the popup (sources/index, messages to SW,
+// chrome.storage state) — but laid out for a full viewport with a
+// quick-station chip row and a searchable browse list.
+
+import { TARGETS, TYPES } from '../lib/messages.js';
+import { listAllStations, getSource } from '../sources/index.js';
+import {
+  getHistory, getFavourites,
+  toggleFavourite, isFavourited,
+  clearHistory, clearFavourites,
+  searchUrls, formatRelativeTime,
+  entrySignature,
+} from '../lib/history.js';
+import { THEME_KEY, THEME_DEFAULT, initTheme, applyTheme } from '../lib/theme.js';
+
+const els = {
+  // Clock
+  hm:          document.getElementById('nt-hm'),
+  secs:        document.getElementById('nt-secs'),
+  date:        document.getElementById('nt-date'),
+  // Now playing
+  station:     document.getElementById('nt-station'),
+  track:       document.getElementById('nt-track'),
+  state:       document.getElementById('nt-state'),
+  // Controls
+  play:        document.getElementById('nt-play'),
+  volume:      document.getElementById('nt-volume'),
+  // Stations
+  quickList:   document.getElementById('nt-quick-list'),
+  search:      document.getElementById('nt-search'),
+  list:        document.getElementById('nt-station-list'),
+  // Tabs + panes
+  tabBar:        document.querySelector('.nt-tab-bar'),
+  paneStations:  document.getElementById('nt-pane-stations'),
+  paneHistory:   document.getElementById('nt-pane-history'),
+  paneFavs:      document.getElementById('nt-pane-favourites'),
+  historyList:   document.getElementById('nt-history-list'),
+  favsList:      document.getElementById('nt-favs-list'),
+  historyCount:  document.getElementById('nt-history-count'),
+  favsCount:     document.getElementById('nt-favs-count'),
+  historyClear:  document.getElementById('nt-history-clear'),
+  favsClear:     document.getElementById('nt-favs-clear'),
+  openOptions:   document.getElementById('nt-open-options'),
+};
+
+const STORAGE_KEYS = {
+  stations:    'tuner.stationsCache',
+  cachedAt:    'tuner.stationsCachedAt',
+  currentId:   'tuner.currentStationId',
+  volume:      'tuner.volume',
+  isPlaying:   'tuner.isPlaying',
+};
+
+const CATALOGUE_TTL_MS = 6 * 60 * 60 * 1000;
+
+// Quick-pick stations. These are the SomaFM ids most people start with.
+// If the catalogue is missing any (rare), they're just dropped silently.
+const QUICK_IDS = [
+  'groovesalad',
+  'dronezone',
+  'indiepop',
+  'secretagent',
+  'spacestation',
+  'lush',
+  'deepspaceone',
+  'fluid',
+];
+
+let stations = [];
+let currentStation = null;
+let playing = false;
+let lastQuery = '';
+let clockTimer = null;
+
+init().catch(err => {
+  console.error('Newtab init failed:', err);
+  setState('error');
+  els.track.textContent = `Init failed: ${err.message}`;
+});
+
+async function init() {
+  // Theme first — apply stored preference before anything paints to avoid
+  // a brief dark flash if the user has picked light.
+  await initTheme();
+
+  // Clock — visible even before stations load.
+  tickClock();
+  clockTimer = setInterval(tickClock, 1000); // 1 Hz — live seconds
+
+  const stored = await chrome.storage.local.get(Object.values(STORAGE_KEYS));
+  if (typeof stored[STORAGE_KEYS.volume] === 'number') {
+    els.volume.value = String(Math.round(stored[STORAGE_KEYS.volume] * 100));
+  }
+  playing = !!stored[STORAGE_KEYS.isPlaying];
+  setState(playing ? 'playing' : 'idle');
+  reflectPlayButton();
+
+  const cached = stored[STORAGE_KEYS.stations];
+  const cachedAt = stored[STORAGE_KEYS.cachedAt];
+  const fresh = cached && cachedAt && (Date.now() - cachedAt < CATALOGUE_TTL_MS);
+
+  if (fresh) {
+    stations = cached;
+  } else {
+    stations = await listAllStations();
+    await chrome.storage.local.set({
+      [STORAGE_KEYS.stations]: stations,
+      [STORAGE_KEYS.cachedAt]: Date.now(),
+    });
+  }
+
+  const currentId = stored[STORAGE_KEYS.currentId];
+  currentStation = stations.find(s => s.id === currentId) || null;
+  reflectFirstRunHint();
+  renderNow();
+  renderQuick();
+  renderList();
+
+  els.play.addEventListener('click', onPlayToggle);
+  els.volume.addEventListener('input', onVolume);
+  els.search.addEventListener('input', () => {
+    lastQuery = els.search.value.trim().toLowerCase();
+    renderList();
+  });
+
+  // Tabs
+  els.tabBar.addEventListener('click', (e) => {
+    const tab = e.target.closest('.nt-tab');
+    if (!tab) return;
+    if (tab.id === 'nt-open-options') {
+      e.preventDefault();
+      chrome.runtime.openOptionsPage();
+      return;
+    }
+    selectTab(tab.dataset.tab);
+  });
+  els.historyClear.addEventListener('click', async () => {
+    if (!confirm('Clear all track history? Favourites will be preserved.')) return;
+    await clearHistory();
+    await renderHistory();
+  });
+  els.favsClear.addEventListener('click', async () => {
+    if (!confirm('Clear all favourites?')) return;
+    await clearFavourites();
+    await renderFavourites();
+    await renderHistory(); // re-render history so star indicators update
+  });
+
+  // First render of track panes
+  await renderHistory();
+  await renderFavourites();
+
+  // Deep-link via URL hash — popup's "History" / "Favourites" buttons
+  // open us with #history or #favourites. Respect that on load AND on
+  // hash change (e.g. user changes it manually).
+  applyHashTab();
+  window.addEventListener('hashchange', applyHashTab);
+
+  chrome.runtime.onMessage.addListener((msg) => {
+    if (msg.target !== TARGETS.POPUP) return; // SW broadcasts to "popup" as the UI bucket
+    if (msg.type === TYPES.STATE_CHANGED) {
+      setState(msg.state);
+      playing = (msg.state === 'playing');
+      reflectPlayButton();
+      chrome.storage.local.set({ [STORAGE_KEYS.isPlaying]: playing });
+    } else if (msg.type === TYPES.ERROR) {
+      setState('error');
+      els.track.textContent = `Stream error (code ${msg.code ?? '?'})`;
+    } else if (msg.type === TYPES.METADATA_UPDATED) {
+      if (msg.nowPlaying) els.track.textContent = formatNowPlaying(msg.nowPlaying);
+    } else if (msg.type === TYPES.TRACK_LOGGED) {
+      renderHistory();
+    } else if (msg.type === TYPES.STORAGE_WIPED) {
+      // Catastrophic reset — re-read everything from scratch.
+      renderHistory();
+      renderFavourites();
+      renderQuick();
+      renderList();
+    }
+  });
+
+  // Cross-surface sync — if the popup (or another newtab) changes the
+  // current station, re-render here live without a manual reload.
+  chrome.storage.onChanged.addListener(async (changes, area) => {
+    if (area !== 'local') return;
+
+    if (changes[THEME_KEY]) {
+      applyTheme(changes[THEME_KEY].newValue || THEME_DEFAULT);
+    }
+
+    if (changes[STORAGE_KEYS.currentId] && stations.length) {
+      const newId = changes[STORAGE_KEYS.currentId].newValue;
+      currentStation = stations.find(s => s.id === newId) || null;
+      els.play.disabled = !currentStation;
+      reflectFirstRunHint();
+      renderNow();
+      renderQuick();
+      renderList();
+    }
+
+    if (changes[STORAGE_KEYS.isPlaying]) {
+      playing = !!changes[STORAGE_KEYS.isPlaying].newValue;
+      reflectPlayButton();
+    }
+
+    if (changes['tuner.history'])    renderHistory();
+    if (changes['tuner.favourites']) {
+      renderFavourites();
+      renderHistory();
+    }
+  });
+
+  els.play.disabled = !currentStation;
+}
+
+/* ---------- Clock ---------- */
+
+function tickClock() {
+  const now = new Date();
+  const hh = String(now.getHours()).padStart(2, '0');
+  const mm = String(now.getMinutes()).padStart(2, '0');
+  const ss = String(now.getSeconds()).padStart(2, '0');
+  els.hm.textContent = `${hh}:${mm}`;
+  els.secs.textContent = ss;
+  // Date only changes once a day; rendering the same string per tick is
+  // free (no DOM diff cost) so we don't bother to short-circuit it.
+  els.date.textContent = now.toLocaleDateString(undefined, {
+    weekday: 'long', day: 'numeric', month: 'long', year: 'numeric',
+  });
+}
+
+/* ---------- Rendering ---------- */
+
+function renderNow() {
+  if (currentStation) {
+    els.station.textContent = currentStation.name;
+    els.track.textContent = playing ? 'Now playing — fetching metadata…' : 'Ready to play';
+  } else {
+    els.station.textContent = 'Pick a station to begin';
+    els.track.textContent = '—';
+  }
+}
+
+function renderQuick() {
+  els.quickList.innerHTML = '';
+  if (!stations.length) {
+    const empty = document.createElement('span');
+    empty.className = 'nt-quick-empty';
+    empty.textContent = 'Loading…';
+    els.quickList.appendChild(empty);
+    return;
+  }
+  for (const shortId of QUICK_IDS) {
+    const fullId = `somafm:${shortId}`;
+    const s = stations.find(st => st.id === fullId);
+    if (!s) continue;
+    const chip = document.createElement('button');
+    chip.className = 'nt-quick-chip';
+    if (currentStation && currentStation.id === s.id) chip.classList.add('is-active');
+    chip.type = 'button';
+    chip.textContent = s.name;
+    chip.title = s.description || s.genre || s.name;
+    chip.addEventListener('click', () => onPickStation(s));
+    els.quickList.appendChild(chip);
+  }
+}
+
+function renderList() {
+  if (!stations.length) {
+    els.list.innerHTML = '<li class="nt-quick-empty" style="padding:14px;">Loading stations…</li>';
+    return;
+  }
+  const q = lastQuery;
+  const filtered = q
+    ? stations.filter(s =>
+        s.name.toLowerCase().includes(q) ||
+        s.genre.toLowerCase().includes(q) ||
+        s.description.toLowerCase().includes(q))
+    : stations;
+
+  els.list.innerHTML = '';
+  if (!filtered.length) {
+    const li = document.createElement('li');
+    li.className = 'nt-quick-empty';
+    li.style.padding = '14px';
+    li.textContent = 'No matches.';
+    els.list.appendChild(li);
+    return;
+  }
+
+  for (const s of filtered) {
+    const li = document.createElement('li');
+    li.className = 'nt-station-row';
+    if (currentStation && currentStation.id === s.id) li.classList.add('is-active');
+    li.setAttribute('role', 'option');
+
+    const img = document.createElement('img');
+    img.className = 'nt-station-art';
+    img.alt = '';
+    img.src = s.artworkUrl || '';
+    img.onerror = () => { img.style.visibility = 'hidden'; };
+
+    const meta = document.createElement('div');
+    meta.className = 'nt-station-meta';
+
+    const name = document.createElement('div');
+    name.className = 'nt-station-name';
+    name.textContent = s.name;
+
+    const genre = document.createElement('div');
+    genre.className = 'nt-station-genre';
+    genre.textContent = s.genre || s.description.slice(0, 80);
+
+    meta.appendChild(name);
+    meta.appendChild(genre);
+    li.appendChild(img);
+    li.appendChild(meta);
+    li.addEventListener('click', () => onPickStation(s));
+
+    els.list.appendChild(li);
+  }
+}
+
+/* ---------- Actions ---------- */
+
+async function onPickStation(station) {
+  currentStation = station;
+  els.play.disabled = false;
+  reflectFirstRunHint();
+  await chrome.storage.local.set({ [STORAGE_KEYS.currentId]: station.id });
+  renderNow();
+  renderQuick();
+  renderList();
+  await playCurrent();
+}
+
+async function onPlayToggle() {
+  if (!currentStation) return;
+  if (playing) {
+    await sendToSW({ type: TYPES.PAUSE });
+  } else {
+    await playCurrent();
+  }
+}
+
+async function playCurrent() {
+  if (!currentStation) return;
+  setState('buffering');
+  try {
+    const source = getSource(currentStation.sourceId);
+    if (!source) throw new Error(`Unknown source ${currentStation.sourceId}`);
+    const streamUrl = await source.resolveStreamUrl(currentStation);
+    await sendToSW({ type: TYPES.SET_VOLUME, volume: Number(els.volume.value) / 100 });
+    const stationLite = {
+      id:       currentStation.id,
+      sourceId: currentStation.sourceId,
+      name:     currentStation.name,
+    };
+    const resp = await sendToSW({ type: TYPES.PLAY, streamUrl, station: stationLite });
+    if (!resp?.ok) throw new Error(resp?.error || 'PLAY failed');
+    // Offscreen will broadcast METADATA_UPDATED within ~1s.
+  } catch (err) {
+    console.error(err);
+    setState('error');
+    els.track.textContent = `Couldn't play: ${err.message}`;
+  }
+}
+
+async function onVolume() {
+  const v = Number(els.volume.value) / 100;
+  await chrome.storage.local.set({ [STORAGE_KEYS.volume]: v });
+  await sendToSW({ type: TYPES.SET_VOLUME, volume: v });
+}
+
+/* ---------- Helpers ---------- */
+
+// v0.4.0 first-run UX hint — body class drives the pulse + arrow CSS in
+// newtab.css. Active when no station has been picked yet; cleared the
+// moment one is selected (here or via cross-surface storage sync).
+function reflectFirstRunHint() {
+  document.body.classList.toggle('is-first-run', !currentStation);
+}
+
+function reflectPlayButton() {
+  els.play.setAttribute('aria-pressed', playing ? 'true' : 'false');
+  els.play.textContent = playing ? '❚❚ Pause' : '▶ Play';
+}
+
+function setState(state) {
+  els.state.dataset.state = state;
+  els.state.textContent = state;
+}
+
+function formatNowPlaying(np) {
+  const left = np.artist ? `${np.artist} — ` : '';
+  return `${left}${np.title}`;
+}
+
+function sendToSW(msg) {
+  return chrome.runtime.sendMessage({ target: TARGETS.SW, ...msg });
+}
+
+/* ---------- Tabs ---------- */
+
+function selectTab(name) {
+  const map = {
+    stations:   els.paneStations,
+    history:    els.paneHistory,
+    favourites: els.paneFavs,
+  };
+  for (const [k, pane] of Object.entries(map)) {
+    const active = (k === name);
+    pane.hidden = !active;
+    const tabBtn = els.tabBar.querySelector(`[data-tab="${k}"]`);
+    if (tabBtn) {
+      tabBtn.classList.toggle('is-active', active);
+      tabBtn.setAttribute('aria-selected', active ? 'true' : 'false');
+    }
+  }
+}
+
+function applyHashTab() {
+  const hash = (location.hash || '').replace(/^#/, '').toLowerCase();
+  if (hash === 'history' || hash === 'favourites' || hash === 'stations') {
+    selectTab(hash);
+  }
+}
+
+/* ---------- History + Favourites rendering ---------- */
+
+async function renderHistory() {
+  const entries = await getHistory();
+  els.historyCount.textContent = `${entries.length} track${entries.length === 1 ? '' : 's'}`;
+  if (!entries.length) {
+    els.historyList.innerHTML = '<li class="nt-track-empty">No tracks logged yet. Play a station for a minute and they\'ll appear here.</li>';
+    return;
+  }
+  // Newest first
+  const favs = await getFavourites();
+  const favSigs = new Set(favs.map(entrySignature));
+  els.historyList.innerHTML = '';
+  for (let i = entries.length - 1; i >= 0; i--) {
+    els.historyList.appendChild(renderTrackRow(entries[i], favSigs));
+  }
+}
+
+async function renderFavourites() {
+  const entries = await getFavourites();
+  els.favsCount.textContent = `${entries.length} favourite${entries.length === 1 ? '' : 's'}`;
+  if (!entries.length) {
+    els.favsList.innerHTML = '<li class="nt-track-empty">No favourites yet. Tap the star next to a history track to add it.</li>';
+    return;
+  }
+  const favSigs = new Set(entries.map(entrySignature));
+  els.favsList.innerHTML = '';
+  for (let i = entries.length - 1; i >= 0; i--) {
+    els.favsList.appendChild(renderTrackRow(entries[i], favSigs));
+  }
+}
+
+function renderTrackRow(entry, favSigs) {
+  const li = document.createElement('li');
+  li.className = 'nt-track-row';
+
+  // Main column — title (big), artist (accent), meta line
+  const main = document.createElement('div');
+  main.className = 'nt-track-main';
+
+  const title = document.createElement('div');
+  title.className = 'nt-track-title';
+  title.textContent = entry.title;
+  title.title = entry.title;
+
+  const artist = document.createElement('div');
+  artist.className = 'nt-track-artist';
+  artist.textContent = entry.artist;
+  artist.title = entry.artist;
+
+  const meta = document.createElement('div');
+  meta.className = 'nt-track-meta';
+  const station = entry.station || '—';
+  meta.textContent = `${station} · ${formatRelativeTime(entry.at)}`;
+
+  main.append(title, artist, meta);
+
+  // Right column — star + (future) overflow menu
+  const controls = document.createElement('div');
+  controls.className = 'nt-track-controls';
+
+  const fav = document.createElement('button');
+  fav.type = 'button';
+  fav.className = 'nt-fav-btn';
+  const isFav = favSigs.has(entrySignature(entry));
+  fav.setAttribute('aria-pressed', isFav ? 'true' : 'false');
+  fav.setAttribute('aria-label', isFav ? 'Remove from favourites' : 'Add to favourites');
+  fav.textContent = isFav ? '★' : '☆';
+  fav.addEventListener('click', async () => {
+    const nowFav = await toggleFavourite(entry);
+    fav.setAttribute('aria-pressed', nowFav ? 'true' : 'false');
+    fav.textContent = nowFav ? '★' : '☆';
+    fav.setAttribute('aria-label', nowFav ? 'Remove from favourites' : 'Add to favourites');
+    // Re-render favs tab so it reflects the change.
+    renderFavourites();
+  });
+
+  controls.appendChild(fav);
+
+  // Search-link row — spans full width below
+  const search = document.createElement('div');
+  search.className = 'nt-search-row';
+  const urls = searchUrls(entry.artist, entry.title);
+
+  const linkOf = (svc, label) => {
+    const a = document.createElement('a');
+    a.className = `nt-search-link nt-search-link--${svc}`;
+    a.href = urls[svc];
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer';
+    a.textContent = label;
+    a.title = `Search ${label} for "${entry.artist} — ${entry.title}"`;
+    return a;
+  };
+  search.append(
+    linkOf('spotify',  'Spotify'),
+    linkOf('youtube',  'YouTube'),
+    linkOf('apple',    'Apple'),
+    linkOf('bandcamp', 'Bandcamp'),
+  );
+
+  li.append(main, controls, search);
+  return li;
+}
@@ -1,31 +1,55 @@
 // RangerHQ Tuner — Offscreen audio host.
-// Owns the <audio> element. MV3 service workers can't host audio
-// (they get killed when idle), so all live media lives here.
+// Owns the <audio> element and the 25-second metadata polling loop.
+// MV3 service workers can't host audio (they get killed when idle),
+// so all live media + polling lives here.
+
+import { TARGETS, TYPES } from '../lib/messages.js';
+import { getSource } from '../sources/index.js';
+// NOTE: we intentionally do NOT import history.js here. chrome.storage is
+// not reliably available in offscreen documents across Chrome versions,
+// so we route writes through the service worker via LOG_TRACK_REQUEST.

 const audio = document.getElementById('player');

+// Poll interval matches rangerhq-radio's WP plugin — battle-tested at 25s.
+const POLL_MS = 25 * 1000;
+
+let pollTimer       = null;
+let currentStation  = null; // { id, sourceId, name, ... }
+let lastSeenSig     = '';   // dedupe metadata broadcasts within a session
+
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
-  if (msg.target !== 'offscreen') return;
+  if (msg.target !== TARGETS.OFFSCREEN) return;

  switch (msg.type) {
-    case 'PLAY':
+    case TYPES.PLAY:
+      currentStation = msg.station || null;
      audio.src = msg.streamUrl;
+      // Kick off metadata polling IMMEDIATELY — in parallel with audio
+      // buffering. The first poll fires now and broadcasts METADATA_UPDATED
+      // as soon as SomaFM responds (~500ms), instead of waiting 2-5s for
+      // the audio HTTP stream to fill its buffer.
+      startPolling();
      audio.play()
        .then(() => sendResponse({ ok: true }))
-        .catch(err => sendResponse({ ok: false, error: err.message }));
-      return true; // keep channel open for async sendResponse
+        .catch(err => {
+          sendResponse({ ok: false, error: err.message });
+          stopPolling();
+        });
+      return true; // async sendResponse

-    case 'PAUSE':
+    case TYPES.PAUSE:
      audio.pause();
+      stopPolling();
      sendResponse({ ok: true });
      break;

-    case 'SET_VOLUME':
+    case TYPES.SET_VOLUME:
      audio.volume = Math.max(0, Math.min(1, msg.volume));
      sendResponse({ ok: true });
      break;

-    case 'GET_STATE':
+    case TYPES.GET_STATE:
      sendResponse({
        ok: true,
        paused:     audio.paused,
@@ -36,13 +60,69 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  }
 });

-// Broadcast state changes to anyone listening (popup, SW).
-// If popup is closed, the send fails silently — that's fine.
-audio.addEventListener('playing', () => broadcast({ type: 'STATE_CHANGED', state: 'playing' }));
-audio.addEventListener('pause',   () => broadcast({ type: 'STATE_CHANGED', state: 'paused' }));
-audio.addEventListener('waiting', () => broadcast({ type: 'STATE_CHANGED', state: 'buffering' }));
-audio.addEventListener('error',   () => broadcast({ type: 'ERROR', code: audio.error?.code }));
+/* ---------- Audio events ---------- */
+
+audio.addEventListener('playing', () => broadcast({ type: TYPES.STATE_CHANGED, state: 'playing' }));
+audio.addEventListener('pause',   () => broadcast({ type: TYPES.STATE_CHANGED, state: 'paused' }));
+audio.addEventListener('waiting', () => broadcast({ type: TYPES.STATE_CHANGED, state: 'buffering' }));
+audio.addEventListener('error',   () => {
+  stopPolling();
+  broadcast({ type: TYPES.ERROR, code: audio.error?.code });
+});

 function broadcast(payload) {
-  chrome.runtime.sendMessage({ target: 'popup', ...payload }).catch(() => {});
+  chrome.runtime.sendMessage({ target: TARGETS.POPUP, ...payload }).catch(() => {});
+}
+
+/* ---------- Metadata polling + history logging ---------- */
+
+function startPolling() {
+  stopPolling();
+  pollNow(); // fire immediately so UI gets first metadata fast
+  pollTimer = setInterval(pollNow, POLL_MS);
+}
+
+function stopPolling() {
+  if (pollTimer) clearInterval(pollTimer);
+  pollTimer = null;
+  lastSeenSig = '';
+}
+
+async function pollNow() {
+  if (!currentStation) return;
+  const source = getSource(currentStation.sourceId);
+  if (!source) return;
+
+  let np;
+  try {
+    np = await source.getNowPlaying(currentStation);
+  } catch {
+    return;
+  }
+  if (!np || !np.title) return;
+
+  // Broadcast every poll where we have metadata, so the UI's track line
+  // is always current (even if the song hasn't changed, the popup might
+  // have been opened fresh and needs to render).
+  broadcast({ type: TYPES.METADATA_UPDATED, nowPlaying: np, station: currentStation });
+
+  // Log to history — but only when the (artist|title) changed since we
+  // last saw it within this play-session. The history.js layer also
+  // dedups against the persisted last entry, so this is belt + braces.
+  const sig = `${(np.artist || '').toLowerCase().trim()}|${(np.title || '').toLowerCase().trim()}`;
+  if (sig === lastSeenSig) return;
+  lastSeenSig = sig;
+
+  // Ask the service worker to do the actual storage write. The SW will
+  // broadcast TRACK_LOGGED back to the UI surfaces on success.
+  chrome.runtime.sendMessage({
+    target: TARGETS.SW,
+    type:   TYPES.LOG_TRACK_REQUEST,
+    entry: {
+      artist:    np.artist,
+      title:     np.title,
+      station:   currentStation.name,
+      stationId: currentStation.id,
+    },
+  }).catch(() => { /* SW asleep is fine — next poll will retry */ });
 }
@@ -0,0 +1,369 @@
+/* RangerHQ Tuner — Options page.
+   Same earthy palette as popup + newtab.
+*/
+
+:root {
+  --bg:         #0f1411;
+  --bg-soft:    #1a221c;
+  --bg-row:     #1f2823;
+  --bg-row-hi:  #2a3530;
+  --fg:         #e8e4d4;
+  --fg-muted:   #97a094;
+  --accent:     #6dbf7a;
+  --accent-dim: #2a7d3e;
+  --cream:      #f4e9b7;
+  --danger:     #c9685b;
+  --radius:     6px;
+}
+
+/* ──────────────────────────────────────────────────────────────────────
+   Light mode (v0.5.0) — auto-follows OS theme. Same approach as popup
+   + newtab: flip the :root vars only. Existing rules using var(--*)
+   carry over unchanged. Toast text + danger-button hover adjusted for
+   light-bg readability.
+   ────────────────────────────────────────────────────────────────────── */
+/* OS-follow light mode */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg:         #f6f4ed;
+    --bg-soft:    #ece5d2;
+    --bg-row:     #ddd6c0;
+    --bg-row-hi:  #c8c0a8;
+    --fg:         #2a2f28;
+    --fg-muted:   #6a7064;
+    --accent:     #2a7d3e;
+    --accent-dim: #6dbf7a;
+    --cream:      #b8861a;
+    --danger:     #b53a2b;
+  }
+  .opt-toast                    { color: #fff; }
+  .opt-toast[data-tone="error"] { color: #fff; }
+  .opt-btn--danger:hover        { color: #fff; }
+}
+
+/* Manual override — force LIGHT */
+html[data-theme="light"] {
+  --bg: #f6f4ed; --bg-soft: #ece5d2; --bg-row: #ddd6c0; --bg-row-hi: #c8c0a8;
+  --fg: #2a2f28; --fg-muted: #6a7064; --accent: #2a7d3e; --accent-dim: #6dbf7a;
+  --cream: #b8861a; --danger: #b53a2b;
+}
+html[data-theme="light"] .opt-toast                    { color: #fff; }
+html[data-theme="light"] .opt-toast[data-tone="error"] { color: #fff; }
+html[data-theme="light"] .opt-btn--danger:hover        { color: #fff; }
+
+/* Manual override — force DARK */
+html[data-theme="dark"] {
+  --bg: #0f1411; --bg-soft: #1a221c; --bg-row: #1f2823; --bg-row-hi: #2a3530;
+  --fg: #e8e4d4; --fg-muted: #97a094; --accent: #6dbf7a; --accent-dim: #2a7d3e;
+  --cream: #f4e9b7; --danger: #c9685b;
+}
+html[data-theme="dark"] .opt-toast                    { color: var(--bg); }
+html[data-theme="dark"] .opt-toast[data-tone="error"] { color: var(--cream); }
+html[data-theme="dark"] .opt-btn--danger:hover        { color: var(--cream); }
+
+/* Theme toggle UI (v0.5.0 Phase 2) */
+.opt-theme-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.opt-theme-row label {
+  flex: 1;
+  min-width: 90px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--bg-row-hi);
+  border-radius: var(--radius);
+  background: var(--bg-row);
+  cursor: pointer;
+  transition: border-color 120ms ease-out;
+}
+
+.opt-theme-row label:hover {
+  border-color: var(--accent);
+}
+
+.opt-theme-row input[type="radio"] {
+  margin: 0;
+  accent-color: var(--accent);
+}
+
+.opt-theme-row label:has(input:checked) {
+  border-color: var(--accent);
+  background: var(--bg-row-hi);
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  min-height: 100vh;
+}
+
+.opt-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 18px 28px;
+  background: var(--bg-soft);
+  border-bottom: 1px solid #000;
+}
+
+.opt-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  color: inherit;
+  padding: 4px 8px;
+  margin: -4px -8px;
+  border-radius: var(--radius);
+}
+
+.opt-brand:hover {
+  background: var(--bg-row);
+}
+
+.opt-brand:hover .opt-back {
+  color: var(--accent);
+  transform: translateX(-2px);
+}
+
+.opt-back {
+  font-size: 18px;
+  color: var(--fg-muted);
+  line-height: 1;
+  font-weight: 400;
+  transition: color 120ms ease-out, transform 120ms ease-out;
+}
+
+.opt-helmet {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+}
+
+.opt-brand h1 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.opt-version {
+  font-size: 11px;
+  color: var(--fg-muted);
+  letter-spacing: 0.5px;
+  padding: 3px 10px;
+  background: var(--bg-row);
+  border-radius: 999px;
+}
+
+.opt-main {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.opt-card {
+  background: var(--bg-soft);
+  border: 1px solid var(--bg-row);
+  border-radius: var(--radius);
+  padding: 20px 22px;
+}
+
+.opt-card h2 {
+  margin: 0 0 14px;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--accent);
+}
+
+.opt-note {
+  margin: 0 0 16px;
+  font-size: 12px;
+  color: var(--fg-muted);
+  line-height: 1.5;
+}
+
+.opt-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-bottom: 18px;
+}
+
+.opt-stat {
+  padding: 10px 14px;
+  background: var(--bg-row);
+  border-radius: 4px;
+}
+
+.opt-stat-label {
+  font-size: 10px;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 2px;
+}
+
+.opt-stat-value {
+  font-size: 14px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.opt-row {
+  margin: 16px 0;
+}
+
+.opt-row label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+
+.opt-row--inline {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--bg-row);
+  margin: 0;
+}
+
+.opt-row--inline:last-child { border-bottom: none; }
+
+.opt-row--inline label { margin-bottom: 0; }
+
+.opt-help {
+  display: block;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--fg-muted);
+  margin-top: 2px;
+}
+
+.opt-slider-wrap {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+#opt-cap {
+  flex: 1;
+  accent-color: var(--accent);
+}
+
+.opt-slider-value {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  min-width: 3em;
+  text-align: right;
+}
+
+.opt-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px solid var(--bg-row);
+}
+
+.opt-btn {
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 8px 16px;
+  background: var(--bg-row);
+  color: var(--fg);
+  border: 1px solid var(--bg-row-hi);
+  border-radius: var(--radius);
+  cursor: pointer;
+}
+
+.opt-btn:hover {
+  border-color: var(--accent);
+}
+
+.opt-btn--danger {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+
+.opt-btn--danger:hover {
+  background: var(--danger);
+  color: var(--cream);
+}
+
+.opt-about {
+  margin: 0 0 14px;
+  font-size: 13px;
+  color: var(--fg-muted);
+  line-height: 1.6;
+}
+
+.opt-about a, .opt-links a {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px dotted transparent;
+}
+
+.opt-about a:hover, .opt-links a:hover {
+  border-bottom-color: var(--accent);
+}
+
+.opt-links {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 12px;
+  color: var(--fg-muted);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 6px;
+}
+
+.opt-links strong {
+  color: var(--fg);
+  font-weight: 500;
+}
+
+.opt-toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--accent);
+  color: var(--bg);
+  padding: 10px 18px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.opt-toast[data-tone="error"] {
+  background: var(--danger);
+  color: var(--cream);
+}
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>RangerHQ Tuner — Options</title>
+  <link rel="stylesheet" href="options.css">
+  <link rel="icon" href="../assets/icons/icon-48.png">
+</head>
+<body>
+
+  <header class="opt-header">
+    <a href="../newtab/newtab.html" class="opt-brand" title="Back to RangerHQ Tuner">
+      <span class="opt-back" aria-hidden="true">←</span>
+      <img src="../assets/img/ranger.png" alt="" class="opt-helmet">
+      <h1>RangerHQ Tuner — Options</h1>
+    </a>
+    <span class="opt-version" id="opt-version">v—</span>
+  </header>
+
+  <main class="opt-main">
+
+    <section class="opt-card">
+      <h2>Local data</h2>
+      <p class="opt-note">Everything RangerHQ Tuner stores lives in your browser only. No data is sent anywhere.</p>
+
+      <div class="opt-stats">
+        <div class="opt-stat">
+          <div class="opt-stat-label">History</div>
+          <div class="opt-stat-value" id="opt-stat-history">— tracks</div>
+        </div>
+        <div class="opt-stat">
+          <div class="opt-stat-label">Favourites</div>
+          <div class="opt-stat-value" id="opt-stat-favs">— tracks</div>
+        </div>
+        <div class="opt-stat">
+          <div class="opt-stat-label">Stations cached</div>
+          <div class="opt-stat-value" id="opt-stat-cache">— stations</div>
+        </div>
+        <div class="opt-stat">
+          <div class="opt-stat-label">Total local data</div>
+          <div class="opt-stat-value" id="opt-stat-bytes">—</div>
+        </div>
+      </div>
+
+      <div class="opt-row">
+        <label for="opt-cap">
+          History cap
+          <span class="opt-help">How many recent tracks to keep before the oldest are dropped.</span>
+        </label>
+        <div class="opt-slider-wrap">
+          <input type="range" id="opt-cap" min="50" max="500" step="50" value="500">
+          <span class="opt-slider-value" id="opt-cap-value">500</span>
+        </div>
+      </div>
+
+      <div class="opt-actions">
+        <button id="opt-clear-history" class="opt-btn">Clear history</button>
+        <button id="opt-clear-favs"    class="opt-btn">Clear favourites</button>
+        <button id="opt-clear-all"     class="opt-btn opt-btn--danger">Clear EVERYTHING</button>
+      </div>
+    </section>
+
+    <section class="opt-card">
+      <h2>Appearance</h2>
+      <div class="opt-row">
+        <label>
+          Theme
+          <span class="opt-help">Auto follows your OS setting. Dark / Light overrides it.</span>
+        </label>
+        <div class="opt-theme-row" role="radiogroup" aria-label="Theme">
+          <label>
+            <input type="radio" name="opt-theme" value="auto" id="opt-theme-auto">
+            <span>Auto</span>
+          </label>
+          <label>
+            <input type="radio" name="opt-theme" value="dark" id="opt-theme-dark">
+            <span>Dark</span>
+          </label>
+          <label>
+            <input type="radio" name="opt-theme" value="light" id="opt-theme-light">
+            <span>Light</span>
+          </label>
+        </div>
+      </div>
+    </section>
+
+    <section class="opt-card">
+      <h2>Playback</h2>
+      <div class="opt-row opt-row--inline">
+        <label>Current volume</label>
+        <span id="opt-volume-display" class="opt-stat-value">—</span>
+      </div>
+      <div class="opt-row opt-row--inline">
+        <label>Last station</label>
+        <span id="opt-last-station" class="opt-stat-value">—</span>
+      </div>
+    </section>
+
+    <section class="opt-card">
+      <h2>About</h2>
+      <p class="opt-about">
+        RangerHQ Tuner is a lightweight indie internet radio player, sibling to
+        <a href="https://wordpress.org/plugins/rangerhq-radio/" target="_blank" rel="noopener">RangerHQ Radio</a>
+        on WordPress.org. No telemetry, no third-party JavaScript, GPL v2 or later.
+      </p>
+      <ul class="opt-links">
+        <li><strong>Repo:</strong> <a href="https://git.davidtkeane.com/ranger/rangerhq-tuner" target="_blank" rel="noopener">git.davidtkeane.com/ranger/rangerhq-tuner</a></li>
+        <li><strong>Maker:</strong> <a href="https://davidtkeane.com" target="_blank" rel="noopener">davidtkeane.com</a></li>
+        <li><strong>Stations:</strong> <a href="https://somafm.com" target="_blank" rel="noopener">SomaFM</a> — listener-supported indie radio</li>
+        <li><strong>Licence:</strong> GPL v2 or later</li>
+      </ul>
+    </section>
+
+    <p class="opt-toast" id="opt-toast" hidden></p>
+
+  </main>
+
+  <script type="module" src="options.js"></script>
+</body>
+</html>
@@ -0,0 +1,184 @@
+// RangerHQ Tuner — Options page controller.
+// Manages the user's local data: history cap, clear actions, stats display.
+// Broadcasts STORAGE_WIPED after destructive actions so the popup/newtab
+// rerender immediately.
+
+import { TARGETS, TYPES } from '../lib/messages.js';
+import {
+  getHistory, getFavourites,
+  getHistoryCap, setHistoryCap,
+  clearHistory, clearFavourites, clearAll,
+} from '../lib/history.js';
+import {
+  THEME_KEY, THEME_DEFAULT, VALID_THEMES,
+  getTheme, setTheme, applyTheme,
+} from '../lib/theme.js';
+
+const STORAGE_KEYS = {
+  stations:    'tuner.stationsCache',
+  currentId:   'tuner.currentStationId',
+  volume:      'tuner.volume',
+};
+
+const els = {
+  version:        document.getElementById('opt-version'),
+  statHistory:    document.getElementById('opt-stat-history'),
+  statFavs:       document.getElementById('opt-stat-favs'),
+  statCache:      document.getElementById('opt-stat-cache'),
+  statBytes:      document.getElementById('opt-stat-bytes'),
+  capSlider:      document.getElementById('opt-cap'),
+  capValue:       document.getElementById('opt-cap-value'),
+  clearHistory:   document.getElementById('opt-clear-history'),
+  clearFavs:      document.getElementById('opt-clear-favs'),
+  clearAll:       document.getElementById('opt-clear-all'),
+  volumeDisplay:  document.getElementById('opt-volume-display'),
+  lastStation:    document.getElementById('opt-last-station'),
+  toast:          document.getElementById('opt-toast'),
+};
+
+init().catch(err => {
+  console.error('Options init failed:', err);
+  toast(`Init failed: ${err.message}`, 'error');
+});
+
+async function init() {
+  els.version.textContent = `v${chrome.runtime.getManifest().version}`;
+
+  // Theme — apply stored preference + wire the radio group + listen for
+  // cross-surface changes (popup/newtab pick a theme → Options reflects).
+  await initThemeUI();
+
+  await refreshStats();
+  await refreshPlayback();
+
+  const cap = await getHistoryCap();
+  els.capSlider.value = String(cap);
+  els.capValue.textContent = String(cap);
+
+  els.capSlider.addEventListener('input', () => {
+    els.capValue.textContent = els.capSlider.value;
+  });
+  els.capSlider.addEventListener('change', async () => {
+    const newCap = await setHistoryCap(Number(els.capSlider.value));
+    els.capValue.textContent = String(newCap);
+    toast(`History cap set to ${newCap}`);
+    await refreshStats();
+  });
+
+  els.clearHistory.addEventListener('click', async () => {
+    if (!confirm('Clear all track history? Favourites will be preserved.')) return;
+    await clearHistory();
+    await refreshStats();
+    notifyUis();
+    toast('History cleared');
+  });
+
+  els.clearFavs.addEventListener('click', async () => {
+    if (!confirm('Clear all favourites?')) return;
+    await clearFavourites();
+    await refreshStats();
+    notifyUis();
+    toast('Favourites cleared');
+  });
+
+  els.clearAll.addEventListener('click', async () => {
+    if (!confirm('Wipe EVERYTHING — history, favourites, station cache, volume, last station? This cannot be undone.')) return;
+    await clearAll();
+    await refreshStats();
+    await refreshPlayback();
+    els.capSlider.value = '500';
+    els.capValue.textContent = '500';
+    notifyUis();
+    toast('All local data wiped', 'danger');
+  });
+
+  // Refresh stats live if storage changes from another surface
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area !== 'local') return;
+    if (changes[THEME_KEY]) {
+      const v = changes[THEME_KEY].newValue || THEME_DEFAULT;
+      applyTheme(v);
+      const radio = document.querySelector(`input[name="opt-theme"][value="${v}"]`);
+      if (radio) radio.checked = true;
+    }
+    if (Object.keys(changes).some(k => k.startsWith('tuner.'))) {
+      refreshStats();
+      refreshPlayback();
+    }
+  });
+}
+
+/** Apply the stored theme, check the matching radio, wire change handlers. */
+async function initThemeUI() {
+  const current = await getTheme();
+  applyTheme(current);
+  const checked = document.querySelector(`input[name="opt-theme"][value="${current}"]`);
+  if (checked) checked.checked = true;
+  for (const r of document.querySelectorAll('input[name="opt-theme"]')) {
+    r.addEventListener('change', async (e) => {
+      const v = e.target.value;
+      if (!VALID_THEMES.includes(v)) return;
+      await setTheme(v);
+      applyTheme(v);
+      toast(`Theme: ${v}`);
+    });
+  }
+}
+
+async function refreshStats() {
+  const [history, favs, all] = await Promise.all([
+    getHistory(),
+    getFavourites(),
+    chrome.storage.local.get(null),
+  ]);
+  const cacheArr = Array.isArray(all[STORAGE_KEYS.stations]) ? all[STORAGE_KEYS.stations] : [];
+
+  // Estimate "tuner.*" bytes — JSON stringification is close enough for
+  // a user-facing display, no need for the exact storage-engine cost.
+  let bytes = 0;
+  for (const [k, v] of Object.entries(all)) {
+    if (!k.startsWith('tuner.')) continue;
+    try { bytes += k.length + JSON.stringify(v).length; } catch { /* nope */ }
+  }
+
+  els.statHistory.textContent = `${history.length} tracks`;
+  els.statFavs.textContent    = `${favs.length} tracks`;
+  els.statCache.textContent   = `${cacheArr.length} stations`;
+  els.statBytes.textContent   = formatBytes(bytes);
+}
+
+async function refreshPlayback() {
+  const stored = await chrome.storage.local.get([
+    STORAGE_KEYS.volume,
+    STORAGE_KEYS.currentId,
+    STORAGE_KEYS.stations,
+  ]);
+  const vol = stored[STORAGE_KEYS.volume];
+  els.volumeDisplay.textContent = typeof vol === 'number'
+    ? `${Math.round(vol * 100)}%`
+    : '—';
+
+  const id = stored[STORAGE_KEYS.currentId];
+  const cache = Array.isArray(stored[STORAGE_KEYS.stations]) ? stored[STORAGE_KEYS.stations] : [];
+  const cur = cache.find(s => s.id === id);
+  els.lastStation.textContent = cur?.name || (id || '—');
+}
+
+function notifyUis() {
+  chrome.runtime.sendMessage({ target: TARGETS.POPUP, type: TYPES.STORAGE_WIPED })
+    .catch(() => {}); // no listeners is fine
+}
+
+function formatBytes(n) {
+  if (n < 1024)        return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+function toast(message, tone) {
+  els.toast.textContent = message;
+  els.toast.dataset.tone = tone || '';
+  els.toast.hidden = false;
+  clearTimeout(toast._t);
+  toast._t = setTimeout(() => { els.toast.hidden = true; }, 2400);
+}
@@ -14,8 +14,62 @@
  --cream:      #f4e9b7;
  --danger:     #c9685b;
  --radius:     6px;
+
+  /* First-run hint pulse colour (RGB tuple — alpha applied in keyframes). */
+  --pulse-rgb:  109, 191, 122;
 }

+/* ──────────────────────────────────────────────────────────────────────
+   Light mode (v0.5.0) — auto-follows OS theme via prefers-color-scheme.
+   Flips backgrounds + foregrounds to a cream-leaning palette while
+   preserving the brand green as the accent. Every existing rule that
+   uses the var(--*) tokens keeps working unchanged.
+   ────────────────────────────────────────────────────────────────────── */
+/* Shared light palette block — used as a mixin by the @media (OS-follow)
+   rule below AND by the html[data-theme="light"] manual override. */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg:         #f6f4ed;    /* cream-leaning off-white */
+    --bg-soft:    #ece5d2;    /* slightly darker for header bars */
+    --bg-row:     #ddd6c0;    /* hover background */
+    --bg-row-hi:  #c8c0a8;    /* active row background */
+    --fg:         #2a2f28;    /* dark forest-green-leaning text */
+    --fg-muted:   #6a7064;    /* muted secondary text */
+    --accent:     #2a7d3e;    /* darker brand green for primary contrast */
+    --accent-dim: #6dbf7a;    /* lighter brand green for fills */
+    --cream:      #b8861a;    /* darker amber — readable on light bg */
+    --danger:     #b53a2b;    /* darker red — readable on light bg */
+  }
+  .tuner-state[data-state="playing"]   { color: #fff; }
+  .tuner-state[data-state="buffering"] { color: #fff; }
+  .tuner-state[data-state="error"]     { color: #fff; }
+  .btn-primary[aria-pressed="true"]    { color: #fff; }
+}
+
+/* Manual override — force LIGHT palette regardless of OS. The attribute
+   selector beats both :root and the @media rule's :root on specificity. */
+html[data-theme="light"] {
+  --bg: #f6f4ed; --bg-soft: #ece5d2; --bg-row: #ddd6c0; --bg-row-hi: #c8c0a8;
+  --fg: #2a2f28; --fg-muted: #6a7064; --accent: #2a7d3e; --accent-dim: #6dbf7a;
+  --cream: #b8861a; --danger: #b53a2b;
+}
+html[data-theme="light"] .tuner-state[data-state="playing"]   { color: #fff; }
+html[data-theme="light"] .tuner-state[data-state="buffering"] { color: #fff; }
+html[data-theme="light"] .tuner-state[data-state="error"]     { color: #fff; }
+html[data-theme="light"] .btn-primary[aria-pressed="true"]    { color: #fff; }
+
+/* Manual override — force DARK palette regardless of OS. Overrides the
+   @media block when OS is light but user explicitly wants dark. */
+html[data-theme="dark"] {
+  --bg: #0f1411; --bg-soft: #1a221c; --bg-row: #1f2823; --bg-row-hi: #2a3530;
+  --fg: #e8e4d4; --fg-muted: #97a094; --accent: #6dbf7a; --accent-dim: #2a7d3e;
+  --cream: #f4e9b7; --danger: #c9685b;
+}
+html[data-theme="dark"] .tuner-state[data-state="playing"]   { color: var(--bg); }
+html[data-theme="dark"] .tuner-state[data-state="buffering"] { color: var(--bg); }
+html[data-theme="dark"] .tuner-state[data-state="error"]     { color: var(--cream); }
+html[data-theme="dark"] .btn-primary[aria-pressed="true"]    { color: var(--bg); }
+
 * { box-sizing: border-box; }

 html, body {
@@ -245,11 +299,55 @@ html, body {
  font-size: 12px;
 }

+/* Nav — quick-link row above the footer */
+.tuner-nav {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  background: var(--bg-soft);
+  border-top: 1px solid #000;
+  gap: 1px;
+}
+
+.tuner-nav-btn {
+  background: var(--bg-soft);
+  color: var(--fg-muted);
+  border: 0;
+  padding: 8px 4px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  font-family: inherit;
+}
+
+.tuner-nav-btn:hover {
+  background: var(--bg-row);
+  color: var(--fg);
+}
+
+.tuner-nav-btn:active {
+  background: var(--bg-row-hi);
+}
+
+.tuner-nav-icon {
+  font-size: 14px;
+  line-height: 1;
+  color: var(--accent);
+}
+
+.tuner-nav-label {
+  letter-spacing: 0.3px;
+}
+
 /* Footer */
 .tuner-footer {
  padding: 6px 12px;
  background: var(--bg-soft);
-  border-top: 1px solid #000;
+  border-top: 1px solid var(--bg-row);
  font-size: 10px;
  color: var(--fg-muted);
  text-align: center;
@@ -266,3 +364,38 @@ html, body {
 .station-list::-webkit-scrollbar-track {
  background: transparent;
 }
+
+/* ──────────────────────────────────────────────────────────────────────
+   First-run UX hint (v0.4.0)
+   When body.is-first-run is set (no station picked), the station list
+   subtly pulses with an accent-green glow and the now-playing area gets
+   a bouncing ↓ arrow pointing the user at the list. Both removed the
+   moment a station is picked, so existing users never see them again.
+   ────────────────────────────────────────────────────────────────────── */
+
+@keyframes tuner-pulse-glow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(109, 191, 122, 0); }
+  50%      { box-shadow: 0 0 0 4px rgba(109, 191, 122, 0.25); }
+}
+
+@keyframes tuner-bounce {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(3px); }
+}
+
+body.is-first-run .stations {
+  animation: tuner-pulse-glow 2.4s ease-in-out infinite;
+  border-radius: 6px;
+}
+
+body.is-first-run .np-track {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+body.is-first-run .np-track::after {
+  content: " ↓";
+  display: inline-block;
+  animation: tuner-bounce 1.8s ease-in-out infinite;
+  margin-left: 4px;
+}
@@ -36,6 +36,21 @@
    </ul>
  </section>

+  <nav class="tuner-nav" aria-label="Quick links">
+    <button id="nav-open-tab" class="tuner-nav-btn" type="button" title="Open full Tuner in a new tab">
+      <span class="tuner-nav-icon" aria-hidden="true">⎘</span>
+      <span class="tuner-nav-label">Open in tab</span>
+    </button>
+    <button id="nav-history" class="tuner-nav-btn" type="button" title="Open Tuner tab on the History pane">
+      <span class="tuner-nav-icon" aria-hidden="true">♪</span>
+      <span class="tuner-nav-label">History</span>
+    </button>
+    <button id="nav-options" class="tuner-nav-btn" type="button" title="Open extension settings">
+      <span class="tuner-nav-icon" aria-hidden="true">⚙</span>
+      <span class="tuner-nav-label">Settings</span>
+    </button>
+  </nav>
+
  <footer class="tuner-footer">
    <span>SomaFM • indie radio • no telemetry</span>
  </footer>
@@ -4,6 +4,7 @@

 import { TARGETS, TYPES } from '../lib/messages.js';
 import { listAllStations, getSource } from '../sources/index.js';
+import { THEME_KEY, THEME_DEFAULT, initTheme, applyTheme } from '../lib/theme.js';

 const els = {
  statePill:  document.getElementById('state-pill'),
@@ -13,8 +14,13 @@ const els = {
  volume:     document.getElementById('volume'),
  search:     document.getElementById('search'),
  list:       document.getElementById('station-list'),
+  navOpenTab: document.getElementById('nav-open-tab'),
+  navHistory: document.getElementById('nav-history'),
+  navOptions: document.getElementById('nav-options'),
 };

+const NEWTAB_URL = chrome.runtime.getURL('src/newtab/newtab.html');
+
 const STORAGE_KEYS = {
  stations:    'tuner.stationsCache',
  cachedAt:    'tuner.stationsCachedAt',
@@ -37,6 +43,10 @@ init().catch(err => {
 });

 async function init() {
+  // 0. Apply theme preference (v0.5.0) before anything paints, to avoid
+  // a brief dark flash if the user has picked light.
+  await initTheme();
+
  // 1. Hydrate UI from cached state so the popup renders fast.
  const stored = await chrome.storage.local.get(Object.values(STORAGE_KEYS));
  if (typeof stored[STORAGE_KEYS.volume] === 'number') {
@@ -64,6 +74,7 @@ async function init() {
  // 3. Restore current station selection.
  const currentId = stored[STORAGE_KEYS.currentId];
  currentStation = stations.find(s => s.id === currentId) || null;
+  reflectFirstRunHint();
  renderNowPlaying();

  // 4. Render station list.
@@ -77,6 +88,18 @@ async function init() {
    renderStations();
  });

+  // Nav buttons — popup closes automatically when a tab opens, which is
+  // the expected UX. No popup.close() call needed.
+  els.navOpenTab.addEventListener('click', () => {
+    chrome.tabs.create({ url: NEWTAB_URL });
+  });
+  els.navHistory.addEventListener('click', () => {
+    chrome.tabs.create({ url: `${NEWTAB_URL}#history` });
+  });
+  els.navOptions.addEventListener('click', () => {
+    chrome.runtime.openOptionsPage();
+  });
+
  // 6. Listen for state changes broadcast from offscreen.
  chrome.runtime.onMessage.addListener((msg) => {
    if (msg.target !== TARGETS.POPUP) return;
@@ -95,7 +118,31 @@ async function init() {
    }
  });

-  // 7. Enable the play button if we have a station picked.
+  // 7. Cross-surface sync — if the New Tab Page (or another popup
+  // instance) picks a station, mirror it here without a reload.
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area !== 'local') return;
+
+    if (changes[THEME_KEY]) {
+      applyTheme(changes[THEME_KEY].newValue || THEME_DEFAULT);
+    }
+
+    if (changes[STORAGE_KEYS.currentId] && stations.length) {
+      const newId = changes[STORAGE_KEYS.currentId].newValue;
+      currentStation = stations.find(s => s.id === newId) || null;
+      els.btnPlay.disabled = !currentStation;
+      reflectFirstRunHint();
+      renderNowPlaying();
+      renderStations();
+    }
+
+    if (changes[STORAGE_KEYS.isPlaying]) {
+      playing = !!changes[STORAGE_KEYS.isPlaying].newValue;
+      reflectPlayButton();
+    }
+  });
+
+  // 8. Enable the play button if we have a station picked.
  els.btnPlay.disabled = !currentStation;
 }

@@ -166,6 +213,7 @@ function renderNowPlaying() {
 async function onPickStation(station) {
  currentStation = station;
  els.btnPlay.disabled = false;
+  reflectFirstRunHint();
  await chrome.storage.local.set({ [STORAGE_KEYS.currentId]: station.id });
  renderNowPlaying();
  renderStations();
@@ -191,13 +239,17 @@ async function playCurrent() {
    const streamUrl = await source.resolveStreamUrl(currentStation);
    // Push current volume first so the first frame plays at the right level.
    await sendToSW({ type: TYPES.SET_VOLUME, volume: Number(els.volume.value) / 100 });
-    const resp = await sendToSW({ type: TYPES.PLAY, streamUrl });
+    // Pass a stripped station object — offscreen needs id/sourceId/name to
+    // poll metadata + label history entries; the rest is UI-only.
+    const stationLite = {
+      id:       currentStation.id,
+      sourceId: currentStation.sourceId,
+      name:     currentStation.name,
+    };
+    const resp = await sendToSW({ type: TYPES.PLAY, streamUrl, station: stationLite });
    if (!resp?.ok) throw new Error(resp?.error || 'PLAY failed');
-
-    // Fire-and-forget now-playing fetch.
-    source.getNowPlaying(currentStation).then(np => {
-      if (np) els.npTrack.textContent = formatNowPlaying(np);
-    }).catch(() => {});
+    // The offscreen poll loop will broadcast METADATA_UPDATED within ~1s,
+    // so we don't fire a separate one-shot fetch from here any more.
  } catch (err) {
    console.error(err);
    setState('error');
@@ -216,6 +268,14 @@ function reflectPlayButton() {
  els.btnPlay.textContent = playing ? '❚❚ Pause' : '▶ Play';
 }

+// v0.4.0 first-run UX hint — body class drives the pulse + arrow CSS in
+// popup.css. Active when no station has been picked yet; cleared the
+// moment a station is selected (here or in another surface via storage
+// sync).
+function reflectFirstRunHint() {
+  document.body.classList.toggle('is-first-run', !currentStation);
+}
+
 function setState(state) {
  els.statePill.dataset.state = state;
  els.statePill.textContent = state;
@@ -0,0 +1,36 @@
+# Chrome Web Store screenshots — RangerHQ Tuner v0.3.0
+
+Upload these in order at:
+**Dashboard → RangerHQ Tuner → Store listing → Screenshots**
+
+Spec met: **1280×800 PNG**, ≤ 5 images (Chrome Web Store requirement).
+
+| # | File | What it shows | Why it earns the slot |
+|---|---|---|---|
+| 1 | `screenshot-1-stations.png` | The full New Tab Page on the Stations tab — clock top-right (real-time), DEF CON Radio queued, Play button, eight quick-station chips, searchable browse list of SomaFM channels. | First impression. Shows the core product immediately. |
+| 2 | `screenshot-2-history.png` | The same New Tab Page on the **History** tab — 4 tracks logged with the **Spotify / YouTube / Apple / Bandcamp** search buttons per row clearly visible. | The headline feature — the single-purpose statement comes alive here. |
+| 3 | `screenshot-3-favourites.png` | The **Favourites** tab with a single starred track. | Demonstrates the star-toggle persistence and the per-user favourites surface. |
+| 4 | `screenshot-4-popup.png` | The **toolbar popup** in context (with the helmet icon visible in the Chrome address bar) showing the bottom nav row: **Open in tab / History / Settings**. | Anchors "where the extension lives" — the Chrome toolbar. |
+
+## Source files
+
+The original screen grabs (1376–1378 × 1155 PNGs) are archived at `../source/` and were processed with ImageMagick:
+
+```bash
+# NTP shots (1378×1156 → 1280×800)
+magick main-stations.png -crop 1378x950+0+0 -resize 1280x \
+  -gravity north -background "#0f1411" -extent 1280x800 screenshot-1-stations.png
+
+# Popup (367×590 → composed on 1280×800 dark canvas)
+magick extension.png -resize x740 \
+  -gravity center -background "#0f1411" -extent 1280x800 screenshot-4-popup.png
+```
+
+Same dark base colour `#0f1411` as the popup palette, so the Dashboard preview blends naturally with the extension's own visuals.
+
+## Optional follow-on assets (deferred)
+
+- **Promo tile** (440×280 PNG) — required by the Web Store for the listing tile in search/browse results. Not yet produced.
+- **Marquee tile** (1400×560 PNG) — optional but Google promotes extensions with marquee assets more often. Not yet produced.
+
+Both can be generated from `../source/` plus the helmet logo at `../../src/assets/img/ranger.png` whenever ready.
Author	SHA1	Message	Date
ranger	c3e3cc16fd	chore: v0.5.0 — bump version + CHANGELOG entry manifest.json 0.4.0 → 0.5.0. CHANGELOG.md entry documents three bundled UX improvements: - Light mode (Phase 1 auto-follow + Phase 2 manual toggle) - Options → Tuner back-link - Theme sync across all three surfaces Zero new permissions, zero new dependencies, zero behaviour change for existing users (theme defaults to auto = matches v0.4.0 in dark-OS browsers, which is most installs). Bundled because v0.4.0 was still in re-review during the work + ship discipline calls for fewer larger updates over rapid-fire micro- updates. Same-account re-review window per Web Store rules.	2026-06-10 00:22:16 +01:00
ranger	7c476315f5	Merge v0.5.0-prep — light mode + back-link + theme toggle	2026-06-10 00:21:11 +01:00
ranger	d0d5e76abe	feat(v0.5.0-prep): manual theme toggle (Phase 2) Adds an Auto / Dark / Light radio group to the Options page that overrides the OS `prefers-color-scheme` setting. Stored in chrome.storage.local under tuner.theme. Defaults to Auto. Architecture: - src/lib/theme.js (new, ~55 lines) — getTheme/setTheme/applyTheme/initTheme helpers. applyTheme sets/removes `data-theme` attribute on <html>; initTheme reads storage + applies. - popup.js + newtab.js + options.js: call initTheme() FIRST in their init() so the theme paints before anything else. All three also listen for chrome.storage.onChanged on the THEME_KEY and live-apply changes — pick Light in Options, popup + newtab flip instantly. - options.html: new 'Appearance' card with 3 radio buttons (Auto/Dark/ Light) above the existing Playback card. - options.css: styled radio group (pill-shaped, accent border on :checked, hover state). Plus the Auto/Dark/Light CSS overrides themselves. - popup.css, newtab.css, options.css: each gets html[data-theme=light] and html[data-theme=dark] blocks that override :root vars. Attribute selector specificity beats both :root and the @media :root, so the manual override wins when set. UX: - Default = Auto (follows OS via existing @media block) - Pick Dark → overrides OS, forces dark palette - Pick Light → overrides OS, forces light palette - Selection persists across reloads, syncs across all three surfaces 7 files, ~150 lines added. No new permissions, no new dependencies. Bundled with v0.4.1-prep back-link + Phase 1 OS-follow light mode for the v0.5.0 release.	2026-06-10 00:13:07 +01:00
ranger	5510cebde1	feat(v0.5.0-prep): light mode support across all three surfaces Implements the v0.4.0-plan-noted light mode using `@media (prefers-color-scheme: light)` blocks that override the :root CSS variables. The extension now auto-follows the user's OS theme — no toggle, no setting, no preference UI required (Phase 2 toggle deferred to a later release if anyone asks for it). Light-mode palette preserves brand identity: --bg #f6f4ed cream-leaning off-white --bg-soft #ece5d2 header / footer bars --bg-row #ddd6c0 hover backgrounds --bg-row-hi #c8c0a8 active rows --fg #2a2f28 dark forest-green-leaning text --fg-muted #6a7064 secondary text --accent #2a7d3e darker brand green (primary on light) --accent-dim #6dbf7a lighter brand green (secondary) --cream #b8861a darker amber — readable on light bg --danger #b53a2b darker red — readable on light bg Every existing CSS rule using var(--*) tokens carries over unchanged. The only surface-specific overrides are: - State pills (popup + newtab) — text colour flips to white when the background becomes solid accent/cream/danger - Primary play button (pressed state) — text colour flips - Helmet watermark on NewTab — opacity bumped 0.025 → 0.04 via a new --watermark-opacity var since the helmet contrasts differently against the lighter background - Toast (Options) — text colour flips to white on solid bg - Danger button hover (Options) — text colour flips to white Total: 3 files, +98 lines, 1 line modified. Bundled with the v0.4.1-prep back-link fix already merged into this branch. Together: a complete UX polish release (first-run hint shipped in v0.4.0 plus back-link plus light mode = v0.5.0).	2026-06-09 23:54:09 +01:00
ranger	eb6901f722	Merge v0.4.1-prep — Options page back-link to Tuner UI	2026-06-09 23:51:11 +01:00
ranger	41f42f1048	feat(v0.4.1-prep): back link from Options page to Tuner main UI David flagged 2026-06-09 night: 'when i click the settings button i go to settings but we have no back link to radio'. Real UX gap — Options was a one-way trip. The popup auto-closes on launch and the NewTab is in a different tab, so there was no obvious way back. Fix: the existing brand header (helmet + 'RangerHQ Tuner — Options' title) is now a single anchor pointing at newtab.html. Adds a small ← glyph to the left of the helmet that hover-shifts left + colour-shifts to accent green for a clear back-affordance. Same-tab navigation (just an href, no chrome.tabs.create) so the user doesn't accumulate Tuner tabs. They came IN via Options, they go OUT into the player UI in the same tab. Aria: the ← is hidden from screen readers (decorative); the title attribute on the anchor gives the accessible label. 2 files, +24 lines, 4 lines modified in existing .opt-brand block. Branch: v0.4.1-prep — not for immediate ship since v0.4.0 is still in Web Store re-review. Bundle this with light-mode + other polish into v0.5.0 OR ship as quick v0.4.1 patch after v0.4.0 clears.	2026-06-09 23:42:42 +01:00
ranger	f796fe8223	chore: v0.4.0 — bump version + CHANGELOG entry manifest.json version 0.3.0 → 0.4.0. CHANGELOG.md entry for v0.4.0 documents the first-run UX hint feature (merged in `b82f14e` via v0.4.0-prep branch). Zero new permissions, zero new dependencies, zero behaviour change for existing users. Shipped the same day v0.3.0 went LIVE on Chrome Web Store (~15.5h after submission). Same-account update review window is ~24-48h per the reference_chrome_web_store_rules memory.	2026-06-09 22:15:17 +01:00
ranger	afaff271a4	Merge v0.4.0-prep — first-run UX hint	2026-06-09 22:14:15 +01:00
ranger	b82f14ee7b	feat(v0.4.0-prep): first-run UX hint — pulse + bouncing arrow The 'pick a station to begin' state was too subtle on first install (David's own 30-second panic moment when he uninstalled the dev build and reinstalled from the Web Store, 2026-06-09 evening). Two layered cues, both pure CSS driven by a body.is-first-run class: 1. Subtle accent-green glow pulses around: - popup: the station list section - newtab: the Quick Stations chip row (rgba alpha 0.18-0.25, 2.4s ease-in-out infinite — visible but not noisy) 2. Bouncing ↓ arrow appended to the 'Pick a station to begin' text in both surfaces (after-pseudo with translateY animation). The is-first-run class is toggled in popup.js + newtab.js via a new reflectFirstRunHint() function called from: - init() once stations + currentStation are resolved - onPickStation() the moment a user picks - the chrome.storage.onChanged listener when another surface picks (so the hint disappears on both surfaces simultaneously) Existing users with stored currentStationId never see either cue — the class only attaches when currentStation is null. Working on branch v0.4.0-prep so the live main (= what shipped to Web Store v0.3.0) is unchanged. Merge to main when ready to bump the manifest version + readme.txt + CHANGELOG.md for v0.4.0 release.	2026-06-09 22:05:55 +01:00
ranger	9695d9d341	🎉 RangerHQ Tuner v0.3.0 LIVE on Chrome Web Store Approved + published 2026-06-09 ~17:08 Dublin, ~15.5 hours after submission. Extension ID bmdmepddehnpbdffkblbjofgkllmpkgp. Install URL: https://chromewebstore.google.com/detail/bmdmepddehnpbdffkblbjofgkllmpkgp - Replaced static 'in review' badge with three LIVE auto-updating Chrome Web Store badges (version, users count, rating) - Added install-link callout above the description	2026-06-09 17:14:32 +01:00
ranger	3259ece909	docs(readme): add shields.io badge row (v0.3.0 + Manifest V3 + last-commit + license + no-telemetry + Dublin)	2026-06-09 02:36:29 +01:00
ranger	24cbfbe746	chore: remove WEB_STORE_SUBMISSION.md from public repo Internal submission notes — paste copy for the Chrome Web Store Dashboard plus reviewer-targeted permission justifications. No reason for random repo visitors to read it. Local file stays on disk for quick-reference during future updates; .gitignore prevents accidental re-add.	2026-06-09 01:22:38 +01:00
ranger	6f06ea73d1	docs: 1000-char Single Purpose + permission justifications David's first-pass through the Dashboard revealed that the Single Purpose field, and each permission justification field, have a 1000-char cap (not the much smaller cap I had assumed from looking at older Web Store docs). Rewrote each to use roughly 900 chars of the budget — gives reviewers the technical detail they need to verify the code matches the claims. - Single Purpose (970 chars) — 3 numbered things the extension does, what it explicitly does not do (no SDK, no analytics, no remote). - offscreen (976 chars) — why MV3 needs offscreen for audio, with the developer.chrome.com pointer for the reviewer to verify. - storage (867 chars) — per-key inventory + Options-page wipe path + privacy policy URL for cross-reference. - somafm.com host (910 chars) — exact endpoints listed, what we do NOT send with the requests, SomaFM's community-friendly stance. - Added: 'I am not using remote code' note for the cert checkbox.	2026-06-09 01:15:28 +01:00
ranger	f56649073d	docs(store): add 128x128 store-listing icon Dedicated Web Store listing icon, separate from the manifest icons in the .zip. Same source helmet (src/assets/img/ranger.png) but resized tighter to 116x116 with 6px breathing room on a #1a221c square — reads better at listing thumbnail size than the toolbar icon's heavier padding.	2026-06-09 01:05:31 +01:00
ranger	484191a974	fix: trim manifest description to 124 chars (Chrome Web Store 132 cap) The Chrome Web Store enforces a 132-character limit on the manifest description field. The v0.3.0 description was 195 chars and got rejected on upload. Trimmed to the same wording as the listing short description in WEB_STORE_SUBMISSION.md §2. The longer 1500-char marketing description still lives in §3 of the submission notes and goes in the Dashboard's 'Detailed description' field at listing time.	2026-06-09 00:53:55 +01:00
ranger	db71abe525	docs(store): add promo tile (440x280) and marquee (1400x560) Both generated from the RangerHQ helmet logo + Arial typography on the extension's own #0f1411 dark palette so the Dashboard preview blends naturally with the screenshots. - promo-tile-440x280.png: helmet anchor left, "RangerHQ Tuner" cream bold + "Indie radio in your toolbar" accent green + "SomaFM · No telemetry · GPL v2+" muted footer. Web Store requires this size for search/browse listing tile. - marquee-1400x560.png: same idea scaled up. Optional asset; Google promotes extensions with marquees more often. ImageMagick recipe documented in store/screenshots/README.md.	2026-06-09 00:51:18 +01:00
ranger	c3e5060199	docs(store): add Chrome Web Store screenshots (4× 1280×800 PNG) Web Store-spec screenshots for Dashboard upload, generated from David's screen grabs taken on the live v0.3.0 build. Screenshots (1280×800 PNG, the Chrome Web Store required size): 1. Stations tab — DEF CON Radio + quick chips + browse list 2. History tab — the headline 4-button-search feature with 4 tracks already logged (Spotify / YouTube / Apple / Bandcamp) 3. Favourites tab — starred-track persistence demo 4. Toolbar popup — composed on a dark canvas, helmet icon visible in the Chrome address bar above ImageMagick recipe: - NTP shots: crop bottom Chrome chrome (1378x950+0+0), resize to width 1280, north-anchored extent to 1280x800 - Popup: resize to height 740, center on 1280x800 canvas with palette-matching #0f1411 background Source originals archived under store/source/ for regeneration. No code changes — extension behaviour unchanged.	2026-06-09 00:46:08 +01:00
ranger	baaa5e527d	docs: add LICENSE (GPL v2), PRIVACY.md, and WEB_STORE_SUBMISSION.md Prep for Chrome Web Store first submission. No code changes — v0.3.0 behaviour unchanged. - LICENSE — full GPL v2 text, matches RangerHQ WP family. - PRIVACY.md — canonical privacy policy. "Collects nothing, stores everything locally" using Google's data-category vocabulary so the Dashboard Privacy Practices tab can be ticked uniformly "does not collect" across all 9 categories. - WEB_STORE_SUBMISSION.md — paste-ready Dashboard copy: single-purpose statement, 132-char short + 1500-char detailed description, permission justifications for offscreen + storage + somafm.com host, build ZIP command, screenshot brief, post-approval update workflow. The public version of the privacy policy will live at davidtkeane.com/rangerhq-tuner/privacy (HTML mirror of PRIVACY.md).	2026-06-09 00:32:44 +01:00
ranger	ad43df87c0	feat: v0.3.0 — history, 4-button search, options page, newtab override Web Store submission target. Mirrors rangerhq-radio's track-history pattern (inc/history.php) so the family stays coherent across surfaces. Highlights - New Tab Page override (Tier 2.5) — Chrome's default new tab replaced with a RangerHQ-branded landing showing the player, current track, quick chips, searchable browse list, and now history + favourites tabs. - Track history + favourites — capped FIFO 500, dedup against last entry, skip "(unknown)" artist (SomaFM dead-air). Stored in chrome.storage.local under tuner.history + tuner.favourites. - 4-button search per entry — Spotify / YouTube / Apple Music / Bandcamp. Pure public-search-URL link-outs in a new tab, NO auth, NO API keys, NO quota, NO third-party SDK embedded. - Options page (chrome://extensions → details → options) — live stats, history cap slider (50-500), Clear history / Clear favourites / Clear EVERYTHING buttons, About panel with Gitea + davidtkeane.com links. - Popup nav row — Open in tab / History (#hash deep link) / Settings, using chrome.tabs.create + chrome.runtime.openOptionsPage. No new perms. - Cross-surface sync — popup ↔ newtab listen on chrome.storage.onChanged for tuner.currentStationId / tuner.isPlaying / history / favourites. - Storage gateway — offscreen doc can't reliably reach chrome.storage in some Chrome versions, so it sends LOG_TRACK_REQUEST to the SW which does the write. history.js also defensively guards every storage call. - Metadata latency fix — polling now starts immediately on PLAY, in parallel with audio buffer fill. First track display drops from ~10-15s to ~1-2s. Permissions unchanged - Still ["offscreen", "storage"] + somafm.com host only. - chrome.tabs.create works on our own extension URLs without "tabs" perm. - No webRequest, no <all_urls>, no third-party SDK. Bumped from 0.1.0 (last tag on Gitea) directly to 0.3.0. v0.2.0 (newtab + clock) was a working local build but never tagged; its features ship together with v0.3.0 in this single commit.	2026-06-09 00:23:36 +01:00