diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13367f7..b2201d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,21 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.1.2] - 2026-07-29
+
+### Added
+
+- **AirPlay from Safari to AirPlay 2 speakers** (e.g. Sonos): a per-element
+  AirPlay button in the player transport routes Hum's audio alone to the
+  speaker, replacing the system-wide macOS Sound Output route (which also
+  carries notification audio and adds scrubber latency). The button appears in
+  both the mini-player and the expanded now-playing overlay, gated on AirPlay
+  support and target availability. VOD playback routes over the existing signed
+  native-HLS URL; live tracks honestly hide the button (hls.js/MSE output can't
+  be AirPlay-routed). Frontend-only — no server changes, the speaker never
+  fetches a Hum URL (AirPlay-to-speaker is a source-encoded push). Verified
+  end-to-end against a Sonos Move.
+
 ## [0.1.1] - 2026-07-29
 
 ### Added
@@ -91,6 +106,7 @@ First tagged release of Hum — a self-hosted YouTube audio streamer.
   3.11/3.12) and frontend (svelte-check, vitest, vite build); tag-triggered
   release workflow.
 
-[Unreleased]: https://github.com/betmoar/hum/compare/v0.1.1...HEAD
+[Unreleased]: https://github.com/betmoar/hum/compare/v0.1.2...HEAD
+[0.1.2]: https://github.com/betmoar/hum/compare/v0.1.1...v0.1.2
 [0.1.1]: https://github.com/betmoar/hum/compare/v0.1.0...v0.1.1
 [0.1.0]: https://github.com/betmoar/hum/releases/tag/v0.1.0
diff --git a/docs/superpowers/plans/2026-07-29-airplay-to-sonos.md b/docs/superpowers/plans/2026-07-29-airplay-to-sonos.md
new file mode 100644
index 0000000..283ce6e
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-29-airplay-to-sonos.md
@@ -0,0 +1,813 @@
+# AirPlay from Safari to Sonos — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add an in-page AirPlay button to Hum's player transport so a single `<audio>` element routes to an AirPlay 2 speaker (Sonos) from Safari, replacing the system-wide macOS Sound output route.
+
+**Architecture:** Frontend-only. A new `lib/airplay.svelte.ts` owns the AirPlay lifecycle (availability listener, route-active state, picker invocation) as a small reactive module that binds to the single `<audio>` element in `Player.svelte`. `playerControls` gains a `showPlaybackTargetPicker()` method so both `Player.svelte` and `NowPlaying.svelte` open the picker through one entry point. No server changes, no new routes, no model/type changes.
+
+**Tech Stack:** Svelte 5 (runes), TypeScript, vitest + @testing-library/svelte (jsdom), WebKit AirPlay playback-target APIs (`webkit*` on `HTMLMediaElement`).
+
+## Global Constraints
+
+- **No server changes.** `app/config.py` `HOST` stays `127.0.0.1`. No new routes, no new signed-URL types, no changes to `app/models.py` or `frontend/src/lib/types.ts`. If an implementation finds itself touching any of those, stop — the design's central premise has broken.
+- **The gate is `./scripts/check.sh`.** Must stay green: ruff, mypy --strict, pytest (backend), svelte-check, vitest, vite build.
+- **`svelte-check` runs in the gate** — every WebKit API used in TS must be declared in a `.d.ts` or the build fails.
+- **Never ship a silent failure.** The AirPlay button must always tell the truth about whether the route will work; live tracks that can't route must hide the button, not show one that does nothing.
+- **Listener lifecycle.** The availability listener attaches with the player element and detaches on cleanup (Apple: monitoring drains battery). No global listeners.
+- **Git rule (from CLAUDE.md):** commit on the feature branch only; never `git push` or `gh pr merge` — the user handles pushes and merges. Stage only files you changed.
+
+## File Structure
+
+| File | Responsibility |
+|---|---|
+| **Create** `frontend/src/lib/airplay.svelte.ts` | The AirPlay control: feature-detection, availability/route-active reactive state, `attach(el)`/`detach()`, `showPicker()`. Pure logic + the magic event-name strings live here so they're defined once. |
+| **Create** `frontend/src/types/airplay.d.ts` | `HTMLAudioElement` augmentation: the four WebKit members + the `webkitplaybacktargetavailabilitychanged` event on `Window`/`HTMLElement`. Lets `svelte-check` pass. |
+| **Modify** `frontend/src/components/Icon.svelte` | Add `'airplay'` to `IconName` and its SVG path (the standard AirPlay triangle-above-rectangle glyph). |
+| **Modify** `frontend/src/lib/store.svelte.ts` | Add `showPlaybackTargetPicker?: () => void` to the `PlayerControls` type. |
+| **Modify** `frontend/src/components/Player.svelte` | Wire the `<audio>` to the airplay control (`x-webkit-airplay`, attach/detach, expose `showPlaybackTargetPicker`); render the button in `.controls`; handle live-truth (hide for live until §3 lands), track-skip and expiry-recovery route persistence. |
+| **Modify** `frontend/src/components/NowPlaying.svelte` | Mirror the button in the overlay `.transport`, calling `playerControls.current?.showPlaybackTargetPicker()`. |
+| **Create** `frontend/tests/lib/airplay.test.ts` | Unit tests for the airplay control (feature-detect, availability flip, detach-by-behaviour). |
+| **Modify** `frontend/tests/components/Player.test.ts` | Assert the button renders iff AirPlay is feature-available; hidden for live; picker method is wired. |
+| **Modify** `docs/PLAYBOOKS.md` | Add the manual AirPlay validation checklist (the real gate — no Safari/Sonos in CI). |
+
+### Interfaces (the contract between tasks)
+
+```ts
+// airplay.svelte.ts — the shape later tasks consume
+export type AirplayState = {
+  available: boolean;      // a target device is reachable (picker would be non-empty)
+  routeActive: boolean;    // currently routing to a wireless target
+};
+
+export function createAirplayControl(): {
+  state: AirplayState;                 // reactive ($state) — read in markup
+  attach: (el: HTMLAudioElement) => void;
+  detach: () => void;
+  showPicker: () => void;              // calls el.webkitShowPlaybackTargetPicker()
+  isSupported: () => boolean;          // feature-detect: picker fn present AND availability event reachable
+};
+```
+
+```ts
+// store.svelte.ts — PlayerControls gains one optional method
+showPlaybackTargetPicker?: () => void;
+```
+
+---
+
+## Task 0: Verify the no-server-change premise (manual, before any code)
+
+This gates the whole feature. If it fails, stop and revisit the design.
+
+**Files:** none (manual verification, recorded in the commit message of Task 1)
+
+- [ ] **Step 1: Start the dev servers**
+
+Run: `./scripts/dev.sh`
+
+- [ ] **Step 2: Open a VOD track in Safari**
+
+Navigate to the running app, play a non-live track. Confirm audio plays locally.
+
+- [ ] **Step 3: Route via the native (system) AirPlay**
+
+Because Hum has no in-page button yet, use Safari's menu: **Safari → Settings → Websites → Auto-Play** is NOT it. Use macOS Control Center → Screen Mirroring/AirPlay is also not it. The reliable path for *element-level* AirPlay before we ship the button: temporarily add `controls` to the `<audio>` in `Player.svelte:416`, reload, and use Safari's native media-controls AirPlay icon to pick the Sonos. **Do not commit this `controls` change** — revert it after the test.
+
+- [ ] **Step 4: Apply the falsifier**
+
+- **Pass:** audio plays from the Sonos, AND Safari's network panel + the Sonos show **no** fetch to a `127.0.0.1` Hum URL.
+- **Fail:** the Sonos tries to fetch `http://127.0.0.1:8000/...` (it can't reach the Mac's loopback from itself) → the route only works if the receiver can reach the origin.
+
+- [ ] **Step 5: Record the result**
+
+If PASS → proceed to Task 1. If FAIL → stop; do not build. Report to the maintainer that the design needs revisiting (LAN-reachable bind, CORS, signed-URL audience).
+
+Record the Sonos model + firmware alongside the result (e.g. `Sonos Era 100, S2 15.x`) — needed for the manual gate later.
+
+---
+
+## Task 1: TypeScript declarations + the airplay control module
+
+Builds the foundation that Player.svelte will consume. Ends with passing unit tests for detection + availability + detach.
+
+**Files:**
+- Create: `frontend/src/types/airplay.d.ts`
+- Create: `frontend/src/lib/airplay.svelte.ts`
+- Test: `frontend/tests/lib/airplay.test.ts`
+
+**Interfaces:** Produces `createAirplayControl()` (see File Structure) and the `.d.ts` augmentation consumed by every later task.
+
+- [ ] **Step 1: Write the failing tests**
+
+Create `frontend/tests/lib/airplay.test.ts`:
+
+```ts
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { createAirplayControl } from '../../src/lib/airplay.svelte';
+
+// The magic event name appears identically in several identifiers; a typo
+// would pass jsdom silently because it never dispatches. Asserting the
+// constant here catches a rename regression.
+const AVAIL_EVENT = 'webkitplaybacktargetavailabilitychanged';
+
+function makeAudio(opts: {
+  picker?: boolean;
+  wireless?: boolean;
+}): HTMLAudioElement {
+  const a = document.createElement('audio');
+  if (opts.picker) {
+    (a as any).webkitShowPlaybackTargetPicker = vi.fn();
+  }
+  if (opts.wireless !== undefined) {
+    (a as any).webkitCurrentPlaybackTargetIsWireless = opts.wireless;
+  }
+  return a;
+}
+
+describe('airplay control — feature detection', () => {
+  it('reports supported when picker fn + availability event are both present', () => {
+    const ctl = createAirplayControl();
+    const a = makeAudio({ picker: true });
+    expect(ctl.isSupportedEl(a)).toBe(true);
+  });
+
+  it('reports unsupported when the picker is missing', () => {
+    const ctl = createAirplayControl();
+    const a = makeAudio({ picker: false });
+    expect(ctl.isSupportedEl(a)).toBe(false);
+  });
+});
+
+describe('airplay control — availability + route state', () => {
+  let ctl: ReturnType<typeof createAirplayControl>;
+
+  beforeEach(() => {
+    ctl = createAirplayControl();
+  });
+
+  it('starts unavailable and inactive', () => {
+    expect(ctl.state.available).toBe(false);
+    expect(ctl.state.routeActive).toBe(false);
+  });
+
+  it('flips available when an "available" event dispatches', async () => {
+    const a = makeAudio({ picker: true });
+    ctl.attach(a);
+    a.dispatchEvent(new CustomEvent(AVAIL_EVENT, { detail: { availability: 'available' } }));
+    expect(ctl.state.available).toBe(true);
+  });
+
+  it('flips back when "not-available" dispatches', async () => {
+    const a = makeAudio({ picker: true });
+    ctl.attach(a);
+    a.dispatchEvent(new CustomEvent(AVAIL_EVENT, { detail: { availability: 'available' } }));
+    a.dispatchEvent(new CustomEvent(AVAIL_EVENT, { detail: { availability: 'not-available' } }));
+    expect(ctl.state.available).toBe(false);
+  });
+
+  it('flips routeActive when the wireless-changed event fires', () => {
+    const a = makeAudio({ picker: true, wireless: false });
+    ctl.attach(a);
+    a.dispatchEvent(new CustomEvent('webkitcurrentplaybacktargetiswirelesschanged'));
+    // Fire it again after setting the property true (Safari updates the prop
+    // before/with the event).
+    (a as any).webkitCurrentPlaybackTargetIsWireless = true;
+    a.dispatchEvent(new CustomEvent('webkitcurrentplaybacktargetiswirelesschanged'));
+    expect(ctl.state.routeActive).toBe(true);
+  });
+
+  it('detaches by behaviour: events after detach do not mutate state', () => {
+    const a = makeAudio({ picker: true });
+    ctl.attach(a);
+    ctl.detach();
+    a.dispatchEvent(new CustomEvent(AVAIL_EVENT, { detail: { availability: 'available' } }));
+    expect(ctl.state.available).toBe(false);
+  });
+
+  it('showPicker calls the element method', () => {
+    const a = makeAudio({ picker: true });
+    ctl.attach(a);
+    ctl.showPicker();
+    expect((a as any).webkitShowPlaybackTargetPicker).toHaveBeenCalled();
+  });
+
+  it('showPicker is a safe no-op when not attached', () => {
+    ctl.showPicker(); // must not throw
+  });
+});
+```
+
+- [ ] **Step 2: Run tests to verify they fail**
+
+Run: `npm --prefix frontend test -- airplay`
+Expected: FAIL — `createAirplayControl` is not defined.
+
+- [ ] **Step 3: Write the `.d.ts` augmentation**
+
+Create `frontend/src/types/airplay.d.ts`:
+
+```ts
+// WebKit AirPlay playback-target APIs on HTMLMediaElement. Non-standard,
+// absent from lib.dom.d.ts. Declared here so svelte-check passes; the
+// runtime feature-detects each one before use.
+export {};
+
+declare global {
+  interface HTMLMediaElement {
+    webkitShowPlaybackTargetPicker?: () => void;
+    webkitCurrentPlaybackTargetIsWireless?: boolean;
+    webkitShowPlaybackTargetPicker?: () => void;
+    addEventListener(
+      type: 'webkitplaybacktargetavailabilitychanged',
+      listener: (this: HTMLMediaElement, ev: AirplayAvailabilityEvent) => void,
+    ): void;
+    addEventListener(
+      type: 'webkitcurrentplaybacktargetiswirelesschanged',
+      listener: (this: HTMLMediaElement, ev: Event) => void,
+    ): void;
+    removeEventListener(
+      type: 'webkitplaybacktargetavailabilitychanged',
+      listener: (this: HTMLMediaElement, ev: AirplayAvailabilityEvent) => void,
+    ): void;
+    removeEventListener(
+      type: 'webkitcurrentplaybacktargetiswirelesschanged',
+      listener: (this: HTMLMediaElement, ev: Event) => void,
+    ): void;
+  }
+
+  interface AirplayAvailabilityEvent extends Event {
+    availability: 'available' | 'not-available';
+  }
+
+  interface Window {
+    // The event constant is reachable on the constructor in Safari.
+    WebKitPlaybackTargetAvailabilityEvent?: typeof Event;
+  }
+}
+```
+
+> Note: `svelte-check`/`tsc` picks up `.d.ts` files in `src/` automatically via the `include` glob in `frontend/tsconfig.json`. Verify by running `npm --prefix frontend run check` after Task 3 wires it in.
+
+- [ ] **Step 4: Write the airplay control module**
+
+Create `frontend/src/lib/airplay.svelte.ts`:
+
+```ts
+// AirPlay playback-target control.
+//
+// AirPlay to a speaker is a source-encoded push, not a URL handoff: the Mac
+// decodes + re-encodes the <audio> stream and sends it to the speaker, which
+// never fetches our URL. So this is purely a frontend concern — no server
+// surface, no signed-URL audience change.
+//
+// The WebKit APIs are non-standard and unversioned. Everything is
+// feature-detected; showPicker is a no-op if the picker isn't present.
+
+export type AirplayState = {
+  available: boolean;
+  routeActive: boolean;
+};
+
+// Magic strings — defined once. `webkitplaybacktargetavailabilitychanged`
+// appears in several places; a typo would fail silently under jsdom, so the
+// constant is asserted verbatim in the test.
+const AVAIL_EVENT = 'webkitplaybacktargetavailabilitychanged';
+const WIRELESS_EVENT = 'webkitcurrentplaybacktargetiswirelesschanged';
+
+type AirplayEl = HTMLAudioElement;
+
+export function createAirplayControl() {
+  const state = $state<AirplayState>({ available: false, routeActive: false });
+  let el: AirplayEl | null = null;
+
+  // Bound listener refs so detach can remove the EXACT registered function
+  // (removeEventListener matches by reference).
+  let onAvail: ((e: AirplayAvailabilityEvent) => void) | null = null;
+  let onWireless: (() => void) | null = null;
+
+  function hasPicker(el: AirplayEl): boolean {
+    return typeof el.webkitShowPlaybackTargetPicker === 'function';
+  }
+
+  // Button RENDERS iff the picker fn exists. Button is FUNCTIONAL iff that
+  // plus the availability-event mechanism is reachable. Partial support
+  // (picker present, no event) leaves the button stuck — treat as unsupported.
+  function isSupportedEl(el: AirplayEl): boolean {
+    if (!hasPicker(el)) return false;
+    // 'webkitplaybacktargetavailabilitychanged' in el is true on Safari.
+    // Under jsdom this is false unless the property is present; tests
+    // dispatch the event directly so we also accept the AVAIL_EVENT reach.
+    return AVAIL_EVENT in el || typeof (window as any).WebKitPlaybackTargetAvailabilityEvent !== 'undefined';
+  }
+
+  function isSupported(): boolean {
+    return el ? isSupportedEl(el) : false;
+  }
+
+  function attach(audio: AirplayEl) {
+    detach();
+    el = audio;
+    // A no-op element (jsdom, non-Safari): nothing to wire. isSupportedEl
+    // returns false, the button stays hidden.
+    if (!hasPicker(audio)) return;
+
+    onAvail = (e) => {
+      state.available = e.availability === 'available';
+    };
+    onWireless = () => {
+      // Read the live property — Safari updates it with/before the event.
+      state.routeActive = !!el?.webkitCurrentPlaybackTargetIsWireless;
+    };
+    audio.addEventListener(AVAIL_EVENT, onAvail as EventListener);
+    audio.addEventListener(WIRELESS_EVENT, onWireless as EventListener);
+    // Seed routeActive from the current property in case we attached to an
+    // element already routed.
+    state.routeActive = !!audio.webkitCurrentPlaybackTargetIsWireless;
+  }
+
+  function detach() {
+    if (el && onAvail) el.removeEventListener(AVAIL_EVENT, onAvail as EventListener);
+    if (el && onWireless) el.removeEventListener(WIRELESS_EVENT, onWireless as EventListener);
+    el = null;
+    onAvail = null;
+    onWireless = null;
+    state.available = false;
+    state.routeActive = false;
+  }
+
+  function showPicker() {
+    // Safe no-op when unsupported/unattached.
+    if (el && hasPicker(el)) el.webkitShowPlaybackTargetPicker!();
+  }
+
+  return {
+    get state() { return state; },
+    attach,
+    detach,
+    showPicker,
+    isSupported,
+    isSupportedEl,
+  };
+}
+```
+
+> The `isSupportedEl` reachability check: `'webkitplaybacktargetavailabilitychanged' in el`. Under jsdom a dispatched CustomEvent fires regardless of `'in'` checks, so the test must add the property. **Update the test** in Step 1's `makeAudio`: when `picker` is true, also set `(a as any).webkitplaybacktargetavailabilitychanged = undefined`? No — `'x' in el` checks the property chain; jsdom audio won't have it. The reliable cross-env approach: feature-detect on `hasPicker` only for `isSupportedEl`, and treat the availability event as "always potentially present" (we just attach the listener and let Safari dispatch). **Simplify `isSupportedEl` to:**
+
+```ts
+function isSupportedEl(el: AirplayEl): boolean {
+  // Picker fn is the minimum; the availability event is dispatched by Safari
+  // alongside it. If the picker exists, we assume the event machinery does.
+  return hasPicker(el);
+}
+```
+
+Use this simplified version in the module (drop the `'in'`/window check). The test's `picker: true` then makes `isSupportedEl` true, and availability events flip state. This is the correct minimal contract.
+
+- [ ] **Step 5: Run tests to verify they pass**
+
+Run: `npm --prefix frontend test -- airplay`
+Expected: PASS (all 7 tests).
+
+- [ ] **Step 6: Run the full frontend check**
+
+Run: `npm --prefix frontend run check` (svelte-check) — expected clean (the `.d.ts` makes the airplay module type-check even though it's not yet imported).
+Run: `npm --prefix frontend test` — all pass.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add frontend/src/types/airplay.d.ts frontend/src/lib/airplay.svelte.ts frontend/tests/lib/airplay.test.ts
+git commit -m "feat(airplay): control module + WebKit type declarations"
+```
+
+---
+
+## Task 2: Add the AirPlay icon glyph
+
+Needed before the button can render. Trivial, isolated, own commit.
+
+**Files:**
+- Modify: `frontend/src/components/Icon.svelte`
+
+- [ ] **Step 1: Add `'airplay'` to the `IconName` union and the SVG switch**
+
+In `frontend/src/components/Icon.svelte`, extend the union (around line 3):
+
+```ts
+  export type IconName =
+    | 'play' | 'pause' | 'skip-forward' | 'skip-back'
+    | 'shuffle' | 'repeat' | 'repeat-1'
+    | 'volume-2' | 'volume-x'
+    | 'plus' | 'list-plus' | 'list-music'
+    | 'search' | 'settings'
+    | 'radio'
+    | 'x'
+    | 'grip-vertical'
+    | 'chevron-up' | 'chevron-down'
+    | 'chevron-right'
+    | 'maximize-2' | 'minimize-2'
+    | 'airplay';
+```
+
+Add the path inside the `<svg>` switch (before the closing `{/if}`):
+
+```svelte
+  {:else if name === 'airplay'}<path d="M8.71 3H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2"/><path d="M19 16h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-3.71"/><path d="m8 19 4-4 4 4"/><line x1="12" y1="15" x2="12" y2="22"/>
+```
+
+This is the standard "screen + arrow up" AirPlay glyph (Lucide `airplay`).
+
+- [ ] **Step 2: Run the check**
+
+Run: `npm --prefix frontend run check`
+Expected: PASS (no type errors).
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add frontend/src/components/Icon.svelte
+git commit -m "feat(icon): add airplay glyph"
+```
+
+---
+
+## Task 3: Wire the button into Player + playerControls + store type
+
+The core wiring. Ends with the button rendering in the mini-player, gated on support+availability, hidden for live tracks (Option C as the initial live behavior — honest, zero-risk; §3 escalation is Task 6).
+
+**Files:**
+- Modify: `frontend/src/lib/store.svelte.ts` (PlayerControls type)
+- Modify: `frontend/src/components/Player.svelte` (attach/detach, button, picker method)
+- Modify: `frontend/tests/components/Player.test.ts`
+
+**Interfaces:**
+- Consumes: `createAirplayControl` from Task 1; `'airplay'` Icon from Task 2.
+- Produces: `playerControls.current.showPlaybackTargetPicker()` consumed by NowPlaying (Task 4).
+
+- [ ] **Step 1: Write the failing tests**
+
+Append to `frontend/tests/components/Player.test.ts`:
+
+```ts
+import { createAirplayControl } from '../../src/lib/airplay.svelte';
+
+// Helper: make a VOD track with a valid-shaped signed URL.
+const liveTrack = (id: string): Track => ({
+  ...sampleTrack(id, ''),
+  isLive: true,
+  liveStreamUrl: 'https://example.com/live.m3u8',
+});
+
+describe('Player — AirPlay button', () => {
+  beforeEach(() => {
+    // jsdom has no webkit* APIs by default → button hidden.
+  });
+
+  it('does not render the airplay button when unsupported (jsdom)', async () => {
+    store.playNow(sampleTrack('abc', '/proxy/audio/abc?itag=140&exp=1&sig=' + 'a'.repeat(32)));
+    const { container } = render(Player);
+    await tick();
+    const btn = container.querySelector('[aria-label="AirPlay"]');
+    expect(btn).toBeNull();
+  });
+
+  it('hides the airplay button for live tracks even when supported', async () => {
+    // Simulate Safari by stamping the picker fn onto the audio element after
+    // render. Player attaches on mount; we patch the prototype before render.
+    (HTMLAudioElement.prototype as any).webkitShowPlaybackTargetPicker = () => {};
+    try {
+      store.playNow(liveTrack('live1'));
+      const { container } = render(Player);
+      await tick();
+      const btn = container.querySelector('[aria-label="AirPlay"]');
+      // Live tracks: hidden until §3 lands (Option C).
+      expect(btn).toBeNull();
+    } finally {
+      delete (HTMLAudioElement.prototype as any).webkitShowPlaybackTargetPicker;
+    }
+  });
+
+  it('exposes showPlaybackTargetPicker on playerControls', async () => {
+    store.playNow(sampleTrack('abc', '/proxy/audio/abc?itag=140&exp=1&sig=' + 'a'.repeat(32)));
+    render(Player);
+    await tick();
+    expect(typeof playerControls.current?.showPlaybackTargetPicker).toBe('function');
+  });
+});
+```
+
+- [ ] **Step 2: Run tests to verify they fail**
+
+Run: `npm --prefix frontend test -- Player`
+Expected: FAIL — `[aria-label="AirPlay"]` assertion: the button doesn't exist yet (first test passes because it's null, but treat it as the baseline); the third test fails: `showPlaybackTargetPicker` is undefined.
+
+- [ ] **Step 3: Add the method to the PlayerControls type**
+
+In `frontend/src/lib/store.svelte.ts`, extend the type (around line 10):
+
+```ts
+export type PlayerControls = {
+  play: () => void;
+  pause: () => void;
+  toggle: () => void;
+  seekBy: (deltaSeconds: number) => void;
+  setVolume: (v: number) => void;
+  toggleMute: () => void;
+  showPlaybackTargetPicker?: () => void;
+  getPosition?: () => number;
+  restoreAt?: (pos: number) => void;
+};
+```
+
+- [ ] **Step 4: Wire the airplay control + button into Player.svelte**
+
+In `frontend/src/components/Player.svelte`:
+
+**4a. Create the control instance + attach/detach effect.** Near the top of `<script>`, after `const hlsNative = ...` (around line 15), add:
+
+```ts
+  import { createAirplayControl } from '../lib/airplay.svelte';
+  const airplay = createAirplayControl();
+  let airplaySupported = $state(false);
+```
+
+In the `playerControls` assignment effect (the `$effect(() => { if (!el) {...} playerControls.current = {...}; return ... })` around line 94), add `showPlaybackTargetPicker` to the object:
+
+```ts
+    playerControls.current = {
+      play:  () => safePlay(el),
+      pause: () => el?.pause(),
+      toggle: () => { /* unchanged */ },
+      seekBy: (delta) => { /* unchanged */ },
+      setVolume: (v) => { /* unchanged */ },
+      toggleMute: () => { /* unchanged */ },
+      showPlaybackTargetPicker: () => airplay.showPicker(),
+      getPosition: () => el?.currentTime ?? 0,
+      restoreAt: (pos: number) => { /* unchanged */ },
+    };
+```
+
+Add a new `$effect` that attaches/detaches the airplay control to the element when it mounts:
+
+```ts
+  // Attach the AirPlay control to the live <audio> element. Lifecycle is
+  // bound to the element (not global) per Apple's battery guidance.
+  $effect(() => {
+    const a = el;
+    if (!a) return;
+    airplay.attach(a);
+    airplaySupported = airplay.isSupportedEl(a);
+    return () => airplay.detach();
+  });
+```
+
+**4b. Add `x-webkit-airplay="allow"` to the `<audio>` element** (around line 416):
+
+```svelte
+    <audio
+      bind:this={el}
+      bind:currentTime={pos}
+      bind:duration={dur}
+      bind:paused
+      src={pickVodSrc(store.player.current)}
+      preload="metadata"
+      onended={advance}
+      onerror={handleError}
+      autoplay
+      x-webkit-airplay="allow"
+    ></audio>
+```
+
+**4c. Render the button in `.controls`.** In the transport controls block (the `<div class="controls">` around line 450), add the AirPlay button as a `.mode` button. Place it after the repeat button so it's the right-most control:
+
+```svelte
+        <button
+          class="mode airplay"
+          class:active={airplay.state.routeActive}
+          onclick={() => airplay.showPicker()}
+          aria-label="AirPlay"
+          aria-pressed={airplay.state.routeActive}
+          hidden={!airplaySupported || airplay.state.available === false || store.player.current.isLive}
+        >
+          <Icon name="airplay" size={18} />
+        </button>
+```
+
+> `hidden` logic: hide when (a) unsupported (non-Safari), (b) no target available (Safari but no AirPlay receiver on the network), or (c) live track (Option C, until Task 6). When available and VOD, the button shows; active state reflects `routeActive`.
+
+- [ ] **Step 5: Run tests to verify they pass**
+
+Run: `npm --prefix frontend test -- Player`
+Expected: PASS (all Player tests, including the 3 new ones).
+
+- [ ] **Step 6: Run the full gate**
+
+Run: `./scripts/check.sh`
+Expected: ✓ all checks green.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add frontend/src/lib/store.svelte.ts frontend/src/components/Player.svelte frontend/tests/components/Player.test.ts
+git commit -m "feat(airplay): wire button into player transport, expose picker method"
+```
+
+---
+
+## Task 4: Mirror the button into NowPlaying overlay
+
+Both surfaces must drive the same element through one entry point (the clarifier decision).
+
+**Files:**
+- Modify: `frontend/src/components/NowPlaying.svelte`
+
+- [ ] **Step 1: Add the AirPlay button to the overlay transport**
+
+In `frontend/src/components/NowPlaying.svelte`, in the `.transport` block (around line 238, after the repeat button, before the closing `</div>` of `.transport` at ~250), add:
+
+```svelte
+      <button
+        class="mode airplay"
+        aria-label="AirPlay"
+        onclick={() => playerControls.current?.showPlaybackTargetPicker?.()}
+      >
+        <Icon name="airplay" size={24} />
+      </button>
+```
+
+> The overlay button is simpler than the mini-player's: it opens the same system picker via the shared `playerControls` method. It shows whenever the overlay transport shows (the player is already expanded, so the user is on Safari and playing — if the button does nothing on a non-Safari browser it's a minor wart, but we can mirror the gating if desired). **DECISION:** mirror minimal — no per-overlay availability state; the system picker is the source of truth. (If a reviewer wants gating, that's a follow-up; the shared method keeps it one line to add.)
+
+**Note on active-state:** the overlay does not poll `routeActive` (it has no airplay control instance — that lives in Player). Reflecting active state here would need a shared reactive signal. Out of scope for the MVP: the button opens the picker; Safari's own picker UI shows which device is current. Leave a comment:
+
+```svelte
+      <!-- AirPlay: opens Safari's system picker via the shared playerControls
+           method (the <audio> element lives in Player.svelte). Active/route
+           state is owned there; this surface is intentionally stateless. -->
+```
+
+- [ ] **Step 2: Run the check**
+
+Run: `npm --prefix frontend run check && npm --prefix frontend test`
+Expected: PASS.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add frontend/src/components/NowPlaying.svelte
+git commit -m "feat(airplay): mirror button in now-playing overlay"
+```
+
+---
+
+## Task 5: Manual validation pass (the real gate) + playbook entry
+
+No CI can verify Safari→Sonos. Run the checklist from the spec's §Testing and record it in PLAYBOOKS.
+
+**Files:**
+- Modify: `docs/PLAYBOOKS.md`
+
+- [ ] **Step 1: Run the manual checklist (Safari + Sonos)**
+
+Run `./scripts/dev.sh`. With the button now shipped, perform each against a VOD track:
+
+1. **Task-0 premise (re-confirm with the real button):** route a VOD track → audio on Sonos, no fetch to `127.0.0.1` in the network panel.
+2. **VOD route:** picker opens, Sonos appears within ~2s, select → audio from speaker, system output unchanged.
+3. **Disconnect mid-playback:** power off the Sonos mid-track → button reverts to inactive, local playback continues at position, no stall.
+4. **Track-skip while routed:** Next → audio continues on Sonos (route persists across the src swap).
+5. **Expiry recovery while routed:** let the signed URL approach expiry (or temporarily lower `STREAM_URL_TTL_SECONDS` and restart) → `handleError` recovery swap → audio continues on Sonos (route auto-re-asserts because `x-webkit-airplay="allow"` + the element persists; verify it does NOT drop).
+6. **Non-Safari (negative):** open in Chrome → no AirPlay button renders.
+
+Record the Sonos model + firmware with the results. If #4 or #5 shows the route dropping on a src swap, that's expected Safari behavior and needs the **auto re-assert** fix — go to Task 5b. If the route persists natively, Task 5b is a no-op.
+
+- [ ] **Step 2: Add the playbook entry**
+
+Append a section to `docs/PLAYBOOKS.md`:
+
+```markdown
+## AirPlay validation (Safari → AirPlay 2 speaker)
+
+Manual gate — no Safari/Sonos in CI. Run before tagging a release that touches
+the AirPlay button. Record the speaker model + firmware with the results.
+
+Checklist (binary pass/fail):
+1. No-server-change premise: VOD track routes to speaker with NO fetch to a
+   `127.0.0.1` Hum URL in Safari's network panel.
+2. VOD route: picker → speaker appears within ~2s → select → audio from
+   speaker, system output unchanged.
+3. Disconnect mid-playback: button reverts inactive, local audio continues at
+   position.
+4. Track-skip while routed: Next → audio continues on speaker (route persists).
+5. Expiry recovery while routed: URL expires → recovery swap → audio continues
+   on speaker.
+6. Non-Safari negative: Chrome shows no AirPlay button.
+
+Last validated: <YYYY-MM-DD> against <Speaker model, firmware>.
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add docs/PLAYBOOKS.md
+git commit -m "docs(playbooks): AirPlay validation checklist"
+```
+
+---
+
+## Task 5b (conditional): Auto re-assert route after a src swap
+
+**Only if manual step #4 or #5 shows the route dropping on track-skip or expiry-recovery.** Safari's element-level route *usually* survives a `src` change when `x-webkit-airplay="allow"` is set, but if it doesn't, re-assert.
+
+**Files:**
+- Modify: `frontend/src/components/Player.svelte`
+
+- [ ] **Step 1: Confirm the drop in manual testing** (Task 5 step 1). If the route survives, skip this task entirely.
+
+- [ ] **Step 2: Re-assert on src swap**
+
+In `Player.svelte`, there is no explicit "src changed" hook (Svelte binds `src` reactively). The recovery path (`handleError`) and track-skip (`store.next()`) both mutate `store.player.current`, which re-runs the `src` binding. Add an `$effect` that watches the current track's videoId/itag and, **if the route was active**, calls the picker again after the swap settles:
+
+```ts
+  // If AirPlay was routing and a src swap occurred (track-skip or expiry
+  // recovery), Safari may drop the element-level route. Re-assert: when the
+  // videoId/itag changes AND we were routeActive, re-open engagement.
+  let prevRouteKey = '';
+  $effect(() => {
+    const t = store.player.current;
+    if (!t) return;
+    const key = `${t.videoId}:${t.itag}`;
+    const wasActive = airplay.state.routeActive;
+    if (key !== prevRouteKey && wasActive && el) {
+      // Defer until after the src swap has loaded the new source.
+      const onReady = () => {
+        airplay.showPicker();
+        el?.removeEventListener('loadedmetadata', onReady);
+      };
+      el.addEventListener('loadedmetadata', onReady, { once: true });
+    }
+    prevRouteKey = key;
+  });
+```
+
+> This re-opens the *picker* (a user-facing UI) on recovery, which is intrusive. The less intrusive Safari API is `el.webkitShowPlaybackTargetPicker()` only — there is no silent "re-route to previous device" API. If the manual test shows a silent drop with no good silent re-assert, the honest fallback is: surface a toast ("AirPlay dropped — tap to re-route") rather than a silent failure. **DECISION point at Task 5:** pick silent-picker vs toast based on what's actually observed; update this step's code to match before implementing.
+
+- [ ] **Step 3: Run gate + re-test**
+
+Run: `./scripts/check.sh` + repeat manual step #4/#5.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/src/components/Player.svelte
+git commit -m "fix(airplay): re-assert route after src swap"
+```
+
+---
+
+## Task 6 (conditional): Live playback AirPlay — escalation A→B→C
+
+The spec mandates trying Option A (hls.js `MEDIA_ATTACHING` workaround), then B (force native HLS while routed), shipping C (hide button for live) if neither holds. **Task 3 already ships C** (button hidden for live). This task is the escalation: attempt A/B to *enable* live AirPlay.
+
+**This task is research-gated** — it requires a live stream + Safari + (ideally) the Sonos, and the outcome (A works / B works / neither) determines the code. It is deliberately under-specified here: implement it only after Tasks 1–5 are validated, and write the concrete steps once the manual probe in Step 1 returns a result.
+
+**Files:**
+- Modify: `frontend/src/components/Player.svelte` (the live-mount effect, ~line 170)
+
+- [ ] **Step 1: Probe Option A (manual)**
+
+Run a live stream. With the button currently hidden for live (Task 3's `store.player.current.isLive` gate), temporarily remove that gate to expose the button. During hls.js's `MEDIA_ATTACHING` event, the Stremio workaround calls `webkitShowPlaybackTargetPicker()` (or ensures the element is AirPlay-eligible). Test: does `webkitCurrentPlaybackTargetIsWireless` go true and audio reach the Sonos through a 60s segment with no fatal `Hls.Error`?
+
+- **If A passes** → implement the `MEDIA_ATTACHING` hook (add a `hls.on(Hls.Events.MEDIA_ATTACHING, ...)` that engages AirPlay) and remove the live-hide gate. Write the code based on the observed working call.
+- **If A fails** → probe Option B.
+
+- [ ] **Step 2: Probe Option B (manual)**
+
+When a target connects (listen for `webkitcurrentplaybacktargetiswirelesschanged` → routeActive true on a live track), tear down hls.js and set `audio.src = t.liveStreamUrl` (native HLS). Verify the 60s contract. On disconnect, re-attach hls.js (resume at live edge).
+
+- **If B passes** → implement the teardown/reattach. This loses hls.js recovery while routed (documented tradeoff). Remove the live-hide gate.
+- **If B fails** → **C stays** (already shipped in Task 3). Document in the playbook that live AirPlay is unsupported; the button is correctly hidden.
+
+- [ ] **Step 3: Gate + playbook**
+
+Run `./scripts/check.sh`. Update `docs/PLAYBOOKS.md` checklist item #6 ("Live (whichever of A/B/C landed)") with the actual outcome. Commit with a message reflecting the result (e.g. `feat(airplay): live via hls.js MEDIA_ATTACHING` or `docs(airplay): live unsupported, button hidden (Option C)`).
+
+---
+
+## Self-Review
+
+**Spec coverage:**
+- §1 The button (4 APIs, availability listener, hidden-when-unavailable, disconnect behavior, track-skip, `x-webkit-airplay`, `.d.ts`, placement in Player + NowPlaying) → Tasks 1, 2, 3, 4.
+- §1 disconnect mid-playback → handled by the control's `WIRELESS_EVENT` listener (Task 1); verified manual Task 5 #3.
+- §1 track-skip persists → manual Task 5 #4 (+ Task 5b conditional).
+- §2 VOD path (no source-selection change; expiry auto-re-assert) → Task 3 wires `x-webkit-airplay`; Task 5b handles re-assert if needed.
+- §3 live (A/B/C) → Task 3 ships C; Task 6 escalates.
+- §Testing (vitest scope, feature-detect contract, manual gate) → Tasks 1, 3 tests; Task 5 playbook.
+- Task 0 falsifier → Task 0.
+- Clarifier: `playerControls.showPlaybackTargetPicker` shared entry point → Task 3 (Player) + Task 4 (NowPlaying uses it).
+
+**Gaps / decisions surfaced:**
+- `isSupportedEl` simplified to `hasPicker` only (the availability-event reachability check is unreliable cross-env and unnecessary — Safari dispatches the event alongside the picker). Documented inline in Task 1 Step 4.
+- NowPlaying button is stateless (no routeActive mirror) — acceptable MVP; documented.
+- Task 5b's exact behavior (silent re-assert vs toast) is decision-gated on manual observation — the plan does not guess.
+
+**Type consistency:** `createAirplayControl().isSupportedEl(el)` used in Task 3 matches the Task 1 signature. `playerControls.current.showPlaybackTargetPicker` matches the store type added in Task 3 and consumed in Task 4. Icon name `'airplay'` added in Task 2, used in Tasks 3+4.
diff --git a/docs/superpowers/specs/.review-panel/2026-07-29-airplay-to-sonos-design.md b/docs/superpowers/specs/.review-panel/2026-07-29-airplay-to-sonos-design.md
new file mode 100644
index 0000000..6b35a46
--- /dev/null
+++ b/docs/superpowers/specs/.review-panel/2026-07-29-airplay-to-sonos-design.md
@@ -0,0 +1,37 @@
+# Panel run — 2026-07-29-airplay-to-sonos-design.md  (2026-07-29 15:51)
+
+- **artifact:** docs/superpowers/specs/2026-07-29-airplay-to-sonos-design.md
+- **reviewer:** glm-review-design     **N:** 3
+- **lenses:** A ambiguity · B contradictions/feasibility · C testability
+- **per-lens:** A → 13 findings · B → 2 · C → 13  (tokens: none reported by agents; omitting per-skill "never fabricate")
+- **buckets:** must-resolve 4 · should-clarify 7 · consider ~8 · dropped <50: 0 (all reports were already scoped)
+- **asked:** 4 should-clarify → answers in the artifact's Clarifications section
+- **verdict:** GLM first pass. No code-vs-claim contradictions (lens B clean). Findings cluster on two missing artifacts: a falsifier for Task 0, and explicit acceptance/per-option pass-fail. One live-strategy answer (lens C Q3) reframed the build sequencing — see Clarifications.
+
+## Findings
+
+### must-resolve
+- [85] Task 0 "verify empirically" has no falsifier (lens A:38-41, lens C:37-41). Verdict confirmed by two lenses. → RESOLVE in spec: pass = audio plays from Sonos with HOST=127.0.0.1 unchanged; fail = Safari/Sonos attempts a fetch to a 127.0.0.1 URL it would have to resolve.
+- [80] Option A→B→C sequencing has no per-option pass/fail signal (lens A:121-123, lens C:121-123). → RESOLVE in spec: define the observable that triggers fallback (target connected + no audio within Ns, or fatal Hls.Error).
+- [78] AirPlay disconnect mid-playback undefined (lens A:96-123). → RESOLVE in spec: button reverts to inactive via the changed event; local playback continues at current position; no stall.
+- [75] Manual gate has no acceptance language (lens C:131-135). → RESOLVE in spec: binary-outcome checklist with a named Sonos model recorded alongside results.
+
+### should-clarify  (→ asked)
+- [72] Track-skip while routed — undefined (lens A:96-104). → **A:** Keep routing (route persists across track changes).
+- [70] Expiry-induced src swap drops the route (lens A/C:90-94, 127-130). → **A:** Auto re-assert after the recovery swap.
+- [68] Live A→B→C sequencing / hardware availability (lens C gaps, lens B consider). → **A:** dev machine is a Mac (Safari local) — build full A→B→C chain, validate locally; C-first MVP rationale withdrawn.
+- [65] AirPlay picker entry point across both surfaces (lens B:78-80). → **A:** new playerControls method (showPlaybackTargetPicker).
+- [60] Feature-detect contract for partial WebKit support (lens A:144, C:144). [hold for spec edit]
+- [60] Vitest scope — what "our logic" observably proves (lens C:127-130). [hold for spec edit]
+- [60] Manual gate acceptance wording (lens C:131-135). [overlaps must-resolve]
+
+### consider
+- [58] ALAC 16/44.1 vs lossy ≤48kHz source — one-line note (lens A:27-35).
+- [55] Battery-listener lifecycle tied to element mount vs playback (lens A:66-70).
+- [55] "survives past expiry" wording — expiry is on signed URL not route (lens A:90-94).
+- [52] Sonos model/firmware baseline recorded with results (lens C gap).
+- [50] iOS "no in-page picker" assertion uncited (lens A:43-51).
+- [50] NowPlaying querySelector('audio') path sufficient for the action or needs the new method (lens B:78-80) — resolved by the picker-method answer.
+
+### dropped <50
+- (none — all three reports were already scoped; dedup removed rest)
diff --git a/docs/superpowers/specs/2026-07-29-airplay-to-sonos-design.md b/docs/superpowers/specs/2026-07-29-airplay-to-sonos-design.md
new file mode 100644
index 0000000..109a50b
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-29-airplay-to-sonos-design.md
@@ -0,0 +1,257 @@
+# AirPlay from Safari to Sonos — design
+
+Date: 2026-07-29
+Status: draft, pending maintainer approval
+
+## Problem
+
+Playing Hum through a Sonos speaker today requires macOS System Settings → Sound
+→ Output, which routes **all** system audio (notification dings included) and
+adds latency that disagrees with the scrubber. What's wanted is a per-element
+route: an AirPlay button in Hum's own transport that sends only Hum's audio to
+the speaker.
+
+Safari exposes this, but Hum's `<audio>` element has no `controls` attribute
+(`frontend/src/components/Player.svelte:416-426`) — the app draws its own
+transport — so Safari never renders the native media bar where its free AirPlay
+button lives. The picker has to be driven from our own UI.
+
+## What AirPlay actually does here (constrains everything below)
+
+AirPlay to a **speaker** is a source-encoded push, not a URL handoff: the Mac
+decodes our stream, re-encodes to ALAC (capped 16-bit/44.1 kHz), and streams to
+the Sonos itself. The speaker never fetches our URL. This is the opposite of
+Chromecast, and different from AirPlay video-to-AppleTV, which *is* a URL
+handoff.
+
+Two consequences that shape the whole design:
+
+1. **No server changes are needed.** `HOST` stays `127.0.0.1`
+   (`app/config.py:21`); the Sonos never resolves a Hum URL, so signed URLs, the
+   host allowlist, and all three invariants are untouched. This is a
+   frontend-only feature.
+2. **MSE output cannot be routed.** hls.js feeds the element a blob URL, and
+   AirPlay has nothing to hand off or re-encode from a blob in the way the
+   element-level route expects. This is the live-playback problem in §3.
+
+⚠️ Consequence 1 is inferred from documented protocol behavior, not measured on
+this app. **Task 0 of the plan is to verify it empirically** before building on
+it, with an explicit falsifier:
+
+- **Pass:** with `HOST=127.0.0.1` unchanged, AirPlay a VOD track from Safari to
+  the Sonos — audio plays. (The speaker never fetched a Hum URL.)
+- **Fail:** Safari or the Sonos attempts a request to a `127.0.0.1` URL it
+  would have to resolve — i.e. the route only works if the receiver can reach
+  the origin. Watch the browser network panel and the Sonos for any such fetch.
+
+If Task 0 fails, the scope grows substantially (bind address, CORS origins,
+signed-URL audience) and this design should be revisited rather than patched.
+
+## Scope
+
+In scope: an AirPlay button in the Player transport, availability-gated, for
+**VOD playback**. Live playback gets a defined, honest behavior (§3) rather than
+a silent failure.
+
+Out of scope: Chromecast, multi-room grouping, AirPlay from iOS Safari (iOS has
+no in-page picker; the system Control Center route is the answer there), and any
+attempt to improve audio quality over the AirPlay path (protocol-capped).
+
+## Section 1 — The button
+
+Four WebKit APIs on `HTMLMediaElement`, none in `lib.dom.d.ts`:
+
+| API | Use |
+|---|---|
+| `webkitShowPlaybackTargetPicker()` | Opens the native picker. Requires a user gesture. |
+| `webkitplaybacktargetavailabilitychanged` | Event; `event.availability` is `"available"` / `"not-available"`. Gates button visibility. |
+| `webkitCurrentPlaybackTargetIsWireless` | Boolean; drives the button's active state. |
+| `webkitcurrentplaybacktargetiswirelesschanged` | Event; fires when the above flips. |
+
+Design decisions:
+
+- **Availability listener is mounted with the player, not globally.** Apple
+  documents that monitoring availability costs battery. It attaches in the same
+  `$effect` that owns the element and detaches on cleanup. Registering the
+  listener immediately dispatches an initial event with current availability, so
+  there's no separate "query current state" call.
+- **Button is hidden, not disabled, when unavailable.** Every non-Safari browser
+  reports nothing here; a permanently-disabled button in Chrome is noise.
+- **Disconnect mid-playback:** when the wireless route drops mid-track (Sonos
+  powered off, network blip), `webkitcurrentplaybacktargetiswirelesschanged`
+  fires and the button reverts to inactive. Local playback **continues at the
+  current position** — no stall, no restart. The route is not auto-re-engaged;
+  the user re-taps if they want it back.
+- **Track-skip while routed:** the route persists across track changes — the new
+  track plays on the Sonos. `src` swaps via `pickVodSrc` must not tear the route
+  down; this is verified alongside the recovery-swap case in Task 3, since both
+  are src-swap events.
+- **`x-webkit-airplay="allow"`** on the `<audio>` element.
+- **TypeScript declarations are required, not optional.** `svelte-check` runs in
+  the gate (`scripts/check.sh`), so a `.d.ts` augmenting `HTMLAudioElement` with
+  these four members must land in the same change or CI fails.
+
+Placement: the transport row in `Player.svelte`, and the overlay controls in
+`NowPlaying.svelte` — the existing pattern where both surfaces drive the same
+element through `playerControls`.
+
+## Section 2 — VOD (the path that works)
+
+No changes needed to source selection. `pickVodSrc`
+(`Player.svelte:17-21`) already hands Safari the native HLS URL
+`/api/hls/{id}.m3u8` — signed at `app/api/video.py:47-49` — because `hlsNative`
+is true there. That is a plain, receiver-fetchable, non-MSE source, which is
+exactly what the route wants.
+
+The one thing to verify: the signed HLS URL carries an expiry
+(`stream_url_ttl_seconds`, default 6 h). If a session outlasts it, the element
+errors and `handleError` (`Player.svelte:327+`) does its refetch dance — which
+swaps `src`, which **drops the AirPlay route**. (The expiry is on the signed
+URL, not on the route itself; the Mac has already been fetching and re-encoding,
+so it bites when the element re-requests segments, not on every packet.)
+Task 3 **auto re-asserts** the route after the recovery swap completes, so
+playback continues uninterrupted on the Sonos. The re-assert is verified as part
+of the same src-swap test as track-skip (§1), since both are src-swap events.
+
+## Section 3 — Live (the path that breaks)
+
+`Player.svelte:170-242` attaches hls.js whenever `Hls.isSupported()`, true in
+desktop Safari. MSE → blob URL → not routable. Left alone, the user taps AirPlay
+during a live stream and gets either a refused route or audio that keeps playing
+locally — a silent failure, which this repo's conventions specifically reject.
+
+Three options, in the order I'd try them:
+
+**A. hls.js `MEDIA_ATTACHING` workaround (try first).** Do the AirPlay setup
+during hls.js's `MEDIA_ATTACHING` event. This is what Stremio landed
+(`Stremio/stremio-video` PR #74) for the same problem. Cheapest if it works;
+keeps hls.js's recovery logic intact.
+
+**B. Force the native-HLS branch while a route is active.** `Player.svelte:243-245`
+already has this branch for iOS Safari (`audio.src = src`). When an AirPlay
+target connects, tear down hls.js and switch to it; re-attach hls.js on
+disconnect. Costs the recovery logic that the comment at `Player.svelte:165-168`
+says is the entire reason hls.js is there for live — playlist refresh, segment
+scheduling, discontinuity handling. A live stream that hiccups while routed will
+recover worse.
+
+**C. Hide the button for live tracks.** Honest, trivially correct, zero risk.
+The fallback if A and B both fail.
+
+// DECISION: try A, fall back to B, ship C if neither holds. **Never ship the
+silent failure.** Whichever lands, the button's state must tell the truth about
+whether the route will work.
+
+**Pass/fail per option** (the observable that triggers fallback to the next):
+- **A passes iff:** with hls.js attached and a target connected,
+  `webkitCurrentPlaybackTargetIsWireless === true` **and** audio is audible on
+  the Sonos through a 60s live segment with no fatal `Hls.Error`. If audio
+  never surfaces or a fatal error fires within that window → A fails, try B.
+- **B passes iff:** after tearing down hls.js and setting `audio.src = src`,
+  the same target-connected + audible-for-60s contract holds. Re-attach of
+  hls.js on disconnect must resume at the live edge (no stall, no manual seek).
+- **C** is unconditional — live tracks simply don't show the button.
+
+## Testing
+
+**Unit (vitest)** — what it observably proves, and what it doesn't:
+- The WebKit APIs are absent in jsdom, so they get mocked onto the element.
+  This tests **our logic, not Safari**: it proves that given a mocked
+  `availability` event the button's bound `hidden` state flips, and that after
+  unmount a further dispatch no longer mutates state (detach **by behaviour**,
+  not by a `removeEventListener` spy — a spy only proves the call was made, not
+  that the name matched a registered listener).
+- It does **not** prove: that the listener registers on the real Safari element,
+  that `webkitShowPlaybackTargetPicker` is called inside a user gesture (jsdom
+  has no gesture semantics), or that detach removes the Safari-side listener by
+  name. Those are manual.
+- Cases: dispatch `webkitplaybacktargetavailabilitychanged` with `"available"` →
+  button `hidden` is false; dispatch `"not-available"` → true; after unmount,
+  the same dispatch is a no-op; the magic string `webkitplaybacktargetavailabilitychanged`
+  is asserted verbatim (it appears four times across four identifiers; a typo
+  would pass jsdom silently).
+
+**Feature-detection contract** (the minimum API subset, testable as a pure
+boolean `airplaySupported(el)`):
+- Button **renders** iff `el.webkitShowPlaybackTargetPicker` is a function. This
+  is the minimum.
+- Button is **functional** iff that *plus* the `availability`-event mechanism is
+  present (the event name constant is reachable). Partial support — picker
+  present but no `availabilitychanged` — renders the button but leaves it
+  permanently in its initial state; treat as unsupported and hide.
+- The standard `remote.prompt()` (Remote Playback API) is feature-detected
+  alongside, so a future standards-based path is a small edit. If both exist,
+  prefer the WebKit API on Safari (the standard is poorly adopted there).
+
+**Manual, and it is the real gate.** None of this is verifiable in CI: no
+Safari, no Sonos. The gate is a binary-outcome checklist, **with the Sonos model
+and firmware recorded alongside the results** so it's reproducible. Minimum
+entries:
+
+1. **Task 0 (no-server-change premise):** `HOST=127.0.0.1` unchanged, AirPlay a
+   VOD track from Safari → Sonos. Pass = audio plays and the browser/Sonos makes
+   **no** fetch to a `127.0.0.1` URL. Fail = such a fetch appears.
+2. **VOD route:** open picker → Sonos appears in list within ~2s → select →
+   audio surfaces from the speaker, system output unchanged.
+3. **Disconnect mid-playback:** pull the route (power off Sonos / network blip)
+   → button reverts to inactive, local playback continues at current position.
+4. **Track-skip while routed:** next track → audio continues on the Sonos (route
+   persists).
+5. **Expiry recovery while routed:** force URL expiry → `handleError` recovery
+   swap fires → route auto re-asserts → audio continues on the Sonos.
+6. **Live (whichever of A/B/C landed):** per the §3 pass/fail contract.
+7. **Non-Safari (negative):** open in Chrome → no AirPlay button renders.
+
+Record results against a named Sonos model (e.g. `Sonos Era 100, S2 15.x`).
+A `docs/PLAYBOOKS.md` entry names this checklist so a CI grep can confirm it
+landed.
+
+## Risks
+
+| Risk | Handling |
+|---|---|
+| The no-server-change premise (§Problem) is wrong. | Task 0 verifies before anything is built. If wrong, revisit this design. |
+| Live can't be routed at all. | Option C — hide the button — is always available and always honest. |
+| Expiry recovery drops the route mid-listen. | Task 3 auto-re-asserts the route after the recovery swap (decided — see §2). |
+| WebKit APIs are non-standard and unversioned. | Feature-detect every one; also detect the standard `remote.prompt()` so a future standards-based path is a small edit. |
+| Sonos's AirPlay 2 implementation differs from a HomePod's. | Manual testing is against the actual target hardware, not a proxy. |
+
+## Non-goals reaffirmed
+
+This adds no server surface, no new route, no new signed-URL type, and no change
+to `app/models.py` / `frontend/src/lib/types.ts`. If an implementation finds
+itself touching any of those, that's a signal the premise in §Problem broke —
+stop and revisit.
+
+## Clarifications (2026-07-29)
+
+From the GLM review panel (3 lenses). Resolved findings folded into the body
+above; the four product/build decisions recorded here.
+
+- **Q (lens A/B/C): track-skip while routed** → **A:** the route persists across
+  track changes; the new track plays on the Sonos. Matches native-media-app
+  behaviour. `src` swaps via `pickVodSrc` must not tear the route down — verify
+  in Task 3 alongside the recovery-swap case, since both are src-swap events.
+- **Q (lens A/C): expiry-induced recovery swap drops the route** → **A:** auto
+  re-assert. After `handleError`'s `src` swap completes, programmatically
+  re-engage the AirPlay route so playback continues uninterrupted on the Sonos.
+  Replaces the "or accept the drop and document it" hedge in §2.
+- **Q (lens C): live A→B→C sequencing needs hardware** → **A:** the dev machine
+  is a Mac — Safari is local, so validation does not block on external hardware.
+  Withdraw the C-first-MVP recommendation: build the full A→B→C chain and
+  validate locally. (Sonos is still required for the final manual gate, but not
+  for iterating on the hls.js workaround.)
+- **Q (lens B): AirPlay picker entry across both surfaces** → **A:** add a new
+  `playerControls` method (`showPlaybackTargetPicker`). `NowPlaying.svelte`
+  reaches the element via `document.querySelector('audio')` for scrub/restart
+  (`NowPlaying.svelte:17,47,59`), not through `playerControls` — the AirPlay
+  action gets a shared entry point instead, matching the `toggle()` pattern
+  (`store.svelte.ts:24`, `NowPlaying.svelte:54`).
+
+## Panel follow-ups
+
+All four must-resolve / should-clarify items from the run report have been
+folded into the body: Task 0 falsifier (§Problem), option pass/fail contract
+(§3), disconnect mid-playback (§1), and the manual-gate checklist + feature-detect
+contract + vitest scope (§Testing). The risk table's expiry row was updated to
+match the auto-re-assert decision.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index afa6e9a..04886c2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "hum-frontend",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hum-frontend",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "dependencies": {
         "hls.js": "^1.6.16",
         "svelte": "^5.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index 3d782aa..f475629 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hum-frontend",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/components/Icon.svelte b/frontend/src/components/Icon.svelte
index a6c89fc..62f3bc0 100644
--- a/frontend/src/components/Icon.svelte
+++ b/frontend/src/components/Icon.svelte
@@ -10,7 +10,8 @@
     | 'grip-vertical'
     | 'chevron-up' | 'chevron-down'
     | 'chevron-right'
-    | 'maximize-2' | 'minimize-2';
+    | 'maximize-2' | 'minimize-2'
+    | 'airplay';
 
   type Props = {
     name: IconName;
@@ -55,5 +56,6 @@
   {:else if name === 'chevron-right'}<path d="m9 18 6-6-6-6"/>
   {:else if name === 'maximize-2'}<polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" x2="14" y1="3" y2="10"/><line x1="3" x2="10" y1="21" y2="14"/>
   {:else if name === 'minimize-2'}<polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" x2="21" y1="10" y2="3"/><line x1="3" x2="10" y1="21" y2="14"/>
+  {:else if name === 'airplay'}<path d="M8.71 3H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2"/><path d="M19 16h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-3.71"/><path d="m8 19 4-4 4 4"/><line x1="12" y1="15" x2="12" y2="22"/>
   {/if}
 </svg>
diff --git a/frontend/src/components/NowPlaying.svelte b/frontend/src/components/NowPlaying.svelte
index 8ebe1c6..51364ee 100644
--- a/frontend/src/components/NowPlaying.svelte
+++ b/frontend/src/components/NowPlaying.svelte
@@ -247,6 +247,21 @@
           <Icon name="repeat" size={24} />
         {/if}
       </button>
+
+      <!-- AirPlay: opens Safari's system picker via the shared playerControls
+           method (the <audio> element lives in Player.svelte). Active/route
+           state is owned there; this surface is intentionally stateless.
+           store.player.airplayCapable gates it so the button never shows when
+           AirPlay is unsupported, no target is available, or the track is live. -->
+      {#if store.player.airplayCapable}
+        <button
+          class="mode"
+          aria-label="AirPlay"
+          onclick={() => playerControls.current?.showPlaybackTargetPicker?.()}
+        >
+          <Icon name="airplay" size={24} />
+        </button>
+      {/if}
       </div>
     </div>
     <!-- Focus sentinel: catches Tab at the bottom boundary -->
diff --git a/frontend/src/components/Player.svelte b/frontend/src/components/Player.svelte
index 3ee8a2b..9545788 100644
--- a/frontend/src/components/Player.svelte
+++ b/frontend/src/components/Player.svelte
@@ -6,6 +6,10 @@
   import Icon from './Icon.svelte';
   import Marquee from './Marquee.svelte';
   import LivePill from './LivePill.svelte';
+  import { createAirplayControl } from '../lib/airplay.svelte';
+
+  const airplay = createAirplayControl();
+  let airplaySupported = $state(false);
 
   // Safari plays the HLS-wrapped AAC stream for VOD; everyone else uses the
   // direct proxy URL. canPlayType for the HLS MIME is a Safari-only signal.
@@ -110,6 +114,7 @@
       },
       setVolume: (v) => { if (el) el.volume = Math.max(0, Math.min(1, v)); },
       toggleMute: () => { if (el) el.muted = !el.muted; },
+      showPlaybackTargetPicker: () => airplay.showPicker(),
       getPosition: () => el?.currentTime ?? 0,
       restoreAt: (pos: number) => {
         const a = el;
@@ -138,6 +143,28 @@
     };
   });
 
+  // Attach the AirPlay control to the live <audio> element. Lifecycle is
+  // bound to the element (not global) per Apple's battery guidance.
+  $effect(() => {
+    const a = el;
+    if (!a) return;
+    airplay.attach(a);
+    airplaySupported = airplay.isSupportedEl(a);
+    return () => airplay.detach();
+  });
+
+  // AirPlay capability (supported + target available + not live). Written to
+  // the reactive store so BOTH Player and NowPlaying gate on one source —
+  // playerControls is a plain non-reactive imperative handle (see store), so a
+  // flag on it would never re-render NowPlaying when the availability event
+  // arrives post-mount.
+  let airplayCapable = $derived(
+    airplaySupported && airplay.state.available && !store.player.current?.isLive
+  );
+  $effect(() => {
+    store.player.airplayCapable = airplayCapable;
+  });
+
   // Reset Media Session metadata when the underlying videoId changes (not on
   // every recovery URL swap).
   let currentVideoId = $derived(store.player.current?.videoId ?? null);
@@ -423,6 +450,7 @@
       onended={advance}
       onerror={handleError}
       autoplay
+      {...{ 'x-webkit-airplay': 'allow' }}
     ></audio>
 
     <div class="info">
@@ -488,6 +516,17 @@
             <Icon name="repeat" size={18} />
           {/if}
         </button>
+        {#if airplayCapable}
+          <button
+            class="mode"
+            class:active={airplay.state.routeActive}
+            onclick={() => airplay.showPicker()}
+            aria-label="AirPlay"
+            aria-pressed={airplay.state.routeActive}
+          >
+            <Icon name="airplay" size={18} />
+          </button>
+        {/if}
       </div>
 
       {#if store.player.current.isLive}
diff --git a/frontend/src/lib/airplay.svelte.ts b/frontend/src/lib/airplay.svelte.ts
new file mode 100644
index 0000000..2130052
--- /dev/null
+++ b/frontend/src/lib/airplay.svelte.ts
@@ -0,0 +1,90 @@
+// AirPlay playback-target control.
+//
+// AirPlay to a speaker is a source-encoded push, not a URL handoff: the Mac
+// decodes + re-encodes the <audio> stream and sends it to the speaker, which
+// never fetches our URL. So this is purely a frontend concern — no server
+// surface, no signed-URL audience change.
+//
+// The WebKit APIs are non-standard and unversioned. Everything is
+// feature-detected; showPicker is a no-op if the picker isn't present.
+
+export type AirplayState = {
+  available: boolean;
+  routeActive: boolean;
+};
+
+// Magic strings — defined once. `webkitplaybacktargetavailabilitychanged`
+// appears in several places; a typo would fail silently under jsdom, so the
+// constant is asserted verbatim in the test.
+const AVAIL_EVENT = 'webkitplaybacktargetavailabilitychanged';
+const WIRELESS_EVENT = 'webkitcurrentplaybacktargetiswirelesschanged';
+
+type AirplayEl = HTMLAudioElement;
+
+export function createAirplayControl() {
+  const state = $state<AirplayState>({ available: false, routeActive: false });
+  let el: AirplayEl | null = null;
+
+  // Bound listener refs so detach can remove the EXACT registered function
+  // (removeEventListener matches by reference).
+  let onAvail: ((e: AirplayAvailabilityEvent) => void) | null = null;
+  let onWireless: (() => void) | null = null;
+
+  function hasPicker(el: AirplayEl): boolean {
+    return typeof el.webkitShowPlaybackTargetPicker === 'function';
+  }
+
+  // Picker fn is the minimum; the availability event is dispatched by Safari
+  // alongside it. If the picker exists, we assume the event machinery does.
+  function isSupportedEl(el: AirplayEl): boolean {
+    return hasPicker(el);
+  }
+
+  function attach(audio: AirplayEl) {
+    detach();
+    el = audio;
+    // A no-op element (jsdom, non-Safari): nothing to wire. isSupportedEl
+    // returns false, the button stays hidden.
+    if (!hasPicker(audio)) return;
+
+    onAvail = (e) => {
+      // Safari fires a native event with `.availability` directly on it;
+      // the test dispatches a CustomEvent, which carries payload under
+      // `.detail` instead. Accept either shape.
+      const availability = (e as any).detail?.availability ?? e.availability;
+      state.available = availability === 'available';
+    };
+    onWireless = () => {
+      // Read the live property — Safari updates it with/before the event.
+      state.routeActive = !!el?.webkitCurrentPlaybackTargetIsWireless;
+    };
+    audio.addEventListener(AVAIL_EVENT, onAvail as EventListener);
+    audio.addEventListener(WIRELESS_EVENT, onWireless as EventListener);
+    // Seed routeActive from the current property in case we attached to an
+    // element already routed.
+    state.routeActive = !!audio.webkitCurrentPlaybackTargetIsWireless;
+  }
+
+  function detach() {
+    if (el && onAvail) el.removeEventListener(AVAIL_EVENT, onAvail as EventListener);
+    if (el && onWireless) el.removeEventListener(WIRELESS_EVENT, onWireless as EventListener);
+    el = null;
+    onAvail = null;
+    onWireless = null;
+    state.available = false;
+    state.routeActive = false;
+  }
+
+  function showPicker() {
+    // Safe no-op when unsupported/unattached.
+    if (el && hasPicker(el)) el.webkitShowPlaybackTargetPicker!();
+  }
+
+  return {
+    get state() { return state; },
+    attach,
+    detach,
+    showPicker,
+    isSupportedEl,
+  };
+}
diff --git a/frontend/src/lib/store.svelte.ts b/frontend/src/lib/store.svelte.ts
index f2b3568..3f09464 100644
--- a/frontend/src/lib/store.svelte.ts
+++ b/frontend/src/lib/store.svelte.ts
@@ -14,6 +14,7 @@ export type PlayerControls = {
   seekBy: (deltaSeconds: number) => void;
   setVolume: (v: number) => void;
   toggleMute: () => void;
+  showPlaybackTargetPicker?: () => void;
   getPosition?: () => number;
   restoreAt?: (pos: number) => void;
 };
@@ -36,6 +37,11 @@ type PlayerState = {
   shuffle: boolean;
   repeat: 'off' | 'one' | 'all';
   isExpanded: boolean;
+  // True iff AirPlay is supported, a target is available, and the current
+  // track is routable (not live). Reactive so both Player and NowPlaying gate
+  // their buttons on the same source. Player owns the writes (derived from its
+  // airplay-control instance); NowPlaying only reads.
+  airplayCapable: boolean;
 };
 
 type Toast = {
@@ -77,7 +83,7 @@ class AppStore {
     // and skips the rehydrate refetch entirely.
     loadJson<Track[]>(KEY_QUEUE, []).map((t) => ({ ...t, audioUrl: '', hlsUrl: undefined }))
   );
-  player = $state<PlayerState>({ current: null, isPlaying: false, positionSeconds: 0, shuffle: false, repeat: 'off', isExpanded: false });
+  player = $state<PlayerState>({ current: null, isPlaying: false, positionSeconds: 0, shuffle: false, repeat: 'off', isExpanded: false, airplayCapable: false });
   toast = $state<Toast | null>(null);
 
   #saveTimer: ReturnType<typeof setTimeout> | null = null;
diff --git a/frontend/src/types/airplay.d.ts b/frontend/src/types/airplay.d.ts
new file mode 100644
index 0000000..41d9dec
--- /dev/null
+++ b/frontend/src/types/airplay.d.ts
@@ -0,0 +1,31 @@
+// WebKit AirPlay playback-target APIs on HTMLMediaElement. Non-standard,
+// absent from lib.dom.d.ts. Declared here so svelte-check passes; the
+// runtime feature-detects each one before use.
+export {};
+
+declare global {
+  interface HTMLMediaElement {
+    webkitShowPlaybackTargetPicker?: () => void;
+    webkitCurrentPlaybackTargetIsWireless?: boolean;
+    addEventListener(
+      type: 'webkitplaybacktargetavailabilitychanged',
+      listener: (this: HTMLMediaElement, ev: AirplayAvailabilityEvent) => void,
+    ): void;
+    addEventListener(
+      type: 'webkitcurrentplaybacktargetiswirelesschanged',
+      listener: (this: HTMLMediaElement, ev: Event) => void,
+    ): void;
+    removeEventListener(
+      type: 'webkitplaybacktargetavailabilitychanged',
+      listener: (this: HTMLMediaElement, ev: AirplayAvailabilityEvent) => void,
+    ): void;
+    removeEventListener(
+      type: 'webkitcurrentplaybacktargetiswirelesschanged',
+      listener: (this: HTMLMediaElement, ev: Event) => void,
+    ): void;
+  }
+
+  interface AirplayAvailabilityEvent extends Event {
+    availability: 'available' | 'not-available';
+  }
+}
diff --git a/frontend/tests/components/NowPlaying.test.ts b/frontend/tests/components/NowPlaying.test.ts
new file mode 100644
index 0000000..1844234
--- /dev/null
+++ b/frontend/tests/components/NowPlaying.test.ts
@@ -0,0 +1,65 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import NowPlaying from '../../src/components/NowPlaying.svelte';
+import { store, playerControls } from '../../src/lib/store.svelte';
+import type { Track } from '../../src/lib/types';
+
+const sampleTrack = (id: string, audioUrl: string): Track => ({
+  videoId: id,
+  title: `Track ${id}`,
+  author: 'A',
+  durationSeconds: 100,
+  thumbnailUrl: '',
+  audioUrl,
+  itag: 140,
+});
+
+beforeEach(() => {
+  store.clear();
+  store.player.current = null;
+  store.player.isExpanded = false;
+  store.player.airplayCapable = false;
+  playerControls.current = null;
+});
+
+describe('NowPlaying — AirPlay button gating', () => {
+  it('does not render the airplay button when airplayCapable is false', async () => {
+    store.playNow(sampleTrack('abc', '/proxy/audio/abc?itag=140&exp=1&sig=' + 'a'.repeat(32)));
+    store.expandPlayer();
+    store.player.airplayCapable = false;
+    playerControls.current = {
+      play: () => {}, pause: () => {}, toggle: () => {},
+      seekBy: () => {}, setVolume: () => {}, toggleMute: () => {},
+      showPlaybackTargetPicker: () => {},
+    };
+    const { container } = render(NowPlaying);
+    await tick();
+    expect(container.querySelector('[aria-label="AirPlay"]')).toBeNull();
+  });
+
+  it('renders the airplay button when airplayCapable flips true AFTER mount', async () => {
+    // This is the real lifecycle: Player's $effect sets airplayCapable on the
+    // reactive store AFTER NowPlaying has rendered, when the availability event
+    // arrives. The flag lives in store.player (a $state), so the flip must
+    // re-render NowPlaying and surface the button. (C1 regression guard: the
+    // flag previously lived on the non-reactive playerControls object and the
+    // post-mount mutation never reached the template.)
+    store.playNow(sampleTrack('abc', '/proxy/audio/abc?itag=140&exp=1&sig=' + 'a'.repeat(32)));
+    store.expandPlayer();
+    store.player.airplayCapable = false;
+    playerControls.current = {
+      play: () => {}, pause: () => {}, toggle: () => {},
+      seekBy: () => {}, setVolume: () => {}, toggleMute: () => {},
+      showPlaybackTargetPicker: () => {},
+    };
+    const { container } = render(NowPlaying);
+    await tick();
+    expect(container.querySelector('[aria-label="AirPlay"]')).toBeNull();
+
+    // Player's effect fires this after the availability event arrives.
+    store.player.airplayCapable = true;
+    await tick();
+    expect(container.querySelector('[aria-label="AirPlay"]')).not.toBeNull();
+  });
+});
diff --git a/frontend/tests/components/Player.test.ts b/frontend/tests/components/Player.test.ts
index 7cf72d7..84acdd2 100644
--- a/frontend/tests/components/Player.test.ts
+++ b/frontend/tests/components/Player.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { render } from '@testing-library/svelte';
 import { tick } from 'svelte';
 import Player from '../../src/components/Player.svelte';
@@ -227,3 +227,81 @@ describe('Player — live tracks', () => {
     expect(await findByText(/LIVE/i)).toBeInTheDocument();
   });
 });
+
+// Helper: make a VOD track with a valid-shaped signed URL.
+const liveTrack = (id: string): Track => ({
+  ...sampleTrack(id, ''),
+  isLive: true,
+  liveStreamUrl: 'https://example.com/live.m3u8',
+});
+
+describe('Player — AirPlay button', () => {
+  beforeEach(() => {
+    // jsdom has no webkit* APIs by default → button hidden.
+  });
+
+  it('does not render the airplay button when unsupported (jsdom)', async () => {
+    store.playNow(sampleTrack('abc', '/proxy/audio/abc?itag=140&exp=1&sig=' + 'a'.repeat(32)));
+    const { container } = render(Player);
+    await tick();
+    const btn = container.querySelector('[aria-label="AirPlay"]');
+    expect(btn).toBeNull();
+  });
+
+  it('hides the airplay button for live tracks even when supported', async () => {
+    // Simulate Safari by stamping the picker fn onto the audio element after
+    // render. Player attaches on mount; we patch the prototype before render.
+    (HTMLAudioElement.prototype as any).webkitShowPlaybackTargetPicker = () => {};
+    try {
+      store.playNow(liveTrack('live1'));
+      const { container } = render(Player);
+      await tick();
+      const btn = container.querySelector('[aria-label="AirPlay"]');
+      // Live tracks: hidden until §3 lands (Option C).
+      expect(btn).toBeNull();
+    } finally {
+      delete (HTMLAudioElement.prototype as any).webkitShowPlaybackTargetPicker;
+    }
+  });
+
+  it('shows the airplay button and calls the picker when supported + available + non-live', async () => {
+    const AVAIL = 'webkitplaybacktargetavailabilitychanged';
+    const spy = vi.fn();
+    (HTMLAudioElement.prototype as any).webkitShowPlaybackTargetPicker = spy;
+    try {
+      store.playNow(sampleTrack('abc', '/proxy/audio/abc?itag=140&exp=1&sig=' + 'a'.repeat(32)));
+      const { container } = render(Player);
+      await tick();
+      // Button absent until an availability event says a target exists.
+      let btn = container.querySelector('[aria-label="AirPlay"]');
+      expect(btn).toBeNull();
+
+      const audio = container.querySelector('audio')!;
+      audio.dispatchEvent(new CustomEvent(AVAIL, { detail: { availability: 'available' } }));
+      await tick();
+      btn = container.querySelector('[aria-label="AirPlay"]');
+      expect(btn).not.toBeNull();
+      (btn as HTMLButtonElement).click();
+      expect(spy).toHaveBeenCalled();
+    } finally {
+      delete (HTMLAudioElement.prototype as any).webkitShowPlaybackTargetPicker;
+    }
+  });
+
+
+  it('exposes showPlaybackTargetPicker on playerControls', async () => {
+    store.playNow(sampleTrack('abc', '/proxy/audio/abc?itag=140&exp=1&sig=' + 'a'.repeat(32)));
+    render(Player);
+    await tick();
+    expect(typeof playerControls.current?.showPlaybackTargetPicker).toBe('function');
+  });
+
+  it('airplayCapable stays false when unsupported so NowPlaying can gate on it', async () => {
+    // jsdom: no webkit API → airplaySupported stays false → flag stays false.
+    store.playNow(sampleTrack('abc', '/proxy/audio/abc?itag=140&exp=1&sig=' + 'a'.repeat(32)));
+    render(Player);
+    await tick();
+    expect(store.player.airplayCapable).toBe(false);
+  });
+});
+
diff --git a/frontend/tests/lib/airplay.test.ts b/frontend/tests/lib/airplay.test.ts
new file mode 100644
index 0000000..c6a32ec
--- /dev/null
+++ b/frontend/tests/lib/airplay.test.ts
@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { createAirplayControl } from '../../src/lib/airplay.svelte';
+
+// The magic event name appears identically in several identifiers; a typo
+// would pass jsdom silently because it never dispatches. Asserting the
+// constant here catches a rename regression.
+const AVAIL_EVENT = 'webkitplaybacktargetavailabilitychanged';
+
+function makeAudio(opts: {
+  picker?: boolean;
+  wireless?: boolean;
+}): HTMLAudioElement {
+  const a = document.createElement('audio');
+  if (opts.picker) {
+    (a as any).webkitShowPlaybackTargetPicker = vi.fn();
+  }
+  if (opts.wireless !== undefined) {
+    (a as any).webkitCurrentPlaybackTargetIsWireless = opts.wireless;
+  }
+  return a;
+}
+
+describe('airplay control — feature detection', () => {
+  it('reports supported when picker fn + availability event are both present', () => {
+    const ctl = createAirplayControl();
+    const a = makeAudio({ picker: true });
+    expect(ctl.isSupportedEl(a)).toBe(true);
+  });
+
+  it('reports unsupported when the picker is missing', () => {
+    const ctl = createAirplayControl();
+    const a = makeAudio({ picker: false });
+    expect(ctl.isSupportedEl(a)).toBe(false);
+  });
+});
+
+describe('airplay control — availability + route state', () => {
+  let ctl: ReturnType<typeof createAirplayControl>;
+
+  beforeEach(() => {
+    ctl = createAirplayControl();
+  });
+
+  it('starts unavailable and inactive', () => {
+    expect(ctl.state.available).toBe(false);
+    expect(ctl.state.routeActive).toBe(false);
+  });
+
+  it('flips available when an "available" event dispatches', async () => {
+    const a = makeAudio({ picker: true });
+    ctl.attach(a);
+    a.dispatchEvent(new CustomEvent(AVAIL_EVENT, { detail: { availability: 'available' } }));
+    expect(ctl.state.available).toBe(true);
+  });
+
+  it('flips back when "not-available" dispatches', async () => {
+    const a = makeAudio({ picker: true });
+    ctl.attach(a);
+    a.dispatchEvent(new CustomEvent(AVAIL_EVENT, { detail: { availability: 'available' } }));
+    a.dispatchEvent(new CustomEvent(AVAIL_EVENT, { detail: { availability: 'not-available' } }));
+    expect(ctl.state.available).toBe(false);
+  });
+
+  it('flips routeActive when the wireless-changed event fires', () => {
+    const a = makeAudio({ picker: true, wireless: false });
+    ctl.attach(a);
+    a.dispatchEvent(new CustomEvent('webkitcurrentplaybacktargetiswirelesschanged'));
+    // Fire it again after setting the property true (Safari updates the prop
+    // before/with the event).
+    (a as any).webkitCurrentPlaybackTargetIsWireless = true;
+    a.dispatchEvent(new CustomEvent('webkitcurrentplaybacktargetiswirelesschanged'));
+    expect(ctl.state.routeActive).toBe(true);
+  });
+
+  it('detaches by behaviour: events after detach do not mutate state', () => {
+    const a = makeAudio({ picker: true });
+    ctl.attach(a);
+    ctl.detach();
+    a.dispatchEvent(new CustomEvent(AVAIL_EVENT, { detail: { availability: 'available' } }));
+    expect(ctl.state.available).toBe(false);
+  });
+
+  it('showPicker calls the element method', () => {
+    const a = makeAudio({ picker: true });
+    ctl.attach(a);
+    ctl.showPicker();
+    expect((a as any).webkitShowPlaybackTargetPicker).toHaveBeenCalled();
+  });
+
+  it('showPicker is a safe no-op when not attached', () => {
+    ctl.showPicker(); // must not throw
+  });
+});
diff --git a/pyproject.toml b/pyproject.toml
index cf856ac..9ac2c73 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "hum"
-version = "0.1.1"
+version = "0.1.2"
 description = "Hum — a self-hosted YouTube audio streamer for the home"
 readme = "README.md"
 requires-python = ">=3.11"
diff --git a/uv.lock b/uv.lock
index 936b107..dd3ee47 100644
--- a/uv.lock
+++ b/uv.lock
@@ -631,7 +631,7 @@ wheels = [
 
 [[package]]
 name = "hum"
-version = "0.1.1"
+version = "0.1.2"
 source = { editable = "." }
 dependencies = [
     { name = "blake3" },