momolulu 1.1.1 → 1.2.2

package/README.en.md

@@ -42,7 +42,7 @@ Preferences and timer state stay in browser `localStorage` and are never uploade
 
 ## Known limitations
 
-Ordinary sessions only (no child agents); no cross-window timer sync; timers are not OS alarms and stop when DSH is closed; no built-in updater.
+Sub-agent conversations are listed and tagged; no cross-window timer sync; timers are not OS alarms and stop when DSH is closed; no built-in updater.
 
 ## Development
 

package/README.md

@@ -42,7 +42,7 @@ dsh plugin --profile web add momolulu
 
 ## 已知限制
 
-只支持普通会话（不含子代理）；多窗口不同步计时；计时不是系统闹钟，关掉 DSH 就不会准时触发；未内置自动更新。
+子代理会话以「子代理」标注列出；多窗口不同步计时；计时不是系统闹钟，关掉 DSH 就不会准时触发；未内置自动更新。
 
 ## 开发
 

package/client.js

@@ -12,15 +12,15 @@ window.__ModuleLoader__.load({
     ];
     const zh = {
       title: 'momolulu', subtitle: '慢慢来，我陪你一起。', meadow: '草甸', hike: '徒步', lake: '湖畔',
-      radarWaiting: '等待处理', radarApproval: '请求权限', radarQuestion: '等待输入', radarSoftHint: '有其他会话可查看，无需确认或立即处理。', radar: '会话雷达', radarRunning: '运行中', radarUnread: '刚结束 · 待查看', radarEmpty: '暂无运行中或待查看的会话', radarHint: '结束不代表成功；待查看状态仅在当前页面保留。', openFailed: '无法打开此会话，请从侧栏重试。', showAll: '展开全部', showLess: '收起列表', reminderPaused: '提醒随专注暂停',
-      testReminder: '测试提醒（8 秒）', sound: '提示音', soundOn: '提示音 · 开', soundOff: '提示音 · 关', focusCommand: '专注', focusCommandHint: '开始或暂停 momolulu 的专注计时', minimize: '缩成小头像', restore: '恢复照片', details: '详情',
+      radarWaiting: '等待处理', radarApproval: '请求权限', radarQuestion: '等待输入', radarSoftHint: '有其他会话可查看，无需确认或立即处理。', radar: '会话雷达', radarRunning: '运行中', radarUnread: '待查看', radarQuiet: '暂无变化', radarEmpty: '暂无会话变化', radarChild: '子代理', openFailed: '无法打开此会话，请从侧栏重试。', showAll: '展开全部', showLess: '收起列表', reminderPaused: '提醒随专注暂停',
+      testReminder: '测试提醒（8 秒）', sound: '提示音', soundOn: '提示音 · 开', testBackground: '10 秒后响（可切屏）', soundOff: '提示音 · 关', focusCommand: '专注', focusCommandHint: '开始或暂停 momolulu 的专注计时', minimize: '缩成小头像', restore: '恢复照片', details: '详情',
       close: '收起', focus: '专注倒计时', start: '开始专注', pause: '暂停', resume: '继续', reset: '重置',
       ready: '准备好，开始一小段专注', running: '专注中', paused: '已暂停', done: '这一轮完成啦',
       minutes: '分钟', elapsed: '已专注', reminders: '休息提醒', on: '开启', off: '关闭', next: '距离下次休息',
       remindOff: '提醒已关闭，专注计时不受影响', remindToday: '今天已暂停提醒', remindReady: '开始专注后计时',
       break: '喝口水、活动肩颈，让眼睛看看远处吧。', finish: '专注完成！休息一下，再继续也不迟。',
       got: '收到', snooze: '10 分钟后提醒', today: '今天暂停', background: '背景', intensity: '背景浓度',
-      motion: '照片动态', activity: '会话动态', idle: '空闲', processing: '正在处理', newSession: '新会话',
+      drift: '缓慢巡游', activity: '会话动态', idle: '空闲', processing: '正在处理', newSession: '新会话',
       connecting: '正在连接会话…', empty: '暂无会话，开始创作吧。', more: '更多会话', view: '展开专注面板',
       weather: '天气', nanjing: '南京', local: '当前位置', locate: '使用当前位置', locating: '定位中…', locationError: '定位不可用，已切回南京', weatherLoading: '天气加载中', weatherError: '天气暂不可用', stale: '上次更新', refresh: '刷新', brightness: '背景亮度', backgroundAdjust: '背景调节', privacy: '点击定位后，坐标仅用于 Open-Meteo 天气查询，不保存到本地。', clear: '晴', cloudy: '多云', fog: '雾', rain: '雨', snow: '雪', storm: '雷雨', unknownWeather: '天气',
       restAfterFocus: '本轮结束后休息', enterFullscreen: '进入全屏', appearance: '外观设置', reminderSettings: '提醒设置', reminderEvery: '每 20 分钟提醒喝水 / 站立', noRunning: '当前没有运行中的任务', runningTasks: '运行中的任务', workMode: '工作模式', scenicMode: '陪伴模式', readingMode: '阅读保护',
@@ -28,15 +28,15 @@ window.__ModuleLoader__.load({
     };
     const en = {
       title: 'momolulu', subtitle: 'One step at a time, together.', meadow: 'Meadow', hike: 'Hike', lake: 'Lake',
-      radarWaiting: 'Needs input', radarApproval: 'Permission requested', radarQuestion: 'Waiting for input', radarSoftHint: 'Other sessions have updates. No acknowledgement or immediate action required.', radar: 'Session radar', radarRunning: 'Running', radarUnread: 'Ended · unread', radarEmpty: 'No running or unread sessions', radarHint: 'Ended does not mean successful. Unread status is local to this page.', openFailed: 'Unable to open this session. Try the sidebar.', showAll: 'Show all', showLess: 'Show less', reminderPaused: 'Reminders paused with focus',
-      testReminder: 'Test reminder (8 sec)', sound: 'Chime', soundOn: 'Chime · On', soundOff: 'Chime · Off', focusCommand: 'Focus', focusCommandHint: 'Start or pause the momolulu focus timer', minimize: 'Minimize to avatar', restore: 'Restore photo', details: 'Details',
+      radarWaiting: 'Needs input', radarApproval: 'Permission requested', radarQuestion: 'Waiting for input', radarSoftHint: 'Other sessions have updates. No acknowledgement or immediate action required.', radar: 'Session radar', radarRunning: 'Running', radarUnread: 'Unread', radarQuiet: 'No updates', radarEmpty: 'No session changes', radarChild: 'Subagent', openFailed: 'Unable to open this session. Try the sidebar.', showAll: 'Show all', showLess: 'Show less', reminderPaused: 'Reminders paused with focus',
+      testReminder: 'Test reminder (8 sec)', sound: 'Chime', soundOn: 'Chime · On', testBackground: 'Ring in 10s (switch screen)', soundOff: 'Chime · Off', focusCommand: 'Focus', focusCommandHint: 'Start or pause the momolulu focus timer', minimize: 'Minimize to avatar', restore: 'Restore photo', details: 'Details',
       close: 'Close', focus: 'Focus countdown', start: 'Start focus', pause: 'Pause', resume: 'Resume', reset: 'Reset',
       ready: 'Ready for a little focus time', running: 'Focusing', paused: 'Paused', done: 'Session complete',
       minutes: 'min', elapsed: 'Focused', reminders: 'Break reminders', on: 'On', off: 'Off', next: 'Next break in',
       remindOff: 'Reminders off · focus timer continues', remindToday: 'Reminders paused today', remindReady: 'Starts with your focus timer',
       break: 'Have some water, stretch your shoulders and rest your eyes.', finish: 'Well done! Take a break before your next session.',
       got: 'Got it', snooze: 'Remind in 10 min', today: 'Pause today', background: 'Background', intensity: 'Background visibility',
-      motion: 'Photo motion', activity: 'Session activity', idle: 'Idle', processing: 'Processing', newSession: 'New session',
+      drift: 'Slow drift', activity: 'Session activity', idle: 'Idle', processing: 'Processing', newSession: 'New session',
       connecting: 'Connecting to sessions…', empty: 'No sessions yet. Start creating.', more: 'More sessions', view: 'Open focus panel',
       weather: 'Weather', nanjing: 'Nanjing', local: 'Current location', locate: 'Use my location', locating: 'Locating…', locationError: 'Location unavailable; using Nanjing', weatherLoading: 'Loading weather', weatherError: 'Weather unavailable', stale: 'Last update', refresh: 'Refresh', brightness: 'Background brightness', backgroundAdjust: 'Background settings', privacy: 'Location is sent only to Open-Meteo for weather after you click; coordinates are not stored locally.', clear: 'Clear', cloudy: 'Cloudy', fog: 'Fog', rain: 'Rain', snow: 'Snow', storm: 'Thunderstorm', unknownWeather: 'Weather',
       restAfterFocus: 'Rest after this session', enterFullscreen: 'Enter fullscreen', appearance: 'Appearance', reminderSettings: 'Reminder settings', reminderEvery: 'Water / stand reminder every 20 minutes', noRunning: 'No tasks running', runningTasks: 'Running tasks', workMode: 'Work mode', scenicMode: 'Scenic mode', readingMode: 'Reading protection',
@@ -45,34 +45,79 @@ window.__ModuleLoader__.load({
     let layout, translate, workspace;
     const selectStatus = (snapshot) => snapshot;
     function radarGroups(catalog, statuses) {
+      const rows = Object.values(catalog.byId);
+      const childrenByParent = new Map();
+      for (const row of rows) {
+        if (row.origin !== 'subagent' || !row.parentId) continue;
+        const list = childrenByParent.get(row.parentId) ?? [];
+        list.push(row);
+        childrenByParent.set(row.parentId, list);
+      }
+      const describe = (row) => {
+        const status = statuses.get(row.id);
+        const runningNow = status?.running ?? row.running ?? false;
+        const pending = status?.pendingInteraction;
+        return {
+          ...row,
+          runningNow,
+          unreadNow: status?.completionUnread === true && !runningNow,
+          attentionKind: pending ? (pending.kind === 'approval' ? 'radarApproval' : 'radarQuestion') : undefined,
+          requestKey: pending?.key,
+        };
+      };
+      const parentRow = (row) => {
+        const self = describe(row);
+        const children = (childrenByParent.get(row.id) ?? []).map((child) => ({ ...describe(child), child: true }));
+        return { ...self, children };
+      };
       const running = [], unread = [], waiting = [];
-      for (const row of Object.values(catalog.byId)) {
-        // Child-agent addressing is separate; first version lists ordinary conversations only.
+      for (const row of rows) {
         if (row.origin === 'subagent') continue;
-        const status = statuses.get(row.id);
-        const isRunning = status?.running ?? row.running;
-        if (status?.pendingInteraction) waiting.push({ ...row, attentionKind: status.pendingInteraction.kind === 'approval' ? 'radarApproval' : 'radarQuestion', requestKey: status.pendingInteraction.key });
-        else if (isRunning) running.push(row);
-        else if (status?.completionUnread) unread.push(row);
+        const entry = parentRow(row);
+        const childWaiting = entry.children.find((child) => child.attentionKind);
+        const childBusy = entry.children.some((child) => child.runningNow);
+        const childUnread = entry.children.some((child) => child.unreadNow);
+        if (entry.attentionKind) waiting.push(entry);
+        else if (childWaiting) waiting.push({ ...entry, attentionKind: childWaiting.attentionKind, requestKey: childWaiting.requestKey, childAttention: true });
+        else if (entry.runningNow || childBusy) running.push(entry);
+        else if (entry.unreadNow || childUnread) unread.push(entry);
       }
       const recent = (a, b) => b.updatedAt - a.updatedAt;
       return { running: running.sort(recent), unread: unread.sort(recent), waiting: waiting.sort(recent) };
     }
-    function attentionSnapshot(catalog, statuses) {
-      const result = new Map();
-      for (const row of Object.values(catalog.byId)) {
-        if (row.origin === 'subagent' || (row.retainedBy?.mainView ?? 0) > 0) continue;
-        const status = statuses.get(row.id);
-        if (status?.pendingInteraction) result.set(row.id, `pending:${status.pendingInteraction.key}:${status.pendingInteraction.kind}`);
-        else if (status?.completionUnread && !(status.running ?? row.running)) result.set(row.id, 'ended');
+    function attentionTokens(groups) {
+      const tokens = new Map();
+      for (const rows of Object.values(groups)) {
+        for (const row of rows) {
+          const childPending = (row.children ?? []).find((child) => child.attentionKind);
+          const pending = row.attentionKind ?? childPending?.attentionKind;
+          const requestKey = row.requestKey ?? childPending?.requestKey ?? '';
+          const unread = row.unreadNow || (row.children ?? []).some((child) => child.unreadNow);
+          // Merely starting to run is not an attention event.
+          if (pending === undefined && !unread) continue;
+          tokens.set(row.id, `${pending ?? ''}:${requestKey}|${unread ? 'u' : ''}`);
+        }
       }
-      return result;
+      return tokens;
     }
     function newAttention(previous, current) {
       if (!previous) return false; // Establish baseline quietly after page load.
       return [...current].some(([id, token]) => previous.get(id) !== token);
     }
     const t = (key) => translate(key);
+    const relativeFormat = typeof Intl !== 'undefined' && Intl.RelativeTimeFormat
+      ? new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+      : null;
+    function relativeTime(timestamp, now) {
+      if (!relativeFormat || !Number.isFinite(timestamp) || timestamp <= 0) return '';
+      const seconds = Math.round((timestamp - now) / 1000);
+      if (Math.abs(seconds) < 60) return relativeFormat.format(seconds, 'second');
+      const minutes = Math.round(seconds / 60);
+      if (Math.abs(minutes) < 60) return relativeFormat.format(minutes, 'minute');
+      const hours = Math.round(minutes / 60);
+      if (Math.abs(hours) < 24) return relativeFormat.format(hours, 'hour');
+      return relativeFormat.format(Math.round(hours / 24), 'day');
+    }
     const storage = {
       read() { try { return JSON.parse(localStorage.getItem('llm.companion.v2') || 'null'); } catch { return null; } },
       save(value) { try { localStorage.setItem('llm.companion.v2', JSON.stringify(value)); } catch { /* In-memory mode is still usable. */ } },
@@ -95,22 +140,24 @@ window.__ModuleLoader__.load({
         reminderRemaining: Number.isFinite(saved?.reminderRemaining) ? Math.max(0, saved.reminderRemaining) : 20 * 60000,
         sound: saved?.sound === true,
         reminders: saved?.reminders !== false, nextReminder: Number.isFinite(saved?.nextReminder) ? saved.nextReminder : 0,
-        pausedDate: typeof saved?.pausedDate === 'string' ? saved.pausedDate : '', notice: '', noticeAt: 0,
+        pausedDate: typeof saved?.pausedDate === 'string' ? saved.pausedDate : '', notice: '', noticeAt: 0, previewAt: 0, previewUntil: 0,
         scene: [0, 1, 2].includes(saved?.scene) ? saved.scene : 0,
         minimized: saved?.minimized === true,
         readingProtection: saved?.readingProtection !== false, fullscreen: false,
         brightness: Math.min(180, Math.max(70, Number(saved?.brightness) || 122)),
         weather: null, weatherState: 'loading', locationKey: 'nanjing', locationError: false, locating: false,
-        bgOn: saved?.bgOn !== false, intensity: Math.min(75, Math.max(15, Number(saved?.intensity) || 45)), motion: saved?.motion !== false,
+        bgOn: saved?.bgOn !== false, intensity: Math.min(75, Math.max(15, Number(saved?.intensity) || 45)), drift: saved?.drift !== false,
       };
     }
     let state;
     const listeners = new Set();
     const getSnapshot = () => state;
     const subscribe = (fn) => { listeners.add(fn); return () => listeners.delete(fn); };
+    const CHIME_KEYS = ['status', 'sound', 'reminders', 'nextReminder', 'deadline', 'pausedDate'];
     function update(patch, persist = true) {
       state = { ...state, ...patch };
       if (persist) storage.save(state);
+      if (CHIME_KEYS.some((key) => key in patch)) syncScheduledChimes();
       for (const fn of listeners) fn();
     }
     // Optional chime. The AudioContext is created only after a user gesture, so
@@ -120,42 +167,96 @@ window.__ModuleLoader__.load({
       try {
         const Ctor = window.AudioContext || window.webkitAudioContext;
         if (!Ctor) return undefined;
-        audioContext ??= new Ctor();
+        if (audioContext === undefined) {
+          audioContext = new Ctor();
+          audioContext.addEventListener?.('statechange', () => {
+            if (audioContext?.state === 'running') syncScheduledChimes();
+          });
+        }
         if (audioContext.state === 'suspended') void audioContext.resume().catch(() => {});
       } catch { audioContext = undefined; }
       return audioContext;
     }
-    function playChime() {
-      const audio = ensureAudio();
-      if (!audio || audio.state !== 'running') return;
-      const start = audio.currentTime;
+    function buildChime(audio, base) {
+      const nodes = [];
       [660, 880].forEach((frequency, index) => {
         const oscillator = audio.createOscillator();
         const gain = audio.createGain();
-        const at = start + index * 0.18;
+        const at = base + index * 0.18;
         oscillator.type = 'sine';
         oscillator.frequency.value = frequency;
-        gain.gain.setValueAtTime(0, at);
-        gain.gain.linearRampToValueAtTime(0.12, at + 0.02);
-        gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.35);
+        gain.gain.setValueAtTime(0.0001, at);
+        gain.gain.linearRampToValueAtTime(0.32, at + 0.02);
+        gain.gain.exponentialRampToValueAtTime(0.0002, at + 0.6);
         oscillator.connect(gain).connect(audio.destination);
         oscillator.start(at);
-        oscillator.stop(at + 0.4);
+        oscillator.stop(at + 0.7);
+        nodes.push(oscillator);
       });
+      return nodes;
+    }
+    function playChime() {
+      const audio = ensureAudio();
+      if (!audio) return;
+      const emit = () => { buildChime(audio, audio.currentTime); };
+      // The first chime often runs while the context is still suspended; wait for it.
+      if (audio.state === 'running') emit();
+      else Promise.resolve(audio.resume()).then(emit).catch(() => {});
+    }
+    // A near-silent oscillator holds the audio device open; without it macOS/Chromium can
+    // suspend the context while the window is hidden, and scheduled chimes never fire.
+    let keepAliveOscillator;
+    function startAudioKeepAlive() {
+      const audio = ensureAudio();
+      if (!audio || keepAliveOscillator) return;
+      try {
+        const oscillator = audio.createOscillator();
+        const gain = audio.createGain();
+        oscillator.frequency.value = 30;
+        gain.gain.value = 0.00005;
+        oscillator.connect(gain).connect(audio.destination);
+        oscillator.start();
+        keepAliveOscillator = oscillator;
+      } catch { keepAliveOscillator = undefined; }
+    }
+    function stopAudioKeepAlive() {
+      try { keepAliveOscillator?.stop(); } catch { /* already stopped */ }
+      keepAliveOscillator = undefined;
+    }
+    // A scheduled chime rides the audio clock, so a hidden or throttled window still rings on time.
+    let scheduledChimes = [];
+    function cancelScheduledChimes() {
+      for (const node of scheduledChimes) { try { node.stop(); } catch { /* already stopped */ } }
+      scheduledChimes = [];
+    }
+    function scheduleChimeIn(delayMs) {
+      const audio = ensureAudio();
+      if (!audio) return;
+      const arm = () => {
+        const nodes = buildChime(audio, audio.currentTime + Math.max(0, delayMs) / 1000);
+        scheduledChimes.push(...nodes);
+      };
+      if (audio.state === 'running') arm();
+      else Promise.resolve(audio.resume()).then(arm).catch(() => {});
+    }
+    function syncScheduledChimes() {
+      cancelScheduledChimes();
+      if (!state.sound) { stopAudioKeepAlive(); return; }
+      startAudioKeepAlive();
+      if (state.status !== 'running') return;
+      const now = Date.now();
+      const today = new Date(now).toDateString();
+      if (state.reminders && state.pausedDate !== today && state.nextReminder > now) scheduleChimeIn(state.nextReminder - now);
+      if (state.deadline > now) scheduleChimeIn(state.deadline - now);
     }
     function tick(now = Date.now()) {
       const patch = { now };
       let persist = false;
       if (state.status === 'running' && remainingMs(state, now) === 0) {
-        Object.assign(patch, { status: 'done', remaining: 0 });
-        if (state.reminders && state.pausedDate !== new Date(now).toDateString()) {
-          Object.assign(patch, { notice: 'finish', noticeAt: now });
-          if (state.sound) playChime();
-        }
+        Object.assign(patch, { status: 'done', remaining: 0, notice: 'finish', noticeAt: now });
         persist = true;
       } else if (state.status === 'running' && state.reminders && state.pausedDate !== new Date(now).toDateString() && state.nextReminder && now >= state.nextReminder) {
         Object.assign(patch, { notice: 'break', noticeAt: now, nextReminder: now + 20 * 60000 });
-        if (state.sound) playChime();
         persist = true;
       }
       update(patch, persist);
@@ -166,7 +267,7 @@ window.__ModuleLoader__.load({
       update({ now, status: 'running', remaining, deadline: now + remaining, nextReminder: now + (state.status === 'paused' ? (state.reminderRemaining ?? 20 * 60000) : 20 * 60000), notice: '' });
     }
     function pause() { const now = Date.now(); update({ now, remaining: remainingMs(state, now), reminderRemaining: Math.max(0, state.nextReminder - now), status: 'paused' }); }
-    function reset(minutes = state.minutes) { update({ minutes, status: 'ready', remaining: minutes * 60000, deadline: 0, nextReminder: 0, notice: '' }); }
+    function reset(minutes = state.minutes) { update({ minutes, status: 'ready', remaining: minutes * 60000, deadline: 0, nextReminder: 0, notice: '', previewAt: 0, previewUntil: 0 }); }
     function setReminders(enabled) {
       const now = Date.now();
       update({ reminders: enabled, pausedDate: '', nextReminder: now + 20 * 60000, reminderRemaining: 20 * 60000, notice: '' });
@@ -283,8 +384,8 @@ window.__ModuleLoader__.load({
       .llm-primary{flex:1;font-weight:700;background:color-mix(in srgb,var(--dsw-alias-brand-primary) 17%,var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-brand-primary)}
       .llm-photo{position:relative;display:block;width:196px;height:238px;overflow:hidden;border:2px solid var(--dsw-alias-border-l2);border-radius:26px;padding:0;cursor:pointer;pointer-events:auto;background:var(--dsw-alias-bg-layer-1);box-shadow:0 12px 40px color-mix(in srgb,var(--dsw-alias-label-primary) 20%,transparent)}
       .llm-photo img{width:100%;height:100%;object-fit:cover;object-position:73% 80%;filter:brightness(1.12);transition:transform .6s}
-      .llm-photo:hover img{transform:scale(1.06)}.llm-motion{animation:llm-bob 6s ease-in-out infinite}.llm-motion img{animation:llm-breathe 14s ease-in-out infinite alternate}
-      .llm-photo-caption{position:absolute;inset:12px 10px auto;padding:0;border:0;background:transparent;color:#fff;text-shadow:0 1px 4px #000,0 0 12px #000;text-align:left;pointer-events:none}.llm-photo-caption .llm-sub{color:inherit}.llm-status-line{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}.llm-next-inline{font-size:11px;font-variant-numeric:tabular-nums}.llm-photo-caption .llm-status-line{display:grid;grid-template-columns:1fr;gap:2px;margin-top:4px;text-align:left}.llm-photo-caption .llm-sub,.llm-photo-caption .llm-next-inline,.llm-weather-mini{max-width:100%;text-align:left;font:500 11px/1.45 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0}.llm-weather-mini{margin-top:4px}.llm-photo-name{font-size:12px}.llm-background-adjust{margin-top:14px;border-top:1px solid var(--dsw-alias-border-l1);padding-top:10px}.llm-background-adjust summary{cursor:pointer;font-weight:650}.llm-background-adjust label{display:grid;grid-template-columns:100px 1fr 45px;align-items:center;gap:8px;margin-top:12px}.llm-background-adjust input{width:100%;accent-color:var(--dsw-alias-brand-primary)}.llm-weather-panel{margin:12px 0;padding:10px;border:1px solid var(--dsw-alias-border-l1);border-radius:12px}.llm-weather-panel a{color:var(--dsw-alias-label-secondary)}
+      .llm-photo:hover img{transform:scale(1.06)}.llm-stack{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:7px}.llm-drift{animation:llm-drift 58s linear infinite alternate;will-change:transform}.llm-drift:hover,.llm-drift:has(:focus-visible),.llm-drift:has(.llm-card){animation-play-state:paused}
+      .llm-photo-caption{position:absolute;inset:12px 10px auto;padding:0;border:0;background:transparent;color:#fff;text-shadow:0 1px 4px #000,0 0 12px #000;text-align:left;pointer-events:none}.llm-photo-caption .llm-sub{color:inherit}.llm-status-line{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}.llm-next-inline{font-size:11px;font-variant-numeric:tabular-nums}.llm-photo-caption .llm-status-line{display:grid;grid-template-columns:1fr;gap:2px;margin-top:4px;text-align:left}.llm-photo-caption .llm-sub,.llm-photo-caption .llm-next-inline,.llm-weather-mini{max-width:100%;text-align:left;font:500 11px/1.45 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0}.llm-weather-mini{margin-top:4px}.llm-photo-name{font-size:12px}.llm-sliders{margin-top:12px;padding-top:10px;border-top:1px solid var(--dsw-alias-border-l1)}.llm-sliders label{display:grid;grid-template-columns:96px 1fr 42px;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--dsw-alias-label-secondary)}.llm-sliders input{width:100%;accent-color:var(--dsw-alias-brand-primary)}.llm-sliders output{text-align:right;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-primary)}.llm-weather-panel{margin:12px 0;padding:10px;border:1px solid var(--dsw-alias-border-l1);border-radius:12px}.llm-weather-panel a{color:var(--dsw-alias-label-secondary)}
       .llm-photo-name{display:flex;justify-content:space-between;align-items:center;font-weight:750}.llm-mini-clock{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:4px}
       .llm-focus{padding:18px 14px;border:1px solid var(--dsw-alias-border-l1);border-radius:20px;background:var(--dsw-alias-bg-layer-2);text-align:center}
       .llm-label{color:var(--dsw-alias-label-secondary);font-size:12px}.llm-clock{font-size:64px;font-weight:800;letter-spacing:-3px;line-height:1.18;font-variant-numeric:tabular-nums;margin:7px 0;color:var(--dsw-alias-brand-primary)}
@@ -294,12 +395,47 @@ window.__ModuleLoader__.load({
       .llm-section{margin:18px 0 8px;font-weight:700}.llm-row{padding:8px 0;border-top:1px solid var(--dsw-alias-border-l1)}.llm-row-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}.llm-dot{height:8px;width:8px;flex:none;border-radius:50%;background:var(--dsw-alias-state-idle-primary)}.llm-live{background:var(--dsw-alias-state-success-primary)}
       .llm-notice{margin-top:12px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--dsw-alias-state-warn-primary) 18%,var(--dsw-alias-bg-layer-2))}.llm-controls{margin-top:10px;flex-wrap:wrap}
       .llm-settings{flex-wrap:wrap;margin-top:12px}.llm-settings label{display:flex;align-items:center;gap:8px}.llm-settings input[type=range]{width:110px;accent-color:var(--dsw-alias-brand-primary)}
-      .llm-float-widget{width:184px;pointer-events:auto}.llm-photo-stage{position:relative}.llm-photo-clean{width:184px;height:166px;border-radius:22px;border-width:1px}.llm-photo-clean img{object-position:73% 90%}.llm-photo-brand{position:absolute;top:10px;left:12px;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 5px #000}.llm-minimize{position:absolute;right:7px;top:7px;width:30px;height:30px;padding:0;border:1px solid var(--dsw-alias-border-l1);border-radius:50%;background:color-mix(in srgb,var(--dsw-alias-bg-overlay) 70%,transparent);color:var(--dsw-alias-label-primary);cursor:pointer;font-size:18px!important}.llm-float-info{padding:8px 2px 0;text-align:left;background:transparent;text-shadow:0 1px 3px var(--dsw-alias-bg-base),0 0 8px var(--dsw-alias-bg-base)}.llm-float-clock-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.llm-float-clock{font-size:28px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.7px}.llm-quick{width:32px;height:32px;border-radius:50%;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);cursor:pointer}.llm-float-status,.llm-float-reminder,.llm-float-weather{font-size:11px;font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.llm-float-weather{color:var(--dsw-alias-label-secondary)}.llm-float-notice{display:block;margin-top:5px;padding:5px 0;background:transparent;border:0;color:var(--dsw-alias-state-warn-primary);font-size:11px;cursor:pointer;text-align:left}.llm-bubble{position:relative;width:68px;height:68px;border-radius:50%;border:0;padding:4px;background:conic-gradient(var(--dsw-alias-brand-primary) var(--llm-progress),var(--dsw-alias-border-l2) 0);cursor:pointer;pointer-events:auto}.llm-bubble img{width:60px;height:60px;object-fit:cover;object-position:73% 85%;border-radius:50%;display:block}.llm-bubble-time{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border-radius:10px;padding:1px 6px;background:var(--dsw-alias-bg-overlay);color:var(--dsw-alias-label-primary);font-size:11px;font-variant-numeric:tabular-nums;border:1px solid var(--dsw-alias-border-l1)}.llm-bubble-notice{position:absolute;right:0;top:0;border-radius:50%;padding:0 6px;background:var(--dsw-alias-state-warn-primary);color:var(--dsw-alias-bg-base)}.llm-root button:focus-visible{outline:3px solid var(--dsw-alias-brand-primary);outline-offset:3px}.llm-photo-stage:hover,.llm-photo-stage:focus-within{animation-play-state:paused}
-      .llm-floating{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.llm-radar-trigger{pointer-events:auto;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 9px;border:1px solid var(--dsw-alias-border-l1);border-radius:12px;background:var(--dsw-alias-bg-overlay);color:var(--dsw-alias-label-primary);cursor:pointer;font-size:11px!important}.llm-radar-badge{position:absolute;right:-5px;top:-9px;z-index:2;min-width:27px;max-width:48px;min-height:27px;border-radius:999px;font-weight:700!important}.llm-radar-panel{position:absolute;right:0;bottom:calc(100% + 10px);width:min(320px,calc(100vw - 32px));max-height:min(440px,calc(100dvh - 130px));overflow:auto;padding:14px;border:1px solid var(--dsw-alias-border-l2);border-radius:18px;background:var(--dsw-alias-bg-overlay);color:var(--dsw-alias-label-primary);pointer-events:auto;box-shadow:0 12px 40px color-mix(in srgb,var(--dsw-alias-label-primary) 15%,transparent)}.llm-radar-group{margin:10px 0}.llm-radar-label{font-size:12px;font-weight:650;margin-bottom:5px}.llm-radar-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 7px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--dsw-alias-border-l1);border-radius:6px;color:var(--dsw-alias-label-primary);cursor:pointer}.llm-radar-row:hover{background:var(--dsw-alias-bg-layer-2)}.llm-radar-row-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.llm-floating:has(>.llm-card) .llm-radar-panel{bottom:auto;top:0;right:calc(100% + 10px)}@media(max-width:760px){.llm-floating:has(>.llm-card) .llm-radar-panel{position:fixed;top:64px;right:12px;bottom:auto;z-index:5;max-height:calc(100dvh - 100px)}}
+      .llm-float-widget{width:184px;pointer-events:auto}.llm-photo-stage{position:relative}.llm-photo-clean{width:184px;height:166px;border-radius:22px;border-width:1px}.llm-photo-clean img{object-position:73% 90%}.llm-photo-brand{position:absolute;top:10px;left:12px;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 5px #000}.llm-minimize{position:absolute;right:7px;top:7px;width:30px;height:30px;padding:0;border:1px solid var(--dsw-alias-border-l1);border-radius:50%;background:color-mix(in srgb,var(--dsw-alias-bg-overlay) 70%,transparent);color:var(--dsw-alias-label-primary);cursor:pointer;font-size:18px!important}.llm-float-info{padding:8px 2px 0;text-align:left;background:transparent;text-shadow:0 1px 3px var(--dsw-alias-bg-base),0 0 8px var(--dsw-alias-bg-base)}.llm-float-clock-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.llm-float-clock{font-size:28px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.7px}.llm-quick{width:32px;height:32px;border-radius:50%;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);cursor:pointer}.llm-float-status,.llm-float-reminder,.llm-float-weather{font-size:11px;font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.llm-float-weather{color:var(--dsw-alias-label-secondary)}.llm-float-notice{display:block;margin-top:5px;padding:5px 0;background:transparent;border:0;color:var(--dsw-alias-state-warn-primary);font-size:11px;cursor:pointer;text-align:left}.llm-bubble{position:relative;width:68px;height:68px;border-radius:50%;border:0;padding:4px;background:conic-gradient(var(--dsw-alias-brand-primary) var(--llm-progress),var(--dsw-alias-border-l2) 0);cursor:pointer;pointer-events:auto}.llm-bubble img{width:60px;height:60px;object-fit:cover;object-position:73% 85%;border-radius:50%;display:block}.llm-bubble-time{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border-radius:10px;padding:1px 6px;background:var(--dsw-alias-bg-overlay);color:var(--dsw-alias-label-primary);font-size:11px;font-variant-numeric:tabular-nums;border:1px solid var(--dsw-alias-border-l1)}.llm-bubble-notice{position:absolute;right:0;top:0;border-radius:50%;padding:0 6px;background:var(--dsw-alias-state-warn-primary);color:var(--dsw-alias-bg-base)}.llm-root button:focus-visible{outline:3px solid var(--dsw-alias-brand-primary);outline-offset:3px}.llm-bubble:hover,.llm-bubble:focus-visible{animation-play-state:paused}
       .llm-reminder-button{display:block;width:100%;padding:0;background:transparent;border:0;color:inherit;cursor:pointer;text-align:left}.llm-alert-highlight{color:var(--dsw-alias-label-primary)!important;background:color-mix(in srgb,var(--dsw-alias-state-warn-primary) 24%,var(--dsw-alias-bg-layer-1));border-left:3px solid var(--dsw-alias-state-warn-primary);border-radius:6px;padding:6px 8px!important;font-weight:700!important;white-space:normal!important;text-shadow:none}.llm-alert-actions{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}.llm-alert-actions .llm-btn{font-size:10px;padding:4px 6px}.llm-alert-shake{animation:llm-nudge .75s ease-in-out 2;transform-origin:center bottom}@keyframes llm-nudge{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-2deg)}40%{transform:translateX(4px) rotate(2deg)}60%{transform:translateX(-3px) rotate(-1deg)}80%{transform:translateX(2px) rotate(1deg)}}@media(prefers-reduced-motion:reduce){.llm-alert-shake{animation:none}}
-      .llm-radar-attention{border-color:var(--dsw-alias-state-warn-primary)!important;background:color-mix(in srgb,var(--dsw-alias-state-warn-primary) 22%,var(--dsw-alias-bg-overlay))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-state-warn-primary) 18%,transparent)}.llm-radar-kind{display:block;color:var(--dsw-alias-state-warn-primary);font-size:11px;font-weight:600;margin-top:2px}
-      @keyframes llm-bob{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-7px) rotate(.5deg)}}@keyframes llm-breathe{from{transform:scale(1)}to{transform:scale(1.07)}}
-      @media(prefers-reduced-motion:reduce){.llm-motion,.llm-motion img{animation:none}.llm-photo img{transition:none}}
+.llm-radar-trigger{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;max-width:240px;padding:4px 10px;border:1px solid var(--dsw-alias-border-l1);border-radius:999px;background:color-mix(in srgb,var(--dsw-alias-bg-overlay) 88%,transparent);color:var(--dsw-alias-label-secondary);cursor:pointer;font-size:11px!important;line-height:1.4;transition:border-color .15s,color .15s}
+.llm-radar-trigger:hover{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary)}
+.llm-radar-trigger .llm-radar-sum{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.llm-radar-live{width:6px;height:6px;border-radius:50%;flex:none;background:var(--dsw-alias-state-idle-primary)}
+.llm-radar-live.on{background:var(--dsw-alias-state-success-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-state-success-primary) 22%,transparent)}
+
+.llm-radar-badge{position:absolute;right:-5px;top:-9px;z-index:2;min-width:26px;max-width:48px;min-height:26px;border-radius:999px;font-weight:700!important;justify-content:center;padding:0 6px}
+.llm-radar-attention{border-color:var(--dsw-alias-state-warn-primary)!important;color:var(--dsw-alias-label-primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-state-warn-primary) 16%,transparent)}
+.llm-radar-panel{position:absolute;right:0;z-index:30;width:min(340px,calc(100vw - 32px));max-height:min(64vh,520px);overflow:auto;padding:10px;border:1px solid var(--dsw-alias-border-l2);border-radius:16px;background:var(--dsw-alias-bg-overlay);color:var(--dsw-alias-label-primary);pointer-events:auto;box-shadow:0 16px 44px color-mix(in srgb,var(--dsw-alias-label-primary) 18%,transparent)}
+.llm-radar-head{display:flex;align-items:center;gap:8px;padding:2px 4px 8px}
+.llm-radar-title{font-size:12.5px;font-weight:700}
+.llm-radar-sum{font-size:11px;color:var(--dsw-alias-label-secondary)}
+.llm-radar-close{margin-left:auto;width:24px;height:24px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--dsw-alias-label-secondary);cursor:pointer;font-size:15px!important;line-height:1}
+.llm-radar-close:hover{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary)}
+.llm-radar-group{margin-top:6px}
+.llm-radar-label{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 4px;font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--dsw-alias-label-secondary)}
+.llm-radar-count{min-width:16px;padding:0 5px;border-radius:999px;background:var(--dsw-alias-bg-layer-2);text-align:center;font-variant-numeric:tabular-nums}
+.llm-radar-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:8px;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left;cursor:pointer}
+.llm-radar-row:hover{background:var(--dsw-alias-bg-layer-2)}
+.llm-radar-row:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
+.llm-radar-dot{width:8px;height:8px;border-radius:50%;background:var(--dsw-alias-state-idle-primary)}
+.llm-radar-dot.run{background:var(--dsw-alias-state-success-primary)}
+.llm-radar-dot.wait{background:var(--dsw-alias-state-warn-primary)}
+.llm-radar-body{min-width:0}
+.llm-radar-name{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.llm-radar-meta{display:block;margin-top:1px;font-size:11px;color:var(--dsw-alias-label-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.llm-radar-toggle{display:flex;align-items:center;gap:4px;margin:2px 0 4px 17px;padding:2px 4px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary);font-size:10.5px!important;cursor:pointer}
+.llm-radar-toggle:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2)}
+.llm-radar-caret{font-size:9px;opacity:.8}
+.llm-radar-children{margin:0 0 4px 16px;padding-left:6px;border-left:1px solid var(--dsw-alias-border-l1)}
+.llm-radar-row.is-child{padding:6px}
+.llm-radar-row.is-child .llm-radar-name{font-weight:500;font-size:12px}
+.llm-radar-go{color:var(--dsw-alias-label-secondary);font-size:15px;opacity:.6}
+.llm-radar-empty{padding:18px 8px;text-align:center;font-size:11.5px;color:var(--dsw-alias-label-secondary)}
+
+.llm-radar-panel[data-placement='above']{bottom:calc(100% + 8px)}
+.llm-radar-panel[data-placement='below']{top:calc(100% + 8px)}.llm-radar-attention{border-color:var(--dsw-alias-state-warn-primary)!important;background:color-mix(in srgb,var(--dsw-alias-state-warn-primary) 22%,var(--dsw-alias-bg-overlay))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-state-warn-primary) 18%,transparent)}.llm-radar-count{margin-left:6px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary)}.llm-radar-kind{display:block;color:var(--dsw-alias-state-warn-primary);font-size:11px;font-weight:600;margin-top:2px}
+      @keyframes llm-drift{from{transform:translateY(0)}to{transform:translateY(var(--llm-drift-px, 0px))}}
+      @media(prefers-reduced-motion:reduce){.llm-drift{animation:none}.llm-photo img{transition:none}}
       @media(max-width:600px){.llm-floating{right:12px;bottom:12px}.llm-photo{width:168px;height:212px}.llm-float-widget{width:168px}.llm-photo-clean{width:168px;height:150px}.llm-card{width:min(370px,calc(100vw - 24px));max-height:calc(100dvh - 48px)}.llm-panel{padding:64px 12px 12px}.llm-clock{font-size:54px}}
     `;
     function Companion({ useSessions, useSessionStatus, panelMode = false }) {
@@ -309,7 +445,11 @@ window.__ModuleLoader__.load({
       const [radarOpen, setRadarOpen] = React.useState(false);
       const [showAll, setShowAll] = React.useState(false);
       const [navigationError, setNavigationError] = React.useState('');
+      const [radarPlacement, setRadarPlacement] = React.useState(null);
+      const [expandedParents, setExpandedParents] = React.useState({});
       const radarTrigger = React.useRef(null);
+      const stackRef = React.useRef(null);
+      const [driftPx, setDriftPx] = React.useState(0);
       const radarPanel = React.useRef(null);
       const radarId = React.useId();
       React.useEffect(() => {
@@ -321,14 +461,14 @@ window.__ModuleLoader__.load({
       const [radarAttentionAt, setRadarAttentionAt] = React.useState(0);
       React.useEffect(() => {
         if (catalog.phase !== 'ready') { previousAttention.current = null; return; }
-        const current = attentionSnapshot(catalog, statuses);
+        const current = attentionTokens(groups);
         const now = Date.now();
         if (!panelMode && newAttention(previousAttention.current, current) && now - lastNudge.current >= 8000) {
           lastNudge.current = now;
           setRadarAttentionAt(now);
         }
         previousAttention.current = current;
-      }, [catalog, statuses, panelMode]);
+      }, [groups, catalog.phase, panelMode]);
       const radarHighlight = radarAttentionAt > 0 && model.now - radarAttentionAt < 12000;
       const radarShake = radarHighlight && model.now - radarAttentionAt < 1800;
       const [open, setOpen] = React.useState(false);
@@ -347,29 +487,98 @@ window.__ModuleLoader__.load({
       const statusKey = model.status === 'running' ? 'running' : model.status === 'paused' ? 'paused' : model.status === 'done' ? 'done' : 'ready';
       const button = (label, onClick, extra = {}) => h('button', { type: 'button', className: 'llm-btn', onClick, ...extra }, label);
       const radarCount = groups.running.length + groups.unread.length + groups.waiting.length;
-      const radarSummary = `${groups.waiting.length} ${t('radarWaiting')} · ${groups.running.length} ${t('radarRunning')} · ${groups.unread.length} ${t('radarUnread')}`;
+      const radarSummary = [
+        groups.waiting.length && `${groups.waiting.length} ${t('radarWaiting')}`,
+        groups.running.length && `${groups.running.length} ${t('radarRunning')}`,
+        groups.unread.length && `${groups.unread.length} ${t('radarUnread')}`,
+      ].filter(Boolean).join(' · ') || t('radarQuiet');
       const closeRadar = () => { setRadarOpen(false); radarTrigger.current?.focus(); };
       const navigate = (row) => {
-        try { workspace.openSession(row.id); setRadarOpen(false); setOpen(false); setNavigationError(''); }
+        try { workspace.openSession(row.child && row.parentId ? row.parentId : row.id); setRadarOpen(false); setOpen(false); setNavigationError(''); }
         catch { setNavigationError(t('openFailed')); }
       };
-      const renderGroup = (label, rows) => h('div', { className: 'llm-radar-group' },
-        h('div', { className: 'llm-radar-label' }, `${label} · ${rows.length}`),
-        rows.slice(0, showAll ? rows.length : 3).map((row) => button(
-          h(React.Fragment, null, h('span', { className: 'llm-radar-row-title' }, row.displayTitle || row.id, row.attentionKind && h('small', { className: 'llm-radar-kind' }, t(row.attentionKind))), h('span', { 'aria-hidden': true }, '↗')),
-          () => navigate(row), { key: row.id, className: 'llm-radar-row', title: `${row.displayTitle || row.id}${row.cwd ? '\n' + row.cwd : ''}` })));
-      return h('div', { className: `llm-root ${panelMode ? 'llm-panel' : 'llm-floating'}`, onPointerDownCapture: () => { if (model.sound) ensureAudio(); } },
+      const rowMeta = (row) => {
+        const running = row.runningNow || (row.children ?? []).some((child) => child.runningNow);
+        const state = row.attentionKind ? t(row.attentionKind) : t(running ? 'radarRunning' : 'radarUnread');
+        const when = relativeTime(row.updatedAt, model.now);
+        return [state, row.child ? t('radarChild') : '', when].filter(Boolean).join(' · ');
+      };
+      const rowTone = (row) => row.attentionKind ? 'wait' : row.runningNow ? 'run' : '';
+      const renderRow = (row, { nested = false } = {}) => h('button', {
+        key: (nested ? 'child-' : '') + row.id,
+        type: 'button',
+        className: 'llm-radar-row' + (nested ? ' is-child' : ''),
+        title: row.cwd || row.id,
+        onClick: () => navigate(row),
+      },
+        h('span', { className: 'llm-radar-dot' + (rowTone(row) ? ' ' + rowTone(row) : ''), 'aria-hidden': true }),
+        h('span', { className: 'llm-radar-body' },
+          h('span', { className: 'llm-radar-name' }, row.displayTitle || row.id),
+          h('span', { className: 'llm-radar-meta' }, rowMeta(row))),
+        h('span', { className: 'llm-radar-go', 'aria-hidden': true }, '\u203a'));
+      const renderEntry = (row) => {
+        const children = row.children ?? [];
+        const open = expandedParents[row.id] === true;
+        return h(React.Fragment, { key: row.id },
+          renderRow(row),
+          children.length > 0 && h('button', {
+            type: 'button',
+            className: 'llm-radar-toggle',
+            'aria-expanded': open,
+            onClick: () => setExpandedParents((previous) => ({ ...previous, [row.id]: !open })),
+          }, h('span', { className: 'llm-radar-caret', 'aria-hidden': true }, open ? '\u25be' : '\u25b8'), `${children.length} ${t('radarChild')}`),
+          open && h('div', { className: 'llm-radar-children' }, children.map((child) => renderRow(child, { nested: true }))));
+      };
+      const renderGroup = (label, rows) => rows.length === 0 ? null : h('div', { className: 'llm-radar-group' },
+        h('div', { className: 'llm-radar-label' }, label, h('span', { className: 'llm-radar-count' }, rows.length)),
+        rows.slice(0, showAll ? rows.length : 3).map(renderEntry));
+      const drifting = model.drift && !panelMode;
+      React.useEffect(() => {
+        if (!drifting) { setDriftPx(0); return undefined; }
+        const measure = () => {
+          if (expanded) return;
+          const height = stackRef.current?.getBoundingClientRect().height ?? 0;
+          const travel = Math.round(height + 136 - window.innerHeight);
+          setDriftPx(Math.min(0, travel));
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        return () => window.removeEventListener('resize', measure);
+      }, [drifting, expanded, model.minimized]);
+      return h('div', { className: `llm-root ${panelMode ? 'llm-panel' : 'llm-floating'}`, onPointerDownCapture: () => { if (model.sound) { ensureAudio(); syncScheduledChimes(); } } },
         h('style', null, css),
         model.bgOn && h('div', { className: 'llm-bg' + (model.readingProtection && !panelMode ? ' llm-bg-protected' : ''), style: { backgroundImage: `url("${asset(currentScene.name)}")`, opacity: model.intensity / 100, filter: `brightness(${model.brightness / 100}) saturate(1.12)` } }),
-        !panelMode && h('button', { type: 'button', ref: radarTrigger, className: 'llm-radar-trigger' + (radarHighlight ? ' llm-radar-attention' : '') + (radarShake ? ' llm-alert-shake' : '') + (model.minimized && !expanded ? ' llm-radar-badge' : ''), onClick: () => { setRadarOpen(!radarOpen); setRadarAttentionAt(0); }, 'aria-expanded': radarOpen, 'aria-controls': radarId, 'aria-label': `${t('radar')} · ${radarSummary}`, title: radarSummary + (radarHighlight ? ' · ' + t('radarSoftHint') : '') }, model.minimized && !expanded ? (radarCount > 99 ? '99+' : radarCount || '☷') : `☷ ${radarSummary}`),
-        !panelMode && radarOpen && h('section', { ref: radarPanel, id: radarId, className: 'llm-radar-panel', 'aria-label': t('radar'), onKeyDown: (event) => { if (event.key === 'Escape') { event.stopPropagation(); closeRadar(); } }, onBlur: (event) => { if (!event.currentTarget.contains(event.relatedTarget) && event.relatedTarget !== radarTrigger.current) setRadarOpen(false); } },
-          h('header', { className: 'llm-head' }, h('strong', null, t('radar')), button(t('close'), closeRadar, { className: 'llm-btn llm-actions' })),
+
+        h('div', { ref: stackRef, className: 'llm-stack' + (drifting ? ' llm-drift' : ''), style: drifting ? { '--llm-drift-px': `${driftPx}px` } : undefined },
+        !panelMode && h('button', { type: 'button', ref: radarTrigger, className: 'llm-radar-trigger' + (radarHighlight ? ' llm-radar-attention' : '') + (radarShake ? ' llm-alert-shake' : '') + (model.minimized && !expanded ? ' llm-radar-badge' : ''), onClick: () => {
+            const next = !radarOpen;
+            if (next && radarTrigger.current) {
+              const rect = radarTrigger.current.getBoundingClientRect();
+              const spaceAbove = rect.top - 24;
+              const spaceBelow = window.innerHeight - rect.bottom - 24;
+              if (spaceAbove >= 240 || spaceAbove >= spaceBelow) setRadarPlacement({ side: 'above', maxHeight: Math.max(180, Math.min(440, spaceAbove)) });
+              else setRadarPlacement({ side: 'below', maxHeight: Math.max(180, Math.min(440, spaceBelow)) });
+            }
+            setRadarOpen(next);
+            setRadarAttentionAt(0);
+          }, 'aria-expanded': radarOpen, 'aria-controls': radarId, 'aria-label': `${t('radar')} · ${radarSummary}`, title: radarSummary + (radarHighlight ? ' · ' + t('radarSoftHint') : '') },
+          model.minimized && !expanded
+            ? (radarCount > 99 ? '99+' : radarCount || '')
+            : h(React.Fragment, null,
+                h('span', { className: 'llm-radar-live' + (groups.running.length ? ' on' : ''), 'aria-hidden': true }),
+                h('span', { className: 'llm-radar-sum' }, radarSummary))),
+        !panelMode && radarOpen && h('section', { ref: radarPanel, id: radarId, className: 'llm-radar-panel', 'data-placement': radarPlacement?.side || 'above', style: radarPlacement ? { maxHeight: radarPlacement.maxHeight } : undefined, 'aria-label': t('radar'), onKeyDown: (event) => { if (event.key === 'Escape') { event.stopPropagation(); closeRadar(); } }, onBlur: (event) => { if (!event.currentTarget.contains(event.relatedTarget) && event.relatedTarget !== radarTrigger.current) setRadarOpen(false); } },
+          h('div', { className: 'llm-radar-head' },
+            h('strong', { className: 'llm-radar-title' }, t('radar')),
+            h('span', { className: 'llm-radar-sum' }, radarSummary),
+            h('button', { type: 'button', className: 'llm-radar-close', onClick: closeRadar, 'aria-label': t('close') }, '\u00d7')),
           groups.waiting.length > 0 && renderGroup(t('radarWaiting'), groups.waiting),
           groups.running.length > 0 && renderGroup(t('radarRunning'), groups.running),
           groups.unread.length > 0 && renderGroup(t('radarUnread'), groups.unread),
-          !radarCount && h('div', { className: 'llm-sub' }, t(catalog.phase === 'ready' ? 'radarEmpty' : 'connecting')),
+          !radarCount && h('div', { className: 'llm-radar-empty' }, t(catalog.phase === 'ready' ? 'radarEmpty' : 'connecting')),
           (groups.running.length > 3 || groups.unread.length > 3 || groups.waiting.length > 3) && button(t(showAll ? 'showLess' : 'showAll'), () => setShowAll(!showAll)),
-          navigationError && h('div', { role: 'status', className: 'llm-sub' }, navigationError), h('div', { className: 'llm-summary' }, t('radarHint'))),
+          navigationError && h('div', { role: 'status', className: 'llm-sub' }, navigationError)),
+
         !expanded ? model.minimized ? h('button', {
           type: 'button', className: 'llm-bubble' + (alertShake || radarShake ? ' llm-alert-shake' : ''), key: `bubble-${Math.max(attentionAt, radarAttentionAt)}`, onClick: () => update({ minimized: false }),
           'aria-label': `${t('restore')} · ${formatTime(remaining)} · ${model.notice ? t(model.notice) : t(statusKey)}`,
@@ -378,7 +587,7 @@ window.__ModuleLoader__.load({
           h('span', { className: 'llm-bubble-time' }, formatTime(remaining)),
           alertActive && h('span', { className: 'llm-bubble-notice', 'aria-hidden': true }, '!'))
         : h('div', { className: 'llm-float-widget' + (alertShake || radarShake ? ' llm-alert-shake' : ''), key: `widget-${Math.max(attentionAt, radarAttentionAt)}` },
-          h('div', { className: 'llm-photo-stage' + (model.motion ? ' llm-motion' : '') },
+          h('div', { className: 'llm-photo-stage' },
             h('button', { type: 'button', className: 'llm-photo llm-photo-clean', onClick: () => setOpen(true), 'aria-label': t('view'), 'aria-expanded': false },
               h('img', { src: asset(currentScene.name), alt: t('title') }),
               h('span', { className: 'llm-photo-brand' }, t('title'))),
@@ -401,29 +610,36 @@ window.__ModuleLoader__.load({
             h('div', { className: 'llm-sub', style: { marginTop: 10 } }, `${t('elapsed')} · ${formatTime(total - remaining)}`)),
           h('details', { className: 'llm-disclosure' }, h('summary', null, `${t('reminderSettings')} · ${t(model.reminders && !todayPaused ? 'on' : 'off')}`),
             h('div', { className: 'llm-settings' }, button(t(model.reminders && !todayPaused ? 'on' : 'off'), () => setReminders(!model.reminders || todayPaused), { role: 'switch', 'aria-checked': model.reminders && !todayPaused })),
-            h('div', { className: 'llm-settings' }, button(t(model.sound ? 'soundOn' : 'soundOff'), () => { update({ sound: !model.sound }); if (!model.sound) ensureAudio(); }, { role: 'switch', 'aria-checked': model.sound })),
+            h('div', { className: 'llm-settings' }, button(t(model.sound ? 'soundOn' : 'soundOff'), () => { const next = !model.sound; update({ sound: next }); if (next) playChime(); }, { role: 'switch', 'aria-checked': model.sound })),
             h('div', { className: 'llm-summary' }, t('reminderEvery')),
-            button(t('testReminder'), () => { const now = Date.now(); update({ now, previewAt: now, previewUntil: now + 8000 }, false); setOpen(false); if (panelMode) layout.selectPanel(null); }),
+            button(t('testBackground'), () => { startAudioKeepAlive(); scheduleChimeIn(10000); }),
+            button(t('testReminder'), () => { const now = Date.now(); update({ now, previewAt: now, previewUntil: now + 8000 }, false); if (state.sound) playChime(); setOpen(false); if (panelMode) layout.selectPanel(null); }),
             h('div', { className: 'llm-summary' }, reminderLabel(model))),
           model.notice && h('div', { className: 'llm-notice', role: 'status' }, t(model.notice), h('div', { className: 'llm-controls' }, button(t('got'), () => update({ notice: '' })), model.status === 'running' && button(t('snooze'), () => update({ notice: '', nextReminder: Date.now() + 10 * 60000 })), button(t('today'), () => update({ notice: '', pausedDate: new Date().toDateString() })))),
           h('details', { className: 'llm-disclosure' }, h('summary', null, `${t('radar')} · ${radarSummary}`),
-            renderGroup(t('radarWaiting'), groups.waiting), renderGroup(t('radarRunning'), groups.running), renderGroup(t('radarUnread'), groups.unread),
+            groups.waiting.length > 0 || groups.running.length > 0 || groups.unread.length > 0
+              ? h(React.Fragment, null, renderGroup(t('radarWaiting'), groups.waiting), renderGroup(t('radarRunning'), groups.running), renderGroup(t('radarUnread'), groups.unread))
+              : h('div', { className: 'llm-sub' }, t(catalog.phase === 'ready' ? 'radarEmpty' : 'connecting')),
             !radarCount && h('div', { className: 'llm-sub' }, t('radarEmpty')),
             (groups.running.length > 3 || groups.unread.length > 3 || groups.waiting.length > 3) && button(t(showAll ? 'showLess' : 'showAll'), () => setShowAll(!showAll)),
             navigationError && h('div', { role: 'status' }, navigationError)), 
-          h('details', { className: 'llm-disclosure' }, h('summary', null, t('appearance')),
-          h('div', { className: 'llm-settings' }, scenes.map((scene, index) => button(t(scene.key), () => update({ scene: index }), { key: scene.key, 'aria-pressed': model.scene === index }))),
-          h('div', { className: 'llm-settings' }, button(`${t('background')} · ${t(model.bgOn ? 'on' : 'off')}`, () => update({ bgOn: !model.bgOn }), { role: 'switch', 'aria-checked': model.bgOn }), button(`${t('motion')} · ${t(model.motion ? 'on' : 'off')}`, () => update({ motion: !model.motion }), { role: 'switch', 'aria-checked': model.motion })),
-          h('details', { className: 'llm-background-adjust' }, h('summary', null, t('backgroundAdjust')),
-            h('label', null, t('brightness'), h('input', { type: 'range', min: 70, max: 180, value: model.brightness, onChange: (event) => update({ brightness: Number(event.target.value) }) }), h('output', null, `${model.brightness}%`)),
-            h('label', null, t('intensity'), h('input', { type: 'range', min: 15, max: 75, value: model.intensity, onChange: (event) => update({ intensity: Number(event.target.value) }) }), h('output', null, `${model.intensity}%`))),
-            h('div', { className: 'llm-settings' }, button(t(model.readingProtection ? 'workMode' : 'scenicMode'), () => update({ readingProtection: !model.readingProtection }), { role: 'switch', 'aria-checked': model.readingProtection, 'aria-label': t('readingMode') }))),
+          h('details', { className: 'llm-disclosure' },
+            h('summary', null, t('appearance')),
+            h('div', { className: 'llm-settings' }, scenes.map((scene, index) => button(t(scene.key), () => update({ scene: index }), { key: scene.key, 'aria-pressed': model.scene === index }))),
+            h('div', { className: 'llm-settings' }, button(`${t('background')} · ${t(model.bgOn ? 'on' : 'off')}`, () => update({ bgOn: !model.bgOn }), { role: 'switch', 'aria-checked': model.bgOn })),
+            model.bgOn && h('div', { className: 'llm-sliders' },
+              h('div', { className: 'llm-sub' }, t('backgroundAdjust')),
+              h('label', null, t('brightness'), h('input', { type: 'range', min: 70, max: 180, value: model.brightness, onChange: (event) => update({ brightness: Number(event.target.value) }) }), h('output', null, `${model.brightness}%`)),
+              h('label', null, t('intensity'), h('input', { type: 'range', min: 15, max: 75, value: model.intensity, onChange: (event) => update({ intensity: Number(event.target.value) }) }), h('output', null, `${model.intensity}%`))),
+            h('div', { className: 'llm-settings' }, button(t(model.readingProtection ? 'workMode' : 'scenicMode'), () => update({ readingProtection: !model.readingProtection }), { role: 'switch', 'aria-checked': model.readingProtection, 'aria-label': t('readingMode') })),
+            h('div', { className: 'llm-settings' }, button(`${t('drift')} · ${t(model.drift ? 'on' : 'off')}`, () => update({ drift: !model.drift }), { role: 'switch', 'aria-checked': model.drift })),
+          ),
           h('details', { className: 'llm-disclosure' }, h('summary', null, weatherText(model)),
             h('div', { className: 'llm-summary' }, `${t('stale')}: ${model.weather?.time?.replace('T', ' ') || '—'}`),
             h('div', { className: 'llm-controls' }, button(t('nanjing'), () => useNanjing()), button(t(model.locating ? 'locating' : 'locate'), locateWeather, { disabled: model.locating }), button(t('refresh'), () => void loadWeather())),
             model.locationError && h('div', { className: 'llm-sub', role: 'status' }, t('locationError')),
             h('div', { className: 'llm-sub' }, t('privacy')),
-            h('a', { href: 'https://open-meteo.com/', target: '_blank', rel: 'noopener noreferrer', className: 'llm-sub' }, 'Weather: Open-Meteo · CC BY 4.0'))));
+            h('a', { href: 'https://open-meteo.com/', target: '_blank', rel: 'noopener noreferrer', className: 'llm-sub' }, 'Weather: Open-Meteo · CC BY 4.0')))));
     }
     function Icon({ size = 24 }) { return h('img', { src: asset(scenes[0].name), alt: '', width: size, height: size, style: { display: 'block', borderRadius: '50%', objectFit: 'cover', objectPosition: '73% 80%' } }); }
     return {
@@ -433,6 +649,8 @@ window.__ModuleLoader__.load({
         workspace = ctx.uiWorkspace;
         translate = ctx.locale.bind(ID);
         state = initialState(storage.read());
+        // Arm the audio schedule for a restored running session (the first gesture resumes it).
+        try { syncScheduledChimes(); } catch { /* audio may still be locked until a gesture */ }
         ctx.effect(() => ctx.locale.register(ID, 'zh', zh), 'lumululu-mei Chinese');
         ctx.effect(() => ctx.locale.register(ID, 'en', en), 'lumululu-mei English');
         ctx.effect(() => {
@@ -442,6 +660,11 @@ window.__ModuleLoader__.load({
           return () => { weatherActive = false; locationGeneration++; weatherController?.abort(); stop(); };
         }, 'lumululu-mei weather');
         ctx.effect(() => { tick(); return ctx.timer.interval(() => tick(), 1000); }, 'lumululu-mei focus clock');
+        ctx.effect(() => {
+          const onVisible = () => { if (document.visibilityState === 'visible') syncScheduledChimes(); };
+          document.addEventListener('visibilitychange', onVisible);
+          return () => document.removeEventListener('visibilitychange', onVisible);
+        }, 'momolulu chime resync');
         ctx.effect(() => {
           const control = createFullscreenControl({
             active: () => document.fullscreenElement === document.documentElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "momolulu",
-  "version": "1.1.1",
+  "version": "1.2.2",
   "type": "module",
   "description": "momolulu, a gentle coding companion with scenic backgrounds, live session activity, focus timing and wellbeing nudges.",
   "exports": {