momolulu 1.2.0 → 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,8 +12,8 @@ window.__ModuleLoader__.load({
     ];
     const zh = {
       title: 'momolulu', subtitle: '慢慢来，我陪你一起。', meadow: '草甸', hike: '徒步', lake: '湖畔',
-      radarWaiting: '等待处理', radarApproval: '请求权限', radarQuestion: '等待输入', radarSoftHint: '有其他会话可查看，无需确认或立即处理。', radar: '会话雷达', radarRunning: '运行中', radarUnread: '待查看', radarQuiet: '暂无变化', 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: '距离下次休息',
@@ -28,8 +28,8 @@ 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: 'Unread', radarQuiet: 'No updates', radarEmpty: 'No session changes', 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',
@@ -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. */ } },
@@ -108,9 +153,11 @@ window.__ModuleLoader__.load({
     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,44 +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 buildChime(audio, base) {
+      const nodes = [];
+      [660, 880].forEach((frequency, index) => {
+        const oscillator = audio.createOscillator();
+        const gain = audio.createGain();
+        const at = base + index * 0.18;
+        oscillator.type = 'sine';
+        oscillator.frequency.value = frequency;
+        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.7);
+        nodes.push(oscillator);
+      });
+      return nodes;
+    }
     function playChime() {
       const audio = ensureAudio();
       if (!audio) return;
-      const emit = () => {
-        const start = audio.currentTime;
-        [660, 880].forEach((frequency, index) => {
-          const oscillator = audio.createOscillator();
-          const gain = audio.createGain();
-          const at = start + 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);
-          oscillator.connect(gain).connect(audio.destination);
-          oscillator.start(at);
-          oscillator.stop(at + 0.4);
-        });
-      };
+      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, notice: 'finish', noticeAt: now });
-        if (state.sound) playChime();
         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);
@@ -297,9 +396,44 @@ window.__ModuleLoader__.load({
       .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-bubble:hover,.llm-bubble:focus-visible{animation-play-state:paused}
-      .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;z-index:30;max-height:min(64vh,520px);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-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-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}
+.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}}
@@ -312,6 +446,7 @@ window.__ModuleLoader__.load({
       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);
@@ -326,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);
@@ -359,18 +494,49 @@ window.__ModuleLoader__.load({
       ].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 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((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 : ''}` })));
+        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));
@@ -379,7 +545,7 @@ window.__ModuleLoader__.load({
         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(); } },
+      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)` } }),
 
@@ -395,15 +561,23 @@ window.__ModuleLoader__.load({
             }
             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 || '☷') : `☷ ${radarSummary}`),
+          }, '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('header', { className: 'llm-head' }, h('strong', null, t('radar')), button(t('close'), closeRadar, { className: 'llm-btn llm-actions' })),
+          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 }),
@@ -438,6 +612,7 @@ window.__ModuleLoader__.load({
             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'), () => { 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('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() })))),
@@ -474,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(() => {
@@ -483,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.2.0",
+  "version": "1.2.2",
   "type": "module",
   "description": "momolulu, a gentle coding companion with scenic backgrounds, live session activity, focus timing and wellbeing nudges.",
   "exports": {