docs(privacy): add tuner.theme + tuner.quickStations to storage key list

Effective date bumped 2026-06-09 → 2026-06-10. Two new storage keys
added by v0.5.0 + v0.5.3 are now documented:

- tuner.theme — user's chosen theme preference (auto/dark/light)
- tuner.quickStations — user's Quick Stations picks

Neither key changes the privacy story (still all local, still no
data transmitted). Just keeping the per-key inventory honest.

The davidtkeane.com privacy.html mirror has the same edits and
will be uploaded separately by David.

.gitignore

@@ -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

CHANGELOG.md

@@ -7,11 +7,255 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
 
 ## [Unreleased]
 
-### Planned — Tier 3 (Chrome Web Store submission)
-- Listing assets: 1280x800 screenshots, 440x280 promo tile
-- Privacy policy URL published at `davidtkeane.com/rangerhq-tuner/privacy`
-- 2-Step Verification on Google account
-- $5 dev fee + submission
+### Planned — Long-term
+- `.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.3] — 2026-06-10 — User-customizable Quick Stations + history export ("app is done")
+
+Per David: *"this app is kinda done"* — meaning the product surface is feature-complete. After this version, polish remains but no headline features are missing.
+
+### Added — User-customizable Quick Stations
+
+Pure-data architecture: the NewTab Quick Stations chip row is now driven by `tuner.quickStations` in `chrome.storage.local` rather than a hardcoded `QUICK_IDS` array. **Default 8 (tidy 2-row layout, matches v0.4.0 look).** User can pick any subset of all 46 SomaFM channels via a new Options page card.
+
+**Where:** new "Quick Stations" card on the Options page (sits between Appearance and Playback). Layout: helper text + selected-count badge + scrollable checkbox list + Reset-to-defaults button.
+
+**Each list row** shows: checkbox + station name + genre pill (accent green, uppercase) + the SomaFM channel description (the same string available as a chip-hover tooltip on the NewTab — now properly visible at the time of picking).
+
+**Live sync:** ticking a checkbox writes to `chrome.storage.local`. The NewTab `chrome.storage.onChanged` listener picks up the change and re-renders the Quick Stations chip row instantly without a reload. Cross-surface consistency is the same pattern as theme + station selection.
+
+**Robust fresh-install fallback:** if Options is opened BEFORE the NewTab has ever populated the station catalogue cache, `initQuickStationsUI` fetches SomaFM channels directly via `listAllStations()` then caches the result back to `tuner.stationsCache`. Future Options opens are then instant.
+
+**Empty-pick case:** if the user unticks everything, the Quick Stations row on the NewTab shows *"No Quick Stations picked — set some in ⚙ Settings."* instead of a silently empty section.
+
+### Added — History export (JSON + CSV)
+
+Two new buttons in the Local Data card: **Export history (JSON)** and **Export history (CSV)**.
+
+- **JSON**: full pretty-printed array of `tuner.history` entries. Best for programmatic re-import or backup.
+- **CSV**: RFC 4180 quoted (every cell quoted, doubled quotes for embedded quotes). Header: `artist,title,station,station_id,when_iso`. Opens cleanly in Excel / Numbers / Google Sheets.
+
+Filename: `rangerhq-tuner-history-YYYY-MM-DD.{ext}`.
+
+Empty-history case shows an error toast ("No history to export yet — play some music first"). Success case shows a green toast with the export count and format.
+
+No new permissions — uses standard `Blob` + `URL.createObjectURL` + a programmatic `<a>` click. The entire export runs client-side in the Options page; nothing is sent off-device.
+
+### New / changed files
+
+- `src/lib/quick-stations.js` (NEW, ~55 lines) — `DEFAULT_QUICK_IDS` constant + `getQuickStations / setQuickStations / resetQuickStations` helpers. Same defensive `storage()` accessor pattern as `lib/history.js` and `lib/theme.js`.
+- `src/newtab/newtab.js` — removed hardcoded `QUICK_IDS` array, replaced with module-level `quickIds = []` populated during `init()` from `getQuickStations()` and re-loaded when `chrome.storage.onChanged` fires on `tuner.quickStations`. `renderQuick()` shows the empty-pick fallback message.
+- `src/options/options.html` — new "Quick Stations" card + two export buttons in the Local Data card.
+- `src/options/options.css` — ~90 lines for the picker (scrollable list, row layout, accent-coloured count badge, hover background, brand scrollbar).
+- `src/options/options.js` — `initQuickStationsUI` builds the checkbox list, `onQuickStationToggle` persists picks, `exportHistoryAs` generates the download Blob. Plus the storage.onChanged listener was made async to support cross-surface picker sync.
+
+Total: 5 files, +372 / -25 lines (1 new file).
+
+### Not changed
+
+- No new permissions
+- No new host_permissions
+- No new external libraries / SDKs
+- No data migration required
+- Existing user state (current station / volume / history / favourites / theme) survives intact
+- Defaults match v0.4.0's curated Quick Stations exactly — users who never open Options get the same look they had before
+
+### Workflow note
+
+This release was bundled into v0.5.0's eventual Web Store upload — when v0.5.0 clears re-review, we build a v0.5.3 ZIP directly from main and upload that instead. Users at v0.4.0 jump straight to v0.5.3 (skipping v0.5.0, v0.5.1, v0.5.2) and get all the polish in a single update notification.
+
+---
+
+## [0.5.2] — 2026-06-10 — Quick Stations fix: replace retired BAGeL with PopTron
+
+Hotfix for v0.5.1's Quick Stations row. David flagged: *"the stations still look a bit off"* — turned out only 13 chips were rendering instead of the intended 14. Investigation showed **BAGeL Radio has been retired from SomaFM's current `channels.json` catalogue** — the render loop's "drop missing slugs silently" behaviour (working as designed) made the chip just disappear.
+
+### Changed
+
+- `src/newtab/newtab.js` `QUICK_IDS` array: `'bagel'` → `'poptron'`. PopTron (alternative / alt-rock) fills the same indie/alt-rock genre slot BAGeL covered, and is currently a live SomaFM channel.
+
+### Result
+
+14 chips visible again. Layout reads cleaner — 6+6+2 instead of 6+6+1 (ThistleRadio no longer alone on its own row).
+
+### No other change
+
+- No CSS, no permissions, no dependencies, no behaviour change
+- Single one-line edit in `QUICK_IDS`
+- Still held from Chrome Web Store upload until v0.5.0 clears re-review
+
+### Lesson — SomaFM channel catalogue is mutable
+
+Channels can be retired at any time. The render loop's "drop missing slugs silently" pattern protects against this, but the developer-side responsibility is to verify slugs against the live `channels.json` before adding to QUICK_IDS:
+
+```bash
+curl -s https://somafm.com/channels.json | python3 -c "import json,sys; print([c['id'] for c in json.load(sys.stdin)['channels']])"
+```
+
+---
+
+## [0.5.1] — 2026-06-10 — Quick Stations expansion (8 → 14)
+
+Third update of the day. **Tagged on Gitea but held from Chrome Web Store upload until v0.5.0 clears re-review** — we want the v0.5.0 features (light mode + theme toggle + back-link + first-run UX hint) landing in users' browsers before this stations expansion piles on top.
+
+### Added — 6 more channels in the NewTab Quick Stations chip row
+
+Was reading sparse with only 8 chips. The row had space for more. Added six channels for broader genre coverage + two on-brand picks:
+
+| Slug | Channel | Why |
+|---|---|---|
+| `defcon` | DEF CON Radio | Electronic / hacker culture — David's personal favourite, on-brand for a cybersecurity-adjacent extension |
+| `beatblender` | Beat Blender | Electronic / breakbeat — popular channel |
+| `bootliquor` | Boot Liquor | Americana / outlaw country — adds country/twang coverage |
+| `u80s` | Underground 80s | 80s indie / synthwave — adds decade coverage |
+| `bagel` | BAGeL Radio | Indie / alt-rock — guitar-driven indie |
+| `thistle` | ThistleRadio | Celtic / folk — 🇮🇪 Dublin-built nod |
+
+Total chip count: 8 → 14. No new files, no new permissions, no new dependencies, no code change other than the `QUICK_IDS` array in `src/newtab/newtab.js`.
+
+The render loop already drops any slug missing from SomaFM's `channels.json` catalogue, so if a channel is retired upstream the chip just disappears silently — no error, no broken state.
+
+### Files touched
+
+- `src/newtab/newtab.js` — `QUICK_IDS` array updated from 8 to 14 entries, with per-slug genre comments. +19 / -8 lines.
+
+Total: 1 file, +19/-8 lines.
+
+### Not changed
+
+- No new permissions
+- No new dependencies
+- No CSS / HTML changes
+- No data migration
+
+### Shipping note
+
+`v0.5.1` is tagged on Gitea on 2026-06-10 but **deliberately held from the Chrome Web Store** until `v0.5.0` clears re-review (currently pending). David's reasoning: *"we will ship to web store after the last one gets accepted, that one is important so a user knows what to do"* — the v0.5.0 first-run hint + light mode features are higher-value for new users; this stations expansion is a smaller polish that should land after.
+
+---
+
+## [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.
 
 ---
 

LICENSE

@@ -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.

PRIVACY.md

@@ -0,0 +1,123 @@
+# Privacy Policy — RangerHQ Tuner
+
+**Effective date:** 2026-06-10
+**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 |
+| `tuner.theme` | Your theme preference (`auto` / `dark` / `light`) | Configurable on the Options page; default `auto` follows OS |
+| `tuner.quickStations` | The SomaFM channel short IDs you chose to surface in the New Tab Page Quick Stations row | Configurable on the Options page; default is a curated 8 |
+
+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.*

README.md

@@ -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).

manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "RangerHQ Tuner",
-  "version": "0.3.0",
-  "description": "Lightweight indie internet radio player. Plays SomaFM in your toolbar, logs the tracks you hear, and gives you one-click search links to Spotify, YouTube, Apple Music, and Bandcamp. No telemetry.",
+  "version": "0.5.3",
+  "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": {

src/lib/quick-stations.js

@@ -0,0 +1,58 @@
+// RangerHQ Tuner — Quick Stations preference helpers (v0.5.3).
+//
+// The user picks which SomaFM channels appear in the Quick Stations chip
+// row on the New Tab Page. Stored in chrome.storage.local under
+// `tuner.quickStations` as an array of SomaFM short ids
+// (e.g. ['groovesalad', 'defcon', ...]). If the key is missing, the
+// DEFAULT_QUICK_IDS below are used — a tidy 8 that wraps to 2 rows on
+// most viewports.
+//
+// Cross-surface sync: NewTab's `chrome.storage.onChanged` listener picks
+// up changes so toggling a checkbox in Options re-renders the chip row
+// instantly without a reload.
+
+export const QUICK_STATIONS_KEY = 'tuner.quickStations';
+
+// 8 curated defaults — the same set Tuner v0.4.0 shipped with. Chosen
+// for genre breadth (chill / ambient / indie / lounge / space / vocal /
+// ambient / electronic) and to fit a tidy 2-row chip layout.
+export const DEFAULT_QUICK_IDS = Object.freeze([
+  'groovesalad',
+  'dronezone',
+  'indiepop',
+  'secretagent',
+  'spacestation',
+  'lush',
+  'deepspaceone',
+  'fluid',
+]);
+
+function storage() {
+  if (typeof chrome === 'undefined') return null;
+  if (!chrome.storage || !chrome.storage.local) return null;
+  return chrome.storage.local;
+}
+
+/** Read the user's chosen quick-station list, falling back to defaults. */
+export async function getQuickStations() {
+  const s = storage();
+  if (!s) return [...DEFAULT_QUICK_IDS];
+  const o = await s.get(QUICK_STATIONS_KEY);
+  const v = o[QUICK_STATIONS_KEY];
+  return Array.isArray(v) ? v.filter(x => typeof x === 'string') : [...DEFAULT_QUICK_IDS];
+}
+
+/** Persist the user's chosen quick-station list. Empty array = no quick chips. */
+export async function setQuickStations(ids) {
+  const s = storage();
+  if (!s) return;
+  const arr = Array.isArray(ids) ? ids.filter(x => typeof x === 'string') : [];
+  await s.set({ [QUICK_STATIONS_KEY]: arr });
+}
+
+/** Wipe the preference so the default-8 is used again. */
+export async function resetQuickStations() {
+  const s = storage();
+  if (!s) return;
+  await s.remove(QUICK_STATIONS_KEY);
+}

src/lib/theme.js

@@ -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());
+}

src/newtab/newtab.css

@@ -17,8 +17,58 @@
   --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 {
@@ -40,7 +90,7 @@ body::before {
   background-repeat: no-repeat;
   background-position: center;
   background-size: min(60vh, 600px);
-  opacity: 0.025;
+  opacity: var(--watermark-opacity);
   pointer-events: none;
   z-index: 0;
 }
@@ -585,3 +635,39 @@ body::before {
   .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;
+}

src/newtab/newtab.js

@@ -13,6 +13,8 @@ import {
   searchUrls, formatRelativeTime,
   entrySignature,
 } from '../lib/history.js';
+import { THEME_KEY, THEME_DEFAULT, initTheme, applyTheme } from '../lib/theme.js';
+import { QUICK_STATIONS_KEY, getQuickStations } from '../lib/quick-stations.js';
 
 const els = {
   // Clock
@@ -54,18 +56,11 @@ const STORAGE_KEYS = {
 
 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',
-];
+// Quick-pick stations come from chrome.storage.local under tuner.quickStations,
+// with DEFAULT_QUICK_IDS as fallback (8 curated for tidy 2-row layout).
+// User can pick their own set in the Options page's "Quick Stations" card.
+// See src/lib/quick-stations.js for the persistence helpers + defaults.
+let quickIds = [];
 
 let stations = [];
 let currentStation = null;
@@ -80,7 +75,11 @@ init().catch(err => {
 });
 
 async function init() {
-  // Clock first — visible even before stations load.
+  // 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
 
@@ -108,7 +107,9 @@ async function init() {
 
   const currentId = stored[STORAGE_KEYS.currentId];
   currentStation = stations.find(s => s.id === currentId) || null;
+  reflectFirstRunHint();
   renderNow();
+  quickIds = await getQuickStations();
   renderQuick();
   renderList();
 
@@ -180,10 +181,20 @@ async function init() {
   chrome.storage.onChanged.addListener(async (changes, area) => {
     if (area !== 'local') return;
 
+    if (changes[THEME_KEY]) {
+      applyTheme(changes[THEME_KEY].newValue || THEME_DEFAULT);
+    }
+
+    if (changes[QUICK_STATIONS_KEY]) {
+      quickIds = await getQuickStations();
+      renderQuick();
+    }
+
     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();
@@ -241,7 +252,14 @@ function renderQuick() {
     els.quickList.appendChild(empty);
     return;
   }
-  for (const shortId of QUICK_IDS) {
+  if (!quickIds.length) {
+    const empty = document.createElement('span');
+    empty.className = 'nt-quick-empty';
+    empty.textContent = 'No Quick Stations picked — set some in ⚙ Settings.';
+    els.quickList.appendChild(empty);
+    return;
+  }
+  for (const shortId of quickIds) {
     const fullId = `somafm:${shortId}`;
     const s = stations.find(st => st.id === fullId);
     if (!s) continue;
@@ -317,6 +335,7 @@ function renderList() {
 async function onPickStation(station) {
   currentStation = station;
   els.play.disabled = false;
+  reflectFirstRunHint();
   await chrome.storage.local.set({ [STORAGE_KEYS.currentId]: station.id });
   renderNow();
   renderQuick();
@@ -364,6 +383,13 @@ async function onVolume() {
 
 /* ---------- 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';

src/options/options.css

@@ -16,6 +16,91 @@
   --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 {
@@ -40,7 +125,29 @@ html, body {
 .opt-brand {
   display: flex;
   align-items: center;
-  gap: 12px;
+  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 {
@@ -260,3 +367,100 @@ html, body {
   background: var(--danger);
   color: var(--cream);
 }
+
+/* ──────────────────────────────────────────────────────────────────────
+   Quick Stations picker (v0.5.3) — scrollable checkbox list of every
+   SomaFM channel. Toggles persist to chrome.storage.local under
+   tuner.quickStations; NewTab re-renders chip row instantly.
+   ────────────────────────────────────────────────────────────────────── */
+
+.opt-qs-count {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.opt-qs-list {
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+  max-height: 360px;
+  overflow-y: auto;
+  border: 1px solid var(--bg-row);
+  border-radius: var(--radius);
+  background: var(--bg-row);
+}
+
+.opt-qs-list::-webkit-scrollbar {
+  width: 8px;
+}
+.opt-qs-list::-webkit-scrollbar-thumb {
+  background: var(--bg-row-hi);
+  border-radius: 4px;
+}
+.opt-qs-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.opt-qs-loading {
+  padding: 14px;
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
+.opt-qs-row {
+  border-bottom: 1px solid var(--bg-soft);
+}
+
+.opt-qs-row:last-child {
+  border-bottom: none;
+}
+
+.opt-qs-label {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 10px 14px;
+  margin: 0;
+  cursor: pointer;
+  font-weight: 400;
+}
+
+.opt-qs-label:hover {
+  background: var(--bg-row-hi);
+}
+
+.opt-qs-label input[type="checkbox"] {
+  margin: 3px 0 0 0;
+  accent-color: var(--accent);
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
+.opt-qs-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.opt-qs-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fg);
+}
+
+.opt-qs-genre {
+  font-size: 10px;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-top: 2px;
+}
+
+.opt-qs-desc {
+  font-size: 11px;
+  color: var(--fg-muted);
+  margin-top: 3px;
+  line-height: 1.4;
+}

src/options/options.html

@@ -9,10 +9,11 @@
 <body>
 
   <header class="opt-header">
-    <div class="opt-brand">
+    <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>
-    </div>
+    </a>
     <span class="opt-version" id="opt-version">v—</span>
   </header>
 
@@ -52,6 +53,11 @@
         </div>
       </div>
 
+      <div class="opt-actions">
+        <button id="opt-export-json" class="opt-btn">Export history (JSON)</button>
+        <button id="opt-export-csv"  class="opt-btn">Export history (CSV)</button>
+      </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>
@@ -59,6 +65,44 @@
       </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>Quick Stations</h2>
+      <p class="opt-note">
+        Pick which SomaFM channels show in the chip row on the New Tab Page.
+        <span id="opt-qs-count" class="opt-qs-count">— selected</span>
+      </p>
+      <ul id="opt-qs-list" class="opt-qs-list" role="list">
+        <li class="opt-qs-loading">Loading channel list…</li>
+      </ul>
+      <div class="opt-actions">
+        <button id="opt-qs-reset" class="opt-btn" type="button">Reset to defaults (8)</button>
+      </div>
+    </section>
+
     <section class="opt-card">
       <h2>Playback</h2>
       <div class="opt-row opt-row--inline">

src/options/options.js

@@ -9,6 +9,15 @@ import {
   getHistoryCap, setHistoryCap,
   clearHistory, clearFavourites, clearAll,
 } from '../lib/history.js';
+import { listAllStations } from '../sources/index.js';
+import {
+  THEME_KEY, THEME_DEFAULT, VALID_THEMES,
+  getTheme, setTheme, applyTheme,
+} from '../lib/theme.js';
+import {
+  QUICK_STATIONS_KEY, DEFAULT_QUICK_IDS,
+  getQuickStations, setQuickStations, resetQuickStations,
+} from '../lib/quick-stations.js';
 
 const STORAGE_KEYS = {
   stations:    'tuner.stationsCache',
@@ -30,6 +39,13 @@ const els = {
   volumeDisplay:  document.getElementById('opt-volume-display'),
   lastStation:    document.getElementById('opt-last-station'),
   toast:          document.getElementById('opt-toast'),
+  // Quick Stations picker (v0.5.3)
+  qsCount:        document.getElementById('opt-qs-count'),
+  qsList:         document.getElementById('opt-qs-list'),
+  qsReset:        document.getElementById('opt-qs-reset'),
+  // Export history (v0.5.3)
+  exportJson:     document.getElementById('opt-export-json'),
+  exportCsv:      document.getElementById('opt-export-csv'),
 };
 
 init().catch(err => {
@@ -39,6 +55,14 @@ init().catch(err => {
 
 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();
+
+  // Quick Stations — render checkbox list of all SomaFM channels.
+  await initQuickStationsUI();
+
   await refreshStats();
   await refreshPlayback();
 
@@ -56,6 +80,9 @@ async function init() {
     await refreshStats();
   });
 
+  els.exportJson.addEventListener('click', () => exportHistoryAs('json'));
+  els.exportCsv.addEventListener('click',  () => exportHistoryAs('csv'));
+
   els.clearHistory.addEventListener('click', async () => {
     if (!confirm('Clear all track history? Favourites will be preserved.')) return;
     await clearHistory();
@@ -84,8 +111,23 @@ async function init() {
   });
 
   // Refresh stats live if storage changes from another surface
-  chrome.storage.onChanged.addListener((changes, area) => {
+  chrome.storage.onChanged.addListener(async (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 (changes[QUICK_STATIONS_KEY]) {
+      // Re-check the boxes to match the new picks (in case another surface
+      // wiped storage or reset to defaults).
+      const newPicks = new Set(await getQuickStations());
+      for (const cb of document.querySelectorAll('#opt-qs-list input[type=checkbox]')) {
+        cb.checked = newPicks.has(cb.value);
+      }
+      updateQuickStationsCount(newPicks.size);
+    }
     if (Object.keys(changes).some(k => k.startsWith('tuner.'))) {
       refreshStats();
       refreshPlayback();
@@ -93,6 +135,133 @@ async function init() {
   });
 }
 
+/** 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}`);
+    });
+  }
+}
+
+/** Render the Quick Stations picker — checkbox per SomaFM channel from
+ *  the cached catalogue, with description below each name. Toggling a
+ *  checkbox writes the current picks to chrome.storage.local under
+ *  tuner.quickStations. NewTab's storage.onChanged listener re-renders
+ *  the chip row instantly without a reload. */
+async function initQuickStationsUI() {
+  // Try the NewTab cache first (fast path).
+  let cache = (await chrome.storage.local.get('tuner.stationsCache'))['tuner.stationsCache'] || [];
+
+  // Fresh install fallback: if Options is opened BEFORE NewTab has ever
+  // populated the cache, fetch SomaFM channels directly + cache them.
+  if (!cache.length) {
+    try {
+      cache = await listAllStations();
+      // Cache it back so future loads are instant.
+      await chrome.storage.local.set({
+        'tuner.stationsCache':  cache,
+        'tuner.stationsCachedAt': Date.now(),
+      });
+    } catch (err) {
+      console.warn('Quick Stations: failed to fetch channel list', err);
+    }
+  }
+
+  // Stations come in as { id: "somafm:groovesalad", name, description, genre, ... }
+  // Sort alphabetically by name for predictable picker order.
+  const channels = [...cache].sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+  const picks = new Set(await getQuickStations());
+
+  els.qsList.innerHTML = '';
+  if (!channels.length) {
+    const li = document.createElement('li');
+    li.className = 'opt-qs-loading';
+    li.textContent = 'Could not load SomaFM channel list — check your network connection and reopen Settings.';
+    els.qsList.appendChild(li);
+    return;
+  }
+
+  for (const ch of channels) {
+    const shortId = (ch.id || '').split(':')[1];
+    if (!shortId) continue;
+
+    const li = document.createElement('li');
+    li.className = 'opt-qs-row';
+
+    const label = document.createElement('label');
+    label.className = 'opt-qs-label';
+
+    const cb = document.createElement('input');
+    cb.type = 'checkbox';
+    cb.value = shortId;
+    cb.checked = picks.has(shortId);
+    cb.addEventListener('change', onQuickStationToggle);
+
+    const main = document.createElement('div');
+    main.className = 'opt-qs-main';
+
+    const name = document.createElement('div');
+    name.className = 'opt-qs-name';
+    name.textContent = ch.name || shortId;
+
+    if (ch.genre) {
+      const g = document.createElement('div');
+      g.className = 'opt-qs-genre';
+      g.textContent = ch.genre;
+      main.appendChild(name);
+      main.appendChild(g);
+    } else {
+      main.appendChild(name);
+    }
+
+    if (ch.description) {
+      const desc = document.createElement('div');
+      desc.className = 'opt-qs-desc';
+      desc.textContent = ch.description;
+      main.appendChild(desc);
+    }
+
+    label.appendChild(cb);
+    label.appendChild(main);
+    li.appendChild(label);
+    els.qsList.appendChild(li);
+  }
+
+  updateQuickStationsCount(picks.size);
+
+  els.qsReset.addEventListener('click', async () => {
+    if (!confirm('Reset Quick Stations to the default 8?')) return;
+    await resetQuickStations();
+    // Re-check the boxes to match defaults
+    const defaultSet = new Set(DEFAULT_QUICK_IDS);
+    for (const cb of document.querySelectorAll('#opt-qs-list input[type=checkbox]')) {
+      cb.checked = defaultSet.has(cb.value);
+    }
+    updateQuickStationsCount(defaultSet.size);
+    toast('Quick Stations reset to defaults');
+  });
+}
+
+async function onQuickStationToggle() {
+  const all = [...document.querySelectorAll('#opt-qs-list input[type=checkbox]')];
+  const picked = all.filter(c => c.checked).map(c => c.value);
+  await setQuickStations(picked);
+  updateQuickStationsCount(picked.length);
+}
+
+function updateQuickStationsCount(n) {
+  els.qsCount.textContent = `${n} selected`;
+}
+
 async function refreshStats() {
   const [history, favs, all] = await Promise.all([
     getHistory(),
@@ -143,6 +312,46 @@ function formatBytes(n) {
   return `${(n / (1024 * 1024)).toFixed(2)} MB`;
 }
 
+/** Download tuner.history as a JSON or CSV file. (v0.5.3) */
+async function exportHistoryAs(format) {
+  const history = await getHistory();
+  if (!history.length) {
+    toast('No history to export yet — play some music first', 'error');
+    return;
+  }
+
+  let blob, ext, mime;
+  if (format === 'json') {
+    blob = new Blob([JSON.stringify(history, null, 2)], { type: 'application/json' });
+    ext = 'json';
+  } else {
+    // CSV — RFC 4180 quoting (doubled quotes, every cell quoted for safety).
+    const q = v => `"${String(v ?? '').replace(/"/g, '""')}"`;
+    const header = 'artist,title,station,station_id,when_iso\n';
+    const rows = history.map(e => [
+      q(e.artist),
+      q(e.title),
+      q(e.station),
+      q(e.stationId),
+      q(e.at ? new Date(e.at).toISOString() : ''),
+    ].join(',')).join('\n');
+    blob = new Blob([header + rows + '\n'], { type: 'text/csv;charset=utf-8' });
+    ext = 'csv';
+  }
+
+  const ts = new Date().toISOString().slice(0, 10);
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `rangerhq-tuner-history-${ts}.${ext}`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+
+  toast(`Exported ${history.length} track${history.length === 1 ? '' : 's'} as ${ext.toUpperCase()}`);
+}
+
 function toast(message, tone) {
   els.toast.textContent = message;
   els.toast.dataset.tone = tone || '';

src/popup/popup.css

@@ -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 {
@@ -310,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;
+}

src/popup/popup.js

@@ -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'),
@@ -42,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') {
@@ -69,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.
@@ -117,10 +123,15 @@ async function init() {
   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();
     }
@@ -202,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();
@@ -256,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;

store/screenshots/README.md

@@ -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.