Merge main into jamesdsp and register its assets

Add JamesDSP integration plan
Verify transport geometry, playback states and themed icons across both engines
2026-10-09 18:37:35 +08:00 · 2026-10-09 18:30:26 +08:00 · 2026-10-09 16:12:28 +08:00 · 2026-10-09 16:10:02 +08:00 · 2026-10-09 15:54:22 +08:00 · 2026-10-09 15:47:35 +08:00
219 changed files with 377839 additions and 4048 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,9 @@ plans/codex-report*.md
 # performance harness artifacts and temp files
 perf/fixtures/
 perf/.tmp/
 # UI regression screenshots and local measurements
 plans/ui-shots/
 # Transport regression screenshots
 plans/transport-shots/
--- a/docker-compose.beta.yml
+++ b/docker-compose.beta.yml
@@ -0,0 +1,34 @@
 # Beta stack (beta.worship.hesed.sbs). Separate from prod on purpose: own named
 # volumes (no shared DB or media drive), no hardcoded Traefik labels (Dokploy
 # injects the domain routing), no lyrics/piano workers.
 services:
  ytplayer:
    build: .
    restart: unless-stopped
    volumes:
      - ytplayer-beta-data:/app/data
    environment:
      PORT: "3000"
      DB_PATH: "/app/data/ytplayer.db"
      MEDIA_DIR: "/app/data/media"
      UPLOAD_DIR: "/app/data/uploads"
      MEDIA_CACHE_MAX_BYTES: "10737418240"
      APP_VERSION: "1.0.0-beta"
      ADMIN_PASSWORD: "${ADMIN_PASSWORD:-}"
      P2P_ENABLED: "${P2P_ENABLED:-0}"
    healthcheck:
      test: ["CMD", "curl", "-sf", "http://localhost:3000/api/version"]
      interval: 30s
      timeout: 5s
      retries: 3
      start_period: 15s
    networks:
      - dokploy-network
 volumes:
  ytplayer-beta-data:
    driver: local
 networks:
  dokploy-network:
    external: true
--- a/frontend/admin.html
+++ b/frontend/admin.html
@@ -6,6 +6,7 @@
  <meta name="robots" content="noindex" />
  <meta name="theme-color" content="#0a0c12" />
  <title>Lyrics Studio</title>
  <link rel="stylesheet" href="download-actions.css" />
  <style>
    :root {
      color-scheme: dark;
@@ -193,7 +194,7 @@
    .transport { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
    .round { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.06); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
    .round.big { width: 52px; height: 52px; border: 0; background: var(--grad); box-shadow: 0 10px 24px -8px var(--a1); }
-    .round svg { width: 20px; height: 20px; fill: #fff; }
+    .round svg { width: 20px; height: 20px; }
    .clock { font: 600 17px var(--mono); letter-spacing: -.02em; min-width: 108px; text-align: center; }
    .clock b { color: var(--a2); } .clock span { color: var(--text-dim); font-size: 13px; }
    .seg { display: inline-flex; padding: 3px; border-radius: 13px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
@@ -312,7 +313,9 @@
      main { padding-top: 16px; }
    }
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
-  </style>
+  .media-shape { display:none; } .media-shape-classic { display:inline; }
 .media-icon { width:18px; height:18px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
 </style>
 </head>
 <body>
@@ -382,7 +385,7 @@
          <canvas id="wave" height="64"></canvas>
          <div class="transport">
            <button class="round" id="bBack" type="button" title="Back 5 s" aria-label="Back 5 seconds">−5</button>
-            <button class="round big" id="bPlay" type="button" aria-label="Play or pause"><svg viewBox="0 0 24 24"><path id="playIcon" d="M8 5v14l11-7z"/></svg></button>
+            <button class="round big" id="bPlay" type="button" aria-label="Play or pause"><svg id="playIcon" class="transport-icon" data-transport-icon="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use class="transport-shape transport-shape-classic" href="#transport-play"/><use class="transport-shape transport-shape-f7-swipe" href="#transport-play-f7-swipe"/><use class="transport-shape transport-shape-glass-stage" href="#transport-play-glass-stage"/><use class="transport-shape transport-shape-bento-hub" href="#transport-play-bento-hub"/></svg></button>
            <button class="round" id="bFwd" type="button" title="Forward 5 s" aria-label="Forward 5 seconds">+5</button>
            <div class="clock"><b id="cur">0:00.00</b> <span>/ <span id="dur">0:00</span></span></div>
            <select class="mini" id="rate" title="Playback speed" aria-label="Playback speed">
@@ -407,7 +410,7 @@
            <label>Shift every timed line by <input class="field" id="shiftBy" type="text" value="0.0" style="flex:0 0 84px;height:36px;text-align:center" /> s</label>
            <button class="btn sm" id="shiftBtn" type="button">Apply</button>
            <span class="grow"></span>
-            <button class="btn sm" id="webBtn" type="button" title="Fetch lyrics from LRCLIB">⤓ Pull from LRCLIB</button>
+            <button class="btn sm" id="webBtn" type="button" title="Fetch lyrics from LRCLIB"><svg class="media-icon" data-media-icon="download" viewBox="0 0 24 24" aria-hidden="true"><use href="#media-download"/></svg> Pull from LRCLIB</button>
            <button class="btn sm" id="rawBtn" type="button">✎ Edit as text</button>
            <label><input type="checkbox" id="follow" checked /> Follow playback</label>
          </div>
@@ -508,7 +511,7 @@
      <div class="card">
        <div class="row" style="margin-bottom:8px"><h2 style="margin:0">Recent edits</h2><span class="grow"></span>
          <button class="btn sm" id="refreshBtn" type="button">↻ Refresh</button>
-          <a class="btn sm" href="/api/admin/notes/export">⤓ Export all (JSON)</a></div>
+          <a class="btn sm" href="/api/admin/notes/export"><svg class="media-icon" data-media-icon="download" viewBox="0 0 24 24" aria-hidden="true"><use href="#media-download"/></svg> Export all (JSON)</a></div>
        <div class="scroll"><table class="tbl" id="revTable"></table></div>
        <pre id="revView" class="hidden" style="margin-top:12px"></pre>
      </div>
@@ -569,6 +572,7 @@
  <nav class="nav" id="tabsBottom" role="tablist"></nav>
 </div>
 <script src="download-actions.js"></script>
 <script src="lyrics-core.js"></script>
 <script>
 (function () {
@@ -1169,8 +1173,8 @@
      const a = new Audio(url); a.preload = 'auto';
      a.addEventListener('timeupdate', tick); a.addEventListener('seeked', tick);
      a.addEventListener('loadedmetadata', () => { if (a.duration) { LE.dur = a.duration; $('dur').textContent = fmtT(a.duration).slice(0, -3); } draw(); });
-      a.addEventListener('play', () => { $('playIcon').setAttribute('d', 'M7 5h4v14H7zM13 5h4v14h-4z'); });
+      a.addEventListener('play', () => { TransportIcons.set($('bPlay'),'pause'); });
-      a.addEventListener('pause', () => { $('playIcon').setAttribute('d', 'M8 5v14l11-7z'); });
+      a.addEventListener('pause', () => { TransportIcons.set($('bPlay'),'play'); });
      a.addEventListener('error', () => say('No playable audio for this song on the server — you can still edit the text.', 'err'));
      a.playbackRate = Number($('rate').value);
      LE.audio = a;
@@ -1196,7 +1200,7 @@
      <div class="ln-tools">
        <input class="tin" value="${esc(fmtT(line.t))}" placeholder="0:00.00" aria-label="Time" />
        <button class="btn" data-act="set" type="button">◎ Stamp now</button>
-        <button class="btn" data-act="seek" type="button">▶ Play here</button>
+        <button class="btn" data-act="seek" type="button">${TransportIcons.svg('play')} Play here</button>
        <button class="btn" data-act="nudge" data-d="-0.2" type="button">−0.2</button>
        <button class="btn" data-act="nudge" data-d="0.2" type="button">+0.2</button>
        <select class="mini" data-kind aria-label="Line type"><option value="line">Line</option><option value="section">Section</option><option value="cue">Cue</option></select>
--- a/frontend/app-bootstrap.test.js
+++ b/frontend/app-bootstrap.test.js
@@ -0,0 +1,84 @@
 const {test}=require('node:test');
 const assert=require('node:assert/strict');
 const {webcrypto,createHash}=require('node:crypto');
 const vm=require('node:vm');
 const {readFileSync}=require('node:fs');
 function fixture({cached=false,tampered=false,enabled=true,loading=false,quota=false,insecure=false,previous=false,contract=1,capture=true,controller=true,parser=false}={}){
 const source='window.appRuns=(window.appRuns||0)+1; window.boot=()=>window.bootRuns=(window.bootRuns||0)+1; document.addEventListener("DOMContentLoaded",boot);',hash=createHash('sha256').update(source).digest('hex'), key='/app.js?v='+hash.slice(0,10);
 const oldSource='window.oldApp=true;'+source, oldHash=createHash('sha256').update(oldSource).digest('hex').slice(0,10), oldKey='/app.js?v='+oldHash;
 const held=new Map(), appended=[],writes=[],listeners={};let calls=0;
 const response=()=>new Response(tampered?'bad':source,{headers:{'X-Asset-Hash':hash.slice(0,10)}});
 if(cached)held.set(key,response());
 if(previous){held.set(oldKey,new Response(oldSource,{headers:{'X-Asset-Hash':oldHash}}));held.set('/__ytp_asset_state',Response.json({previous:{files:{'/app.js':{h:oldHash}},groups:{core:{contract,files:['/app.js']}}}}));}
 const root={crypto:insecure?undefined:webcrypto,TextDecoder,Uint8Array,btoa,console,AssetSyncCore:require('./asset-sync-core'),navigator:{serviceWorker:{controller:controller?{}:null}},Lazy:{captureApp:capture,manifest:{groups:{core:{contract:1,files:['/app.js']}},appCache:enabled,files:{'/app.js':{h:hash.slice(0,10)}}},url:()=>key},fetch:async()=>{calls++;return previous?new Response(oldSource,{headers:{'X-Asset-Hash':oldHash}}):response();},caches:{open:async()=>({match:async k=>held.get(k)?.clone(),put:async(k,r)=>{if(quota)throw Error('quota');held.set(k,r.clone());}})}};
 const doc=root.document={readyState:loading?'loading':'complete',currentScript:parser?{}:null,write:value=>{writes.push(value);vm.runInContext(source,context);},querySelector:()=>({content:"script-src 'self' 'sha256-"+Buffer.from(hash,'hex').toString('base64')+"'"}),addEventListener:(name,fn)=>(listeners[name] ||= []).push(fn),createElement:()=>({remove(){this.removed=true;}}),head:{append(node){appended.push(node);if(node.textContent)vm.runInContext(node.textContent,context);else {queueMicrotask(async()=>{if(previous && node.src===key){const state=await held.get('/__ytp_asset_state').clone().json();if(!root.AssetSyncCore.fallback(root.Lazy.manifest,state.previous,'/app.js'))return node.onerror();vm.runInContext(oldSource,context);}else vm.runInContext(node.src===oldKey?oldSource:source,context);node.onload();});}}}};
 root.window=root;const context=vm.createContext(root);
 vm.runInContext(readFileSync(require.resolve('./section-rail.js'),'utf8'),context);
 return {root,held,appended,writes,listeners,key,calls:()=>calls,doc,response,oldKey};
 }
 test('cold boot caches verified app before execution so worker skips its download',async()=>{
 const f=fixture();await f.root.AppBootstrap.ready;assert.equal(f.calls(),1);assert.ok(f.held.has(f.key));assert.equal(f.root.appRuns,1);assert.equal(f.root.bootRuns,1);assert.equal(f.appended[0].src,undefined);assert.equal(f.appended[0].removed,true);
 });
 test('offline boot reads the exact cached app without network or re-evaluation',async()=>{
 const f=fixture({cached:true});await f.root.AppBootstrap.ready;assert.equal(f.calls(),0);assert.equal(f.root.appRuns,1);assert.equal(f.root.bootRuns,1);
 });
 test('tampered cached bytes are rejected before execution',async()=>{
 const f=fixture({cached:true,tampered:true});await assert.rejects(f.root.AppBootstrap.ready,/hash/);assert.equal(f.root.appRuns,undefined);
 });
 test('native and rollback boot use the original external classic script',async()=>{
 const f=fixture({enabled:false});await f.root.AppBootstrap.ready;assert.equal(f.calls(),0);assert.equal(f.appended[0].src,f.key);assert.equal(f.root.bootRuns,1);
 });
 test('boot waits for the normal DOM event when the parser has not finished',async()=>{
 const f=fixture({loading:true});await f.root.AppBootstrap.ready;assert.equal(f.root.bootRuns,undefined);for(const fn of f.listeners.DOMContentLoaded)fn();assert.equal(f.root.appRuns,1);assert.equal(f.root.bootRuns,1);
 });
 test('quota failure still executes the verified response without deleting saved data',async()=>{
 const f=fixture({quota:true});await f.root.AppBootstrap.ready;assert.equal(f.calls(),1);assert.equal(f.root.appRuns,1);assert.equal(f.root.bootRuns,1);
 });
 test('the early head response is consumed without a second page fetch',async()=>{
 const f=fixture();f.root.Lazy.appResponse=Promise.resolve(f.response());await f.root.AppBootstrap.ready;
 assert.equal(f.calls(),0);assert.ok(f.held.has(f.key));assert.equal(f.root.appRuns,1);
 });
 test('insecure local HTTP boot retains external execution without WebCrypto',async()=>{
 const f=fixture({insecure:true});await f.root.AppBootstrap.ready;assert.equal(f.calls(),0);assert.equal(f.appended[0].src,f.key);assert.equal(f.root.bootRuns,1);
 });
 test('missing current app uses verified same-contract N-1 offline through the controlling worker',async()=>{
 const f=fixture({previous:true});await f.root.AppBootstrap.ready;
 assert.equal(f.appended[0].src,f.oldKey);assert.equal(f.root.oldApp,true);assert.equal(f.root.bootRuns,1);assert.equal(f.held.has(f.key),false);
 });
 test('an incompatible previous core never executes against the new shell',async()=>{
 const f=fixture({previous:true,contract:2});await assert.rejects(f.root.AppBootstrap.ready,/hash/);assert.equal(f.root.appRuns,undefined);
 });
 test('a feature contract change also prevents stale core execution',async()=>{
 const f=fixture({previous:true});f.root.Lazy.manifest.groups['feature:test']={contract:2,files:[]};
 const state=await f.held.get('/__ytp_asset_state').json();state.previous.groups['feature:test']={contract:1,files:[]};f.held.set('/__ytp_asset_state',Response.json(state));
 await assert.rejects(f.root.AppBootstrap.ready,/hash/);assert.equal(f.root.appRuns,undefined);
 });
 test('native-cache engines use their external script and keep normal code-cache behavior',async()=>{
 const f=fixture({capture:false,controller:false});await f.root.AppBootstrap.ready;assert.equal(f.calls(),0);assert.equal(f.appended[0].src,f.key);assert.equal(f.root.bootRuns,1);
 });
 test('native-cache engines still reject an incompatible retained core',async()=>{
 const f=fixture({capture:false,previous:true,contract:2});await assert.rejects(f.root.AppBootstrap.ready,/Unable to load player/);assert.equal(f.root.appRuns,undefined);
 });
 test('native-cache engines use the validated current cache entry without decoding its body',async()=>{
 const f=fixture({capture:false,cached:true});await f.root.AppBootstrap.ready;assert.equal(f.calls(),0);assert.equal(f.appended[0].src,f.key);assert.equal(f.root.bootRuns,1);
 });
 test('native parser boot preserves classic evaluation before the original DOM event',async()=>{
 const f=fixture({capture:false,loading:true,parser:true});
 assert.equal(f.root.appRuns,1);assert.equal(f.root.bootRuns,undefined);
 assert.deepEqual(f.writes,['<script src="'+f.key+'"></script>']);assert.equal(f.appended.length,0);
 for(const fn of f.listeners.DOMContentLoaded)fn();await f.root.AppBootstrap.ready;
 assert.equal(f.root.bootRuns,1);assert.equal(f.calls(),0);
 });
--- a/frontend/app-seams.test.js
+++ b/frontend/app-seams.test.js
@@ -0,0 +1,84 @@
 const {test}=require('node:test');
 const assert=require('node:assert/strict');
 const {readFileSync}=require('node:fs');
 const {createHash}=require('node:crypto');
 const {join}=require('node:path');
 const app=readFileSync(join(__dirname,'app.js'),'utf8');
 test('Phase 4 preserves the exact playback, continuity, tracking and queue bodies',()=>{
 {const start=app.indexOf("const Player = {");assert.ok(start>=0,"Player");const body=app.slice(start,start+30343);assert.equal(createHash('sha256').update(body).digest('hex'),"373df46f4f994717472d26a6bac07449f6ca0a930cb666bfe3895d1dc65aa351","Player body unchanged");}
 {const start=app.indexOf("const Transition = (() => {");assert.ok(start>=0,"Transition");const body=app.slice(start,start+8588);assert.equal(createHash('sha256').update(body).digest('hex'),"71997a537078308a41f0cbf8e29fd1658fb3a199c4f5a25d8af0931f1c2a6d50","Transition body unchanged");}
 {const start=app.indexOf("const Wave = (() => {");assert.ok(start>=0,"Wave");const body=app.slice(start,start+5241);assert.equal(createHash('sha256').update(body).digest('hex'),"7252f4e856c59aef8aabfcd394ce4bcba656110cbd01a1a8af662eeb48166a3c","Wave body unchanged");}
 {const start=app.indexOf("const StatsTrack = (() => {");assert.ok(start>=0,"StatsTrack");const body=app.slice(start,start+1462);assert.equal(createHash('sha256').update(body).digest('hex'),"9aae2631ba3bfad918319579b7120814af06c84949394d04e52c65345332d514","StatsTrack body unchanged");}
 {const start=app.indexOf("function wirePlayerEvents() {");assert.ok(start>=0,"wirePlayerEvents");const body=app.slice(start,start+4913);assert.equal(createHash('sha256').update(body).digest('hex'),"1c5a2b5ce310f6aef6764325eda85a95f47e4f507f2049036ce1da206379908c","wirePlayerEvents body unchanged");}
 {const start=app.indexOf("function persist() {");assert.ok(start>=0,"persist");const body=app.slice(start,start+147);assert.equal(createHash('sha256').update(body).digest('hex'),"01e5c5dbc80616266db09b3829dc45b66476a3256b1c169d8e44f4983b24ac45","persist body unchanged");}
 {const start=app.indexOf("function playFromList(list, index, source = '', { playFull = false } = {}) {");assert.ok(start>=0,"playFromList");const body=app.slice(start,start+401);assert.equal(createHash('sha256').update(body).digest('hex'),"f8009c9674b3478959997dca881fb7b9e1ab3708c98e5abdf1958d752e47ee41","playFromList body unchanged");}
 {const start=app.indexOf("function advanceQueue() {");assert.ok(start>=0,"advanceQueue");const body=app.slice(start,start+596);assert.equal(createHash('sha256').update(body).digest('hex'),"be405b9c163e3d41a949ef11f6022ef13115b04083e3b6ad21d97beba1f45ae6","advanceQueue body unchanged");}
 {const start=app.indexOf("function playNext() {");assert.ok(start>=0,"playNext");const body=app.slice(start,start+143);assert.equal(createHash('sha256').update(body).digest('hex'),"859d2ffd2e8c89a8d9c0dd0cf429fd403675452cedba2e34aa3dc72683d4f8c6","playNext body unchanged");}
 {const start=app.indexOf("function playPrev() {");assert.ok(start>=0,"playPrev");const body=app.slice(start,start+268);assert.equal(createHash('sha256').update(body).digest('hex'),"ece8d33bd03c8146a6a702534c8fed50ff606170685b08d730b19d9d3c68cf48","playPrev body unchanged");}
 {const start=app.indexOf("function onTrackEnded() {");assert.ok(start>=0,"onTrackEnded");const body=app.slice(start,start+702);assert.equal(createHash('sha256').update(body).digest('hex'),"d6e147238ad9656fa1c2335973b37597749bcfd02df1a66390b306fe1194ae0d","onTrackEnded body unchanged");}
 {const start=app.indexOf("function sleepFadeSec() {");assert.ok(start>=0,"sleepFadeSec");const body=app.slice(start,start+138);assert.equal(createHash('sha256').update(body).digest('hex'),"3f986c8cc474d8313476e9c209b9264e3724011ffaee887f47178bb5155a4d77","sleepFadeSec body unchanged");}
 {const start=app.indexOf("function applySleepFade(remaining) {");assert.ok(start>=0,"applySleepFade");const body=app.slice(start,start+346);assert.equal(createHash('sha256').update(body).digest('hex'),"9bd0fa697b271c6b80c128ff1d0a7b00afcb3ccf08f98b5c7e7dc86fd4329681","applySleepFade body unchanged");}
 {const start=app.indexOf("function startSleepTimer(minutes, { endOfSong = false } = {}) {");assert.ok(start>=0,"startSleepTimer");const body=app.slice(start,start+487);assert.equal(createHash('sha256').update(body).digest('hex'),"f0a93401ab90196096074cb607b28d52c5903e11dbdfb8ddb95114e143af2409","startSleepTimer body unchanged");}
 {const start=app.indexOf("function cancelSleepTimer() {");assert.ok(start>=0,"cancelSleepTimer");const body=app.slice(start,start+253);assert.equal(createHash('sha256').update(body).digest('hex'),"cf396ab758a70eede6af7444539a82ca15af801a9a57024dd5542067e9fa771a","cancelSleepTimer body unchanged");}
 {const start=app.indexOf("function finishSleep() {");assert.ok(start>=0,"finishSleep");const body=app.slice(start,start+662);assert.equal(createHash('sha256').update(body).digest('hex'),"7ee93bf760bad5f39f4644339963918c5b369b2acc554b8e561c1a1f070ac6fb","finishSleep body unchanged");}
 {const start=app.indexOf("const EQ = (() => {");assert.ok(start>=0,"EQ");const body=app.slice(start,start+7917);assert.equal(createHash('sha256').update(body).digest('hex'),"f0cba011c94f33e6fd0ab778021f4c97238262dfa0a8dd40bf3f17149c227528","EQ body unchanged");}
 {const start=app.indexOf("const EqRender = (() => {");assert.ok(start>=0,"EqRender");const body=app.slice(start,start+5912);assert.equal(createHash('sha256').update(body).digest('hex'),"f014dd41dafebc33f09e87be866074afd7a2443c5bb452103a435585353a828f","EqRender body unchanged");}
 {const start=app.indexOf("const Level = (() => {");assert.ok(start>=0,"Level");const body=app.slice(start,start+3892);assert.equal(createHash('sha256').update(body).digest('hex'),"e48ad7797384ac31bb8b864662fc2a546b04470b981042f016874ba750957226","Level body unchanged");}
 });
 test('eager shell and Settings definitions load before app state and defer reading it',()=>{
 const html=readFileSync(join(__dirname,'index.html'),'utf8');
 for(const file of ['shell-core.js','views-core.js','section-rail.js']) {
  assert.ok(html.indexOf('src="'+file+'"')<=html.indexOf('src="section-rail.js"'));
  const vm=require('node:vm');const doc={readyState:'complete',addEventListener(){},createElement:()=>({}),head:{append(){}}};const globals={document:doc,Lazy:{manifest:{appCache:false},url:()=>'/app.js'},console};globals.window=globals;const context=vm.createContext(globals);
  // Evaluation before any data/$/els/Player declaration must be safe.
  vm.runInContext(readFileSync(join(__dirname,file),'utf8'),context);
 }
 const views=readFileSync(join(__dirname,'views-core.js'),'utf8');
 assert.ok(views.includes('async function renderSettings()'));
 });
 test('remote facade preserves synchronous no-session and loaded changed hooks',()=>{
 const source=app.match(/\/\* Remote facade \*\/([\s\S]*?)\/\* End remote facade \*\//)?.[1];
 assert.ok(source,'remote facade is present');
 const context=require('node:vm').createContext({window:{},Lazy:{proxy:()=>({}),onLoad(){}}});
 require('node:vm').runInContext(source+';globalThis.api=Remote;',context);
 assert.equal(context.api.changed(),undefined);
 let calls=0;context.window.YT={Remote:{changed:()=>{calls++;return 'sync';}}};
 assert.equal(context.api.changed(),'sync');assert.equal(calls,1);
 });
 test('watch-party facade keeps playback decisions synchronous before and after loading',()=>{
 const source=app.match(/\/\* Party facade \*\/([\s\S]*?)\/\* End party facade \*\//)?.[1];assert.ok(source);
 const context=require('node:vm').createContext({window:{},Lazy:{proxy:()=>({}),onLoad(){}}});
 require('node:vm').runInContext(source+';globalThis.api=Party;',context);
 for(const method of ['guestActive','intercept','nextDJ'])assert.equal(context.api[method]('next'),false);
 context.window.YT={Party:{guestActive:()=>true,intercept:action=>action==='next',nextDJ:()=>true}};
 for(const method of ['guestActive','intercept','nextDJ'])assert.equal(context.api[method]('next'),true);
 });
 test('Share and External stay behind lazy entry proxies',()=>{
 assert.match(app,/const Share = Lazy\.proxy\('feature:share-external'/);
 assert.match(app,/const External = Lazy\.proxy\('feature:share-external'/);
 const chunk=readFileSync(join(__dirname,'share-external.js'),'utf8');
 const context=require('node:vm').createContext({window:{},navigator:{userAgent:''},location:{origin:'https://fixture.test'},isUploadId:()=>false});
 require('node:vm').runInContext(chunk,context);
 assert.equal(typeof context.window.YT.Share.open,'function');
 const text=context.window.YT.External.m3u([{id:'benchmedia01',title:'Fixture'}]);
 assert.match(text,/#EXTM3U/);assert.match(text,/benchmedia01/);
 });
 test('listening tracking does not pull in the lazy Stats view',()=>{
 const {groups}=JSON.parse(readFileSync(join(__dirname,'assets.json'),'utf8'));
 assert.deepEqual(groups['feature:stats-view'].files,['/stats-view.js']);
 assert.deepEqual(groups['feature:stats-view'].dependencies,['feature:stats']);
 assert.deepEqual(groups['feature:stats'].files,['/stats-core.js']);
 assert.match(app,/Lazy\.proxy\('feature:stats-view', \['render'\], 'StatsView'\)/);
 });
 test('an unavailable Stats chunk reports an error without rejecting the UI navigation',async()=>{
 const source=app.match(/function renderStats\(\) \{[\s\S]*?\n\}/)?.[0];assert.ok(source);
 const seen=[],context=require('node:vm').createContext({Lazy:{proxy:()=>({render:()=>Promise.reject(new Error('Unavailable fixture chunk'))})},toast:text=>seen.push(text)});
 require('node:vm').runInContext(source+';globalThis.render=renderStats;',context);
 await context.render();assert.deepEqual(seen,['Unavailable fixture chunk']);
 });
--- a/frontend/app.js
+++ b/frontend/app.js
--- a/frontend/asset-sync-core.js
+++ b/frontend/asset-sync-core.js
@@ -0,0 +1,204 @@
 /* Exact, resumable asset synchronization shared by pages and workers. */
 (function (root) {
  'use strict';
  const CACHE = 'ytplayer-assets';
  const STATE = '/__ytp_asset_state';
  const url = (path, file) => path + '?v=' + file.h;
  function paths(manifest) {
    return Object.keys(manifest.files).sort();
  }
  function blocking(manifest, previous, activeLayout) {
    const names = new Set(Object.entries(manifest.groups)
      .filter(([name, group]) => name === 'core' || !group.background ||
        name === 'layout:' + activeLayout ||
        (previous?.groups[name] && previous.groups[name].contract !== group.contract))
      .map(([name]) => name));
    for (const name of names) for (const dependency of manifest.groups[name].dependencies || []) names.add(dependency);
    return [...new Set([...names].flatMap(name => manifest.groups[name].files))].sort();
  }
  function plan(manifest, keys) {
    const held = new Set(keys);
    return {
      missing: paths(manifest).map(path => url(path, manifest.files[path])).filter(key => !held.has(key)),
      blocking: blocking(manifest).map(path => url(path, manifest.files[path])),
    };
  }
  function retained(current, previous) {
    const currentPaths = new Set(paths(current));
    const keep = new Set([...currentPaths].map(path => url(path, current.files[path])));
    if (previous) for (const path of paths(previous)) {
      if (!currentPaths.has(path) || current.files[path]?.h !== previous.files[path].h) keep.add(url(path, previous.files[path]));
    }
    return keep;
  }
  function fallback(manifest, previous, path) {
    if (!manifest.files[path] || !previous?.files[path]) return null;
    const group = Object.keys(manifest.groups).find(name => manifest.groups[name].files.includes(path));
    if (!group || !previous.groups[group]?.files.includes(path) ||
        manifest.groups[group].contract !== previous.groups[group].contract) return null;
    // A stale core must understand every group contract in the new shell.
    if (path === "/app.js" && Object.entries(manifest.groups).some(([name, entry]) =>
        previous.groups[name]?.contract !== entry.contract)) return null;
    return url(path, previous.files[path]);
  }
  async function state(cache) {
    const response = await cache.match(STATE);
    return response ? response.json() : null;
  }
  function verifiedProbe(response, hash) {
    if (!response) return false;
    const valid = response.headers.get('X-Asset-Hash') === hash;
    // Metadata checks must release Blob/data-pipe readers. They never consume
    // asset bytes, and cancelling this response does not remove its cache entry.
    response.body?.cancel().catch(() => {});
    return valid;
  }
  async function status(manifest, cache, { previous, activeLayout, offline = true } = {}) {
    const found = await Promise.all(blocking(manifest, previous, activeLayout).map(async path => {
      const response = await cache.match(url(path, manifest.files[path]));
      return verifiedProbe(response, manifest.files[path].h);
    }));
    const missing = found.filter(value => !value).length;
    return { ready: missing === 0, missing, version: manifest.buildTag, ...(offline ? await completeness(manifest, cache) : {}) };
  }
  // All concurrent messages/layout jobs in this worker share six download slots.
  let downloads = 0;
  const waiters = [];
  async function downloadSlot(task) {
    if (downloads >= 6) await new Promise(resolve => waiters.push(resolve));
    else downloads++;
    try { return await task(); }
    finally { const next = waiters.shift(); if (next) next(); else downloads--; }
  }
  const pendingDownloads = new Map();
  async function sharedDownload(key, task) {
    while (pendingDownloads.has(key)) await pendingDownloads.get(key).catch(() => {});
    const promise = downloadSlot(task);
    pendingDownloads.set(key, promise);
    try { return await promise; }
    finally { pendingDownloads.delete(key); }
  }
  async function syncAssets(manifest, { cache, fetchFn, concurrency = 6, attempts = 3, activeLayout, groups, all = false }) {
    const previous = (await state(cache))?.current;
    const missing = [];
    const selected = all ? paths(manifest) : groups ? [...new Set(groups.flatMap(name => manifest.groups[name]?.files || []))].sort()
      : blocking(manifest, previous, activeLayout);
    for (const path of selected) {
      const key = url(path, manifest.files[path]);
      const response = await cache.match(key);
      if (!verifiedProbe(response, manifest.files[path].h)) missing.push(key);
    }
    const count = missing.length;
    let failure;
    await Promise.all(Array.from({ length: Math.max(1, Math.min(6, concurrency, count)) }, async () => {
      while (missing.length) {
        const key = missing.shift();
        try { await sharedDownload(key, async () => {
        const held = await cache.match(key);
        if (verifiedProbe(held, key.split('v=')[1])) return;
        let error;
        for (let attempt = 0; attempt < Math.min(3, attempts); attempt++) {
          const controller = new AbortController();
          const timer = setTimeout(() => controller.abort(), 30000);
          try {
            const response = await fetchFn(key, { credentials: 'same-origin', signal: controller.signal });
            if (!response.ok || response.headers.get('X-Asset-Hash') !== key.split('v=')[1]) {
              throw new Error('Asset hash mismatch: ' + key);
            }
            // Keep the timeout through body consumption, not just response headers.
            await cache.put(key, response);
            error = null;
            break;
          } catch (err) { error = err; }
          finally { clearTimeout(timer); }
        }
        if (error) throw error;
        }); } catch (error) { failure = error; }
      }
    }));
    if (failure) throw failure;
    if (!groups && !all && !(await status(manifest, cache, { previous, activeLayout, offline: false })).ready) throw new Error('Incomplete blocking assets');
    return { refreshed: count, caches: 1 };
  }
  // Verified cache entries are the durable progress journal. Counters are rebuilt
  // after worker termination or browser eviction; never trust a stored ready bit.
  async function completeness(manifest, cache) {
    const files = paths(manifest);
    const missingFiles = (await Promise.all(files.map(async path => {
      const response = await cache.match(url(path, manifest.files[path]));
      return verifiedProbe(response, manifest.files[path].h) ? null : path;
    }))).filter(Boolean);
    const total = files.length;
    return { offlineReady: missingFiles.length === 0, cached: total - missingFiles.length, total, missingFiles };
  }
  const completionKey = manifest => '/__ytp_completion/' + manifest.buildTag;
  async function complete(manifest, { cache, fetchFn, cycles = 4, now = Date.now,
    sleep = ms => new Promise(resolve => setTimeout(resolve, ms)), baseDelay = 1000,
    maxDelay = 30000, notify = () => {}, force = false } = {}) {
    const key = completionKey(manifest), saved = await cache.match(key);
    let job = saved ? await saved.json() : { failures: 0, nextRetryAt: 0 };
    let snapshot = await completeness(manifest, cache);
    const publish = async running => {
      job = { ...job, ...snapshot, running, version: manifest.buildTag };
      await cache.put(key, Response.json(job));
      await notify(job);
    };
    if (snapshot.offlineReady) { job.failures = 0; job.nextRetryAt = 0; await publish(false); return job; }
    if (!force && job.nextRetryAt > now()) await sleep(Math.min(maxDelay, job.nextRetryAt - now()));
    for (let cycle = 0; cycle < cycles; cycle++) {
      await publish(true);
      let error;
      try { await syncAssets(manifest, { cache, fetchFn, all: true }); }
      catch (failure) { error = failure; }
      snapshot = await completeness(manifest, cache);
      if (snapshot.offlineReady) { job.failures = 0; job.nextRetryAt = 0; job.error = null; await publish(false); return job; }
      job.failures++;
      const delay = Math.min(maxDelay, baseDelay * 2 ** Math.min(job.failures - 1, 10));
      job.nextRetryAt = now() + delay;
      job.error = String(error?.message || 'Incomplete offline cache');
      await publish(cycle + 1 < cycles);
      if (cycle + 1 < cycles) await sleep(delay);
    }
    return job;
  }
  async function commit(manifest, cache, { previousClients, activeLayout } = {}) {
    const old = await state(cache);
    if (!(await status(manifest, cache, { previous: old?.current, activeLayout, offline: false })).ready) {
      throw new Error('Incomplete blocking assets');
    }
    const sameBuild = old?.current?.buildTag === manifest.buildTag;
    const previous = sameBuild ? old.previous : old?.current;
    const next = {
      current: manifest, previous,
      previousClients: previousClients || (sameBuild ? old.previousClients : []),
    };
    // One state write publishes the complete build and its old-tab affinity.
    await cache.put(STATE, new Response(JSON.stringify(next), { headers: { 'Content-Type': 'application/json' } }));
    const keep = retained(manifest, previous);
    for (const request of await cache.keys()) {
      const parsed = new URL(request.url);
      const key = parsed.pathname + parsed.search;
      if (parsed.searchParams.has('v') && !keep.has(key)) await cache.delete(key);
    }
    return next;
  }
  const api = { CACHE, STATE, url, paths, blocking, plan, retained, fallback, status, completeness, completionKey, complete, syncAssets, state, commit };
  if (typeof module !== 'undefined' && module.exports) module.exports = api;
  else root.AssetSyncCore = api;
 })(typeof globalThis !== 'undefined' ? globalThis : this);
--- a/frontend/asset-sync-core.test.js
+++ b/frontend/asset-sync-core.test.js
@@ -0,0 +1,104 @@
 const {test}=require('node:test');
 const assert=require('node:assert/strict');
 const core=require('./asset-sync-core');
 const manifest=(a='a',b='b')=>({buildTag:a+b,files:{'/a.js':{h:a},'/index.html':{h:b}},groups:{core:{files:['/a.js','/index.html']}}});
 function cache(){const entries=new Map();return {entries,async match(k){return entries.get(k)?.clone()},async put(k,r){entries.set(k,r.clone())},async keys(){return [...entries.keys()].map(url=>({url:'http://local'+url}))},async delete(k){return entries.delete(k)}}}
 const response=h=>new Response(h,{headers:{'X-Asset-Hash':h}});
 test('exact diff shares unchanged URLs; retains N-1 and prunes N-2',()=>{assert.deepEqual(core.plan(manifest(),['/a.js?v=a']).missing,['/index.html?v=b']);assert.deepEqual([...core.retained(manifest('c'),manifest())].sort(),['/a.js?v=a','/a.js?v=c','/index.html?v=b']);});
 test('interrupted sync resumes verified files and refuses a mismatched hash',async()=>{const c=cache();let fail=true;let calls=[];const fetchFn=async u=>{calls.push(u);if(u.includes('index')&&fail)return response('wrong');return response(u.split('=')[1])};await assert.rejects(core.syncAssets(manifest(),{cache:c,fetchFn}),/hash/);assert.ok(await c.match('/a.js?v=a'));fail=false;calls=[];await core.syncAssets(manifest(),{cache:c,fetchFn});assert.deepEqual(calls,['/index.html?v=b']);await c.delete('/a.js?v=a');assert.equal((await core.status(manifest(),c)).missing,1);});
 test('commit is atomic and pruning keeps only current and previous changed versions',async()=>{const c=cache();await c.put('/a.js?v=z',response('z'));await core.syncAssets(manifest(),{cache:c,fetchFn:async u=>response(u.split('=')[1])});await core.commit(manifest(),c);await core.syncAssets(manifest('c'),{cache:c,fetchFn:async u=>response(u.split('=')[1])});await core.commit(manifest('c'),c);assert.ok(await c.match('/a.js?v=a'));assert.equal(await c.match('/a.js?v=z'),undefined);await core.syncAssets(manifest('d'),{cache:c,fetchFn:async u=>response(u.split('=')[1])});await core.commit(manifest('d'),c);assert.equal(await c.match('/a.js?v=a'),undefined);});
 test('downloads are capped at six and each failure gets three attempts',async()=>{const c=cache(),files={},list=[];for(let i=0;i<13;i++){const p='/'+i+'.js';files[p]={h:String(i)};list.push(p)}const m={buildTag:'pool',files,groups:{core:{files:list}}};let active=0,max=0;const tries={};await core.syncAssets(m,{cache:c,concurrency:20,fetchFn:async u=>{active++;max=Math.max(max,active);await new Promise(r=>setTimeout(r,5));active--;tries[u]=(tries[u]||0)+1;if(tries[u]<3)throw Error('drop');return response(u.split('=')[1])}});assert.equal(max,6);assert.ok(Object.values(tries).every(n=>n===3));});
 test('background files do not block, but active layout and contract changes do',()=>{const m=manifest();m.groups.extra={background:true,contract:2,files:['/extra.js']};m.files['/extra.js']={h:'e'};assert.deepEqual(core.blocking(m),['/a.js','/index.html']);assert.ok(core.blocking(m,{groups:{extra:{contract:1}}}).includes('/extra.js'));m.groups['layout:classic']={background:true,files:['/classic.css']};m.files['/classic.css']={h:'c'};assert.ok(core.blocking(m,null,'classic').includes('/classic.css'));});
 test('removed files survive one previous build for open tabs',()=>{const previous=manifest(),current=manifest('c');delete current.files['/a.js'];current.groups.core.files=['/index.html'];assert.ok(core.retained(current,previous).has('/a.js?v=a'));});
 test('staged fallback permits only the previous same-contract version of a shipped group file', () => {
  const old = manifest(), next = manifest('c');
  old.groups.core.contract = next.groups.core.contract = 1;
  assert.equal(core.fallback(next, old, '/a.js'), '/a.js?v=a');
  next.groups.core.contract = 2;
  assert.equal(core.fallback(next, old, '/a.js'), null);
  assert.equal(core.fallback(next, old, '/missing.js'), null);
 });
 test('background synchronization fills all groups without publishing a new current manifest', async () => {
  const c = cache(), m = manifest();
  m.groups.optional = { contract: 1, background: true, files: ['/extra.js'] };
  m.files['/extra.js'] = { h: 'e' };
  const fetchFn = async key => response(key.split('=')[1]);
  await core.syncAssets(m, { cache: c, fetchFn });
  assert.equal(await c.match('/extra.js?v=e'), undefined);
  await core.commit(m, c);
  const before = await core.state(c);
  const result = await core.syncAssets(m, { cache: c, fetchFn, groups: ['optional'] });
  assert.equal(result.refreshed, 1);
  assert.ok(await c.match('/extra.js?v=e'));
  assert.deepEqual(await core.state(c), before);
 });
 test('active layouts also block on shared dependencies, while other layouts stay background', () => {
 const m=manifest(); m.groups['layout:glass-stage']={contract:1,background:true,files:['/glass.css'],dependencies:['feature:controls']}; m.groups['feature:controls']={contract:1,background:true,files:['/controls.js']}; m.groups['layout:bento-hub']={contract:1,background:true,files:['/bento.css']};
 for(const path of ['/glass.css','/controls.js','/bento.css'])m.files[path]={h:'h'};
 assert.deepEqual(core.blocking(m,null,'glass-stage'),['/a.js','/controls.js','/glass.css','/index.html']);
 });
 test('removing group membership retains the old tab URL even if the physical file is still shipped unchanged',()=>{
 const previous=manifest(),current=manifest();current.groups.core.files=['/index.html'];
 assert.ok(core.retained(current,previous).has('/a.js?v=a'));
 });
 test('completion includes ungrouped runtime files and exposes verified missing paths', async () => {
 const c=cache(), m=manifest();m.files['/worker.js']={h:'w'};
 await core.syncAssets(m,{cache:c,fetchFn:async u=>response(u.split('=')[1])});
 const status=await core.status(m,c);
 assert.equal(status.ready,true);assert.equal(status.offlineReady,false);
 assert.deepEqual(status.missingFiles,['/worker.js']);assert.equal(status.cached,2);assert.equal(status.total,3);
 await core.complete(m,{cache:c,fetchFn:async u=>response(u.split('=')[1])});
 assert.equal((await core.status(m,c)).offlineReady,true);
 });
 test('completion persists backoff and resumes only missing files after a worker restart',async()=>{
 const c=cache(),m=manifest();let clock=1000;const calls=[];
 await core.complete(m,{cache:c,cycles:1,now:()=>clock,baseDelay:10,fetchFn:async u=>{if(u.includes('index'))throw Error('offline');return response('a');}});
 const checkpoint=await(await c.match(core.completionKey(m))).json();
 assert.equal(checkpoint.running,false);assert.equal(checkpoint.failures,1);assert.equal(checkpoint.nextRetryAt,1010);
 await core.complete(m,{cache:c,now:()=>clock,sleep:async ms=>{assert.equal(ms,10);clock+=ms;},fetchFn:async u=>{calls.push(u);return response(u.split('=')[1]);}});
 assert.deepEqual(calls,['/index.html?v=b']);
 const status=await(await c.match(core.completionKey(m))).json();assert.equal(status.offlineReady,true);assert.equal(status.failures,0);
 await c.delete('/a.js?v=a');assert.equal((await core.status(m,c)).offlineReady,false);
 });
 test('completion retries with exponential backoff and keeps making progress past a failed asset',async()=>{
 const c=cache(),m=manifest(),delays=[];let tries=0;
 const job=await core.complete(m,{cache:c,baseDelay:5,sleep:async ms=>delays.push(ms),fetchFn:async u=>{if(u.includes('a.js')&&++tries<=6)throw Error('drop');return response(u.split('=')[1]);}});
 assert.deepEqual(delays,[5,10]);assert.equal(job.offlineReady,true);assert.ok(await c.match('/index.html?v=b'));
 });
 test('overlapping layout and completion jobs share a six-download ceiling',async()=>{
 const c=cache(),m=manifest();m.groups.extra={background:true,files:[]};
 for(let i=0;i<15;i++){const p='/extra'+i+'.js';m.files[p]={h:String(i)};m.groups.extra.files.push(p);}
 let active=0,peak=0;const calls=new Map();
 const fetchFn=async u=>{active++;peak=Math.max(active,peak);calls.set(u,(calls.get(u)||0)+1);await new Promise(r=>setTimeout(r,3));active--;return response(u.split('=')[1]);};
 await Promise.all([core.complete(m,{cache:c,fetchFn}),core.syncAssets(m,{cache:c,fetchFn,groups:['extra']})]);
 assert.ok(peak<=6);assert.ok([...calls.values()].every(count=>count===1));
 });
 test('blocking commit never waits on an optional file readiness probe',{timeout:1000},async()=>{
 const c=cache(),m=manifest();m.files['/extra.js']={h:'extra'};m.groups.extra={files:['/extra.js'],background:true,contract:1};
 await c.put('/a.js?v=a',response('a'));await c.put('/index.html?v=b',response('b'));
 const match=c.match;let extraProbes=0;c.match=async key=>{if(key==='/extra.js?v=extra'){extraProbes++;return new Promise(()=>{});}return match(key);};
 await core.commit(m,c);assert.equal(extraProbes,0);assert.equal((await core.state(c)).current.buildTag,m.buildTag);
 c.match=match;assert.equal((await core.status(m,c)).offlineReady,false);
 });
 test('metadata probes release response streams while stored asset bodies remain readable',async()=>{
 const c=cache(),m=manifest();await c.put('/a.js?v=a',response('a'));await c.put('/index.html?v=b',response('b'));
 const match=c.match,probes=[];c.match=async key=>{const r=await match(key);if(r)probes.push(r);return r;};
 assert.equal((await core.status(m,c)).offlineReady,true);assert.ok(probes.length>0);assert.ok(probes.every(r=>r.bodyUsed));
 assert.equal(await(await match('/a.js?v=a')).text(),'a');assert.equal(await(await match('/index.html?v=b')).text(),'b');
 });
 test('stale app core requires every feature contract to match the new shell',()=>{
 const old={files:{'/app.js':{h:'old'}},groups:{core:{contract:1,files:['/app.js']},extra:{contract:1,files:[]}}};
 const next=structuredClone(old);next.files['/app.js'].h='new';next.groups.extra.contract=2;
 assert.equal(core.fallback(next,old,'/app.js'),null);next.groups.extra.contract=1;assert.equal(core.fallback(next,old,'/app.js'),'/app.js?v=old');
 });
--- a/frontend/asset-worker.test.js
+++ b/frontend/asset-worker.test.js
@@ -0,0 +1,77 @@
 const {test}=require('node:test');const assert=require('node:assert/strict');const vm=require('node:vm');const fs=require('node:fs');const core=require('./asset-sync-core');
 function environment(){
 const stores=new Map(),listeners={},messages=[],skips=[],fetches=[],selfMessages=[];const m={buildTag:'next',files:{'/index.html':{h:'index'},'/app.js':{h:'app'}},groups:{core:{files:['/index.html','/app.js']}}};
 const storage={async keys(){return [...stores.keys()]},async delete(n){return stores.delete(n)},async open(n){if(!stores.has(n)){const map=new Map();stores.set(n,{async match(k){return map.get(typeof k==='string'?k:new URL(k.url).pathname+new URL(k.url).search)?.clone()},async put(k,r){map.set(k,r.clone())},async keys(){return [...map.keys()].map(k=>({url:'https://local'+k}))},async delete(k){return map.delete(typeof k==='string'?k:new URL(k.url).pathname+new URL(k.url).search)}})}return stores.get(n)}};
 const sandbox={__BUILD_TAG__:'next',__ASSET_SYNC__:true,AssetSyncCore:core,importScripts:()=>{},caches:storage,URL,Response,Request,Headers,setTimeout,clearTimeout,crypto:require('node:crypto').webcrypto,console,fetch:async u=>{fetches.push(u);return u==='/api/manifest'?Response.json(m):new Response(u,{headers:{'X-Asset-Hash':m.files[u.split('?')[0]]?.h || ''}})},self:{registration:{active:{postMessage:data=>selfMessages.push(data)}},location:{origin:'https://local'},addEventListener:(t,f)=>listeners[t]=f,skipWaiting:()=>skips.push(1),clients:{claim:async()=>{},matchAll:async()=>[{id:'old',postMessage:x=>messages.push(x)}]}}};
 vm.runInNewContext(fs.readFileSync(__dirname+'/sw.js','utf8'),sandbox);
 async function dispatch(t,e={}){const tasks=[];listeners[t]({...e,waitUntil:v=>tasks.push(v)});await Promise.all(tasks)}
 async function request(url,mode='cors',clientId='new'){let p;const tasks=[];listeners.fetch({request:{url:'https://local'+url,method:'GET',mode},clientId,waitUntil:v=>tasks.push(v),respondWith:v=>p=v});const response=await p;await Promise.all(tasks);return response;}
 return {storage,m,skips,fetches,dispatch,request,sandbox,selfMessages,async complete(){for(const data of selfMessages.splice(0))await dispatch('message',{data});}};
 }
 test('install does not activate or publish; CACHE_STATUS is honest; activation commits and exact requests self-heal',async()=>{const e=environment();await e.dispatch('install');assert.equal(e.skips.length,0);const cache=await e.storage.open(core.CACHE);assert.equal(await core.state(cache),null);let reply;await e.dispatch('message',{data:{type:'CACHE_STATUS'},ports:[{postMessage:r=>reply=r}]});assert.equal(reply.ready,true);await e.dispatch('activate');await e.complete();assert.equal((await core.state(cache)).current.buildTag,'next');assert.equal((await e.request('/playlist/x','navigate')).headers.get('X-Asset-Hash'),'index');await cache.delete('/app.js?v=app');assert.equal((await core.status(e.m,cache)).ready,false);await e.dispatch('message',{data:{type:'CACHE_STATUS'},ports:[{postMessage:r=>reply=r}]});assert.equal((await core.status(e.m,cache)).offlineReady,true);assert.equal(reply.version,'next');assert.equal((await e.request('/app.js')).headers.get('X-Asset-Hash'),'app');assert.ok(await cache.match('/app.js?v=app'));assert.equal(await cache.match('/app.js?v=stale'),undefined);assert.equal((await e.request('/app.js?v=stale')).status,409);});
 test('reported playback defers explicit activation until pause; install never calls skipWaiting',async()=>{const e=environment(),source={id:'p'};await e.dispatch('message',{data:{type:'SKIP_WAITING'}});assert.equal(e.skips.length,0);await e.dispatch('message',{source,data:{type:'PLAYING',value:true}});await e.dispatch('message',{source,data:{type:'SKIP_WAITING'}});assert.equal(e.skips.length,0);await e.dispatch('message',{source,data:{type:'PLAYING',value:false}});assert.equal(e.skips.length,1);});
 test('staged same-contract responses use verified N-1 without poisoning the new URL',async()=>{
 const e=environment(); const cache=await e.storage.open(core.CACHE);
 const old={buildTag:'old',files:{'/extra.js':{h:'old'}},groups:{core:{files:[],contract:1},'feature:extra':{files:['/extra.js'],contract:1,background:true}}};
 e.m.groups.core.contract=1; e.m.groups['feature:extra']={files:['/extra.js'],contract:1,background:true}; e.m.files['/extra.js']={h:'new'};
 await cache.put(core.STATE,Response.json({current:old})); await cache.put('/extra.js?v=old',new Response('old body',{headers:{'X-Asset-Hash':'old','Cache-Control':'public, max-age=31536000, immutable','Content-Encoding':'gzip','Content-Length':'9'}}));
 await e.dispatch('install'); await e.dispatch('activate');await e.complete();
 assert.ok(await cache.match('/extra.js?v=new'));await cache.delete('/extra.js?v=new');
 assert.equal(await cache.match('/extra.js?v=new'),undefined);
 const stale=await e.request('/extra.js?v=new'); assert.equal(await stale.text(),'old body');assert.equal(stale.headers.get('X-Asset-Hash'),'old');assert.equal(stale.headers.get('Cache-Control'),'no-store');assert.equal(stale.headers.get('Content-Encoding'),null);assert.equal(stale.headers.get('Content-Length'),null);assert.equal(await cache.match('/extra.js?v=new'),undefined);
 await e.dispatch('message',{data:{type:'WARM_ASSETS',saveData:true}}); assert.ok(await cache.match('/extra.js?v=new'));
 await e.dispatch('message',{data:{type:'WARM_ASSETS',saveData:false}}); assert.equal((await cache.match('/extra.js?v=new')).headers.get('X-Asset-Hash'),'new');
 assert.equal((await e.request('/extra.js?v=new')).headers.get('X-Asset-Hash'),'new');
 });
 test('a changed background contract is downloaded before ready and cannot fall back after commit',async()=>{
 const e=environment(),cache=await e.storage.open(core.CACHE);
 const old={buildTag:'old',files:{'/extra.js':{h:'old'}},groups:{core:{files:[],contract:1},'feature:extra':{files:['/extra.js'],contract:1,background:true}}};
 e.m.groups.core.contract=1;e.m.groups['feature:extra']={files:['/extra.js'],contract:2,background:true};e.m.files['/extra.js']={h:'new'};
 await cache.put(core.STATE,Response.json({current:old}));await cache.put('/extra.js?v=old',new Response('old body',{headers:{'X-Asset-Hash':'old'}}));
 await e.dispatch('install');assert.equal((await core.state(cache)).current.buildTag,'old');
 assert.equal((await cache.match('/extra.js?v=new')).headers.get('X-Asset-Hash'),'new');
 let reply;await e.dispatch('message',{data:{type:'CACHE_STATUS'},ports:[{postMessage:r=>reply=r}]});assert.equal(reply.ready,true);
 await e.dispatch('activate');await e.complete();await cache.delete('/extra.js?v=new');
 const response=await e.request('/extra.js?v=new');assert.equal(response.headers.get('X-Asset-Hash'),'new');assert.notEqual(await response.text(),'old body');
 });
 test('overlapping idle warm messages share one download pool',async()=>{
 const e=environment();e.m.files['/extra.js']={h:'extra'};e.m.groups['feature:extra']={files:['/extra.js'],contract:1,background:true};
 await e.dispatch('install');await e.dispatch('activate');await e.complete();
 await Promise.all([e.dispatch('message',{data:{type:'WARM_ASSETS',saveData:false}}),e.dispatch('message',{data:{type:'WARM_ASSETS',saveData:false}})]);
 assert.equal(e.fetches.filter(url=>url==='/extra.js?v=extra').length,1);
 });
 test('waiting status does not start completion and activation delegates it to its own event',async()=>{
 const e=environment();e.m.files['/extra.js']={h:'extra'};e.m.groups['feature:extra']={files:['/extra.js'],contract:1,background:true};
 await e.dispatch('install');let reply;await e.dispatch('message',{data:{type:'CACHE_STATUS'},ports:[{postMessage:r=>reply=r}]});
 assert.equal(reply.ready,true);assert.equal(reply.offlineReady,false);assert.ok(!e.fetches.includes('/extra.js?v=extra'));
 let release,started;const gate=new Promise(r=>release=r),begin=new Promise(r=>started=r),fetch=e.sandbox.fetch;
 e.sandbox.fetch=async url=>{if(url==='/extra.js?v=extra'){started();await gate;}return fetch(url);};
 await e.dispatch('activate');const cache=await e.storage.open(core.CACHE);
 assert.equal((await core.state(cache)).current.buildTag,'next');assert.equal((await core.status(e.m,cache)).ready,true);
 assert.equal((await core.status(e.m,cache)).offlineReady,false);assert.equal(e.selfMessages[0].type,'COMPLETE_ASSETS');
 const job=e.complete();await begin;assert.equal(await cache.match('/extra.js?v=extra'),undefined);release();await job;
 assert.equal((await core.status(e.m,cache)).offlineReady,true);
 });
 test('page-captured app is reused on first install without a worker download',async()=>{
 const e=environment(),cache=await e.storage.open(core.CACHE);
 await cache.put('/app.js?v=app',new Response('page captured app',{headers:{'X-Asset-Hash':'app'}}));
 await e.dispatch('install');assert.equal(e.fetches.includes('/app.js?v=app'),false);
 assert.equal(await(await cache.match('/app.js?v=app')).text(),'page captured app');
 assert.equal(e.skips.length,0);assert.equal(await core.state(cache),null);
 });
 test('worker never supplies stale app to a native script when a feature contract changed',async()=>{
 const e=environment(),cache=await e.storage.open(core.CACHE);
 const old={buildTag:'old',files:{'/app.js':{h:'old'}},groups:{core:{contract:1,files:['/app.js']},extra:{contract:1,files:[]}}};
 e.m.groups.core.contract=1;e.m.groups.extra={contract:2,background:true,files:[]};
 await cache.put(core.STATE,Response.json({current:old}));await cache.put('/app.js?v=old',new Response('old app',{headers:{'X-Asset-Hash':'old'}}));
 await e.dispatch('install');await e.dispatch('activate');await cache.delete('/app.js?v=app');
 e.sandbox.fetch=async()=>{throw Error('offline')};
 const response=await e.request('/app.js?v=app');assert.equal(response.status,503);assert.equal(await response.text(),'Offline');
 });
--- a/frontend/assets.json
+++ b/frontend/assets.json
@@ -0,0 +1,377 @@
 {
  "groups": {
    "core": {
      "contract": 2,
      "eager": true,
      "files": [
        "/index.html",
        "/styles.css",
        "/service-ui.css",
        "/refresh.css",
        "/layout-base.css",
        "/recommendations.css",
        "/flag-ui.js",
        "/async-guard.js",
        "/visible-timer.js",
        "/asset-sync-core.js",
        "/sw-update.js",
        "/fingerprint.js",
        "/opfs.js",
        "/opfs-worker.js",
        "/lyrics-core.js",
        "/lyrics-display.js",
        "/sha256.js",
        "/resume-core.js",
        "/loudness-wasm.js",
        "/loudness.js",
        "/sha256-wasm.js",
        "/settings-sections.js",
        "/related-videos.js",
        "/related-videos.css",
        "/audio-continuity.js",
        "/fullscreen-orientation.js",
        "/fullscreen-orientation.css",
        "/download-actions.js",
        "/download-actions.css",
        "/download-errors.js",
        "/downloads.js",
        "/downloads-page.js",
        "/offline-pages.css",
        "/saved-page.js",
        "/server-backfill.js",
        "/saved-page.css",
        "/prewarm-next.js",
        "/settings-sections.css",
        "/app.js",
        "/manifest.webmanifest",
        "/icons/icon-192.png",
        "/icons/icon-512.png",
        "/fonts/fonts.css",
        "/fonts/BricolageGrotesque-latin-ext.woff2",
        "/fonts/BricolageGrotesque-latin.woff2",
        "/fonts/HankenGrotesk-latin-ext.woff2",
        "/fonts/HankenGrotesk-latin.woff2",
        "/fonts/JetBrainsMono-latin-ext.woff2",
        "/fonts/JetBrainsMono-latin.woff2",
        "/lazy.js",
        "/feature-bootstrap.js",
        "/eq-parameters.js",
        "/assets.json",
        "/device-db.js",
        "/shell-core.js",
        "/views-core.js",
        "/section-rail.js"
      ],
      "background": false
    },
    "layout:glass-stage": {
      "contract": 1,
      "eager": false,
      "files": [
        "/theme-glass.css",
        "/theme-glass-panel.css",
        "/glass-panel-layout.js"
      ],
      "background": true,
      "dependencies": [
        "feature:layout-controls"
      ]
    },
    "layout:classic": {
      "contract": 1,
      "eager": false,
      "files": [
        "/theme-classic.css"
      ],
      "background": true
    },
    "layout:bento-hub": {
      "contract": 1,
      "eager": false,
      "files": [
        "/theme-bento-hub.css",
        "/bento-hub.js",
        "/fonts/PlusJakartaSans-latin.woff2",
        "/fonts/PlusJakartaSans-latin-ext.woff2"
      ],
      "background": true,
      "dependencies": [
        "feature:layout-controls"
      ]
    },
    "layout:f7-swipe": {
      "contract": 1,
      "eager": false,
      "files": [
        "/theme-f7.css",
        "/vendor/framework7-swipe.min.js",
        "/f7-layout.js"
      ],
      "background": true
    },
    "feature:piano": {
      "contract": 1,
      "eager": false,
      "files": [
        "/piano-core.js",
        "/piano.js",
        "/piano-engine.mjs"
      ],
      "background": true
    },
    "feature:midi": {
      "contract": 1,
      "eager": false,
      "files": [
        "/midi.js"
      ],
      "background": true
    },
    "feature:party-dj": {
      "contract": 1,
      "eager": false,
      "files": [
        "/party-dj.js"
      ],
      "background": true
    },
    "feature:lyrics-window": {
      "contract": 1,
      "eager": false,
      "files": [
        "/lyrics-window.js"
      ],
      "background": true
    },
    "feature:lower-third": {
      "contract": 1,
      "eager": false,
      "files": [
        "/lower-third.js",
        "/lower-third.css"
      ],
      "background": true
    },
    "feature:vocal-reducer": {
      "contract": 1,
      "eager": false,
      "files": [
        "/vocal-reducer.js"
      ],
      "background": true
    },
    "feature:eq-core": {
      "contract": 1,
      "eager": false,
      "files": [
        "/eq-core.js"
      ],
      "background": true
    },
    "feature:setlist-import": {
      "contract": 1,
      "eager": false,
      "files": [
        "/setlist-import.js"
      ],
      "background": true
    },
    "feature:car-mode": {
      "contract": 1,
      "eager": false,
      "files": [
        "/car-mode.js",
        "/car-mode.css"
      ],
      "background": true
    },
    "feature:p2p": {
      "contract": 1,
      "eager": false,
      "files": [
        "/p2p-core.js",
        "/p2p-client.js",
        "/p2p-transfer.js",
        "/p2p-recv-worker.js",
        "/hash-worker.js"
      ],
      "background": true
    },
    "feature:direct": {
      "contract": 1,
      "eager": false,
      "files": [
        "/direct-protocol.js",
        "/direct-stream.js",
        "/direct-media.js",
        "/direct-media.css",
        "/direct-recv-worker.js"
      ],
      "background": true,
      "dependencies": [
        "feature:p2p"
      ]
    },
    "feature:video-edit": {
      "contract": 1,
      "eager": false,
      "files": [
        "/video-edit.js"
      ],
      "background": true
    },
    "feature:stats": {
      "contract": 1,
      "eager": false,
      "files": [
        "/stats-core.js"
      ],
      "background": true
    },
    "feature:export": {
      "contract": 1,
      "eager": false,
      "files": [
        "/export.js"
      ],
      "background": true
    },
    "feature:playlist": {
      "contract": 1,
      "eager": true,
      "files": [],
      "embeddedIn": [
        "/app.js"
      ],
      "background": false
    },
    "feature:settings": {
      "contract": 1,
      "eager": true,
      "files": [],
      "embeddedIn": [
        "/app.js",
        "/settings-sections.js",
        "/settings-sections.css",
        "/views-core.js"
      ],
      "background": false
    },
    "feature:service-mode": {
      "contract": 1,
      "eager": true,
      "files": [],
      "embeddedIn": [
        "/app.js",
        "/service-ui.css"
      ],
      "background": false
    },
    "feature:lyrics-editor": {
      "contract": 1,
      "eager": true,
      "files": [],
      "embeddedIn": [
        "/app.js",
        "/lyrics-core.js",
        "/lyrics-display.js"
      ],
      "background": false
    },
    "feature:layout-controls": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": [
        "/theme-glass-controls.css",
        "/glass-controls.js"
      ]
    },
    "layout:sanctuary-stage": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": []
    },
    "layout:liturgical": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": []
    },
    "layout:living-hymnal": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": []
    },
    "layout:broadcaster": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": []
    },
    "layout:contemplative": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": []
    },
    "feature:presenter": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": [
        "/presenter.js"
      ]
    },
    "feature:remote-client": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": [
        "/remote-client.js"
      ]
    },
    "feature:watch-party": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": [
        "/watch-party-client.js"
      ]
    },
    "feature:share-external": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": [
        "/share-external.js"
      ]
    },
    "feature:stats-view": {
      "contract": 1,
      "eager": false,
      "background": true,
      "files": [
        "/stats-view.js"
      ],
      "dependencies": [
        "feature:stats"
      ]
    },
    "feature:jamesdsp": {
      "contract": 1,
      "eager": false,
      "files": [
        "/vendor/jamesdsp/controller.js",
        "/vendor/jamesdsp/jamesdsp-node.js",
        "/vendor/jamesdsp/worklet.js",
        "/vendor/jamesdsp/params.js",
        "/vendor/jamesdsp/dsp/jamesdsp.js",
        "/vendor/jamesdsp/dsp/jamesdsp.wasm"
      ],
      "background": false
    }
  }
 }
--- a/frontend/autosave.test.js
+++ b/frontend/autosave.test.js
@@ -0,0 +1,65 @@
 const test = require('node:test');
 const assert = require('node:assert/strict');
 const fs = require('node:fs');
 const vm = require('node:vm');
 // Exercise the actual app functions without DOM/player/network dependencies.
 const source = fs.readFileSync(require('node:path').join(__dirname, 'app.js'), 'utf8');
 function harness({ autoPreload = true, cached = [], result = { ok: true, cached: true }, error } = {}) {
  const calls = [], jobs = new Map();
  const video = { id: 'benchmedia01', title: 'Local clip' };
  const context = vm.createContext({
    data: { settings: { autoPreload }, playlists: [{ id: 'pl', videos: [video] }], pinnedPlaylists: [] },
    cachedIds: new Set(cached), downloading: new Set(), downloadMeta: new Map(), saveControllers: new Map(),
    view: { type: 'home' }, current: null, window: {}, AbortController,
    slim: v => v, markCardCacheState() {}, renderSidebar() {}, updateDownloadBadge() {}, toast() {},
    SaveSlots: { acquire: async () => {}, release() {} },
    SaveQueue: { add: v => jobs.set(v.id, { status: 'queued' }), remove: id => jobs.delete(id), progress() {}, state: (id, status, message) => jobs.set(id, { status, message }) },
    API: { cacheDownload: async id => { calls.push(id); if (error) throw error; return result; } },
    recordDeviceFile() {}, warmThumb() {}, thumbUrlFor: () => '', cacheMutations: 0,
  });
  const preload = source.slice(source.indexOf('async function preload(video,'), source.indexOf('// A device copy that failed to play.'));
  const playlists = source.slice(source.indexOf('function preloadPlaylist(pl)'), source.indexOf('// Update a single card\'s saved badge'));
  vm.runInContext(preload + playlists, context);
  return { context, calls, jobs, video };
 }
 test('auto preload tops up playlists, while pinned playlists save with the setting off', async () => {
  const h = harness({ autoPreload: false });
  h.context.preloadPlaylist(h.context.data.playlists[0]);
  await new Promise(r => setImmediate(r));
  assert.deepEqual(h.calls, []);
  h.context.data.pinnedPlaylists = ['pl'];
  h.context.preloadPinnedPlaylists();
  await new Promise(r => setImmediate(r));
  assert.deepEqual(h.calls, [h.video.id]);
  assert.ok(h.context.cachedIds.has(h.video.id));
  assert.equal(h.jobs.size, 0);
  assert.equal(h.context.downloading.size, 0);
  const enabled = harness();
  enabled.context.preloadPlaylist(enabled.context.data.playlists[0]);
  await new Promise(r => setImmediate(r));
  assert.deepEqual(enabled.calls, [enabled.video.id]);
 });
 test('a repeated save shares the in-flight operation and does not download an existing copy', async () => {
  const h = harness();
  await Promise.all([h.context.preload(h.video), h.context.preload(h.video)]);
  await h.context.preload(h.video);
  assert.deepEqual(h.calls, [h.video.id]);
  assert.ok(h.context.cachedIds.has(h.video.id));
  assert.equal(h.context.saveControllers.size, 0);
 });
 test('failed and interrupted saves do not acquire a Saved badge and can be attempted again', async () => {
  for (const options of [{ result: { ok: false, error: 'server failed' } }, { error: new Error('storage quota') }, { result: { ok: false, paused: true } }]) {
    const h = harness(options);
    await h.context.preload(h.video, { quiet: true });
    assert.equal(h.context.cachedIds.has(h.video.id), false);
    assert.equal(h.context.downloading.size, 0);
    assert.equal(h.context.saveControllers.size, 0);
    assert.ok(h.jobs.has(h.video.id));
    await h.context.preload(h.video, { quiet: true });
    assert.equal(h.calls.length, 2);
  }
 });
--- a/frontend/car-mode.css
+++ b/frontend/car-mode.css
@@ -4,4 +4,3 @@
 .car-controls button { min-height: 110px; font: 650 clamp(22px, 3vw, 36px)/1.2 system-ui; background: #fff; color: #050607; border: 3px solid #fff; border-radius: 16px; }
 .car-exit { align-self: flex-start; min-height: 52px; padding: 12px 20px; background: #070809; color: #fff; border: 2px solid #fff; border-radius: 8px; }
 .car-mode button:focus-visible { outline: 4px solid #61caff; outline-offset: 4px; }
 .voice-search { flex-shrink: 0; min-width: 44px; min-height: 44px; }
--- a/frontend/car-mode.js
+++ b/frontend/car-mode.js
@@ -10,19 +10,19 @@
    overlay = doc.createElement('section'); overlay.className = 'car-mode'; overlay.setAttribute('role', 'dialog'); overlay.setAttribute('aria-modal', 'true'); overlay.setAttribute('aria-label', 'Car mode');
    const exit = doc.createElement('button'); exit.type = 'button'; exit.className = 'car-exit'; exit.textContent = 'Exit Car mode'; exit.onclick = close;
    const title = doc.createElement('h1'); const controls = doc.createElement('div'); controls.className = 'car-controls'; let toggle;
-    for (const [label, action] of [['Previous', 'prev'], ['Play / Pause', 'toggle'], ['15 s back', 'back'], ['Next', 'next']]) { const b = doc.createElement('button'); b.type = 'button'; b.textContent = label; b.setAttribute('aria-label', label); b.onclick = () => adapter.action(action); if (action === 'toggle') toggle = b; controls.append(b); }
+    for (const [label, action] of [['Previous', 'prev'], ['Play / Pause', 'toggle'], ['15 s back', 'back'], ['Next', 'next']]) { const b = doc.createElement('button'); b.type = 'button'; b.innerHTML = root.TransportIcons.svg({prev:'previous',toggle:'play',back:'back15',next:'next'}[action]) + '<span>' + label + '</span>'; b.setAttribute('aria-label', label); b.onclick = () => adapter.action(action); if (action === 'toggle') toggle = b; controls.append(b); }
-    const update = () => { const state = adapter.state(); title.textContent = state.title || 'Choose a song before entering Car mode'; toggle.textContent = state.paused ? 'Play' : 'Pause'; }; update();
+    const update = () => { const state = adapter.state(); title.textContent = state.title || 'Choose a song before entering Car mode'; root.TransportIcons.set(toggle, state.paused ? 'play' : 'pause'); toggle.insertAdjacentHTML('beforeend','<span>' + (state.paused ? 'Play' : 'Pause') + '</span>'); }; update();
    overlay.append(exit, title, controls); doc.body.append(overlay); timer = setInterval(update, 500); exit.focus();
    overlay.onkeydown = e => { if (e.key === 'Escape') { e.preventDefault(); close(); } else if (e.key === 'Tab') { const buttons = [...overlay.querySelectorAll('button')], first = buttons[0], last = buttons.at(-1); if (e.shiftKey && doc.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && doc.activeElement === last) { e.preventDefault(); first.focus(); } } e.stopPropagation(); };
  }
  function configure(options) {
    adapter = options; const doc = root.document, Recognition = root.SpeechRecognition || root.webkitSpeechRecognition;
    if (Recognition) {
-      const b = doc.createElement('button'); b.type = 'button'; b.className = 'icon-btn voice-search'; b.title = 'Voice search'; b.setAttribute('aria-label', 'Voice search'); b.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3m-4 0h8"/></svg>'; adapter.input.after(b);
+      const b = doc.getElementById('voiceSearchBtn') || doc.createElement('button'); b.id='voiceSearchBtn'; b.type = 'button'; b.className = 'icon-btn voice-search'; b.title = 'Voice search'; b.setAttribute('aria-label', 'Voice search'); b.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3m-4 0h8"/></svg>'; if(!b.isConnected)adapter.input.after(b);
      let recognition, listening = false;
      b.onclick = () => { if (listening) { recognition.abort(); return; } recognition = new Recognition(); recognition.lang = doc.documentElement.lang || root.navigator.language || 'en-US'; recognition.continuous = false; recognition.interimResults = false; recognition.onstart = () => { listening = true; b.setAttribute('aria-pressed', 'true'); b.title = 'Listening… tap to cancel'; }; recognition.onend = () => { listening = false; b.setAttribute('aria-pressed', 'false'); b.title = 'Voice search'; }; recognition.onerror = e => adapter.toast(`Voice search: ${e.error === 'not-allowed' ? 'microphone permission was denied' : e.error}`); recognition.onresult = e => { const query = transcript(e); if (query) { adapter.input.value = query; adapter.search(); } }; try { recognition.start(); } catch (error) { adapter.toast(error.message); } };
    }
-    const car = doc.createElement('button'); car.type = 'button'; car.className = 'icon-btn'; car.title = 'Car mode'; car.setAttribute('aria-label', 'Car mode'); car.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m5 8 2-5h10l2 5M3 8h18v10H3zM5 18v3m14-3v3M6 12h2m8 0h2"/></svg>'; doc.getElementById('searchForm').after(car); car.onclick = open;
+    const car = doc.getElementById('carModeBtn') || doc.createElement('button'); car.id='carModeBtn'; car.type = 'button'; car.className = 'icon-btn'; car.title = 'Car mode'; car.setAttribute('aria-label', 'Car mode'); car.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m5 8 2-5h10l2 5M3 8h18v10H3zM5 18v3m14-3v3M6 12h2m8 0h2"/></svg>'; if(!car.isConnected)doc.getElementById('searchForm').after(car); car.onclick = open;
    root.SettingsSections.register({ id: 'voice-car', title: 'Voice & Car mode', cluster: 'Listening', summary: () => Recognition ? 'Voice search available · Car mode' : 'Car mode · voice unavailable', render(container) { const p = doc.createElement('p'); p.textContent = Recognition ? 'Use the microphone beside Search to speak a query. Recognition availability and processing depend on your browser.' : 'Voice search is unavailable in this browser.'; const b = doc.createElement('button'); b.type = 'button'; b.className = 'settings-back'; b.textContent = 'Enter Car mode'; b.onclick = open; container.append(p, b); } });
  }
  const api = { transcript, configure, open, close }; if (typeof module !== 'undefined') module.exports = api; else root.CarMode = api;
--- a/frontend/car-mode.test.js
+++ b/frontend/car-mode.test.js
@@ -1,2 +1,27 @@
 const { test } = require('node:test'), assert = require('node:assert/strict'); const { transcript } = require('./car-mode');
 test('voice search submits only final results from the result index', () => { const interim = [{transcript:'wrong'}]; interim.isFinal = false; const final = [{transcript:'Amazing Grace'}]; final.isFinal = true; assert.equal(transcript({results:[interim, final]}), 'Amazing Grace'); assert.equal(transcript({resultIndex:2,results:[final,final]}), ''); assert.equal(transcript({}), ''); });
 test('lazy Car mode keeps four independent transport buttons and the voice entry in place', () => {
  const vm=require('node:vm'),fs=require('node:fs');
  class Element {
    constructor(tag){this.tag=tag;this.children=[];this.inert=false;}
    append(...nodes){for(const node of nodes){node.remove();node.parent=this;this.children.push(node);}}
    remove(){if(this.parent){this.parent.children=this.parent.children.filter(n=>n!==this);this.parent=null;}}
    after(node){this.parent.append(node);}
    setAttribute(name,value){this[name]=value;}
    focus(){}
    insertAdjacentHTML(position,html){this.innerHTML+=html;}
    get isConnected(){return !!this.parent;}
  }
  const body=new Element('body'),input=new Element('input'),form=new Element('form'),voice=new Element('button');form.id='searchForm';voice.id='voiceSearchBtn';body.append(form,input,voice);
  const all=node=>[node,...node.children.flatMap(all)],doc={body,documentElement:{lang:'en'},createElement:tag=>new Element(tag),getElementById:id=>all(body).find(n=>n.id===id)};
  let section;const actions=[],root={document:doc,TransportIcons:require('./download-actions').transport,navigator:{},SpeechRecognition:function(){},SettingsSections:{register:s=>section=s}};
  vm.runInNewContext(fs.readFileSync(__dirname+'/car-mode.js','utf8'),{window:root,setInterval:()=>1,clearInterval:()=>{}});
  root.CarMode.configure({input,action:action=>actions.push(action),state:()=>({paused:true,title:'Song'})});
  root.CarMode.open();const overlay=body.children.find(n=>n.className==='car-mode'),controls=overlay.children.find(n=>n.className==='car-controls');
  assert.equal(controls.children.length,4);assert.equal(new Set(controls.children).size,4);assert.equal(voice.parent,body);
  controls.children.forEach(b=>b.onclick());assert.deepEqual(actions,['prev','toggle','back','next']);
  root.CarMode.close();assert.equal(voice.parent,body);assert.equal(body.inert,false);
  const panel=new Element('section');body.append(panel);section.render(panel);
  assert.equal(voice.parent,body,'settings must not steal the voice entry');assert.equal(panel.children.at(-1).textContent,'Enter Car mode');
 });
--- a/frontend/direct-media.js
+++ b/frontend/direct-media.js
@@ -77,7 +77,7 @@
    s.preview = m.file.streamMime ? root.DirectStream?.create(m.file.streamMime, m.file.title) : null;
    const wait = waiting.get(m.file.id); if (wait) clearTimeout(wait.timer);
    send(key, { type: 'direct', action: 'accept', token: m.token });
-    s.worker = new Worker('/direct-recv-worker.js');
+    s.worker = window.Lazy ? window.Lazy.worker('/direct-recv-worker.js') : new Worker('/direct-recv-worker.js');
    s.worker.onmessage = async e => {
      const result = e.data;
      if (result.op === 'opened') {
--- a/frontend/direct-recv-worker.js
+++ b/frontend/direct-recv-worker.js
@@ -1,11 +1,11 @@
 'use strict';
 importScripts('/sha256.js');
 let dir, handle, access, hash, pos = 0, claim, name;
 let chain = Promise.resolve();
 self.onmessage = e => { chain = chain.then(() => run(e.data)); };
 async function close() { if (access) { access.flush(); access.close(); access = null; } }
 async function run(m) {
  try {
    if (!self.Sha256) { self.__ASSET_URLS__=m.assetUrls || {}; importScripts(self.__ASSET_URLS__.sha256 || '/sha256.js'); }
    if (m.op === 'open') {
      claim = m.file;
      if (!/^[A-Za-z0-9_-]{1,128}$/.test(claim.id) || !/^[a-f0-9]{64}$/.test(claim.cid)) throw Error('Invalid file identity');
--- a/frontend/download-actions.css
+++ b/frontend/download-actions.css
@@ -9,3 +9,30 @@ html[data-layout="glass-stage"] :is(.dl-row,.download-job) .download-action { bo
 html[data-layout="glass-stage"] :is(.dl-row,.download-job) .download-action:hover { border-color:var(--glass-line); background:var(--tile-hi); color:var(--text); }
 html[data-layout="glass-stage"] :is(.dl-row,.download-job) .download-action.danger { color:var(--accent-bright); }
 html[data-layout="glass-stage"] :is(.dl-row,.download-job) .download-action:focus-visible { outline-color:var(--accent-bright); }
 /* Transport drawings and touch targets survive layout/state changes. */
 .transport-icon { display:inline-block; flex:none; width:24px; height:24px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
 .transport-shape { display:none; }
 .transport-shape-classic { display:inline; }
 html:is([data-layout="f7-swipe"],[data-layout="glass-stage"],[data-layout="bento-hub"]) .transport-shape-classic { display:none; }
 html[data-layout="f7-swipe"] .transport-shape-f7-swipe,
 html[data-layout="glass-stage"] .transport-shape-glass-stage,
 html[data-layout="bento-hub"] .transport-shape-bento-hub { display:inline; }
 html[data-layout="f7-swipe"] .transport-shape-f7-swipe { fill:currentColor; stroke-width:.7; }
 html[data-layout="f7-swipe"] .transport-icon:is([data-transport-icon="play"],[data-transport-icon="pause"],[data-transport-icon="previous"],[data-transport-icon="next"],[data-transport-icon="forward"]),
 html[data-layout="f7-swipe"] #controls .transport-icon:is([data-transport-icon="play"],[data-transport-icon="pause"],[data-transport-icon="previous"],[data-transport-icon="next"],[data-transport-icon="forward"]) { fill:currentColor; stroke-width:.7; }
 html[data-layout="f7-swipe"] :is([data-transport-icon="back10"],[data-transport-icon="forward10"],[data-transport-icon="back15"]) .transport-shape { fill:none; stroke-width:2; }
 html[data-layout="glass-stage"] .transport-icon,
 html[data-layout="glass-stage"] #controls .transport-icon { stroke-width:1.5; }
 html[data-layout="bento-hub"] .transport-icon { stroke-width:2; stroke-linejoin:round; }
 button:has(> .transport-icon), a.np-btn:has(> .transport-icon) { min-width:44px; min-height:44px; }
 button:has(> .transport-icon) { align-items:center; justify-content:center; }
 html[data-layout="f7-swipe"] :is(#playBtn,#stgPlay,.service-btn-play,.rv-play) { border-radius:50%; }
 html[data-layout="f7-swipe"] #playBtn { width:64px; height:64px; }
 html[data-layout="glass-stage"] :is(#playBtn,.mini-btn,.rv-tbtn):has(> .transport-icon) { background:var(--tile,rgba(255,255,255,.08)); border:1px solid var(--line); backdrop-filter:blur(12px); }
 html[data-layout="bento-hub"] :is(#playBtn,.mini-btn,.service-btn,.rv-tbtn):has(> .transport-icon) { border-radius:16px; }
 .car-controls .transport-icon { width:36px; height:36px; margin-right:12px; }
 .gh-seek .transport-icon, .empty-icon .transport-icon { width:48px; height:48px; }
 .ph-logo .transport-icon { width:60%; height:60%; }
 .home-pl-play:has(> .transport-icon) { min-width:44px; min-height:44px; }
--- a/frontend/download-actions.js
+++ b/frontend/download-actions.js
@@ -1,6 +1,83 @@
 /* One action control for the Downloads page and Settings download manager. */
 (function(root) {
  'use strict';
  // One SVG definition per media concept; every instance inherits its control colour.
  const mediaPaths = {
    download: '<path d="M12 3v12m-5-5 5 5 5-5M4 17v4h16v-4"/>',
    offline: '<circle cx="12" cy="12" r="9"/><path d="m7.5 12 3 3 6-6"/>',
    progress: '<path d="M12 3a9 9 0 1 1-9 9"/>'
  };
  const variants = {
    'classic': mediaPaths,
    'f7-swipe': {
      download: '<path d="M12 3v12m-5-5 5 5 5-5M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>',
      offline: '<circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>',
      progress: '<path d="M12 3a9 9 0 1 1-9 9"/>'
    },
    'glass-stage': {
      download: '<path d="M12 4v11m-4-4 4 4 4-4M5 20h14"/>',
      offline: '<circle cx="12" cy="12" r="8"/><path d="m8.5 12 2.5 2.5 4.5-5"/>',
      progress: '<path d="M12 4a8 8 0 1 1-8 8"/>'
    },
    'bento-hub': {
      download: '<path d="M12 4v11m-4-4 4 4 4-4M5 17v3h14v-3"/>',
      offline: '<rect x="4" y="4" width="16" height="16" rx="4"/><path d="m8 12 3 3 5-6"/>',
      progress: '<path d="M12 4a8 8 0 1 1-8 8"/>'
    }
  };
  const use = kind => `<use href="#media-${kind}"/>`;
  const svg = (kind, extra = '') => `<svg class="media-icon ${extra}" data-media-icon="${kind}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${use(kind)}</svg>`;
  const media = { paths: mediaPaths, use, svg };
  if (root.document) {
    const defs = root.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    defs.setAttribute('aria-hidden', 'true'); defs.setAttribute('width', '0'); defs.setAttribute('height', '0');
    defs.style.position = 'absolute'; defs.style.pointerEvents = 'none';
    defs.innerHTML = '<defs>' + Object.keys(mediaPaths).map(kind => `<g id="media-${kind}">${Object.entries(variants).map(([layout, paths]) => `<g class="media-shape media-shape-${layout}">${paths[kind]}</g>`).join('')}</g>`).join('') + '</defs>';
    root.document.body.appendChild(defs);
    root.MediaIcons = media;
  }
  // Select variants on visible use elements: ancestor CSS in referenced SVG groups
  // can report changed styles without repainting the cloned geometry in Chromium.
  const transportPaths = {
    play: '<path d="m8 5 11 7-11 7z"/>',
    pause: '<rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/>',
    previous: '<path d="m19 5-10 7 10 7zM5 5v14"/>',
    next: '<path d="m5 5 10 7-10 7zM19 5v14"/>',
    forward: '<path d="m3 5 9 7-9 7zM12 5l9 7-9 7z"/>'
  };
  for (const seconds of [10,15]) for (const direction of ['back','forward']) {
    transportPaths[direction + seconds] = (direction === 'back'
      ? '<path d="M4 12a8 8 0 1 0 3-6.2M4 4v4.5h4.5"/>'
      : '<path d="M20 12a8 8 0 1 1-3-6.2M20 4v4.5h-4.5"/>') +
      `<text x="12" y="15.5" text-anchor="middle" font-size="7.5" font-weight="700" fill="currentColor" stroke="none">${seconds}</text>`;
  }
  const transportVariants = Object.fromEntries(['classic','f7-swipe','glass-stage','bento-hub'].map(layout => [layout,{...transportPaths}]));
  Object.assign(transportVariants['f7-swipe'], {
    play: '<path d="M8 5.8a1 1 0 0 1 1.5-.86l10 6.2a1 1 0 0 1 0 1.72l-10 6.2A1 1 0 0 1 8 18.2z"/>',
    previous: '<rect x="4" y="5" width="3" height="14" rx="1.5"/><path d="M19 6a1 1 0 0 0-1.5-.86l-8.5 6a1 1 0 0 0 0 1.72l8.5 6A1 1 0 0 0 19 18z"/>',
    next: '<rect x="17" y="5" width="3" height="14" rx="1.5"/><path d="M5 6a1 1 0 0 1 1.5-.86l8.5 6a1 1 0 0 1 0 1.72l-8.5 6A1 1 0 0 1 5 18z"/>'
  });
  const transport = {
    paths: transportPaths, variants: transportVariants,
    svg(kind) {
      if (!transportPaths[kind]) throw new Error('Unknown transport icon: ' + kind);
      return `<svg class="transport-icon" data-transport-icon="${kind}" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">${Object.keys(transportVariants).map(layout=>`<use class="transport-shape transport-shape-${layout}" href="#transport-${kind}${layout==='classic'?'':'-'+layout}"/>`).join('')}</svg>`;
    },
    set(button, kind, label) {
      if (!button) return;
      const iconId=button.querySelector?.('.transport-icon')?.id;
      button.innerHTML = this.svg(kind);
      if(iconId)button.querySelector('.transport-icon').id=iconId;
      button.setAttribute('aria-label', label || (kind === 'pause' ? 'Pause' : 'Play'));
    }
  };
  if (root.document) {
    const defs = root.document.createElementNS('http://www.w3.org/2000/svg','svg');
    defs.setAttribute('aria-hidden','true'); defs.setAttribute('width','0'); defs.setAttribute('height','0');
    defs.style.position='absolute'; defs.style.pointerEvents='none';
    defs.innerHTML='<defs>'+Object.keys(transportPaths).flatMap(kind=>Object.entries(transportVariants).map(([layout,paths])=>`<g id="transport-${kind}${layout==='classic'?'':'-'+layout}">${paths[kind]}</g>`)).join('')+'</defs>';
    root.document.body.appendChild(defs); root.TransportIcons=transport;
  }
  const paths = {
    retry: '<path d="M3 11a9 9 0 1 1 2.6 7M3 3v8h8"/>',
    cancel: '<path d="m6 6 12 12M6 18 18 6"/>',
@@ -19,6 +96,6 @@
    const text = doc.createElement('span'); text.textContent = label;
    button.append(icon, text); return button;
  }
-  const api = { create };
+  const api = { create, media, transport };
  if (typeof module !== 'undefined' && module.exports) module.exports = api; else root.DownloadActions = api;
 })(globalThis);
--- a/frontend/downloads-page.js
+++ b/frontend/downloads-page.js
@@ -119,11 +119,7 @@
      empty.className = 'empty-state dl-empty-state';
      empty.innerHTML = `
        <div class="empty-icon dl-empty-icon-wrapper" aria-hidden="true">
-          <svg class="dl-empty-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <svg class="dl-empty-svg media-icon" data-media-icon="download" viewBox="0 0 24 24" aria-hidden="true"><use href="#media-download"/></svg>
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="7 10 12 15 17 10"></polyline>
            <line x1="12" y1="15" x2="12" y2="3"></line>
          </svg>
        </div>
        <h3 class="empty-title">No active downloads</h3>
        <p class="empty-desc">Saves in progress appear here with live status. Videos you save land in <strong>Saved</strong>.</p>
--- a/frontend/downloads.js
+++ b/frontend/downloads.js
@@ -12,7 +12,7 @@
  let adapter, total = 0;
  function configure(options) {
    adapter = options;
-    root.SettingsSections.register({ id: 'downloads-storage', title: 'Downloads & storage', cluster: 'Library & storage', description: 'Active queued paused failed saves, disk usage and playlist sizes', icon: '<path d="M12 3v12m-5-5 5 5 5-5M4 17v4h16v-4"/>', summary: () => `${adapter.slots()} at once · ${bytes(total)}`, render(container) {
+    root.SettingsSections.register({ id: 'downloads-storage', title: 'Downloads & storage', cluster: 'Library & storage', description: 'Active queued paused failed saves, disk usage and playlist sizes', icon: '<use href="#media-download"/>', summary: () => `${adapter.slots()} at once · ${bytes(total)}`, render(container) {
      const doc = container.ownerDocument;
      const heading = doc.createElement('h3'); heading.textContent = 'Downloads & storage';
      const jobs = doc.createElement('div'); jobs.className = 'download-manager'; jobs.setAttribute('aria-label', 'Download manager');
--- a/frontend/eq-core.js
+++ b/frontend/eq-core.js
@@ -1,24 +1,7 @@
 /* Shared live/offline EQ definitions and legacy curve migration. */
 (function(root) {
  'use strict';
-  const frequencies = [31,62,125,250,500,1000,2000,4000,8000,16000];
+  const { bands, presets, migrate, width } = typeof module !== 'undefined' ? require('./eq-parameters') : root.EqParameters;
  const bands = frequencies.map((f,i) => ({ f, label: f >= 1000 ? `${f/1000}k` : String(f), type: i === 0 ? 'lowshelf' : i === 9 ? 'highshelf' : 'peaking' }));
  const clamp = n => Math.max(-12, Math.min(12, Number(n) || 0));
  function migrate(values) {
    if (!Array.isArray(values)) return frequencies.map(() => 0);
    if (values.length !== 5) return frequencies.map((_,i) => clamp(values[i]));
    const old = [60,250,1000,4000,12000], curve = values.map(clamp);
    return frequencies.map(f => { if (f <= old[0]) return curve[0]; if (f >= old[4]) return curve[4]; const i = old.findIndex(x => x >= f), weight = Math.log(f / old[i-1]) / Math.log(old[i] / old[i-1]); return Math.round((curve[i-1] * (1-weight) + curve[i] * weight) * 10) / 10; });
  }
  const presets = {
    flat: { name: 'Flat', g: frequencies.map(() => 0) },
    bass: { name: 'Bass boost', g: [5,7,5,3,1,0,0,0,0,0] },
    vocal: { name: 'Vocal clarity', g: [-3,-4,-2,0,1,2,3,4,1,0] },
    acoustic: { name: 'Acoustic live', g: [-2,-1,0,-2,-1,1,2,2,1,0] },
    classical: { name: 'Classical', g: migrate([4,2,-1,1,3]) },
    treble: { name: 'Treble boost', g: [0,0,0,0,0,0,1,3,5,6] },
  };
  const width = value => Math.max(0, Math.min(100, Number(value) || 0));
  function createWidener(context, source, value = 0) {
    const splitter = context.createChannelSplitter(2), output = context.createChannelMerger(2), delay = context.createDelay(.05);
    source.connect(splitter); splitter.connect(output, 0, 0); splitter.connect(delay, 1); delay.connect(output, 0, 1);
--- a/frontend/eq-parameters.js
+++ b/frontend/eq-parameters.js
@@ -0,0 +1,25 @@
 /* Eager settings values; audio graphs remain in lazy feature groups. */
 (function(root) {
  'use strict';
  const frequencies = [31,62,125,250,500,1000,2000,4000,8000,16000];
  const bands = frequencies.map((f,i) => ({ f, label: f >= 1000 ? `${f/1000}k` : String(f), type: i === 0 ? 'lowshelf' : i === 9 ? 'highshelf' : 'peaking' }));
  const clamp = n => Math.max(-12, Math.min(12, Number(n) || 0));
  function migrate(values) {
    if (!Array.isArray(values)) return frequencies.map(() => 0);
    if (values.length !== 5) return frequencies.map((_,i) => clamp(values[i]));
    const old = [60,250,1000,4000,12000], curve = values.map(clamp);
    return frequencies.map(f => { if (f <= old[0]) return curve[0]; if (f >= old[4]) return curve[4]; const i = old.findIndex(x => x >= f), weight = Math.log(f / old[i-1]) / Math.log(old[i] / old[i-1]); return Math.round((curve[i-1] * (1-weight) + curve[i] * weight) * 10) / 10; });
  }
  const presets = {
    flat: { name: 'Flat', g: frequencies.map(() => 0) },
    bass: { name: 'Bass boost', g: [5,7,5,3,1,0,0,0,0,0] },
    vocal: { name: 'Vocal clarity', g: [-3,-4,-2,0,1,2,3,4,1,0] },
    acoustic: { name: 'Acoustic live', g: [-2,-1,0,-2,-1,1,2,2,1,0] },
    classical: { name: 'Classical', g: migrate([4,2,-1,1,3]) },
    treble: { name: 'Treble boost', g: [0,0,0,0,0,0,1,3,5,6] },
  };
  const width = value => Math.max(0, Math.min(100, Number(value) || 0));
  const amount = value => Math.max(0, Math.min(100, Number.isFinite(Number(value)) ? Number(value) : 100));
  const api = { bands, presets, migrate, width, amount };
  if (typeof module !== 'undefined') module.exports = api; else root.EqParameters = api;
 })(typeof window !== 'undefined' ? window : globalThis);
--- a/frontend/f7-layout.js
+++ b/frontend/f7-layout.js
@@ -35,7 +35,7 @@
  function loadF7(){
   if(root.Framework7)return Promise.resolve(root.Framework7);
-   if(!loading)loading=new Promise((res,rej)=>{const s=doc.createElement('script');s.src=F7_SRC;s.onload=()=>res(root.Framework7);s.onerror=()=>{loading=null;rej(new Error('Framework7 failed to load'));};doc.head.append(s);});
+   if(!loading)loading=new Promise((res,rej)=>{const s=doc.createElement('script');s.src=root.Lazy?.url('/vendor/framework7-swipe.min.js')||F7_SRC;s.onload=()=>res(root.Framework7);s.onerror=()=>{loading=null;rej(new Error('Framework7 failed to load'));};doc.head.append(s);});
   return loading;
  }
  function ensureApp(){
--- a/frontend/feature-bootstrap.js
+++ b/frontend/feature-bootstrap.js
@@ -0,0 +1,77 @@
 /* Thin eager entries and configuration for optional, stateful feature modules. */
 (function(root) {
  'use strict';
  const Lazy = root.Lazy, doc = root.document;
  if (!Lazy) return;
  const specs = [
    ['Piano','piano','configure','piano','Piano transcription','Live & worship','Off · load model on request'],
    ['MidiPedals','midi','configure','midi','MIDI pedalboard','Live & worship','Off'],
    ['PartyDJ','party-dj','register','party-dj','Watch party','Live & worship','Shared suggestions · host approval'],
    ['LyricsWindow','lyrics-window','configure','floating-lyrics','Floating lyrics','Live & worship','Floating lyrics window'],
    ['LowerThird','lower-third','register','broadcast','Presenter & broadcast','Live & worship','Projector · OBS lower third'],
    ['EqCore','eq-core','register','equalizer','Equalizer & stereo','Listening','Flat · Original stereo'],
    ['VocalReducer','vocal-reducer','register','vocal-reducer','Vocal reducer','Listening','100% · centre-panned vocals'],
    ['SetlistImport','setlist-import','configure','setlist-import','Setlist import','Library & storage','Planning Center · SongSelect · ChordPro'],
    ['CarMode','car-mode','configure','voice-car','Voice & Car mode','Listening','Voice search · Car mode'],
    ['DirectMedia','direct','configure','direct-transfer','Direct device transfer','Library & storage','Paired devices only'],
  ];
  function button(id, text, anchor, name, action, className='np-btn') {
    if (!anchor || doc.getElementById(id)) return;
    const b=doc.createElement('button'); b.id=id; b.type='button'; b.className=className; b.textContent=text; b.setAttribute('aria-label',text);
    if(id==='carModeBtn')b.innerHTML='<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m5 8 2-5h10l2 5M3 8h18v10H3zM5 18v3m14-3v3M6 12h2m8 0h2"/></svg>';
    if(id==='voiceSearchBtn')b.innerHTML='<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3m-4 0h8"/></svg>';
    if(id.startsWith('floating-')){b.title='Open floating lyrics';b.setAttribute('aria-label','Open floating lyrics window');}
    b.title ||= text;
    b.onclick=()=>Lazy.load(name).then(action).catch(error=>root.dispatchEvent(new CustomEvent('ytp-lazy-error',{detail:{error}})));
    anchor.after(b); Lazy.intent(b,name);
  }
  for (const [globalName, suffix, setup, id, title, cluster, summary] of specs) {
    const group='feature:'+suffix;
    const facade=Lazy.proxy(group,['open','close','obtain','publish','attach','handle','offer','paint','fade'],globalName);
    let configured=false;
    facade[setup]=options=>{
      if (configured) return; configured=true;
      Lazy.onLoad(group,()=>root[globalName][setup](options));
      root.SettingsSections.register({id,title,cluster,lazyGroup:group,summary:()=>{
          const s=options?.settings?.() || {};
          if(globalName==='Piano')return s.pianoEnabled?'On · browser or optional worker':'Off · load model on request';
          if(globalName==='MidiPedals')return s.midiEnabled?'On · pedal mappings':'Off';
          if(globalName==='EqCore')return `${root.EqParameters.presets[s.eq?.preset]?.name || 'Custom'} · ${root.EqParameters.width(s.stereoWidth)?'Widened':'Original stereo'}`;
          if(globalName==='VocalReducer')return `${root.EqParameters.amount(s.vocalLevel ?? 100)}% · centre-panned vocals`;
          if(globalName==='DirectMedia')return facade.enabled()?'On · paired devices only':'Off or unsupported';
          if(globalName==='CarMode')return root.SpeechRecognition||root.webkitSpeechRecognition?'Voice search available · Car mode':'Car mode · voice unavailable';
          if(globalName==='LyricsWindow')return root.documentPictureInPicture?.requestWindow?'Interactive window available':root.HTMLCanvasElement?.prototype.captureStream&&doc.pictureInPictureEnabled?'Lyric video PiP available':'Not supported on this browser';
          return summary;
        },
        render(container,context) {
          let disposed=false, cleanup;
          container.textContent='Loading…';
          Lazy.load(group).then(()=>{
            if (disposed || !container.isConnected) return;
            container.replaceChildren(); cleanup=root.SettingsSections.get(id).render(container,context);
          }).catch(error=>{if(!disposed)container.textContent=error.message;});
          return ()=>{disposed=true; if(typeof cleanup==='function')cleanup();};
        },
      });
      if (globalName==='CarMode') {
        button('carModeBtn','Car mode',doc.getElementById('searchForm'),group,()=>root.CarMode.open(),'icon-btn');
        if(root.SpeechRecognition||root.webkitSpeechRecognition)button('voiceSearchBtn','Voice search',options.input,group,()=>doc.getElementById('voiceSearchBtn').click(),'icon-btn voice-search');
      }
      if (globalName==='LyricsWindow' && (root.documentPictureInPicture?.requestWindow || (root.HTMLCanvasElement?.prototype.captureStream && doc.pictureInPictureEnabled))) {
        for(const anchor of ['stageLyricsAuto','serviceAutoscrollBtn','pipBtn'])button('floating-'+anchor,'⧉ Lyrics',doc.getElementById(anchor),group,()=>doc.getElementById('floating-'+anchor).click());
      }
    };
    if(globalName==='LowerThird') {
      facade.active=()=>new URLSearchParams(root.location.search).get('overlay')==='lowerthird';
      facade.url=(origin,code)=>{const u=new URL('/',origin);u.searchParams.set('overlay','lowerthird');u.searchParams.set('code',String(code));return u.href;};
    }
    if(globalName==='DirectMedia') {
      let settings=()=>({}); const configure=facade.configure;
      facade.configure=options=>{settings=options.settings;configure(options);};
      facade.enabled=()=>settings().directTransfer!==false && !!root.RTCPeerConnection;
      facade.hasSource=()=>false;
    }
    if(globalName==='LyricsWindow')facade.element=()=>null;
    root[globalName]=facade;
  }
 })(typeof window !== 'undefined' ? window : globalThis);
--- a/frontend/fullscreen-orientation.js
+++ b/frontend/fullscreen-orientation.js
@@ -24,7 +24,7 @@
    function lift() { if (home || stage.parentElement === document.body) return; home = { parent: stage.parentElement, next: stage.nextSibling }; document.body.append(stage); }
    function unlift() { if (!home) return; const { parent, next } = home; home = null; if (next && next.parentNode === parent) parent.insertBefore(stage, next); else parent.append(stage); }
    const hud = document.createElement('div'); hud.className = 'fullscreen-hud'; hud.hidden = true;
-    hud.innerHTML = '<div class="fullscreen-top"><div class="fullscreen-title" aria-live="polite"></div><button type="button" aria-label="Exit fullscreen" title="Exit fullscreen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 4H4v5m0-5 6 6m5 9h5v-5m0 5-6-6"/></svg></button></div><div class="fullscreen-controls"><button type="button" aria-label="Play or pause" title="Play or pause"><svg class="fill" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></button><input type="range" min="0" max="1000" value="0" aria-label="Seek video"><button type="button" class="fullscreen-orientation" aria-label="Change fullscreen orientation" title="Change fullscreen orientation"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 8V4h4M20 16v4h-4M4 4l6 6m4 4 6 6M20 8V4h-4M4 16v4h4M20 4l-6 6m-4 4-6 6"/></svg></button><button type="button" class="fullscreen-fit" aria-label="Change video fit" title="Change video fit"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7V4h3M17 4h3v3M20 17v3h-3M7 20H4v-3M7 9h10v6H7z"/></svg></button></div>';
+    hud.innerHTML = '<div class="fullscreen-top"><div class="fullscreen-title" aria-live="polite"></div><button type="button" aria-label="Exit fullscreen" title="Exit fullscreen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 4H4v5m0-5 6 6m5 9h5v-5m0 5-6-6"/></svg></button></div><div class="fullscreen-controls"><button type="button" aria-label="Play or pause" title="Play or pause">' + root.TransportIcons.svg('play') + '</button><input type="range" min="0" max="1000" value="0" aria-label="Seek video"><button type="button" class="fullscreen-orientation" aria-label="Change fullscreen orientation" title="Change fullscreen orientation"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 8V4h4M20 16v4h-4M4 4l6 6m4 4 6 6M20 8V4h-4M4 16v4h4M20 4l-6 6m-4 4-6 6"/></svg></button><button type="button" class="fullscreen-fit" aria-label="Change video fit" title="Change video fit"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7V4h3M17 4h3v3M20 17v3h-3M7 20H4v-3M7 9h10v6H7z"/></svg></button></div>';
    stage.append(hud);
    const play = hud.querySelector('button[aria-label="Play or pause"]'), orientation = hud.querySelector('.fullscreen-orientation'), fitButton = hud.querySelector('.fullscreen-fit'), exit = hud.querySelector('button[aria-label="Exit fullscreen"]'), range = hud.querySelector('input');
    const title = hud.querySelector('.fullscreen-title');
@@ -109,9 +109,7 @@
        range.style.setProperty('--seek-progress', `${s.duration ? Math.min(100, s.time / s.duration * 100) : 0}%`);
        play.setAttribute('aria-label', s.paused ? 'Play video' : 'Pause video');
        play.title = s.paused ? 'Play' : 'Pause';
-        play.innerHTML = s.paused
+        root.TransportIcons.set(play, s.paused ? 'play' : 'pause', s.paused ? 'Play video' : 'Pause video');
          ? '<svg class="fill" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>'
          : '<svg class="fill" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5h4v14H6zm8 0h4v14h-4z"/></svg>';
      }, 250);
    }
    document.addEventListener('fullscreenchange', () => { if (active && !document.fullscreenElement && native) cleanup(); });
--- a/frontend/glass-controls.js
+++ b/frontend/glass-controls.js
@@ -6,9 +6,9 @@
    music:'<path d="M9 18V5l11-2v13M9 8l11-2"/><ellipse cx="6" cy="18" rx="3" ry="2"/><ellipse cx="17" cy="16" rx="3" ry="2"/>',
    add:'<path d="M12 5v14M5 12h14"/>', close:'<path d="m6 6 12 12M18 6 6 18"/>',
    search:'<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>',
-    save:'<path d="M12 3v12m-5-5 5 5 5-5M4 17v4h16v-4"/>',
+    save:'<use href="#media-download"/>',
-    play:'<path d="m8 5 11 7-11 7z"/>', pause:'<path d="M8 5v14M16 5v14"/>',
+    play:'<use class="transport-shape transport-shape-classic" href="#transport-play"/><use class="transport-shape transport-shape-f7-swipe" href="#transport-play-f7-swipe"/><use class="transport-shape transport-shape-glass-stage" href="#transport-play-glass-stage"/><use class="transport-shape transport-shape-bento-hub" href="#transport-play-bento-hub"/>', pause:'<use class="transport-shape transport-shape-classic" href="#transport-pause"/><use class="transport-shape transport-shape-f7-swipe" href="#transport-pause-f7-swipe"/><use class="transport-shape transport-shape-glass-stage" href="#transport-pause-glass-stage"/><use class="transport-shape transport-shape-bento-hub" href="#transport-pause-bento-hub"/>',
-    next:'<path d="m5 5 10 7-10 7zM19 5v14"/>', previous:'<path d="m19 5-10 7 10 7zM5 5v14"/>',
+    next:'<use class="transport-shape transport-shape-classic" href="#transport-next"/><use class="transport-shape transport-shape-f7-swipe" href="#transport-next-f7-swipe"/><use class="transport-shape transport-shape-glass-stage" href="#transport-next-glass-stage"/><use class="transport-shape transport-shape-bento-hub" href="#transport-next-bento-hub"/>', previous:'<use class="transport-shape transport-shape-classic" href="#transport-previous"/><use class="transport-shape transport-shape-f7-swipe" href="#transport-previous-f7-swipe"/><use class="transport-shape transport-shape-glass-stage" href="#transport-previous-glass-stage"/><use class="transport-shape transport-shape-bento-hub" href="#transport-previous-bento-hub"/>',
    repeat:'<path d="m17 2 4 4-4 4M3 11V8a2 2 0 0 1 2-2h16M7 22l-4-4 4-4m14-1v3a2 2 0 0 1-2 2H3"/>',
    edit:'<path d="m14 5 5 5M4 20l5-1L21 7l-4-4L5 15z"/>',
    lyrics:'<rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8"/>',
@@ -23,7 +23,7 @@
    television:'<rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8m-4-4v4"/>', pin:'<path d="M9 3h6l-1 6 4 4H6l4-4zM12 13v8"/>',
    devices:'<rect x="3" y="4" width="14" height="12" rx="2"/><path d="M7 20h6M10 16v4"/><rect x="17" y="10" width="5" height="11" rx="1"/>'
  };
-  const glyphs = {'＋':'add','✕':'close','×':'close','✖':'close','🔍':'search','🔎':'search','⬇':'save','⤓':'save','💾':'save','▶':'play','⏸':'pause','⏭':'next','⏮':'previous','↻':'repeat','↺':'repeat','✎':'edit','✏':'edit','📝':'edit','🎤':'lyrics','↗':'share','⧉':'copy','✓':'check','📁':'folder','⚙':'settings','📋':'chapters','🕘':'clock','🔀':'shuffle','📡':'devices','▾':'down','▸':'right','←':'back','⋯':'more','⋮':'more','🗑':'trash','🎵':'music'};
+  const glyphs = {'＋':'add','✕':'close','×':'close','✖':'close','🔍':'search','🔎':'search','▶':'play','⏸':'pause','⏭':'next','⏮':'previous','↻':'repeat','↺':'repeat','✎':'edit','✏':'edit','📝':'edit','🎤':'lyrics','↗':'share','⧉':'copy','✓':'check','📁':'folder','⚙':'settings','📋':'chapters','🕘':'clock','🔀':'shuffle','📡':'devices','▾':'down','▸':'right','←':'back','⋯':'more','⋮':'more','🗑':'trash','🎵':'music'};
  function leadingGlyph(text,bento=false) {
    const mapping=bento?{...glyphs,'📺':'television','⏱':'clock','⇅':'settings','📌':'pin','🎧':'music','📚':'folder'}:glyphs;
    const prefix = text.match(/^\s*/)[0], rest = text.slice(prefix.length);
--- a/frontend/glass-controls.test.js
+++ b/frontend/glass-controls.test.js
@@ -1,7 +1,7 @@
 const test=require('node:test'),assert=require('node:assert/strict');
 const {leadingGlyph}=require('./glass-controls.js');
 test('glass icon substitution preserves leading whitespace and remaining labels',()=>{
- assert.deepEqual(leadingGlyph('  ⬇ Save'),{kind:'save',original:'  ⬇',rest:' Save'});
+ assert.equal(leadingGlyph('Save'),null);
 assert.deepEqual(leadingGlyph('⚙️ Settings'),{kind:'settings',original:'⚙️',rest:' Settings'});
 assert.equal(leadingGlyph('A song with 🔍 in its title'),null);
 assert.equal(leadingGlyph('Clear all'),null);
--- a/frontend/hash-worker.js
+++ b/frontend/hash-worker.js
@@ -6,11 +6,11 @@
 ^ * Out: { ok: true, sha256, size, engine } | { ok: false, error }
 * ========================================================================== */
 'use strict';
 importScripts('/sha256.js');
 self.onmessage = async (e) => {
  const { name } = e.data || {};
  try {
    if (!self.Sha256) { self.__ASSET_URLS__=e.data.assetUrls || {}; importScripts(self.__ASSET_URLS__.sha256 || '/sha256.js'); }
    const root = await navigator.storage.getDirectory();
    const dir = await root.getDirectoryHandle('videos');
    const file = await (await dir.getFileHandle(String(name))).getFile();
--- a/frontend/index.html
+++ b/frontend/index.html
--- a/frontend/layout-base.css
+++ b/frontend/layout-base.css
@@ -0,0 +1,11 @@
 /* Shared markup defaults stay eager when individual layouts load on demand. */
 .stg-overlay, .skip10, .deck-chips, .vol-pct, .mode-name { display: none; }
 .np-btn .ti, .np-btn .tl { pointer-events: none; }
 .np-btn .ti { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
 .np-btn .i-done { display: none; }
 .np-btn.done .i-save { display: none; }
 .np-btn.done .i-done { display: inline; }
 .stg-bot, .ch-badge, .upnext-clear, .list-sub, .p2p-strip { display: none; }
 .sleep-status .sl-ic, .sleep-status .sl-sub { display: none; }
 .ab-group { display: contents; }
 .mc-tune { display: none; }
--- a/frontend/lazy.js
+++ b/frontend/lazy.js
@@ -0,0 +1,164 @@
 /* Build-local classic-script loader. The inert manifest precedes this head script. */
 (function (root) {
  'use strict';
  const doc = root.document;
  let manifest;
  try { manifest = JSON.parse(doc.getElementById('ytp-assets').textContent); }
  catch { return; } // The index must supply this map; never fetch one during boot.
  const assets = new Map(), groups = new Map(), hooks = new Map();
  const css = new Set([...doc.querySelectorAll('link[data-lazy-css]')].map(link => link.dataset.lazyCss));
  const selected = new Map();
  const url = path => selected.get(path) || (manifest.files[path]?.h ? path + '?v=' + manifest.files[path].h : './' + path.replace(/^\//,''));
  function reloadRequired(name) {
    api.reloadRequired = true;
    if (root.CustomEvent) root.dispatchEvent?.(new root.CustomEvent('ytp-reload-required', { detail: { group: name } }));
  }
  function compatible(name, current, seen = new Set()) {
    if(seen.has(name))return true;
    seen.add(name);
    const built=manifest.groups[name], newer=current.groups[name];
    if(!built || !newer || built.contract!==newer.contract)return false;
    return (newer.dependencies || []).every(dependency=>(built.dependencies || []).includes(dependency)&&compatible(dependency,current,seen));
  }
  async function select(name) {
    if (!root.caches) return;
    try {
      const cache = await root.caches.open('ytplayer-assets');
      const response = await cache.match('/__ytp_asset_state');
      const current = response && (await response.json()).current;
      const built = manifest.groups[name], newer = current?.groups[name];
      // The active layout's CSS already executed in the parser before app boot.
      if(name === 'layout:'+api.layout) return;
      if (!newer || current.buildTag === manifest.buildTag) return;
      if (!compatible(name,current)) { reloadRequired(name); return; }
      const changedList = newer.files.join('\n') !== built.files.join('\n');
      const available = new Map();
      for (const path of changedList ? newer.files : built.files) {
        // Membership and contract must both match the running core's expectation.
        if (!newer.files.includes(path) || !current.files[path]) continue;
        const key = path + '?v=' + current.files[path].h;
        const held = await cache.match(key);
        if (held?.headers.get('X-Asset-Hash') === current.files[path].h) available.set(path, key);
      }
      if(changedList && available.size !== newer.files.length)return;
      for(const [path,key] of available)selected.set(path,key);
      if(changedList)return newer;
    } catch { /* Private browsing/cache eviction: keep the embedded build-local map. */ }
  }
  function inject(path) {
    if (assets.has(path)) return assets.get(path);
    const style = /\.css$/.test(path);
    if (style && css.has(path)) return Promise.resolve();
    if (!style && !/\.js$/.test(path)) return Promise.resolve(); // workers/imports/fonts are not page scripts
    const task = new Promise((resolve, reject) => {
      const node = doc.createElement(style ? 'link' : 'script');
      if (style) { node.rel = 'stylesheet'; node.href = url(path); }
      else { node.async = false; node.src = url(path); }
      node.onload = resolve;
      node.onerror = () => reject(new Error('Unable to load ' + path));
      doc.head.append(node);
    });
    assets.set(path, task);
    task.catch(() => assets.delete(path));
    return task;
  }
  function load(name) {
    if (groups.has(name)) return groups.get(name);
    const group = manifest.groups[name];
    if (!group) return Promise.reject(new Error('Unknown asset group: ' + name));
    const task = (async () => {
      for (const dependency of group.dependencies || []) await load(dependency);
      const selectedGroup = await select(name) || group;
      for (const path of selectedGroup.files) if (!/-worker\.js$/.test(path)) await inject(path);
      for (const fn of hooks.get(name) || []) await fn();
      group.executed = true;
    })();
    groups.set(name, task);
    task.catch(error => {
      groups.delete(name);
      if (root.CustomEvent) root.dispatchEvent?.(new root.CustomEvent('ytp-lazy-error', { detail: { group: name, error } }));
    });
    return task;
  }
  const api = {
    load, prefetch: load, loaded: name => !!manifest.groups[name]?.executed, url,
    manifest, layout: 'classic', reloadRequired: false,
    worker(path) {
      const worker=new root.Worker(url(path)), post=worker.postMessage.bind(worker); let first=true;
      worker.postMessage=(message,transfer)=>{
        if(first) { first=false; message={...message,assetUrls:{sha256:url('/sha256.js'),wasm:url('/sha256-wasm.js'),resume:url('/resume-core.js')}}; }
        post(message,transfer);
      };
      return worker;
    },
    reportLayout(registration) {
      const send = reg => {
        const workers = new Set([root.navigator.serviceWorker.controller, reg?.installing, reg?.waiting, reg?.active]);
        for(const worker of workers) worker?.postMessage({type:'LAYOUT',value:api.layout});
      };
      if(registration)send(registration);
      else root.navigator.serviceWorker?.getRegistration().then(send).catch(()=>{});
    },
    warm() {
      if (!root.navigator.serviceWorker || root.navigator.onLine === false) return;
      root.navigator.serviceWorker.ready.then(reg => {
        for (const worker of new Set([reg.active, reg.waiting])) worker?.postMessage({type:'COMPLETE_ASSETS'});
      }).catch(()=>{});
    },
    onLoad(name, fn) {
      if(api.loaded(name)) { Promise.resolve().then(fn).catch(error=>{if(root.CustomEvent)root.dispatchEvent?.(new root.CustomEvent('ytp-lazy-error',{detail:{group:name,error}}));}); return; }
      const list = hooks.get(name) || []; list.push(fn); hooks.set(name, list);
    },
    proxy(name, methods, globalName) {
      return Object.fromEntries(methods.map(method => [method, async (...args) => {
        await load(name);
        const key = globalName || name.split(':')[1];
        const target = root.YT?.[key] || root[key];
        if (typeof target?.[method] !== 'function') throw new Error('Missing lazy method: ' + method);
        return target[method](...args);
      }]));
    },
    intent(element, name) {
      if (!element) return;
      for (const type of ['pointerenter', 'focus', 'touchstart']) element.addEventListener(type, () => load(name).catch(() => {}), { once: true, passive: true });
    },
  };
  // Own this response once. Classic-script and fetch preloads do not share
  // their cached bodies in WebKit; the later bootstrap consumes this promise.
  const agent=root.navigator.userAgent || '';
  api.captureApp=!!(manifest.appCache && !root.navigator.serviceWorker?.controller && root.crypto?.subtle && /AppleWebKit\//.test(agent) && !/(?:Chrome|Chromium|Edg|OPR)\//.test(agent));
  if(api.captureApp) {
    api.appResponse=(async()=>{
      const key=url('/app.js');
      try {
        const cache=await root.caches?.open('ytplayer-assets'), held=await cache?.match(key);
        if(held?.headers.get('X-Asset-Hash')===manifest.files['/app.js']?.h && held)return held;
      } catch {}
      return root.fetch(key,{credentials:'same-origin'});
    })();
    api.appResponse.catch(()=>{});
  } else if(manifest.appCache) {
    // Preserve native script/code-cache reuse in engines without the WebKit gap.
    const preload=doc.createElement('link');preload.rel='preload';preload.as='script';preload.fetchPriority='low';preload.href=url('/app.js');doc.head.append(preload);
  }
  root.Lazy = api;
  root.navigator.serviceWorker?.addEventListener('message',event=>{
    if(event.data?.type==='ASSET_LAYOUT_REQUEST') event.source?.postMessage({type:'LAYOUT',value:api.layout});
    if(event.data?.type==='SW_UPDATE_AVAILABLE') api.warm();
  });
  root.navigator.serviceWorker?.addEventListener('controllerchange',()=>{api.reportLayout();api.warm();});
  root.addEventListener?.('online',()=>api.warm());
  api.warm();
  let settings={};
  try { settings=JSON.parse(root.localStorage.getItem('_ytpdata') || '{}').settings || {}; api.layout=settings.layout || 'classic'; } catch {}
  Object.assign(doc.documentElement.dataset,{layout:api.layout,theme:settings.theme || 'dark',font:settings.fontScale || 'normal',density:settings.density || 'comfortable',perf:settings.perfMode?'on':'off',motion:settings.reduceMotion?'reduced':'full'});
  const layoutName = manifest.groups['layout:' + api.layout] ? 'layout:'+api.layout : 'layout:classic';
  const layoutGroups = new Set([layoutName]);
  for(const name of layoutGroups) for(const dependency of manifest.groups[name]?.dependencies || []) layoutGroups.add(dependency);
  if (doc.readyState === 'loading') for (const path of [...layoutGroups].flatMap(name=>manifest.groups[name]?.files || [])) {
    if (!/\.css$/.test(path) || css.has(path)) continue;
    // Parser-inserted CSS blocks rendering; dynamic head links do not on all WebKit versions.
    css.add(path);
    doc.write('<link rel="stylesheet" href="' + url(path) + '" data-lazy-css="' + path + '">');
  }
 })(typeof window !== 'undefined' ? window : globalThis);
--- a/frontend/lazy.test.js
+++ b/frontend/lazy.test.js
@@ -0,0 +1,125 @@
 const { test } = require('node:test');
 const assert = require('node:assert/strict');
 const { readFileSync } = require('node:fs');
 const vm = require('node:vm');
 function fixture(current, held = [], appCache = false, userAgent = 'AppleWebKit/605.1 Safari/605.1', controlled = false) {
  const inserted = [], listeners = {}, writes = [], fetched = [];
  const manifest = { buildTag: 'own', appCache, groups: { core: { files: [] }, 'layout:classic': { files: ['/classic.css'] }, 'layout:glass-stage': { files: ['/glass.css', '/one.js', '/two.js'] }, 'feature:test': { contract:1, files: ['/one.js', '/two.js'] } }, files: { '/app.js':{h:'a'}, '/classic.css': {h:'c'}, '/glass.css':{h:'g'}, '/one.js':{h:'1'}, '/two.js':{h:'2'} } };
  const doc = { readyState:'loading', documentElement: { dataset:{} }, getElementById: () => ({ textContent:JSON.stringify(manifest) }), querySelectorAll: () => [], createElement: tag => ({ tagName:tag.toUpperCase() }), write: value => writes.push(value), addEventListener: (t,f) => listeners[t]=f };
  doc.head = { append: node => { inserted.push(node); queueMicrotask(() => node.onload?.()); } };
  const root = { document:doc, localStorage:{ getItem:() => '{"settings":{"layout":"glass-stage"}}' }, console, Promise, URL, crypto:{subtle:{}}, fetch:async key=>{fetched.push(key);return new Response('app');}, setTimeout, clearTimeout, navigator:{userAgent,serviceWorker:{ready:Promise.resolve({}),controller:controlled?{}:null,addEventListener(){}}}, addEventListener(){} };
  if (current) root.caches = { open: async () => ({ match: async key => key === '/__ytp_asset_state' ? new Response(JSON.stringify({current})) : held.includes(key) ? new Response('', {headers:{'X-Asset-Hash':key.split('=')[1]}}) : undefined }) };
  root.window=root; root.globalThis=root;
  vm.runInNewContext(readFileSync(require.resolve('./lazy.js'),'utf8'), root);
  return { root, inserted, writes, listeners, manifest, fetched };
 }
 test('external head bootstrap selects remembered CSS before paint without fetching a manifest', () => {
  const {root,writes}=fixture();
  assert.equal(root.document.documentElement.dataset.layout,'glass-stage');
  assert.deepEqual(writes,['<link rel="stylesheet" href="/glass.css?v=g" data-lazy-css="/glass.css">']);
 });
 test('lazy groups execute ordered classic scripts once, sharing concurrent calls and dependencies', async () => {
  const {root,inserted}=fixture();
  const one=root.Lazy.load('feature:test'), two=root.Lazy.load('feature:test');
  await Promise.all([one,two]);
  assert.deepEqual(inserted.map(n=>n.src),['/one.js?v=1','/two.js?v=2']);
  assert.equal(root.Lazy.loaded('feature:test'),true);
  await root.Lazy.load('layout:glass-stage');
  assert.equal(inserted.filter(n=>n.tagName==='SCRIPT').length,2);
 });
 test('failed injection can retry and proxy dispatches only after execution', async () => {
  const {root,inserted}=fixture();
  const append=root.document.head.append;
  root.document.head.append=n=>{inserted.push(n);queueMicrotask(()=>n.onerror?.());};
  await assert.rejects(root.Lazy.load('feature:test'),/one.js/);
  root.document.head.append=append;
  root.TestApi={open:value=>value+1};
  const proxy=root.Lazy.proxy('feature:test',['open'],'TestApi');
  assert.equal(await proxy.open(4),5);
  assert.equal(root.Lazy.url('/two.js'),'/two.js?v=2');
  await assert.rejects(root.Lazy.load('feature:missing'),/Unknown/);
 });
 test('executing groups are pinned even after a newer compatible manifest arrives', async () => {
  const f=fixture(); await f.root.Lazy.load('feature:test');
  const newer=JSON.parse(JSON.stringify(f.manifest)); newer.files['/one.js'].h='new';
  f.root.caches={open:async()=>({match:async key=>key==='/__ytp_asset_state'?new Response(JSON.stringify({current:newer})):new Response('',{headers:{'X-Asset-Hash':'new'}})})};
  await f.root.Lazy.load('feature:test');
  assert.deepEqual(f.inserted.map(n=>n.src),['/one.js?v=1','/two.js?v=2']);
 });
 test('unexecuted compatible group immediately uses newly cached file URLs', async () => {
  const next=fixture().manifest; next.buildTag='new'; next.files['/one.js'].h='new';
  const f=fixture(next,['/one.js?v=new','/two.js?v=2']);
  await f.root.Lazy.load('feature:test');
  assert.deepEqual(f.inserted.map(n=>n.src),['/one.js?v=new','/two.js?v=2']);
  assert.equal(f.root.Lazy.reloadRequired,false);
 });
 test('unexecuted incompatible group keeps its running-build N-1 URLs and requires reload', async () => {
  const next=fixture().manifest; next.buildTag='new'; next.files['/one.js'].h='new'; next.groups['feature:test'].contract=2;
  const f=fixture(next,['/one.js?v=new','/two.js?v=2']);
  const events=[]; f.root.CustomEvent=class {constructor(type,opts){this.type=type;this.detail=opts.detail}}; f.root.dispatchEvent=e=>events.push(e.type);
  await f.root.Lazy.load('feature:test');
  assert.deepEqual(f.inserted.map(n=>n.src),['/one.js?v=1','/two.js?v=2']);
  assert.equal(f.root.Lazy.reloadRequired,true);
  assert.ok(events.includes('ytp-reload-required'));
 });
 test('workers receive the pinned import URL map in their first message', () => {
 const f=fixture(), sent=[]; f.root.Worker=class { constructor(url){this.url=url;} postMessage(message,transfer){sent.push({message,transfer});} };
 f.manifest.files['/worker.js']={h:'w'}; f.root.Lazy.manifest.files['/worker.js']={h:'w'};
 const worker=f.root.Lazy.worker('/worker.js');worker.postMessage({op:'open'},['transfer']);worker.postMessage({op:'finish'});
 assert.equal(worker.url,'/worker.js?v=w');assert.equal(sent[0].message.assetUrls.sha256,f.root.Lazy.url('/sha256.js'));assert.equal(sent[0].message.assetUrls.wasm,f.root.Lazy.url('/sha256-wasm.js'));assert.deepEqual(sent[0].transfer,['transfer']);assert.equal(sent[1].message.assetUrls,undefined);
 });
 test('new group files with a changed dependency contract cannot run against the old dependency',async()=>{
 const next=fixture().manifest;next.buildTag='next';next.groups['feature:test'].dependencies=['feature:dep'];next.groups['feature:dep']={contract:2,files:[]};next.files['/one.js'].h='new';
 const f=fixture(next,['/one.js?v=new','/two.js?v=2']);f.root.Lazy.manifest.groups['feature:test'].dependencies=['feature:dep'];f.root.Lazy.manifest.groups['feature:dep']={contract:1,files:[]};
 await f.root.Lazy.load('feature:test');assert.deepEqual(f.inserted.map(n=>n.src),['/one.js?v=1','/two.js?v=2']);assert.equal(f.root.Lazy.reloadRequired,true);
 });
 test('classic chunk registry proxies use window.YT and keep the executed singleton pinned',async()=>{
 const {root,inserted}=fixture();root.YT={TestApi:{open:n=>n+2}};
 const proxy=root.Lazy.proxy('feature:test',['open'],'TestApi');
 assert.equal(await proxy.open(3),5);
 const singleton=root.YT.TestApi;await root.Lazy.load('feature:test');
 assert.equal(root.YT.TestApi,singleton);assert.equal(inserted.length,2);
 });
 test('online launches request worker completion even with Save-Data and skip offline messages',async()=>{
 const f=fixture(),sent=[];
 const active={postMessage:m=>sent.push(m)},waiting={postMessage:m=>sent.push(m)};
 f.root.navigator.connection={saveData:true};f.root.navigator.onLine=true;
 f.root.navigator.serviceWorker={ready:Promise.resolve({active,waiting})};
 f.root.Lazy.warm();await Promise.resolve();
 assert.deepEqual(sent.map(m=>m.type),['COMPLETE_ASSETS','COMPLETE_ASSETS']);
 f.root.navigator.onLine=false;f.root.Lazy.warm();await Promise.resolve();assert.equal(sent.length,2);
 });
 test('server-enabled head capture owns exactly one app response; native and rollback do not fetch',async()=>{
 const modern=fixture(null,[],true);await modern.root.Lazy.appResponse;
 assert.deepEqual(modern.fetched,['/app.js?v=a']);
 const legacy=fixture();assert.deepEqual(legacy.fetched,[]);assert.equal(legacy.root.Lazy.appResponse,undefined);
 });
 test('head capture is cache-first even before a worker controls the page',async()=>{
 const f=fixture(fixture().manifest,['/app.js?v=a'],true);const response=await f.root.Lazy.appResponse;
 assert.equal(response.headers.get('X-Asset-Hash'),'a');assert.deepEqual(f.fetched,[]);
 });
 test('Chromium retains native script loading and only preloads the current app URL',async()=>{
 const f=fixture(null,[],true,'AppleWebKit/537.36 Chrome/140.0 Safari/537.36');
 assert.equal(f.root.Lazy.captureApp,false);assert.equal(f.root.Lazy.appResponse,undefined);assert.deepEqual(f.fetched,[]);
 assert.equal(f.inserted.length,1);assert.equal(f.inserted[0].rel,'preload');assert.equal(f.inserted[0].as,'script');assert.equal(f.inserted[0].href,'/app.js?v=a');assert.equal(f.inserted[0].fetchPriority,'low');
 });
 test('iOS Chromium-branded browsers still use their WebKit response capture',async()=>{
 const f=fixture(null,[],true,'AppleWebKit/605.1 CriOS/140.0 Mobile Safari/605.1');await f.root.Lazy.appResponse;
 assert.equal(f.root.Lazy.captureApp,true);assert.deepEqual(f.fetched,['/app.js?v=a']);
 });
 test('controlled WebKit visits use worker-cached native app scripts without a response handoff',async()=>{
 const f=fixture(null,[],true,'AppleWebKit/605.1 Safari/605.1',true);
 assert.equal(f.root.Lazy.captureApp,false);assert.equal(f.root.Lazy.appResponse,undefined);assert.deepEqual(f.fetched,[]);
 assert.equal(f.inserted[0].as,'script');assert.equal(f.inserted[0].href,'/app.js?v=a');assert.equal(f.inserted[0].fetchPriority,'low');
 });
--- a/frontend/lyrics-window.js
+++ b/frontend/lyrics-window.js
@@ -16,10 +16,19 @@
        for (const link of root.document.querySelectorAll('link[rel="stylesheet"]')) { const copy = doc.createElement('link'); copy.rel = 'stylesheet'; copy.href = link.href; doc.head.append(copy); }
        const style = doc.createElement('style'); style.textContent = 'body{margin:0;background:var(--bg,#151719);color:var(--text,#fff);display:flex;flex-direction:column;height:100vh;overflow:hidden}.lyrics-floating-view{position:relative!important;inset:auto!important;flex:1;min-height:0;display:flex!important;flex-direction:column!important;width:100%!important}.lyrics-floating-view .sl-list{flex:1;min-height:0;height:auto!important}.lyrics-floating-controls{display:flex;gap:8px;padding:12px}.lyrics-floating-controls button{flex:1;min-height:48px;background:var(--bg-2,#25292d);color:inherit;border:1px solid var(--line,#555);border-radius:8px}'; doc.head.append(style);
        const view = adapter.view(), marker = root.document.createComment('floating lyrics'); view.before(marker); view.classList.add('lyrics-floating-view'); doc.body.append(view);
        doc.body.append(root.document.querySelector('#transport-play').ownerSVGElement.cloneNode(true));
        const controls = doc.createElement('div'); controls.className = 'lyrics-floating-controls';
-        for (const [label, action] of [['Play / Pause', adapter.toggle], ['Next', adapter.next]]) { const b = doc.createElement('button'); b.type = 'button'; b.textContent = label; b.onclick = action; controls.append(b); } doc.body.append(controls);
+        for (const [kind, label, action] of [['play', 'Play', adapter.toggle], ['next', 'Next', adapter.next]]) { const b = doc.createElement('button'); b.type = 'button'; root.TransportIcons.set(b,kind,label); b.onclick = action; controls.append(b); } doc.body.append(controls);
        const repaint = () => {
          doc.documentElement.dataset.layout=root.document.documentElement.dataset.layout; doc.documentElement.dataset.theme=root.document.documentElement.dataset.theme;
          const kind=root.document.querySelector('#playBtn .transport-icon')?.dataset.transportIcon || 'play';
          root.TransportIcons.set(controls.firstElementChild,kind);
        };
        const transportObserver=new root.MutationObserver(repaint);
        transportObserver.observe(root.document.getElementById('playBtn'),{childList:true});
        transportObserver.observe(root.document.documentElement,{attributes:true,attributeFilter:['data-layout','data-theme']}); repaint();
        const win = pipWindow; let restored = false;
-        cleanup = () => { if (restored) return; restored = true; marker.replaceWith(view); view.classList.remove('lyrics-floating-view'); pipWindow = null; adapter.refresh(); if (!win.closed) win.close(); };
+        cleanup = () => { if (restored) return; restored = true; transportObserver.disconnect(); marker.replaceWith(view); view.classList.remove('lyrics-floating-view'); pipWindow = null; adapter.refresh(); if (!win.closed) win.close(); };
        win.addEventListener('pagehide', cleanup, { once: true }); win.addEventListener('resize', adapter.refresh); adapter.refresh();
      } else {
        const canvas = root.document.createElement('canvas'); canvas.width = 840; canvas.height = 500; const ctx = canvas.getContext('2d');
@@ -33,7 +42,7 @@
  }
  function configure(options) {
    adapter = options; const supported = !!mode();
-    for (const id of ['stageLyricsAuto', 'serviceAutoscrollBtn', 'pipBtn']) { const anchor = root.document.getElementById(id); if (!anchor || !supported) continue; const button = root.document.createElement('button'); button.type = 'button'; button.className = 'np-btn'; button.textContent = '⧉ Lyrics'; button.title = 'Open floating lyrics'; button.setAttribute('aria-label', 'Open floating lyrics window'); button.onclick = open; anchor.after(button); }
+    for (const id of ['stageLyricsAuto', 'serviceAutoscrollBtn', 'pipBtn']) { const anchor = root.document.getElementById(id); if (!anchor || !supported) continue; const button = root.document.getElementById('floating-'+id) || root.document.createElement('button'); button.id='floating-'+id; button.type = 'button'; button.className = 'np-btn'; button.textContent = '⧉ Lyrics'; button.title = 'Open floating lyrics'; button.setAttribute('aria-label', 'Open floating lyrics window'); button.onclick = open; if(!button.isConnected)anchor.after(button); }
    root.SettingsSections.register({ id: 'floating-lyrics', title: 'Floating lyrics', cluster: 'Live & worship', summary: () => mode() === 'document' ? 'Interactive window available' : mode() ? 'Lyric video PiP available' : 'Not supported on this browser', render(container) { const p = container.ownerDocument.createElement('p'); p.textContent = mode() === 'document' ? 'Open synced lyrics with seeking, Play/Pause and Next in an always-on-top window.' : mode() ? 'This browser supports a lyric-video window. Playback controls remain in the player.' : 'Floating lyrics are not supported on this browser.'; container.append(p); if (supported) { const b = container.ownerDocument.createElement('button'); b.type = 'button'; b.className = 'settings-back'; b.textContent = 'Open floating lyrics'; b.onclick = open; container.append(b); } } });
  }
  const api = { configure, support, wrap, element: id => pipWindow?.document.getElementById(id) || null }; if (typeof module !== 'undefined') module.exports = api; else root.LyricsWindow = api;
--- a/frontend/media-icons.test.js
+++ b/frontend/media-icons.test.js
@@ -0,0 +1,19 @@
 const test = require('node:test');
 const assert = require('node:assert/strict');
 const { readdirSync, readFileSync } = require('node:fs');
 const { join } = require('node:path');
 test('download and offline icons never use emoji or text glyphs', () => {
  // Arrow keys are prose, not action icons. Exact lines prevent new exceptions.
  const allow = new Map([
    ['index.html', new Set(['<div class="shortcut-row"><kbd>↑</kbd><kbd>↓</kbd><span>Volume up / down</span></div>'])],
    ['admin.html', new Set(['<span class="muted" style="font-size:12.5px">Shortcuts: <code>Space</code> stamp (Tap-sync) · <code>S</code> stamp selected · <code>K</code> play · <code>↑↓</code> select · <code>⌘/Ctrl S</code> save</span>'])],
  ]);
  const failures=[];
  for (const file of readdirSync(__dirname).filter(f=>/\.(js|html|css)$/.test(f) && !f.endsWith('.test.js'))) {
    readFileSync(join(__dirname,file),'utf8').split('\n').forEach((line,i)=>{
      if (/[⬇⤓⇩💾📥↓]/u.test(line) && !allow.get(file)?.has(line.trim())) failures.push(`${file}:${i+1}`);
    });
  }
  assert.deepEqual(failures,[]);
 });
--- a/frontend/opfs-worker.js
+++ b/frontend/opfs-worker.js
@@ -34,8 +34,7 @@
 // Incremental SHA-256 (frontend/sha256.js): the file is hashed while it is
 // written, so the device knows its content id without re-reading the file.
-try { importScripts('/sha256.js'); } catch { /* hashing unavailable — save still works */ }
+
 importScripts('/resume-core.js');
 async function getVideosDir() {
  const root = await navigator.storage.getDirectory();
@@ -203,6 +202,10 @@ async function writeFile(dirName, name, buffer) {
 }
 self.onmessage = async (e) => {
  self.__ASSET_URLS__=e.data?.assetUrls || {};
  try { if(!self.Sha256)importScripts(self.__ASSET_URLS__.sha256 || '/sha256.js'); } catch { /* hashing unavailable — legacy save still works */ }
  try { if(!self.ResumeCore)importScripts(self.__ASSET_URLS__.resume || '/resume-core.js'); }
  catch(error) { self.postMessage({type:'error',error:error.message}); return; }
  if (e.data && e.data.op === 'write') {
    try { await writeFile(e.data.dir, e.data.name, e.data.buffer); self.postMessage({ type: 'written' }); }
    catch (err) { self.postMessage({ type: 'error', error: err && err.message ? err.message : String(err) }); }
--- a/frontend/opfs.js
+++ b/frontend/opfs.js
@@ -151,7 +151,7 @@
      return new Promise((resolve) => {
        let worker;
        try {
-          worker = new Worker('/opfs-worker.js');
+          worker = window.Lazy ? window.Lazy.worker('/opfs-worker.js') : new Worker('/opfs-worker.js');
        } catch {
          resolve({ ok: false, fallback: true });
          return;
--- a/frontend/p2p-client.js
+++ b/frontend/p2p-client.js
@@ -72,7 +72,7 @@
  function hashInWorker(name) {
    return new Promise((resolve) => {
      let w;
-      try { w = new Worker('/hash-worker.js'); } catch { resolve(null); return; }
+      try { w = window.Lazy ? window.Lazy.worker('/hash-worker.js') : new Worker('/hash-worker.js'); } catch { resolve(null); return; }
      w.onmessage = (e) => { w.terminate(); resolve(e.data && e.data.ok ? e.data : null); };
      w.onerror = () => { w.terminate(); resolve(null); };
      w.postMessage({ name });
@@ -296,7 +296,7 @@
  function start(h) {
    hooks = { ...hooks, ...(h || {}) };
    const idle = window.requestIdleCallback || ((fn) => setTimeout(fn, 1));
-    setTimeout(() => idle(() => sync()), 8000);
+    setTimeout(() => idle(() => sync()), h?.initialDelay ?? 8000);
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible' && Date.now() - lastSync > RESYNC_MS) sync();
    });
--- a/frontend/p2p-recv-worker.js
+++ b/frontend/p2p-recv-worker.js
@@ -12,7 +12,6 @@
 * The ".part" suffix keeps OPFS.listVideos() from ever listing a partial file.
 * ========================================================================== */
 'use strict';
 importScripts('/sha256.js');
 let dir = null;
 let handle = null;
@@ -36,6 +35,7 @@ self.onmessage = (e) => { chain = chain.then(() => onOp(e.data || {})); };
 async function onOp(m) {
  try {
    if (!self.Sha256) { self.__ASSET_URLS__=m.assetUrls || {}; importScripts(self.__ASSET_URLS__.sha256 || '/sha256.js'); }
    if (m.op === 'open') {
      const root = await navigator.storage.getDirectory();
      dir = await root.getDirectoryHandle('videos', { create: true });
--- a/frontend/p2p-transfer.js
+++ b/frontend/p2p-transfer.js
@@ -99,7 +99,7 @@
    return new Promise((resolve) => {
      const xid = newXid();
      const pc = new RTCPeerConnection({ iceServers });
-      const worker = new Worker('/p2p-recv-worker.js');
+      const worker = window.Lazy ? window.Lazy.worker('/p2p-recv-worker.js') : new Worker('/p2p-recv-worker.js');
      let settled = false;
      let idle = null;
      let expected = size;
--- a/frontend/piano.js
+++ b/frontend/piano.js
@@ -200,7 +200,7 @@
        button('Transcribe in browser', () =>
          run(async (id) => {
            const buffer = await audio(id, file.files[0]);
-            const engine = await import('./piano-engine.mjs');
+            const engine = await import(root.Lazy?.url('/piano-engine.mjs') || './piano-engine.mjs');
            const result = await engine.transcribe(buffer, (text) => {
              if (alive) status.textContent = text;
            });
--- a/frontend/presenter.js
+++ b/frontend/presenter.js
@@ -0,0 +1,210 @@
 /* Lazy classic chunk; its executing singleton stays pinned until reload. */
 (window.YT ||= {}).Presenter = (() => {
  const noop = { boot() {}, active: () => false };
  const view = $('presenterView');
  if (!WEB || !view || typeof WebSocket === 'undefined') return noop;
  const overlay = LowerThird.active();
  const KEY = overlay ? `ytpOverlayPair:${new URLSearchParams(location.search).get('code') || ''}` : 'ytpPresenterPair';
  const load = () => { try { return JSON.parse(localStorage.getItem(KEY) || 'null'); } catch { return null; } };
  const save = (v) => { try { if (v) localStorage.setItem(KEY, JSON.stringify(v)); else localStorage.removeItem(KEY); } catch { /* blocked */ } };
  const wsUrl = (q) => `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws/remote?${new URLSearchParams(q)}`;
  const list = $('pvList');
  const st = { ws: null, state: null, stateAt: 0, hostName: '', vid: null, all: [], docOff: 0, idx: -2, retry: null, notes: new Map(), wake: null, idleTimer: null, seq: 0 };
  function setStatus(t) { $('pvStatus').textContent = t; }
  function show() {
    view.classList.remove('hidden');
    document.body.classList.add('presenter-open');
    // The app underneath may have focused its search box; keys belong here now.
    try { if (document.activeElement && !view.contains(document.activeElement)) document.activeElement.blur(); } catch { /* fine */ }
    try { if (Player.master && !Player.master.paused) Player.pause(); } catch { /* nothing loaded */ }
    keepAwake();
    bumpIdle();
  }
  async function keepAwake() {
    try { if ('wakeLock' in navigator && !st.wake) { st.wake = await navigator.wakeLock.request('screen'); st.wake.addEventListener('release', () => { st.wake = null; }); } } catch { /* not allowed */ }
  }
  function showPairForm(msg = '') {
    $('pvPair').classList.remove('hidden');
    $('pvMsg').textContent = msg;
    setStatus('Not paired');
  }
  async function pair(code) {
    code = String(code || '').replace(/\D/g, '');
    if (code.length !== 6) { showPairForm('Enter the 6-digit code from the playing screen.'); return; }
    $('pvMsg').textContent = 'Connecting…';
    try {
      const res = await fetch('/api/remote/pair', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code, name: '🖥 Presenter' }) });
      const j = await res.json().catch(() => null);
      if (!j || !j.ok) { showPairForm('⚠ ' + ((j && j.error) || `HTTP ${res.status}`)); return; }
      save({ roomId: j.roomId, remoteId: j.remoteId, token: j.token, hostName: j.hostName });
      $('pvPair').classList.add('hidden');
      connect();
    } catch {
      showPairForm('⚠ Network error — try again');
    }
  }
  function connect() {
    const p = load();
    if (!p) { showPairForm(); return; }
    clearTimeout(st.retry);
    try { if (st.ws) st.ws.close(); } catch { /* gone */ }
    setStatus('Connecting…');
    const ws = new WebSocket(wsUrl({ role: 'remote', room: p.roomId, rid: p.remoteId, token: p.token, name: '🖥 Presenter' }));
    st.ws = ws;
    ws.onmessage = (e) => {
      let m; try { m = JSON.parse(e.data); } catch { return; }
      if (!overlay) { DirectMedia.attach('presenter', { send: m => ws.send(JSON.stringify(m)), peers: () => [{ id: 'host', name: st.hostName || 'Screen' }] }); }
      if (m.type === 'direct') { if (!overlay) DirectMedia.handle('presenter', m); return; }
      if (m.type === 'hello') { st.hostName = m.hostName || 'screen'; if (m.state) onState(m.state); else setStatus(`Following ${st.hostName}`); }
      else if (m.type === 'state') onState(m.state);
      else if (m.type === 'host-offline') { if (overlay) { st.all = []; LowerThird.paint([], -1); } setStatus(`${st.hostName || 'The screen'} is offline — waiting…`); }
    };
    ws.onclose = (e) => {
      if (st.ws !== ws) return;
      st.ws = null;
      if (e.code === 4001) { save(null); showPairForm('This presenter was unpaired — enter a new code.'); return; }
      setStatus(e.code === 4004 ? 'Screen offline — retrying…' : 'Reconnecting…');
      st.retry = setTimeout(connect, 3000);
    };
  }
  function onState(s) {
    st.state = s;
    st.stateAt = Date.now();
    const v = s && s.v;
    setStatus(v ? `● Following ${st.hostName} · ${v.title}` : `● Following ${st.hostName} · nothing playing`);
    const id = v && v.id;
    if (id !== st.vid) loadSong(id, v);
  }
  async function loadSong(id, v) {
    const seq = ++st.seq;
    st.vid = id;
    st.all = [];
    st.docOff = 0;
    render(v);
    if (!id || !isMediaId(id)) return;
    let notes = st.notes.get(id);
    if (!notes) {
      try {
        const j = await (await fetch(`/api/notes/${encodeURIComponent(id)}`)).json();
        notes = j && j.ok ? j : null;
        if (notes) { st.notes.set(id, notes); if (st.notes.size > 50) st.notes.delete(st.notes.keys().next().value); }
      } catch { notes = null; }
    }
    if (seq !== st.seq) return;
    const doc = notes && notes.lyrics && notes.lyrics.data;
    st.all = (doc && doc.lines) || [];
    st.docOff = (doc && Number(doc.offset)) || 0;
    render(v);
  }
  function render(v) {
    if (overlay) { LowerThird.paint([], -1); st.idx = -2; tick(true); return; }
    const sung = st.all.map((l, i) => ({ ...l, i })).filter((l) => l.kind === 'line');
    const title = $('pvTitle');
    if (!sung.length) {
      list.innerHTML = '';
      title.innerHTML = v ? `${escapeHtml(v.title)}${v.channel ? `<small>${escapeHtml(v.channel)}</small>` : ''}` : '';
      title.classList.toggle('hidden', !v);
      return;
    }
    title.classList.add('hidden');
    const pad = Math.round(list.clientHeight / 2);
    list.style.paddingTop = pad + 'px';
    list.style.paddingBottom = pad + 'px';
    list.innerHTML = sung.map((l) => `<div class="sl-line" data-i="${l.i}">${LyricsDisplay.html(l)}</div>`).join('');
    refit();
    st.idx = -2;
    tick(true);
    setTimeout(refit, 900); // once more after fonts/layout settle
  }
  function refit() {
    fitLyricLines(list, { maxShare: 0.2, maxPx: 240 });
  }
  function liveTime() {
    const s = st.state;
    if (!s) return 0;
    return s.paused ? s.cur : s.cur + ((Date.now() - st.stateAt) / 1000) * (s.rate || 1);
  }
  function tick(force = false) {
    if (view.classList.contains('hidden') || !st.all.length || !st.state) return;
    if (overlay) { LowerThird.paint(st.all, LyricsCore.activeIndex(st.all, liveTime(), st.docOff + (Number(st.state.off) || 0))); return; }
    const idx = LyricsCore.activeIndex(st.all, liveTime(), st.docOff + (Number(st.state.off) || 0));
    if (idx === st.idx && !force) return;
    st.idx = idx;
    const rows = [...list.querySelectorAll('.sl-line')];
    const pos = rows.findIndex((el) => Number(el.dataset.i) === idx);
    rows.forEach((el, k) => {
      const d = pos < 0 ? 99 : Math.abs(k - pos);
      el.classList.toggle('active', d === 0);
      el.classList.toggle('near', d === 1);
      el.classList.toggle('past', pos >= 0 && k < pos);
    });
    const target = pos >= 0 ? rows[pos] : rows[0];
    if (target) {
      const go = () => list.scrollTo({ top: Math.max(0, target.offsetTop - list.clientHeight / 2 + target.offsetHeight / 2), behavior: 'smooth' });
      go();
      setTimeout(go, 380);
    }
  }
  function toggleFullscreen() {
    if (document.fullscreenElement) document.exitFullscreen().catch(() => {});
    else view.requestFullscreen?.().catch(() => {});
  }
  // The status bar and cursor hide after 3 s without mouse movement.
  function bumpIdle() {
    view.classList.remove('idle');
    clearTimeout(st.idleTimer);
    st.idleTimer = setTimeout(() => view.classList.add('idle'), 3000);
  }
  function boot() {
    let param = null;
    try { param = new URLSearchParams(location.search).get(overlay ? 'code' : 'present'); } catch { /* no URL */ }
    if (param === null) return;
    try {
      const u = new URL(location.href);
      u.searchParams.delete('present');
      history.replaceState(null, '', u.pathname + (u.search || '') + u.hash);
    } catch { /* keep */ }
    show();
    const code = String(param).replace(/\D/g, '');
    if (overlay && load()) connect();
    else if (code.length === 6) pair(code);
    else if (load()) connect();
    else showPairForm();
    setInterval(() => tick(), 200);
    window.addEventListener('resize', () => { refit(); tick(true); });
    if (document.fonts) {
      document.fonts.ready.then(refit);
      document.fonts.addEventListener('loadingdone', refit);
    }
    view.addEventListener('mousemove', bumpIdle);
    view.addEventListener('dblclick', toggleFullscreen);
    $('pvFull').addEventListener('click', toggleFullscreen);
    $('pvPairBtn').addEventListener('click', () => pair($('pvCode').value));
    $('pvCode').addEventListener('keydown', (e) => { e.stopPropagation(); if (e.key === 'Enter') pair($('pvCode').value); });
    document.addEventListener('keydown', (e) => {
      if (view.classList.contains('hidden') || (e.target.closest && e.target.closest('#pvPair'))) return;
      if (e.key === 'f' || e.key === 'F') { e.preventDefault(); e.stopImmediatePropagation(); toggleFullscreen(); }
      else if (e.key === 'b' || e.key === 'B') { e.preventDefault(); e.stopImmediatePropagation(); $('pvBlank').classList.toggle('hidden'); }
    }, true);
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible') { keepAwake(); if (!st.ws && load()) connect(); }
    });
  }
  return { boot, active: () => !view.classList.contains('hidden') };
 })();
--- a/frontend/prewarm-next.js
+++ b/frontend/prewarm-next.js
@@ -0,0 +1,37 @@
 /* Pure queue candidate selection for stream prewarming. */
 (function (root, factory) {
  if (typeof module === 'object' && module.exports) module.exports = factory();
  else root.PrewarmNext = factory();
 })(typeof globalThis !== 'undefined' ? globalThis : this, function () {
  'use strict';
  function candidates(queue, index, state = {}, n = 2, known = {}) {
    if (!Array.isArray(queue) || !queue.length || !Number.isInteger(index) || index < 0 || index >= queue.length) return [];
    if (state.loopOne) return [];
    const count = Math.max(0, Math.floor(Number(n) || 0));
    if (!count) return [];
    const repeatAll = state.repeatMode === 'all' || state.repeatAll === true;
    const offline = new Set(known.offline || []);
    const serverCached = new Set(known.serverCached || []);
    const current = queue[index];
    const currentId = typeof current === 'string' ? current : current && current.id;
    const seen = new Set(currentId ? [currentId] : []);
    const ids = [];
    for (let step = 1; step < queue.length + (repeatAll ? 1 : 0) && ids.length < count; step++) {
      let at = index + step;
      if (at >= queue.length) {
        if (!repeatAll) break;
        at %= queue.length;
      }
      const item = queue[at];
      const id = typeof item === 'string' ? item : item && item.id;
      if (!id || seen.has(id)) continue;
      seen.add(id);
      if (offline.has(id) || serverCached.has(id) || (item && item.serverCached)) continue;
      ids.push(id);
    }
    return ids;
  }
  return { candidates };
 });
--- a/frontend/prewarm-next.test.js
+++ b/frontend/prewarm-next.test.js
@@ -0,0 +1,26 @@
 'use strict';
 const test = require('node:test');
 const assert = require('node:assert/strict');
 const { candidates } = require('./prewarm-next.js');
 const q = ['a', 'b', 'c', 'd'].map(id => ({ id }));
 test('returns the next n queue ids in existing order', () => {
  assert.deepEqual(candidates(q, 0, {}, 2), ['b', 'c']);
 });
 test('repeat all wraps and does not duplicate ids', () => {
  assert.deepEqual(candidates(q, 3, { repeatMode: 'all' }, 2), ['a', 'b']);
  assert.deepEqual(candidates([{ id: 'x' }, { id: 'x' }], 0, { repeatMode: 'all' }, 3), []);
 });
 test('repeat off stops at the end and loop one has no candidates', () => {
  assert.deepEqual(candidates(q, 3, {}, 2), []);
  assert.deepEqual(candidates(q, 0, { loopOne: true, repeatMode: 'all' }, 2), []);
 });
 test('skips offline and known server cached ids and deduplicates', () => {
  assert.deepEqual(candidates(q, 0, {}, 3, { offline: ['b'], serverCached: ['c'] }), ['d']);
  assert.deepEqual(candidates([{ id: 'a' }, { id: 'b', serverCached: true }, { id: 'c' }], 0, {}, 2), ['c']);
 });
 test('shuffle follows the queue order selected before advance', () => {
  const shuffled = ['a', 'd', 'b', 'c'].map(id => ({ id }));
  assert.deepEqual(candidates(shuffled, 0, { shuffle: true }, 2), ['d', 'b']);
 });
--- a/frontend/remote-client.js
+++ b/frontend/remote-client.js
@@ -0,0 +1,673 @@
 /* Lazy classic chunk; its executing singleton stays pinned until reload. */
 (window.YT ||= {}).Remote = (() => {
  const noop = { boot() {}, changed() {} };
  if (!WEB || typeof WebSocket === 'undefined') return noop;
  const HOST_KEY = 'ytpRemoteHost';
  const PAIR_KEY = 'ytpRemotePair';
  const load = (k) => { try { return JSON.parse(localStorage.getItem(k) || 'null'); } catch { return null; } };
  const save = (k, v) => { try { if (v) localStorage.setItem(k, JSON.stringify(v)); else localStorage.removeItem(k); } catch { /* storage blocked */ } };
  const wsUrl = (q) => `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws/remote?${new URLSearchParams(q)}`;
  const newSecret = () => {
    const b = new Uint8Array(32);
    crypto.getRandomValues(b);
    return btoa(String.fromCharCode(...b)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
  };
  const guessName = (fallback) => {
    const ua = navigator.userAgent || '';
    if (/iPhone/.test(ua)) return 'iPhone';
    if (/iPad/.test(ua)) return 'iPad';
    if (/Android/.test(ua)) return 'Android phone';
    if (/Windows/.test(ua)) return 'Windows PC';
    if (/Mac/.test(ua)) return 'Mac';
    return fallback;
  };
  const clock = (t) => (window.LyricsCore ? LyricsCore.fmtClock(t) : fmtTime(t));
  // ==========================================================================
  // Host (the screen being controlled)
  // ==========================================================================
  const host = { ws: null, remotes: [], code: '', codeExpires: 0, retryMs: 2000, timer: null, lastState: '', lastQueue: '', replaced: false, pending: false };
  function hostCfg() {
    let cfg = load(HOST_KEY);
    if (!cfg || !cfg.secret) cfg = { secret: newSecret(), name: guessName('Desktop'), enabled: false };
    return cfg;
  }
  function hostConnect() {
    const cfg = hostCfg();
    if (!cfg.enabled) return;
    try { if (host.ws) host.ws.close(); } catch { /* already closed */ }
    const ws = new WebSocket(wsUrl({ role: 'host', secret: cfg.secret, name: cfg.name }));
    host.ws = ws;
    host.replaced = false;
    ws.onopen = () => { host.retryMs = 2000; };
    ws.onmessage = (e) => { let m; try { m = JSON.parse(e.data); } catch { return; } onHostMessage(m); };
    ws.onclose = (e) => {
      if (host.ws !== ws) return;
      host.ws = null;
      host.remotes = [];
      renderChip();
      renderHostModal();
      if (e.code === 4000) { host.replaced = true; renderHostModal(); return; } // another tab hosts now
      if (hostCfg().enabled) {
        clearTimeout(host.timer);
        host.timer = setTimeout(hostConnect, host.retryMs);
        host.retryMs = Math.min(host.retryMs * 2, 30000);
      }
    };
  }
  const hostSend = (m) => { if (host.ws && host.ws.readyState === 1) host.ws.send(JSON.stringify(m)); };
  function onHostMessage(m) {
    DirectMedia.attach('remote-host', { send: hostSend, peers: () => host.remotes.map(r => ({ id: r.rid, name: r.name })) });
    if (m.type === 'direct') { DirectMedia.handle('remote-host', m); return; }
    if (m.type === 'hello') {
      host.code = m.code; host.codeExpires = m.codeExpires; host.remotes = m.remotes || [];
      host.lastState = ''; host.lastQueue = '';
      pushState(); pushQueue();
    } else if (m.type === 'code') {
      host.code = m.code; host.codeExpires = m.codeExpires;
    } else if (m.type === 'remotes') {
      host.remotes = m.remotes || [];
      if (m.joined) { toast(`📱 ${m.joined} connected as a remote`); host.lastState = ''; host.lastQueue = ''; pushState(); pushQueue(); }
      if (m.left) toast(`📱 ${m.left} disconnected`);
    } else if (m.type === 'ping') {
      hostSend({ type: 'pong', rid: m.rid, t: m.t });
      return;
    } else if (m.type === 'cmd') {
      runCommand(m);
      return;
    }
    renderChip();
    renderHostModal();
  }
  function stateNow() {
    const meta = current && current.meta;
    const M = Player.master;
    return {
      directAvailable: !!meta && cachedIds.has(meta.id) && DirectMedia.enabled() && data.settings.p2pShare !== false,
      v: meta ? { id: meta.id, title: meta.title || '', channel: meta.channel || '', thumbnail: meta.thumbnail || '' } : null,
      cur: M ? Math.floor((M.currentTime || 0) * 10) / 10 : 0,
      dur: (M && isFinite(M.duration) && M.duration) || (meta && meta.duration) || 0,
      paused: !M || M.paused,
      volume: data.settings.volume ?? 1,
      service: isServiceModeOpen(),
      sleep: sleepTimerRemaining || 0,
      hostName: hostCfg().name,
      // For the presenter screen: this screen's personal lyric offset for the
      // song and the playback speed (to extrapolate between updates).
      off: meta && data.lyricOffsets ? Number(data.lyricOffsets[meta.id]) || 0 : 0,
      rate: (M && M.playbackRate) || 1,
    };
  }
  function pushState(force = false) {
    if (!host.ws || !host.remotes.length) return;
    const st = stateNow();
    const key = JSON.stringify({ ...st, cur: Math.floor(st.cur) });
    if (!force && key === host.lastState) return;
    host.lastState = key;
    hostSend({ type: 'state', state: { ...st, at: Date.now() } });
  }
  function pushQueue() {
    if (!host.ws || !host.remotes.length) return;
    const items = queue.slice(0, 200).map((v) => ({
      id: v.id, title: v.title || '', channel: v.channel || '', duration: v.duration || 0, thumbnail: v.thumbnail || '',
    }));
    const key = queueIndex + '|' + items.map((v) => v.id).join(',');
    if (key === host.lastQueue) return;
    host.lastQueue = key;
    hostSend({ type: 'queue', queue: { items, idx: queueIndex } });
  }
  // Coalesce bursts (play event + renderUpNext + afterLoad) into one push.
  function changed() {
    if (!host.ws || host.pending) return;
    host.pending = true;
    setTimeout(() => { host.pending = false; pushState(); pushQueue(); }, 50);
  }
  const validIdx = (i) => Number.isInteger(i) && i > queueIndex && i < queue.length;
  function runCommand(m) {
    const who = m.from || 'Phone';
    switch (m.cmd) {
      case 'toggle': Player.toggle(); break;
      case 'play': Player.play(); break;
      case 'pause': Player.pause(); break;
      case 'next': playNext(); break;
      case 'prev': playPrev(); break;
      case 'seek': {
        const t = Number(m.t);
        if (isFinite(t) && t >= 0) Player.seek(t);
        break;
      }
      case 'volume': {
        const v = Math.max(0, Math.min(1, Number(m.v)));
        if (!isFinite(v)) break;
        data.settings.volume = v;
        els.volume.value = String(v);
        Player.applyVolume();
        syncMuteIcon();
        persist();
        break;
      }
      case 'jump': {
        const i = Number(m.i);
        if (Number.isInteger(i) && i >= 0 && i < queue.length) { queueIndex = i - 1; playNext(); }
        break;
      }
      case 'remove': {
        const i = Number(m.i);
        if (validIdx(i)) { queue.splice(i, 1); renderUpNext(); }
        break;
      }
      case 'move': {
        const from = Number(m.from), to = Number(m.to);
        if (validIdx(from) && validIdx(to) && from !== to) {
          const [v] = queue.splice(from, 1);
          queue.splice(to, 0, v);
          renderUpNext();
        }
        break;
      }
      case 'add': {
        const v = m.video;
        if (!v || typeof v.id !== 'string' || !isMediaId(v.id)) break;
        const item = slim({ ...v, title: String(v.title || v.id).slice(0, 300), channel: String(v.channel || '').slice(0, 200) });
        if (!current || !queue.length) { playFromList([item], 0, 'remote'); }
        else if (!queue.slice(queueIndex + 1).some((x) => x.id === item.id)) { queue.push(item); renderUpNext(); }
        toast(`📱 ${who} added “${item.title}”`);
        break;
      }
      case 'sleep': {
        const min = Number(m.min) || 0;
        if (min > 0) startSleepTimer(Math.min(min, 240)); else cancelSleepTimer();
        break;
      }
      case 'service':
        if (m.on) enterServiceMode(); else exitServiceMode();
        break;
      default: return;
    }
    changed();
  }
  function startHosting() {
    const cfg = hostCfg();
    cfg.enabled = true;
    save(HOST_KEY, cfg);
    hostConnect();
    renderHostModal();
  }
  function stopHosting() {
    const cfg = hostCfg();
    cfg.enabled = false;
    save(HOST_KEY, cfg);
    clearTimeout(host.timer);
    const ws = host.ws;
    host.ws = null;
    host.remotes = [];
    try { if (ws) ws.close(); } catch { /* gone */ }
    renderChip();
    renderHostModal();
  }
  function unpairAll() {
    hostSend({ type: 'unpair-all' });
    const cfg = hostCfg();
    cfg.secret = newSecret(); // every phone's token was derived from the old one
    save(HOST_KEY, cfg);
    setTimeout(hostConnect, 300);
    toast('All phones unpaired');
  }
  function renderChip() {
    const chip = $('remoteChip');
    if (!chip) return;
    const n = host.remotes.length;
    chip.classList.toggle('hidden', !host.ws || !n);
    if (n) {
      $('remoteChipText').textContent = n === 1
        ? `Remote connected — ${host.remotes[0].name}`
        : `${n} remotes connected`;
    }
  }
  let hostModalOpen = false;
  function renderHostModal() {
    if (!hostModalOpen) return;
    const body = $('modalBody') && $('modalBody').querySelector('.remote-host');
    if (!body) { hostModalOpen = false; return; }
    const cfg = hostCfg();
    const live = !!host.ws;
    const mins = host.codeExpires ? Math.max(0, Math.round((host.codeExpires - Date.now()) / 60000)) : 0;
    body.querySelector('.rh-body').innerHTML = !cfg.enabled ? `
        <p class="modal-text">Let a phone drive this screen — play/pause, seek, volume, the queue and service mode —
          while this computer plays to the TV or speakers. Pairing uses a one-time 6-digit code; nothing to sign in to.</p>`
      : host.replaced ? `<p class="modal-text">Another tab on this computer took over as the remote-controlled screen.</p>`
      : !live ? `<p class="modal-text">Connecting to the server…</p>`
      : `
        <div class="rh-pair">
          <img class="rh-qr" alt="QR code to pair a phone" src="/api/remote/qr/${host.code}" />
          <div>
            <div class="rh-label">Pairing code</div>
            <div class="rh-code">${host.code.slice(0, 3)} ${host.code.slice(3)}</div>
            <div class="rh-sub">Valid ${mins} more min · one use</div>
            <div class="rh-sub">On the phone: open this app → 📱 Remote → <b>Use this phone as a remote</b>, or scan the QR code.</div>
          </div>
        </div>
        <div class="rh-label">Presenter / projector screen</div>
        <div class="rh-present">
          <img class="rh-qr rh-qr-sm" alt="QR code for the presenter screen" src="/api/remote/qr/${host.code}?kind=present" />
          <div>
            <div class="rh-sub">Lyrics-only display that follows this screen. On the projector's computer or TV browser open
              <code>${escapeHtml(location.origin)}/?present=${host.code}</code> (same code), or scan the QR.</div>
            <button class="np-btn" type="button" data-act="present">🖥 Open presenter window here</button>
            <button class="np-btn" type="button" data-act="obs">Copy OBS browser-source URL</button>
          </div>
        </div>
        <div class="rh-label">Connected phones & screens</div>
        ${host.remotes.length ? host.remotes.map((r) => `
          <div class="rh-remote"><span>📱 ${escapeHtml(r.name)}</span><button class="mk-btn" type="button" data-kick="${escapeHtml(r.rid)}" title="Disconnect">✕</button></div>`).join('')
          : '<div class="rh-sub">None yet.</div>'}`;
    const nameIn = body.querySelector('.rh-name');
    if (document.activeElement !== nameIn) nameIn.value = cfg.name;
    body.querySelector('[data-act="start"]').classList.toggle('hidden', cfg.enabled && !host.replaced);
    body.querySelector('[data-act="stop"]').classList.toggle('hidden', !cfg.enabled);
    body.querySelector('[data-act="code"]').classList.toggle('hidden', !live);
    body.querySelector('[data-act="unpair"]').classList.toggle('hidden', !live);
  }
  async function openHostModal() {
    try { await Lazy.load('feature:direct'); } catch(error) { toast(error.message); return; }
    const body = document.createElement('div');
    body.className = 'remote-host';
    body.innerHTML = `
      <div class="rh-body"></div>
      <label class="rh-name-row">This screen's name <input class="rh-name" maxlength="40" /></label>
      <div class="rh-buttons">
        <button class="np-btn" type="button" data-act="start">${TransportIcons.svg('play')} Start — control from a phone</button>
        <button class="np-btn" type="button" data-act="code">↻ New code</button>
        <button class="np-btn" type="button" data-act="unpair">Unpair all phones</button>
        <button class="np-btn" type="button" data-act="stop">Stop</button>
      </div>`;
    body.addEventListener('click', (e) => {
      const kick = e.target.closest('[data-kick]');
      if (kick) { hostSend({ type: 'kick', rid: kick.dataset.kick }); return; }
      const act = e.target.closest('[data-act]');
      if (!act) return;
      if (act.dataset.act === 'start') startHosting();
      else if (act.dataset.act === 'stop') stopHosting();
      else if (act.dataset.act === 'code') hostSend({ type: 'new-code' });
      else if (act.dataset.act === 'unpair') unpairAll();
      else if (act.dataset.act === 'obs') { navigator.clipboard.writeText(LowerThird.url(location.origin, host.code)).then(() => toast('OBS URL copied'), () => toast('Copy blocked')); }
      else if (act.dataset.act === 'present') {
        // A second window on this computer (drag it to the projector display).
        window.open(`/?present=${host.code}`, 'ytp-presenter', 'popup,width=1280,height=720');
      }
    });
    body.querySelector('.rh-name').addEventListener('change', (e) => {
      const cfg = hostCfg();
      cfg.name = e.target.value.trim().slice(0, 40) || guessName('Desktop');
      save(HOST_KEY, cfg);
      if (cfg.enabled) hostConnect(); // the server learns names on connect
    });
    showModal('📱 Control this screen from a phone', body, [
      { label: 'Done', primary: true, onClick: () => { hostModalOpen = false; closeModal(); } },
    ]);
    hostModalOpen = true;
    renderHostModal();
  }
  // ==========================================================================
  // Remote (this phone drives a host)
  // ==========================================================================
  const rc = { ws: null, open: false, state: null, stateAt: 0, queue: { items: [], idx: -1 }, retry: null, ping: null, seekTimer: null, latency: null, online: false, seeking: false, volTimer: null, drag: null };
  const rcSend = (m) => { if (rc.ws && rc.ws.readyState === 1) rc.ws.send(JSON.stringify(m)); };
  const cmd = (name, args = {}) => rcSend({ type: 'cmd', cmd: name, ...args });
  function setStatus(text, ok = false) {
    $('rvStatus').textContent = text;
    $('rvStatus').classList.toggle('ok', ok);
  }
  function showPairForm(msg = '') {
    $('rvPair').classList.remove('hidden');
    $('rvControl').classList.add('hidden');
    $('rvHostName').textContent = 'Remote';
    setStatus('Not paired');
    $('rvPairMsg').textContent = msg;
    if (!$('rvName').value) $('rvName').value = (load(PAIR_KEY) || {}).name || guessName('Phone');
  }
  function rcConnect() {
    const p = load(PAIR_KEY);
    if (!p || !rc.open) return;
    clearTimeout(rc.retry);
    try { if (rc.ws) rc.ws.close(); } catch { /* gone */ }
    $('rvPair').classList.add('hidden');
    $('rvControl').classList.remove('hidden');
    $('rvHostName').textContent = p.hostName || 'Screen';
    setStatus('Connecting…');
    const ws = new WebSocket(wsUrl({ role: 'remote', room: p.roomId, rid: p.remoteId, token: p.token, name: p.name || guessName('Phone') }));
    rc.ws = ws;
    ws.onmessage = (e) => { let m; try { m = JSON.parse(e.data); } catch { return; } onRemoteMessage(m); };
    ws.onclose = (e) => {
      if (rc.ws !== ws) return;
      rc.ws = null;
      rc.online = false;
      clearInterval(rc.ping);
      if (e.code === 4001) { save(PAIR_KEY, null); showPairForm('This phone was unpaired by the screen — pair again.'); return; }
      if (!rc.open) return;
      setStatus(e.code === 4004 ? 'Screen offline — retrying…' : 'Reconnecting…');
      rc.retry = setTimeout(rcConnect, 4000);
    };
  }
  function onRemoteMessage(m) {
    DirectMedia.attach('remote-client', { send: rcSend, peers: () => [{ id: 'host', name: 'Paired screen', files: rc.state?.directAvailable && rc.state?.v ? [rc.state.v.id] : [] }] });
    if (m.type === 'direct') { DirectMedia.handle('remote-client', m); return; }
    if (m.type === 'hello') {
      rc.online = true;
      $('rvHostName').textContent = m.hostName || 'Screen';
      if (m.state) { rc.state = m.state; rc.stateAt = Date.now(); }
      if (m.queue) rc.queue = m.queue;
      setStatus('Synced', true);
      clearInterval(rc.ping);
      const ping = () => rcSend({ type: 'ping', t: Date.now() });
      ping();
      rc.ping = setInterval(ping, 5000);
      renderRemote(); renderQueue();
    } else if (m.type === 'state') {
      rc.state = m.state; rc.stateAt = Date.now();
      renderRemote();
    } else if (m.type === 'queue') {
      rc.queue = m.queue || { items: [], idx: -1 };
      renderQueue();
    } else if (m.type === 'pong') {
      rc.latency = Date.now() - m.t;
      if (rc.online) setStatus(`Synced · ${rc.latency} ms`, true);
    } else if (m.type === 'host-offline') {
      rc.online = false;
      setStatus('Screen offline — waiting…');
    }
  }
  function liveCur() {
    const s = rc.state;
    if (!s) return 0;
    const cur = s.paused ? s.cur : s.cur + (Date.now() - rc.stateAt) / 1000;
    return Math.min(cur, s.dur || cur);
  }
  function renderRemote() {
    const s = rc.state;
    const v = s && s.v;
    $('rvTitle').textContent = v ? v.title : 'Nothing playing';
    $('rvChannel').textContent = v ? v.channel : '';
    let directPlay = $('rvDirectPlay');
    if (!directPlay) { directPlay = document.createElement('button'); directPlay.id = 'rvDirectPlay'; directPlay.className = 'np-btn'; directPlay.style.minHeight = '44px'; directPlay.innerHTML = TransportIcons.svg('play') + ' Play here from paired screen'; $('rvChannel').after(directPlay); }
    directPlay.hidden = !v || !s.directAvailable || !DirectMedia.enabled();
    directPlay.onclick = () => v && playVideoAt({ ...v, duration: s.dur || 0 }, liveCur());
    const thumb = $('rvThumb');
    if (v && v.thumbnail) { if (thumb.getAttribute('src') !== v.thumbnail) thumb.src = v.thumbnail; thumb.classList.remove('hidden'); }
    else thumb.classList.add('hidden');
    TransportIcons.set($('rvToggle'), s && !s.paused ? 'pause' : 'play');
    $('rvDur').textContent = clock((s && s.dur) || 0);
    if (!rc.volTimer && document.activeElement !== $('rvVolume')) {
      const pct = Math.round(((s && s.volume) ?? 1) * 100);
      $('rvVolume').value = String(pct);
      $('rvVolVal').textContent = pct + '%';
    }
    const sleepMin = s && s.sleep ? Math.ceil(s.sleep / 60) : 0;
    $('rvSleep').textContent = sleepMin ? `⏱ ${sleepMin} min` : '⏱ Sleep';
    $('rvSleep').classList.toggle('on', !!sleepMin);
    $('rvService').classList.toggle('on', !!(s && s.service));
    renderSeek();
  }
  function renderSeek() {
    if (rc.seeking || !rc.open) return;
    const s = rc.state;
    const cur = liveCur();
    $('rvCur').textContent = clock(cur);
    $('rvSeek').value = s && s.dur ? String(Math.round((cur / s.dur) * 1000)) : '0';
  }
  function renderQueue() {
    const q = rc.queue || { items: [], idx: -1 };
    const up = q.items.map((v, i) => ({ ...v, i })).filter((v) => v.i > q.idx);
    $('rvQueueCount').textContent = up.length ? `${up.length} song${up.length === 1 ? '' : 's'}` : '';
    const list = $('rvQueue');
    list.innerHTML = up.length ? up.map((v) => `
      <div class="rv-row" data-i="${v.i}">
        <span class="rv-handle" aria-label="Drag to reorder">⠿</span>
        <div class="rv-row-text">
          <div class="rv-row-title">${escapeHtml(v.title)}</div>
          <div class="rv-row-sub">${escapeHtml(v.channel)}</div>
        </div>
        <span class="rv-row-dur">${v.duration ? clock(v.duration) : ''}</span>
        <button class="rv-row-x" type="button" data-rm="${v.i}" aria-label="Remove">✕</button>
      </div>`).join('') : '<div class="rv-empty">Nothing queued after this song.</div>';
  }
  // ---- drag to reorder (pointer events, works for touch + mouse) ----
  function onDragStart(e) {
    const handle = e.target.closest('.rv-handle');
    if (!handle) return;
    const row = handle.closest('.rv-row');
    e.preventDefault();
    const rows = [...$('rvQueue').querySelectorAll('.rv-row')];
    rc.drag = { row, rows, startY: e.clientY, from: Number(row.dataset.i), to: Number(row.dataset.i), h: row.offsetHeight };
    row.classList.add('dragging');
    row.setPointerCapture(e.pointerId);
    row.addEventListener('pointermove', onDragMove);
    row.addEventListener('pointerup', onDragEnd, { once: true });
    row.addEventListener('pointercancel', onDragEnd, { once: true });
  }
  function onDragMove(e) {
    const d = rc.drag;
    if (!d) return;
    const dy = e.clientY - d.startY;
    d.row.style.transform = `translateY(${dy}px)`;
    const pos = d.rows.indexOf(d.row);
    const target = Math.max(0, Math.min(d.rows.length - 1, pos + Math.round(dy / d.h)));
    d.to = Number(d.rows[target].dataset.i);
  }
  function onDragEnd() {
    const d = rc.drag;
    rc.drag = null;
    if (!d) return;
    d.row.removeEventListener('pointermove', onDragMove);
    d.row.classList.remove('dragging');
    d.row.style.transform = '';
    if (d.to !== d.from) {
      // Optimistic: reorder locally now, the host's queue push confirms it.
      const items = rc.queue.items.slice();
      const [v] = items.splice(d.from, 1);
      items.splice(d.to, 0, v);
      rc.queue = { ...rc.queue, items };
      renderQueue();
      cmd('move', { from: d.from, to: d.to });
    }
  }
  // ---- add to queue: search sheet ----
  function openAddSheet() {
    const body = document.createElement('div');
    body.className = 'rv-add';
    body.innerHTML = `
      <form class="rv-add-form"><input class="rv-add-q" type="search" placeholder="Search YouTube…" /><button class="np-btn" type="submit">Search</button></form>
      <div class="rv-add-results"></div>`;
    const results = body.querySelector('.rv-add-results');
    let found = [];
    body.querySelector('form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const q = body.querySelector('.rv-add-q').value.trim();
      if (!q) return;
      results.innerHTML = '<div class="rv-empty">Searching…</div>';
      try {
        const res = await API.search(q);
        found = (res && res.ok && res.results) || [];
      } catch { found = []; }
      results.innerHTML = found.length ? found.slice(0, 20).map((v, i) => `
        <button class="rv-add-item" type="button" data-k="${i}">
          <img src="${escapeHtml(v.thumbnail || '')}" alt="" loading="lazy" decoding="async" />
          <span><b>${escapeHtml(v.title || '')}</b><small>${escapeHtml(v.channel || '')}${v.duration ? ' · ' + clock(v.duration) : ''}</small></span>
        </button>`).join('') : '<div class="rv-empty">No results.</div>';
    });
    results.addEventListener('click', (e) => {
      const b = e.target.closest('[data-k]');
      if (!b) return;
      const v = found[Number(b.dataset.k)];
      if (!v) return;
      cmd('add', { video: { id: v.id, title: v.title, channel: v.channel, duration: v.duration, thumbnail: v.thumbnail } });
      b.classList.add('added');
      toast(`Added “${v.title}”`);
    });
    showModal('＋ Add to the screen’s queue', body, [{ label: 'Done', primary: true, onClick: closeModal }]);
    setTimeout(() => body.querySelector('.rv-add-q').focus(), 50);
  }
  async function doPair(codeRaw) {
    const code = String(codeRaw || '').replace(/\D/g, '');
    const name = $('rvName').value.trim() || guessName('Phone');
    if (code.length !== 6) { $('rvPairMsg').textContent = 'Enter the 6-digit code from the screen.'; return; }
    $('rvPairMsg').textContent = 'Pairing…';
    try {
      const res = await fetch('/api/remote/pair', {
        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code, name }),
      });
      const j = await res.json().catch(() => null);
      if (!j || !j.ok) { $('rvPairMsg').textContent = '⚠ ' + ((j && j.error) || `HTTP ${res.status}`); return; }
      save(PAIR_KEY, { roomId: j.roomId, remoteId: j.remoteId, token: j.token, hostName: j.hostName, name: j.name });
      $('rvCode').value = '';
      rcConnect();
    } catch {
      $('rvPairMsg').textContent = '⚠ Network error — try again';
    }
  }
  async function openRemoteView({ code = '' } = {}) {
    try { await Lazy.load('feature:direct'); } catch(error) { toast(error.message); return; }
    rc.open = true;
    rc.seekTimer = VisibleTimer.setIntervalWhenVisible(renderSeek, 500);
    // This phone is the remote now — don't also play here.
    try { if (Player.master && !Player.master.paused) Player.pause(); } catch { /* nothing loaded */ }
    $('remoteView').classList.remove('hidden');
    document.body.classList.add('remote-open');
    if (code) { save(PAIR_KEY, null); showPairForm(); $('rvCode').value = code; doPair(code); return; }
    if (load(PAIR_KEY)) rcConnect(); else showPairForm();
  }
  function closeRemoteView() {
    rc.open = false;
    rc.seekTimer?.clear();
    rc.seekTimer = null;
    clearTimeout(rc.retry);
    clearInterval(rc.ping);
    const ws = rc.ws;
    rc.ws = null;
    try { if (ws) ws.close(); } catch { /* gone */ }
    $('remoteView').classList.add('hidden');
    document.body.classList.remove('remote-open');
  }
  function openChooser() {
    const hosting = hostCfg().enabled;
    const paired = load(PAIR_KEY);
    const body = document.createElement('div');
    body.innerHTML = `<p class="modal-text">Play on a computer hooked to the TV or speakers, and drive it from your phone.</p>`;
    showModal('📱 Remote', body, [
      { label: paired ? `Control “${paired.hostName}”` : 'Use this phone as a remote', onClick: () => { closeModal(); openRemoteView(); } },
      { label: hosting ? 'This screen: remote on' : 'Control this screen from a phone', primary: true, onClick: () => { closeModal(); openHostModal(); } },
    ]);
  }
  function bindUi() {
    $('rvClose').addEventListener('click', closeRemoteView);
    $('rvMenu').addEventListener('click', () => {
      const p = load(PAIR_KEY);
      showModal('Remote options', document.createTextNode(p ? `Paired with “${p.hostName}”.` : 'Not paired.'), [
        { label: 'Close', onClick: closeModal },
        ...(p ? [{ label: 'Unpair this phone', danger: true, onClick: () => { closeModal(); save(PAIR_KEY, null); try { rc.ws && rc.ws.close(); } catch { /* gone */ } showPairForm('Unpaired.'); } }] : []),
      ]);
    });
    $('rvPairBtn').addEventListener('click', () => doPair($('rvCode').value));
    $('rvCode').addEventListener('keydown', (e) => { if (e.key === 'Enter') doPair($('rvCode').value); });
    $('rvToggle').addEventListener('click', () => {
      cmd('toggle');
      if (rc.state) { rc.state.cur = liveCur(); rc.stateAt = Date.now(); rc.state.paused = !rc.state.paused; renderRemote(); }
    });
    $('rvPrev').addEventListener('click', () => cmd('prev'));
    $('rvNext').addEventListener('click', () => cmd('next'));
    const seek = $('rvSeek');
    seek.addEventListener('input', () => {
      rc.seeking = true;
      const dur = (rc.state && rc.state.dur) || 0;
      $('rvCur').textContent = clock((Number(seek.value) / 1000) * dur);
    });
    seek.addEventListener('change', () => {
      const dur = (rc.state && rc.state.dur) || 0;
      const t = (Number(seek.value) / 1000) * dur;
      cmd('seek', { t });
      if (rc.state) { rc.state.cur = t; rc.stateAt = Date.now(); }
      rc.seeking = false;
    });
    $('rvVolume').addEventListener('input', (e) => {
      const pct = Number(e.target.value);
      $('rvVolVal').textContent = pct + '%';
      clearTimeout(rc.volTimer);
      rc.volTimer = setTimeout(() => { rc.volTimer = null; cmd('volume', { v: pct / 100 }); }, 120);
    });
    $('rvQueue').addEventListener('pointerdown', onDragStart);
    $('rvQueue').addEventListener('click', (e) => {
      const rm = e.target.closest('[data-rm]');
      if (rm) { cmd('remove', { i: Number(rm.dataset.rm) }); return; }
      if (e.target.closest('.rv-handle')) return;
      const row = e.target.closest('.rv-row');
      if (row) cmd('jump', { i: Number(row.dataset.i) });
    });
    $('rvAdd').addEventListener('click', openAddSheet);
    $('rvSleep').addEventListener('click', () => {
      const options = [0, 15, 30, 45, 60, 90];
      const curMin = rc.state && rc.state.sleep ? Math.ceil(rc.state.sleep / 60) : 0;
      const next = options.find((o) => o > curMin) ?? 0;
      cmd('sleep', { min: next });
      toast(next ? `Screen pauses in ${next} min` : 'Sleep timer off');
    });
    $('rvService').addEventListener('click', () => cmd('service', { on: !(rc.state && rc.state.service) }));
    // Hosts keep phones current once a second while anything plays.
    setInterval(() => { if (host.ws && host.remotes.length) { pushState(); pushQueue(); } }, 1000);
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible' && rc.open && !rc.ws) rcConnect();
    });
  }
  function boot() {
    bindUi();
    if (hostCfg().enabled) hostConnect();
    // A scanned QR / shared link: /?pair=482913
    let code = '';
    try { code = (new URLSearchParams(location.search).get('pair') || '').replace(/\D/g, ''); } catch { /* no URL */ }
    if (code) {
      try {
        const u = new URL(location.href);
        u.searchParams.delete('pair');
        history.replaceState(null, '', u.pathname + u.search + u.hash);
      } catch { /* leave the URL */ }
      openRemoteView({ code });
    }
  }
  return { boot, changed, openChooser, openHostModal };
 })();
--- a/frontend/saved-page.css
+++ b/frontend/saved-page.css
@@ -2,9 +2,10 @@
 .saved-storage-text { min-width:0; color:var(--text-2); font-size:14px; font-variant-numeric:tabular-nums; }
 .saved-clear { flex:none; min-height:44px; padding:0 10px; border:0; background:transparent; color:var(--accent); font:inherit; cursor:pointer; }
 html[data-layout] .card.saved-card { display:grid; grid-template-columns:72px minmax(0,1fr) 96px; align-items:center; gap:12px; min-height:88px; }
-html[data-layout] .saved-card .thumb { grid-column:1; grid-row:1; width:72px; }
+html[data-layout] #cards .saved-card .thumb { grid-column:1; grid-row:1; width:100%; min-width:0; max-width:100%; flex:none; overflow:hidden; }
 html[data-layout] #cards .saved-card .thumb img { width:100%; max-width:100%; height:100%; object-fit:cover; }
 html[data-layout] .saved-card .card-info { grid-column:2; grid-row:1; min-width:0; }
-html[data-layout] .saved-card .card-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
+html[data-layout] .saved-card .card-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; text-overflow:ellipsis; }
 html[data-layout] .saved-file-actions { grid-column:3; grid-row:1; display:flex; align-items:center; gap:8px; }
 .saved-file-action { width:44px; height:44px; min-width:44px; padding:10px; border:1px solid var(--line); border-radius:var(--radius-sm,8px); background:var(--bg-2); color:var(--text-2); cursor:pointer; }
 .saved-file-action svg { display:block; width:22px; height:22px; }
@@ -13,4 +14,4 @@ html[data-layout] .saved-file-actions { grid-column:3; grid-row:1; display:flex;
 .saved-file-action.danger:hover, .saved-clear:hover { color:var(--accent); }
 .saved-file-action:focus-visible, .saved-clear:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
 .saved-file-action:disabled, .saved-clear:disabled { opacity:.5; cursor:wait; }
-@media(min-width:900px) { html[data-layout] .card.saved-card { grid-template-columns:88px minmax(0,1fr) 96px; } html[data-layout] .saved-card .thumb { width:88px; } }
+@media(min-width:900px) { html[data-layout] .card.saved-card { grid-template-columns:88px minmax(0,1fr) 96px; } }
--- a/frontend/saved-page.js
+++ b/frontend/saved-page.js
@@ -3,14 +3,14 @@
  'use strict';
  const matches = (video, query) => !query || `${video.title || video.id} ${video.channel || ''}`.toLowerCase().includes(query.toLowerCase());
  const paths = {
-    export: '<path d="M12 3v12m-5-5 5 5 5-5M4 17v4h16v-4"/>',
+    export: '<use href="#media-download"/>',
    delete: '<path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6"/>'
  };
  function button(doc, kind, label, action) {
    const b = doc.createElement('button'); b.type = 'button';
    b.className = `saved-file-action${kind === 'delete' ? ' danger' : ''}`;
    b.setAttribute('aria-label', label); b.title = label;
-    b.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[kind]}</svg>`;
+    b.innerHTML = `<svg class="media-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[kind]}</svg>`;
    b.onclick = e => { e.stopPropagation(); action(); }; return b;
  }
  function actions(row, video, exportFile, deleteFile) {
--- a/frontend/section-rail.js
+++ b/frontend/section-rail.js
@@ -0,0 +1,321 @@
 /* Eager UI definitions. Read app lexical state only when called after initialization. */
 const SectionRail = (() => {
  const CLASSIC_ICONS = {
    player: '<rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8m-4-4v4"/>',
    meta: '<path d="M9 18V5l11-2v13M9 8l11-2"/><ellipse cx="6" cy="18" rx="3" ry="2"/><ellipse cx="17" cy="16" rx="3" ry="2"/>',
    notes: '<path d="M14 3H4v18h16V11M9 15l2-5 7-7 3 3-7 7z"/>',
    related: '<path d="m10 14 4-4m-5 6-1 1a4 4 0 0 1-6-6l4-4a4 4 0 0 1 6 0m0 10a4 4 0 0 0 6 0l4-4a4 4 0 0 0-6-6l-1 1"/>',
    list: '<path d="M9 6h12M9 12h12M9 18h12M3 6h1M3 12h1M3 18h1"/>',
  };
  const SECTIONS = [
    { id: 'player',  sel: '.player-stage',   icon: '📺', label: 'Player' },
    { id: 'meta',    sel: '#nowPlayingMeta', icon: '🎵', label: 'Now playing', fold: true },
    { id: 'notes',   sel: '#notesPanel',     icon: '📝', label: 'Lyrics',      fold: true },
    { id: 'related', sel: '#relatedPanel',   icon: '🔗', label: 'Related',     fold: true },
    { id: 'list',    sel: '#listPane',       icon: '📋', label: 'List' },
  ];
  const st = { active: '', btns: new Map(), labelTimer: null, raf: 0, bottom: -1 };
  const rail = () => document.getElementById('sectionRail');
  const folds = () => (data.settings.foldedCards ||= {});
  const isFolded = (id) => !!folds()[id];
  const elOf = (s) => document.querySelector(s.sel);
  // Only cards that are actually on screen belong in the rail.
  const visible = () => SECTIONS.filter((s) => {
    const el = elOf(s);
    return el && !el.classList.contains('hidden') && el.offsetParent !== null;
  });
  function applyFold(sec) {
    const el = elOf(sec);
    if (!el || !sec.fold) return;
    el.classList.toggle('folded', isFolded(sec.id));
    if (sec.id === 'notes') {
      const b = document.getElementById('notesFoldBtn');
      if (b) b.setAttribute('aria-expanded', String(!isFolded(sec.id)));
    }
    // The Related card already had its own +/− button; keep the two in step.
    if (sec.id === 'related') {
      relatedCollapsed = isFolded(sec.id);
      const rl = document.getElementById('relatedList');
      const rb = document.getElementById('relatedToggleBtn');
      if (rl) rl.classList.toggle('hidden', relatedCollapsed);
      if (rb) rb.textContent = relatedCollapsed ? '+' : '−';
    }
  }
  function setFolded(id, on) {
    const sec = SECTIONS.find((x) => x.id === id);
    if (!sec || !sec.fold) return;
    folds()[id] = !!on;
    persist();
    applyFold(sec);
    paint();   // NOT render() — folding a card must not rebuild the list
  }
  function flashLabel(btn) {
    clearTimeout(st.labelTimer);
    [...st.btns.values()].forEach((b) => b.classList.remove('show-label'));
    btn.classList.add('show-label');
    st.labelTimer = setTimeout(() => btn.classList.remove('show-label'), 1400);
  }
  function onTap(sec, btn) {
    const el = elOf(sec);
    if (!el) return;
    flashLabel(btn);
    if (sec.id === 'player' || sec.id === 'meta') restoreNowPlayingList();
    if (st.active === sec.id && sec.fold) {
      // Already here: this is the second tap — fold or unfold the card.
      setFolded(sec.id, !isFolded(sec.id));
      if (isFolded(sec.id)) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
      return;
    }
    st.active = sec.id;           // claim it now so the next tap folds
    paint();
    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
  function build() {
    const r = rail();
    if (!r) return;
    const items = visible();
    // A rail with one entry is noise; so is one on the empty home screen.
    if (items.length < 2) { r.classList.add('hidden'); r.innerHTML = ''; st.btns.clear(); return; }
    const key = items.map((s) => s.id).join(',');
    if (r.dataset.key !== key) {
      r.dataset.key = key;
      r.innerHTML = '';
      st.btns.clear();
      for (const sec of items) {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'sec-rail-btn';
        btn.dataset.sec = sec.id;
        btn.setAttribute('aria-label', sec.label);
        btn.innerHTML = `<span class="legacy-nav-icon" aria-hidden="true">${sec.icon}</span><svg class="classic-nav-icon" hidden viewBox="0 0 24 24" aria-hidden="true">${CLASSIC_ICONS[sec.id]}</svg><span class="sec-rail-label">${escapeHtml(sec.label)}</span>`;
        btn.addEventListener('click', () => onTap(sec, btn));
        r.appendChild(btn);
        st.btns.set(sec.id, btn);
      }
    }
    r.classList.remove('hidden');
    placeRail();
    paint();
  }
  // The page does NOT scroll the document: `.player-pane` is the scroller in
  // the browser, but the installed PWA in portrait scrolls `.body` instead
  // (`.player-pane` goes overflow:visible there). So find the real scroller
  // rather than assuming one.
  function scrollerOf(el) {
    for (let e = el && el.parentElement; e; e = e.parentElement) {
      const cs = getComputedStyle(e);
      if (/(auto|scroll)/.test(cs.overflowY) && e.scrollHeight > e.clientHeight + 4) return e;
    }
    return document.scrollingElement || document.documentElement;
  }
  // The visible box to measure against — the scroller's own rect, or the
  // window when the document itself scrolls.
  function viewBox() {
    const first = elOf(visible()[0] || SECTIONS[0]);
    const sc = scrollerOf(first);
    if (!sc || sc === document.scrollingElement || sc === document.documentElement) {
      return { top: 0, height: window.innerHeight };
    }
    const r = sc.getBoundingClientRect();
    return { top: r.top, height: r.height };
  }
  // Which card is the reader looking at? The one whose top is closest to a
  // line a third of the way down the visible box — steadier than "first
  // visible", which flickers between two cards at a boundary.
  function currentId() {
    const items = visible();
    if (!items.length) return '';
    const box = viewBox();
    const line = box.top + box.height / 3;
    let best = '', bestD = Infinity;
    let near = items[0].id, nearD = Infinity;   // fallback: closest card overall
    for (const sec of items) {
      const el = elOf(sec);
      if (!el) continue;
      const r = el.getBoundingClientRect();
      const d = Math.abs(r.top - line);
      // Distance to the visible band, for the fallback below.
      const outside = Math.max(box.top - r.bottom, r.top - (box.top + box.height), 0);
      if (outside < nearD || (outside === nearD && d < bestD)) { nearD = outside; near = sec.id; }
      if (r.bottom < box.top || r.top > box.top + box.height) continue;
      if (d < bestD) { bestD = d; best = sec.id; }
    }
    // Scrolled past the last card (or a card is taller than the viewport and
    // its top has gone by): never leave the rail with nothing highlighted.
    return best || near;
  }
  // The mini player and the bottom nav are both position:fixed bottom:0, and
  // either can be absent (nothing playing / landscape). Measure whatever is
  // actually pinned down there and park the rail above it, rather than
  // guessing an offset that is wrong on the next phone.
  function placeRail() {
    const r = rail();
    let occupied = 0;
    for (const id of ['bottomNav', 'miniBar']) {
      const el = document.getElementById(id);
      if (!el || el.classList.contains('hidden')) continue;
      const box = el.getBoundingClientRect();
      if (!box.height) continue;
      if (getComputedStyle(el).position !== 'fixed') continue;
      // Count any fixed bar sitting in the lower half. It must NOT be required
      // to touch the viewport bottom: on an iPhone XR the bottom nav ends
      // above the home-indicator gap, so a "bottom >= innerHeight" test missed
      // it entirely and the rail was parked underneath it.
      if (box.top > window.innerHeight * 0.5) occupied = Math.max(occupied, window.innerHeight - box.top);
    }
    // 14px was too tight: the mini player is a floating CARD with a shadow and
    // rounded corners, so its visual edge reads higher than its box.
    const want = Math.round(occupied + 24);
    if (st.bottom !== want) {
      st.bottom = want;
      if (r) r.style.setProperty('--rail-bottom', want + 'px');
      // Published for anything else that must sit above the bottom bars —
      // the watch-party panel's leave button was hidden behind them.
      document.documentElement.style.setProperty('--bottom-chrome', Math.round(occupied) + 'px');
    }
  }
  function paint() {
    for (const [id, btn] of st.btns) {
      btn.classList.toggle('active', id === st.active);
      btn.classList.toggle('folded', isFolded(id));
    }
  }
  function onScroll() {
    if (st.raf) return;
    st.raf = requestAnimationFrame(() => {
      st.raf = 0;
      // Panels appear and disappear outside render() too (the Related card
      // shows once a video's related list arrives), and a card with no icon
      // would leave the rail with nothing highlighted. build() is a no-op
      // unless the set of visible cards actually changed.
      build();
      placeRail();
      const id = currentId();
      if (id && id !== st.active) { st.active = id; paint(); }
    });
  }
  function boot() {
    const fb = document.getElementById('notesFoldBtn');
    if (fb) fb.addEventListener('click', () => setFolded('notes', !isFolded('notes')));
    SECTIONS.forEach(applyFold);
    // Scroll events from an element do NOT bubble, so a window listener never
    // fires here. A capture-phase listener on document catches them all, and
    // keeps working when the scroller changes between browser and installed
    // PWA (different elements scroll in each).
    document.addEventListener('scroll', onScroll, { passive: true, capture: true });
    window.addEventListener('resize', () => { build(); placeRail(); onScroll(); });
    // The mini player appears AFTER the scroll that reveals it, so a scroll
    // handler alone measures the layout as it was a moment ago and parks the
    // rail underneath it. Watch the two bottom bars for real.
    const watch = ['bottomNav', 'miniBar'].map((id) => document.getElementById(id)).filter(Boolean);
    if (watch.length && typeof MutationObserver !== 'undefined') {
      // The mini bar slides in over 0.25s, so a measurement taken the instant
      // it appears catches it mid-animation and lands the rail a few pixels
      // too low. Measure now and again once it has settled.
      const mo = new MutationObserver(() => { placeRail(); setTimeout(placeRail, 320); });
      watch.forEach((el) => mo.observe(el, { attributes: true, attributeFilter: ['class', 'style'] }));
    }
    if (watch.length && typeof ResizeObserver !== 'undefined') {
      const ro = new ResizeObserver(() => placeRail());
      watch.forEach((el) => ro.observe(el));
    }
    build();
    onScroll();
  }
  // Called from render(): cards appear and disappear as videos load.
  function refresh() {
    SECTIONS.forEach(applyFold);
    build();
    placeRail();
    onScroll();
  }
  return { boot, refresh, setFolded, isFolded };
 })();
 /* Cache the single page-owned app response before it registers the worker. */
 (function (root) {
  'use strict';
  const doc=root.document, manifest=root.Lazy.manifest, key=root.Lazy.url('/app.js');
  let domReady=doc.readyState==='complete', appSawDom=false;
  doc.addEventListener('DOMContentLoaded',()=>{domReady=true;appSawDom=typeof root.boot==='function';},{once:true});
  function execute(node) {
    doc.head.append(node);
    node.remove();
    delete root.Lazy.appResponse;
    // app.js keeps its original DOMContentLoaded listener. Async response
    // consumption can finish after that event; boot exactly once in that case.
    if(domReady)root.boot();
  }
  async function external(url) {
    await new Promise((resolve,reject)=>{
      const node=doc.createElement('script');node.src=url;
      node.onload=()=>{if(domReady&&!appSawDom)root.boot();resolve();};node.onerror=()=>reject(Error('Unable to load player'));
      doc.head.append(node);
    });
  }
  function native() {
    if(doc.readyState!=='loading' || !doc.currentScript)return external(key);
    return new Promise((resolve,reject)=>{
      doc.addEventListener('DOMContentLoaded',()=>typeof root.boot==='function'?resolve():reject(Error('Unable to load player')),{once:true});
      const escaped=key.replaceAll('&','&amp;').replaceAll('"','&quot;').replaceAll('<','&lt;');
      doc.write('<script src="'+escaped+'"></script>');
    });
  }
  async function verified(response, expected) {
    const bytes=await response.clone().arrayBuffer();
    const digest=new Uint8Array(await root.crypto.subtle.digest('SHA-256',bytes));
    const hex=Array.from(digest,b=>b.toString(16).padStart(2,'0')).join('');
    if(hex.slice(0,10)!==expected)throw Error('Player body hash mismatch');
    return {bytes,digest};
  }
  async function start() {
    if(!manifest.appCache || !root.crypto?.subtle || !root.Lazy.captureApp)return native();
    const expected=manifest.files['/app.js'].h;
    let cache;
    try { cache=await root.caches?.open('ytplayer-assets'); } catch {}
    let response=await cache?.match(key);
    if(!response || response.headers.get('X-Asset-Hash')!==expected) {
      try { response=await (root.Lazy.appResponse || root.fetch(key,{credentials:'same-origin'})); } catch {}
    }
    if(!response?.ok || response.headers.get('X-Asset-Hash')!==expected) {
      // Preserve staged N-1 boot after an individual cache eviction. Only the
      // controller can serve this old URL safely; never fetch stale URLs bare.
      const state=cache && await root.AssetSyncCore.state(cache);
      const previousKey=state && root.AssetSyncCore.fallback(manifest,state.previous,'/app.js');
      const previous=previousKey && await cache.match(previousKey);
      const previousHash=state?.previous?.files['/app.js']?.h;
      const contractsMatch=state?.previous && Object.entries(manifest.groups).every(([name,group])=>state.previous.groups[name]?.contract===group.contract);
      if(contractsMatch && root.navigator?.serviceWorker?.controller && previous?.ok && previous.headers.get('X-Asset-Hash')===previousHash) {
        await verified(previous,previousHash);
        delete root.Lazy.appResponse;
        return external(previousKey);
      }
      throw Error('Player asset hash mismatch');
    }
    const {bytes,digest}=await verified(response,expected);
    const permission="'sha256-"+root.btoa(String.fromCharCode(...digest))+"'";
    if(!doc.querySelector('meta[http-equiv="Content-Security-Policy"]').content.includes(permission))throw Error('Player body hash mismatch');
    // CacheStorage may share a full quota with saved music. Never remove data
    // to make room; boot from these verified bytes even if caching is refused.
    try { await cache?.put(key,response); } catch(error) { root.console.warn('[app-cache]',error.message); }
    const node=doc.createElement('script');node.textContent=new root.TextDecoder().decode(bytes);
    execute(node);
  }
  const ready=start();
  root.AppBootstrap={ready};
  ready.catch(error=>root.console.error('[app-cache]',error.message));
 })(typeof window!=='undefined'?window:globalThis);
--- a/frontend/settings-persist.test.js
+++ b/frontend/settings-persist.test.js
@@ -0,0 +1,34 @@
 const test = require('node:test');
 const assert = require('node:assert/strict');
 const fs = require('node:fs');
 const vm = require('node:vm');
 const source = fs.readFileSync(__dirname + '/app.js', 'utf8');
 // Exercise the production persistence/profile functions without starting a DOM player.
 const declaration = name => source.match(new RegExp('(?:async )?function ' + name + '\\([^]*?\\n}'))[0];
 function fixture(updatedAt) {
  const settings = { saveBeforePlay: true, autoPreload: true, layout: 'f7-swipe', eq: { preset: 'custom', g: [1,2,3,4,5] } };
  const context = vm.createContext({ WEB: true, data: { settings, profile: { name: 'test', syncedAt: 200 } }, DEFAULT_SETTINGS: { saveBeforePlay: false, autoPreload: true, layout: 'classic' }, API: { saveData: async () => {} }, profileHeaders: () => ({}), scheduleProfilePush: () => context.pushes++, pushes: 0, fetch: async () => ({ status: 200, json: async () => ({ ok: true, name: 'test', updatedAt, data: { settings: { saveBeforePlay: false } } }) }), localStorage: { getItem: () => JSON.stringify({ settings }) } });
  vm.runInContext([declaration('loadDataFromStorage'), declaration('applyProfileData'), declaration('pullProfileIfNewer')].join('\n'), context);
  return context;
 }
 test('stored settings load verbatim instead of reverting to defaults', () => {
  const c = fixture(100);
  const loaded = vm.runInContext('loadDataFromStorage()', c);
  assert.equal(loaded.settings.saveBeforePlay, true);
  assert.equal(loaded.settings.layout, 'f7-swipe');
  assert.deepEqual(JSON.parse(JSON.stringify(loaded.settings.eq.g)), [1,2,3,4,5]);
 });
 for (const updatedAt of [100,200]) test(`profile timestamp ${updatedAt} cannot overwrite local settings synced at 200`, async () => {
  const c = fixture(updatedAt), previous = c.data.settings;
  await vm.runInContext('pullProfileIfNewer()', c);
  assert.equal(c.data.settings, previous);
  assert.equal(c.pushes, 1);
 });
 test('newer profile intentionally replaces settings and restores missing defaults', async () => {
  const c = fixture(300);
  await vm.runInContext('pullProfileIfNewer()', c);
  assert.equal(c.data.settings.saveBeforePlay, false);
  assert.equal(c.data.settings.autoPreload, true);
  assert.equal(c.data.settings.layout, 'classic');
  assert.equal(c.data.profile.syncedAt, 300);
 });
--- a/frontend/settings-sections.js
+++ b/frontend/settings-sections.js
@@ -24,7 +24,8 @@
  const icon = paths => `<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${paths || '<circle cx="12" cy="12" r="7"/>'}</svg>`;
  function mount(host, context = {}) {
    dispose();
-    const document = host.ownerDocument, win = document.defaultView, sections = registry.list(), panels = new Map(), rows = new Map(), cleanups = [];
+    const document = host.ownerDocument, win = document.defaultView, sections = registry.list(), panels = new Map(), rows = new Map(), cleanups = [], searchLoads = new Set();
    let mounted = true;
    let remembered = ''; try { remembered = win.sessionStorage.getItem('ytpSettingsSection') || ''; } catch {}
    let active = registry.get(remembered) ? remembered : sections[0]?.id;
    host.classList.add('settings-browser');
@@ -45,14 +46,23 @@
        const text = document.createElement('span'), title = document.createElement('b'), summary = document.createElement('small'); title.textContent = section.title; text.append(title, summary); button.append(text);
        button.setAttribute('aria-controls', 'settings-section-' + section.id); navigation.append(button); rows.set(section.id, { button, summary });
        const panel = document.createElement('section'); panel.id = 'settings-section-' + section.id; panel.className = 'settings-section'; panel.setAttribute('aria-label', section.title); panels.set(section.id, panel); detail.append(panel);
-        const cleanup = section.render(panel, context); if (typeof cleanup === 'function') cleanups.push(cleanup);
+        if (!section.lazyGroup) {
          const cleanup = section.render(panel, context); if (typeof cleanup === 'function') cleanups.push(cleanup);
        }
        button.addEventListener('click', () => open(section.id));
        if(section.lazyGroup)root.Lazy.intent(button,section.lazyGroup);
      }
    }
    grid.append(navigation, detail); host.replaceChildren(toolbar, results, empty, grid);
    function summaries() { for (const section of sections) { try { rows.get(section.id).summary.textContent = section.summary(context) || ''; } catch {} } }
    function show(id, inDetail, focusId) {
      if (registry.get(id)) active = id;
      const section = sections.find(section => section.id === active);
      const panel = panels.get(active);
      if ((inDetail || win.matchMedia?.('(min-width: 861px)').matches) && section?.lazyGroup && !panel.dataset.rendered) {
        panel.dataset.rendered = '1';
        const cleanup = section.render(panel, context); if (typeof cleanup === 'function') cleanups.push(cleanup);
      }
      host.dataset.detail = inDetail ? '1' : '0';
      for (const [key, panel] of panels) panel.hidden = key !== active;
      for (const [key, row] of rows) row.button.setAttribute('aria-current', key === active ? 'true' : 'false');
@@ -71,6 +81,19 @@
    function filter() {
      const query = input.value.trim(); results.replaceChildren(); results.hidden = !query; grid.hidden = !!query;
      if (!query) { empty.hidden = true; return; }
      // Searching is explicit feature intent. Mount optional controls so their
      // existing labels/help remain searchable without parsing them on opening Settings.
      for (const section of sections) {
        const panel=panels.get(section.id);
        if(!section.lazyGroup || panel.dataset.rendered || searchLoads.has(section.id))continue;
        searchLoads.add(section.id);
        root.Lazy.load(section.lazyGroup).then(()=>{
          if(!mounted || !host.isConnected || panel.dataset.rendered)return;
          panel.dataset.rendered='1';
          const cleanup=registry.get(section.id).render(panel,context);if(typeof cleanup==='function')cleanups.push(cleanup);
          filter();
        }).catch(()=>searchLoads.delete(section.id));
      }
      const entries = [];
      for (const section of sections) {
        entries.push({ title: section.title, description: section.description || '', section: section.id });
@@ -92,11 +115,11 @@
    const pop = event => { if (!host.isConnected) return; show(event.state?.ytpSettingsSection || active, !!event.state?.ytpSettingsSection); if (!event.state?.ytpSettingsSection) rows.get(active)?.button.focus({ preventScroll: true }); };
    win.addEventListener('popstate', pop); input.addEventListener('input', filter);
    host.addEventListener('change', summaries); host.addEventListener('input', summaries);
-    const observer = new win.MutationObserver(summaries); observer.observe(detail, { childList: true, subtree: true, characterData: true });
+    const observer = new win.MutationObserver(()=>{summaries();if(input.value.trim())filter();}); observer.observe(detail, { childList: true, subtree: true, characterData: true });
    const state = win.history.state?.ytpSettingsSection;
    if (!state) win.history.replaceState({ ...win.history.state, ytpSettingsSection: null }, '', win.location.href);
    show(state || active, !!state); summaries();
-    dispose = () => { observer.disconnect(); win.removeEventListener('popstate', pop); cleanups.forEach(fn => fn()); };
+    dispose = () => { mounted=false;observer.disconnect(); win.removeEventListener('popstate', pop); cleanups.forEach(fn => fn()); };
    return { open, refresh: summaries, dispose };
  }
  const api = { ...registry, mount, search, normalize, createRegistry, clusters };
--- a/frontend/sha256.js
+++ b/frontend/sha256.js
@@ -36,7 +36,7 @@
    wasm = null;
    try {
      if (typeof WebAssembly === 'undefined') return wasm;
-      if (!root.SHA256_WASM_B64 && typeof importScripts === 'function') importScripts('/sha256-wasm.js');
+      if (!root.SHA256_WASM_B64 && typeof importScripts === 'function') importScripts(root.__ASSET_URLS__?.wasm || '/sha256-wasm.js');
      let b64 = root.SHA256_WASM_B64;
      if (!b64 && typeof require === 'function') b64 = require('./sha256-wasm.js');
      if (!b64) return wasm;
--- a/frontend/share-external.js
+++ b/frontend/share-external.js
@@ -0,0 +1,221 @@
 /* Lazy classic chunk; its executing singleton stays pinned until reload. */
 (window.YT ||= {}).Share = (() => {
  const appLink = (id, t) => `${location.origin}/?v=${encodeURIComponent(id)}${t >= 1 ? `&t=${Math.floor(t)}` : ''}`;
  const ytLink = (id, t) => `https://youtu.be/${encodeURIComponent(id)}${t >= 1 ? `?t=${Math.floor(t)}` : ''}`;
  async function copy(text, label) {
    try { await navigator.clipboard.writeText(text); toast(`${label} copied ✓`); }
    catch { toast('Copy blocked — long-press the link to copy it'); }
  }
  function open() {
    const meta = current && current.meta;
    if (!meta || !meta.id || meta.custom) { toast('Play a YouTube video first'); return; }
    const t0 = Math.floor(Player.master.currentTime || 0);
    const body = document.createElement('div');
    body.className = 'share-moment';
    body.innerHTML = `
      <label class="sm-row">Moment <input class="sm-time" inputmode="decimal" value="${LyricsCore.fmtClock(t0)}" /></label>
      <div class="sm-links">
        <div class="sm-link"><span>This app</span><code class="sm-app"></code><button class="np-btn" type="button" data-act="app">Copy</button></div>
        ${isUploadId(meta.id) ? '' : '<div class="sm-link"><span>YouTube</span><code class="sm-yt"></code><button class="np-btn" type="button" data-act="yt">Copy</button></div>'}
      </div>
      <div class="sm-gif">
        <div class="sm-gif-controls">
          <label>GIF length <select class="sm-len"><option value="2">2 s</option><option value="3" selected>3 s</option><option value="5">5 s</option></select></label>
          <button class="np-btn" type="button" data-act="gif">🎞 Make GIF</button>
        </div>
        <div class="sm-gif-out"></div>
      </div>
      <div class="sm-gif sm-bite">
        <div class="sm-gif-controls">
          <label>🔔 Soundbite <input class="sm-b-start" inputmode="decimal" /></label>
          <label>to <input class="sm-b-end" inputmode="decimal" /></label>
          <select class="sm-b-fmt"><option value="mp3">MP3</option><option value="m4r">iPhone ringtone (.m4r)</option></select>
          <button class="np-btn" type="button" data-act="bite">Make</button>
        </div>
        <div class="sm-bite-out"></div>
      </div>`;
    const timeIn = body.querySelector('.sm-time');
    const cur = () => { const v = LyricsCore.parseStamp(timeIn.value); return v === null ? t0 : v; };
    const refresh = () => {
      body.querySelector('.sm-app').textContent = appLink(meta.id, cur());
      const yt = body.querySelector('.sm-yt');
      if (yt) yt.textContent = ytLink(meta.id, cur());
    };
    timeIn.addEventListener('input', refresh);
    timeIn.addEventListener('keydown', (e) => e.stopPropagation());
    refresh();
    // Soundbite range: the A-B loop when one is set, else the next 20 s.
    const bStart = abA !== null ? abA : t0;
    const bEnd = abB !== null && abB > bStart ? abB : bStart + 20;
    body.querySelector('.sm-b-start').value = LyricsCore.fmtClock(bStart);
    body.querySelector('.sm-b-end').value = LyricsCore.fmtClock(bEnd);
    body.querySelectorAll('.sm-bite input').forEach((i) => i.addEventListener('keydown', (e) => e.stopPropagation()));
    let biteBlob = null;
    let gifBlob = null;
    body.addEventListener('click', async (e) => {
      const act = e.target.closest('[data-act]');
      if (!act) return;
      if (act.dataset.act === 'app') copy(appLink(meta.id, cur()), 'App link');
      else if (act.dataset.act === 'yt') copy(ytLink(meta.id, cur()), 'YouTube link');
      else if (act.dataset.act === 'gif') {
        const out = body.querySelector('.sm-gif-out');
        out.innerHTML = '<div class="sm-busy">Making the GIF…</div>';
        act.disabled = true;
        try {
          const d = body.querySelector('.sm-len').value;
          const res = await fetch(`/api/media/${encodeURIComponent(meta.id)}/gif?t=${cur()}&d=${d}&w=480`);
          if (!res.ok) { const j = await res.json().catch(() => ({})); throw new Error(j.error || `HTTP ${res.status}`); }
          gifBlob = await res.blob();
          const url = URL.createObjectURL(gifBlob);
          const name = `${(meta.title || meta.id).replace(/[^\w\- ]+/g, '').trim().slice(0, 40) || meta.id}-${Math.floor(cur())}s.gif`;
          out.innerHTML = `<img class="sm-preview" alt="GIF preview" src="${url}" />
            <div class="sm-gif-actions"><a class="np-btn" href="${url}" download="${escapeHtml(name)}">${MediaIcons.svg('download')} Download</a>
            ${navigator.canShare && navigator.canShare({ files: [new File([gifBlob], name, { type: 'image/gif' })] }) ? '<button class="np-btn" type="button" data-act="sharegif">↗ Share GIF</button>' : ''}</div>`;
          out.dataset.name = name;
        } catch (err) {
          out.innerHTML = `<div class="sm-err">⚠ ${escapeHtml(err.message)}</div>`;
        } finally {
          act.disabled = false;
        }
      } else if (act.dataset.act === 'bite') {
        const out = body.querySelector('.sm-bite-out');
        const a = LyricsCore.parseStamp(body.querySelector('.sm-b-start').value);
        const b = LyricsCore.parseStamp(body.querySelector('.sm-b-end').value);
        const fmt = body.querySelector('.sm-b-fmt').value;
        const max = fmt === 'm4r' ? 40 : 60;
        if (a === null || b === null || b <= a) { out.innerHTML = '<div class="sm-err">⚠ Times must look like 1:23, end after start</div>'; return; }
        if (b - a > max) { out.innerHTML = `<div class="sm-err">⚠ Max ${max} s for ${fmt === 'm4r' ? 'an iPhone ringtone' : 'a soundbite'}</div>`; return; }
        out.innerHTML = '<div class="sm-busy">Cutting the soundbite…</div>';
        act.disabled = true;
        try {
          const res = await fetch(`/api/media/${encodeURIComponent(meta.id)}/clip?start=${a}&end=${b}&fmt=${fmt}`);
          if (!res.ok) { const j = await res.json().catch(() => ({})); throw new Error(j.error || `HTTP ${res.status}`); }
          biteBlob = await res.blob();
          const url = URL.createObjectURL(biteBlob);
          const name = `${(meta.title || meta.id).replace(/[^\w\- ]+/g, '').trim().slice(0, 40) || meta.id}-${Math.floor(a)}s.${fmt}`;
          out.dataset.name = name;
          out.dataset.type = fmt === 'mp3' ? 'audio/mpeg' : 'audio/mp4';
          out.innerHTML = `<audio controls src="${url}" class="sm-audio"></audio>
            <div class="sm-gif-actions"><a class="np-btn" href="${url}" download="${escapeHtml(name)}">${MediaIcons.svg('download')} Download</a>
            ${navigator.canShare && navigator.canShare({ files: [new File([biteBlob], name, { type: out.dataset.type })] }) ? '<button class="np-btn" type="button" data-act="sharebite">↗ Share</button>' : ''}</div>
            ${fmt === 'm4r' ? '<p class="sp-note">iPhone: share it to GarageBand (or drag into Finder with the phone connected) to set it as a ringtone.</p>' : ''}`;
        } catch (err) {
          out.innerHTML = `<div class="sm-err">⚠ ${escapeHtml(err.message)}</div>`;
        } finally {
          act.disabled = false;
        }
      } else if (act.dataset.act === 'sharebite' && biteBlob) {
        const o = body.querySelector('.sm-bite-out');
        try { await navigator.share({ files: [new File([biteBlob], o.dataset.name, { type: o.dataset.type })], title: meta.title }); } catch { /* dismissed */ }
      } else if (act.dataset.act === 'sharegif' && gifBlob) {
        const name = body.querySelector('.sm-gif-out').dataset.name;
        try { await navigator.share({ files: [new File([gifBlob], name, { type: 'image/gif' })], title: meta.title }); } catch { /* dismissed */ }
      }
    });
    const actions = [{ label: 'Done', onClick: closeModal }];
    if (navigator.share) {
      actions.push({ label: '↗ Share link', primary: true, onClick: async () => {
        try { await navigator.share({ title: meta.title, text: `${meta.title} @ ${LyricsCore.fmtClock(cur())}`, url: appLink(meta.id, cur()) }); } catch { /* dismissed */ }
      } });
    } else {
      actions.push({ label: 'Copy app link', primary: true, onClick: () => copy(appLink(meta.id, cur()), 'App link') });
    }
    showModal('🔗 Share this moment', body, actions);
  }
  // /?v=<id>&t=<sec> — open that video at that moment.
  async function bootFromUrl() {
    let id = '', t = 0;
    try {
      const q = new URLSearchParams(location.search);
      id = (q.get('v') || '').trim();
      t = Math.max(0, parseFloat(q.get('t')) || 0);
    } catch { return; }
    if (!isMediaId(id)) return;
    try {
      const u = new URL(location.href);
      u.searchParams.delete('v');
      u.searchParams.delete('t');
      history.replaceState(null, '', u.pathname + u.search + u.hash);
    } catch { /* keep */ }
    await playVideoAt(data.history.find((x) => x.id === id) || { id, title: '' }, t);
  }
  return { open, bootFromUrl };
 })();
 /* Lazy classic chunk; its executing singleton stays pinned until reload. */
 (window.YT ||= {}).External = (() => {
  const isAndroid = /Android/i.test(navigator.userAgent);
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
  const streamUrl = (id) => `${location.origin}${isUploadId(id) ? '/api/uploads/' : '/api/media/'}${encodeURIComponent(id)}`;
  async function cached(id) {
    if (isUploadId(id)) return true; // uploads are always a single file on the server
    try { const j = await (await fetch(`/api/media/${encodeURIComponent(id)}/status`)).json(); return j && j.status === 'ready'; } catch { return false; }
  }
  const intent = (url, title, pkg) => `intent:${url}#Intent;action=android.intent.action.VIEW;type=video/*;${pkg ? `package=${pkg};` : ''}S.title=${encodeURIComponent(title || '')};end`;
  function m3u(items) {
    return ['#EXTM3U', ...items.flatMap((v) => [`#EXTINF:${Math.round(v.duration || -1)},${(v.title || v.id).replace(/[\r\n]/g, ' ')}`, streamUrl(v.id)])].join('\n') + '\n';
  }
  function download(name, text) {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([text], { type: 'audio/x-mpegurl' }));
    a.download = name;
    a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 2000);
  }
  async function open() {
    const meta = current && current.meta;
    if (!meta || !meta.id || meta.custom) { toast('Play a YouTube video first'); return; }
    const body = document.createElement('div');
    body.className = 'ext-panel';
    body.innerHTML = '<div class="sm-busy">Checking the server copy…</div>';
    showModal('📺 Open in another player', body, [{ label: 'Close', primary: true, onClick: closeModal }]);
    const ok = await cached(meta.id);
    if (!ok) {
      body.innerHTML = `<p class="modal-text">The server hasn't finished caching this video yet, and other players need that single-file copy. Keep it playing for a minute (or tap ${MediaIcons.svg('download')} Save), then try again.</p>`;
      return;
    }
    const url = streamUrl(meta.id);
    const title = meta.title || meta.id;
    const inList = queue.length > 1 && queueIndex >= 0;
    body.innerHTML = `
      <div class="sm-link"><span>Stream</span><code>${escapeHtml(url)}</code><button class="np-btn" type="button" data-act="copy">Copy</button></div>
      <div class="ext-buttons">
        ${isAndroid ? `
          <a class="np-btn" href="${escapeHtml(intent(url, title, 'org.videolan.vlc'))}">${TransportIcons.svg('play')} VLC</a>
          <a class="np-btn" href="${escapeHtml(intent(url, title, 'com.mxtech.videoplayer.ad'))}">${TransportIcons.svg('play')} MX Player</a>
          <a class="np-btn" href="${escapeHtml(intent(url, title))}">${TransportIcons.svg('play')} Open with…</a>`
        : isIOS ? `
          <a class="np-btn" href="vlc-x-callback://x-callback-url/stream?url=${encodeURIComponent(url)}">${TransportIcons.svg('play')} VLC</a>
          <a class="np-btn" href="infuse://x-callback-url/play?url=${encodeURIComponent(url)}">${TransportIcons.svg('play')} Infuse</a>`
        : `<a class="np-btn" href="vlc://${escapeHtml(url)}">${TransportIcons.svg('play')} VLC</a>`}
        <button class="np-btn" type="button" data-act="m3u">${MediaIcons.svg('download')} .m3u (this video)</button>
        ${inList ? `<button class="np-btn" type="button" data-act="m3u-list">${MediaIcons.svg('download')} .m3u (whole list)</button>` : ''}
      </div>
      <p class="sp-note">${isAndroid ? 'VLC / MX Player must be installed; “Open with…” shows every video app.'
        : isIOS ? 'Needs the VLC (or Infuse) app. The link streams from your server; nothing is downloaded first.'
        : 'Desktop VLC may not register vlc:// links — the .m3u file opens in VLC, mpv, IINA or any media player.'}</p>`;
    body.addEventListener('click', async (e) => {
      const act = e.target.closest('[data-act]');
      if (!act) return;
      if (act.dataset.act === 'copy') {
        try { await navigator.clipboard.writeText(url); toast('Stream URL copied ✓'); } catch { toast('Copy blocked'); }
      } else if (act.dataset.act === 'm3u') {
        download(`${title.replace(/[^\w\- ]+/g, '').trim().slice(0, 50) || meta.id}.m3u`, m3u([meta]));
      } else if (act.dataset.act === 'm3u-list') {
        act.disabled = true;
        const items = queue.slice(Math.max(0, queueIndex));
        const flags = await Promise.all(items.map((v) => (v.custom ? false : cached(v.id))));
        const ready = items.filter((_, i) => flags[i]);
        download('ytplayer-queue.m3u', m3u(ready));
        toast(`Playlist with ${ready.length} of ${items.length} songs${ready.length < items.length ? ' (the rest aren’t cached on the server yet)' : ''}`, { duration: 5000 });
        act.disabled = false;
      }
    });
  }
  return { open, m3u, intent };
 })();
--- a/frontend/shell-consistency.test.js
+++ b/frontend/shell-consistency.test.js
@@ -27,3 +27,96 @@ test('every SHELL asset exists on disk and there are no duplicate entries', () =
  assert.equal(new Set(shell).size, shell.length, 'SHELL has no duplicate entries');
  for (const asset of shell) assert.ok(existsSync(join(__dirname, asset.slice(1))), `${asset} exists`);
 });
 test('assets.json describes the complete existing shell exactly once with eager core features', () => {
  const { groups } = JSON.parse(readFileSync(join(__dirname, 'assets.json'), 'utf8'));
  const described = new Set();
  for (const [name, group] of Object.entries(groups)) {
    assert.equal(group.contract, name === 'core' ? 2 : 1, `${name} contract (core boot packing changed)`);
    assert.equal(typeof group.eager, 'boolean');
    for (const asset of group.files) {
      assert.ok(!described.has(asset), `${asset} has one group`);
      described.add(asset);
      assert.ok(existsSync(join(__dirname, asset.slice(1))), `${asset} exists`);
    }
  }
  for (const asset of shell) if (asset !== '/') assert.ok(described.has(asset), `${asset} is described`);
  // piano-engine is dynamically imported and historically absent from SHELL.
  for (const asset of described) assert.ok(listed.has(asset) || asset === '/piano-engine.mjs', `${asset} shell or documented dynamic import`);
  assert.equal(groups.core.eager, true);
  for (const name of ['playlist', 'settings', 'service-mode', 'lyrics-editor']) {
    assert.equal(groups[`feature:${name}`].eager, true);
    for (const asset of groups[`feature:${name}`].embeddedIn) assert.ok(groups.core.files.includes(asset), `${name} remains in core`);
  }
 });
 test('the selected glass-stage layout includes its controls and panel dependencies', () => {
  const { groups } = JSON.parse(readFileSync(join(__dirname, 'assets.json'), 'utf8'));
  assert.deepEqual(groups['layout:glass-stage'].files, [
    '/theme-glass.css', '/theme-glass-panel.css', '/glass-panel-layout.js',
  ]);
  assert.deepEqual(groups['layout:glass-stage'].dependencies,['feature:layout-controls']);
  assert.ok(groups['feature:layout-controls'].files.includes('/glass-controls.js'));
 });
 test('the shared sync core is eager and loads before the update helper',()=>{
 const {groups}=JSON.parse(readFileSync(join(__dirname,'assets.json'),'utf8'));
 assert.ok(groups.core.files.includes('/asset-sync-core.js'));
 assert.ok(html.indexOf('src="asset-sync-core.js"')<html.indexOf('src="sw-update.js"'));
 assert.ok(listed.has('/asset-sync-core.js'));
 });
 test('only core scripts and styles remain eager; native fallback and active layout bootstrap agree', () => {
  const {groups}=JSON.parse(readFileSync(join(__dirname,'assets.json'),'utf8'));
  const background=new Set(Object.values(groups).filter(g=>g.background).flatMap(g=>g.files));
  for(const match of html.matchAll(/<(?:script\b[^>]*\bsrc|link\b[^>]*\bhref)="([^"]+)"/gi)) {
    // A style preload discovers bytes without applying or blocking another layout.
    if(match[0].includes('rel="preload"'))continue;
    const path='/'+match[1].replace(/^\//,'').split(/[?#]/)[0];
    assert.ok(!background.has(path),`${path} is not eager`);
  }
  assert.ok(html.indexOf('id="ytp-assets"')<html.indexOf('src="lazy.js"'));
  assert.ok(html.indexOf('src="lazy.js"')<html.indexOf('</head>'));
  assert.ok(html.indexOf('src="lazy.js"')<html.indexOf('rel="stylesheet"'),'head bootstrap must not wait for common CSS before requesting the selected layout');
  assert.ok(html.indexOf('rel="preload"')<html.indexOf('src="lazy.js"'),'font preloads must start before the render-blocking bootstrap');
  assert.deepEqual(JSON.parse(html.match(/id="ytp-assets">([^<]+)<\/script>/)[1]).groups,groups);
  for(const name of ['playlist','settings','service-mode','lyrics-editor'])assert.ok(groups['feature:'+name].eager);
 });
 test('layout-independent visibility and transport defaults stay in eager CSS',()=>{
 const {groups}=JSON.parse(readFileSync(join(__dirname,'assets.json'),'utf8'));
 assert.ok(groups.core.files.includes('/layout-base.css'));
 const shared=readFileSync(join(__dirname,'layout-base.css'),'utf8');
 for(const selector of ['.stg-overlay','.deck-chips','.np-btn.done .i-save','.sleep-status .sl-ic','.ab-group','.mc-tune'])assert.ok(shared.includes(selector));
 assert.ok(html.includes('href="layout-base.css"'));
 });
 test('classic first-visit style preload is discovered before the head loader without applying another layout',()=>{
 const preload=html.match(/<link\b[^>]*rel="preload"[^>]*href="theme-classic.css"[^>]*as="style"[^>]*>/);
 assert.ok(preload,'classic stylesheet has an early preload');
 assert.ok(html.indexOf(preload[0])<html.indexOf('src="lazy.js"'));
 assert.ok(!/<link\b[^>]*rel="stylesheet"[^>]*href="theme-classic.css"/.test(html),'the selected layout remains parser-applied by the loader');
 });
 test('the last core script owns boot without an extra request or unsafe stale packing',()=>{
 const {groups}=JSON.parse(readFileSync(join(__dirname,'assets.json'),'utf8'));
 assert.equal(groups.core.contract,2,'old core packing cannot fall back without the loader');
 assert.ok(groups.core.files.includes('/app.js'));
 assert.ok(groups.core.files.includes('/section-rail.js'));
 assert.equal(groups.core.files.includes('/app-bootstrap.js'),false);
 assert.equal(listed.has('/app-bootstrap.js'),false);
 const scripts=[...html.matchAll(/<script src="([^"]+)"/g)].map(m=>m[1]);
 assert.equal(scripts.at(-1),'section-rail.js');
 assert.ok(html.includes("'sha256-__APP_SCRIPT_HASH__'"));
 assert.ok(readFileSync(join(__dirname,'section-rail.js'),'utf8').includes('root.AppBootstrap={ready}'));
 });
 test('runtime exclusion rules never remove shell or declared dynamic assets', async () => {
  const { isRuntimeAsset } = await import('../server/asset-manifest.js');
  const definition = JSON.parse(readFileSync(join(__dirname, 'assets.json'), 'utf8'));
  for (const asset of new Set([...shell.filter(p => p !== '/'), ...Object.values(definition.groups).flatMap(g => g.files)])) {
    assert.ok(isRuntimeAsset(asset, definition), `${asset} remains a runtime asset`);
  }
  for (const asset of ['/app.test.js', '/nested/probe.test.mjs', '/README.md', '/fonts/font-OFL.txt', '/admin.html', '/perf/fixture.js']) assert.equal(isRuntimeAsset(asset, definition), false, asset);
 });
--- a/frontend/shell-core.js
+++ b/frontend/shell-core.js
@@ -0,0 +1,305 @@
 /* Eager UI definitions. Read app lexical state only when called after initialization. */
 const Recommendations = (() => {
  let cards = [], fetchedAt = 0, loading = false, error = false, actor = '', queuedRefresh = false;
  let listHost = null;
  const deviceFingerprint = () => window.getFingerprint ? window.getFingerprint() : 'unknown';
  const fingerprint = () => data.profile?.name ? 'profile:' + data.profile.name.toLowerCase() : 'device:' + deviceFingerprint();
  function load() {
    const fp = fingerprint();
    if (fp === actor) return;
    actor = fp; cards = []; fetchedAt = 0;
    try {
      const saved = JSON.parse(localStorage.getItem('ytpRecommendations:' + fp) || 'null');
      if (saved && Array.isArray(saved.cards)) cards = saved.cards;
    } catch { /* no saved recommendations */ }
  }
  function paint(host) {
    if (!host) return;
    host.replaceChildren();
    const heading = document.createElement('div'); heading.className = 'rec-heading';
    const copy = document.createElement('div');
    const title = document.createElement('h2'); title.textContent = 'Recommended for you';
    const sub = document.createElement('p'); sub.textContent = error && cards.length ? 'Saved picks · reconnect to refresh' : 'Familiar favorites and something new, inspired by your listening.';
    copy.append(title, sub);
    const refresh = document.createElement('button'); refresh.type = 'button'; refresh.className = 'rec-refresh';
    refresh.textContent = loading ? 'Updating…' : 'Refresh'; refresh.disabled = loading;
    refresh.onclick = () => update(true);
    heading.append(copy, refresh); host.appendChild(heading);
    if (!cards.length) {
      const empty = document.createElement('p'); empty.className = 'rec-empty'; empty.setAttribute('role', 'status');
      empty.textContent = loading ? 'Finding your next listen…' : error ? 'Recommendations are unavailable. You can still search or play your playlists.' : 'Search or play a few videos to start discovering recommendations here.';
      host.appendChild(empty); return;
    }
    const grid = document.createElement('div'); grid.className = 'rec-grid';
    cards.forEach((v, i) => {
      const item = document.createElement('article'); item.className = 'rec-item';
      const play = document.createElement('button'); play.type = 'button'; play.className = 'rec-play';
      play.setAttribute('aria-label', 'Play ' + v.title);
      const cover = document.createElement('span'); cover.className = 'rec-cover';
      const img = document.createElement('img'); img.src = v.thumbnail || ''; img.alt = ''; img.loading = 'lazy'; img.decoding = 'async'; cover.appendChild(img);
      const title = document.createElement('span'); title.className = 'rec-title'; title.textContent = v.title;
      const channel = document.createElement('span'); channel.className = 'rec-channel'; channel.textContent = v.channel || '';
      play.append(cover, title, channel); play.onclick = () => { setHomeOverPlayer(false); playFromList(cards.slice(), i, 'recommendations'); };
      const reason = document.createElement('div'); reason.className = 'rec-reason'; reason.textContent = v.reason || 'Recommended for you';
      const actions = document.createElement('div'); actions.className = 'rec-actions';
      const queue = document.createElement('button'); queue.type = 'button'; queue.textContent = '+ Queue'; queue.setAttribute('aria-label', 'Queue ' + v.title); queue.onclick = () => addToQueue(v);
      const more = document.createElement('button'); more.type = 'button'; more.textContent = '•••'; more.setAttribute('aria-label', 'More actions for ' + v.title); more.onclick = () => openCardMenu(v);
      actions.append(queue, more); item.append(play, reason, actions); grid.appendChild(item);
    });
    host.appendChild(grid);
  }
  function repaint() {
    if (!WEB) return;
    const home = $('homeRecommendations');
    if (home) { home.classList.remove('hidden'); paint(home); }
    els.playerPane?.classList.add('has-recommendations');
    if (listHost?.isConnected) paint(listHost);
    requestAnimationFrame(updateBottomChrome);
  }
  async function update(force = false) {
    load();
    if (!WEB) return;
    if (loading) { if (force) queuedRefresh = true; return; }
    if (!force && Date.now() - fetchedAt < 300000) return;
    const fp = actor; loading = true; error = false; repaint();
    try {
      const name = data.profile?.name || '';
      const result = await webFetch('/api/recommendations?fp=' + encodeURIComponent(deviceFingerprint()) + (name ? '&profile=' + encodeURIComponent(name) : ''), { headers: name ? profileHeaders(name) : {} });
      if (fp !== fingerprint()) return;
      if (!result.ok || !Array.isArray(result.results)) throw new Error('invalid recommendations');
      cards = result.results;
      try { localStorage.setItem('ytpRecommendations:' + fp, JSON.stringify({ cards })); } catch { /* full */ }
    } catch { error = true; }
    finally {
      loading = false; fetchedAt = fp === fingerprint() ? Date.now() : 0; repaint();
      if (queuedRefresh || fp !== fingerprint()) { queuedRefresh = false; update(true); }
    }
  }
  function home() { if (WEB) { load(); repaint(); update(); } }
  function inList() {
    if (!WEB) return;
    listHost = document.createElement('section'); listHost.className = 'recommendations'; listHost.setAttribute('aria-label', 'Recommended videos');
    els.cards.appendChild(listHost); load(); paint(listHost); update();
  }
  return { home, inList, update };
 })();
 function renderSidebar() {
  els.playlistList.innerHTML = '';
  for (const pl of data.playlists) {
    const stats = playlistOfflineStats(pl);
    let offlineBadge = '';
    if (stats.total > 0) {
      if (stats.cached === stats.total) {
        offlineBadge = `<span class="pl-offline-badge all" title="Available offline">${MediaIcons.svg('offline')}</span>`;
      } else if (stats.cached > 0) {
        offlineBadge = `<span class="pl-offline-badge partial" title="${stats.cached} of ${stats.total} videos available offline">${stats.cached}/${stats.total}</span>`;
      }
    }
    const item = document.createElement('div');
    item.className = 'playlist-item' + (view.type === 'playlist' && view.id === pl.id ? ' active' : '');
    item.innerHTML = `<span class="pl-name"></span>${offlineBadge}<span class="pl-count">${pl.videos.length}</span>`;
    item.querySelector('.pl-name').textContent = pl.name;
    item.addEventListener('click', () => { view = { type: 'playlist', id: pl.id }; render(); });
    els.playlistList.appendChild(item);
  }
  document.querySelectorAll('.nav-item').forEach((b) => {
    b.classList.toggle('active', b.dataset.view === view.type);
  });
  // Keep bottom-nav in sync with sidebar nav active state
  document.querySelectorAll('.bottom-nav-btn').forEach((b) => {
    b.classList.toggle('active', b.dataset.view === view.type);
  });
  updateQueueBadge();
  updateDownloadBadge();
  renderHomePlaylists();
 }
 function renderHomePlaylists() {
  if (window.BentoHub) BentoHub.playlists = () => data.playlists || [];
  const wrap = document.getElementById('homePlaylists');
  const hero = document.querySelector('#playerPlaceholder .hero');
  const grid = document.getElementById('homePlGrid');
  if (!wrap || !hero || !grid) return;
  Recommendations.home();
  const lists = data.playlists || [];
  wrap.classList.toggle('hidden', !lists.length);
  hero.classList.toggle('hidden', !!lists.length);
  // The hero is centered art; the grid wants the full box, so the placeholder
  // switches from centering to stretching (and tightens its padding), and the
  // stage drops its 16:9 lock so the grid gets the pane's real height.
  if (els.placeholder) els.placeholder.classList.toggle('showing-playlists', !!lists.length);
  if (els.playerPane) els.playerPane.classList.toggle('home-playlists', !!lists.length);
  if (!lists.length) { grid.innerHTML = ''; return; }
  grid.innerHTML = '';
  for (const pl of lists) {
    const count = pl.videos.length;
    const thumb = (pl.videos.find((v) => v && v.thumbnail) || {}).thumbnail || '';
    const stats = playlistOfflineStats(pl);
    let offlineHtml = '';
    if (stats.total > 0) {
      if (stats.cached === stats.total) {
        offlineHtml = `<span class="home-pl-offline all" title="Available offline">${MediaIcons.svg('offline')}</span>`;
      } else if (stats.cached > 0) {
        offlineHtml = `<span class="home-pl-offline partial" title="${stats.cached} of ${stats.total} videos available offline">${stats.cached}/${stats.total}</span>`;
      }
    }
    const card = document.createElement('button');
    card.className = 'home-pl-card';
    card.type = 'button';
    card.innerHTML = `
      <span class="home-pl-thumb">
        ${thumb ? `<img src="${escapeHtml(thumb)}" alt="" loading="lazy" decoding="async" />`
                : '<span class="home-pl-thumb-fallback">🎵</span>'}
        ${offlineHtml}
        <span class="home-pl-play" title="Play all">${TransportIcons.svg('play')}</span>
      </span>
      <span class="home-pl-name"></span>
      <span class="home-pl-count">${count} video${count === 1 ? '' : 's'}</span>`;
    card.querySelector('.home-pl-name').textContent = pl.name;
    card.title = pl.name;
    card.addEventListener('click', () => { view = { type: 'playlist', id: pl.id }; render(); });
    card.querySelector('.home-pl-play').addEventListener('click', (e) => {
      e.stopPropagation(); // the play badge plays; the rest of the card opens the list
      if (count) playFromList(pl.videos, 0, 'playlist:' + pl.id);
      else toast('That playlist is empty');
    });
    grid.appendChild(card);
  }
  // Measure after layout — scrollHeight is meaningless until the cards lay out.
  requestAnimationFrame(updateHomeGridScrollState);
 }
 function updateHomeGridScrollState() {
  const grid = document.getElementById('homePlGrid');
  if (!grid) return;
  const overflows = grid.scrollHeight > grid.clientHeight + 1;
  grid.classList.toggle('is-scrollable', overflows);
  grid.classList.toggle('at-end', !overflows ||
    grid.scrollTop + grid.clientHeight >= grid.scrollHeight - 2);
 }
 function updateBottomChrome() {
  let occupied = 0;
  for (const id of ['bottomNav', 'miniBar']) {
    const el = document.getElementById(id);
    if (!el || el.classList.contains('hidden')) continue;
    const box = el.getBoundingClientRect();
    if (!box.height || getComputedStyle(el).position !== 'fixed') continue;
    if (box.top > window.innerHeight * 0.5) occupied = Math.max(occupied, window.innerHeight - box.top);
  }
  document.documentElement.style.setProperty('--bottom-chrome', Math.round(occupied) + 'px');
 }
 function setHomeOverPlayer(on) {
  const pane = els.playerPane;
  if (!pane) return;
  on = !!on && !!(current && current.meta);
  // Service mode hides the bottom bar and mini bar (and, in its Video view,
  // lives inside this pane): leave it first or the home screen is a dead end.
  if (on && isServiceModeOpen()) exitServiceMode();
  if (pane.classList.contains('home-over') === on) return;
  pane.classList.toggle('home-over', on);
  pane.classList.toggle('empty', on);
  if (els.placeholder) els.placeholder.classList.toggle('hidden', !on);
  if (on) {
    renderHomePlaylists();
    showMiniBar();
    const body = document.querySelector('.body');
    if (body) body.scrollTo({ top: 0 });
  }
 }
 function showMiniBar() {
  if (!current || !current.meta) return;
  $('miniTitle').textContent = current.meta.title;
  const miniCh = $('miniChannel');
  miniCh.textContent = current.meta.channel || '';
  miniCh.classList.toggle('link', !!channelKeyOf(current.meta));
  $('miniBar').classList.remove('hidden');
  updateMiniBar();
  requestAnimationFrame(updateBottomChrome);
 }
 function updateMiniBar() {
  if (!current || !current.meta) return;
  const cur = Player.master.currentTime || 0;
  const dur = Player.master.duration || 0;
  $('miniTime').textContent = fmtTime(cur);
  if (dur > 0) {
    $('miniProgressFill').style.width = Math.min(100, (cur / dur) * 100) + '%';
  }
 }
 function hideMiniBar() {
  $('miniBar').classList.add('hidden');
  requestAnimationFrame(updateBottomChrome);
 }
 function setTile(btn, label) {
  const tl = btn.querySelector('.tl');
  if (tl) tl.textContent = label; else btn.textContent = label;
 }
 function updateNowPlayingActions() {
  if (!current || !current.meta) return;
  const id = current.meta.id;
  renderAvailability(id);
  // Custom (edited) videos are already a saved-offline cut of a source video;
  // re-saving or re-editing them makes no sense, so hide those actions.
  const isCustom = !!current.meta.custom;
  if (els.editBtn) els.editBtn.hidden = isCustom;
  if (els.saveBtn) els.saveBtn.hidden = isCustom;
  // The server cache exists only behind the web PWA backend.
  if (els.brokenBtn) {
    els.brokenBtn.hidden = isCustom || !WEB;
    els.brokenBtn.disabled = reportingBroken.has(id);
    els.brokenBtn.textContent = reportingBroken.has(id) ? '⏳ Reporting…' : '⚠ Broken';
  }
  { const ch = $('npChannel'); if (ch) { const ok = isUploadId(id) || cachedIds.has(id); ch.classList.toggle('verified', ok); ch.title = ok ? 'Available on this device or the server' : ''; } }
  const btn = els.saveBtn;
  if (!btn) return;
  btn.classList.toggle('saving', downloading.has(id));
  if (removing.has(id)) {
    setTile(btn, 'Removing…');
    btn.classList.remove('done');
    btn.disabled = true;
  } else if (downloading.has(id)) {
    setTile(btn, 'Saving…');
    btn.classList.remove('done');
    btn.disabled = true;
  } else if (cachedIds.has(id)) {
    setTile(btn, 'Saved');
    btn.classList.add('done');
    btn.disabled = false;
    btn.title = 'Saved for offline — click to remove from cache';
  } else {
    setTile(btn, 'Save');
    btn.classList.remove('done');
    btn.disabled = false;
    btn.title = 'Save this video for offline playback';
  }
 }
 function renderSmartSidebar() {
  const list = $('smartPlaylistList');
  if (!list) return;
  list.innerHTML = '';
  SMART_PLAYLISTS.forEach((sp) => {
    const item = document.createElement('div');
    const isActive = view.type === 'smart' && view.smartType === sp.id;
    item.className = 'playlist-item smart-item' + (isActive ? ' active' : '');
    item.innerHTML = `<span class="pl-name">${sp.label}</span>`;
    item.addEventListener('click', () => { view = { type: 'smart', smartType: sp.id }; render(); });
    list.appendChild(item);
  });
  if (WEB && data.settings.p2pReceive !== false) {
    const item = document.createElement('div');
    item.className = 'playlist-item smart-item' + (view.type === 'p2p' ? ' active' : '');
    item.innerHTML = '<span class="pl-name">📡 On other devices</span>';
    item.addEventListener('click', () => { view = { type: 'p2p' }; render(); });
    list.appendChild(item);
  }
 }
--- a/frontend/stats-view.js
+++ b/frontend/stats-view.js
@@ -0,0 +1,124 @@
 /* Lazy classic chunk; its executing singleton stays pinned until reload. */
 (window.YT ||= {}).StatsView = { render: async function renderStats() {
  try { await Lazy.load('feature:stats'); } catch (error) { toast(error.message); return; }
  if (view.type !== 'stats') return;
  StatsTrack.flush();
  els.listTitle.textContent = 'Stats';
  resetListHeaderExtras();
  els.listActions.innerHTML = '';
  els.status.classList.add('hidden');
  const c = els.cards;
  const S = StatsCore.summarize(data.stats);
  if (!S.totalPlays && S.totalSec < 60) {
    c.innerHTML = `
      <div class="empty-state stats-empty">
        <div class="empty-icon">📊</div>
        <h3 class="empty-title">No listening stats yet</h3>
        <p class="empty-desc">Stats start counting now — a song counts as played after 30 seconds. They sync with your online profile.</p>
      </div>`;
    return;
  }
  const hrs = (sec) => StatsCore.fmtHours(sec);
  const delta = S.thisMonthSec - S.lastMonthSec;
  const deltaTxt = S.lastMonthSec || S.thisMonthSec
    ? `${delta >= 0 ? '▲ +' : '▼ −'}${(Math.abs(delta) / 3600).toFixed(1)}h vs last month`
    : '';
  const maxArtist = Math.max(1, ...S.topArtists.map((a) => a.plays));
  const spark = (vals) => {
    const w = 96, h = 26, max = Math.max(1, ...vals);
    const pts = vals.map((v, i) => `${(i / (vals.length - 1)) * w},${h - 3 - (v / max) * (h - 6)}`).join(' ');
    return `<svg class="st-spark" viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" aria-hidden="true"><polyline points="${pts}" /></svg>`;
  };
  const heatMax = Math.max(1, ...S.heat.flat().map((x) => x.minutes));
  const level = (m) => (m <= 0 ? 0 : Math.min(4, 1 + Math.floor((m / heatMax) * 3.999)));
  const fmtDay = (k) => new Date(`${k}T12:00:00`).toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
  // Month label over the first week column of each month.
  const months = S.heat.map((col, w) => {
    const d = new Date(`${col[0].date}T12:00:00`);
    const prev = w ? new Date(`${S.heat[w - 1][0].date}T12:00:00`) : null;
    return !prev || prev.getMonth() !== d.getMonth() ? d.toLocaleDateString(undefined, { month: 'short' }) : '';
  });
  const playlistsWith = data.playlists.length;
  c.innerHTML = `
    <div class="stats">
      <div class="st-tiles">
        <div class="st-tile">
          <div class="st-label">⏱ Listening this month</div>
          <div class="st-big">${hrs(S.thisMonthSec)}</div>
          <div class="st-sub">${escapeHtml(deltaTxt)}${deltaTxt ? ' · ' : ''}${hrs(S.totalSec)} all time</div>
        </div>
        <div class="st-tile">
          <div class="st-label">${TransportIcons.svg('play')} Track plays</div>
          <div class="st-big">${S.totalPlays}</div>
          <div class="st-sub">${S.songsPlayed} song${S.songsPlayed === 1 ? '' : 's'} · ${playlistsWith} playlist${playlistsWith === 1 ? '' : 's'}</div>
        </div>
        <div class="st-tile">
          <div class="st-label">🔥 Practice streak</div>
          <div class="st-big">${S.streak.current}-day</div>
          <div class="st-sub">${S.streak.current ? 'Streak active' : 'Listen 5 min today to start one'} · best ${S.streak.best} day${S.streak.best === 1 ? '' : 's'}</div>
        </div>
      </div>
      <div class="st-grid">
        <section class="st-panel">
          <div class="st-panel-head"><span>🎤 Top artists</span><small>plays this month</small></div>
          ${S.topArtists.length ? S.topArtists.map((a) => `
            <div class="st-bar-row" data-tip="${escapeHtml(a.name)} — ${a.plays} play${a.plays === 1 ? '' : 's'} this month">
              <span class="st-bar-name">${escapeHtml(a.name)}</span>
              <span class="st-bar-track"><span class="st-bar" style="width:${Math.max(3, (a.plays / maxArtist) * 100)}%"></span></span>
              <span class="st-bar-val">${a.plays}</span>
            </div>`).join('') : '<div class="st-none">No plays this month yet.</div>'}
        </section>
        <section class="st-panel">
          <div class="st-panel-head"><span>🎵 Top songs</span><small>last 30 days</small></div>
          ${S.topSongs.length ? S.topSongs.map((t, i) => `
            <div class="st-song" data-tip="${escapeHtml(t.title)} — ${t.plays} play${t.plays === 1 ? '' : 's'} in 30 days" data-id="${escapeHtml(t.id)}">
              <span class="st-rank">${String(i + 1).padStart(2, '0')}</span>
              <span class="st-song-text"><b>${escapeHtml(t.title)}</b><small>${escapeHtml(t.channel)}</small></span>
              ${spark(t.spark)}
              <span class="st-bar-val">${t.plays}</span>
            </div>`).join('') : '<div class="st-none">No plays in the last 30 days.</div>'}
        </section>
      </div>
      <section class="st-panel">
        <div class="st-panel-head"><span>🗓 Listening habits</span><small>last 16 weeks${S.peak ? ` · peak day: ${S.peak.day}s (avg ${S.peak.avgHours.toFixed(1)} h)` : ''}</small></div>
        <div class="st-heat-wrap">
          <div class="st-heat-days"><span></span><span>Mon</span><span></span><span>Wed</span><span></span><span>Fri</span><span></span><span>Sun</span></div>
          <div class="st-heat-main">
            <div class="st-heat-months">${months.map((m) => `<span>${m}</span>`).join('')}</div>
            <div class="st-heat">${S.heat.map((col) => col.map((x) => x.future
              ? '<span class="st-cell future"></span>'
              : `<span class="st-cell l${level(x.minutes)}" data-tip="${fmtDay(x.date)} · ${x.minutes} min"></span>`).join('')).join('')}</div>
          </div>
        </div>
        <div class="st-legend"><span>Less</span>${[0, 1, 2, 3, 4].map((l) => `<span class="st-cell l${l}"></span>`).join('')}<span>More</span></div>
        <details class="st-table"><summary>Show as table</summary>
          <table><thead><tr><th>Day</th><th>Minutes</th></tr></thead><tbody>
          ${S.heat.flat().filter((x) => !x.future && x.minutes > 0).reverse().map((x) => `<tr><td>${fmtDay(x.date)}</td><td>${x.minutes}</td></tr>`).join('') || '<tr><td colspan="2">No listening in this window.</td></tr>'}
          </tbody></table>
        </details>
      </section>
      <div id="statsTip" class="st-tip hidden"></div>
    </div>`;
  // One tooltip for every mark (bars, songs, heat cells).
  const root = c.querySelector('.stats');
  const tip = $('statsTip');
  root.addEventListener('pointermove', (e) => {
    const el = e.target.closest('[data-tip]');
    if (!el) { tip.classList.add('hidden'); return; }
    tip.textContent = el.dataset.tip;
    tip.classList.remove('hidden');
    const r = root.getBoundingClientRect();
    const half = tip.offsetWidth / 2 + 4; // keep the whole tip inside the panel
    tip.style.left = `${Math.min(r.width - half, Math.max(half, e.clientX - r.left))}px`;
    tip.style.top = `${e.clientY - r.top - 14}px`;
  });
  root.addEventListener('pointerleave', () => tip.classList.add('hidden'));
  root.querySelectorAll('.st-song').forEach((row) => row.addEventListener('click', () => {
    const v = data.history.find((x) => x.id === row.dataset.id) || { id: row.dataset.id, title: row.querySelector('b').textContent };
    Player.loadVideo(v);
  }));
 } };
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -273,7 +273,7 @@ body::after {
  background: linear-gradient(180deg, rgba(16,16,19,0.7), transparent);
  backdrop-filter: blur(8px);
 }
-.search-form { flex: 1; display: flex; gap: 10px; max-width: 760px; position: relative; }
+.search-form { flex: 1; display: flex; align-items: center; gap: 10px; max-width: 760px; position: relative; }
 /* Recent-searches dropdown — device-local, kept in localStorage (RecentSearches in app.js) */
 .search-recent {
@@ -752,7 +752,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 }
 .np-btn:hover { color: var(--text); border-color: var(--accent); background: var(--bg-2); transform: translateY(-1px); }
 .np-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
-.np-btn.done { color: #7ee0a8; border-color: rgba(126,224,168,0.35); }
+.np-btn.done { color: var(--accent-bright); border-color: var(--accent); }
 .np-title {
  font-family: var(--display);
  font-weight: 700;
@@ -1019,7 +1019,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
  box-shadow: 0 0 26px -12px var(--accent-glow);
 }
 .card.playing::after {
-  content: "▶ NOW PLAYING";
+  content: "NOW PLAYING";
  position: absolute; top: 9px; right: 44px;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--accent);
@@ -1097,19 +1097,20 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
  display: none;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
-  color: #7ee0a8;
+  color: var(--accent-bright);
  font-size: 12px; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
 }
 .card.cached .saved-badge { display: flex; }
 .card.downloading .saved-badge {
  display: flex;
-  color: #ffc850;
+  color: var(--accent-bright);
  animation: pulse 1s ease-in-out infinite;
 }
-.card.downloading .saved-badge::before { content: "⏳"; }
+/* State changes reveal SVGs without rewriting badges or their handlers. */
-.card.downloading .saved-badge { font-size: 0; }
+.saved-badge .badge-progress { display:none; }
-.card.downloading .saved-badge::before { font-size: 12px; }
+.card.downloading .saved-badge .badge-offline { display:none; }
 .card.downloading .saved-badge .badge-progress { display:block; }
 .saved-badge .media-icon { width:16px; height:16px; filter:drop-shadow(0 1px 2px #000); }
 /* Download progress bar on card thumb */
 .dl-progress {
@@ -4257,6 +4258,30 @@ body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or t
 .search-form { min-width: 0; }
 .search-form #searchInput { flex: 1 1 auto; min-width: 0; }
 /* Eager toolbar geometry: these buttons exist before Car mode is loaded. */
 .topbar :is(#voiceSearchBtn, #carModeBtn, #updateIconBtn) {
  flex: none;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 0;
  align-items: center; justify-content: center;
  display: inline-flex;
 }
 .topbar #updateIconBtn.hidden { display: none; }
 .topbar :is(#voiceSearchBtn, #carModeBtn) svg { width: 22px; height: 22px; flex: none; }
 .topbar :is(#voiceSearchBtn, #carModeBtn):hover { transform: none; }
@media (max-width: 430px) {
  html[data-layout] .topbar, html[data-layout] #searchForm { gap: 4px; }
  html[data-layout] #searchForm .search-btn { flex: none; padding-inline: 8px; }
  html[data-layout="f7-swipe"] #searchInput { padding-right: 6px; }
 }
@media (max-width: 860px) {
  html[data-layout="bento-hub"] .topbar {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
 }
 /* iPhone/iPad: no double-tap page zoom (scrolling unaffected) */
 html.ios-nozoom, html.ios-nozoom body { touch-action: manipulation; }
@@ -4307,3 +4332,27 @@ html.ios-nozoom, html.ios-nozoom body { touch-action: manipulation; }
 .lyric-primary { white-space: pre-line; }
 .lyric-secondary { display: block; white-space: pre-line; font-size: .62em; font-weight: 450; line-height: 1.2; opacity: .68; margin-top: .15em; }
 /* Media icons share definitions and follow the active layout's stroke family. */
 .media-icon { display:inline-block; width:20px; height:20px; flex:none; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
 .media-nav-icon { width:20px; height:20px; }
 .empty-icon .media-icon { width:48px; height:48px; }
 :is(.pl-offline-badge,.home-pl-offline) .media-icon { width:14px; height:14px; }
 html[data-layout="classic"] .media-icon { stroke-width:1.8; }
 html[data-layout="f7-swipe"] .media-icon { stroke-width:2; }
 html[data-layout="glass-stage"] .media-icon { stroke-width:1.9; }
 html[data-layout="bento-hub"] .media-icon { stroke-width:1.8; }
 .np-btn .i-progress { display:none; }
 .np-btn.saving :is(.i-save,.i-done) { display:none; }
 .np-btn.saving .i-progress { display:inline; }
 :is([data-media-icon="progress"], .np-btn.saving .media-icon) { animation:mediaSpin 1s linear infinite; transform-origin:center; }
@keyframes mediaSpin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { :is([data-media-icon="progress"], .np-btn.saving .media-icon) { animation:none; } }
 .media-shape { display:none; }
 .media-shape-classic { display:inline; }
 html[data-layout="f7-swipe"] .media-shape-classic,
 html[data-layout="glass-stage"] .media-shape-classic,
 html[data-layout="bento-hub"] .media-shape-classic { display:none; }
 html[data-layout="f7-swipe"] .media-shape-f7-swipe,
 html[data-layout="glass-stage"] .media-shape-glass-stage,
 html[data-layout="bento-hub"] .media-shape-bento-hub { display:inline; }
--- a/frontend/sw-update.js
+++ b/frontend/sw-update.js
@@ -1,7 +1,7 @@
 /* ============================================================================
 * sw-update — makes "Refresh UI" actually land the new build.
 *
- * Framework-free and dependency-free on purpose (same pattern as
+ * Framework-free, with a shared sync core and a legacy fallback (same pattern as
 * async-guard.js):
 *   • Loads as a plain <script> under CSP `script-src 'self'` (browser
 *     global `window.SwUpdate`).
@@ -17,7 +17,7 @@
 * already current (a failed install leaves a partial cache that the
 * activate handler then mistook for a previous deploy).
 *
- * The fix no longer depends on the service-worker install lifecycle:
+ * Legacy fallback (retained for ASSET_SYNC=0):
 *   1. refreshShellInPlace() downloads a fresh copy of every file the shell
 *      caches hold (cache-busted, so even an old worker's cache-first
 *      handler can't answer with the stale copy) — ALL of them or nothing —
@@ -25,6 +25,10 @@
 *      serves the next load, it serves the new build.
 *   2. Only then is a waiting worker (if any) activated, and the page
 *      reloaded once.
 * Incremental mode uses AssetSyncCore to fetch only missing verified hash URLs
 * and publishes a complete blocking set. Playback guards cover activation and
 * reload callbacks; PLAYING reports provide an additional worker guard.
 *
 * The banner itself only opens when the build the page is running differs
 * from the server's (see app.js maybeShowUpdateBanner), so no lifecycle
 * event can re-open it once the page is current.
@@ -64,7 +68,7 @@
   * @param {Function} [opts.setTimeout]
   * @returns {Promise<{refreshed: number, caches: number, resumed: number}>}
   */
-  async function refreshShellInPlace({ cachesApi, fetchFn, isShellCache, bust, timeoutMs, attempts, attemptTimeoutMs, concurrency, stagingKey, setTimeout: setTimeoutFn }) {
+  async function refreshLegacyShell({ cachesApi, fetchFn, isShellCache, bust, timeoutMs, attempts, attemptTimeoutMs, concurrency, stagingKey, setTimeout: setTimeoutFn }) {
    const names = (await cachesApi.keys()).filter(isShellCache);
    if (!names.length) return { refreshed: 0, caches: 0, resumed: 0 }; // uncontrolled page: a reload already hits the network
@@ -145,6 +149,46 @@
    return { refreshed: urls.size, caches: names.length, resumed };
  }
  async function refreshShellInPlace(opts) {
    const core = root.AssetSyncCore;
    if (core) {
      const response = await opts.fetchFn('/api/manifest', { cache: 'no-store' });
      if (!response.ok) throw new Error('Manifest unavailable');
      const m = await response.json();
      const cache = await opts.cachesApi.open(core.CACHE);
      // Only upgraded workers can route the persistent scheme. A rollback
      // worker explicitly advertises the legacy path through CACHE_STATUS.
      const reg = root.navigator && await root.navigator.serviceWorker.getRegistration();
      const worker = reg && (reg.waiting || reg.active);
      const status = await askCacheStatus(worker);
      // Unknown protocol is a retryable failure, never an empty successful
      // legacy refresh followed by a reload into the old persistent manifest.
      if (worker && !status) throw new Error('Worker update status unavailable; try again');
      if (status && status.assetSync) {
        const activeLayout = root.Lazy?.layout || 'classic';
        const result = await core.syncAssets(m,{cache,fetchFn:opts.fetchFn,activeLayout});
        if (!reg.waiting) await core.commit(m,cache,{activeLayout});
        return result;
      }
    }
    return refreshLegacyShell({ ...opts, isShellCache: n => n !== 'ytplayer-assets' && opts.isShellCache(n) });
  }
  function playing() { return typeof Player !== 'undefined' && !!Player._wantsPlaying; }
  function reportPlaying(value = playing()) {
    const sw = root.navigator && root.navigator.serviceWorker;
    if (!sw) return;
    sw.getRegistration().then(reg => {
      for (const worker of [sw.controller, reg && reg.waiting]) if(worker) worker.postMessage({type:'PLAYING',value});
    }).catch(()=>{});
  }
  if (root.document && root.navigator && root.navigator.serviceWorker) {
    if (root.VisibleTimer) root.VisibleTimer.setIntervalWhenVisible(()=>reportPlaying(),1000);
    for (const event of ['play','pause','ended']) root.document.addEventListener(event,()=>reportPlaying(),true);
    root.document.addEventListener('visibilitychange',()=>reportPlaying());
    root.navigator.serviceWorker.addEventListener('controllerchange',()=>reportPlaying());
  }
  /**
   * Asks a worker whether it has already precached its whole shell.
   * Resolves to null on any problem (no reply, no MessageChannel, timeout) —
@@ -167,7 +211,7 @@
      try {
        const ch = new Ctor();
        ch.port1.onmessage = (ev) => finish(ev && ev.data ? ev.data : null);
-        worker.postMessage({ type: 'CACHE_STATUS' }, [ch.port2]);
+        worker.postMessage({ type: 'CACHE_STATUS', activeLayout: root.Lazy?.layout }, [ch.port2]);
      } catch { finish(null); return; }
      if (schedule) schedule(() => finish(null), timeoutMs);
    });
@@ -191,7 +235,14 @@
   * @param {Function} [opts.setTimeout]                injectable for tests
   * @returns {Promise<void>}
   */
-  async function applyUpdate({ reg, container, reload, refreshShell, askStatus, onPhase, setTimeout: setTimeoutFn }) {
+  async function applyUpdate({ reg, container, reload, refreshShell, askStatus, onPhase, isPlaying = playing, confirmOverride = root.confirm && root.confirm.bind(root), setTimeout: setTimeoutFn }) {
    let overridden = false;
    const guard = () => {
      if (!isPlaying() || overridden) return true;
      if (confirmOverride && confirmOverride('Playing - update after this song / when paused. Update now anyway? Playback may stop.')) { overridden = true; return true; }
      return false;
    };
    if (!guard()) throw new Error('Playing - update after this song / when paused');
    const scheduleTimeout = setTimeoutFn || (typeof setTimeout !== 'undefined' ? setTimeout : null);
    const waiting = reg && reg.waiting;
@@ -199,16 +250,18 @@
    // Opt-in: without an askStatus the download path runs exactly as before.
    // (It must never be implicit — a probe that waits on a reply would hang
    // forever if the caller injected a setTimeout that never fires.)
-    let precached = false;
+    let precached = false, offlineStatus;
    if (waiting && askStatus) {
      try {
        const status = await askStatus(waiting);
        precached = !!(status && status.ready);
        offlineStatus = status;
      } catch { precached = false; }
    }
-    if (onPhase) onPhase(precached ? 'ready' : 'downloading');
+    if (onPhase) onPhase(precached ? 'ready' : 'downloading', offlineStatus);
    if (!precached && refreshShell) await refreshShell();
    if (!guard()) throw new Error('Playing - update after this song / when paused');
    if (!waiting) {
      reload();
      return;
@@ -216,7 +269,7 @@
    let reloaded = false;
    const reloadOnce = () => {
-      if (reloaded) return;
+      if (reloaded || (isPlaying() && !overridden)) return;
      reloaded = true;
      reload();
    };
@@ -224,10 +277,29 @@
    // either way; reload on controllerchange, or after a short safety net.
    container.addEventListener('controllerchange', reloadOnce, { once: true });
    if (scheduleTimeout) scheduleTimeout(reloadOnce, 4000);
    if (overridden) waiting.postMessage({type:'PLAYING',value:false});
    waiting.postMessage({ type: 'SKIP_WAITING' });
  }
-  const SwUpdate = { applyUpdate, refreshShellInPlace, askCacheStatus, BUST_PARAM };
+  function showOfflineStatus(status) {
    const el = root.document?.getElementById('offlineAssetStatus');
    if (el && typeof status?.total === 'number') {
      el.textContent = `${status.offlineReady ? 'Offline ready' : 'Preparing offline'} ${status.cached}/${status.total}`;
    } else if (el && typeof status?.ready === 'boolean') {
      el.textContent = status.ready ? 'Offline ready (legacy cache)' : 'Offline cache incomplete (legacy mode)';
    }
  }
  async function offlineStatus() {
    const registration = await root.navigator?.serviceWorker?.getRegistration();
    const status = await askCacheStatus(registration?.active);
    showOfflineStatus(status);
    return status;
  }
  root.navigator?.serviceWorker?.addEventListener?.('message', event => {
    if (event.data?.type === 'OFFLINE_STATUS') showOfflineStatus(event.data);
  });
  const SwUpdate = { offlineStatus, showOfflineStatus, applyUpdate, refreshShellInPlace, askCacheStatus, BUST_PARAM };
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = SwUpdate;
--- a/frontend/sw-update.test.js
+++ b/frontend/sw-update.test.js
@@ -349,3 +349,41 @@ test('askCacheStatus returns the worker reply', async () => {
  const got = await askCacheStatus(worker, { setTimeout: () => {}, Channel: FakeChannel });
  assert.deepStrictEqual(got, { ready: true, version: 'abc' });
 });
 test('playback guard blocks activation and reload unless explicit override is accepted',async()=>{
 let messages=[],reloads=0;const reg={waiting:{postMessage:m=>messages.push(m)}};
 await assert.rejects(applyUpdate({reg,container:fakeContainer(),reload:()=>reloads++,isPlaying:()=>true,confirmOverride:()=>false}),/Playing/);
 assert.equal(messages.length,0);assert.equal(reloads,0);
 let playing=false;const container=fakeContainer();await applyUpdate({reg,container,reload:()=>reloads++,isPlaying:()=>playing,askStatus:async()=>({ready:true}),setTimeout:()=>{}});playing=true;container.fireControllerChange();assert.equal(reloads,0);
 });
 test('explicit playback override clears the worker guard and reloads once',async()=>{
 const messages=[];let reloads=0;const container=fakeContainer();
 await applyUpdate({reg:{waiting:{postMessage:m=>messages.push(m)}},container,reload:()=>reloads++,isPlaying:()=>true,confirmOverride:()=>true,askStatus:async()=>({ready:true}),setTimeout:()=>{}});
 assert.deepStrictEqual(messages,[{type:'PLAYING',value:false},{type:'SKIP_WAITING'}]);
 container.fireControllerChange();container.fireControllerChange();assert.equal(reloads,1);
 });
 test('an unanswered worker status cannot fall through to an empty legacy refresh',async()=>{
 const vm=require('node:vm'),fs=require('node:fs');
 const sandbox={AssetSyncCore:{CACHE:'ytplayer-assets'},navigator:{serviceWorker:{getRegistration:async()=>({active:{postMessage(){}}})}}};
 vm.runInNewContext(fs.readFileSync(__dirname+'/sw-update.js','utf8'),sandbox);
 await assert.rejects(sandbox.SwUpdate.refreshShellInPlace({cachesApi:{open:async()=>({}),keys:async()=>[]},fetchFn:async()=>({ok:true,json:async()=>({buildTag:'new'})}),isShellCache:()=>true}),/Worker update status unavailable/);
 });
 test('update readiness retains completion progress without blocking the ready fast path',async()=>{
 const phases=[],container=fakeContainer();let downloaded=false;
 const status={ready:true,offlineReady:false,cached:90,total:151,missingFiles:['/optional.js']};
 await applyUpdate({reg:{waiting:{postMessage(){}}},container,askStatus:async()=>status,
  onPhase:(phase,progress)=>phases.push({phase,progress}),refreshShell:async()=>{downloaded=true;},setTimeout:()=>{}});
 assert.equal(downloaded,false);assert.equal(phases[0].phase,'ready');assert.deepStrictEqual(phases[0].progress,status);
 });
 test('offline cache status reports preparing and complete counts in Settings',()=>{
 const vm=require('node:vm'),fs=require('node:fs'),element={};
 const sandbox={document:{getElementById:()=>element}};
 vm.runInNewContext(fs.readFileSync(__dirname+'/sw-update.js','utf8'),sandbox);
 sandbox.SwUpdate.showOfflineStatus({offlineReady:false,cached:90,total:151});
 assert.equal(element.textContent,'Preparing offline 90/151');
 sandbox.SwUpdate.showOfflineStatus({offlineReady:true,cached:151,total:151});
 assert.equal(element.textContent,'Offline ready 151/151');
 sandbox.SwUpdate.showOfflineStatus({ready:true});assert.equal(element.textContent,'Offline ready (legacy cache)');
 });
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -2,7 +2,7 @@
 * sw.js — YT Player Service Worker
 *
 * Strategy:
- *   App shell (HTML/CSS/JS)    → cache-first, versioned cache
+ *   App shell (HTML/CSS/JS)    → cache-first, exact per-file hash keys
 *   /api/* requests            → network-only (never cache yt-dlp results)
 *   /api/download/*            → network-only (streamed binary, never cache)
 *   YouTube thumbnails (i.ytimg.com) → stale-while-revalidate
@@ -14,9 +14,9 @@
 *   2. The client (app.js) shows the "Update available" banner only when the
 *      build it is running differs from the server's /api/version buildTag —
 *      a waiting worker or a broadcast is merely a prompt to re-check.
- *   3. "Refresh UI" (sw-update.js) re-downloads every shell file into every
+ *   3. Install syncs missing assets into ytplayer-assets. "Refresh UI" activates
- *      versioned shell cache (all-or-nothing), activates a waiting worker if
+ *      the verified waiting worker (SKIP_WAITING) and reloads once. The legacy
- *      there is one (SKIP_WAITING), and reloads once.
+ *      full-shell path remains available through ASSET_SYNC=0.
 *   4. activate: if an older *versioned shell cache* is found (i.e. this
 *      activation is genuinely replacing a previous deploy, not just the
 *      first-ever install of a freshly (re)registered worker), broadcast
@@ -27,13 +27,15 @@
 // It changes on every deploy/restart so the cache is busted automatically
 // without any manual version bump.
 const VERSION = typeof __BUILD_TAG__ !== 'undefined' ? __BUILD_TAG__ : 'v1.0.4';
 const ASSET_SYNC = typeof __ASSET_SYNC__ !== 'undefined' ? __ASSET_SYNC__ : true;
 if (ASSET_SYNC) importScripts('/asset-sync-core.js');
 const CACHE   = 'ytplayer-' + VERSION;
 // Prefix shared by every versioned app-shell cache (ytplayer-<VERSION>).
 // Utility caches (ytplayer-thumbs, ytplayer-fonts) intentionally do NOT
 // match this — they aren't versioned and must survive every activate.
 const SHELL_CACHE_PREFIX = 'ytplayer-';
-const UTILITY_CACHES = new Set(['ytplayer-thumbs', 'ytplayer-fonts']);
+const UTILITY_CACHES = new Set(['ytplayer-thumbs', 'ytplayer-fonts', 'ytplayer-assets']);
 const THUMB_CACHE = 'ytplayer-thumbs';
 // Hosts serving video thumbnails and channel avatars. yt-dlp hands back
@@ -58,6 +60,7 @@ const SHELL = [
  '/styles.css',
  '/service-ui.css',
  '/refresh.css',
  '/layout-base.css',
  '/theme-glass.css',
  '/theme-bento-hub.css',
  '/theme-f7.css',
@@ -71,6 +74,11 @@ const SHELL = [
  '/export.js',
  '/async-guard.js',
  '/visible-timer.js',
  '/asset-sync-core.js',
  '/lazy.js',
  '/feature-bootstrap.js',
  '/eq-parameters.js',
  '/assets.json',
  '/sw-update.js',
  '/fingerprint.js',
  '/opfs.js',
@@ -131,9 +139,18 @@ const SHELL = [
  '/piano.js',
  '/setlist-import.js',
  '/car-mode.js',
  '/prewarm-next.js',
  '/car-mode.css',
  '/lower-third.css',
  '/settings-sections.css',
  '/shell-core.js',
  '/views-core.js',
  '/section-rail.js',
  '/presenter.js',
  '/remote-client.js',
  '/watch-party-client.js',
  '/share-external.js',
  '/stats-view.js',
  '/app.js',
  '/manifest.webmanifest',
  '/icons/icon-192.png',
@@ -151,7 +168,7 @@ const SHELL = [
 // skipWaiting() is NOT called here — the page activates a waiting worker
 // from "Refresh UI" (see sw-update.js).
 self.addEventListener('install', (e) => {
-  e.waitUntil(precacheShell());
+  e.waitUntil(ASSET_SYNC ? installAssets() : precacheShell());
 });
 // Fresh requests (`cache: 'reload'` skips the browser HTTP cache, which could
@@ -185,6 +202,7 @@ async function precacheShell() {
 // ---- Activate: evict old caches, claim clients, notify about update ----
 self.addEventListener('activate', (e) => {
  e.waitUntil((async () => {
    if (ASSET_SYNC) { await activateAssets(); return; }
    const keys = await caches.keys();
    // Was there a *previous deploy's* app-shell cache lying around? If so,
@@ -252,6 +270,8 @@ self.addEventListener('fetch', (e) => {
    return;
  }
  if (ASSET_SYNC && request.mode === 'navigate') e.waitUntil(completeAssets());
  // Only intercept GET/HEAD — let POST (sync endpoint) go through unmodified
  if (request.method !== 'GET' && request.method !== 'HEAD') return;
@@ -283,13 +303,62 @@ self.addEventListener('fetch', (e) => {
  }
  // App shell → cache-first, then network, then generic offline fallback
-  e.respondWith(cacheFirst(request));
+  e.respondWith(cacheFirst(request, e.clientId));
 });
 // ---- Message: handle SKIP_WAITING from the client ----
 const playingClients = new Map(), deferredClients = new Set();
 let activeLayout = 'classic', layoutReply;
 let completionTask;
 function completeAssets(force = false) {
  if (!ASSET_SYNC) return Promise.resolve();
  completionTask ||= (async () => {
    const cache = await caches.open(AssetSyncCore.CACHE);
    const m = (await AssetSyncCore.state(cache))?.current;
    if (!m || m.buildTag !== VERSION) return;
    const job = await AssetSyncCore.complete(m, { cache, fetchFn: fetch, force,
      notify: async status => {
        for (const client of await self.clients.matchAll({ type: 'window' }))
          client.postMessage({ type: 'OFFLINE_STATUS', ...status });
      }
    });
    if (!job.offlineReady) {
      // Chromium can wake this job without a page; Safari resumes on the next
      // navigation/online message. No timers outside an event lifetime.
      try { await self.registration.sync?.register('ytp-offline-complete'); } catch {}
    }
  })().catch(error => console.warn('[asset-sync] completion paused', error.message))
    .finally(() => { completionTask = null; });
  return completionTask;
 }
 self.addEventListener('sync', e => {
  if (e.tag === 'ytp-offline-complete') e.waitUntil(completeAssets());
 });
 self.addEventListener('message', (e) => {
-  if (e.data && e.data.type === 'SKIP_WAITING') {
+  if (ASSET_SYNC && e.data?.type === 'LAYOUT' && e.source && typeof e.data.value === 'string') {
-    self.skipWaiting();
+    activeLayout = e.data.value;
    layoutReply?.();
    e.waitUntil((async()=>{
      const cache=await caches.open(AssetSyncCore.CACHE);
      await cache.put('/__ytp_layout',Response.json({layout:activeLayout}));
      const m=await candidate(cache);
      if(m && m.activeLayout!==activeLayout) {
        await AssetSyncCore.syncAssets(m,{cache,fetchFn:fetch,activeLayout});
        m.activeLayout=activeLayout; await cache.put(candidateKey,Response.json(m));
      }
    })());
  }
  if (ASSET_SYNC && ['WARM_ASSETS', 'COMPLETE_ASSETS'].includes(e.data?.type)) {
    e.waitUntil(completeAssets(e.data.type === 'COMPLETE_ASSETS'));
  }
  if (e.data && e.data.type === 'PLAYING' && e.source) {
    playingClients.set(e.source.id, !!e.data.value);
    if (!e.data.value && deferredClients.delete(e.source.id)) self.skipWaiting();
  }
  if (e.data && e.data.type === 'SKIP_WAITING' && e.source && e.source.id) {
    const id = e.source && e.source.id;
    if (playingClients.get(id)) deferredClients.add(id);
    else self.skipWaiting();
  }
  // "Is your shell already downloaded?" — a waiting worker has precached the
  // whole new build during install, so "Refresh UI" can swap to it instantly
@@ -297,7 +366,19 @@ self.addEventListener('message', (e) => {
  // deletes its cache on failure, but a cache can also be evicted under
  // storage pressure, so the files are actually checked.
  if (e.data && e.data.type === 'CACHE_STATUS') {
    if (ASSET_SYNC) e.waitUntil(completeAssets());
    e.waitUntil((async () => {
      if (ASSET_SYNC) {
        let reply = { ready: false, missing: -1, version: VERSION };
        try {
          const cache = await caches.open(AssetSyncCore.CACHE), state = await AssetSyncCore.state(cache);
          const pending = await candidate(cache), m = pending || state?.current;
          if(m) reply = await AssetSyncCore.status(m,cache,{previous:pending ? state?.current : state?.previous,activeLayout:e.data.activeLayout || (pending ? m.activeLayout : activeLayout) || 'classic'});
        } catch {}
        reply.type = 'CACHE_STATUS'; reply.assetSync = true; reply.completing = !!completionTask && !reply.offlineReady;
        if(e.ports && e.ports[0]) e.ports[0].postMessage(reply); else if(e.source) e.source.postMessage(reply);
        return;
      }
      let missing = SHELL.length;
      try {
        const cache = await caches.open(CACHE);
@@ -316,7 +397,8 @@ self.addEventListener('message', (e) => {
 // ============================================================================
 // Cache-first: serve from cache; if missing, fetch, cache, return.
-async function cacheFirst(request) {
+async function cacheFirst(request, clientId) {
  if (ASSET_SYNC) return assetFetch(request, clientId);
  const cache  = await caches.open(CACHE);
  // Shell files are precached under their plain URL; index.html asks for them as
  // `file?v=<build>` (so the HTTP cache can keep them forever) — match ignoring it.
@@ -422,3 +504,117 @@ async function staleWhileRevalidate(request, cacheName) {
  // surface a real network error instead.
  return cached || (await networkFetch) || Response.error();
 }
 // Installation stores a candidate only. Activation publishes one atomic state record.
 const candidateKey = '/__ytp_candidate/' + VERSION;
 async function candidate(cache) { const r = await cache.match(candidateKey); return r ? r.json() : null; }
 async function installAssets() {
  const r = await fetch('/api/manifest', { cache: 'no-store' });
  if (!r.ok) throw Error('Manifest unavailable');
  const m = await r.json();
  if (m.buildTag !== VERSION) throw Error('Deployment changed during install');
  const cache = await caches.open(AssetSyncCore.CACHE);
  const remembered = await cache.match('/__ytp_layout');
  if(remembered)activeLayout=(await remembered.json()).layout || 'classic';
  let layoutKnown = !!remembered;
  const clients = await self.clients.matchAll({type:'window',includeUncontrolled:true});
  await new Promise(resolve=>{
    const timer=setTimeout(resolve,500); layoutReply=()=>{layoutKnown=true;clearTimeout(timer);resolve();};
    for(const client of clients)client.postMessage({type:'ASSET_LAYOUT_REQUEST'});
  });
  layoutReply=null; m.activeLayout=activeLayout;
  const freshInstall = !(await AssetSyncCore.state(cache));
  const fetchAsset = async (url,init) => {
    // Fonts/icons still use plain URLs in CSS/manifest. On first install reuse
    // their HTTP-cache responses, but only if the hash proves current bytes.
    if(freshInstall && /^(?:\/fonts\/|\/icons\/|\/manifest.webmanifest)/.test(url)) {
      const r = await fetch(url.split('?')[0],{...init,cache:'force-cache'});
      if(r.ok && r.headers.get('X-Asset-Hash') === url.split('v=')[1]) return r;
    }
    return fetch(url,init);
  };
  await AssetSyncCore.syncAssets(m, { cache, fetchFn: fetchAsset, activeLayout });
  // Older pages cannot report their saved choice. Keep every layout ready for
  // that one migration so an immediate offline reload cannot lose its theme.
  if(!layoutKnown && ((await AssetSyncCore.state(cache)) || (await caches.keys()).some(isVersionedShellCache))) {
    const layouts=new Set(Object.keys(m.groups).filter(name=>name.startsWith('layout:')));
    for(const name of layouts)for(const dependency of m.groups[name].dependencies || [])layouts.add(dependency);
    await AssetSyncCore.syncAssets(m,{cache,fetchFn:fetchAsset,groups:[...layouts]});
  }
  await cache.put(candidateKey, new Response(JSON.stringify(m)));
 }
 async function migrateLegacy(cache, m) {
  // Legacy responses lack hash headers. Verify their actual bytes locally before
  // retaining them; this also preserves old whole-build URLs in already-open tabs.
  const names = (await caches.keys()).filter(isVersionedShellCache);
  let previous = null;
  for (const name of names) {
    const old = await caches.open(name);
    const files = {}, legacyURLs = {};
    for (const req of await old.keys()) {
      const u = new URL(req.url), p = u.pathname === '/' ? '/index.html' : u.pathname;
      if (!m.files[p]) continue;
      const r = await old.match(req);
      if (!r || !r.ok) continue;
      const bytes = await r.clone().arrayBuffer();
      const digest = await crypto.subtle.digest('SHA-256', bytes);
      const h = [...new Uint8Array(digest)].map(b => b.toString(16).padStart(2,'0')).join('').slice(0,10);
      const headers = new Headers(r.headers); headers.set('X-Asset-Hash', h);
      files[p] = { h }; legacyURLs[p] = p + '?v=' + h;
      await cache.put(legacyURLs[p], new Response(bytes, { headers }));
    }
    if (Object.keys(files).length) previous = { buildTag:name.slice(SHELL_CACHE_PREFIX.length),files,groups:{core:{files:Object.keys(files)}},legacyURLs };
  }
  if (previous && !(await AssetSyncCore.state(cache))) await cache.put(AssetSyncCore.STATE, new Response(JSON.stringify({current:previous})));
  return names;
 }
 async function activateAssets() {
  const cache = await caches.open(AssetSyncCore.CACHE), m = await candidate(cache);
  if (!m) throw Error('Missing candidate manifest');
  const names = await migrateLegacy(cache,m), old = await AssetSyncCore.state(cache);
  const previousClients = (await self.clients.matchAll({type:'window'})).map(c=>c.id);
  await AssetSyncCore.commit(m,cache,{previousClients,activeLayout:m.activeLayout || activeLayout});
  // Legacy deletion occurs strictly after verified commit.
  await Promise.all(names.map(n => caches.delete(n)));
  for (const req of await cache.keys()) if(new URL(req.url).pathname.startsWith('/__ytp_candidate/')) await cache.delete(req);
  await self.clients.claim();
  if(old && old.current.buildTag !== m.buildTag) for(const c of await self.clients.matchAll({type:'window',includeUncontrolled:true})) c.postMessage({type:'SW_UPDATE_AVAILABLE',version:VERSION});
  // Completion owns a message-event lifetime, not the activation barrier.
  // In particular, a legacy client's four-second reload must not wait for it.
  self.registration.active.postMessage({ type: 'COMPLETE_ASSETS' });
  try { console.info('[asset-sync] storage', await self.navigator.storage.estimate()); } catch {}
 }
 async function assetFetch(request, clientId) {
  const cache = await caches.open(AssetSyncCore.CACHE), state = await AssetSyncCore.state(cache);
  if(!state) return fetch(request);
  const u = new URL(request.url);
  let m = state.current;
  if(u.origin !== self.location.origin) return fetch(request);
  if(u.searchParams.has('__ytpfresh')) return fetch(request);
  const nav = request.mode === 'navigate' || u.pathname === '/' || u.pathname === '/index.html';
  if(!nav && state.previousClients?.includes(clientId) && state.previous?.files[u.pathname]) m = state.previous;
  let path = nav ? '/index.html' : u.pathname;
  let key;
  if(u.searchParams.has('v') && state.current.files[u.pathname]) {
    key = u.pathname + u.search;
    if(state.previous?.legacyURLs && u.searchParams.get('v') === state.previous.buildTag) key = state.previous.legacyURLs[path] || key;
  } else if(m.files[path]) key = AssetSyncCore.url(path,m.files[path]);
  if(key) {
    const cached = await cache.match(key);
    const h = new URL(key,self.location.origin).searchParams.get('v');
    if(cached && cached.headers.get('X-Asset-Hash') === h) return cached;
    if(state.current.files[path]?.h === h) {
      const previousKey=AssetSyncCore.fallback(state.current,state.previous,path);
      const previousResponse=previousKey && await cache.match(previousKey);
      if(previousResponse && previousResponse.headers.get('X-Asset-Hash')===state.previous.files[path].h) {
        // A stale body returned under a new URL must not poison the browser's
        // resource cache either. Its decoded stream has no transport encoding.
        const headers=new Headers(previousResponse.headers);headers.set('Cache-Control','no-store');
        for(const name of ['Content-Encoding','Content-Length','Transfer-Encoding'])headers.delete(name);
        return new Response(previousResponse.body,{status:previousResponse.status,headers});
      }
    }
    try { const r = await fetch(key); if(r.ok && r.headers.get('X-Asset-Hash') !== h) return new Response('Asset version unavailable',{status:409}); if(r.ok && request.method !== 'HEAD') await cache.put(key,r.clone()); return r; } catch { return new Response('Offline',{status:503}); }
  }
  try { return await fetch(request); } catch { return new Response('Offline',{status:503}); }
 }
--- a/frontend/sw.test.js
+++ b/frontend/sw.test.js
@@ -56,6 +56,7 @@ function loadSw(initialCacheKeys, { fetchImpl } = {}) {
  };
  const sandbox = {
    __ASSET_SYNC__: false,
    self: self_,
    caches: caches_,
    fetch: fetchImpl || (async () => { throw new Error('fetch not mocked'); }),
--- a/frontend/theme-bento-hub.css
+++ b/frontend/theme-bento-hub.css
@@ -183,7 +183,7 @@ html[data-layout="bento-hub"] .player-pane.empty .player-stage { border:0; borde
 html[data-layout="bento-hub"] :is(#controls,.now-meta,.notes-panel,.upnext,.related-panel) { flex-shrink:0; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--bg-1); box-shadow:var(--shadow-sm); }
 html[data-layout="bento-hub"] #controls { gap:12px; }
 html[data-layout="bento-hub"] #controls .deck-main { gap:8px; }
-html[data-layout="bento-hub"] #controls .deck-main .ctrl { width:44px; height:44px; min-width:44px; padding:10px; background:var(--bg-2); color:var(--text); border:1px solid var(--line); border-radius:999px; box-shadow:none; }
+html[data-layout="bento-hub"] #controls .deck-main .ctrl { width:44px; height:44px; min-width:44px; padding:10px; background:var(--bg-2); color:var(--text); border:1px solid var(--line); border-radius:16px; box-shadow:none; }
 html[data-layout="bento-hub"] #controls .deck-main .ctrl.play { width:56px; height:56px; padding:14px; background:var(--accent); color:var(--on-accent); border:0; box-shadow:0 6px 18px -4px var(--accent-glow); }
 html[data-layout="bento-hub"] #controls .deck-main .ctrl.play svg { width:28px; height:28px; }
 html[data-layout="bento-hub"] #controls .deck-main .ctrl.active { color:var(--accent-sec); border-color:var(--accent-sec); }
@@ -314,7 +314,7 @@ html[data-layout="bento-hub"] .hero-title { background:none; -webkit-text-fill-c
 html[data-layout="bento-hub"] .ph-logo { width:56px; height:56px; border-radius:16px; color:var(--on-accent); animation:none; }
 html[data-layout="bento-hub"] .player-pane.empty :is(#controls,#nowPlayingMeta,#notesPanel,.upnext) { display:none; }
 html[data-layout="bento-hub"] .body:has(.cards[data-view="settings"]) #listFilterBar { display:none; }
-html[data-layout="bento-hub"] #controls .deck-main .ctrl { border-radius:999px; }
+html[data-layout="bento-hub"] #controls .deck-main .ctrl { border-radius:16px; }
 html[data-layout="bento-hub"] #controls input[type="range"]::-webkit-slider-thumb { border:0; box-shadow:var(--shadow-sm); }
 html[data-layout="bento-hub"] #nowPlayingMeta .np-actions :is(#addBtn,#saveBtn,#exportBtn,#serviceBtn) { border:1px solid var(--line); border-radius:10px; background:var(--bg-2); color:var(--text); box-shadow:none; min-width:44px; }
 html[data-layout="bento-hub"] #nowPlayingMeta .np-actions #saveBtn.done { color:var(--accent-sec); }
--- a/frontend/theme-glass.css
+++ b/frontend/theme-glass.css
@@ -14,12 +14,6 @@
 * ========================================================================== */
 /* Elements that only exist for this theme stay hidden elsewhere. */
 .stg-overlay, .skip10, .deck-chips, .vol-pct, .mode-name { display: none; }
 .np-btn .ti, .np-btn .tl { pointer-events: none; }
 .np-btn .ti { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
 .np-btn .i-done { display: none; }
 .np-btn.done .i-save { display: none; }
 .np-btn.done .i-done { display: inline; }
 html[data-layout="glass-stage"] {
  --bg: #121317;
@@ -93,7 +87,7 @@ html[data-layout="glass-stage"] .stg-skip, html[data-layout="glass-stage"] .stg-
 html[data-layout="glass-stage"] .stg-skip { width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
 html[data-layout="glass-stage"] .stg-skip svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
 html[data-layout="glass-stage"] .stg-play { width: 62px; height: 62px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #ff553c, #ff8471); box-shadow: 0 0 34px rgba(255, 85, 60, 0.6); }
-html[data-layout="glass-stage"] .stg-play svg { width: 32px; height: 32px; fill: currentColor; stroke: none; }
+html[data-layout="glass-stage"] .stg-play svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width:1.5; }
 /* ---- 2. deck ---- */
 html[data-layout="glass-stage"] #controls { padding: 16px; gap: 14px; }
@@ -101,7 +95,7 @@ html[data-layout="glass-stage"] #controls .deck-main { display: flex; justify-co
 html[data-layout="glass-stage"] #controls .deck-main .ctrl { width: 46px; height: 46px; border-radius: 16px; background: var(--tile); border: 1px solid var(--glass-line); }
 html[data-layout="glass-stage"] #controls .deck-main .ctrl.skip10 { display: grid; width: 44px; height: 44px; color: var(--text-2); }
 html[data-layout="glass-stage"] #controls .deck-main .ctrl.skip10 svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
-html[data-layout="glass-stage"] #controls .deck-main .ctrl.play { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--grad); box-shadow: 0 12px 30px rgba(255, 85, 60, 0.55), 0 0 20px rgba(255, 85, 60, 0.35); }
+html[data-layout="glass-stage"] #controls .deck-main .ctrl.play { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--tile); backdrop-filter:blur(12px); box-shadow:none; }
 html[data-layout="glass-stage"] #controls .deck-main .ctrl.play svg { width: 32px; height: 32px; }
 html[data-layout="glass-stage"] #controls .time { font: 600 12px var(--mono); }
@@ -202,8 +196,6 @@ html[data-layout="glass-stage"] .stg-overlay { justify-content: flex-start; }
 html[data-layout="glass-stage"] .stg-mid { margin: auto 0; }
 /* =========================== fidelity pass (matches the approved mockup) =========================== */
 .stg-bot, .ch-badge, .upnext-clear, .list-sub, .p2p-strip { display: none; }
 .sleep-status .sl-ic, .sleep-status .sl-sub { display: none; }
 /* stage HUD */
 html[data-layout="glass-stage"] .stg-bot { display: flex; position: absolute; left: 12px; right: 12px; bottom: 12px; justify-content: space-between; pointer-events: none; }
@@ -292,7 +284,6 @@ html[data-layout="glass-stage"] .ps-txt small { font: 400 10px var(--mono); colo
 html[data-layout="glass-stage"] .ps-dl { width: 34px; height: 34px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, 0.07); color: var(--accent-bright); font-size: 16px; cursor: pointer; }
 /* ===== quick row (clean rebuild): [A | B | ↺]  [Fullscreen]  [More] ===== */
 .ab-group { display: contents; }
 html[data-layout="glass-stage"] #controls .dk-quick { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; }
 html[data-layout="glass-stage"] #controls .ab-group { display: inline-flex; align-items: stretch; gap: 2px; padding: 3px; border-radius: 14px; background: var(--tile); border: 1px solid var(--glass-line); flex: 0 1 auto; min-width: 0; }
 html[data-layout="glass-stage"] #controls .ab-group .ctrl {
@@ -339,7 +330,6 @@ html[data-layout="glass-stage"] #controls .ab-group .ctrl { padding: 0 7px !impo
 html[data-layout="glass-stage"] #controls .ab-group #abClearBtn { padding: 0 7px !important; font-size: 13px !important; }
 /* ===== A-B · Fullscreen · More — styled like the mockup ===== */
 .mc-tune { display: none; }
 html[data-layout="glass-stage"] #controls .dk-quick { flex-wrap: wrap; justify-content: space-between; gap: 8px; }
 html[data-layout="glass-stage"] #controls .ab-group { padding: 2px; border-radius: 12px; gap: 0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.05); }
 html[data-layout="glass-stage"] #controls .ab-group .ctrl { height: 26px !important; padding: 0 10px !important; border-radius: 8px !important; font: 500 10px var(--mono) !important; color: var(--text-dim); }
--- a/frontend/transport-icons.test.js
+++ b/frontend/transport-icons.test.js
@@ -0,0 +1,48 @@
 const {test}=require('node:test');
 const assert=require('node:assert/strict');
 const {readFileSync,readdirSync}=require('node:fs');
 const {join}=require('node:path');
 const vm=require('node:vm');
 const {transport}=require('./download-actions');
 test('transport symbols cover all actions and layouts with monochrome SVG',()=>{
 for(const kind of ['play','pause','previous','next','back10','forward10','back15','forward']){
  assert.match(transport.svg(kind),new RegExp(`href="#transport-${kind}"`));
  assert.match(transport.svg(kind),/stroke="currentColor"/);
  assert.equal((transport.svg(kind).match(/<use /g)||[]).length,4,'layout selection lives on visible use elements');
  for(const layout of ['classic','f7-swipe','glass-stage','bento-hub'])assert.ok(transport.variants[layout][kind]);
 }
 assert.throws(()=>transport.svg('unknown'),/Unknown transport/);
 });
 test('playback UI swaps shared symbols and accessible names without changing handlers',()=>{
 const buttons=Object.fromEntries(['playBtn','stgPlay','miniPlayBtn','servicePlayBtn'].map(id=>[id,{onclick:()=>id,setAttribute(k,v){this[k]=v;}}]));
 const handlers=Object.values(buttons).map(b=>b.onclick);let changes=0;
 const Player={master:{paused:true}},classes=[];
 const app=readFileSync(join(__dirname,'app.js'),'utf8');
 const body=app.slice(app.indexOf('function updatePlayBtn() {'),app.indexOf('// "⚠ Broken"'));
 const sandbox={Player,TransportIcons:transport,Remote:{changed(){changes++;}},$:id=>buttons[id],document:{querySelector:()=>({classList:{toggle:(...args)=>classes.push(args)}})}};
 vm.runInNewContext(body,sandbox);
 for(const paused of [true,false,true]){
  Player.master.paused=paused;sandbox.updatePlayBtn();
  for(const b of Object.values(buttons)){assert.match(b.innerHTML,new RegExp(`#transport-${paused?'play':'pause'}`));assert.equal(b['aria-label'],paused?'Play':'Pause');}
 }
 assert.equal(changes,3);assert.deepEqual(Object.values(buttons).map(b=>b.onclick),handlers);
 assert.deepEqual(classes,[['is-paused',true],['is-paused',false],['is-paused',true]]);
 });
 test('runtime sources never render legacy transport glyphs',()=>{
 const failures=[];
 for(const file of readdirSync(__dirname).filter(f=>/\.(js|html|css)$/.test(f)&&!f.endsWith('.test.js'))){
  readFileSync(join(__dirname,file),'utf8').split('\n').forEach((line,i)=>{
   // Legacy input decoder accepts old labels; its output uses shared symbols.
   if(file==='glass-controls.js'&&line.startsWith('  const glyphs = '))return;
   if(/[▶⏸⏮⏭⏪⏩⏯◀❚]/u.test(line))failures.push(`${file}:${i+1}`);
  });
 }
 assert.deepEqual(failures,[]);
 });
 test('state changes preserve named SVG nodes used by editor controls',()=>{
 let icon={id:'playIcon'};
 const button={querySelector(){return icon;},set innerHTML(value){this.markup=value;icon={id:''};},setAttribute(name,value){this[name]=value;}};
 transport.set(button,'pause');
 assert.equal(icon.id,'playIcon');assert.equal(button['aria-label'],'Pause');assert.match(button.markup,/#transport-pause-f7-swipe/);
 });
--- a/frontend/views-core.js
+++ b/frontend/views-core.js
--- a/frontend/watch-party-client.js
+++ b/frontend/watch-party-client.js
@@ -0,0 +1,458 @@
 /* Lazy classic chunk; its executing singleton stays pinned until reload. */
 (window.YT ||= {}).Party = (() => {
  const noop = { boot() {}, guestActive: () => false, intercept: () => false, afterLoad() {} };
  if (!WEB || typeof WebSocket === 'undefined') return noop;
  const PID_KEY = 'ytpPartyPid', HOST_KEY = 'ytpPartyHost', NAME_KEY = 'ytpPartyName';
  const ls = {
    get: (k) => { try { return localStorage.getItem(k); } catch { return null; } },
    set: (k, v) => { try { if (v == null) localStorage.removeItem(k); else localStorage.setItem(k, v); } catch { /* blocked */ } },
  };
  let pid = ls.get(PID_KEY);
  if (!pid) { pid = 'p' + Math.random().toString(36).slice(2, 12) + Date.now().toString(36); ls.set(PID_KEY, pid); }
  const wsUrl = (q) => `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws/party?${new URLSearchParams(q)}`;
  const st = {
    ws: null, role: null, code: '', secret: '', name: '', members: [], chat: [], state: null, offset: 0,
    dj: { enabled: false, entries: [] }, djPending: false,
    allowControl: false, quietUntil: 0, detached: false, retry: null, pushTimer: null, driftTimer: null, lastPush: '',
    voice: { on: false, stream: null, muted: false, pcs: new Map(), audios: new Map() },
    minimized: false,
  };
  const inParty = () => !!st.role;
  const isHost = () => st.role === 'host';
  const guestActive = () => st.role === 'guest' && !st.detached;
  const send = (m) => { if (st.ws && st.ws.readyState === 1) st.ws.send(JSON.stringify(m)); };
  const serverNow = () => Date.now() + st.offset;
  const myName = () => st.name || (data.profile && data.profile.name) || ls.get(NAME_KEY) || '';
  // ---------- connection ----------
  function connect() {
    clearTimeout(st.retry);
    const q = { role: st.role, pid, name: myName() || 'Guest' };
    if (st.code) q.code = st.code;
    if (isHost() && st.secret) q.secret = st.secret;
    const ws = new WebSocket(wsUrl(q));
    st.ws = ws;
    ws.onmessage = (e) => { let m; try { m = JSON.parse(e.data); } catch { return; } onMessage(m); };
    ws.onclose = (e) => {
      if (st.ws !== ws) return;
      st.ws = null;
      if (!inParty()) return;
      if (e.code === 4010 || e.code === 4004 || e.code === 4003) {
        const why = e.code === 4004 ? 'That party code doesn’t exist (or has ended).' : e.code === 4003 ? 'This party belongs to another host.' : 'The party ended.';
        leave(false);
        toast(`🎉 ${why}`, { duration: 5000 });
        return;
      }
      setStatus('Reconnecting…');
      st.retry = setTimeout(connect, 3000);
    };
    ws.onerror = () => { if (!st.code && isHost()) setStatus('Could not reach the server'); };
  }
  function onMessage(m) {
    DirectMedia.attach('party', { send, peers: () => st.members.filter(m => m.pid !== pid).map(m => ({ id: m.pid, name: m.name, files: m.host && st.state?.directAvailable && st.state?.v ? [st.state.v.id] : [] })) });
    if (m.type === 'direct') { DirectMedia.handle('party', m); return; }
    if (m.type === 'hello') {
      st.code = m.code;
      if (m.secret) { st.secret = m.secret; ls.set(HOST_KEY, JSON.stringify({ code: m.code, secret: m.secret })); }
      st.offset = (m.now || Date.now()) - Date.now();
      st.members = m.members || [];
      st.chat = m.chat || [];
      st.dj = m.dj || { enabled: false, entries: [] }; st.djPending = false;
      st.allowControl = !!m.allowControl;
      setStatus(isHost() ? 'You’re hosting' : 'Synced with the host');
      render();
      if (isHost()) pushState(true);
      else if (m.state) applyState(m.state);
      if (st.voice.on) { send({ type: 'voice', on: true }); connectVoicePeers(); }
    } else if (m.type === 'dj') {
      st.dj = { enabled: m.enabled, entries: m.entries || [] }; render();
    } else if (m.type === 'dj-play' && isHost()) {
      st.djPending = false; if (m.video) { Player._handoff = null; playVideoAt(m.video); } else { st.dj.entries = st.dj.entries.filter(e => !e.approved); advanceQueue(); }
    } else if (m.type === 'state') {
      st.state = m.state;
      if (st.role === 'guest') applyState(m.state);
    } else if (m.type === 'members') {
      st.members = m.members || [];
      if (m.joined) sysMsg(`${m.joined} joined`);
      if (m.left) sysMsg(`${m.left} left${m.hostAway ? ' — waiting for the host to come back' : ''}`);
      render();
      syncVoicePeers();
    } else if (m.type === 'chat') {
      st.chat.push(m.msg);
      if (st.chat.length > 100) st.chat.shift();
      renderChat();
      if (m.msg.pid !== pid && (st.minimized || $('partyPanel').classList.contains('hidden'))) toast(`💬 ${m.msg.from}: ${m.msg.text}`);
    } else if (m.type === 'settings') {
      st.allowControl = !!m.allowControl;
      render();
      if (!isHost()) sysMsg(st.allowControl ? 'The host lets everyone control playback' : 'Only the host controls playback now');
    } else if (m.type === 'cmd' && isHost()) {
      runCommand(m);
    } else if (m.type === 'rtc') {
      onRtc(m.from, m.data);
    } else if (m.type === 'ended') {
      toast(`🎉 ${m.reason || 'The party ended'}`, { duration: 5000 });
    }
  }
  // ---------- host: broadcast ----------
  function stateNow() {
    const meta = current && current.meta;
    const M = Player.master;
    return {
      directAvailable: !!meta && cachedIds.has(meta.id) && DirectMedia.enabled() && data.settings.p2pShare !== false,
      v: meta ? { id: meta.id, title: meta.title || '', channel: meta.channel || '', thumbnail: meta.thumbnail || '', duration: meta.duration || 0 } : null,
      cur: M ? M.currentTime || 0 : 0,
      paused: !M || M.paused,
      rate: (M && M.playbackRate) || 1,
    };
  }
  function pushState(force = false) {
    if (!isHost() || !st.ws) return;
    const s = stateNow();
    const key = JSON.stringify({ ...s, cur: Math.round(s.cur) });
    if (!force && key === st.lastPush) return;
    st.lastPush = key;
    send({ type: 'state', state: s });
  }
  function runCommand(m) {
    switch (m.cmd) {
      case 'toggle': Player.toggle(); break;
      case 'play': Player.play(); break;
      case 'pause': Player.pause(); break;
      case 'seek': if (Number.isFinite(Number(m.t))) Player.seek(Math.max(0, Number(m.t))); break;
      case 'next': playNext(); break;
      case 'prev': playPrev(); break;
      default: return;
    }
    toast(`🎉 ${m.from}: ${m.cmd === 'seek' ? `jumped to ${fmtTime(Number(m.t))}` : m.cmd}`);
    setTimeout(() => pushState(true), 200);
  }
  // ---------- guest: follow ----------
  const quiet = (ms = 1500) => { st.quietUntil = Date.now() + ms; };
  function targetTime(s) {
    if (!s) return 0;
    return s.paused ? s.cur : s.cur + ((serverNow() - (s.ts || serverNow())) / 1000) * (s.rate || 1);
  }
  async function applyState(s) {
    st.state = s;
    if (st.role !== 'guest' || st.detached || !s || !s.v) { render(); return; }
    const target = targetTime(s);
    if (!current || !current.meta || current.meta.id !== s.v.id) {
      quiet(6000);
      await playVideoAt({ ...s.v }, target);
      return;
    }
    const M = Player.master;
    if (!M) return;
    if ((M.playbackRate || 1) !== (s.rate || 1)) { els.speed.value = String(s.rate || 1); Player.applySpeed(); }
    if (Math.abs((M.currentTime || 0) - target) > 1.5) { quiet(); Player.seek(target); }
    if (s.paused && !M.paused) { quiet(); Player.pause(); updatePlayBtn(); }
    else if (!s.paused && M.paused) { quiet(); Player.play(); updatePlayBtn(); }
  }
  // A guest's own actions: forwarded when allowed, else they go off sync.
  function onLocalAction(kind) {
    if (st.role !== 'guest' || st.detached || Date.now() < st.quietUntil) return;
    if (st.allowControl) {
      const M = Player.master;
      if (kind === 'seeked') send({ type: 'cmd', cmd: 'seek', t: M.currentTime });
      else send({ type: 'cmd', cmd: kind === 'pause' ? 'pause' : 'play' });
      return;
    }
    st.detached = true;
    setStatus('Off sync — you paused or skipped on your own');
    render();
  }
  // playNext/playPrev guard: guests don't change songs themselves.
  function intercept(cmd) {
    if (st.role !== 'guest' || st.detached) return false;
    if (st.allowControl) send({ type: 'cmd', cmd });
    else toast('🎉 The host picks the songs in a watch party');
    return true;
  }
  function resync() {
    st.detached = false;
    setStatus('Synced with the host');
    render();
    applyState(st.state);
  }
  // ---------- voice (WebRTC mesh) ----------
  const ICE = [{ urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:stun1.l.google.com:19302' }];
  function peer(other) {
    let pc = st.voice.pcs.get(other);
    if (pc) return pc;
    pc = new RTCPeerConnection({ iceServers: ICE });
    st.voice.pcs.set(other, pc);
    if (st.voice.stream) st.voice.stream.getTracks().forEach((t) => pc.addTrack(t, st.voice.stream));
    pc.onicecandidate = (e) => { if (e.candidate) send({ type: 'rtc', to: other, data: { ice: e.candidate } }); };
    pc.ontrack = (e) => {
      let a = st.voice.audios.get(other);
      if (!a) { a = new Audio(); a.autoplay = true; a.setAttribute('playsinline', ''); st.voice.audios.set(other, a); }
      a.srcObject = e.streams[0];
      a.play().catch(() => {});
    };
    pc.onconnectionstatechange = () => { if (['failed', 'closed'].includes(pc.connectionState)) dropPeer(other); render(); };
    return pc;
  }
  function dropPeer(other) {
    const pc = st.voice.pcs.get(other);
    if (pc) { try { pc.close(); } catch { /* closed */ } st.voice.pcs.delete(other); }
    const a = st.voice.audios.get(other);
    if (a) { a.srcObject = null; st.voice.audios.delete(other); }
  }
  async function offerTo(other) {
    const pc = peer(other);
    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);
    send({ type: 'rtc', to: other, data: { sdp: pc.localDescription } });
  }
  async function onRtc(from, d) {
    if (!st.voice.on || !d) return;
    try {
      if (d.sdp) {
        const pc = peer(from);
        await pc.setRemoteDescription(d.sdp);
        if (d.sdp.type === 'offer') {
          const ans = await pc.createAnswer();
          await pc.setLocalDescription(ans);
          send({ type: 'rtc', to: from, data: { sdp: pc.localDescription } });
        }
      } else if (d.ice) {
        await peer(from).addIceCandidate(d.ice);
      }
    } catch { /* a glare/ICE hiccup — the next members update retries */ }
  }
  // The member with the smaller pid makes the offer, so each pair connects once.
  function connectVoicePeers() {
    if (!st.voice.on) return;
    for (const m of st.members) if (m.voice && m.pid !== pid && !st.voice.pcs.has(m.pid) && pid < m.pid) offerTo(m.pid).catch(() => {});
  }
  function syncVoicePeers() {
    const voiced = new Set(st.members.filter((m) => m.voice).map((m) => m.pid));
    for (const other of [...st.voice.pcs.keys()]) if (!voiced.has(other)) dropPeer(other);
    connectVoicePeers();
  }
  async function toggleVoice() {
    if (st.voice.on) {
      st.voice.on = false;
      for (const other of [...st.voice.pcs.keys()]) dropPeer(other);
      if (st.voice.stream) st.voice.stream.getTracks().forEach((t) => t.stop());
      st.voice.stream = null;
      send({ type: 'voice', on: false });
      render();
      return;
    }
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia || typeof RTCPeerConnection === 'undefined') { toast('Voice chat isn’t supported in this browser'); return; }
    try {
      st.voice.stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true } });
    } catch (e) {
      toast('🎤 Microphone blocked: ' + (e.message || e.name));
      return;
    }
    st.voice.on = true;
    st.voice.muted = false;
    send({ type: 'voice', on: true });
    toast('🎤 Voice on — headphones stop the music echoing into your mic', { duration: 5000 });
    render();
    connectVoicePeers();
  }
  function toggleMute() {
    if (!st.voice.stream) return;
    st.voice.muted = !st.voice.muted;
    st.voice.stream.getAudioTracks().forEach((t) => { t.enabled = !st.voice.muted; });
    render();
  }
  // ---------- lifecycle ----------
  function start() {
    st.role = 'host';
    st.code = ''; st.secret = ''; st.chat = []; st.members = [];
    ls.set(HOST_KEY, null);
    showPanel();
    setStatus('Starting…');
    connect();
    beginTimers();
  }
  function join(code, name) {
    code = String(code || '').toUpperCase().replace(/[^A-Z0-9]/g, '');
    if (code.length !== 6) { toast('Party codes have 6 letters/numbers'); return; }
    if (name) { st.name = name; ls.set(NAME_KEY, name); }
    st.role = 'guest';
    st.code = code; st.detached = false; st.chat = []; st.members = [];
    showPanel();
    setStatus('Joining…');
    connect();
    beginTimers();
  }
  function beginTimers() {
    clearInterval(st.pushTimer); clearInterval(st.driftTimer);
    st.pushTimer = setInterval(() => pushState(), 3000);
    st.driftTimer = setInterval(() => { if (st.role === 'guest' && st.state && !st.detached) applyState(st.state); }, 2500);
  }
  function leave(sendEnd = true) {
    if (isHost() && sendEnd) send({ type: 'end' });
    if (st.voice.on) toggleVoice();
    const ws = st.ws;
    st.ws = null;
    st.role = null; st.code = ''; st.secret = '';
    clearTimeout(st.retry); clearInterval(st.pushTimer); clearInterval(st.driftTimer);
    try { if (ws) ws.close(); } catch { /* gone */ }
    ls.set(HOST_KEY, null);
    $('partyPanel').classList.add('hidden');
    render();
  }
  // ---------- UI ----------
  // Lyrics-instead-of-video is a per-device view: each guest chooses it for
  // themselves, and the host's playback is untouched (the video keeps playing
  // behind the lyrics, so sync and audio carry on).
  const lyricsOn = () => !!(Notes.stageLyrics && Notes.stageLyrics.on());
  function renderLyricsToggle() {
    const b = document.querySelector('#partyPanel .pt-lyrics');
    if (!b) return;
    b.textContent = lyricsOn() ? '📺 Show the video' : '🎤 Lyrics instead of video';
    b.classList.toggle('on', lyricsOn());
  }
  function setStatus(t) { const el = $('ptStatus'); if (el) el.textContent = t; }
  function sysMsg(text) { st.chat.push({ sys: true, text, at: Date.now() }); renderChat(); }
  function link() { return `${location.origin}/?party=${st.code}`; }
  function showPanel() { Lazy.load('feature:party-dj').then(render).catch(error=>toast(error.message)); Lazy.load('feature:direct').catch(error=>toast(error.message)); $('partyPanel').classList.remove('hidden'); st.minimized = false; $('partyPanel').classList.remove('min'); render(); }
  function render() {
    const panel = $('partyPanel');
    const chip = $('navPartyBtn');
    if (chip) {
      const label = chip.querySelector('.nav-label');
      if (label) label.textContent = inParty() ? `Party · ${st.members.length}` : 'Watch party';
      else chip.textContent = inParty() ? `🎉 Party · ${st.members.length}` : '🎉 Watch party';
    }
    if (!panel || panel.classList.contains('hidden')) return;
    const nameOk = !!myName();
    if (!inParty()) {
      panel.querySelector('.pt-body').innerHTML = `
        <p class="modal-text">Watch together: everyone's player follows the host, with chat and optional voice.</p>
        ${nameOk ? '' : '<label class="pt-row">Your name <input class="pt-name" maxlength="40" placeholder="e.g. Rex" /></label>'}
        <button class="rv-primary" type="button" data-act="start">Start a party</button>
        <div class="pt-or">or join one</div>
        <div class="pt-row"><input class="pt-code" maxlength="7" placeholder="CODE" autocapitalize="characters" /><button class="np-btn" type="button" data-act="join">Join</button></div>`;
      $('ptTitle').textContent = '🎉 Watch party';
      setStatus('');
      return;
    }
    $('ptTitle').textContent = `🎉 Party ${st.code || '…'}`;
    const s = st.state && st.state.v;
    panel.querySelector('.pt-body').innerHTML = `
      ${st.code ? `<div class="pt-share"><code>${escapeHtml(link())}</code><button class="np-btn" type="button" data-act="copy">Copy</button>${navigator.share ? '<button class="np-btn" type="button" data-act="share">↗</button>' : ''}</div>` : ''}
      ${!isHost() && s ? `<div class="pt-now">${TransportIcons.svg('play')} ${escapeHtml(s.title)}</div>` : ''}
      ${!isHost() && st.detached ? '<button class="rv-primary" type="button" data-act="resync">↻ Re-sync with the host</button>' : ''}
      <div class="pt-members">${st.members.map((m) => `<span class="pt-member${m.pid === pid ? ' me' : ''}">${m.host ? '👑 ' : ''}${escapeHtml(m.name)}${m.voice ? ' 🎤' : ''}</span>`).join('')}</div>
      ${isHost() ? `<label class="pt-toggle"><input type="checkbox" data-act="allow" ${st.allowControl ? 'checked' : ''} /> Guests can control playback</label>` : ''}
      <button class="np-btn pt-lyrics${lyricsOn() ? ' on' : ''}" type="button" data-act="lyrics">${lyricsOn() ? '📺 Show the video' : '🎤 Lyrics instead of video'}</button>
      <div class="pt-voice">
        <button class="np-btn${st.voice.on ? ' on' : ''}" type="button" data-act="voice">${st.voice.on ? '🎤 Leave voice' : '🎤 Join voice'}</button>
        ${st.voice.on ? `<button class="np-btn" type="button" data-act="mute">${st.voice.muted ? '🔇 Unmute' : '🔈 Mute'}</button>` : ''}
        <span class="pt-voice-n">${st.voice.on ? `${st.voice.pcs.size} connected` : ''}</span>
      </div>
      <div class="pt-chat" id="ptChat"></div>
      <form class="pt-send"><input class="pt-msg" maxlength="500" placeholder="Message…" autocomplete="off" /><button class="np-btn" type="submit">Send</button></form>
      <button class="pt-leave" type="button" data-act="leave">${isHost() ? 'End the party' : 'Leave the party'}</button>`;
    const dj = document.createElement('div'); panel.querySelector('.pt-body').append(dj);
    if (Lazy.loaded('feature:party-dj')) PartyDJ.render(dj, { state: st.dj, host: isHost(), pid, send, search: async q => { const result = await API.search(q); return result.results || result.videos || []; } });
    renderChat();
  }
  function renderChat() {
    const box = $('ptChat');
    if (!box) return;
    box.innerHTML = st.chat.map((c) => c.sys
      ? `<div class="pt-sys">${escapeHtml(c.text)}</div>`
      : `<div class="pt-line${c.pid === pid ? ' me' : ''}"><b>${escapeHtml(c.from)}</b> ${escapeHtml(c.text)}</div>`).join('');
    box.scrollTop = box.scrollHeight;
  }
  function open() {
    const panel = $('partyPanel');
      if (typeof closeSidebar === 'function') { try { closeSidebar(); } catch { /* not open */ } }
      if (panel.classList.contains('hidden')) showPanel();
      else if (st.minimized) { st.minimized = false; panel.classList.remove('min'); }
      else if (!inParty()) panel.classList.add('hidden');
      else { st.minimized = true; panel.classList.add('min'); }
  }
  function bindUi() {
    const panel = $('partyPanel');
    $('ptMin').addEventListener('click', () => {
      if (!inParty()) { panel.classList.add('hidden'); return; }
      st.minimized = !st.minimized;
      panel.classList.toggle('min', st.minimized);
    });
    panel.addEventListener('keydown', (e) => e.stopPropagation());
    panel.addEventListener('click', async (e) => {
      const a = e.target.closest('[data-act]');
      if (!a || a.tagName === 'INPUT') return;
      const act = a.dataset.act;
      const nameIn = panel.querySelector('.pt-name');
      const name = nameIn ? nameIn.value.trim() : '';
      if ((act === 'start' || act === 'join') && !myName() && !name) { toast('Enter your name first'); if (nameIn) nameIn.focus(); return; }
      if (name) { st.name = name; ls.set(NAME_KEY, name); }
      if (act === 'start') start();
      else if (act === 'join') join(panel.querySelector('.pt-code').value);
      else if (act === 'copy') { try { await navigator.clipboard.writeText(link()); toast('Party link copied ✓'); } catch { toast('Copy blocked'); } }
      else if (act === 'share') { try { await navigator.share({ title: 'Join my watch party', url: link() }); } catch { /* dismissed */ } }
      else if (act === 'resync') resync();
      else if (act === 'voice') toggleVoice();
      else if (act === 'mute') toggleMute();
      else if (act === 'lyrics') { Notes.stageLyrics.set(!lyricsOn()); renderLyricsToggle(); }
      else if (act === 'leave') leave(true);
    });
    panel.addEventListener('change', (e) => {
      if (e.target.dataset.act === 'allow') { st.allowControl = e.target.checked; send({ type: 'settings', allowControl: st.allowControl }); }
    });
    panel.addEventListener('submit', (e) => {
      e.preventDefault();
      const input = panel.querySelector('.pt-msg');
      const text = input.value.trim();
      if (text) { send({ type: 'chat', text }); input.value = ''; }
    });
    // Host: push on every player change; guests: detect their own actions.
    ['play', 'pause', 'seeked', 'ratechange', 'loadedmetadata'].forEach((ev) => {
      [els.video, els.audio].forEach((el) => el.addEventListener(ev, (e) => {
        if (el !== Player.master) return;
        if (isHost()) pushState(true);
        else if (ev === 'play' || ev === 'pause' || ev === 'seeked') onLocalAction(ev);
      }));
    });
  }
  function boot() {
    bindUi();
    render();
    // Resume hosting after a reload.
    try {
      const h = JSON.parse(ls.get(HOST_KEY) || 'null');
      if (h && h.code && h.secret) { st.role = 'host'; st.code = h.code; st.secret = h.secret; showPanel(); connect(); beginTimers(); }
    } catch { /* none */ }
    let code = '';
    try { code = (new URLSearchParams(location.search).get('party') || '').toUpperCase(); } catch { /* no URL */ }
    if (code) {
      try { const u = new URL(location.href); u.searchParams.delete('party'); history.replaceState(null, '', u.pathname + u.search + u.hash); } catch { /* keep */ }
      if (myName()) join(code);
      else { showPanel(); const c = $('partyPanel').querySelector('.pt-code'); if (c) c.value = code; toast('Enter your name, then tap Join'); }
    }
  }
  return {
    nextDJ: () => { if (!isHost() || !st.dj.enabled || !st.dj.entries.some(e => e.approved)) return false; if (!st.djPending) { st.djPending = true; send({ type: 'dj', action: 'take' }); } return true; },
    open, boot, guestActive, intercept, renderLyricsToggle, afterLoad: () => pushState(true),
    state: () => ({
      role: st.role, code: st.code, detached: st.detached, members: st.members.length, voice: st.voice.on,
      peers: st.voice.pcs.size, peerStates: [...st.voice.pcs.values()].map((pc) => pc.connectionState),
      remoteAudio: [...st.voice.audios.values()].filter((a) => a.srcObject && a.srcObject.getAudioTracks().some((t) => t.readyState === 'live')).length,
      chat: st.chat.length, allowControl: st.allowControl,
    }),
    _join: join, _start: start,
  };
 })();
--- a/frontend/worker-imports.test.js
+++ b/frontend/worker-imports.test.js
@@ -0,0 +1,12 @@
 const {test}=require('node:test'), assert=require('node:assert/strict'), vm=require('node:vm'), fs=require('node:fs');
 for(const name of ['hash-worker','direct-recv-worker','p2p-recv-worker','opfs-worker'])test(name+' imports its originating page hashes before handling the first operation',async()=>{
 const urls=[], replies=[];const self={postMessage:m=>replies.push(m)};
 const sandbox={self,console,URL,setTimeout,clearTimeout,Promise,TextEncoder,FileSystemFileHandle:class {createSyncAccessHandle(){}},navigator:{storage:{getDirectory:async()=>{throw Error('fixture: no disk writes')}}},fetch:async()=>{throw Error('fixture: no network')},importScripts:u=>{urls.push(u);if(u.includes('/sha256.js'))self.Sha256={create:()=>({})};if(u.includes('/resume-core.js'))self.ResumeCore={};}};
 vm.runInNewContext(fs.readFileSync(__dirname+'/'+name+'.js','utf8'),sandbox);
 assert.deepEqual(urls,[]);
 await self.onmessage({data:{name:'x',op:'open',videoId:'x',url:'/fixture',file:{id:'x',cid:'a'.repeat(64)},assetUrls:{sha256:'/sha256.js?v=sha',wasm:'/sha256-wasm.js?v=wasm',resume:'/resume-core.js?v=resume'}}});
 await new Promise(r=>setImmediate(r));
 assert.equal(urls[0],'/sha256.js?v=sha');assert.equal(self.__ASSET_URLS__.wasm,'/sha256-wasm.js?v=wasm');
 if(name==='opfs-worker')assert.ok(urls.includes('/resume-core.js?v=resume'));
 assert.ok(replies.length>0);
 });
--- a/perf/README.md
+++ b/perf/README.md
@@ -141,3 +141,346 @@ node perf/hidden-timers.mjs
 ```
 Exits with code 0 on success, or code 1 if any interval fails to pause, fails to resume, or if page errors occur.
 ## Phase 1 production-client migration
 Build the production fixture locally without contacting the unavailable production
 site (COMMON.md takes precedence over the older live-tag instructions above):
 ```bash
 perf/make-shell-fixture.sh b77938a 1175f1a1d2c1
 node perf/migration.mjs                    # Chromium and WebKit
 node perf/migration.mjs --browser webkit  # one browser
 ```
 The harness archives the actual `b77938a` server and uses the reconstructed old
 frontend, isolated database/media/upload paths, and an ephemeral origin behind the
 `lossy` throttle/stall proxy. It restarts onto the current server and frontend at
 that same origin, then invokes the OLD application's update check and clicks its
 actual Refresh UI button. Assertions cover one banner, exactly one reload, cleared
 update-attempt state, all new SHELL entries with correct hashes, no script errors,
 and offline boot. Plain, stale `?v=<oldTag>` and `?__ytpfresh=` asset responses are
 also compared byte-for-byte with the current files. Results are stored in
 `perf/results/phase1-migration-2026-10-07.json`; scratch trees are removed on exit.
 No service-worker source is patched or simulated. Offline checks stop Bun and
 block the proxy; WebKit avoids its broken native setOffline API. Known WebKit
 transport errors for disconnected version/recommendation requests are verified
 separately from script errors.
 The current server snapshots static bytes at boot; restart it after frontend
 changes. `ASSET_HASHING=0` restores the previous single-tag stamp/cache behavior.
 The manifest's tag hashes sorted canonical metadata: CSS/JS URLs are stamped
 before hashing the index, with its derived build-meta placeholder intact. The
 published index/SW hashes describe their final served bytes after tag injection;
 these derived hashes are not fed recursively into their own build identity.
 JS-created workers/importScripts/dynamic imports retain their existing plain URLs
 in Phase 1. Adding a separate loader would require changing the intentionally
 unchanged SHELL; worker import URL propagation belongs with the client migration.
 WASM binaries are embedded in the existing `sha256-wasm.js`/`loudness-wasm.js`,
 which receive hashed URLs as HTML scripts. Font preloads retain plain URLs to match
 `fonts.css`; the webmanifest and its icon URLs also stay plain and precached.
 `piano-engine.mjs` is manifested but is historically absent from SHELL; this
 existing offline piano limitation is deferred to the loader phase.
 ## Phase 2 incremental-sync verification
 The current migration harness verifies the production page's own ready fast path
 into `ytplayer-assets`: no `__ytpfresh` downloads, no reload before Refresh UI,
 one banner/reload, an open N-1 tab, playback guard, incremental refresh after
 an eviction, and offline launch. It preserves the legacy user-triggered reload
 exception. Async CacheStorage/registration conditions are polled with awaited
 `page.evaluate`; Playwright's `waitForFunction` does not poll async predicates.
 ```bash
 node perf/migration.mjs --browser all --profile lossy
 node perf/migration.mjs --browser all --profile unthrottled
 node perf/baseline.mjs --runs 1 --browser all --profile lte --scenario all \
  --out perf/results/phase2-final-2026-10-07.json \
  --compare perf/results/after-phase0-2026-10-07.json
 ASSET_SYNC=0 node perf/baseline.mjs --runs 1 --browser all --profile lte \
  --scenario offline --out perf/results/phase2-rollback-2026-10-07.json
 ASSET_HASHING=0 node perf/baseline.mjs --runs 1 --browser all --profile lte \
  --scenario offline --out perf/results/phase2-hashing-rollback-2026-10-07.json
 ```
 Results now include response paths/statuses and compressed response-body bytes
 for cold/update runs. The total includes service-worker script checks/imports;
 inspect individual responses to distinguish those from app asset downloads.
 Migration results are `phase2-migration-<profile>-2026-10-07.json`.
 `ASSET_SYNC=0` selects the legacy path while preserving the persistent utility
 cache. `ASSET_HASHING=0` also selects legacy sync because single-tag URLs cannot
 pass per-file hash checks. In Phase 2 all assets.json groups blocked; Phase 3 selects core plus the active
 layout and warms background groups at idle. Incremental mode now caches the manifested
 `piano-engine.mjs` even though it remains absent from the legacy SHELL.
 ## Phase 3 lazy loading and staged apply
 ```bash
 node perf/lazy.mjs --browser all
 node perf/migration.mjs --browser all --profile lossy
 node perf/migration.mjs --browser all --profile unthrottled
 node perf/baseline.mjs --runs 1 --browser all --profile lte --scenario all \
  --out perf/results/phase3-final-2026-10-08.json \
  --compare perf/results/after-phase0-2026-10-07.json
 node perf/baseline.mjs --runs 1 --browser all --profile lte --scenario cold \
  --frontend-commit 7bc5b4f8b50d78ece3cca5100d54a97fece2748a \
  --out perf/results/phase3-phase0-initial-2026-10-08.json
 ASSET_SYNC=0 node perf/baseline.mjs --runs 1 --browser all --profile lte \
  --scenario offline --out perf/results/phase3-sync-rollback-2026-10-08.json
 ASSET_HASHING=0 node perf/baseline.mjs --runs 1 --browser all --profile lte \
  --scenario offline --out perf/results/phase3-hashing-rollback-2026-10-08.json
 ```
 `initialJsCss` sums compressed Resource Timing bodies for page JS/CSS initiated
 before DOMContentLoaded, excluding SW precache and later idle feature parsing.
 The saved Phase 0 results lack that metric: `--frontend-commit` reconstructs its
 frontend in scratch using the current delivery backend for a matched initial-byte
 comparison. Historical boot/FCP comparisons still use `after-phase0`. Reduced
 single-run measurements are directional; Phase 5 supplies repeated medians.
 Update scenarios now wait for every build-N group to finish idle caching before
 starting the counter, excluding unfinished initial downloads. Waiting-worker
 bytes represent blocking readiness; an inactive layout's changed CSS downloads
 later at idle after activation.
 The browser harness checks pre-body layout selection, immediate offline reload,
 four distinct Car mode controls, optional Settings search, all extension panels,
 zero network for warmed first use/layout switches, contract guards and pinned
 instances. Known WebKit disconnected API transport errors are recorded separately;
 script errors still fail. Save-Data prevents automatic warming.
 The index contains inert JSON and an external head bootstrap under unchanged
 CSP. Source JSON mirrors assets.json for native/static shells; the server replaces
 it with hashed build-local URLs. No boot-time manifest network request is added.
 Shared layout visibility defaults remain eager in layout-base.css.
 Pure EQ settings metadata and DeviceDB remain eager to preserve synchronous
 player defaults and offline file bookkeeping. P2P/direct parse on actual use or
 the existing eight-second sharing startup. Searching Settings explicitly loads
 optional panels so their original labels remain searchable.
 | JS-requested assets | Phase 3 URL treatment |
 |---|---|
 | opfs-worker.js, hash-worker.js, direct-recv-worker.js, p2p-recv-worker.js | Lazy.worker uses embedded per-file URL |
 | Workers' sha256.js, resume-core.js, sha256-wasm.js | First postMessage carries originating build URLs; importScripts uses them |
 | piano-engine.mjs | Dynamic import uses Lazy.url; incremental cache warms it |
 | vendor/framework7-swipe.min.js | Ordered layout group and fallback use Lazy.url |
 | loudness-wasm.js | Remains an eager stamped script; embedded binary needs no separate URL |
 | fonts/fonts.css and font preloads; webmanifest/icons | Plain URLs stay aligned with CSS/manifest references; all belong to manifested cache groups |
 Legacy pages cannot report their selected layout. Their one-time migration blocks
 all layouts to preserve immediate offline selection; modern pages block only the
 reported layout and its shared controls. Executing groups never re-evaluate live.
 See plans/phase3-staged-apply-decision.md: Phase 4 must add disposal/state handoff.
 ## Phase 4 seams and verification
 The dependency inventory in `plans/phase4-seams.md` records Phase 3 declarations,
 resolved outside references and byte/coupling rankings. Reproduce its source using
 `npm install --prefix perf/.tmp/analysis --no-audit --no-fund acorn@8 eslint-scope@8`
 and `node perf/analyze-app.cjs cd4a25a` (development scratch dependencies only).
 Shell/shared view/Settings/section-rail definitions remain eager before app.js.
 Presenter, Remote client, Watch party, Share/External and Stats view register
 classic singletons on `window.YT`; synchronous playback hooks remain facades.
 Executing chunks remain pinned: disposal/state handoff is still required before
 any live replacement can be enabled.
 ```bash
 node --test frontend/*.test.js
 (cd server && bun install && bun run test)
 node perf/hidden-timers.mjs
 node perf/seams.mjs --browser all
 node perf/lazy.mjs --browser all
 node perf/migration.mjs --browser all --profile lossy \
  --out perf/results/phase4-migration-lossy-2026-10-08.json
 node perf/migration.mjs --browser all --profile unthrottled \
  --out perf/results/phase4-migration-unthrottled-2026-10-08.json
 node perf/baseline.mjs --runs 1 --browser all --profile lte --scenario all \
  --out perf/results/phase4-final-2026-10-08.json \
  --compare perf/results/after-phase0-2026-10-07.json
 node perf/baseline.mjs --runs 3 --browser chromium --profile lte --scenario cold \
  --out perf/results/phase4-cold-isolated-2026-10-08.json
 ```
 `update-feature` appends one comment to presenter.js in scratch, installs the worker,
 explicitly activates, then waits for the changed background chunk to be verified
 in CacheStorage. It asserts that no other application JS/CSS/font/icon payload
 transfers; derived index/manifest and worker script checks are included in totals.
 `all` includes this scenario when the source contains presenter.js. Cold records
 now include individual long-task timing without changing the aggregate metric,
 plus the source frontend build tag. WebKit does not expose the long-task API.
 Migration supports `--out` to preserve earlier phase evidence. Existing lazy
 harness results are copied to `phase4-lazy-2026-10-08.json` after each Phase 4 run
 and the Phase 3 result is restored. No production requests or deploys are needed.
 ## Phase 5 complete measurements
 ```bash
 node --test perf/measurement.test.mjs
 node perf/baseline.mjs --runs 5 --browser all --profile all --scenario all \
  --out perf/results/final-2026-10-08.json \
  --compare perf/results/baseline-2026-10-07.json
 node perf/lazy.mjs --browser all --out perf/results/phase5-lazy-2026-10-08.json
 ```
 Warm reloads now wait for verified idle asset caching before counters reset and
 assert that no application asset body transfers. CSS update totals now include
 activation and the changed inactive stylesheet's verified background cache fill,
 matching the feature-update boundary. `readyWireBytes`/`readyDuration` retain the
 blocking readiness snapshot separately. Core updates stop at blocking readiness
 because app.js is blocking. Every update asserts that the only application asset
 payload is the edited file; worker script checks/imports and index/manifest count
 as overhead in the total. Historical Phase 3/4 CSS numbers were readiness only.
 No product behavior changes are involved in these measurement corrections.
 Keep browser/build/test processes idle during full timing measurements. WebKit's
 zero long-task field means unavailable, not zero work. Autoplay-blocked/media-ready
 null results do not establish playback performance or iPhone audio continuity.
 ## UI geometry and media icons
 ```sh
 node perf/ui-geometry.mjs
 node perf/ui-icons.mjs
 node --test frontend/media-icons.test.js
 ```
 Both harnesses run Chromium and WebKit at mobile dimensions with stubbed SpeechRecognition and local Saved/Queue metadata. They serve only the frontend, block service workers and external requests, and never download media. Geometry tests cold and switched layouts, six widths (320–430), mic visible/hidden and update icon visible/hidden: center spread ≤1px, touch targets ≥40px, Saved image/text gap ≥8px, no horizontal overflow or clipped car control. `--quick` limits widths and speech cases; `--browser` selects an engine; `--frontend` selects historical fixtures. `--measure-only --label before` records known broken geometry without exiting nonzero.
 Icon checks switch the same page through four layouts × dark/light/contrast, assert SVG definitions, inherited colour, stroke family and save/progress/offline state, and save Queue/Now Playing/navigation shots. Glass Stage intentionally hides bottom navigation, so its full page is recorded instead. Any assertion failure exits nonzero. Shots and raw measurements live in git-ignored plans/ui-shots/. Full production inventory: plans/ui-icon-inventory.md. Native speech recognition, installed-PWA safe-area insets and iPhone rendering still need device verification.
 ### Cold waterfall diagnosis
 `--source-root perf/.tmp/<historical-worktree>` runs that worktree's matching
 frontend **and server**; `--frontend-commit` instead combines archived frontend
 with the current backend. Run historical comparisons sequentially to avoid CPU
 contention. The result records `sourceCommit`, `sourceRoot` and the served build.
 Every cold sample has `waterfalls`: proxy request order/start/headers/end times
 and page Resource Timing discovery/start/end times. Proxy times start when
 tracking begins; page times start at navigation. Compare within each clock,
 then use the page FCP to locate the rendering dependency.
 Pass `--assert-cold` on new builds to require exactly one positive-byte app.js
 response in every cold sample, including worker installation. Omit this assertion
 when diagnosing historical regressions.
 Phase 6 counts its fetch-owned app.js response in initial JS/CSS bytes. Since the
 bootstrap consumes that response asynchronously, DOMContentLoaded no longer means
 app execution is complete; compare the existing actual boot-done landmark.
 `--scenario warm,offline,update-js,update-css,update-feature` runs a regression
 sweep without repeating an already-completed cold acceptance run.
 ## Runtime manifest hygiene
 `server/asset-manifest.js` excludes unit tests (`*.test.js`, `*.test.mjs`),
 Markdown, text licences/data (`*.txt`), C build sources, `*.entry.js` build
 entries, `/admin.html`, and files below any `perf/` directory from the runtime
 manifest and both build-tag modes. They remain directly servable with the usual
 hash and cache headers. If a matching file is genuinely needed at runtime, add
 its exact root-relative path to the optional `include` array in
 `frontend/assets.json`; group declarations referencing excluded files fail at boot
 unless explicitly included.
 The offline completeness harness compares cache contents with the runtime
 manifest dynamically; it must not hard-code the old 151-file inventory. See
 `plans/manifest-hygiene-report.md` and `perf/results/hygiene-*.json` for the
 before/after measurements and compatibility checks.
 ## Existing-install settings preservation
 ```sh
 node perf/settings-persist.mjs --browser all --target main --allow-unsupported-webkit
 node perf/settings-persist.mjs --browser all --target 0b8e398 --allow-unsupported-webkit --out perf/results/settings-persist-live-base.json
 ```
 The harness archives b77938a and the requested target into worktree-local scratch,
 serves actual Bun servers at the same origin, sets values through Settings UI
 handlers, reloads, invokes the old banner's actual Refresh UI button, and diffs
 every `_ytpdata.settings` key and control. A real local H.264/AAC clip verifies
 OPFS storage and blob playback before/after in Chromium. A local HTTP proxy
 mocks profile timestamps for worker-owned fetches on both engines and tests
 backup import. There are no external profile writes or media requests.
 Failures exit 1. Linux WebKit has no native OPFS; without the explicit allowance
 the unverified storage capability exits 2. The allowance only skips unsupported
 storage assertions; every preservation/profile/import assertion still runs.
 No storage shim substitutes for a genuine iPhone test. Snapshot results and the
 per-key table are in `plans/settings-persist-investigation.md`.
 ## Device autosave investigation (2026-10-09)
 `autosave.mjs` starts an isolated real Bun server inside this worktree, seeds its
 media-cache DB with a three-second H.264/AAC clip, and uses 414×896 Playwright
 contexts with the Framework7 Swipe layout. It checks OPFS bytes, `cachedIds`,
 Saved and Downloads views, and both Settings handlers. Public network requests
 are blocked. No production access or YouTube download is needed.
 ```bash
 bash perf/make-shell-fixture.sh b77938a 1175f1a1d2c1
 node perf/autosave.mjs --frontend perf/fixtures/shell-1175f1a1d2c1 \
  --asset-hashing 0 --asset-sync 0 --allow-unsupported-webkit \
  --out perf/results/autosave-b77938a.json
 node perf/autosave.mjs --frontend-commit main --allow-unsupported-webkit \
  --out perf/results/autosave-main.json
 node perf/autosave.mjs --browser chromium --out perf/results/autosave-current.json
 node --test frontend/autosave.test.js
 ```
 Options: `--frontend <directory>` or `--frontend-commit <revision>`;
 `--browser chromium|webkit|all`; `--scenarios <comma-separated names>`;
 `--asset-hashing 0|1`, `--asset-sync 0|1`; `--out <json>`.
 A failed assertion exits 1. Missing native OPFS exits 2 unless explicitly
 allowed with `--allow-unsupported-webkit`. On this Linux Playwright WebKit build,
 `navigator.storage` is absent, including in persistent contexts; enabling its
 MiniBrowser storage feature flags also did not expose it. WebKit therefore
 checks real UI/settings/save guards and records `supported:false`; those results
 **do not establish a successful WebKit OPFS save**. No storage shim is installed.
 Run without the allowance on a Safari-capable environment to require native OPFS.
 Observed contracts in both b77938a and current code:
 | Action | Device save |
 | --- | --- |
 | Open a video with default settings | No |
 | Open with `saveBeforePlay:true`, video mode | Yes |
 | Open audio-only, or `preferStream:true` | No |
 | Create/add to a playlist, even with `autoPreload:false` | Yes |
 | Launch with playlist videos and `autoPreload:true` | Yes |
 | Launch with `autoPreload:false`, unpinned playlist | No |
 | Launch with a pinned playlist, even with auto-preload off | Yes |
 | Enable either save setting through Settings | Saves as above; persisted |
 Chromium: all 12 cases pass for old/current builds and Phase 1/2 tips.
 Phase 3/4/5 tips and both rollback flags pass the six positive cases
 (`open-save-first,playlist-add,playlist-boot,pinned-boot,settings-enable,settings-save-first`).
 JSON evidence is in `perf/results/autosave-*.json`. No old=saves/new=doesn't
 transition was found, so there is no defensible breaking commit or product fix.
 The unit tests cover playlist/pinning policy, duplicate saves, and failed or
 paused saves remaining retryable without being marked Saved.
 Neighbour audit: Downloads, Saved, OPFS, download controls and error helpers
 remain eager core assets. Export awaits `feature:export`; Share/External await
 `feature:share-external`; worker creation is synchronous and receives build-local
 hash/resume URLs. DirectMedia's unloaded `hasSource()` facade returns false, so
 an early paired-source lookup can choose the server instead; this does not
 prevent the server save. P2P settings counts queried before its delayed lazy
 startup can initially show no registration. These remain follow-up candidates,
 not demonstrated causes of missing OPFS saves. The scout's proposed Data Saver
 cause was rejected: its guards affect static warming and stream pre-resolution,
 not `preload()` or `saveBeforePlay`.
 Still required on the owner's installed iPhone PWA: record the running build,
 check Save before playing / Audio-only / Auto-save settings, open a fresh video,
 add it to a playlist, and inspect Downloads failure details and Saved after a
 relaunch/offline playback. Verify available storage and whether iOS evicted
 previous copies. A failing iPhone sequence is needed to continue the bisect.
 Transport controls use the same shared-definition approach as media/save icons.
 `node perf/ui-icons.mjs` also checks all four layouts × dark/light/contrast in
 Chromium and WebKit: shared monochrome symbols, accessible labels, visible
 44px targets, F7 filled glyphs, runtime layout changes, main/stage/mini/service
 play-pause state swaps, fullscreen and Car mode refreshes, and actual paired
 remote toggles against a mocked relay. Transport previews and remote screenshots
 are saved in ignored `plans/transport-shots/`. Run `node perf/ui-geometry.mjs`
 for the 320–430px search-bar and Saved-row geometry matrix. OS lock-screen buttons
 remain platform-rendered through the existing MediaSession handlers.
--- a/perf/analyze-app.cjs
+++ b/perf/analyze-app.cjs
@@ -0,0 +1,14 @@
 const fs=require('fs'), acorn=require('./.tmp/analysis/node_modules/acorn'), scope=require('./.tmp/analysis/node_modules/eslint-scope');
 const {execFileSync}=require('node:child_process');
 const commit=process.argv[2];
 const read=file=>commit?execFileSync('git',['show',commit+':'+file],{encoding:'utf8',maxBuffer:2000000}):fs.readFileSync(file,'utf8');
 const src=read('frontend/app.js');
 function parse(s){return acorn.parse(s,{ecmaVersion:2024,sourceType:'script',locations:true,ranges:true});}
 const ast=parse(src), mgr=scope.analyze(ast,{ecmaVersion:2024,sourceType:'script',optimistic:true,ignoreEval:true});
 const vars=mgr.globalScope.variables, names=new Set(vars.map(v=>v.name));
 const rows=vars.map(v=>{const decl=v.defs[0].parent||v.defs[0].node;const stmt=ast.body.find(n=>n.start<=decl.start&&n.end>=decl.end);return {name:v.name,start:stmt.start,end:stmt.end,line:stmt.loc.start.line,bytes:Buffer.byteLength(src.slice(stmt.start,stmt.end)),outside:v.references.filter(r=>r.identifier.start<stmt.start||r.identifier.start>=stmt.end).map(r=>r.identifier.loc.start.line),imports:[]};});
 for(const row of rows){const deps=new Set();for(const v of vars)if(v.name!==row.name&&v.references.some(r=>r.identifier.start>=row.start&&r.identifier.start<row.end))deps.add(v.name);row.imports=[...deps];}
 for(const file of (commit?execFileSync('git',['ls-tree','--name-only',commit+':frontend'],{encoding:'utf8'}).trim().split('\n'):fs.readdirSync('frontend')).filter(f=>f.endsWith('.js')&&!f.endsWith('.test.js')&&f!=='app.js')){try{const other=scope.analyze(parse(read('frontend/'+file)),{ecmaVersion:2024,sourceType:'script',optimistic:true,ignoreEval:true});for(const r of other.globalScope.through){if(names.has(r.identifier.name))rows.find(x=>x.name===r.identifier.name).outside.push(file+':'+r.identifier.loc.start.line);}}catch(e){if(!file.includes('entry'))console.error(file,e.message);}}
 fs.writeFileSync('perf/.tmp/analysis/declarations.json',JSON.stringify(rows,null,2));
 const candidates={shell:['Recommendations','renderSidebar','renderHomePlaylists','updateHomeGridScrollState','updateBottomChrome','setHomeOverPlayer','showMiniBar','updateMiniBar','hideMiniBar','setTile','updateNowPlayingActions','renderSmartSidebar'],presenter:['Presenter'],remote:['Remote'],party:['Party'],share:['Share','External'],stats:['renderStats'],notes:['Notes'],settings:['renderSettings'],service:['ServiceVisual','enterServiceMode','exitServiceMode'],editor:['openVideoEditor'],export:['exportToDevice'],sectionRail:['SectionRail'],gestures:['Gestures']};
 const summary=Object.entries(candidates).map(([name,list])=>{const chosen=rows.filter(r=>list.includes(r.name));const coupling=new Set(chosen.flatMap(r=>r.imports).filter(n=>!list.includes(n)));return {name,bytes:chosen.reduce((s,r)=>s+r.bytes,0),coupling:coupling.size,ratio:Math.round(chosen.reduce((s,r)=>s+r.bytes,0)/Math.max(1,coupling.size)),imports:[...coupling],outside:chosen.flatMap(r=>r.outside),list};}).sort((a,b)=>b.ratio-a.ratio);fs.writeFileSync('perf/.tmp/analysis/candidates.json',JSON.stringify(summary,null,2));console.log(summary.map(r=>[r.name,r.bytes,r.coupling,r.ratio].join(' ')).join('\n'));
--- a/perf/autosave.mjs
+++ b/perf/autosave.mjs
@@ -0,0 +1,128 @@
 #!/usr/bin/env node
 // Device autosave checks against a real, isolated Bun server and a local H.264 clip.
 import assert from 'node:assert/strict';
 import { spawn, execFileSync } from 'node:child_process';
 import { mkdirSync, mkdtempSync, symlinkSync, rmSync, statSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 import { createServer } from 'node:net';
 import { createRequire } from 'node:module';
 import { chromium, webkit } from 'playwright';
 const root = path.resolve(import.meta.dirname, '..');
 const require = createRequire(import.meta.url);
 const { createClient } = require(path.join(root, 'server/node_modules/@libsql/client'));
 const args = process.argv.slice(2);
 function option(name, fallback) { const i = args.indexOf(name); return i < 0 ? fallback : args[i + 1]; }
 const target = option('--browser', 'all');
 assert.ok(['all', 'chromium', 'webkit'].includes(target));
 mkdirSync(path.join(root, 'perf/.tmp'), { recursive: true });
 const scratch = mkdtempSync(path.join(root, 'perf/.tmp/autosave-'));
 const revision = option('--frontend-commit', null);
 let tree = path.resolve(option('--frontend', path.join(root, 'frontend')));
 if (revision) {
  const archive = path.join(scratch, 'frontend.tar');
  writeFileSync(archive, execFileSync('git', ['archive', revision, 'frontend'], { cwd: root, maxBuffer: 30 * 1024 * 1024 }));
  execFileSync('tar', ['-xf', archive, '-C', scratch]);
  tree = path.join(scratch, 'frontend');
 }
 const portProbe = createServer();
 await new Promise(r => portProbe.listen(0, '127.0.0.1', r));
 const port = portProbe.address().port;
 await new Promise(r => portProbe.close(r));
 const origin = `http://127.0.0.1:${port}`;
 const clip = { id: 'benchmedia01', title: 'Autosave local clip', channel: 'Regression', duration: 3, thumbnail: '' };
 const media = path.join(scratch, 'data/media');
 mkdirSync(media, { recursive: true });
 symlinkSync(tree, path.join(scratch, 'public'));
 const mp4 = path.join(media, clip.id + '.1.mp4');
 const dbPath = path.join(scratch, 'data/test.db');
 const child = spawn('bun', [path.join(root, 'server/server.js')], { cwd: scratch, env: { ...process.env, PORT: String(port), DB_PATH: dbPath, MEDIA_DIR: media, UPLOAD_DIR: path.join(scratch, 'uploads'), DATA_DIR: path.join(scratch, 'data'), ASSET_HASHING: option('--asset-hashing', '1'), ASSET_SYNC: option('--asset-sync', '1'), BUILD_TAG: '' }, stdio: ['ignore', 'pipe', 'pipe'] });
 let serverLog = '';
 for (const stream of [child.stdout, child.stderr]) stream.on('data', c => { serverLog = (serverLog + c).slice(-5000); });
 const results = { revision: revision || tree, browsers: {}, failures: [], unsupported: [] };
 const scenarios = ['open-default', 'open-save-first', 'open-audio-only', 'open-prefer-stream', 'playlist-add', 'playlist-add-setting-off', 'playlist-existing-add', 'playlist-boot', 'playlist-boot-off', 'pinned-boot', 'settings-enable', 'settings-save-first'];
 try {
  for (let i = 0; ; i++) {
    try { if ((await fetch(origin + '/api/version')).ok) break; } catch {}
    if (i === 100 || child.exitCode !== null) throw Error('Bun server failed: ' + serverLog);
    await new Promise(r => setTimeout(r, 100));
  }
  results.buildTag = (await (await fetch(origin + '/api/version')).json()).buildTag;
 execFileSync('ffmpeg', ['-y', '-f', 'lavfi', '-i', 'color=c=blue:s=160x90:r=10:d=3', '-f', 'lavfi', '-i', 'sine=frequency=440:duration=3', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-c:a', 'aac', '-movflags', '+faststart', '-shortest', mp4], { stdio: 'ignore' });
 execFileSync('ffmpeg', ['-y', '-i', mp4, '-vn', '-c:a', 'copy', path.join(media, clip.id + '.1.m4a')], { stdio: 'ignore' });
  const db = createClient({ url: 'file:' + dbPath });
  await db.execute({ sql: 'INSERT OR REPLACE INTO media_cache (video_id,status,gen,size,height,vcodec,acodec,duration,meta,last_access) VALUES (?,?,?,?,?,?,?,?,?,?)', args: [clip.id, 'ready', 1, statSync(mp4).size, 90, 'h264', 'aac', 3, JSON.stringify(clip), Date.now()] });
  db.close();
  for (const [name, type] of Object.entries({ chromium, webkit })) {
    if (target !== 'all' && target !== name) continue;
    const browser = await type.launch({ headless: true });
    results.browsers[name] = [];
    try {
      for (const scenario of scenarios.filter(s => !option('--scenarios', null) || option('--scenarios').split(',').includes(s))) {
        const context = await browser.newContext({ viewport: { width: 414, height: 896 }, serviceWorkers: 'allow' });
        const page = await context.newPage(), errors = [];
        page.on('pageerror', e => errors.push(e.message));
        const autoPreload = !['pinned-boot', 'playlist-boot-off', 'playlist-add-setting-off', 'settings-enable'].includes(scenario);
        const settings = { layout: 'f7-swipe', autoPreload, saveBeforePlay: ['open-save-first', 'open-audio-only', 'open-prefer-stream'].includes(scenario), audioOnly: scenario === 'open-audio-only' };
        const hasPlaylist = scenario.endsWith('boot') || ['playlist-boot-off', 'settings-enable', 'playlist-existing-add'].includes(scenario);
        const playlists = hasPlaylist ? [{ id: 'test', name: 'Autosave playlist', videos: scenario === 'playlist-existing-add' ? [] : [clip] }] : [];
        await context.addInitScript(({ settings, playlists, clip, scenario }) => localStorage.setItem('_ytpdata', JSON.stringify({ settings, playlists, history: [clip], pinnedPlaylists: scenario === 'pinned-boot' ? ['test'] : [] })), { settings, playlists, clip, scenario });
        // No public service/YouTube requests; the local clip uses real prepare/range endpoints.
        await context.route('**/*', r => r.request().url().startsWith(origin) ? r.continue() : r.abort());
        await context.route('**/api/streams/warm**', r => r.fulfill({ json: { ok: true } }));
        try {
          await page.goto(origin, { waitUntil: 'domcontentloaded' });
          await page.waitForFunction(() => typeof data !== 'undefined' && window.SettingsSections?.get('downloads-storage'));
          const supported = await page.evaluate(() => OPFS.isSupported());
          if (!supported && !results.unsupported.includes(name)) results.unsupported.push(name);
          // Count invocations in browsers without native OPFS; never treat this as stored bytes.
          await page.evaluate(() => { window.__saveCalls = 0; const original = API.cacheDownload; API.cacheDownload = (...a) => { window.__saveCalls++; return original(...a); }; });
          if (scenario.startsWith('open')) await page.evaluate(({ clip, scenario }) => { Player.loadVideo(clip, { preferStream: scenario === 'open-prefer-stream' }); }, { clip, scenario });
          if (scenario.startsWith('playlist-add')) {
            await page.evaluate(clip => newPlaylist(clip), clip);
            await page.locator('#modal input').fill('Autosave playlist');
            await page.getByRole('button', { name: 'Create', exact: true }).evaluate(b => b.click());
          }
          if (scenario === 'playlist-existing-add') {
            await page.evaluate(clip => openCardMenu(clip), clip);
            await page.getByRole('button', { name: '+ Autosave playlist', exact: true }).evaluate(b => b.click());
          }
          if (scenario.startsWith('settings-')) {
            await page.evaluate(() => { view = { type: 'settings' }; renderList(); });
            const id = scenario === 'settings-enable' ? 'setAutoPreload' : 'setSaveBeforePlay';
            await page.locator('#' + id).evaluate(e => { e.checked = true; e.dispatchEvent(new Event('change', { bubbles: true })); });
            const key = scenario === 'settings-enable' ? 'autoPreload' : 'saveBeforePlay';
            await page.waitForFunction(key => JSON.parse(localStorage.getItem('_ytpdata')).settings[key] === true, key);
            if (scenario === 'settings-save-first') await page.evaluate(clip => { Player.loadVideo(clip); }, clip);
          }
          const expected = !['open-default', 'open-audio-only', 'open-prefer-stream', 'playlist-boot-off'].includes(scenario);
          if (supported && expected) await page.waitForFunction(id => cachedIds.has(id), clip.id, { timeout: 15000 });
          else await page.waitForTimeout(1000);
          const state = await page.evaluate(async id => ({ cached: cachedIds.has(id), files: OPFS.isSupported() ? await OPFS.listVideos() : [], queue: SaveQueue.pending(), calls: window.__saveCalls }), clip.id);
          assert.equal(state.cached, expected && supported, JSON.stringify(state));
          assert.equal(state.files.some(f => f.id === clip.id && f.size > 0), expected && supported, JSON.stringify(state));
          if (!supported && expected && !['open-save-first', 'settings-save-first', 'playlist-boot', 'pinned-boot'].includes(scenario)) assert.ok(state.calls > 0, 'save action was not invoked');
          if (supported && expected) {
            assert.equal(state.files.find(f => f.id === clip.id).size, statSync(mp4).size, 'stored file is incomplete');
            await page.evaluate(() => { view = { type: 'saved' }; renderList(); });
            await page.waitForFunction(() => document.getElementById('cards').textContent.includes('Autosave local clip'));
            await page.evaluate(() => { view = { type: 'downloads' }; renderList(); });
            await page.waitForFunction(() => document.getElementById('listTitle').textContent === 'Downloads');
          }
          const result = { scenario, supported, saved: state.cached, bytes: state.files.find(f => f.id === clip.id)?.size || 0, calls: state.calls, errors };
          results.browsers[name].push(result);
          console.log(`${name} ${scenario}: PASS ${supported ? 'saved=' + state.cached : 'UI/save guard only; OPFS unavailable'}`);
        } catch (e) {
          results.failures.push({ browser: name, scenario, error: e.message, errors });
          console.log(`${name} ${scenario}: FAIL ${e.message.split('\n')[0]}`);
        } finally { await context.close(); }
      }
    } finally { await browser.close(); }
  }
 } finally {
  if (child.exitCode === null) { child.kill('SIGTERM'); await new Promise(r => child.once('exit', r)); }
  rmSync(scratch, { recursive: true, force: true });
  const out = option('--out', null);
  if (out) { mkdirSync(path.dirname(path.resolve(out)), { recursive: true }); writeFileSync(out, JSON.stringify(results, null, 2) + '\n'); }
 }
 if (results.failures.length) process.exitCode = 1;
 else if (results.unsupported.length && !args.includes('--allow-unsupported-webkit')) { console.error('Native OPFS not verified in: ' + results.unsupported.join(', ')); process.exitCode = 2; }
--- a/perf/baseline.mjs
+++ b/perf/baseline.mjs
@@ -25,7 +25,10 @@
 *     --compare <json-path>     Compare results against a previous baseline JSON
 */
-import { spawn, spawnSync } from 'node:child_process';
+import assert from 'node:assert/strict';
 import { assertColdAssets, assertChangedAssets, assertWarmAssets, waitForIdleAssets } from './measurement.mjs';
 import { createHash } from 'node:crypto';
 import { spawn, spawnSync, execFileSync } from 'node:child_process';
 import { existsSync, mkdirSync, rmSync, cpSync, appendFileSync, statSync, writeFileSync, readFileSync, symlinkSync, unlinkSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -58,6 +61,9 @@ function parseArgs() {
    scenario: 'all', // 'cold', 'warm', 'offline', 'update-js', 'update-css', or 'all'
    out: null,
    compare: null,
    frontendCommit: null,
    sourceRoot: null,
    assertCold: false,
  };
  for (let i = 0; i < args.length; i++) {
@@ -67,6 +73,9 @@ function parseArgs() {
    else if (a === '--profile' && i + 1 < args.length) options.profile = args[++i];
    else if (a === '--scenario' && i + 1 < args.length) options.scenario = args[++i];
    else if (a === '--out' && i + 1 < args.length) options.out = args[++i];
    else if (a === '--assert-cold') options.assertCold = true;
    else if (a === '--source-root' && i + 1 < args.length) options.sourceRoot = path.resolve(args[++i]);
    else if (a === '--frontend-commit' && i + 1 < args.length) options.frontendCommit = args[++i];
    else if (a === '--compare' && i + 1 < args.length) options.compare = args[++i];
  }
@@ -146,7 +155,8 @@ async function seedDatabase(dbPath, mediaFiles) {
 * Bun Server Manager
 */
 class ServerManager {
-  constructor(scratchDir, publicDir) {
+  constructor(scratchDir, publicDir, sourceRoot = REPO_ROOT) {
    this.sourceRoot = sourceRoot;
    this.scratchDir = scratchDir;
    this.publicDir = publicDir;
    this.dataDir = path.join(scratchDir, 'data');
@@ -179,7 +189,7 @@ class ServerManager {
      DB_PATH: this.dbPath,
    };
-    const serverScript = path.join(REPO_ROOT, 'server', 'server.js');
+    const serverScript = path.join(this.sourceRoot, 'server', 'server.js');
    this.serverProcess = spawn('bun', [serverScript], {
      cwd: srvCwd,
      env,
@@ -242,6 +252,7 @@ async function setupPageMetrics(page) {
    window.__fcp = null;
    window.__lcp = null;
    window.__longTasksTotal = 0;
    window.__longTasks = [];
    // Observe boot completion landmark (#cards view set by renderList())
    const markBoot = () => {
@@ -261,6 +272,7 @@ async function setupPageMetrics(page) {
      new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          window.__longTasksTotal += entry.duration;
          window.__longTasks.push({start:Math.round(entry.startTime),duration:Math.round(entry.duration)});
        }
      }).observe({ type: 'longtask', buffered: true });
    } catch {}
@@ -365,11 +377,14 @@ async function runColdScenario({ browserType, server, proxy, profile }) {
    const fcp = paint.find((p) => p.name === 'first-contentful-paint');
    return {
      initialJsCss: performance.getEntriesByType('resource').filter(entry=>/\.(?:js|css)(?:[?#]|$)/.test(entry.name)&&entry.startTime <= nav.domContentLoadedEventEnd&&(['script','link','css'].includes(entry.initiatorType)||(entry.initiatorType==='fetch'&&new URL(entry.name).pathname==='/app.js'))).reduce((sum,entry)=>sum+entry.encodedBodySize,0),
      initialAssetRequests: performance.getEntriesByType('resource').filter(entry=>/\.(?:js|css)(?:[?#]|$)/.test(entry.name)&&entry.startTime <= nav.domContentLoadedEventEnd&&(['script','link','css'].includes(entry.initiatorType)||(entry.initiatorType==='fetch'&&new URL(entry.name).pathname==='/app.js'))).map(entry=>({url:entry.name,bytes:entry.encodedBodySize,start:entry.startTime,responseStart:entry.responseStart,end:entry.responseEnd,initiator:entry.initiatorType})),
      fcp: fcp ? Math.round(fcp.startTime) : null,
      lcp: window.__lcp ? Math.round(window.__lcp) : null,
      domContentLoaded: nav ? Math.round(nav.domContentLoadedEventEnd - nav.startTime) : null,
      bootDone: window.__bootDone ? Math.round(window.__bootDone) : null,
      longTaskTotal: Math.round(window.__longTasksTotal || 0),
      longTasks: window.__longTasks || [],
    };
  });
@@ -392,6 +407,10 @@ async function runColdScenario({ browserType, server, proxy, profile }) {
    domContentLoaded: pageMetrics.domContentLoaded,
    bootDone: pageMetrics.bootDone,
    longTaskTotal: pageMetrics.longTaskTotal,
    longTasks: pageMetrics.longTasks,
    requests: stats.requests,
    initialJsCss: pageMetrics.initialJsCss,
    initialAssetRequests: pageMetrics.initialAssetRequests,
    swInstallDuration,
    swInstallBytes: stats.totalWireBytes,
    storageEstimate: storage,
@@ -448,6 +467,8 @@ async function runWarmScenario({ browserType, server, proxy, profile }) {
    });
  });
  await waitForIdleAssets(page);
  // Now measure warm re-navigation
  proxy.resetStats();
  proxy.startTracking();
@@ -457,6 +478,7 @@ async function runWarmScenario({ browserType, server, proxy, profile }) {
  proxy.stopTracking();
  const stats = proxy.getStats();
  assertWarmAssets(stats.requests);
  const pageMetrics = await page.evaluate(() => {
    const nav = performance.getEntriesByType('navigation')[0];
@@ -464,11 +486,14 @@ async function runWarmScenario({ browserType, server, proxy, profile }) {
    const fcp = paint.find((p) => p.name === 'first-contentful-paint');
    return {
      initialJsCss: performance.getEntriesByType('resource').filter(entry=>/\.(?:js|css)(?:[?#]|$)/.test(entry.name)&&entry.startTime <= nav.domContentLoadedEventEnd&&(['script','link','css'].includes(entry.initiatorType)||(entry.initiatorType==='fetch'&&new URL(entry.name).pathname==='/app.js'))).reduce((sum,entry)=>sum+entry.encodedBodySize,0),
      initialAssetRequests: performance.getEntriesByType('resource').filter(entry=>/\.(?:js|css)(?:[?#]|$)/.test(entry.name)&&entry.startTime <= nav.domContentLoadedEventEnd&&(['script','link','css'].includes(entry.initiatorType)||(entry.initiatorType==='fetch'&&new URL(entry.name).pathname==='/app.js'))).map(entry=>({url:entry.name,bytes:entry.encodedBodySize,start:entry.startTime,responseStart:entry.responseStart,end:entry.responseEnd,initiator:entry.initiatorType})),
      fcp: fcp ? Math.round(fcp.startTime) : null,
      lcp: window.__lcp ? Math.round(window.__lcp) : null,
      domContentLoaded: nav ? Math.round(nav.domContentLoadedEventEnd - nav.startTime) : null,
      bootDone: window.__bootDone ? Math.round(window.__bootDone) : null,
      longTaskTotal: Math.round(window.__longTasksTotal || 0),
      longTasks: window.__longTasks || [],
    };
  });
@@ -483,6 +508,7 @@ async function runWarmScenario({ browserType, server, proxy, profile }) {
    domContentLoaded: pageMetrics.domContentLoaded,
    bootDone: pageMetrics.bootDone,
    longTaskTotal: pageMetrics.longTaskTotal,
    longTasks: pageMetrics.longTasks,
  };
 }
@@ -541,6 +567,8 @@ async function runOfflineScenario({ browserType, server, proxy, profile }) {
    const fcp = paint.find((p) => p.name === 'first-contentful-paint');
    return {
      initialJsCss: performance.getEntriesByType('resource').filter(entry=>/\.(?:js|css)(?:[?#]|$)/.test(entry.name)&&entry.startTime <= nav.domContentLoadedEventEnd&&(['script','link','css'].includes(entry.initiatorType)||(entry.initiatorType==='fetch'&&new URL(entry.name).pathname==='/app.js'))).reduce((sum,entry)=>sum+entry.encodedBodySize,0),
      initialAssetRequests: performance.getEntriesByType('resource').filter(entry=>/\.(?:js|css)(?:[?#]|$)/.test(entry.name)&&entry.startTime <= nav.domContentLoadedEventEnd&&(['script','link','css'].includes(entry.initiatorType)||(entry.initiatorType==='fetch'&&new URL(entry.name).pathname==='/app.js'))).map(entry=>({url:entry.name,bytes:entry.encodedBodySize,start:entry.startTime,responseStart:entry.responseStart,end:entry.responseEnd,initiator:entry.initiatorType})),
      fcp: fcp ? Math.round(fcp.startTime) : null,
      lcp: window.__lcp ? Math.round(window.__lcp) : null,
      domContentLoaded: nav ? Math.round(nav.domContentLoadedEventEnd - nav.startTime) : null,
@@ -601,8 +629,12 @@ async function runUpdateScenario({ browserType, server, proxy, profile, updateKi
    await sleep(50);
  }
  // Phase 3 activation precedes idle feature caching. Measure updates from a
  // genuinely warm build, rather than counting unfinished first-install bytes.
  await waitForIdleAssets(page);
  // Switch server to Tree N+1 (app.js or theme-glass.css modification)
-  const targetTree = updateKind === 'js' ? trees.treeUpdateJs : trees.treeUpdateCss;
+  const targetTree = updateKind === 'feature' ? trees.treeUpdateFeature : updateKind === 'js' ? trees.treeUpdateJs : trees.treeUpdateCss;
  await server.restartWithPublic(targetTree);
  // Measure wire bytes and duration from reg.update() until new SW is waiting/installed
@@ -622,14 +654,39 @@ async function runUpdateScenario({ browserType, server, proxy, profile, updateKi
    await sleep(50);
  }
  const readyDuration = Date.now() - t0;
  const readyWireBytes = proxy.getStats().totalWireBytes;
  if (updateKind === 'feature' || updateKind === 'css') {
    const changedPath=updateKind==='feature'?'/presenter.js':'/theme-glass.css';
    // Readiness excludes background chunks. Include activation and the changed
    // feature's actual idle transfer rather than reporting readiness as its cost.
    const expected = createHash('sha256').update(readFileSync(path.join(targetTree,changedPath.slice(1)))).digest('hex').slice(0,10);
    await page.evaluate(async()=>{const r=await navigator.serviceWorker.getRegistration();r.waiting.postMessage({type:'SKIP_WAITING'});});
    const end=Date.now()+90000;
    while(true) {
      const complete=await page.evaluate(async ({h,p})=>{
        const r=await navigator.serviceWorker.getRegistration();
        if(r.waiting || r.installing)return false;
        r.active?.postMessage({type:'WARM_ASSETS',saveData:false});
        const c=await caches.open('ytplayer-assets'),entry=await c.match(p+'?v='+h);
        return entry?.headers.get('X-Asset-Hash')===h;
      },{h:expected,p:changedPath});
      if(complete)break;
      if(Date.now()>end)throw Error('Changed feature was not cached after activation');
      await sleep(100);
    }
  }
  const duration = Date.now() - t0;
  proxy.stopTracking();
  const stats = proxy.getStats();
-
+  assertChangedAssets(stats.requests, updateKind==='feature'?'/presenter.js':updateKind==='css'?'/theme-glass.css':'/app.js');
  await browser.close();
  return {
    updateKind,
    readyDuration,
    readyWireBytes,
    requests: stats.requests,
    duration,
    requestCount: stats.requestCount,
    wireBytes: stats.totalWireBytes,
@@ -652,6 +709,8 @@ async function main() {
  if (options.browser === 'all' || options.browser === 'chromium') browsers.push(pw.chromium);
  if (options.browser === 'all' || options.browser === 'webkit') browsers.push(pw.webkit);
  const requestedScenarios=new Set(options.scenario.split(','));
  const wants=name=>requestedScenarios.has('all')||requestedScenarios.has(name);
  const profiles = [];
  if (options.profile === 'all' || options.profile === 'lte') profiles.push('lte');
  if (options.profile === 'all' || options.profile === 'lossy') profiles.push('lossy');
@@ -663,25 +722,36 @@ async function main() {
  const treeBase = path.join(tmpRoot, 'tree-base');
  const treeUpdateJs = path.join(tmpRoot, 'tree-update-js');
  const treeUpdateCss = path.join(tmpRoot, 'tree-update-css');
  const treeUpdateFeature = path.join(tmpRoot, 'tree-update-feature');
-  cpSync(path.join(REPO_ROOT, 'frontend'), treeBase, { recursive: true });
+  let frontendSource=path.join(options.sourceRoot || REPO_ROOT,'frontend');
-  cpSync(path.join(REPO_ROOT, 'frontend'), treeUpdateJs, { recursive: true });
+  if(options.frontendCommit) {
-  cpSync(path.join(REPO_ROOT, 'frontend'), treeUpdateCss, { recursive: true });
+    const archive=path.join(tmpRoot,'frontend.tar');
    writeFileSync(archive,execFileSync('git',['archive',options.frontendCommit,'frontend'],{cwd:REPO_ROOT,maxBuffer:20*1024*1024}));
    execFileSync('tar',['-xf',archive,'-C',tmpRoot]);
    frontendSource=path.join(tmpRoot,'frontend');
  }
  for(const tree of [treeBase,treeUpdateJs,treeUpdateCss,treeUpdateFeature])cpSync(frontendSource,tree,{recursive:true});
  // Append 1 comment line to app.js in treeUpdateJs
  appendFileSync(path.join(treeUpdateJs, 'app.js'), '\n// baseline bench: 1-line app.js comment\n');
  // Append 1 rule to theme-glass.css in treeUpdateCss
  appendFileSync(path.join(treeUpdateCss, 'theme-glass.css'), '\n/* baseline bench: 1-line css rule */\n.baseline-marker { opacity: 0.99; }\n');
-  const trees = { treeBase, treeUpdateJs, treeUpdateCss };
+  if(existsSync(path.join(treeUpdateFeature,'presenter.js')))appendFileSync(path.join(treeUpdateFeature,'presenter.js'),'\n// baseline bench: 1-line presenter chunk comment\n');
  const trees = { treeBase, treeUpdateJs, treeUpdateCss, treeUpdateFeature };
  const serverScratch = path.join(tmpRoot, 'server-run');
-  const server = new ServerManager(serverScratch, treeBase);
+  const server = new ServerManager(serverScratch, treeBase, options.sourceRoot || REPO_ROOT);
  await server.start();
  console.log(`Bun server running on ephemeral port ${server.port}`);
  const results = {
    date: new Date().toISOString(),
    frontendCommit: options.frontendCommit,
    sourceRoot: options.sourceRoot,
    sourceCommit: spawnSync('git', ['rev-parse','HEAD'], { cwd: options.sourceRoot || REPO_ROOT }).stdout.toString().trim(),
    frontendBuildTag: (await (await fetch('http://127.0.0.1:'+server.port+'/api/version')).json()).buildTag,
    commit: spawnSync('git', ['rev-parse', 'HEAD'], { cwd: REPO_ROOT }).stdout.toString().trim(),
    runsConfigured: options.runs,
    browsers: {},
@@ -693,6 +763,9 @@ async function main() {
      results.browsers[bName] = {};
      for (const prof of profiles) {
        // The preceding profile can end on a synthetic feature-update tree.
        // Always measure the actual base build on the next cold visit.
        await server.restartWithPublic(treeBase);
        console.log(`\n>>> Running Benchmark: Browser=[${bName}] Profile=[${prof}]`);
        results.browsers[bName][prof] = {};
@@ -702,14 +775,15 @@ async function main() {
        console.log(`Proxy listening on port ${proxy.port} (mode: ${proxyProfile})`);
        // 1. Cold Scenario
-        if (options.scenario === 'all' || options.scenario === 'cold') {
+        if (wants('cold')) {
          console.log(`  [Scenario: Cold Load] running ${options.runs} iterations...`);
          const coldRuns = [];
          for (let r = 0; r < options.runs; r++) {
            process.stdout.write(`    run ${r + 1}/${options.runs}... `);
            const res = await runColdScenario({ browserType: bType, server, proxy, profile: prof });
            if(options.assertCold)assertColdAssets(res.requests);
            coldRuns.push(res);
-            console.log(`done (${res.wireBytes} bytes, ${res.requestCount} reqs, boot=${res.bootDone}ms)`);
+            console.log(`done (${res.wireBytes} bytes, ${res.requestCount} reqs, fcp=${res.fcp}ms, boot=${res.bootDone}ms)`);
          }
          results.browsers[bName][prof].cold = {
@@ -720,17 +794,22 @@ async function main() {
            domContentLoaded: summarizeList(coldRuns.map((r) => r.domContentLoaded)),
            bootDone: summarizeList(coldRuns.map((r) => r.bootDone)),
            longTaskTotal: summarizeList(coldRuns.map((r) => r.longTaskTotal)),
            longTasks: coldRuns.map(r=>r.longTasks),
            swInstallDuration: summarizeList(coldRuns.map((r) => r.swInstallDuration)),
            swInstallBytes: summarizeList(coldRuns.map((r) => r.swInstallBytes)),
            storageEstimate: coldRuns[0]?.storageEstimate || null,
            mediaReady: summarizeList(coldRuns.map((r) => r.mediaReady)),
            autoplayBlocked: coldRuns.some((r) => r.autoplayBlocked),
            wireBytesByType: coldRuns[0]?.wireBytesByType || {},
            requests: coldRuns[0]?.requests || [],
            initialJsCss: summarizeList(coldRuns.map(r=>r.initialJsCss)),
            initialAssetRequests: coldRuns[0]?.initialAssetRequests || [],
            waterfalls: coldRuns.map(r=>({fcp:r.fcp,requests:r.requests,page:r.initialAssetRequests})),
          };
        }
        // 2. Warm Scenario
-        if (options.scenario === 'all' || options.scenario === 'warm') {
+        if (wants('warm')) {
          console.log(`  [Scenario: Warm Load] running ${options.runs} iterations...`);
          const warmRuns = [];
          for (let r = 0; r < options.runs; r++) {
@@ -752,7 +831,7 @@ async function main() {
        }
        // 3. Offline Scenario
-        if (options.scenario === 'all' || options.scenario === 'offline') {
+        if (wants('offline')) {
          console.log(`  [Scenario: Offline Reload] running ${options.runs} iterations...`);
          const offRuns = [];
          for (let r = 0; r < options.runs; r++) {
@@ -774,7 +853,7 @@ async function main() {
        }
        // 4. Update N -> N+1 (JS)
-        if (options.scenario === 'all' || options.scenario === 'update-js') {
+        if (wants('update-js')) {
          console.log(`  [Scenario: Update N->N+1 (1-line app.js)] running ${options.runs} iterations...`);
          const updJsRuns = [];
          for (let r = 0; r < options.runs; r++) {
@@ -796,11 +875,12 @@ async function main() {
            wireBytes: summarizeList(updJsRuns.map((r) => r.wireBytes)),
            duration: summarizeList(updJsRuns.map((r) => r.duration)),
            wireBytesByType: updJsRuns[0]?.wireBytesByType || {},
            requests: updJsRuns[0]?.requests || [],
          };
        }
        // 5. Update N -> N+1 (CSS)
-        if (options.scenario === 'all' || options.scenario === 'update-css') {
+        if (wants('update-css')) {
          console.log(`  [Scenario: Update N->N+1 (1-line theme-glass.css)] running ${options.runs} iterations...`);
          const updCssRuns = [];
          for (let r = 0; r < options.runs; r++) {
@@ -818,13 +898,26 @@ async function main() {
          }
          results.browsers[bName][prof].updateCss = {
            readyDuration: summarizeList(updCssRuns.map(r=>r.readyDuration)),
            readyWireBytes: summarizeList(updCssRuns.map(r=>r.readyWireBytes)),
            requestCount: summarizeList(updCssRuns.map((r) => r.requestCount)),
            wireBytes: summarizeList(updCssRuns.map((r) => r.wireBytes)),
            duration: summarizeList(updCssRuns.map((r) => r.duration)),
            wireBytesByType: updCssRuns[0]?.wireBytesByType || {},
            requests: updCssRuns[0]?.requests || [],
          };
        }
        if ((wants('update-feature')) && existsSync(path.join(treeBase,'presenter.js'))) {
          console.log(`  [Scenario: Update split-out presenter, including idle cache fill] running ${options.runs} iterations...`);
          const runs=[];
          for(let r=0;r<options.runs;r++) {
            const res=await runUpdateScenario({browserType:bType,server,proxy,profile:prof,updateKind:'feature',trees});runs.push(res);
            console.log(`    run ${r+1}/${options.runs}: ${res.wireBytes} bytes, ${res.requestCount} reqs, dur=${res.duration}ms`);
          }
          results.browsers[bName][prof].updateFeature={requestCount:summarizeList(runs.map(r=>r.requestCount)),wireBytes:summarizeList(runs.map(r=>r.wireBytes)),duration:summarizeList(runs.map(r=>r.duration)),wireBytesByType:runs[0]?.wireBytesByType||{},requests:runs[0]?.requests||[]};
        }
        await proxy.close();
      }
    }
--- a/perf/lazy.mjs
+++ b/perf/lazy.mjs
@@ -0,0 +1,157 @@
 #!/usr/bin/env node
 // Phase 3 checks against the real Bun server, a same-origin restart and real workers.
 import assert from 'node:assert/strict';
 import { spawn } from 'node:child_process';
 import { mkdtempSync, cpSync, mkdirSync, symlinkSync, readFileSync, writeFileSync, rmSync } from 'node:fs';
 import { resolve, join } from 'node:path';
 import { createServer } from 'node:net';
 import { chromium, webkit } from 'playwright';
 import { createThrottleProxy } from './proxy.mjs';
 const repo=resolve(new URL('..',import.meta.url).pathname), scratch=mkdtempSync(join(repo,'perf/.tmp/lazy-'));
 const sleep=ms=>new Promise(r=>setTimeout(r,ms));
 async function wait(page,fn,arg,timeout=90000){const end=Date.now()+timeout;while(Date.now()<end){if(await page.evaluate(fn,arg))return;await sleep(100);}throw Error('Timed out: '+fn.toString());}
 async function checkCssOrder(page){
 const changes=await page.evaluate(async()=>{
   await Lazy.load('layout:'+Lazy.layout);
   const settle=()=>new Promise(resolve=>setTimeout(resolve,300));await settle();
   const nodes=[...document.querySelectorAll('body,body *')],props=['display','position','color','background-color','font-family','font-size','padding','margin','border-radius','--bg','--text','--radius'];
   const snapshot=()=>nodes.map(n=>props.map(p=>getComputedStyle(n).getPropertyValue(p)));
   const links=[...document.querySelectorAll('link[data-lazy-css]')],positions=links.map(n=>[n,n.nextSibling]),before=snapshot();
   const loaded=()=>new Promise((resolve,reject)=>{let tries=0;function poll(){if(links.every(n=>n.sheet))return resolve();if(tries++>120)return reject(Error('Reordered CSS did not load'));requestAnimationFrame(poll);}poll();});
   links.forEach(n=>document.head.append(n));await loaded();await settle();const after=snapshot();
   for(const [n,next] of positions.reverse())document.head.insertBefore(n,next);
   await loaded();await settle();
   return before.flatMap((values,i)=>values.flatMap((v,j)=>v===after[i][j]?[]:[{element:nodes[i].id||nodes[i].className,property:props[j],before:v,after:after[i][j]}]));
 });
 assert.deepEqual(changes,[],'requesting scoped layout CSS earlier preserves its computed appearance');
 }
 const args=process.argv.slice(2), requested=args.includes('--browser')?args[args.indexOf('--browser')+1]:'all';
 const results=[];
 async function run(name){
 const cwd=join(scratch,name);mkdirSync(cwd);cpSync(join(repo,'frontend'),join(cwd,'public'),{recursive:true});
 const portServer=createServer();await new Promise(r=>portServer.listen(0,'127.0.0.1',r));const port=portServer.address().port;await new Promise(r=>portServer.close(r));
 let child,browser,proxy,log='';
 async function stop(){if(!child)return;const p=child;child=null;if(p.exitCode===null){p.kill('SIGTERM');await new Promise(r=>p.once('exit',r));}}
 async function start(){log='';child=spawn('bun',[join(repo,'server/server.js')],{cwd,env:{...process.env,PORT:String(port),ASSET_HASHING:'1',ASSET_SYNC:'1',BUILD_TAG:'',DB_PATH:join(cwd,'db.sqlite'),DATA_DIR:join(cwd,'data'),MEDIA_DIR:join(cwd,'media'),UPLOAD_DIR:join(cwd,'uploads')},stdio:['ignore','pipe','pipe']});for(const stream of [child.stdout,child.stderr])stream.on('data',c=>log=(log+c).slice(-15000));for(let i=0;i<200;i++){if(child.exitCode!==null)throw Error(log);try{if((await fetch('http://127.0.0.1:'+port+'/api/version')).ok)return;}catch{}await sleep(100);}throw Error(log);}
 try {
  await start();proxy=createThrottleProxy({targetPort:port,profile:'unthrottled'});const origin='http://127.0.0.1:'+await proxy.listen();proxy.startTracking();
  browser=await ({chromium,webkit}[name]).launch({headless:true});const context=await browser.newContext();let disconnected=false;
  await context.route('**/*',r=>r.request().url().startsWith(origin)?r.continue():r.abort());
  await context.addInitScript(()=>{window.__saveData=localStorage.getItem('perf-save-data')==='1';const observer=new MutationObserver(()=>{if(document.body){window.__firstBodyLayout=document.documentElement.dataset.layout;observer.disconnect();}});observer.observe(document,{childList:true,subtree:true});Object.defineProperty(navigator,'onLine',{configurable:true,get:()=>localStorage.getItem('perf-offline')!=='1'});Object.defineProperty(navigator,'connection',{configurable:true,value:{get saveData(){return window.__saveData;}}});});
  const page=await context.newPage(),errors=[],failedRequests=[];page.on('requestfailed',request=>{if(disconnected)failedRequests.push(request.url());});page.on('pageerror',e=>errors.push({message:e.message,disconnected}));page.on('console',m=>{if(m.type()==='error')console.log(name,'console:',m.text());});
  console.log(name,'initial boot');await page.goto(origin);await page.waitForFunction(()=>typeof data!=='undefined'&&document.querySelector('#carModeBtn'));
  await wait(page,async()=>!!(await navigator.serviceWorker.getRegistration())?.active);
  await page.evaluate(()=>Lazy.warm());
  await wait(page,async()=>{const c=await caches.open('ytplayer-assets'),r=await c.match('/__ytp_asset_state');if(!r)return false;const s=await r.json();return !(await Promise.all(Object.values(s.current.groups).flatMap(g=>g.files).map(async p=>!!await c.match(p+'?v='+s.current.files[p].h)))).includes(false);});
  console.log(name,'warm complete');assert.equal(await page.evaluate(()=>Lazy.loaded('feature:car-mode')),false);
  assert.equal(await page.evaluate(()=>[...document.querySelectorAll('.stg-overlay,.deck-chips,.vol-pct,.mode-name,.stg-bot,.ch-badge,.upnext-clear,.list-sub,.p2p-strip,.sleep-status .sl-ic,.sleep-status .sl-sub,.mc-tune')].every(n=>getComputedStyle(n).display==='none')),true,'classic retains shared visibility defaults without loading Glass CSS');
  await checkCssOrder(page);
  assert.equal(await page.evaluate(()=>Lazy.loaded('feature:piano')),false);
  assert.equal(await page.evaluate(()=>[typeof newPlaylist,typeof renderSettings,typeof enterServiceMode,typeof Notes.load,typeof LyricsCore.fromText].every(type=>type==='function')),true,'playlist, settings, service mode and lyric core remain in RAM');
  // Profile/imported settings use applyAppearance, not the Settings select handler.
  await page.evaluate(()=>{data.settings.layout='glass-stage';applyAppearance();});
  await wait(page,()=>document.documentElement.dataset.layout==='glass-stage'&&Lazy.layout==='glass-stage');
  await page.evaluate(()=>{data.settings.layout='classic';applyAppearance();});
  await wait(page,()=>document.documentElement.dataset.layout==='classic'&&Lazy.layout==='classic');
  // Eager application panels stay usable without executing optional settings modules.
  await page.click('[data-view="settings"]');await page.click('[data-section="appearance"]');await page.waitForSelector('#setLayout');
  assert.equal(await page.evaluate(()=>Lazy.loaded('feature:piano')),false);
  await page.selectOption('#setLayout','glass-stage');await page.waitForFunction(()=>document.documentElement.dataset.layout==='glass-stage');
  await page.evaluate(()=>{window.__saveData=true;localStorage.setItem('perf-save-data','1');localStorage.setItem('perf-offline','1');});
  await stop();disconnected=true;await proxy.setOffline(true);
  console.log(name,'offline reload');await page.reload();await page.waitForFunction(()=>typeof data!=='undefined'&&document.querySelector('#carModeBtn'));
  assert.equal(await page.evaluate(()=>document.documentElement.dataset.layout),'glass-stage');
  assert.equal(await page.evaluate(()=>window.__firstBodyLayout),'glass-stage','selected layout is established before body/first paint');
  await checkCssOrder(page);
  const before=proxy.getStats().requestCount;
  await page.getByRole('button',{name:'Car mode',exact:true}).click();await page.waitForSelector('.car-mode');
  assert.equal(await page.locator('.car-controls button').count(),4,'all transport controls survive lazy setup');
  assert.equal(await page.locator('.car-controls #voiceSearchBtn').count(),0,'voice search stays outside transport');
  await page.getByRole('button',{name:'Exit Car mode'}).click();
  assert.equal(proxy.getStats().requestCount,before,'warmed feature first use reaches no network');
  await page.click('[data-view="settings"]');await page.click('[data-section="appearance"]');await page.selectOption('#setLayout','bento-hub');await page.waitForFunction(()=>document.documentElement.dataset.layout==='bento-hub');
  await page.selectOption('#setLayout','f7-swipe');await page.waitForFunction(()=>document.documentElement.dataset.layout==='f7-swipe'&&!!window.Framework7);
  await page.selectOption('#setLayout','classic');await page.waitForFunction(()=>document.documentElement.dataset.layout==='classic');
  assert.equal(proxy.getStats().requestCount,before,'offline layout changes reach no network');
  await page.getByRole('searchbox',{name:'Search settings and controls'}).fill('Enable piano transcription');
  await page.locator('.settings-results button').first().waitFor();
  await page.getByRole('searchbox',{name:'Search settings and controls'}).fill('');
  // Every extension panel renders from disk without executing other panels eagerly.
  for(const id of ['piano','midi','floating-lyrics','vocal-reducer','equalizer','setlist-import','broadcast']) {
    await page.evaluate(id=>document.querySelector('[data-section="'+id+'"]').click(),id);
    await wait(page,async id=>{const section=SettingsSections.get(id);return !section.lazyGroup;},id);
  }
  await page.evaluate(async()=>{await Lazy.load('feature:export');await Lazy.load('feature:video-edit');});
  assert.equal(proxy.getStats().requestCount,before,'all warmed extension assets stay offline');
  await start();disconnected=false;await proxy.setOffline(false);await page.evaluate(()=>localStorage.removeItem('perf-offline')); 
  // Change only app bytes, then prove loss of its current cache entry can boot
  // the compatible N-1 core offline without weakening the inline CSP policy.
  await stop();writeFileSync(join(cwd,'public/app.js'),readFileSync(join(cwd,'public/app.js'),'utf8')+'\n// phase6 app eviction probe\n');await start();
  const appTarget=await(await fetch(origin+'/api/manifest')).json();
  await page.evaluate(async()=>{const r=await navigator.serviceWorker.getRegistration();await r.update();});
  await wait(page,async tag=>{const r=await navigator.serviceWorker.getRegistration();return r?.waiting&&(await SwUpdate.askCacheStatus(r.waiting))?.version===tag;},appTarget.buildTag);
  await page.evaluate(async()=>{const r=await navigator.serviceWorker.getRegistration();r.waiting.postMessage({type:'SKIP_WAITING'});});
  await wait(page,async tag=>{const c=await caches.open('ytplayer-assets');return(await(await c.match('/__ytp_asset_state')).json()).current.buildTag===tag;},appTarget.buildTag);
  const appKey='/app.js?v='+appTarget.files['/app.js'].h;
  await page.evaluate(async key=>{await(await caches.open('ytplayer-assets')).delete(key);},appKey);
  await stop();disconnected=true;await proxy.setOffline(true);
  const probe=await context.newPage();probe.on('pageerror',e=>errors.push({message:e.message,disconnected}));
  const offlineBefore=proxy.getStats().requestCount;await probe.goto(origin);await probe.waitForFunction(()=>typeof data!=='undefined'&&typeof Player!=='undefined'&&document.querySelector('#carModeBtn'));
  assert.equal(await probe.evaluate(async key=>!!await(await caches.open('ytplayer-assets')).match(key),appKey),false,'N-1 never poisons the current app key');
  assert.equal(proxy.getStats().requestCount,offlineBefore,'N-1 app boot is entirely offline');
  await probe.close();await start();disconnected=false;await proxy.setOffline(false);
  await page.evaluate(async key=>{const r=await fetch(key+'&__ytpfresh=1');if(r.headers.get('X-Asset-Hash')!==key.split('v=')[1])throw Error('Wrong repair body');await(await caches.open('ytplayer-assets')).put(key,r);},appKey);
  // Keep an old tab whose core and group contracts remain those of build N.
  const old=await context.newPage();old.on('pageerror',e=>errors.push({message:e.message,disconnected}));await old.goto(origin);await old.waitForSelector('#carModeBtn');
  await old.evaluate(async()=>{window.__saveData=true;await Lazy.load('feature:setlist-import');window.__pinned=window.SetlistImport;});
  await page.evaluate(()=>window.__saveData=true);
  const previous=await page.evaluate(()=>Lazy.manifest);
  await stop();
  for(const file of ['video-edit.js','setlist-import.js','car-mode.js'])writeFileSync(join(cwd,'public',file),readFileSync(join(cwd,'public',file),'utf8')+'\n// phase3 new file\n');
  const defs=JSON.parse(readFileSync(join(cwd,'public/assets.json')));defs.groups['feature:car-mode'].contract=2;writeFileSync(join(cwd,'public/assets.json'),JSON.stringify(defs));
  // Production stamping replaces the source-only native map with these updated groups.
  await start();const target=await(await fetch(origin+'/api/manifest')).json();
  await page.evaluate(async()=>{window.__saveData=true;const r=await navigator.serviceWorker.getRegistration();await r.update();});
  await wait(page,async target=>{const r=await navigator.serviceWorker.getRegistration();if(!r?.waiting)return false;return(await SwUpdate.askCacheStatus(r.waiting))?.version===target;},target.buildTag);
  // No automatic navigation; a real playing flag blocks the real apply flow.
  let navs=0;page.on('framenavigated',f=>{if(f===page.mainFrame())navs++;});
  await sleep(1000);assert.equal(navs,0);
  await page.evaluate(()=>Player._wantsPlaying=true);
  page.once('dialog',d=>d.dismiss());
  const guard=await page.evaluate(async()=>{try{await SwUpdate.applyUpdate({getRegistration:()=>navigator.serviceWorker.getRegistration(),askStatus:SwUpdate.askCacheStatus,reload:()=>location.reload()});return false;}catch{return true;}});
  assert.equal(guard,true);assert.equal(navs,0);
  await page.evaluate(()=>Player._wantsPlaying=false);
  // Explicit worker message, then explicit navigation into new stamped core.
  await page.evaluate(async()=>{const r=await navigator.serviceWorker.getRegistration();r.waiting.postMessage({type:'SKIP_WAITING'});});
  await wait(page,async tag=>{const c=await caches.open('ytplayer-assets');return(await(await c.match('/__ytp_asset_state')).json()).current.buildTag===tag;},target.buildTag);
  await page.reload();await page.waitForSelector('#carModeBtn');assert.equal(await page.evaluate(()=>Lazy.manifest.buildTag),target.buildTag);
  // Completion now runs even with Save-Data. Evict a real completed entry to
  // exercise the same-contract N-1 fallback, rather than suppressing the job.
  await wait(page,async()=>{const r=await navigator.serviceWorker.getRegistration();return (await SwUpdate.askCacheStatus(r.active))?.offlineReady;});
  disconnected=true;await proxy.setOffline(true);await stop();
  const cacheKey='/video-edit.js?v='+target.files['/video-edit.js'].h;
  await page.evaluate(async key=>{localStorage.setItem('perf-offline','1');await(await caches.open('ytplayer-assets')).delete(key);},cacheKey);
  assert.equal(await page.evaluate(async key=>!!await(await caches.open('ytplayer-assets')).match(key),cacheKey),false);
  const stale=await page.evaluate(async key=>{const r=await fetch(key);return {h:r.headers.get('X-Asset-Hash'),body:await r.text()};},cacheKey);
  assert.equal(stale.h,previous.files['/video-edit.js'].h);assert.ok(!stale.body.includes('// phase3 new file'));
  await page.evaluate(()=>Lazy.load('feature:video-edit'));const pinned=await page.evaluate(()=>{window.__videoPinned=VideoEdit;return Lazy.loaded('feature:video-edit');});assert.equal(pinned,true);
  // Different contract is already downloaded before commit, but the old core must keep N-1.
  const oldRequests=[];old.on('request',r=>oldRequests.push(r.url()));
  await old.evaluate(()=>Lazy.load('feature:car-mode'));assert.equal(await old.evaluate(()=>Lazy.reloadRequired),true);
  await old.getByRole('button',{name:'Refresh UI',exact:true}).waitFor();
  assert.ok(oldRequests.some(u=>u.includes('/car-mode.js?v='+previous.files['/car-mode.js'].h)));
  await old.evaluate(()=>Lazy.load('feature:setlist-import'));assert.equal(await old.evaluate(()=>window.SetlistImport===window.__pinned),true);
  // Warm new files explicitly; compatible, unexecuted old-page group selects new cached URL.
  await start();disconnected=false;await proxy.setOffline(false);await page.evaluate(()=>localStorage.removeItem('perf-offline'));
  await page.evaluate(async()=>{const r=await navigator.serviceWorker.getRegistration();r.active.postMessage({type:'WARM_ASSETS',saveData:false});});
  await wait(page,async key=>!!await(await caches.open('ytplayer-assets')).match(key),cacheKey);
  await old.evaluate(()=>Lazy.load('feature:video-edit'));assert.ok(oldRequests.some(u=>u.includes(cacheKey)));
  await page.evaluate(()=>Lazy.load('feature:video-edit'));assert.equal(await page.evaluate(()=>window.VideoEdit===window.__videoPinned),true);
  const offlineTransportErrors=errors.filter(error=>name==='webkit'&&error.disconnected&&(error.message==='TypeError: Load failed'||/\/api\/(?:recommendations\?[^\s]*|version)\.$/.test(error.message)));
  assert.deepEqual(errors.filter(error=>!offlineTransportErrors.includes(error)),[]);
  if(offlineTransportErrors.length)assert.ok(failedRequests.some(url=>/\/api\/(?:recommendations|version)/.test(url))); 
  results.push({browser:name,sourceBuildTag:previous.buildTag,classicSharedDefaults:true,cssOrderPreserved:true,settingsSearch:true,carControls:4,offlineFeature:true,firstUseNetwork:0,layoutsOffline:['glass-stage','bento-hub','f7-swipe','classic'],pinned:true,compatibleUnexecutedNewURL:true,incompatibleN1ReloadRequired:true,stagedN1:true,appEvictionN1Offline:true,playbackGuard:true,prePaintLayout:true,offlineSettingsPanels:true,scriptErrors:[],offlineTransportErrors});
  console.log(name,'PASS');
 } catch(error){console.error(name,error.stack);throw error;} finally {await browser?.close();proxy?.server.closeAllConnections();await proxy?.close();await stop();}
 }
 try{for(const name of requested==='all'?['chromium','webkit']:[requested])await run(name);writeFileSync(args.includes('--out')?resolve(args[args.indexOf('--out')+1]):join(repo,'perf/results/phase3-lazy-2026-10-08.json'),JSON.stringify({results},null,2)+'\n');}finally{rmSync(scratch,{recursive:true,force:true});}
--- a/perf/measurement.mjs
+++ b/perf/measurement.mjs
@@ -0,0 +1,34 @@
 import assert from 'node:assert/strict';
 export function assertChangedAssets(requests, expected) {
 const paths=requests.filter(r=>r.bytes>0).map(r=>new URL(r.url,'http://localhost').pathname).filter(p=>/\.(?:js|css|woff2?|png|svg)$/.test(p)&&!['/sw.js','/asset-sync-core.js'].includes(p));
 assert.deepEqual([...new Set(paths)],[expected],'only the changed application asset transfers; worker checks and derived index/manifest are separate overhead');
 }
 export async function waitForIdleAssets(page) {
 if(!await page.evaluate(()=>!!window.Lazy?.warm))return;
 await page.evaluate(()=>Lazy.warm());
 const end=Date.now()+120000;
 while(true) {
  const ready=await page.evaluate(async()=>{
   const c=await caches.open('ytplayer-assets'),r=await c.match('/__ytp_asset_state');
   // Legacy rollback has no manifest state and installs its complete shell instead.
   if(!r)return (await caches.keys()).some(k=>/^ytplayer-(?!assets|thumbs|fonts)/.test(k));
   const m=(await r.json()).current;
   return (await Promise.all(Object.values(m.groups).flatMap(g=>g.files).map(async p=>{
    const response=await c.match(p+'?v='+m.files[p].h);
    return response?.headers.get('X-Asset-Hash')===m.files[p].h;
   }))).every(Boolean);
  });
  if(ready)return;
  if(Date.now()>end)throw Error('Idle warm did not complete before benchmark');
  await new Promise(r=>setTimeout(r,100));
 }
 }
 export function assertWarmAssets(requests) {
 const assets=requests.filter(r=>r.bytes>0&&/\.(?:js|css|woff2?|png|svg)(?:[?#]|$)/.test(r.url)&&!new URL(r.url,'http://localhost').pathname.endsWith('/sw.js'));
 assert.deepEqual(assets,[],'warm reload does not transfer unfinished shell assets');
 }
 export function assertColdAssets(requests) {
 const transferred=requests.filter(r=>r.bytes>0&&new URL(r.url,'http://localhost').pathname==='/app.js');
 assert.equal(transferred.length,1,'cold app.js transfers its body exactly once across page and worker');
 }
--- a/perf/measurement.test.mjs
+++ b/perf/measurement.test.mjs
@@ -0,0 +1,23 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { assertChangedAssets, assertWarmAssets, assertColdAssets } from './measurement.mjs';
 test('changed CSS and feature measurements reject unrelated application transfers',()=>{
 const requests=[{url:'/sw.js',bytes:7000},{url:'/asset-sync-core.js',bytes:2000},{url:'/index.html',bytes:12000},{url:'/api/manifest',bytes:3000},{url:'/theme-glass.css?v=new',bytes:5000},{url:'/fonts/a.woff2',bytes:0}];
 assertChangedAssets(requests,'/theme-glass.css');
 assert.throws(()=>assertChangedAssets([...requests,{url:'/app.js?v=new',bytes:10000}],'/theme-glass.css'));
 assert.throws(()=>assertChangedAssets(requests.filter(r=>!r.url.includes('theme-glass')),'/theme-glass.css'));
 assertChangedAssets([{url:'/presenter.js?v=new',bytes:3200}],'/presenter.js');
 assert.throws(()=>assertChangedAssets([{url:'/presenter.js?v=new',bytes:3200},{url:'/icons/192.png',bytes:1000}],'/presenter.js'));
 });
 test('warm measurements reject unfinished shell downloads but allow API checks',()=>{
 assertWarmAssets([{url:'/api/version',bytes:62},{url:'/app.js?v=current',bytes:0}]);
 assert.throws(()=>assertWarmAssets([{url:'/theme-glass.css?v=current',bytes:5000}]));
 });
 test('cold acceptance rejects a second positive app response while allowing cache revalidation',()=>{
 assertColdAssets([{url:'/app.js?v=current',bytes:12000},{url:'/app.js?v=current',bytes:0}]);
 assert.throws(()=>assertColdAssets([{url:'/app.js?v=current',bytes:12000},{url:'/app.js?v=current',bytes:12000}]));
 assert.throws(()=>assertColdAssets([]));
 });
--- a/perf/migration.mjs
+++ b/perf/migration.mjs
@@ -0,0 +1,252 @@
 #!/usr/bin/env node
 // Real production-client migration through the unchanged Refresh UI flow.
 import assert from 'node:assert/strict';
 import { spawn, execFileSync } from 'node:child_process';
 import { mkdtempSync, mkdirSync, symlinkSync, unlinkSync, writeFileSync, rmSync, readFileSync } from 'node:fs';
 import { join, resolve } from 'node:path';
 import { createServer } from 'node:net';
 import { fileURLToPath } from 'node:url';
 import { createThrottleProxy } from './proxy.mjs';
 import { chromium, webkit } from 'playwright';
 const repo = resolve(fileURLToPath(new URL('..', import.meta.url)));
 const commit = 'b77938a', oldTag = '1175f1a1d2c1';
 const args = process.argv.slice(2);
 const targetFrontend = args.includes('--frontend-source') ? resolve(args[args.indexOf('--frontend-source')+1]) : join(repo,'frontend');
 const profile = args.includes('--profile') ? args[args.indexOf('--profile')+1] : 'lossy';
 const browserName = args.includes('--browser') ? args[args.indexOf('--browser') + 1] : 'all';
 assert.ok(['all', 'chromium', 'webkit'].includes(browserName));
 execFileSync('bash', [join(repo, 'perf/make-shell-fixture.sh'), commit, oldTag], { cwd: repo, stdio: 'inherit' });
 const scratch = mkdtempSync(join(repo, 'perf/.tmp/migration-'));
 const archive = join(scratch, 'old-server.tar');
 writeFileSync(archive, execFileSync('git', ['archive', commit, 'server'], { cwd: repo, maxBuffer: 20 * 1024 * 1024 }));
 execFileSync('tar', ['-xf', archive, '-C', scratch]);
 symlinkSync(join(repo, 'server/node_modules'), join(scratch, 'server/node_modules'));
 // Archived server modules resolve their Docker-style public imports relative
 // to the module, while static routes resolve ./public relative to cwd.
 symlinkSync(join(repo, `perf/fixtures/shell-${oldTag}`), join(scratch, 'server/public'));
 const shell = [...readFileSync(join(repo, 'frontend/sw.js'), 'utf8').match(/const SHELL = \[([\s\S]*?)\n\];/)[1].matchAll(/['"](\/[^'"]+)['"]/g)].map(m => m[1]);
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 async function waitAsync(page,predicate,arg,timeout=90000) {
  const deadline=Date.now()+timeout;
  while(Date.now()<deadline) {
    if(await page.evaluate(predicate,arg)) return;
    await sleep(100);
  }
  throw new Error('Timed out waiting for asynchronous migration condition');
 }
 async function freePort() {
  const server = createServer();
  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
  const port = server.address().port;
  await new Promise(resolve => server.close(resolve));
  return port;
 }
 async function run(name) {
  const cwd = join(scratch, name);
  mkdirSync(cwd);
  const port = await freePort();
  let child, output = '', browser, proxy;
  async function stop() {
    if (!child) return;
    const process = child; child = null;
    await new Promise(resolve => {
      if (process.exitCode !== null) return resolve();
      process.once('exit', resolve); process.kill('SIGTERM');
    });
  }
  async function start(old) {
    symlinkSync(old ? join(repo, `perf/fixtures/shell-${oldTag}`) : targetFrontend, join(cwd, 'public'));
    output = '';
    child = spawn('bun', [old ? join(scratch, 'server/server.js') : join(repo, 'server/server.js')], {
      cwd, env: { ...process.env, BUILD_TAG: '', ASSET_HASHING: old ? '0' : '1', PORT: String(port),
        DATA_DIR: join(cwd, 'data'), DB_PATH: join(cwd, 'db.sqlite'), MEDIA_DIR: join(cwd, 'media'), UPLOAD_DIR: join(cwd, 'uploads') },
      stdio: ['ignore', 'pipe', 'pipe'],
    });
    for (const stream of [child.stdout, child.stderr]) stream.on('data', chunk => { output = (output + chunk).slice(-12000); });
    for (let i = 0; i < 200; i++) {
      if (child.exitCode !== null) throw new Error(`Bun server exited: ${output}`);
      try { if ((await fetch(`http://127.0.0.1:${port}/api/version`)).ok) return; } catch {}
      await sleep(100);
    }
    throw new Error(`Bun startup timeout: ${output}`);
  }
  try {
    await start(true);
    assert.equal((await (await fetch(`http://127.0.0.1:${port}/api/version`)).json()).buildTag, oldTag);
    proxy = createThrottleProxy({ targetPort: port, profile });
    const proxyPort = await proxy.listen();
    const origin = `http://127.0.0.1:${proxyPort}`;
    browser = await ({ chromium, webkit }[name]).launch({ headless: true });
    const context = await browser.newContext();
    // Keep this harness entirely local, including any UI third-party requests.
    await context.route('**/*', route => route.request().url().startsWith(origin) ? route.continue() : route.abort());
    let banners = 0, navigations = 0;
    const errors = [];
    const failedRequests = [];
    let disconnected = false;
    const page = await context.newPage();
    await page.exposeFunction('migrationBanner', () => { banners++; });
    await page.addInitScript(() => {
      let visible = false;
      new MutationObserver(() => {
        const modal = document.querySelector('#modal');
        const now = !!modal && !modal.classList.contains('hidden') && /Update available/.test(document.querySelector('#modalTitle')?.textContent || '');
        if (now && !visible) window.migrationBanner();
        visible = now;
      }).observe(document, { subtree: true, childList: true, attributes: true, characterData: true });
    });
    page.on('pageerror', error => errors.push({ message: error.message, disconnected }));
    page.on('requestfailed', request => failedRequests.push(request.url()));
    page.on('framenavigated', frame => { if (frame === page.mainFrame()) navigations++; });
    await page.goto(origin, { waitUntil: 'load', timeout: 90000 });
    await page.waitForFunction(() => !!navigator.serviceWorker.controller, { timeout: 90000 });
    assert.equal(await page.locator('meta[name="ytp-build"]').getAttribute('content'), oldTag);
    assert.equal(banners, 0, 'no first-install banner');
    console.log(name,'old shell installed');
    await stop(); unlinkSync(join(cwd, 'public')); await start(false);
    console.log(name,'new server started');
    const backend = `http://127.0.0.1:${port}`;
    const manifest = await (await fetch(`${backend}/api/manifest`)).json();
    assert.notEqual(manifest.buildTag, oldTag);
    // Old URLs must continue delivering actual NEW bytes, not error/fallback HTML.
    for (const path of ['/app.js', '/theme-glass.css', '/opfs-worker.js', '/sha256-wasm.js', '/manifest.webmanifest', '/icons/icon-192.png', '/fonts/HankenGrotesk-latin.woff2']) {
      for (const query of ['', '?__ytpfresh=migration', `?v=${oldTag}`]) {
        const response = await fetch(`${backend}${path}${query}`);
        assert.equal(response.status, 200);
        assert.equal(response.headers.get('x-asset-hash'), manifest.files[path].h);
        assert.deepEqual(Buffer.from(await response.arrayBuffer()), readFileSync(join(targetFrontend, path.slice(1))));
        if (query.includes('?v=')) assert.equal(response.headers.get('cache-control'), 'no-store');
      }
    }
    proxy.resetStats(); proxy.startTracking();
    const started = Date.now();
    // Use the old application's public functions; no simulated update helper.
    console.log(name,'requesting old-client update');
    await page.evaluate(async () => {
      await checkBuildTag();
      await (await navigator.serviceWorker.getRegistration()).update();
    });
    console.log(name,'old-client update check returned');
    await waitAsync(page,async () => !!(await navigator.serviceWorker.getRegistration())?.waiting);
    await page.waitForFunction(() => /Update available/.test(document.querySelector('#modalTitle')?.textContent || '') && !document.querySelector('#modal').classList.contains('hidden'));
    assert.equal(banners, 1, 'exactly one offer before refresh');
    const before = navigations;
    await sleep(4500);
    assert.equal(navigations,before,'legacy installation does not reload without Refresh UI');
    // A legacy startup update can still be in flight through the stall proxy.
    // Require the target candidate, not a transient earlier waiting worker.
    await waitAsync(page,async tag => {
      const reg=await navigator.serviceWorker.getRegistration();
      const cache=await caches.open('ytplayer-assets');
      return !reg.installing && reg.waiting?.state==='installed' &&
        !!await cache.match('/__ytp_candidate/'+tag);
    }, manifest.buildTag);
    console.log(name,'candidate installed');
    const status = await page.evaluate(async()=>SwUpdate.askCacheStatus((await navigator.serviceWorker.getRegistration()).waiting,{timeoutMs:4000}));
    assert.equal(status?.ready,true,'new worker confirms persistent cache to old helper');
    assert.equal(status.version,manifest.buildTag,'status belongs to the target build');
    console.log(name,'ready status received');
    const oldTab = await context.newPage();
    await oldTab.goto(origin,{waitUntil:'load'});
    assert.equal(await oldTab.locator('meta[name="ytp-build"]').getAttribute('content'),oldTag);
    const oldBytes = await oldTab.evaluate(async()=>await (await fetch('/app.js')).text());
    // Bring the updating page forward after checking the retained old tab.
    await page.bringToFront();
    console.log(name,'clicking legacy refresh');
    await page.locator('#modal').getByRole('button', { name: 'Refresh UI', exact: true }).click({noWaitAfter:true,timeout:15000});
    console.log(name,'legacy refresh clicked');
    await page.waitForFunction(tag => document.querySelector('meta[name="ytp-build"]')?.content === tag && typeof checkBuildTag === 'function', manifest.buildTag, { timeout: 90000 });
    console.log(name,'new page loaded');
    await page.waitForFunction(() => !sessionStorage.getItem('ytpUpdateAttempt'));
    console.log(name,'update outcome cleared');
    await page.evaluate(async () => { await checkBuildTag(); await checkBuildTag(); await checkBuildTag(); });
    console.log(name,'banner rechecks complete');
    await sleep(2000);
    assert.equal(navigations - before, 1, 'one reload, no update loop');
    assert.equal(banners, 1, 'no banner after applying the current build');
    assert.equal(await oldTab.evaluate(async()=>await (await fetch('/app.js')).text()),oldBytes,'open legacy tab keeps N-1 plain assets');
    await oldTab.close();
    // Phase 3 commits core + layout first; idle warming must fill the retained full shell before offline feature checks.
    await page.evaluate(()=>Lazy.warm());
    await waitAsync(page,async files=>{const cache=await caches.open('ytplayer-assets');return (await Promise.all(Object.keys(files).map(async path=>{const response=await cache.match(path+'?v='+files[path].h);return !!response&&response.headers.get('X-Asset-Hash')===files[path].h;}))).every(Boolean);},Object.fromEntries(shell.map(path=>[path==='/'?'/index.html':path,manifest.files[path==='/'?'/index.html':path]])));
    const cacheResult = await page.evaluate(async ({ tag, shell, files }) => {
      const cache = await caches.open('ytplayer-assets');
      const missing = [], incorrect = [];
      for (const path of shell) {
        const p = path === '/' ? '/index.html' : path;
        const response = await cache.match(p+'?v='+files[p].h);
        if (!response) { missing.push(path); continue; }
        if (response.headers.get('x-asset-hash') !== files[path === '/' ? '/index.html' : path]?.h) incorrect.push(path);
      }
      return { missing, incorrect, count: (await cache.keys()).length };
    }, { tag: manifest.buildTag, shell, files: manifest.files });
    assert.deepEqual(cacheResult.missing, []);
    assert.deepEqual(cacheResult.incorrect, [], 'every cached shell asset belongs to the new build');
    proxy.stopTracking();
    const stats = proxy.getStats();
    assert.equal(stats.requests.filter(r=>r.url.includes('__ytpfresh')).length,0,'legacy helper skips its full download after ready:true');
    const durationMs = Date.now() - started;
    assert.deepEqual(errors, [], 'no script failures during installation and update');
    // Exercise the new helper's actual lexical Player guard, without starting
    // media or changing the production update/outcome code.
    let guardText='';
    page.once('dialog',async dialog=>{guardText=dialog.message();await dialog.dismiss();});
    const guard=await page.evaluate(async()=>{
      const saved=Player._wantsPlaying;Player._wantsPlaying=true;let reloads=0;
      try { await SwUpdate.applyUpdate({reg:null,container:navigator.serviceWorker,reload:()=>reloads++});return {reloads,blocked:false}; }
      catch(e){return {reloads,blocked:/Playing/.test(e.message)};}
      finally{Player._wantsPlaying=saved;}
    });
    assert.match(guardText,/Playing - update after this song \/ when paused/);
    assert.deepEqual(guard,{reloads:0,blocked:true});
    const refresh=await page.evaluate(async files=>{
      const cache=await caches.open('ytplayer-assets');
      const key='/async-guard.js?v='+files['/async-guard.js'].h;
      await cache.delete(key);
      const requests=[];
      const result=await SwUpdate.refreshShellInPlace({cachesApi:caches,
        fetchFn:(url,init)=>{requests.push(url);return fetch(url,init)},isShellCache:()=>true});
      if(!await cache.match(key)) throw Error('Refresh did not repair missing asset');
      // Independently test the worker's plain-URL eviction repair.
      const other='/visible-timer.js?v='+files['/visible-timer.js'].h;
      await cache.delete(other);
      const r=await fetch('/visible-timer.js');
      if(r.headers.get('X-Asset-Hash')!==files['/visible-timer.js'].h || !await cache.match(other)) throw Error('Evicted asset did not self-heal');
      return {result,requests};
    },manifest.files);
    assert.equal(refresh.result.refreshed,1,'thin refresh downloads only its missing asset');
    assert.deepEqual(refresh.requests,['/api/manifest','/async-guard.js?v='+manifest.files['/async-guard.js'].h]);
    disconnected = true;
    // Match baseline.mjs: Linux WebKit's setOffline breaks even SW navigation.
    // Cut the proxy AND stop Bun so offline boot cannot use network bytes.
    if (name !== 'webkit') await context.setOffline(true);
    proxy.setOffline(true);
    await stop();
    await page.reload({ waitUntil: 'load', timeout: 60000 });
    assert.equal(await page.locator('meta[name="ytp-build"]').getAttribute('content'), manifest.buildTag);
    await page.waitForFunction(() => typeof checkBuildTag === 'function' && !!document.querySelector('#cards')?.dataset.view);
    assert.equal(banners, 1);
    // WebKit surfaces rejected SW network fetches as pageerrors even when the
    // app catches them. Check only the exact, intentional offline API failures;
    // syntax/reference/runtime exceptions must still fail this harness.
    for (const error of errors) {
      assert.equal(name, 'webkit', 'only WebKit has offline transport pageerrors');
      assert.equal(error.disconnected, true, 'transport errors only after disconnection');
      assert.ok(error.message === 'TypeError: Load failed' || /\/api\/(?:recommendations\?[^\s]*|version)\.$/.test(error.message), `unexpected offline error: ${error.message}`);
    }
    if (errors.length) assert.ok(failedRequests.some(url => /\/api\/(?:recommendations|version)/.test(url)), 'transport errors correspond to disconnected API requests');
    const result = { browser: name, oldTag, newTag: manifest.buildTag, banners, updateReloads: 1, cachedFiles: cacheResult.count, durationMs, wireBytes: stats.totalWireBytes, offline: true, legacyURLs: 21, profile, userInitiatedOnly: true, playbackGuard: true, evictionRepair: true, incrementalRefresh: true, offlineTransportErrors: errors.length };
    console.log(JSON.stringify(result));
    return result;
  } catch(error) { console.error(name,error.stack); throw error; } finally {
    await browser?.close();
    if (proxy) { proxy.server.closeAllConnections(); await proxy.close(); }
    await stop();
  }
 }
 try {
  const results = [];
  for (const name of browserName === 'all' ? ['chromium', 'webkit'] : [browserName]) results.push(await run(name));
  writeFileSync(args.includes('--out') ? resolve(args[args.indexOf('--out')+1]) : join(repo, `perf/results/phase3-migration-${profile}-2026-10-08.json`), JSON.stringify({ commit, results }, null, 2) + '\n');
 } finally { rmSync(scratch, { recursive: true, force: true }); }
--- a/perf/offline-complete.mjs
+++ b/perf/offline-complete.mjs
@@ -0,0 +1,121 @@
 #!/usr/bin/env node
 // Real-server completeness and offline UI regression gate. All scratch stays in this worktree.
 import {spawn} from 'node:child_process';
 import {mkdtempSync,cpSync,mkdirSync,writeFileSync,rmSync} from 'node:fs';
 import {resolve,join} from 'node:path';
 import {createServer} from 'node:net';
 import {chromium,webkit} from 'playwright';
 import {createThrottleProxy} from './proxy.mjs';
 const repo=resolve(new URL('..',import.meta.url).pathname), args=process.argv.slice(2);
 const option=(key,fallback)=>args.includes(key)?args[args.indexOf(key)+1]:fallback;
 const source=resolve(option('--source',join(repo,'frontend'))),legacy=args.includes('--legacy');
 const scratch=mkdtempSync(join(repo,'perf/.tmp/offline-')),results=[];
 const sleep=ms=>new Promise(r=>setTimeout(r,ms));
 async function poll(fn,timeout=60000){const end=Date.now()+timeout;while(Date.now()<end){if(await fn())return true;await sleep(100);}return false;}
 async function run(engine){
 const cwd=join(scratch,engine);mkdirSync(cwd);cpSync(source,join(cwd,'public'),{recursive:true});
 const socket=createServer();await new Promise(r=>socket.listen(0,'127.0.0.1',r));const port=socket.address().port;await new Promise(r=>socket.close(r));
 let origin='http://127.0.0.1:'+port, log='',browser,proxy,context;
 const child=spawn('bun',[join(repo,'server/server.js')],{cwd,env:{...process.env,PORT:String(port),ASSET_HASHING:legacy?'0':'1',ASSET_SYNC:legacy?'0':'1',BUILD_TAG:legacy?'1175f1a1d2c1':'',DB_PATH:join(cwd,'db.sqlite'),DATA_DIR:join(cwd,'data'),MEDIA_DIR:join(cwd,'media'),UPLOAD_DIR:join(cwd,'uploads')},stdio:['ignore','pipe','pipe']});
 for(const stream of [child.stdout,child.stderr])stream.on('data',c=>log=(log+c).slice(-6000));
 const result={engine,legacy,failures:[],events:[],layouts:[],conditions:[]};results.push(result);
 try{
  if(!await poll(async()=>{try{return(await fetch(origin+'/api/version')).ok;}catch{return false;}}))throw Error(log);
  proxy=createThrottleProxy({targetPort:port,profile:'unthrottled'});proxy.startTracking();origin='http://127.0.0.1:'+await proxy.listen();
  const manifest=await(await fetch(origin+'/api/manifest')).json();result.build=manifest.buildTag;
  const type={chromium,webkit}[engine];
  const openContext=async()=>{if(engine==='webkit'){browser ||= await type.launch();return browser.newContext();}return type.launchPersistentContext(join(cwd,'profile'),{headless:true});};
  context=await openContext();
  const configure=async()=>{await context.route('**/*',r=>r.continue());return context.addInitScript(()=>{Object.defineProperty(navigator,'onLine',{configurable:true,get:()=>localStorage.getItem('perf-offline')!=='1'});Object.defineProperty(navigator,'connection',{configurable:true,value:{get saveData(){return localStorage.getItem('perf-save-data')==='1';}}});});};
  await configure();if(args.includes('--save-data'))await context.addInitScript(()=>localStorage.setItem('perf-save-data','1'));
  let offline=false;
  const attach=page=>{
   page.on('response',r=>{if(offline&&r.status()>=400&&!new URL(r.url()).pathname.startsWith('/api/'))result.failures.push({kind:'http',url:r.url(),status:r.status()});});
   page.on('requestfailed',r=>{if(offline)result.events.push({kind:'requestfailed',url:r.url(),error:r.failure()?.errorText});});
   page.on('console',m=>{if(!offline&&['warning','error'].includes(m.type()))console.log(engine,'install console:',m.text());if(offline&&m.type()==='error')result.events.push({kind:'console',message:m.text()});});
   page.on('pageerror',e=>{if(offline)result.events.push({kind:'pageerror',message:e.message,stack:e.stack});});
  };
  let page=await context.newPage();attach(page);
  const boot=async()=>{await page.goto(origin);await page.waitForFunction(()=>typeof data!=='undefined'&&document.querySelector('[aria-label="Car mode"]'));};
  const inventory=()=>page.evaluate(async({manifest,legacy})=>{
   const names=await caches.keys(),cache=await caches.open(legacy?names.find(n=>n.startsWith('ytplayer-')&&!['ytplayer-assets','ytplayer-fonts','ytplayer-thumbs'].includes(n)):'ytplayer-assets');
   const missing=[];for(const [path,file]of Object.entries(manifest.files)){const r=await cache.match(legacy?path:path+'?v='+file.h);if(!r||(!legacy&&r.headers.get('X-Asset-Hash')!==file.h))missing.push(path);}
   return{total:Object.keys(manifest.files).length,missing};
  },{manifest,legacy});
  const started=Date.now();console.log(engine,'install boot');await boot();console.log(engine,'waiting for worker activation');if(!await poll(()=>page.evaluate(async()=>!!(await navigator.serviceWorker.getRegistration())?.active),30000))throw Error('Worker did not activate: '+JSON.stringify(await page.evaluate(async()=>{const r=await navigator.serviceWorker.getRegistration();return {active:r?.active?.state,waiting:r?.waiting?.state,installing:r?.installing?.state,caches:await caches.keys(),keys:(await(await caches.open('ytplayer-assets')).keys()).map(r=>new URL(r.url).pathname)};})));await page.evaluate(()=>navigator.serviceWorker.ready);console.log(engine,'worker active');await page.evaluate(()=>window.Lazy?.warm());
  await poll(async()=>!(await inventory()).missing.length,Number(option('--warm-timeout','15000')));
  console.log(engine,'inventory complete');result.installMs=Date.now()-started;result.inventory=await inventory();result.installWire=proxy.getStats();result.saveData=await page.evaluate(()=>navigator.connection?.saveData);
  if(result.inventory.missing.length)result.failures.push({kind:'incomplete',paths:result.inventory.missing});
  // Offline navigation always starts from a controlled document.
  await page.reload();await page.waitForFunction(()=>typeof data!=='undefined'&&document.querySelector('[aria-label="Car mode"]'));
  await page.evaluate(()=>localStorage.setItem('perf-offline','1'));if(engine==='chromium')await context.setOffline(true);await proxy.setOffline(true);offline=true;result.offlineTransport=engine==='chromium'?'context.setOffline + proxy':'proxy (Linux WebKit setOffline breaks cached navigation)';
  for(const layout of ['classic','f7-swipe','glass-stage','bento-hub']){
   const check={layout,opened:[],errors:[]};result.layouts.push(check);
   const attempt=async(name,fn)=>{console.log(engine,layout,name);try{await Promise.race([fn(),new Promise((_,reject)=>{const t=setTimeout(()=>reject(Error('Action timed out')),10000);t.unref();})]);check.opened.push(name);}catch(e){check.errors.push({name,error:e.message});result.failures.push({layout,name,error:e.message});}};
   await attempt('reload',async()=>{await page.evaluate(layout=>{data.settings.layout=layout;localStorage.setItem('_ytpdata',JSON.stringify(data));},layout);await page.reload();await page.waitForFunction(()=>typeof data!=='undefined'&&document.querySelector('[aria-label="Car mode"]'),null,{timeout:10000});});
   for(const view of ['search','queue','history','saved','downloads','settings','nowPlaying'])await attempt(view,()=>page.evaluate(async type=>{view={type};if(type==='settings')await renderSettings();else render();await new Promise(r=>setTimeout(r,150));},view));
   await attempt('sidebar',()=>page.evaluate(()=>{document.querySelector('#menuBtn')?.click();document.querySelector('#sidebar')?.classList.remove('open');}));
   await attempt('all lazy groups',()=>page.evaluate(async()=>{if(window.Lazy)for(const [name,group] of Object.entries(Lazy.manifest.groups))if(group.background)await Lazy.load(name);}));
   for(const section of ['piano','midi','floating-lyrics','vocal-reducer','equalizer','setlist-import','broadcast','party-dj','direct-transfer'])await attempt(section,async()=>{await page.evaluate(async()=>{view={type:'settings'};await renderSettings();});await page.waitForSelector('[data-section="'+section+'"]',{timeout:5000,state:'attached'});await page.evaluate(id=>document.querySelector('[data-section="'+id+'"]').click(),section);await page.waitForTimeout(100);});
   await attempt('presenter',async()=>{await page.evaluate(async()=>{history.replaceState(null,'','/?present=');await Presenter.boot();});await page.waitForSelector('#presenterView:not(.hidden)',{timeout:5000});await page.locator('#pvCode').fill('x');await page.locator('#pvPairBtn').click();if(!/6-digit/.test(await page.locator('#pvMsg').textContent()))throw Error('Presenter validation did not run');await page.evaluate(()=>{document.querySelector('#presenterView').classList.add('hidden');document.body.classList.remove('presenter-open');history.replaceState(null,'','/');});});
   await attempt('video editor',async()=>{await page.evaluate(()=>openVideoEditor({id:'upl_0123456789ab',title:'Offline edit',duration:120}));if(!await page.evaluate(()=>window.OPFS?.isSupported())){if(!/Editing needs offline storage/.test(await page.locator('#toastContainer').textContent()))throw Error('Missing unsupported-storage explanation');result.unsupportedFeatures ||= [];if(!result.unsupportedFeatures.includes('video editor: OPFS unavailable in Linux WebKit'))result.unsupportedFeatures.push('video editor: OPFS unavailable in Linux WebKit');return;}await page.waitForSelector('.video-editor',{timeout:5000});await page.locator('.ve-from').fill('0:10');await page.locator('.ve-to').fill('0:20');await page.locator('.ve-add').click();if(!/10/.test(await page.locator('.ve-cuts').textContent()))throw Error('Cut was not added');await page.evaluate(()=>closeModal());});
   await attempt('lyrics editor',async()=>{await page.evaluate(async()=>{data.profile={name:'offline-test'};await Notes.load({id:'abcdefghijk',title:'Offline lyrics'});document.querySelector('#lyricsEditBtn').click();});await page.waitForSelector('.lyr-editor-text',{timeout:5000});await page.locator('.lyr-editor-text').fill('[0:10] Offline lyric');await page.evaluate(()=>closeModal());});
   await attempt('car',async()=>{await page.evaluate(()=>document.querySelector('[aria-label="Car mode"]').click());await page.waitForSelector('.car-mode',{timeout:5000});await page.getByRole('button',{name:'Exit Car mode'}).click();});
   await attempt('remote',async()=>{await page.evaluate(()=>document.querySelector('#navRemoteBtn').click());await page.waitForSelector('#modal:not(.hidden)',{timeout:5000});await page.evaluate(()=>closeModal());});
   await attempt('party',async()=>{await page.evaluate(()=>document.querySelector('#navPartyBtn').click());await page.waitForSelector('#partyPanel:not(.hidden)',{timeout:5000});await page.evaluate(()=>document.querySelector('#partyPanel').classList.add('hidden'));});
   await attempt('share/external',()=>page.evaluate(async()=>{current={meta:{id:'benchmedia01',title:'Offline fixture'}};await Share.open();closeModal();await External.open();closeModal();}));
   await attempt('stats',async()=>{await page.evaluate(()=>{view={type:'stats'};render();});await page.waitForSelector('.stats-empty, .stats',{timeout:5000});});
   await attempt('service',()=>page.evaluate(()=>{enterServiceMode();exitServiceMode();}));
   await attempt('runtime URLs',async()=>{const failures=await page.evaluate(async manifest=>{const paths=Object.keys(manifest.files).filter(p=>/\.(?:woff2|png|webmanifest)$/.test(p)||/\/(?:opfs-worker|hash-worker|direct-recv-worker|p2p-recv-worker|sha256-wasm)\.js$/.test(p)||p==='/piano-engine.mjs'||p==='/vendor/framework7-swipe.min.js');const bad=[];for(const path of paths){const r=await fetch(path);await r.arrayBuffer();if(!r.ok)bad.push(path+': '+r.status);}return bad;},manifest);if(failures.length)throw Error(failures.join(', '));});
  }
  const apiFailures=result.events.filter(e=>e.kind==='requestfailed'&&new URL(e.url).pathname.startsWith('/api/'));
  result.expectedTransportErrors=result.events.filter(e=>e.kind==='pageerror'&&engine==='webkit'&&!e.stack&&apiFailures.length&&(e.message==='TypeError: Load failed'||e.message.includes('/api/')));
  result.staticFailures=result.events.filter(e=>e.kind==='requestfailed'&&new URL(e.url).origin===origin&&!new URL(e.url).pathname.startsWith('/api/')&&new URL(e.url).pathname!=='/sw.js');
  result.scriptErrors=result.events.filter(e=>e.kind==='pageerror'&&!result.expectedTransportErrors.includes(e));
  result.failures.push(...result.staticFailures,...result.scriptErrors);
  // Resumption and Save-Data/two-tab checks use the same persisted CacheStorage.
  offline=false;if(engine==='chromium')await context.setOffline(false);await proxy.setOffline(false);await page.evaluate(()=>localStorage.removeItem('perf-offline'));
  if(!legacy&&args.includes('--conditions')){
   await proxy.setOffline(true);
   await page.evaluate(async manifest=>{const c=await caches.open('ytplayer-assets');for(const p of Object.keys(manifest.files).filter(p=>manifest.files[p].g!=='core'))await c.delete(p+'?v='+manifest.files[p].h);localStorage.setItem('perf-save-data','1');},manifest);
   await page.evaluate(()=>navigator.serviceWorker.controller.postMessage({type:'COMPLETE_ASSETS'}));
   await poll(()=>page.evaluate(async()=>{const c=await caches.open('ytplayer-assets'),s=await(await c.match('/__ytp_asset_state')).json(),r=await c.match('/__ytp_completion/'+s.current.buildTag);return r&&(await r.json()).running;}),10000);
   const interrupted=await inventory();
   if(!interrupted.missing.length)throw Error('Interruption did not leave missing assets');
   if(engine==='chromium'){const cdp=await context.newCDPSession(page);await cdp.send('ServiceWorker.enable');await cdp.send('ServiceWorker.stopAllWorkers');await cdp.detach();}
   if(engine==='chromium'){
    await page.close();await context.close();await proxy.setOffline(false);
    context=await openContext();await configure();page=await context.newPage();attach(page);await boot();
   }else{
    // Linux WebKit persistent contexts do not share page/worker CacheStorage.
    // Exercise a real worker re-registration in the same browser context.
    await page.evaluate(async()=>{const r=await navigator.serviceWorker.getRegistration();await r.unregister();});
    await page.close();await proxy.setOffline(false);page=await context.newPage();attach(page);await boot();
   }
   const other=await context.newPage();await other.goto(origin);await other.waitForSelector('#carModeBtn');
   const complete=await poll(async()=>!(await inventory()).missing.length);
   result.conditions.push({name:engine==='webkit'?'page closed, worker re-registration, Save-Data, two tabs':'interrupted job, page closed, browser restarted with same profile, Save-Data, two tabs',interruptedMissing:interrupted.missing.length,storageMode:engine==='webkit'?'same-context worker re-registration; Linux WebKit persistent CacheStorage is broken':'persistent disk profile',complete});
   if(!complete)result.failures.push({kind:'resume',inventory:await inventory(),status:await page.evaluate(async()=>({registration:!!(await navigator.serviceWorker.getRegistration())?.active}))});
   // Evict one optional file and require the online event alone to restart work.
   const path='/piano-engine.mjs';await page.evaluate(async({path,manifest})=>{await(await caches.open('ytplayer-assets')).delete(path+'?v='+manifest.files[path].h);localStorage.removeItem('perf-save-data');window.dispatchEvent(new Event('online'));},{path,manifest});
   const onlineResume=await poll(async()=>!(await inventory()).missing.length);result.conditions.push({name:'online event, Save-Data off',complete:onlineResume});if(!onlineResume)result.failures.push({kind:'online-resume'});
   if(engine==='chromium'){
    await sleep(100);await proxy.setOffline(true);
    await context.route('**/admin.html?offline-inspector=1',route=>route.fulfill({contentType:'text/html',body:'<!doctype html><title>Cache inspector</title>'}));
    const inspector=await context.newPage();await inspector.goto(origin+'/admin.html?offline-inspector=1');const cdp=await context.newCDPSession(inspector);
    const {caches:names}=await cdp.send('CacheStorage.requestCacheNames',{securityOrigin:origin});
    const cacheId=names.find(c=>c.cacheName==='ytplayer-assets').cacheId;
    await page.evaluate(async manifest=>{const c=await caches.open('ytplayer-assets');for(const path of Object.keys(manifest.files).filter(p=>manifest.files[p].g!=='core'))await c.delete(path+'?v='+manifest.files[path].h);navigator.serviceWorker.controller.postMessage({type:'COMPLETE_ASSETS'});},manifest);
    await poll(()=>page.evaluate(async()=>{const c=await caches.open('ytplayer-assets'),s=await(await c.match('/__ytp_asset_state')).json(),r=await c.match('/__ytp_completion/'+s.current.buildTag);return r&&(await r.json()).running;}),5000);
    await page.close();await other.close();await proxy.setOffline(false);
    const withoutPage=await poll(async()=>{const {cacheDataEntries:entries}=await cdp.send('CacheStorage.requestEntries',{cacheId,skipCount:0,pageSize:1000});return Object.entries(manifest.files).every(([path,file])=>entries.some(e=>e.requestURL===origin+path+'?v='+file.h&&e.responseHeaders.some(h=>h.name.toLowerCase()==='x-asset-hash'&&h.value===file.h)));});
    result.conditions.push({name:'worker completes with every application page closed; passive same-origin inspector only',complete:withoutPage});
    if(!withoutPage)result.failures.push({kind:'completion-without-page'});
    await cdp.detach();await inspector.close();
   }else await other.close();
  }
  console.log(engine,JSON.stringify({missing:result.inventory.missing,failures:result.failures,conditions:result.conditions}));
 }catch(e){result.failures.push({kind:'harness',error:e.stack});console.log(engine,e.message);}finally{await context?.close();await browser?.close();await proxy?.close();child.kill('SIGTERM');if(child.exitCode===null)await new Promise(r=>child.once('exit',r));}
 }
 try{for(const engine of option('--browser','all')==='all'?['chromium','webkit']:[option('--browser')])await run(engine);}finally{writeFileSync(resolve(option('--out',join(repo,'perf/results/offline-complete.json'))),JSON.stringify({results},null,2)+'\n');rmSync(scratch,{recursive:true,force:true});}
 if(results.some(r=>r.failures.length))process.exitCode=1;
--- a/perf/proxy.mjs
+++ b/perf/proxy.mjs
@@ -47,7 +47,9 @@ export function categorizeContentType(contentType, urlPath) {
 */
 export function createThrottleProxy({ targetPort, profile = 'lte' }) {
  let activeTracking = false;
  let trackingStart = 0;
  let requestCount = 0;
  let requests = [];
  let totalWireBytes = 0;
  let bytesByType = {
    html: 0,
@@ -78,6 +80,7 @@ export function createThrottleProxy({ targetPort, profile = 'lte' }) {
      return;
    }
    const requestStart = Date.now();
    reqIndex++;
    const currentReqIndex = reqIndex;
@@ -110,8 +113,12 @@ export function createThrottleProxy({ targetPort, profile = 'lte' }) {
        const ct = upRes.headers['content-type'] || '';
        const cat = categorizeContentType(ct, pathname);
        let recorded;
        if (activeTracking) {
          requestCount++;
          recorded={url:clientReq.url,status:upRes.statusCode,bytes:0,index:currentReqIndex,startMs:requestStart-trackingStart,headersMs:Date.now()-trackingStart};
          clientRes.once('finish',()=>{recorded.endMs=Date.now()-trackingStart;});
          requests.push(recorded);
        }
        clientRes.writeHead(upRes.statusCode, upRes.headers);
@@ -120,6 +127,7 @@ export function createThrottleProxy({ targetPort, profile = 'lte' }) {
          upRes.on('data', (chunk) => {
            if (activeTracking) {
              totalWireBytes += chunk.length;
              if(recorded) recorded.bytes += chunk.length;
              bytesByType[cat] = (bytesByType[cat] || 0) + chunk.length;
            }
            clientRes.write(chunk);
@@ -131,6 +139,7 @@ export function createThrottleProxy({ targetPort, profile = 'lte' }) {
          throttler.on('data', (chunk) => {
            if (activeTracking) {
              totalWireBytes += chunk.length;
              if(recorded) recorded.bytes += chunk.length;
              bytesByType[cat] = (bytesByType[cat] || 0) + chunk.length;
            }
          });
@@ -170,13 +179,14 @@ export function createThrottleProxy({ targetPort, profile = 'lte' }) {
        server.close(resolve);
      }),
    startTracking: () => {
      trackingStart = Date.now();
      activeTracking = true;
    },
    stopTracking: () => {
      activeTracking = false;
    },
    resetStats: () => {
-      requestCount = 0;
+      requestCount = 0; requests = [];
      totalWireBytes = 0;
      bytesByType = {
        html: 0,
@@ -193,7 +203,7 @@ export function createThrottleProxy({ targetPort, profile = 'lte' }) {
      isOfflineMode = !!val;
    },
    getStats: () => ({
-      requestCount,
+      requestCount, requests,
      totalWireBytes,
      bytesByType: { ...bytesByType },
    }),
--- a/perf/results/autosave-b77938a.json
+++ b/perf/results/autosave-b77938a.json
@@ -0,0 +1,208 @@
 {
  "revision": "/home/josh/development/personal/ytplayer-codex/wt-autosave/perf/fixtures/shell-1175f1a1d2c1",
  "browsers": {
    "chromium": [
      {
        "scenario": "open-default",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "open-audio-only",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-prefer-stream",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add-setting-off",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-existing-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-boot-off",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "settings-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      }
    ],
    "webkit": [
      {
        "scenario": "open-default",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-save-first",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-audio-only",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-prefer-stream",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add-setting-off",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-existing-add",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-boot-off",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "settings-save-first",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      }
    ]
  },
  "failures": [],
  "unsupported": [
    "webkit"
  ],
  "buildTag": "1175f1a1d2c1"
 }
--- a/perf/results/autosave-current.json
+++ b/perf/results/autosave-current.json
@@ -0,0 +1,110 @@
 {
  "revision": "/home/josh/development/personal/ytplayer-codex/wt-autosave/frontend",
  "browsers": {
    "chromium": [
      {
        "scenario": "open-default",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "open-audio-only",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-prefer-stream",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add-setting-off",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-existing-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-boot-off",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      },
      {
        "scenario": "settings-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      }
    ]
  },
  "failures": [],
  "unsupported": [],
  "buildTag": "e93dbca4dc5a"
 }
--- a/perf/results/autosave-main.json
+++ b/perf/results/autosave-main.json
@@ -0,0 +1,208 @@
 {
  "revision": "main",
  "browsers": {
    "chromium": [
      {
        "scenario": "open-default",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "open-audio-only",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-prefer-stream",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add-setting-off",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-existing-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-boot-off",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "settings-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      }
    ],
    "webkit": [
      {
        "scenario": "open-default",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-save-first",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-audio-only",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-prefer-stream",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add-setting-off",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-existing-add",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-boot-off",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "settings-save-first",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      }
    ]
  },
  "failures": [],
  "unsupported": [
    "webkit"
  ],
  "buildTag": "c3dbdd7039db"
 }
--- a/perf/results/autosave-phase1.json
+++ b/perf/results/autosave-phase1.json
@@ -0,0 +1,110 @@
 {
  "revision": "codex/phase1",
  "browsers": {
    "chromium": [
      {
        "scenario": "open-default",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "open-audio-only",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-prefer-stream",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add-setting-off",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-existing-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-boot-off",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      },
      {
        "scenario": "settings-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      }
    ]
  },
  "failures": [],
  "unsupported": [],
  "buildTag": "288787b9f7db"
 }
--- a/perf/results/autosave-phase2.json
+++ b/perf/results/autosave-phase2.json
@@ -0,0 +1,110 @@
 {
  "revision": "codex/phase2",
  "browsers": {
    "chromium": [
      {
        "scenario": "open-default",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "open-audio-only",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-prefer-stream",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add-setting-off",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-existing-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-boot-off",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      },
      {
        "scenario": "settings-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      }
    ]
  },
  "failures": [],
  "unsupported": [],
  "buildTag": "4f7090fff60c"
 }
--- a/perf/results/autosave-phase3.json
+++ b/perf/results/autosave-phase3.json
@@ -0,0 +1,60 @@
 {
  "revision": "codex/phase3",
  "browsers": {
    "chromium": [
      {
        "scenario": "open-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "settings-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      }
    ]
  },
  "failures": [],
  "unsupported": [],
  "buildTag": "bea1f63eba85"
 }
--- a/perf/results/autosave-phase4.json
+++ b/perf/results/autosave-phase4.json
@@ -0,0 +1,60 @@
 {
  "revision": "codex/phase4",
  "browsers": {
    "chromium": [
      {
        "scenario": "open-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "settings-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      }
    ]
  },
  "failures": [],
  "unsupported": [],
  "buildTag": "c3dbdd7039db"
 }
--- a/perf/results/autosave-phase5.json
+++ b/perf/results/autosave-phase5.json
@@ -0,0 +1,60 @@
 {
  "revision": "codex/phase5",
  "browsers": {
    "chromium": [
      {
        "scenario": "open-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "settings-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      }
    ]
  },
  "failures": [],
  "unsupported": [],
  "buildTag": "c3dbdd7039db"
 }
--- a/perf/results/autosave-rollback.json
+++ b/perf/results/autosave-rollback.json
@@ -0,0 +1,62 @@
 {
  "revision": "/home/josh/development/personal/ytplayer-codex/wt-autosave/frontend",
  "browsers": {
    "chromium": [
      {
        "scenario": "open-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      },
      {
        "scenario": "settings-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      }
    ]
  },
  "failures": [],
  "unsupported": [],
  "buildTag": "2b1c433b19aa"
 }
--- a/perf/results/final-2026-10-08.json
+++ b/perf/results/final-2026-10-08.json
--- a/perf/results/hygiene-after.json
+++ b/perf/results/hygiene-after.json
--- a/perf/results/hygiene-assets.json
+++ b/perf/results/hygiene-assets.json
@@ -0,0 +1,260 @@
 {
  "before": {
    "count": 151,
    "rawBytes": 2044337,
    "manifestBytes": 15601
  },
  "after": {
    "count": 102,
    "rawBytes": 1807059,
    "manifestBytes": 12551
  },
  "excluded": [
    {
      "path": "/admin.html",
      "rawBytes": 102005,
      "brBytes": 24050
    },
    {
      "path": "/app-seams.test.js",
      "rawBytes": 9786,
      "brBytes": 2457
    },
    {
      "path": "/asset-sync-core.test.js",
      "rawBytes": 9430,
      "brBytes": 2525
    },
    {
      "path": "/asset-worker.test.js",
      "rawBytes": 8219,
      "brBytes": 1984
    },
    {
      "path": "/async-guard.test.js",
      "rawBytes": 2543,
      "brBytes": 765
    },
    {
      "path": "/audio-continuity.test.js",
      "rawBytes": 2899,
      "brBytes": 813
    },
    {
      "path": "/bento-hub.test.js",
      "rawBytes": 868,
      "brBytes": 283
    },
    {
      "path": "/car-mode.test.js",
      "rawBytes": 2556,
      "brBytes": 973
    },
    {
      "path": "/direct-protocol.test.js",
      "rawBytes": 1279,
      "brBytes": 521
    },
    {
      "path": "/direct-stream.test.js",
      "rawBytes": 891,
      "brBytes": 390
    },
    {
      "path": "/download-errors.test.js",
      "rawBytes": 1783,
      "brBytes": 566
    },
    {
      "path": "/downloads-page.test.js",
      "rawBytes": 2453,
      "brBytes": 699
    },
    {
      "path": "/downloads.test.js",
      "rawBytes": 1608,
      "brBytes": 639
    },
    {
      "path": "/eq-core.test.js",
      "rawBytes": 1055,
      "brBytes": 428
    },
    {
      "path": "/export.test.js",
      "rawBytes": 521,
      "brBytes": 259
    },
    {
      "path": "/f7-layout.test.js",
      "rawBytes": 1400,
      "brBytes": 380
    },
    {
      "path": "/fonts/PlusJakartaSans-OFL.txt",
      "rawBytes": 4402,
      "brBytes": 1428
    },
    {
      "path": "/fullscreen-orientation.test.js",
      "rawBytes": 1278,
      "brBytes": 404
    },
    {
      "path": "/glass-controls.test.js",
      "rawBytes": 1177,
      "brBytes": 412
    },
    {
      "path": "/glass-panel-layout.test.js",
      "rawBytes": 782,
      "brBytes": 259
    },
    {
      "path": "/lazy.test.js",
      "rawBytes": 7117,
      "brBytes": 2030
    },
    {
      "path": "/loudness.test.js",
      "rawBytes": 1626,
      "brBytes": 706
    },
    {
      "path": "/lower-third.test.js",
      "rawBytes": 845,
      "brBytes": 338
    },
    {
      "path": "/lyrics-core.test.js",
      "rawBytes": 4996,
      "brBytes": 1430
    },
    {
      "path": "/lyrics-display.test.js",
      "rawBytes": 494,
      "brBytes": 244
    },
    {
      "path": "/lyrics-window.test.js",
      "rawBytes": 617,
      "brBytes": 264
    },
    {
      "path": "/midi.test.js",
      "rawBytes": 987,
      "brBytes": 348
    },
    {
      "path": "/p2p-core.test.js",
      "rawBytes": 2116,
      "brBytes": 675
    },
    {
      "path": "/party-dj.test.js",
      "rawBytes": 550,
      "brBytes": 234
    },
    {
      "path": "/piano-core.test.js",
      "rawBytes": 2102,
      "brBytes": 731
    },
    {
      "path": "/prewarm-next.test.js",
      "rawBytes": 1268,
      "brBytes": 434
    },
    {
      "path": "/related-videos.test.js",
      "rawBytes": 1514,
      "brBytes": 556
    },
    {
      "path": "/resume-core.test.js",
      "rawBytes": 1531,
      "brBytes": 484
    },
    {
      "path": "/saved-page.test.js",
      "rawBytes": 553,
      "brBytes": 224
    },
    {
      "path": "/server-backfill.test.js",
      "rawBytes": 2118,
      "brBytes": 683
    },
    {
      "path": "/setlist-import.test.js",
      "rawBytes": 1134,
      "brBytes": 508
    },
    {
      "path": "/settings-sections.test.js",
      "rawBytes": 1209,
      "brBytes": 405
    },
    {
      "path": "/sha256.test.js",
      "rawBytes": 3251,
      "brBytes": 1153
    },
    {
      "path": "/shell-consistency.test.js",
      "rawBytes": 5265,
      "brBytes": 1507
    },
    {
      "path": "/stats-core.test.js",
      "rawBytes": 3165,
      "brBytes": 929
    },
    {
      "path": "/sw-update.test.js",
      "rawBytes": 17825,
      "brBytes": 4099
    },
    {
      "path": "/sw.test.js",
      "rawBytes": 6219,
      "brBytes": 1849
    },
    {
      "path": "/vendor/framework7-swipe.entry.js",
      "rawBytes": 1040,
      "brBytes": 290
    },
    {
      "path": "/video-edit.test.js",
      "rawBytes": 3396,
      "brBytes": 855
    },
    {
      "path": "/visible-timer.test.js",
      "rawBytes": 2827,
      "brBytes": 687
    },
    {
      "path": "/vocal-reducer.test.js",
      "rawBytes": 648,
      "brBytes": 235
    },
    {
      "path": "/wasm/loudness.c",
      "rawBytes": 2132,
      "brBytes": 861
    },
    {
      "path": "/wasm/sha256.c",
      "rawBytes": 2428,
      "brBytes": 1064
    },
    {
      "path": "/worker-imports.test.js",
      "rawBytes": 1370,
      "brBytes": 636
    }
  ],
  "excludedBrBytes": 64694
 }
--- a/perf/results/hygiene-before-rollback-offline.json
+++ b/perf/results/hygiene-before-rollback-offline.json
--- a/perf/results/hygiene-before.json
+++ b/perf/results/hygiene-before.json
--- a/perf/results/hygiene-migration.json
+++ b/perf/results/hygiene-migration.json
@@ -0,0 +1,41 @@
 {
  "commit": "b77938a",
  "results": [
    {
      "browser": "chromium",
      "oldTag": "1175f1a1d2c1",
      "newTag": "604f8f8d8a68",
      "banners": 1,
      "updateReloads": 1,
      "cachedFiles": 124,
      "durationMs": 26801,
      "wireBytes": 638444,
      "offline": true,
      "legacyURLs": 21,
      "profile": "lossy",
      "userInitiatedOnly": true,
      "playbackGuard": true,
      "evictionRepair": true,
      "incrementalRefresh": true,
      "offlineTransportErrors": 0
    },
    {
      "browser": "webkit",
      "oldTag": "1175f1a1d2c1",
      "newTag": "604f8f8d8a68",
      "banners": 1,
      "updateReloads": 1,
      "cachedFiles": 124,
      "durationMs": 24322,
      "wireBytes": 743954,
      "offline": true,
      "legacyURLs": 21,
      "profile": "lossy",
      "userInitiatedOnly": true,
      "playbackGuard": true,
      "evictionRepair": true,
      "incrementalRefresh": true,
      "offlineTransportErrors": 4
    }
  ]
 }
--- a/perf/results/hygiene-offline.json
+++ b/perf/results/hygiene-offline.json
--- a/perf/results/hygiene-rollback-offline.json
+++ b/perf/results/hygiene-rollback-offline.json
--- a/perf/results/integration-autosave.json
+++ b/perf/results/integration-autosave.json
@@ -0,0 +1,208 @@
 {
  "revision": "/home/josh/development/personal/ytplayer-codex/wt-integrate/frontend",
  "browsers": {
    "chromium": [
      {
        "scenario": "open-default",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "open-audio-only",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-prefer-stream",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add-setting-off",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-existing-add",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-boot-off",
        "supported": true,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "settings-save-first",
        "supported": true,
        "saved": true,
        "bytes": 30290,
        "calls": 1,
        "errors": [
          "Cannot read properties of null (reading 'addEventListener')"
        ]
      }
    ],
    "webkit": [
      {
        "scenario": "open-default",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-save-first",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-audio-only",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "open-prefer-stream",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-add",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-add-setting-off",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-existing-add",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "playlist-boot",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "playlist-boot-off",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "pinned-boot",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      },
      {
        "scenario": "settings-enable",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 1,
        "errors": []
      },
      {
        "scenario": "settings-save-first",
        "supported": false,
        "saved": false,
        "bytes": 0,
        "calls": 0,
        "errors": []
      }
    ]
  },
  "failures": [],
  "unsupported": [
    "webkit"
  ],
  "buildTag": "7760d5727244"
 }
--- a/perf/results/integration-baseline.json
+++ b/perf/results/integration-baseline.json
--- a/perf/results/integration-lazy.json
+++ b/perf/results/integration-lazy.json
@@ -0,0 +1,97 @@
 {
  "results": [
    {
      "browser": "chromium",
      "sourceBuildTag": "7760d5727244",
      "classicSharedDefaults": true,
      "cssOrderPreserved": true,
      "settingsSearch": true,
      "carControls": 4,
      "offlineFeature": true,
      "firstUseNetwork": 0,
      "layoutsOffline": [
        "glass-stage",
        "bento-hub",
        "f7-swipe",
        "classic"
      ],
      "pinned": true,
      "compatibleUnexecutedNewURL": true,
      "incompatibleN1ReloadRequired": true,
      "stagedN1": true,
      "appEvictionN1Offline": true,
      "playbackGuard": true,
      "prePaintLayout": true,
      "offlineSettingsPanels": true,
      "scriptErrors": [],
      "offlineTransportErrors": []
    },
    {
      "browser": "webkit",
      "sourceBuildTag": "7760d5727244",
      "classicSharedDefaults": true,
      "cssOrderPreserved": true,
      "settingsSearch": true,
      "carControls": 4,
      "offlineFeature": true,
      "firstUseNetwork": 0,
      "layoutsOffline": [
        "glass-stage",
        "bento-hub",
        "f7-swipe",
        "classic"
      ],
      "pinned": true,
      "compatibleUnexecutedNewURL": true,
      "incompatibleN1ReloadRequired": true,
      "stagedN1": true,
      "appEvictionN1Offline": true,
      "playbackGuard": true,
      "prePaintLayout": true,
      "offlineSettingsPanels": true,
      "scriptErrors": [],
      "offlineTransportErrors": [
        {
          "message": "TypeError: Load failed",
          "disconnected": true
        },
        {
          "message": "/127.0.0.1:39913/api/version.",
          "disconnected": true
        },
        {
          "message": "TypeError: Load failed",
          "disconnected": true
        },
        {
          "message": "/127.0.0.1:39913/api/recommendations?fp=163577c02a53bc40.",
          "disconnected": true
        },
        {
          "message": "TypeError: Load failed",
          "disconnected": true
        },
        {
          "message": "/127.0.0.1:39913/api/version.",
          "disconnected": true
        },
        {
          "message": "TypeError: Load failed",
          "disconnected": true
        },
        {
          "message": "/127.0.0.1:39913/api/recommendations?fp=163577c02a53bc40.",
          "disconnected": true
        },
        {
          "message": "TypeError: Load failed",
          "disconnected": true
        },
        {
          "message": "/127.0.0.1:39913/api/version.",
          "disconnected": true
        }
      ]
    }
  ]
 }
--- a/perf/results/integration-migration-lossy.json
+++ b/perf/results/integration-migration-lossy.json
@@ -0,0 +1,41 @@
 {
  "commit": "b77938a",
  "results": [
    {
      "browser": "chromium",
      "oldTag": "1175f1a1d2c1",
      "newTag": "7760d5727244",
      "banners": 1,
      "updateReloads": 1,
      "cachedFiles": 132,
      "durationMs": 27587,
      "wireBytes": 642140,
      "offline": true,
      "legacyURLs": 21,
      "profile": "lossy",
      "userInitiatedOnly": true,
      "playbackGuard": true,
      "evictionRepair": true,
      "incrementalRefresh": true,
      "offlineTransportErrors": 0
    },
    {
      "browser": "webkit",
      "oldTag": "1175f1a1d2c1",
      "newTag": "7760d5727244",
      "banners": 1,
      "updateReloads": 1,
      "cachedFiles": 132,
      "durationMs": 24285,
      "wireBytes": 748999,
      "offline": true,
      "legacyURLs": 21,
      "profile": "lossy",
      "userInitiatedOnly": true,
      "playbackGuard": true,
      "evictionRepair": true,
      "incrementalRefresh": true,
      "offlineTransportErrors": 4
    }
  ]
 }
--- a/perf/results/integration-migration-unthrottled.json
+++ b/perf/results/integration-migration-unthrottled.json
@@ -0,0 +1,41 @@
 {
  "commit": "b77938a",
  "results": [
    {
      "browser": "chromium",
      "oldTag": "1175f1a1d2c1",
      "newTag": "7760d5727244",
      "banners": 1,
      "updateReloads": 1,
      "cachedFiles": 132,
      "durationMs": 10957,
      "wireBytes": 653223,
      "offline": true,
      "legacyURLs": 21,
      "profile": "unthrottled",
      "userInitiatedOnly": true,
      "playbackGuard": true,
      "evictionRepair": true,
      "incrementalRefresh": true,
      "offlineTransportErrors": 0
    },
    {
      "browser": "webkit",
      "oldTag": "1175f1a1d2c1",
      "newTag": "7760d5727244",
      "banners": 1,
      "updateReloads": 1,
      "cachedFiles": 132,
      "durationMs": 9972,
      "wireBytes": 775494,
      "offline": true,
      "legacyURLs": 21,
      "profile": "unthrottled",
      "userInitiatedOnly": true,
      "playbackGuard": true,
      "evictionRepair": true,
      "incrementalRefresh": true,
      "offlineTransportErrors": 4
    }
  ]
 }
--- a/perf/results/integration-offline.json
+++ b/perf/results/integration-offline.json
--- a/perf/results/integration-settings.json
+++ b/perf/results/integration-settings.json
@@ -0,0 +1,708 @@
 {
  "revision": "6ae81d1024caa42931d47abe820417cf63d0fe17",
  "oldTag": "1175f1a1d2c1",
  "results": [
    {
      "engine": "chromium",
      "errors": [
        "Cannot read properties of null (reading 'addEventListener')",
        "Cannot read properties of null (reading 'addEventListener')"
      ],
      "profileChecks": [
        {
          "stage": "older timestamp ignored",
          "serverUpdatedAt": 100,
          "localSyncedAt": 200,
          "saveBeforePlay": true
        },
        {
          "stage": "older settings with newer timestamp adopted",
          "serverUpdatedAt": 300,
          "localSyncedAt": 200,
          "saveBeforePlay": false
        }
      ],
      "behaviour": [
        {
          "stage": "old",
          "supported": true,
          "bytes": 30290,
          "cached": true,
          "localPlayback": true
        },
        {
          "stage": "upgraded",
          "supported": true,
          "bytes": 30290,
          "cached": true,
          "localPlayback": true
        }
      ],
      "diff": [
        {
          "key": "quality",
          "before": "360p",
          "after": "360p",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "volume",
          "before": 1,
          "after": 1,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "audioOnly",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "autoPreload",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "p2pShare",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "p2pReceive",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "saveBeforePlay",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "repeatMode",
          "before": "all",
          "after": "all",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "loopOne",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "shuffle",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "theme",
          "before": "light",
          "after": "light",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "fontScale",
          "before": "large",
          "after": "large",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "levelVolume",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "liveAudioIOS",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "parallelSaves",
          "before": 2,
          "after": 2,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "density",
          "before": "compact",
          "after": "compact",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "perfMode",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "reduceMotion",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "layout",
          "before": "f7-swipe",
          "after": "f7-swipe",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "autoBackupEnabled",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "autoBackupIntervalDays",
          "before": 7,
          "after": 7,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "serviceVideo",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "foldedCards",
          "before": {},
          "after": {},
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "eq",
          "before": {
            "preset": "bass",
            "g": [
              5,
              7,
              5,
              3,
              1,
              0,
              0,
              0,
              0,
              0
            ]
          },
          "after": {
            "preset": "bass",
            "g": [
              5,
              7,
              5,
              3,
              1,
              0,
              0,
              0,
              0,
              0
            ]
          },
          "equal": true,
          "expectedMigration": false
        }
      ],
      "old": {
        "quality": "360p",
        "volume": 1,
        "audioOnly": false,
        "autoPreload": true,
        "p2pShare": true,
        "p2pReceive": true,
        "saveBeforePlay": true,
        "repeatMode": "all",
        "loopOne": true,
        "shuffle": false,
        "theme": "light",
        "fontScale": "large",
        "levelVolume": false,
        "liveAudioIOS": false,
        "parallelSaves": 2,
        "density": "compact",
        "perfMode": true,
        "reduceMotion": true,
        "layout": "f7-swipe",
        "autoBackupEnabled": false,
        "autoBackupIntervalDays": 7,
        "serviceVideo": false,
        "foldedCards": {},
        "eq": {
          "preset": "bass",
          "g": [
            5,
            7,
            5,
            3,
            1,
            0,
            0,
            0,
            0,
            0
          ]
        }
      },
      "oldUI": {
        "setSaveBeforePlay": true,
        "setAutoPreload": true,
        "setAudioOnly": false,
        "setQuality": "360p",
        "setRepeat": true,
        "setLoopOne": true,
        "setTheme": "light",
        "setFont": "large",
        "setDensity": "compact",
        "setPerf": true,
        "setMotion": true,
        "setParallelSaves": "2",
        "setLevelVolume": false,
        "setLayout": "f7-swipe"
      },
      "oldRaw": "{\"playlists\":[],\"history\":[],\"queue\":[],\"customVideos\":[],\"pinnedPlaylists\":[],\"settings\":{\"quality\":\"360p\",\"volume\":1,\"audioOnly\":false,\"autoPreload\":true,\"p2pShare\":true,\"p2pReceive\":true,\"saveBeforePlay\":true,\"repeatMode\":\"all\",\"loopOne\":true,\"shuffle\":false,\"theme\":\"light\",\"fontScale\":\"large\",\"levelVolume\":false,\"liveAudioIOS\":false,\"parallelSaves\":2,\"density\":\"compact\",\"perfMode\":true,\"reduceMotion\":true,\"layout\":\"f7-swipe\",\"autoBackupEnabled\":false,\"autoBackupIntervalDays\":7,\"serviceVideo\":false,\"foldedCards\":{},\"eq\":{\"preset\":\"bass\",\"g\":[5,7,5,3,1,0,0,0,0,0]}},\"resumePositions\":{},\"rememberPos\":{},\"playCount\":{},\"abMarkers\":{},\"bookmarks\":{},\"lyricOffsets\":{},\"stats\":null,\"lastAutoBackup\":0,\"profile\":null}",
      "newTag": "7760d5727244",
      "upgraded": {
        "quality": "360p",
        "volume": 1,
        "audioOnly": false,
        "autoPreload": true,
        "p2pShare": true,
        "p2pReceive": true,
        "saveBeforePlay": true,
        "repeatMode": "all",
        "loopOne": true,
        "shuffle": false,
        "theme": "light",
        "fontScale": "large",
        "levelVolume": false,
        "liveAudioIOS": false,
        "parallelSaves": 2,
        "density": "compact",
        "perfMode": true,
        "reduceMotion": true,
        "layout": "f7-swipe",
        "autoBackupEnabled": false,
        "autoBackupIntervalDays": 7,
        "serviceVideo": false,
        "foldedCards": {},
        "eq": {
          "preset": "bass",
          "g": [
            5,
            7,
            5,
            3,
            1,
            0,
            0,
            0,
            0,
            0
          ]
        }
      },
      "newRaw": "{\"playlists\":[],\"history\":[{\"id\":\"benchmedia01\",\"title\":\"Persisted settings local clip\",\"channel\":\"Settings probe\",\"channelId\":\"\",\"channelUrl\":\"\",\"duration\":3,\"thumbnail\":\"\"}],\"queue\":[],\"customVideos\":[],\"pinnedPlaylists\":[],\"resumePositions\":{},\"rememberPos\":{},\"playCount\":{\"benchmedia01\":1},\"abMarkers\":{},\"bookmarks\":{},\"lyricOffsets\":{},\"stats\":null,\"lastAutoBackup\":0,\"settings\":{\"quality\":\"360p\",\"volume\":1,\"audioOnly\":false,\"autoPreload\":true,\"p2pShare\":true,\"p2pReceive\":true,\"saveBeforePlay\":true,\"repeatMode\":\"all\",\"loopOne\":true,\"shuffle\":false,\"theme\":\"light\",\"fontScale\":\"large\",\"levelVolume\":false,\"liveAudioIOS\":false,\"parallelSaves\":2,\"density\":\"compact\",\"perfMode\":true,\"reduceMotion\":true,\"layout\":\"f7-swipe\",\"autoBackupEnabled\":false,\"autoBackupIntervalDays\":7,\"serviceVideo\":false,\"foldedCards\":{},\"eq\":{\"preset\":\"bass\",\"g\":[5,7,5,3,1,0,0,0,0,0]}},\"profile\":null}",
      "newUI": {
        "setSaveBeforePlay": true,
        "setAutoPreload": true,
        "setAudioOnly": false,
        "setQuality": "360p",
        "setRepeat": true,
        "setLoopOne": true,
        "setTheme": "light",
        "setFont": "large",
        "setDensity": "compact",
        "setPerf": true,
        "setMotion": true,
        "setParallelSaves": "2",
        "setLevelVolume": false,
        "setLayout": "f7-swipe"
      },
      "importPreserved": true,
      "userDataGets": 0
    },
    {
      "engine": "webkit",
      "errors": [],
      "profileChecks": [
        {
          "stage": "older timestamp ignored",
          "serverUpdatedAt": 100,
          "localSyncedAt": 200,
          "saveBeforePlay": true
        },
        {
          "stage": "older settings with newer timestamp adopted",
          "serverUpdatedAt": 300,
          "localSyncedAt": 200,
          "saveBeforePlay": false
        }
      ],
      "behaviour": [
        {
          "stage": "old",
          "supported": false,
          "note": "Native OPFS unavailable; no shim"
        },
        {
          "stage": "upgraded",
          "supported": false,
          "note": "Native OPFS unavailable; no shim"
        }
      ],
      "diff": [
        {
          "key": "quality",
          "before": "360p",
          "after": "360p",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "volume",
          "before": 1,
          "after": 1,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "audioOnly",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "autoPreload",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "p2pShare",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "p2pReceive",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "saveBeforePlay",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "repeatMode",
          "before": "all",
          "after": "all",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "loopOne",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "shuffle",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "theme",
          "before": "light",
          "after": "light",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "fontScale",
          "before": "large",
          "after": "large",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "levelVolume",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "liveAudioIOS",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "parallelSaves",
          "before": 2,
          "after": 2,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "density",
          "before": "compact",
          "after": "compact",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "perfMode",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "reduceMotion",
          "before": true,
          "after": true,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "layout",
          "before": "f7-swipe",
          "after": "f7-swipe",
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "autoBackupEnabled",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "autoBackupIntervalDays",
          "before": 7,
          "after": 7,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "serviceVideo",
          "before": false,
          "after": false,
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "foldedCards",
          "before": {},
          "after": {},
          "equal": true,
          "expectedMigration": false
        },
        {
          "key": "eq",
          "before": {
            "preset": "bass",
            "g": [
              5,
              7,
              5,
              3,
              1,
              0,
              0,
              0,
              0,
              0
            ]
          },
          "after": {
            "preset": "bass",
            "g": [
              5,
              7,
              5,
              3,
              1,
              0,
              0,
              0,
              0,
              0
            ]
          },
          "equal": true,
          "expectedMigration": false
        }
      ],
      "old": {
        "quality": "360p",
        "volume": 1,
        "audioOnly": false,
        "autoPreload": true,
        "p2pShare": true,
        "p2pReceive": true,
        "saveBeforePlay": true,
        "repeatMode": "all",
        "loopOne": true,
        "shuffle": false,
        "theme": "light",
        "fontScale": "large",
        "levelVolume": false,
        "liveAudioIOS": false,
        "parallelSaves": 2,
        "density": "compact",
        "perfMode": true,
        "reduceMotion": true,
        "layout": "f7-swipe",
        "autoBackupEnabled": false,
        "autoBackupIntervalDays": 7,
        "serviceVideo": false,
        "foldedCards": {},
        "eq": {
          "preset": "bass",
          "g": [
            5,
            7,
            5,
            3,
            1,
            0,
            0,
            0,
            0,
            0
          ]
        }
      },
      "oldUI": {
        "setSaveBeforePlay": true,
        "setAutoPreload": true,
        "setAudioOnly": false,
        "setQuality": "360p",
        "setRepeat": true,
        "setLoopOne": true,
        "setTheme": "light",
        "setFont": "large",
        "setDensity": "compact",
        "setPerf": true,
        "setMotion": true,
        "setParallelSaves": "2",
        "setLevelVolume": false,
        "setLayout": "f7-swipe"
      },
      "oldRaw": "{\"playlists\":[],\"history\":[],\"queue\":[],\"customVideos\":[],\"pinnedPlaylists\":[],\"settings\":{\"quality\":\"360p\",\"volume\":1,\"audioOnly\":false,\"autoPreload\":true,\"p2pShare\":true,\"p2pReceive\":true,\"saveBeforePlay\":true,\"repeatMode\":\"all\",\"loopOne\":true,\"shuffle\":false,\"theme\":\"light\",\"fontScale\":\"large\",\"levelVolume\":false,\"liveAudioIOS\":false,\"parallelSaves\":2,\"density\":\"compact\",\"perfMode\":true,\"reduceMotion\":true,\"layout\":\"f7-swipe\",\"autoBackupEnabled\":false,\"autoBackupIntervalDays\":7,\"serviceVideo\":false,\"foldedCards\":{},\"eq\":{\"preset\":\"bass\",\"g\":[5,7,5,3,1,0,0,0,0,0]}},\"resumePositions\":{},\"rememberPos\":{},\"playCount\":{},\"abMarkers\":{},\"bookmarks\":{},\"lyricOffsets\":{},\"stats\":null,\"lastAutoBackup\":0,\"profile\":null}",
      "newTag": "7760d5727244",
      "upgraded": {
        "quality": "360p",
        "volume": 1,
        "audioOnly": false,
        "autoPreload": true,
        "p2pShare": true,
        "p2pReceive": true,
        "saveBeforePlay": true,
        "repeatMode": "all",
        "loopOne": true,
        "shuffle": false,
        "theme": "light",
        "fontScale": "large",
        "levelVolume": false,
        "liveAudioIOS": false,
        "parallelSaves": 2,
        "density": "compact",
        "perfMode": true,
        "reduceMotion": true,
        "layout": "f7-swipe",
        "autoBackupEnabled": false,
        "autoBackupIntervalDays": 7,
        "serviceVideo": false,
        "foldedCards": {},
        "eq": {
          "preset": "bass",
          "g": [
            5,
            7,
            5,
            3,
            1,
            0,
            0,
            0,
            0,
            0
          ]
        }
      },
      "newRaw": "{\"playlists\":[],\"history\":[],\"queue\":[],\"customVideos\":[],\"pinnedPlaylists\":[],\"settings\":{\"quality\":\"360p\",\"volume\":1,\"audioOnly\":false,\"autoPreload\":true,\"p2pShare\":true,\"p2pReceive\":true,\"saveBeforePlay\":true,\"repeatMode\":\"all\",\"loopOne\":true,\"shuffle\":false,\"theme\":\"light\",\"fontScale\":\"large\",\"levelVolume\":false,\"liveAudioIOS\":false,\"parallelSaves\":2,\"density\":\"compact\",\"perfMode\":true,\"reduceMotion\":true,\"layout\":\"f7-swipe\",\"autoBackupEnabled\":false,\"autoBackupIntervalDays\":7,\"serviceVideo\":false,\"foldedCards\":{},\"eq\":{\"preset\":\"bass\",\"g\":[5,7,5,3,1,0,0,0,0,0]}},\"resumePositions\":{},\"rememberPos\":{},\"playCount\":{},\"abMarkers\":{},\"bookmarks\":{},\"lyricOffsets\":{},\"stats\":null,\"lastAutoBackup\":0,\"profile\":null}",
      "newUI": {
        "setSaveBeforePlay": true,
        "setAutoPreload": true,
        "setAudioOnly": false,
        "setQuality": "360p",
        "setRepeat": true,
        "setLoopOne": true,
        "setTheme": "light",
        "setFont": "large",
        "setDensity": "compact",
        "setPerf": true,
        "setMotion": true,
        "setParallelSaves": "2",
        "setLevelVolume": false,
        "setLayout": "f7-swipe"
      },
      "importPreserved": true,
      "userDataGets": 0
    }
  ],
  "failures": [],
  "unsupported": [
    "webkit",
    "webkit"
  ]
 }
--- a/perf/results/integration-summary.json
+++ b/perf/results/integration-summary.json
@@ -0,0 +1,158 @@
 {
  "sourceCommit": "6ae81d1024caa42931d47abe820417cf63d0fe17",
  "buildTag": "7760d5727244",
  "profiles": [
    {
      "engine": "chromium",
      "profile": "lte",
      "appBodyCounts": [
        1,
        1,
        1,
        1,
        1
      ],
      "coldTimingEvidence": [
        {
          "paintProxyMs": 1361,
          "workerStartMs": 6570,
          "backgroundGlassStartMs": 7100
        },
        {
          "paintProxyMs": 1410,
          "workerStartMs": 6776,
          "backgroundGlassStartMs": 7341
        },
        {
          "paintProxyMs": 1362,
          "workerStartMs": 6444,
          "backgroundGlassStartMs": 6800
        },
        {
          "paintProxyMs": 1354,
          "workerStartMs": 6457,
          "backgroundGlassStartMs": 6804
        },
        {
          "paintProxyMs": 1379,
          "workerStartMs": 6523,
          "backgroundGlassStartMs": 6901
        }
      ]
    },
    {
      "engine": "chromium",
      "profile": "lossy",
      "appBodyCounts": [
        1,
        1,
        1,
        1,
        1
      ],
      "coldTimingEvidence": [
        {
          "paintProxyMs": 1995,
          "workerStartMs": 10509,
          "backgroundGlassStartMs": 11084
        },
        {
          "paintProxyMs": 2067,
          "workerStartMs": 10491,
          "backgroundGlassStartMs": 10910
        },
        {
          "paintProxyMs": 2007,
          "workerStartMs": 10436,
          "backgroundGlassStartMs": 10864
        },
        {
          "paintProxyMs": 1975,
          "workerStartMs": 10476,
          "backgroundGlassStartMs": 10864
        },
        {
          "paintProxyMs": 1991,
          "workerStartMs": 10393,
          "backgroundGlassStartMs": 10731
        }
      ]
    },
    {
      "engine": "webkit",
      "profile": "lte",
      "appBodyCounts": [
        1,
        1,
        1,
        1,
        1
      ],
      "coldTimingEvidence": [
        {
          "paintProxyMs": 936,
          "workerStartMs": 2989,
          "backgroundGlassStartMs": 6637
        },
        {
          "paintProxyMs": 911,
          "workerStartMs": 2323,
          "backgroundGlassStartMs": 5892
        },
        {
          "paintProxyMs": 905,
          "workerStartMs": 2316,
          "backgroundGlassStartMs": 5880
        },
        {
          "paintProxyMs": 908,
          "workerStartMs": 2320,
          "backgroundGlassStartMs": 5889
        },
        {
          "paintProxyMs": 911,
          "workerStartMs": 2321,
          "backgroundGlassStartMs": 5882
        }
      ]
    },
    {
      "engine": "webkit",
      "profile": "lossy",
      "appBodyCounts": [
        1,
        1,
        1,
        1,
        1
      ],
      "coldTimingEvidence": [
        {
          "paintProxyMs": 2861,
          "workerStartMs": 5659,
          "backgroundGlassStartMs": 17358
        },
        {
          "paintProxyMs": 2759,
          "workerStartMs": 6572,
          "backgroundGlassStartMs": 18065
        },
        {
          "paintProxyMs": 2716,
          "workerStartMs": 5621,
          "backgroundGlassStartMs": 15592
        },
        {
          "paintProxyMs": 2759,
          "workerStartMs": 6562,
          "backgroundGlassStartMs": 18042
        },
        {
          "paintProxyMs": 2711,
          "workerStartMs": 5611,
          "backgroundGlassStartMs": 15583
        }
      ]
    }
  ]
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jonathan Sykes	459a27b6eb	Merge main into jamesdsp and register its assets	2026-10-09 18:37:35 +08:00
Jonathan Sykes	933e920701	Add JamesDSP integration plan	2026-10-09 18:30:26 +08:00
Jonathan Sykes	a1048f1c30	Verify transport geometry, playback states and themed icons across both engines	2026-10-09 16:12:28 +08:00
Jonathan Sykes	1e83951972	Reconcile transport drawing variants, admin controls and theme cascades	2026-10-09 16:10:02 +08:00
Jonathan Sykes	9a37715da4	Unify transport controls with themed SVG symbols and accessible playback states	2026-10-09 15:54:22 +08:00
Jonathan Sykes	0a5b113ebe	Record combined migration, offline and cold-start verification	2026-10-09 15:47:35 +08:00
Jonathan Sykes	6ae81d1024	Merge autosave probes and reconcile the complete verification guide	2026-10-09 15:12:55 +08:00
Jonathan Sykes	52e51278d5	Merge persisted-settings verification and retain all harness documentation	2026-10-09 15:12:46 +08:00
Jonathan Sykes	d027696d4e	Merge manifest hygiene and reconcile runtime exclusions with CSP response capture	2026-10-09 15:12:39 +08:00
Jonathan Sykes	4ba5130c80	Merge Phase 6 and reconcile offline completion, response capture and contract tests	2026-10-09 15:12:14 +08:00
Jonathan Sykes	ea221a4e90	Verify persisted settings and save-before-play through production updates	2026-10-09 15:09:09 +08:00
Jonathan Sykes	8a4144eb00	Document runtime exclusions and verify offline transfer savings	2026-10-09 14:56:31 +08:00
Jonathan Sykes	dd09f66578	Separate runtime manifest inputs from directly served files	2026-10-09 14:40:46 +08:00
Jonathan Sykes	cf27d4f15a	Merge branch 'codex/ui-fixes'	2026-10-09 14:37:51 +08:00
Jonathan Sykes	9c988912de	Complete phase 6 report with post-crash checks	2026-10-09 14:35:51 +08:00
Jonathan Sykes	6f0235f506	Record post-crash phase 6 verification	2026-10-09 14:34:59 +08:00
Jonathan Sykes	a497180352	Verify mobile geometry and themed media icons across browsers	2026-10-09 14:32:17 +08:00
Jonathan Sykes	2001e77cee	Use theme-aware SVGs for download and offline actions	2026-10-09 14:28:42 +08:00
Jonathan Sykes	f161a5de74	Record autosave comparison results and native storage limits	2026-10-09 14:25:43 +08:00
Jonathan Sykes	0b8e398469	Record offline completeness and recovery verification	2026-10-09 10:59:50 +08:00
Jonathan Sykes	2fc6d5d4dc	Release response streams used by cache metadata probes	2026-10-09 10:43:05 +08:00
Jonathan Sykes	f359e5dd39	Limit activation readiness checks to blocking assets	2026-10-09 10:34:57 +08:00
Jonathan Sykes	2c8d563d01	Keep offline completion outside the activation barrier	2026-10-09 10:28:11 +08:00
Jonathan Sykes	6b8d590638	Verify worker recovery and retained offline feature fallback	2026-10-09 09:54:30 +08:00
Jonathan Sykes	009a155568	Resume offline preparation on launch and show cache readiness	2026-10-09 09:33:57 +08:00
Jonathan Sykes	0251720fa2	Complete verified offline assets in a resumable worker job	2026-10-09 09:32:08 +08:00
Jonathan Sykes	97f4a7396e	Exercise offline editors and interrupted worker recovery	2026-10-09 09:24:20 +08:00
Jonathan Sykes	b59fc7264a	Verify device autosave behavior across frontend revisions	2026-10-09 09:16:58 +08:00
Jonathan Sykes	14716e648b	Add offline completeness and feature regression harness	2026-10-09 09:15:29 +08:00
Jonathan Sykes	71608c2ce8	Clarify the diagnostic waterfall source	2026-10-09 09:11:45 +08:00
Jonathan Sykes	66bbda51c7	Keep saved thumbnails inside their grid column	2026-10-09 09:11:30 +08:00
Jonathan Sykes	ff3f934717	Record phase 6 measurements and compatibility verification	2026-10-08 12:06:13 +08:00
Jonathan Sykes	3de4cba402	Align toolbar controls and provide full touch targets	2026-10-08 12:04:56 +08:00
Jonathan Sykes	4b1f5204f8	Restore native boot scheduling without an extra core request	2026-10-08 11:25:03 +08:00
Jonathan Sykes	9408ee07e5	Limit the WebKit response handoff to uncontrolled visits	2026-10-08 10:08:35 +08:00
Jonathan Sykes	97eb31e732	Enforce stale core contracts in the worker without native startup I/O	2026-10-08 10:05:38 +08:00
Jonathan Sykes	57edb410c3	Keep native Chromium loading and prevent stale browser cache entries	2026-10-08 09:43:51 +08:00
Jonathan Sykes	c4a512bea6	Guard stale app execution against feature contract changes	2026-10-08 09:18:51 +08:00
Jonathan Sykes	3505dc3c0e	Preserve verified N-1 app boot after a cache entry is lost	2026-10-08 09:10:28 +08:00
Jonathan Sykes	639f0a2257	Record cache reuse probes and reset each benchmark configuration	2026-10-08 09:06:40 +08:00
Jonathan Sykes	a86fa1cebe	Cache the page-owned app response before starting the worker	2026-10-08 09:04:20 +08:00
Jonathan Sykes	e7a7cdc6b9	Preload classic layout CSS before the blocking head loader	2026-10-08 08:50:51 +08:00
Jonathan Sykes	799b1e7ed6	Trace cold request waterfalls and isolate the layout discovery regression	2026-10-08 08:45:00 +08:00
Jonathan Sykes	af6aabc3b7	Plan phase 6: diagnose and fix WebKit cold delivery	2026-10-08 08:27:08 +08:00
Jonathan Sykes	21c12733d3	Record final performance sweep and staged rollout instructions	2026-10-08 05:47:31 +08:00
Jonathan Sykes	a08d363f2d	Measure complete CSS updates and fully cached warm reloads	2026-10-08 05:12:32 +08:00
Jonathan Sykes	ce5a159d4a	Plan phase 5: measure final performance and document rollout	2026-10-08 05:09:07 +08:00
Jonathan Sykes	f133e1bb9f	Document Phase 4 seams, measurements and remaining limitations	2026-10-08 05:03:55 +08:00
Jonathan Sykes	a7473cbca2	Verify six app seams and record Phase 4 performance measurements	2026-10-08 05:03:55 +08:00
Jonathan Sykes	2c5003575c	Report unavailable lazy chunks without rejecting UI actions	2026-10-08 04:48:52 +08:00
Jonathan Sykes	b335f95f45	Load Stats view separately from listening-stat tracking	2026-10-08 04:46:40 +08:00
Jonathan Sykes	0475a1826c	Load sharing and external-player tools on demand	2026-10-08 04:44:35 +08:00
Jonathan Sykes	94ea211605	Lazy-load watch-party sessions behind synchronous playback hooks	2026-10-08 04:42:35 +08:00
Jonathan Sykes	8e7fa1959a	Load remote UI on intent and preserve synchronous host hooks	2026-10-08 04:41:30 +08:00
Jonathan Sykes	5fb9564468	Load the presenter client only on presenter entry	2026-10-08 04:39:52 +08:00
Jonathan Sykes	3c9a24ae45	Extract eager shell and shared view renderers before app boot	2026-10-08 04:38:37 +08:00
Jonathan Sykes	cdd26b6ae5	Plan phase 4: Extract eager renderers and five lazy clients	2026-10-08 04:35:55 +08:00
Jonathan Sykes	cd4a25ae23	Document Phase 3 delivery and remaining paint regression	2026-10-08 04:26:10 +08:00
Jonathan Sykes	b84050578b	Verify staged lazy loading and record Phase 3 measurements	2026-10-08 04:19:02 +08:00
Jonathan Sykes	fab444b7b8	Start font preloads before the layout bootstrap	2026-10-08 04:12:16 +08:00
Jonathan Sykes	46ec9ab2ca	Report layouts selected through imported settings to the worker	2026-10-08 04:02:43 +08:00
Jonathan Sykes	c1a546a5c6	Keep shared layout visibility defaults in eager styles	2026-10-08 03:56:47 +08:00
Jonathan Sykes	40b92ebc0d	Request selected layout styles before common CSS blocks the bootstrap	2026-10-08 03:50:57 +08:00
Jonathan Sykes	524a7b7f1d	Share the background asset warm pool across idle requests	2026-10-08 01:40:48 +08:00
Jonathan Sykes	173eab8026	Preserve Settings control search with lazy feature panels	2026-10-08 01:36:47 +08:00
Jonathan Sykes	ccfb7d90ba	Preserve separate Car mode and voice controls during lazy setup	2026-10-08 01:32:43 +08:00
Jonathan Sykes	5d6a1545df	Load layouts and optional features from staged asset caches	2026-10-08 01:29:50 +08:00
Jonathan Sykes	d98d444552	Embed build-local asset groups in stamped indexes	2026-10-08 00:50:18 +08:00
Jonathan Sykes	4853c2c977	Pin executing groups and guard lazy loads by core contracts	2026-10-08 00:47:50 +08:00
Jonathan Sykes	e1cb450032	Add ordered build-local loader and record staged apply decision	2026-10-08 00:33:07 +08:00
Jonathan Sykes	f804a23761	Add contract-checked fallback and background asset synchronization	2026-10-08 00:30:31 +08:00
Jonathan Sykes	895f20a4c9	Plan phase 3: Load layouts and features on demand	2026-10-08 00:27:50 +08:00
Jonathan Sykes	4950d3e417	Document incremental sync verification and performance gaps	2026-10-08 00:21:19 +08:00
Jonathan Sykes	92404563b3	Fail closed when worker update status is unavailable	2026-10-08 00:10:04 +08:00
Jonathan Sykes	5d1e5ec791	Verify explicit activation and legacy incremental migration	2026-10-08 00:03:14 +08:00
Jonathan Sykes	bb446c717f	Keep single-tag rollback on the legacy worker path	2026-10-07 23:58:29 +08:00
Jonathan Sykes	5b25ccaa86	Publish asset state atomically and reject unavailable versions	2026-10-07 23:56:46 +08:00
Jonathan Sykes	54a07a0a2a	Synchronize verified assets incrementally and guard update activation	2026-10-07 23:40:20 +08:00
Jonathan Sykes	04421a2145	Add an isolated beta compose stack	2026-10-07 23:30:29 +08:00
Jonathan Sykes	a1f16f2e3b	Plan phase 2: Add incremental asset sync and migration verification	2026-10-07 23:20:59 +08:00
Jonathan Sykes	7434f2f486	Document Phase 1 verification and retained plain asset URLs	2026-10-07 23:14:14 +08:00
Jonathan Sykes	7c45d098b1	Verify production-client migration and record Phase 1 measurements	2026-10-07 23:12:48 +08:00
Jonathan Sykes	84546eeb7d	Group all Glass Stage dependencies under the selected layout	2026-10-07 23:09:04 +08:00
Jonathan Sykes	d18d17cf29	Preserve legacy cache rules and pin service worker bytes at boot	2026-10-07 23:01:55 +08:00
Jonathan Sykes	6cb00d5073	Add per-file asset hashes and a rollback-compatible server manifest	2026-10-07 22:57:41 +08:00
Jonathan Sykes	ad85cb6eb4	Plan phase 1: Add per-file hashes and a backward-compatible manifest	2026-10-07 22:50:02 +08:00
Jonathan Sykes	be1d939afd	Merge branch 'codex/prewarm-next' # Conflicts: # frontend/index.html	2026-10-07 22:44:11 +08:00
Jonathan Sykes	d65b9e032a	Prewarm upcoming queue streams	2026-10-07 16:30:15 +08:00
Jonathan Sykes	fcd98b6a4d	Add queue prewarm candidate selection	2026-10-07 16:30:01 +08:00