@doitian/dsh-music 0.1.1 → 0.1.2

package/lib/panel.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="zh-CN">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -58,14 +58,7 @@
       #account img { width: 22px; height: 22px; border-radius: 50%; }
 
       main { display: flex; flex: 1; min-height: 0; }
-      .left { flex: 1 1 46%; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
-      .right { flex: 1 1 54%; min-width: 0; display: flex; flex-direction: column; }
-
-      .tabs { display: flex; gap: 4px; padding: 9px 12px 0; }
-      .tabs button { border-radius: 999px; }
-      .tabs button.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
-      .searchbar { display: flex; gap: 6px; padding: 9px 12px; }
-      .searchbar input { flex: 1; min-width: 0; }
+      .player { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
 
       .scroll { overflow: auto; padding: 0 8px 16px; flex: 1; }
       .scroll::-webkit-scrollbar { width: 9px; }
@@ -85,11 +78,6 @@
       .row .dur { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; font-size: 12px; }
       .row .acts { display: none; gap: 4px; flex: none; }
       .row:hover .acts { display: flex; }
-      .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 10px; padding: 4px 8px; }
-      .card { cursor: pointer; }
-      .card img { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; background: var(--panel); }
-      .card .name { font-size: 12px; margin-top: 5px; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
-      .card .sub { color: var(--muted); font-size: 11px; }
 
       .now { padding: 14px; border-bottom: 1px solid var(--line); }
       .now-top { display: flex; gap: 14px; }
@@ -108,14 +96,28 @@
       .mode { font-size: 12px; }
 
       .section-title { padding: 12px 14px 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; }
-      .lyrics { max-height: 34%; overflow: auto; padding: 0 14px 12px; }
+      .section-title.head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+      .section-title.head button {
+        background: none; border: 0; margin: 0; padding: 0; font: inherit; color: var(--muted);
+        text-transform: inherit; letter-spacing: inherit; cursor: pointer;
+      }
+      .section-title.head button:hover { color: var(--fg); }
+      /* The pane is a glance at the current line, not a page: four lines of
+         synced text, scrolled for the rest, so the queue keeps the space.
+         `--lyrics-lines` is the single knob (the padding below is the `+ 12px`). */
+      .lyrics {
+        --lyrics-lines: 4;
+        max-height: calc(var(--lyrics-lines) * 1.5em + var(--lyrics-lines) * 4px + 12px);
+        line-height: 1.5; overflow: auto; padding: 0 14px 12px;
+      }
+      .lyrics.collapsed { display: none; }
       .lyrics p { margin: 0; padding: 2px 0; color: var(--muted); transition: color 0.15s; }
       .lyrics p.on { color: var(--fg); font-weight: 600; }
       .queue { flex: 1; min-height: 0; display: flex; flex-direction: column; }
       .queue .scroll { padding-top: 0; }
       .dj-status { margin: 0 14px 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 12px; }
       .dj-status b { color: var(--accent); }
-      .curator-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+      .model-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
       .row-inline { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
       .row-inline select, .row-inline input { flex: 1 1 0; min-width: 0; font-size: 12px; padding: 4px 6px; }
       .row-inline button { font-size: 12px; padding: 4px 8px; }
@@ -140,33 +142,20 @@
   <body>
     <div id="app">
       <header>
-        <div class="brand">音乐<small>music.163.com</small></div>
+        <div class="brand"><span data-i18n="brand">Music</span><small>music.163.com</small></div>
         <div class="spacer"></div>
-        <input id="dj-prompt" placeholder="AI DJ 心情 / mood, e.g. rainy afternoon jazz" />
-        <button id="dj-toggle" title="Continuous AI DJ: keep the queue stocked">AI DJ</button>
+        <input id="dj-prompt" data-i18n-ph="djPromptPh" placeholder="AI DJ mood, e.g. rainy afternoon jazz" />
+        <button id="dj-toggle" data-i18n-title="djToggleTitle" title="Continuous AI DJ: keep the queue stocked">AI DJ</button>
         <div id="account"></div>
       </header>
 
       <main>
-        <section class="left">
-          <div class="tabs">
-            <button data-tab="search" class="on">搜索 Search</button>
-            <button data-tab="charts">榜单 Charts</button>
-            <button data-tab="foryou">推荐 For you</button>
-          </div>
-          <div class="searchbar" id="searchbar">
-            <input id="q" placeholder="搜索歌曲、歌手、专辑 / search songs" />
-            <button id="go" class="primary">搜索</button>
-          </div>
-          <div class="scroll" id="browser"></div>
-        </section>
-
-        <section class="right">
+        <section class="player">
           <div class="now">
             <div class="now-top">
               <img id="cover" alt="" />
               <div style="min-width: 0; flex: 1">
-                <div class="now-title" id="np-title">未播放 / nothing playing</div>
+                <div class="now-title" id="np-title" data-i18n="nothingPlaying">Nothing playing</div>
                 <div class="now-artists" id="np-artists"></div>
                 <div class="now-album" id="np-album"></div>
               </div>
@@ -177,30 +166,35 @@
               <span id="t-dur">0:00</span>
             </div>
             <div class="controls">
-              <button id="prev" title="上一首 previous">⏮</button>
-              <button id="play" class="primary" title="播放/暂停 play/pause">▶</button>
-              <button id="next" title="下一首 next">⏭</button>
-              <button id="mode" class="mode" title="播放模式 mode">列表</button>
-              <select id="quality" class="mode" title="流媒体音质 / streaming quality"></select>
+              <button id="prev" data-i18n-title="prev" title="Previous">⏮</button>
+              <button id="play" class="primary" data-i18n-title="playPause" title="Play/pause">▶</button>
+              <button id="next" data-i18n-title="next" title="Next">⏭</button>
+              <button id="mode" class="mode" data-i18n-title="modeTitle" data-i18n="modeList" title="Playback mode">List</button>
+              <select id="quality" class="mode" data-i18n-title="qualityTitle" title="Streaming quality"></select>
               <span id="quality-info" class="mode" style="color: var(--muted)"></span>
               <span class="grow"></span>
-              <button id="like" title="喜欢 like">♡</button>
-              <button id="dislike" title="不喜欢 dislike">✕</button>
-              <button id="mute" title="静音 mute">🔊</button>
+              <button id="like" data-i18n-title="like" title="Like">♡</button>
+              <button id="dislike" data-i18n-title="dislike" title="Dislike">✕</button>
+              <button id="mute" data-i18n-title="mute" title="Mute">🔊</button>
               <input type="range" id="volume" min="0" max="1" step="0.01" value="0.8" />
             </div>
           </div>
 
-          <div class="section-title">歌词 Lyrics</div>
+          <div class="section-title head">
+            <span data-i18n="lyrics">Lyrics</span>
+            <!-- Label and title are state-dependent, so the script owns them
+                 (applyStaticStrings cannot know which way the pane is now). -->
+            <button id="lyrics-toggle" type="button" aria-expanded="true">Hide</button>
+          </div>
           <div class="lyrics" id="lyrics"><p class="hint">—</p></div>
 
-          <div class="section-title">播放队列 Queue <span id="counts"></span></div>
+          <div class="section-title"><span data-i18n="queue">Queue</span> <span id="counts"></span></div>
           <div class="queue"><div class="scroll" id="queue"></div></div>
           <div id="dj-status"></div>
 
           <div class="dj-status" id="dj-model">
-            <div class="curator-head">
-              <span>AI DJ 模型 / curator model</span>
+            <div class="model-head">
+              <span data-i18n="djModel">DJ model</span>
               <span id="dj-model-source" style="color: var(--muted)"></span>
             </div>
             <div class="row-inline">
@@ -208,12 +202,12 @@
               <select id="dj-model-select" title="model"></select>
             </div>
             <div class="row-inline">
-              <input id="dj-model-custom" placeholder="自定义 model id / custom model id" style="display: none" />
+              <input id="dj-model-custom" data-i18n-ph="customModelPh" placeholder="Custom model id" style="display: none" />
             </div>
             <div class="row-inline">
-              <button id="dj-model-save" class="primary">保存 Save</button>
-              <button id="dj-model-test">测试 Test</button>
-              <button id="dj-model-clear" title="回退到 profile 配置 / revert to the profile patch">回退 Revert</button>
+              <button id="dj-model-save" class="primary" data-i18n="save">Save</button>
+              <button id="dj-model-test" data-i18n="test">Test</button>
+              <button id="dj-model-clear" data-i18n="revert" data-i18n-title="revertTitle" title="Revert to the profile patch">Revert</button>
             </div>
             <div id="dj-model-status" style="color: var(--muted)"></div>
           </div>
@@ -222,12 +216,12 @@
     </div>
 
     <dialog id="login">
-      <div style="font-weight: 650">网易云音乐登录 / Sign in</div>
+      <div style="font-weight: 650" data-i18n="loginTitle">NetEase Cloud Music sign in</div>
       <canvas id="qr" width="220" height="220"></canvas>
-      <div class="hint" id="qr-state">正在获取二维码… / fetching QR…</div>
+      <div class="hint" id="qr-state">Fetching QR…</div>
       <div class="row-actions">
-        <button id="qr-refresh">刷新 Refresh</button>
-        <button id="qr-close" class="primary">关闭 Close</button>
+        <button id="qr-refresh" data-i18n="refresh">Refresh</button>
+        <button id="qr-close" class="primary" data-i18n="close">Close</button>
       </div>
     </dialog>
 
@@ -240,11 +234,253 @@
       const API = BASE + '/api';
       const $ = (id) => document.getElementById(id);
 
+      // ------------------------------------------------------------------ i18n
+      /**
+       * Locale, without ctx.
+       *
+       * This page is served as a plain document, not a client module, so the
+       * host's `ctx.locale` service is out of reach. The shell keeps its own
+       * `<html lang>` in sync with the active locale, though, and this frame
+       * is same-origin with the shell — reading the parent's `lang`, and
+       * observing it for changes, follows the Settings language live. When
+       * the page is opened standalone there is no parent to follow, so the
+       * browser's own language decides.
+       */
+      const DICT = {
+        zh: {
+          brand: '音乐',
+          djPromptPh: 'AI DJ 心情，例如 rainy afternoon jazz',
+          djToggleTitle: '持续 AI DJ：自动补歌',
+          nothingPlaying: '未播放',
+          prev: '上一首',
+          playPause: '播放/暂停',
+          next: '下一首',
+          modeTitle: '播放模式',
+          modeList: '列表',
+          modeSingle: '单曲',
+          modeShuffle: '随机',
+          qualityTitle: '流媒体音质',
+          like: '喜欢',
+          dislike: '不喜欢',
+          mute: '静音',
+          lyrics: '歌词',
+          lyricsHide: '收起',
+          lyricsShow: '展开',
+          lyricsToggleHide: '收起歌词面板',
+          lyricsToggleShow: '展开歌词面板',
+          queue: '播放队列',
+          djModel: 'AI DJ 模型',
+          customModelPh: '自定义 model id',
+          save: '保存',
+          test: '测试',
+          revert: '回退',
+          revertTitle: '回退到 profile 配置',
+          loginTitle: '网易云音乐登录',
+          qrFetching: '正在获取二维码…',
+          qrScan: '用网易云音乐 App 扫码',
+          refresh: '刷新',
+          close: '关闭',
+          signin: '登录',
+          loginWaiting: '等待扫码',
+          loginScanned: '已扫码，请在手机上确认',
+          loginExpired: '二维码已过期，已刷新',
+          loginSuccess: '登录成功',
+          loginIdle: '未开始',
+          pollFailed: '轮询失败：',
+          resuming: '正在恢复播放…',
+          djPlanning: 'AI DJ 正在选曲…',
+          modelTierUnavailable: '模型层不可用',
+          djStocking: '持续补歌中',
+          gestureText: '浏览器需要你先与页面交互一次才会播放声音',
+          gesturePlay: '点击播放',
+          gestureNote: '在窗口任意处点击也可以',
+          queueEmpty: '队列为空，用 AI DJ 或让助手补歌',
+          remove: '移除',
+          loading: '加载中…',
+          instrumental: '纯音乐，无歌词',
+          other: '其他…',
+          noProvider: '(无 provider)',
+          srcPanel: '面板',
+          srcConfig: '配置',
+          srcAgentDefault: '会话模型',
+          srcDiscovered: '自动',
+          hostPredatesLong:
+            '宿主模块早于本功能：请完全退出并重新启动 Harness（关闭窗口不够，它会留在托盘里）',
+          hostPredatesShort: '宿主模块早于本功能',
+          pickProviderModel: '请先选择 provider 与 model',
+          saved: '已保存 {route}',
+          reverted: '已回退到 profile 配置',
+          testing: '测试中…',
+          heuristics: '已用启发式',
+          downgraded: '已降级',
+          qualitySet: '音质已设为 {level}',
+          liked: '已喜欢',
+          disliked: '不再推荐',
+          djOn: 'AI DJ 已开启',
+          djOff: 'AI DJ 已关闭',
+          connectFailed: '连接失败：',
+          'quality.jymaster': '超清母带',
+          'quality.dolby': '杜比全景声',
+          'quality.sky': '沉浸环绕声',
+          'quality.jyeffect': '沉浸声',
+          'quality.hires': 'Hi-Res 无损',
+          'quality.lossless': '无损',
+          'quality.exhigh': '极高 320 kbps',
+          'quality.higher': '较高 192 kbps',
+          'quality.standard': '标准 128 kbps',
+        },
+        en: {
+          brand: 'Music',
+          djPromptPh: 'AI DJ mood, e.g. rainy afternoon jazz',
+          djToggleTitle: 'Continuous AI DJ: keep the queue stocked',
+          nothingPlaying: 'Nothing playing',
+          prev: 'Previous',
+          playPause: 'Play/pause',
+          next: 'Next',
+          modeTitle: 'Playback mode',
+          modeList: 'List',
+          modeSingle: 'Single',
+          modeShuffle: 'Shuffle',
+          qualityTitle: 'Streaming quality',
+          like: 'Like',
+          dislike: 'Dislike',
+          mute: 'Mute',
+          lyrics: 'Lyrics',
+          lyricsHide: 'Hide',
+          lyricsShow: 'Show',
+          lyricsToggleHide: 'Collapse the lyrics pane',
+          lyricsToggleShow: 'Expand the lyrics pane',
+          queue: 'Queue',
+          djModel: 'DJ model',
+          customModelPh: 'Custom model id',
+          save: 'Save',
+          test: 'Test',
+          revert: 'Revert',
+          revertTitle: 'Revert to the profile patch',
+          loginTitle: 'NetEase Cloud Music sign in',
+          qrFetching: 'Fetching QR…',
+          qrScan: 'Scan with the NetEase app',
+          refresh: 'Refresh',
+          close: 'Close',
+          signin: 'Sign in',
+          loginWaiting: 'Waiting for scan',
+          loginScanned: 'Scanned — confirm on your phone',
+          loginExpired: 'QR expired; a fresh one is shown',
+          loginSuccess: 'Signed in',
+          loginIdle: 'Not started',
+          pollFailed: 'Poll failed: ',
+          resuming: 'Resuming…',
+          djPlanning: 'AI DJ is planning…',
+          modelTierUnavailable: 'model tier unavailable',
+          djStocking: 'keeping the queue stocked',
+          gestureText: 'Chromium needs one interaction with this window before it will play audio',
+          gesturePlay: 'Play',
+          gestureNote: 'clicking anywhere works too',
+          queueEmpty: 'Queue empty — use the AI DJ or ask the assistant to add songs',
+          remove: 'Remove',
+          loading: 'Loading…',
+          instrumental: 'Instrumental',
+          other: 'Other…',
+          noProvider: '(no provider)',
+          srcPanel: 'panel',
+          srcConfig: 'profile',
+          srcAgentDefault: 'session model',
+          srcDiscovered: 'auto',
+          hostPredatesLong:
+            'The host module predates this feature — fully quit and relaunch the harness (closing the window is not enough; it stays running in the tray)',
+          hostPredatesShort: 'Host module predates this feature',
+          pickProviderModel: 'Pick a provider and a model first',
+          saved: 'Saved {route}',
+          reverted: 'Reverted to the profile config',
+          testing: 'Testing…',
+          heuristics: 'heuristics used',
+          downgraded: 'downgraded',
+          qualitySet: 'Quality set to {level}',
+          liked: 'Liked',
+          disliked: 'Disliked',
+          djOn: 'AI DJ on',
+          djOff: 'AI DJ off',
+          connectFailed: 'Cannot reach the host: ',
+          'quality.jymaster': 'Master',
+          'quality.dolby': 'Dolby Atmos',
+          'quality.sky': 'Immersive',
+          'quality.jyeffect': 'Spatial',
+          'quality.hires': 'Hi-Res lossless',
+          'quality.lossless': 'Lossless',
+          'quality.exhigh': '320 kbps',
+          'quality.higher': '192 kbps',
+          'quality.standard': '128 kbps',
+        },
+      };
+      let LANG = 'en';
+
+      function detectLang() {
+        try {
+          const lang = window.parent?.document?.documentElement?.lang;
+          if (lang) return String(lang).toLowerCase().startsWith('zh') ? 'zh' : 'en';
+        } catch { /* standalone or cross-origin */ }
+        try {
+          return String(navigator.language || 'en').toLowerCase().startsWith('zh') ? 'zh' : 'en';
+        } catch { return 'en'; }
+      }
+
+      /** Translate a key, interpolating `{name}` placeholders from `vars`. */
+      function t(key, vars) {
+        let text = DICT[LANG]?.[key] ?? DICT.en[key] ?? key;
+        if (vars) {
+          for (const name of Object.keys(vars)) {
+            text = text.split('{' + name + '}').join(String(vars[name]));
+          }
+        }
+        return text;
+      }
+
+      /** Static markup carries `data-i18n*` attributes; this applies them. */
+      function applyStaticStrings() {
+        for (const el of document.querySelectorAll('[data-i18n]')) el.textContent = t(el.dataset.i18n);
+        for (const el of document.querySelectorAll('[data-i18n-title]')) el.title = t(el.dataset.i18nTitle);
+        for (const el of document.querySelectorAll('[data-i18n-ph]')) el.placeholder = t(el.dataset.i18nPh);
+      }
+
+      /** Re-apply every user-visible string after a language switch. */
+      function applyLocale() {
+        LANG = detectLang();
+        try {
+          document.documentElement.lang = LANG === 'zh' ? 'zh-CN' : 'en';
+        } catch { /* headless */ }
+        applyStaticStrings();
+        // The toggle's label and title depend on the collapse state, not on a
+        // fixed key, so they are painted rather than carried as data-i18n.
+        paintLyricsToggle();
+        // The gesture hint carries markup; drop it so render() rebuilds it in
+        // the new language.
+        $('gesture')?.remove();
+        render();
+        paintModelSource();
+        paintQualityOptions();
+        if (modelRoutes.length) renderModelOptions();
+      }
+
+      /** Follow the shell's language while this page lives inside it. */
+      function watchShellLocale() {
+        try {
+          const root = window.parent?.document?.documentElement;
+          if (!root || typeof MutationObserver !== 'function') return;
+          new MutationObserver(applyLocale).observe(root, { attributes: true, attributeFilter: ['lang'] });
+        } catch { /* standalone */ }
+      }
+
       /** Last state document from the host. */
       let state = null;
       let lyric = null;
       let lyricLine = -1;
-      let tab = 'search';
+      /** Track whose lyrics belong in the pane; drives the fetch, per track. */
+      let lyricTrackId = null;
+      /** Bumped per request so a slow reply for a skipped track is discarded. */
+      let lyricRequest = 0;
+      /** Local-storage key for whether the lyrics pane is collapsed. */
+      const LYRICS_PREF = 'dsh-music.lyrics.collapsed';
+      let lyricsCollapsed = readLyricsPref();
       let volumePostAt = 0;
 
       const fmt = (ms) => {
@@ -393,8 +629,6 @@
           }
           audio.src = BASE + '/stream/' + track.id + '?level=' + encodeURIComponent(level);
           audio.load();
-          // Lyrics belong to the track, so only fetch them on a real change.
-          if (!sameTrack) loadLyrics(track.id);
         }
 
         function apply(next) {
@@ -526,7 +760,7 @@
         attempt();
         setTimeout(attempt, 200);
         setTimeout(attempt, 800);
-        toast('正在恢复播放… / resuming…');
+        toast(t('resuming'));
       }
 
       // ---------------------------------------------------------------- render
@@ -535,11 +769,26 @@
         const track = state.current;
         $('cover').src = track?.picUrl || '';
         $('cover').style.visibility = track?.picUrl ? 'visible' : 'hidden';
-        $('np-title').textContent = track ? track.name : '未播放 / nothing playing';
+        $('np-title').textContent = track ? track.name : t('nothingPlaying');
         $('np-artists').textContent = track ? (track.artists || []).join(' / ') : '';
         $('np-album').textContent = track ? track.album || '' : '';
+        // Lyrics belong to the track, and this page fetches them itself on
+        // every poll — not from the local transport's `applySource`, which
+        // only ever runs when this page owns the audio element. In the normal
+        // case the shell engine plays, so that path is dead and the pane
+        // stayed empty forever.
+        const trackId = track?.id ?? null;
+        if (trackId !== lyricTrackId) {
+          lyricTrackId = trackId;
+          if (trackId) loadLyrics(trackId);
+          else {
+            lyric = null;
+            lyricLine = -1;
+            $('lyrics').innerHTML = '<p class="hint">—</p>';
+          }
+        }
         $('play').textContent = state.playing ? '⏸' : '▶';
-        $('mode').textContent = { list: '列表', single: '单曲', shuffle: '随机' }[state.mode] || '列表';
+        $('mode').textContent = { list: t('modeList'), single: t('modeSingle'), shuffle: t('modeShuffle') }[state.mode] || t('modeList');
         $('counts').textContent = state.counts ? `(${state.counts.queued})` : '';
         $('dj-toggle').classList.toggle('on', Boolean(state.dj?.enabled));
         // The mood brief is persisted player setting, not part of the DJ status
@@ -550,18 +799,18 @@
         const account = state.account;
         $('account').innerHTML = account
           ? `${account.avatar ? `<img src="${esc(account.avatar)}" alt="">` : ''}<span>${esc(account.nickname)}${account.vip ? ' · VIP' : ''}</span>`
-          : `<button id="signin">登录 Sign in</button>`;
+          : `<button id="signin">${esc(t('signin'))}</button>`;
         const signin = $('signin');
         if (signin) signin.onclick = openLogin;
 
         // DJ status
         const dj = state.dj || {};
         $('dj-status').innerHTML = dj.enabled || dj.lastPlan
-          ? `<div class="dj-status">${dj.busy ? 'AI DJ 正在选曲… / planning…' : dj.error ? `AI DJ: ${esc(dj.error)}` : ''}${
+          ? `<div class="dj-status">${dj.busy ? esc(t('djPlanning')) : dj.error ? `AI DJ: ${esc(dj.error)}` : ''}${
               dj.lastPlan
                 ? `<div><b>${esc(dj.lastPlan.source === 'model' ? 'AI DJ' : 'AI DJ (heuristic)')}</b>${dj.lastPlan.route ? ` <span style="color:var(--muted)">${esc(dj.lastPlan.route)}</span>` : ''} +${dj.lastPlan.added}: ${esc(dj.lastPlan.vibe || '')}</div><div style="color:var(--muted)">${esc((dj.lastPlan.names || []).slice(-3).join(' · '))}</div>`
                 : ''
-            }${dj.modelError && !dj.lastPlan?.route ? `<div style="color:var(--muted)">模型层不可用 / model tier unavailable: ${esc(dj.modelError)}</div>` : ''}${dj.enabled ? '<div style="color:var(--muted);margin-top:4px">持续补歌中 / keeping the queue stocked</div>' : ''}</div>`
+            }${dj.modelError && !dj.lastPlan?.route ? `<div style="color:var(--muted)">${esc(t('modelTierUnavailable'))}: ${esc(dj.modelError)}</div>` : ''}${dj.enabled ? `<div style="color:var(--muted);margin-top:4px">${esc(t('djStocking'))}</div>` : ''}</div>`
           : '';
 
         if (autoplayBlocked()) {
@@ -569,7 +818,7 @@
             const el = document.createElement('div');
             el.id = 'gesture';
             el.className = 'need-gesture';
-            el.innerHTML = '浏览器需要你先与页面交互一次才会播放声音 / Chromium needs one interaction with this window before it will play audio — <button id="gesture-go" class="primary">点击播放 / Play</button> <span style="color:var(--muted)">在窗口任意处点击也可以 / clicking anywhere works too</span>';
+            el.innerHTML = `${esc(t('gestureText'))} — <button id="gesture-go" class="primary">${esc(t('gesturePlay'))}</button> <span style="color:var(--muted)">${esc(t('gestureNote'))}</span>`;
             $('dj-status').before(el);
             el.querySelector('#gesture-go').onclick = resumeWithGesture;
           }
@@ -601,7 +850,7 @@
         if (!state) return;
         const queue = state.queue || [];
         if (queue.length === 0) {
-          $('queue').innerHTML = '<div class="empty">队列为空，搜索或打开 AI DJ / queue empty</div>';
+          $('queue').innerHTML = `<div class="empty">${esc(t('queueEmpty'))}</div>`;
           return;
         }
         $('queue').innerHTML = queue
@@ -613,7 +862,7 @@
               <span class="meta"><span class="name">${esc(track.name)}</span><span class="sub">${esc((track.artists || []).join(' / '))}</span></span>
               ${track.vip ? '<span class="tag">VIP</span>' : ''}
               <span class="dur">${fmt(track.duration)}</span>
-              <span class="acts"><button data-remove="${index}" title="移除">✕</button></span>
+              <span class="acts"><button data-remove="${index}" title="${esc(t('remove'))}">✕</button></span>
             </div>`;
           })
           .join('');
@@ -631,13 +880,49 @@
       }
 
       // ---------------------------------------------------------------- lyrics
+      /** Collapsed preference, remembered across reloads when storage is open. */
+      function readLyricsPref() {
+        try { return localStorage.getItem(LYRICS_PREF) === '1'; } catch { return false; }
+      }
+
+      function saveLyricsPref(collapsed) {
+        try { localStorage.setItem(LYRICS_PREF, collapsed ? '1' : '0'); } catch { /* storage denied */ }
+      }
+
+      /** Reflect `lyricsCollapsed` in the pane and in the header button. */
+      function paintLyricsToggle() {
+        $('lyrics').classList.toggle('collapsed', lyricsCollapsed);
+        const button = $('lyrics-toggle');
+        button.textContent = t(lyricsCollapsed ? 'lyricsShow' : 'lyricsHide');
+        button.title = t(lyricsCollapsed ? 'lyricsToggleShow' : 'lyricsToggleHide');
+        button.setAttribute('aria-expanded', lyricsCollapsed ? 'false' : 'true');
+      }
+
+      $('lyrics-toggle').onclick = () => {
+        lyricsCollapsed = !lyricsCollapsed;
+        saveLyricsPref(lyricsCollapsed);
+        paintLyricsToggle();
+        // A hidden pane has no scroll position to keep, so re-expanding puts
+        // the highlighted line back in view instead of waiting for the next
+        // line change to scroll there.
+        if (!lyricsCollapsed) {
+          lyricLine = -1;
+          paintLyrics();
+        }
+      };
+
       async function loadLyrics(id) {
+        const request = ++lyricRequest;
         lyric = null;
-        $('lyrics').innerHTML = '<p class="hint">加载中… / loading…</p>';
+        lyricLine = -1;
+        $('lyrics').innerHTML = `<p class="hint">${esc(t('loading'))}</p>`;
         try {
           const data = await api('/lyric/' + id);
+          // Skipping tracks faster than NetEase answers would otherwise let an
+          // earlier reply land on the newer track's pane.
+          if (request !== lyricRequest) return;
           if (data.noLyric || !data.lrc) {
-            $('lyrics').innerHTML = '<p class="hint">纯音乐，无歌词 / instrumental</p>';
+            $('lyrics').innerHTML = `<p class="hint">${esc(t('instrumental'))}</p>`;
             return;
           }
           const lines = [];
@@ -654,6 +939,7 @@
           lyric = lines;
           $('lyrics').innerHTML = lines.map((line, index) => `<p data-line="${index}">${esc(line.text || '♪')}</p>`).join('');
         } catch (error) {
+          if (request !== lyricRequest) return;
           $('lyrics').innerHTML = `<p class="hint">${esc(error.message)}</p>`;
         }
       }
@@ -674,66 +960,6 @@
         if (current) current.scrollIntoView({ block: 'center', behavior: 'smooth' });
       }
 
-      // --------------------------------------------------------------- browser
-      function trackRow(track, index, context) {
-        return `<div class="row" data-play="${track.id}">
-          <span class="idx">${index + 1}</span>
-          <img src="${esc(track.picUrl || '')}" alt="" loading="lazy">
-          <span class="meta"><span class="name">${esc(track.name)}</span><span class="sub">${esc((track.artists || []).join(' / '))}${track.album ? ' · ' + esc(track.album) : ''}</span></span>
-          ${track.vip ? '<span class="tag">VIP</span>' : ''}
-          <span class="dur">${fmt(track.duration)}</span>
-          <span class="acts"><button data-queue="${track.id}" title="加入队列">＋</button></span>
-        </div>`;
-      }
-
-      async function renderBrowser() {
-        const el = $('browser');
-        if (tab === 'search') {
-          if (!el.dataset.done) el.innerHTML = '<div class="empty">搜索歌曲开始播放 / search to begin</div>';
-          return;
-        }
-        el.dataset.done = '';
-        el.innerHTML = '<div class="empty">加载中… / loading…</div>';
-        try {
-          if (tab === 'charts') {
-            const [charts, forYou] = await Promise.all([api('/charts'), api('/playlists')]);
-            el.innerHTML =
-              '<div class="section-title" style="padding-left:8px">官方榜单 Charts</div><div class="card-grid">' +
-              charts.map((chart) => `<div class="card" data-chart="${chart.id}"><img src="${esc(chart.cover || '')}" alt="" loading="lazy"><div class="name">${esc(chart.name)}</div><div class="sub">${esc(chart.updateFrequency || '')}</div></div>`).join('') +
-              '</div><div class="section-title" style="padding-left:8px">推荐歌单 Playlists</div><div class="card-grid">' +
-              forYou.map((list) => `<div class="card" data-list="${list.id}"><img src="${esc(list.cover || '')}" alt="" loading="lazy"><div class="name">${esc(list.name)}</div><div class="sub">${list.trackCount} 首</div></div>`).join('') +
-              '</div>';
-          } else {
-            const fresh = await api('/new');
-            el.innerHTML = '<div class="section-title" style="padding-left:8px">新歌推荐 New songs</div>' + fresh.map((track, index) => trackRow(track, index)).join('');
-          }
-        } catch (error) {
-          el.innerHTML = `<div class="empty">${esc(error.message)}</div>`;
-        }
-      }
-
-      async function doSearch() {
-        const query = $('q').value.trim();
-        if (!query) return;
-        tab = 'search';
-        document.querySelectorAll('.tabs button').forEach((b) => b.classList.toggle('on', b.dataset.tab === 'search'));
-        $('browser').innerHTML = '<div class="empty">搜索中… / searching…</div>';
-        try {
-          const data = await api('/search?q=' + encodeURIComponent(query));
-          $('browser').innerHTML = data.tracks.length
-            ? `<div class="section-title" style="padding-left:8px">${data.total} 个结果</div>` + data.tracks.map((track, index) => trackRow(track, index)).join('')
-            : '<div class="empty">没有结果 / no results</div>';
-        } catch (error) {
-          $('browser').innerHTML = `<div class="empty">${esc(error.message)}</div>`;
-        }
-      }
-
-      async function playTracks(tracks, startIndex) {
-        state = await api('/play', { method: 'POST', body: { tracks, startIndex: startIndex || 0 } });
-        render();
-        pokeEngine();
-      }
-
       // -------------------------------------------------------------- QR login
       function drawQr(text) {
         const canvas = $('qr');
@@ -761,15 +987,33 @@
         }
       }
 
+      /**
+       * The QR state line. The host's `state` field is stable vocabulary, so
+       * it localizes here; free-form host messages (agent-facing, bilingual)
+       * are the fallback for anything unknown, and a poll failure carries the
+       * raw error in `error`.
+       */
+      function loginMessage(data) {
+        if (data.error) return t('pollFailed') + data.error;
+        const key = {
+          waiting: 'loginWaiting',
+          scanned: 'loginScanned',
+          expired: 'loginExpired',
+          success: 'loginSuccess',
+          idle: 'loginIdle',
+        }[data.state];
+        return key ? t(key) : data.message || data.state;
+      }
+
       let qrTimer;
       async function openLogin() {
         const dialog = $('login');
         dialog.showModal();
-        $('qr-state').textContent = '正在获取二维码… / fetching QR…';
+        $('qr-state').textContent = t('qrFetching');
         try {
           const data = await api('/login/qr', { method: 'POST', body: {} });
           drawQr(data.loginUrl);
-          $('qr-state').textContent = '用网易云音乐 App 扫码 / scan with the NetEase app';
+          $('qr-state').textContent = t('qrScan');
         } catch (error) {
           $('qr-state').textContent = error.message;
         }
@@ -783,12 +1027,12 @@
           if (data.state === 'success') {
             clearInterval(qrTimer);
             $('login').close();
-            toast('登录成功 / signed in');
+            toast(t('loginSuccess'));
             await refresh();
             return;
           }
           if (data.loginUrl) drawQr(data.loginUrl);
-          $('qr-state').textContent = data.message || data.state;
+          $('qr-state').textContent = loginMessage(data);
         } catch (error) {
           $('qr-state').textContent = error.message;
         }
@@ -798,21 +1042,23 @@
       $('qr-close').onclick = () => { clearInterval(qrTimer); $('login').close(); };
       $('login').addEventListener('close', () => clearInterval(qrTimer));
 
-      // ---------------------------------------------------------- curator model
+      // ---------------------------------------------------------- DJ model
       /**
-       * The curator picker.
+       * The DJ model picker.
        *
        * Routes and their catalogued models come from the host's LLM service.
        * The catalogue is advisory — core resolution accepts unlisted ids — so
-       * "其他… / Other…" reveals a text field for any id the route serves. A
+       * the "Other…" entry reveals a text field for any id the route serves. A
        * saved choice persists in the session document and takes precedence over
-       * the profile patch, which "回退 Revert" falls back to.
+       * the profile patch, which the "Revert" button falls back to.
        */
-      let curatorRoutes = [];
-      let curatorSelected = { provider: null, model: null };
-      let curatorConfigured = { provider: null, model: null };
+      let modelRoutes = [];
+      let modelSelected = { provider: null, model: null };
+      let modelConfigured = { provider: null, model: null };
+      /** Raw source key from the host; localized on every paint. */
+      let modelSourceRaw = '';
       const CUSTOM = '__custom__';
-      const CURATOR_CONTROLS = [
+      const MODEL_CONTROLS = [
         'dj-provider',
         'dj-model-select',
         'dj-model-custom',
@@ -822,8 +1068,8 @@
       ];
 
       /** Enable or disable every picker control at once. */
-      function setCuratorEnabled(enabled) {
-        for (const id of CURATOR_CONTROLS) {
+      function setModelControls(enabled) {
+        for (const id of MODEL_CONTROLS) {
           const node = $(id);
           if (node) node.disabled = !enabled;
         }
@@ -831,14 +1077,14 @@
 
       function renderModelOptions() {
         const provider = $('dj-provider').value;
-        const route = curatorRoutes.find((entry) => entry.provider === provider);
+        const route = modelRoutes.find((entry) => entry.provider === provider);
         const models = route?.models ?? [];
         const select = $('dj-model-select');
         select.innerHTML =
           models.map((model) => `<option value="${esc(model.id)}">${esc(model.name || model.id)}</option>`).join('') +
-          `<option value="${CUSTOM}">其他… / Other…</option>`;
+          `<option value="${CUSTOM}">${esc(t('other'))}</option>`;
 
-        const pinned = curatorSelected.provider === provider ? curatorSelected.model : null;
+        const pinned = modelSelected.provider === provider ? modelSelected.model : null;
         const custom = $('dj-model-custom');
         if (pinned && models.some((model) => model.id === pinned)) {
           select.value = pinned;
@@ -854,29 +1100,40 @@
         if (route?.error) $('dj-model-status').textContent = route.error;
       }
 
-      async function loadCurator() {
+      /** Where the effective model choice comes from, localized. */
+      function paintModelSource() {
+        const key = {
+          panel: 'srcPanel',
+          config: 'srcConfig',
+          'agent-default': 'srcAgentDefault',
+          discovered: 'srcDiscovered',
+        }[modelSourceRaw];
+        $('dj-model-source').textContent = key ? t(key) : modelSourceRaw || '';
+      }
+
+      async function loadModelPicker() {
         try {
           const data = await api('/dj/models');
-          setCuratorEnabled(true);
-          curatorRoutes = data.routes ?? [];
-          curatorSelected = data.selected ?? { provider: null, model: null };
-          curatorConfigured = data.configured ?? { provider: null, model: null };
+          setModelControls(true);
+          modelRoutes = data.routes ?? [];
+          modelSelected = data.selected ?? { provider: null, model: null };
+          modelConfigured = data.configured ?? { provider: null, model: null };
 
-          const providers = curatorRoutes.map((route) => route.provider);
+          const providers = modelRoutes.map((route) => route.provider);
           // Keep a value the catalogue does not list, so a working pin is not
           // silently replaced by whatever the adapter happens to offer.
-          for (const value of [curatorSelected.provider, curatorConfigured.provider]) {
+          for (const value of [modelSelected.provider, modelConfigured.provider]) {
             if (value && !providers.includes(value)) providers.push(value);
           }
           const select = $('dj-provider');
           select.innerHTML = providers.length
             ? providers.map((provider) => `<option value="${esc(provider)}">${esc(provider)}</option>`).join('')
-            : '<option value="">(无 provider / none)</option>';
-          select.value = curatorSelected.provider ?? curatorConfigured.provider ?? providers[0] ?? '';
+            : `<option value="">${esc(t('noProvider'))}</option>`;
+          select.value = modelSelected.provider ?? modelConfigured.provider ?? providers[0] ?? '';
           renderModelOptions();
 
-          $('dj-model-source').textContent =
-            { panel: '面板 / panel', config: '配置 / profile', discovered: '自动 / auto' }[data.source] ?? data.source ?? '';
+          modelSourceRaw = data.source ?? '';
+          paintModelSource();
           $('dj-model-status').textContent = data.error ?? '';
         } catch (error) {
           // A 404 here means this page is newer than the host module: the page
@@ -884,11 +1141,8 @@
           // serving the cached module. Only a process restart reunites them, so
           // say that instead of showing a bare "unknown endpoint".
           if (/unknown endpoint|\b404\b/.test(error.message)) {
-            setCuratorEnabled(false);
-            $('dj-model-status').textContent =
-              '宿主模块早于本功能：请完全退出并重新启动 Harness（关闭窗口不够，它会留在托盘里）/ ' +
-              'the host module predates this feature — fully quit and relaunch the harness ' +
-              '(closing the window is not enough; it stays running in the tray)';
+            setModelControls(false);
+            $('dj-model-status').textContent = t('hostPredatesLong');
           } else {
             $('dj-model-status').textContent = error.message;
           }
@@ -902,11 +1156,11 @@
           : $('dj-model-select').value;
       }
 
-      async function saveCurator(provider, model, message) {
+      async function saveModelRoute(provider, model, message) {
         try {
           state = await api('/dj', { method: 'POST', body: { provider, model } });
           render();
-          await loadCurator();
+          await loadModelPicker();
           toast(message);
         } catch (error) {
           toast(error.message);
@@ -921,15 +1175,15 @@
         const provider = $('dj-provider').value;
         const model = chosenModel();
         if (!provider || !model) {
-          toast('请先选择 provider 与 model / pick a provider and a model');
+          toast(t('pickProviderModel'));
           return;
         }
-        void saveCurator(provider, model, `已保存 / saved ${provider}/${model}`);
+        void saveModelRoute(provider, model, t('saved', { route: `${provider}/${model}` }));
       };
       $('dj-model-clear').onclick = () =>
-        void saveCurator('', '', '已回退到 profile 配置 / reverted to the profile config');
+        void saveModelRoute('', '', t('reverted'));
       $('dj-model-test').onclick = async () => {
-        $('dj-model-status').textContent = '测试中… / testing…';
+        $('dj-model-status').textContent = t('testing');
         try {
           const result = await api('/dj/test', { method: 'POST', body: {} });
           if (result.source === 'model') {
@@ -937,7 +1191,7 @@
               `✓ ${result.route} — ${(result.picked ?? []).join(' · ')}${result.vibe ? ` (${result.vibe})` : ''}`;
           } else {
             $('dj-model-status').textContent =
-              `✗ ${result.modelError ?? result.note ?? 'model tier unavailable'} — 已用启发式 / heuristics`;
+              `✗ ${result.modelError ?? result.note ?? t('modelTierUnavailable')} — ${t('heuristics')}`;
           }
         } catch (error) {
           $('dj-model-status').textContent = error.message;
@@ -956,6 +1210,24 @@
        */
       let qualityLevels = [];
 
+      /**
+       * One level's display name. The dictionary knows the shipped levels;
+       * anything else falls back to the host's own (bilingual) label.
+       */
+      function qualityLabel(entry) {
+        return DICT[LANG]?.['quality.' + entry.id] ?? DICT.en['quality.' + entry.id] ?? entry.label ?? entry.id;
+      }
+
+      /** Rebuild the picker options, preserving the current selection. */
+      function paintQualityOptions() {
+        if (qualityLevels.length === 0) return;
+        const current = $('quality').value;
+        $('quality').innerHTML = qualityLevels
+          .map((entry) => `<option value="${esc(entry.id)}">${esc(qualityLabel(entry))}</option>`)
+          .join('');
+        if (qualityLevels.some((entry) => entry.id === current)) $('quality').value = current;
+      }
+
       /** Caption for what the last stream actually served. */
       function paintQualityInfo() {
         const last = state?.audio?.last;
@@ -966,22 +1238,20 @@
         }
         const kbps = last.br ? ` · ${Math.round(last.br / 1000)} kbps` : '';
         $('quality-info').textContent =
-          `▶ ${String(last.type ?? '').toUpperCase()}${kbps}` + (last.downgraded ? ` (${last.served}, 已降级/downgraded)` : '');
+          `▶ ${String(last.type ?? '').toUpperCase()}${kbps}` + (last.downgraded ? ` (${last.served}, ${t('downgraded')})` : '');
       }
 
       async function loadQuality() {
         try {
           const data = await api('/quality');
           qualityLevels = data.levels ?? [];
-          $('quality').innerHTML = qualityLevels
-            .map((entry) => `<option value="${esc(entry.id)}">${esc(entry.label || entry.id)}</option>`)
-            .join('');
+          paintQualityOptions();
           $('quality').value = data.preferred ?? 'exhigh';
           paintQualityInfo();
         } catch (error) {
           // A host without this endpoint is older than this page; say so once.
           $('quality-info').textContent = /unknown endpoint|\b404\b/.test(error.message)
-            ? '宿主模块早于本功能 / host module predates this feature'
+            ? t('hostPredatesShort')
             : error.message;
         }
       }
@@ -993,7 +1263,7 @@
           applyTransport();
           pokeEngine();
           paintQualityInfo();
-          toast('音质已设为 / quality set to ' + event.target.value);
+          toast(t('qualitySet', { level: event.target.value }));
         } catch (error) {
           toast(error.message);
         }
@@ -1020,52 +1290,19 @@
       $('seek').onchange = (event) => {
         control({ action: 'seek', value: Math.round((Number(event.target.value) / 1000) * durationMs()) });
       };
-      $('like').onclick = () => state?.current && api('/feedback', { method: 'POST', body: { kind: 'likes', trackId: state.current.id } }).then(() => toast('已喜欢 / liked'));
-      $('dislike').onclick = () => state?.current && api('/feedback', { method: 'POST', body: { kind: 'dislikes', trackId: state.current.id } }).then(() => { toast('不再推荐 / disliked'); control({ action: 'next' }); });
-      $('go').onclick = doSearch;
-      $('q').onkeydown = (event) => { if (event.key === 'Enter') doSearch(); };
+      $('like').onclick = () => state?.current && api('/feedback', { method: 'POST', body: { kind: 'likes', trackId: state.current.id } }).then(() => toast(t('liked')));
+      $('dislike').onclick = () => state?.current && api('/feedback', { method: 'POST', body: { kind: 'dislikes', trackId: state.current.id } }).then(() => { toast(t('disliked')); control({ action: 'next' }); });
 
       $('dj-toggle').onclick = async () => {
         try {
           const data = await api('/dj', { method: 'POST', body: { enabled: !state?.dj?.enabled, prompt: $('dj-prompt').value } });
           state = data;
           render();
-          toast(state.dj?.enabled ? 'AI DJ 已开启 / AI DJ on' : 'AI DJ 已关闭 / AI DJ off');
+          toast(state.dj?.enabled ? t('djOn') : t('djOff'));
         } catch (error) { toast(error.message); }
       };
       $('dj-prompt').onchange = () => api('/dj', { method: 'POST', body: { prompt: $('dj-prompt').value, enabled: state?.dj?.enabled } }).then((data) => { state = data; render(); }).catch((error) => toast(error.message));
 
-      document.querySelectorAll('.tabs button').forEach((button) => {
-        button.onclick = () => {
-          tab = button.dataset.tab;
-          document.querySelectorAll('.tabs button').forEach((b) => b.classList.toggle('on', b === button));
-          $('searchbar').style.display = tab === 'search' ? 'flex' : 'none';
-          $('browser').dataset.done = '';
-          renderBrowser();
-        };
-      });
-
-      $('browser').onclick = async (event) => {
-        const playId = event.target.closest('[data-play]')?.dataset.play;
-        const queueId = event.target.closest('[data-queue]')?.dataset.queue;
-        const chartId = event.target.closest('[data-chart]')?.dataset.chart;
-        const listId = event.target.closest('[data-list]')?.dataset.list;
-        try {
-          if (playId) {
-            const data = await api('/track/' + playId);
-            await playTracks([data.track], 0);
-          } else if (queueId) {
-            const data = await api('/track/' + queueId);
-            state = await api('/queue', { method: 'POST', body: { action: 'append', tracks: [data.track] } });
-            render(); pokeEngine(); toast('已加入队列 / queued');
-          } else if (chartId || listId) {
-            const data = await api('/playlist/' + (chartId || listId));
-            await playTracks(data.tracks, 0);
-            toast('播放歌单 ' + data.name);
-          }
-        } catch (error) { toast(error.message); }
-      };
-
       $('queue').onclick = async (event) => {
         const jump = event.target.closest('[data-jump]')?.dataset.jump;
         const remove = event.target.closest('[data-remove]')?.dataset.remove;
@@ -1087,13 +1324,15 @@
           render();
           applyTransport();
         } catch (error) {
-          $('np-title').textContent = '连接失败 / cannot reach the host: ' + error.message;
+          $('np-title').textContent = t('connectFailed') + error.message;
         }
       }
 
+      applyLocale();
+      watchShellLocale();
       refresh();
       setInterval(refresh, 1500);
-      void loadCurator();
+      void loadModelPicker();
       void loadQuality();
       // Progress and lyric highlighting interpolate locally between the
       // engine's reports, so they need their own repaint clock now that the