claude-simple 0.2.6 → 0.2.8

package/public/notifications.js

@@ -0,0 +1,215 @@
+import { $, delegate, esc } from './lib.js';
+import { api } from './api.js';
+import { coerceTs } from './shell/util.js';
+
+let notifications = [];
+let unreadCount = 0;
+let openSession = null;
+
+function fmtTime(ts) {
+  const ms = coerceTs(ts);
+  if (ms == null) return '';
+  const d = new Date(ms);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleString();
+}
+
+function updateBadge() {
+  const badge = $('notifications-badge');
+  if (!badge) return;
+  if (!unreadCount) {
+    badge.classList.add('hidden');
+    badge.textContent = '0';
+    return;
+  }
+  badge.classList.remove('hidden');
+  badge.textContent = unreadCount > 99 ? '99+' : String(unreadCount);
+}
+
+function positionNotificationsMenu() {
+  const menu = $('notifications-menu');
+  const btn = $('btn-notifications');
+  const topbar = $('topbar');
+  if (!menu || !btn || !topbar) return;
+  const btnRect = btn.getBoundingClientRect();
+  const topbarRect = topbar.getBoundingClientRect();
+  const width = Math.min(416, window.innerWidth - 16);
+  const left = Math.max(8, Math.min(window.innerWidth - width - 8, btnRect.right - width));
+  menu.style.top = `${Math.round(topbarRect.bottom + 8)}px`;
+  menu.style.left = `${Math.round(left)}px`;
+  menu.style.width = `${Math.round(width)}px`;
+}
+
+function renderNotifications() {
+  const listEl = $('notifications-menu-list');
+  const emptyEl = $('notifications-menu-empty');
+  if (!listEl || !emptyEl) return;
+  if (!notifications.length) {
+    listEl.innerHTML = '';
+    emptyEl.classList.remove('hidden');
+    updateBadge();
+    return;
+  }
+  emptyEl.classList.add('hidden');
+  listEl.innerHTML = notifications.map((item) => `
+    <button type="button"
+      class="w-full text-left rounded-lg border px-3 py-2 transition-colors hover:bg-base-200/70 ${item.unread ? 'border-primary/35 bg-primary/5' : 'border-base-300 bg-base-100'}"
+      data-notification-id="${esc(item.id)}"
+      data-notification-session="${esc(item.sessionId || '')}"
+      data-notification-agent="${esc(item.agent || 'claude')}"
+      data-notification-cwd="${esc(item.cwd || '')}"
+      data-notification-machine="${esc(item.machineId || '')}">
+      <div class="flex items-start gap-2">
+        <span class="text-sm leading-5">🔔</span>
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-semibold truncate">${esc(item.title || 'Session done')}</span>
+            ${item.unread ? '<span class="inline-block w-2 h-2 rounded-full bg-primary flex-shrink-0"></span>' : ''}
+          </div>
+          ${item.body ? `<div class="text-[11px] text-base-content/55 mt-0.5 line-clamp-2">${esc(item.body)}</div>` : ''}
+          <div class="flex items-center gap-2 mt-1 text-[10px] text-base-content/35">
+            ${item.projectName ? `<span class="font-mono truncate">${esc(item.projectName)}</span>` : ''}
+            ${item.machineId ? `<span class="px-1 py-0.5 rounded bg-base-300 text-base-content/55 font-mono">${esc(item.machineId)}</span>` : ''}
+            <span>${esc(fmtTime(item.createdAt))}</span>
+          </div>
+        </div>
+      </div>
+    </button>`).join('');
+  updateBadge();
+}
+
+export function closeNotificationsMenu() {
+  $('notifications-menu')?.classList.add('hidden');
+  $('notifications-backdrop')?.classList.add('hidden');
+  $('btn-notifications')?.setAttribute('aria-expanded', 'false');
+}
+
+export function openNotificationsMenu() {
+  positionNotificationsMenu();
+  $('notifications-menu')?.classList.remove('hidden');
+  $('notifications-backdrop')?.classList.remove('hidden');
+  $('btn-notifications')?.setAttribute('aria-expanded', 'true');
+}
+
+export function toggleNotificationsMenu() {
+  const menu = $('notifications-menu');
+  if (!menu) return;
+  if (menu.classList.contains('hidden')) openNotificationsMenu();
+  else closeNotificationsMenu();
+}
+
+function mergeNotifications(rows) {
+  const map = new Map();
+  for (const item of rows || []) {
+    if (!item?.id) continue;
+    map.set(String(item.id), item);
+  }
+  notifications = [...map.values()].sort((a, b) => (coerceTs(b.createdAt) || 0) - (coerceTs(a.createdAt) || 0));
+  unreadCount = notifications.reduce((sum, item) => sum + (item.unread ? 1 : 0), 0);
+  renderNotifications();
+}
+
+export async function refreshNotifications() {
+  try {
+    const data = await api('GET', '/api/notifications?limit=80');
+    notifications = Array.isArray(data?.notifications) ? data.notifications : [];
+    unreadCount = Number(data?.unreadCount) || notifications.reduce((sum, item) => sum + (item.unread ? 1 : 0), 0);
+    renderNotifications();
+  } catch {
+    notifications = [];
+    unreadCount = 0;
+    renderNotifications();
+  }
+}
+
+async function markNotificationsRead(ids = null) {
+  const data = await api('POST', '/api/notifications/read', ids?.length ? { ids } : {});
+  notifications = Array.isArray(data?.notifications) ? data.notifications : notifications.map(item => (
+    !ids || ids.includes(item.id) ? { ...item, unread: false } : item
+  ));
+  unreadCount = Number(data?.unreadCount) || notifications.reduce((sum, item) => sum + (item.unread ? 1 : 0), 0);
+  renderNotifications();
+}
+
+function maybeShowBrowserNotification(item) {
+  if (typeof Notification === 'undefined') return;
+  if (document.visibilityState === 'visible') return;
+  if (Notification.permission !== 'granted') return;
+  try {
+    const n = new Notification(item.title || 'Session done', {
+      body: item.body || item.projectName || item.sessionId || '',
+      tag: item.id,
+    });
+    n.onclick = () => {
+      window.focus();
+      n.close();
+    };
+  } catch {
+    // ignore
+  }
+}
+
+export function pushNotification(item) {
+  if (!item?.id) return;
+  const existing = notifications.find(row => row.id === item.id);
+  if (existing) {
+    mergeNotifications([item, ...notifications.filter(row => row.id !== item.id)]);
+    return;
+  }
+  mergeNotifications([item, ...notifications]);
+  maybeShowBrowserNotification(item);
+}
+
+export function initNotifications(opts = {}) {
+  openSession = typeof opts.openSession === 'function' ? opts.openSession : null;
+  renderNotifications();
+  refreshNotifications();
+
+  if (typeof Notification !== 'undefined' && Notification.permission === 'default') {
+    document.addEventListener('click', () => {
+      try { Notification.requestPermission().catch(() => {}); } catch {}
+    }, { once: true });
+  }
+
+  delegate.on('click', '#notifications-backdrop', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    closeNotificationsMenu();
+  });
+
+  delegate.on('click', '#btn-notifications-read-all', async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    await markNotificationsRead();
+  });
+
+  delegate.on('click', '[data-notification-id]', async (_, el) => {
+    const id = el.dataset.notificationId;
+    if (!id) return;
+    await markNotificationsRead([id]);
+    closeNotificationsMenu();
+    if (!openSession || !el.dataset.notificationSession) return;
+    openSession(
+      el.dataset.notificationSession,
+      el.dataset.notificationCwd || null,
+      null,
+      el.dataset.notificationAgent || 'claude',
+      el.dataset.notificationMachine || null,
+    );
+  });
+
+  document.addEventListener('click', (e) => {
+    const menu = $('notifications-menu');
+    const btn = $('btn-notifications');
+    const target = e.target;
+    if (!menu || menu.classList.contains('hidden')) return;
+    if (menu.contains(target) || btn?.contains(target)) return;
+    closeNotificationsMenu();
+  });
+
+  window.addEventListener('resize', () => {
+    if ($('notifications-menu') && !$('notifications-menu').classList.contains('hidden')) {
+      positionNotificationsMenu();
+    }
+  });
+}

package/public/shell/dashboard.js

@@ -176,7 +176,7 @@ export function updateDashboard(sessions) {
   }).join('');
 
   showSelectedDaySessions(sessions);
-  updateRecentSessionsList(sessions);
+  updateRecentSessionsList();
 }
 
 export function showSelectedDaySessions(sessions) {
@@ -226,19 +226,62 @@ export function showSelectedDaySessions(sessions) {
 
 /** How many sessions in the topbar “最近” quick-jump menu. */
 export const RECENT_MENU_LIMIT = 15;
+const RECENT_SESSIONS_KEY = 'recentSessionsV1';
 
-function sortRecentSessions(sessions, limit) {
-  return [...asSessionArray(sessions)]
-    .filter(s => s && s.sessionId)
-    .sort((a, b) => (coerceTs(b.updatedAt) || 0) - (coerceTs(a.updatedAt) || 0))
+function recentSessionKey(s) {
+  return `${s.machineId || ''}:${s.agent || 'claude'}:${s.sessionId}`;
+}
+
+/**
+ * The quick-jump list is deliberately opt-in: it starts empty and is populated
+ * only after a session is opened.  Unlike sessionsData, this survives machine
+ * switches and contains sessions from every edge machine.
+ */
+export function getRecentSessions() {
+  try {
+    const saved = JSON.parse(localStorage.getItem(RECENT_SESSIONS_KEY) || '[]');
+    return Array.isArray(saved)
+      ? saved.filter(s => s && s.sessionId)
+      : [];
+  } catch { return []; }
+}
+
+function saveRecentSessions(sessions) {
+  try { localStorage.setItem(RECENT_SESSIONS_KEY, JSON.stringify(sessions)); } catch { /* quota/private mode */ }
+}
+
+/** Add an explicitly opened session to the cross-machine quick-jump list. */
+export function addRecentSession(session) {
+  if (!session?.sessionId) return;
+  const key = recentSessionKey(session);
+  const entry = { ...session, lastOpenedAt: Date.now() };
+  const recent = getRecentSessions().filter(s => recentSessionKey(s) !== key);
+  recent.unshift(entry);
+  saveRecentSessions(recent.slice(0, RECENT_MENU_LIMIT));
+  updateRecentSessionsList();
+  renderRecentSessionsMenu();
+}
+
+/** Remove an item from this device's quick-jump list; the actual session remains intact. */
+export function dismissRecentSession(session) {
+  if (!session?.sessionId) return;
+  const key = recentSessionKey(session);
+  saveRecentSessions(getRecentSessions().filter(s => recentSessionKey(s) !== key));
+  updateRecentSessionsList();
+  renderRecentSessionsMenu();
+}
+
+function sortRecentSessions(limit) {
+  return getRecentSessions()
+    .sort((a, b) => (coerceTs(b.lastOpenedAt) || 0) - (coerceTs(a.lastOpenedAt) || 0))
     .slice(0, limit);
 }
 
-export function updateRecentSessionsList(sessions) {
+export function updateRecentSessionsList() {
   const container = $('recent-sessions-list');
   if (!container) return;
 
-  const recent = sortRecentSessions(sessions, 6);
+  const recent = sortRecentSessions(6);
 
   if (!recent.length) {
     container.innerHTML = `<div class="col-span-full text-center text-xs text-base-content/40 py-4">No recent sessions</div>`;
@@ -315,31 +358,31 @@ export function positionRecentMenu() {
   menu.style.maxHeight = `${Math.min(maxH, Math.round(window.innerHeight * 0.7))}px`;
 }
 
-export function openRecentMenu(sessions) {
+export function openRecentMenu() {
   const menu = $('recent-menu');
   if (!menu) return;
-  renderRecentSessionsMenu(sessions ?? getDashboardSessions());
+  renderRecentSessionsMenu();
   menu.classList.remove('hidden');
   menu.classList.add('recent-menu-open');
   positionRecentMenu();
   $('recent-menu-backdrop')?.classList.remove('hidden');
 }
 
-export function toggleRecentMenu(sessions) {
+export function toggleRecentMenu() {
   const menu = $('recent-menu');
   if (!menu) return;
-  if (menu.classList.contains('hidden')) openRecentMenu(sessions);
+  if (menu.classList.contains('hidden')) openRecentMenu();
   else closeRecentMenu();
 }
 
-/** Topbar quick-jump: last N sessions by updatedAt. */
-export function renderRecentSessionsMenu(sessions) {
+/** Topbar quick-jump: the last N sessions explicitly opened by this user. */
+export function renderRecentSessionsMenu() {
   const listEl = $('recent-menu-list');
   const emptyEl = $('recent-menu-empty');
   const countEl = $('recent-menu-count');
   if (!listEl) return;
 
-  const recent = sortRecentSessions(sessions ?? getDashboardSessions(), RECENT_MENU_LIMIT);
+  const recent = sortRecentSessions(RECENT_MENU_LIMIT);
   if (countEl) countEl.textContent = recent.length ? `${recent.length}` : '';
 
   if (!recent.length) {
@@ -357,14 +400,14 @@ export function renderRecentSessionsMenu(sessions) {
       ? `<span class="text-[9px] font-mono text-base-content/35 truncate max-w-[4.5rem]" title="${esc(s.machineId)}">@${esc(s.machineId)}</span>`
       : '';
     return `
-      <button type="button"
-        class="recent-menu-item w-full text-left px-2 py-1.5 rounded-md flex items-start gap-2
-               ${active ? 'bg-primary/15 text-primary' : 'hover:bg-base-200'}"
-        data-session-id="${esc(s.sessionId)}"
-        data-session-cwd="${esc(s.cwd || '')}"
-        data-session-config-dir="${esc(s.configDir || '')}"
-        data-session-agent="${esc(s.agent || 'claude')}"
-        data-session-machine="${esc(s.machineId || '')}">
+      <div class="recent-menu-item w-full text-left px-2 py-1.5 rounded-md flex items-start gap-2
+               ${active ? 'bg-primary/15 text-primary' : 'hover:bg-base-200'}">
+        <button type="button" class="flex min-w-0 flex-1 items-start gap-2 text-left" aria-label="打开 ${esc(sessionDisplayTitle(s))}"
+          data-session-id="${esc(s.sessionId)}"
+          data-session-cwd="${esc(s.cwd || '')}"
+          data-session-config-dir="${esc(s.configDir || '')}"
+          data-session-agent="${esc(s.agent || 'claude')}"
+          data-session-machine="${esc(s.machineId || '')}">
         <span class="flex-shrink-0 mt-0.5">${agentBadge(s.agent)}</span>
         <span class="flex-1 min-w-0">
           <span class="block text-xs font-semibold truncate leading-snug">${esc(sessionDisplayTitle(s))}</span>
@@ -375,7 +418,13 @@ export function renderRecentSessionsMenu(sessions) {
           ${machine}
           ${active ? '<span class="text-[9px] opacity-70">当前</span>' : ''}
         </span>
-      </button>`;
+        </button>
+        <button type="button" class="recent-remove btn btn-ghost btn-xs min-h-7 h-7 w-7 px-0 flex-shrink-0 text-base-content/45 hover:text-error"
+          title="从最近会话移除" aria-label="从最近会话移除 ${esc(sessionDisplayTitle(s))}"
+          data-dismiss-recent-session="${esc(s.sessionId)}"
+          data-dismiss-recent-agent="${esc(s.agent || 'claude')}"
+          data-dismiss-recent-machine="${esc(s.machineId || '')}">×</button>
+      </div>`;
   }).join('');
 }
 

package/public/shell/layout.js

@@ -2,13 +2,13 @@
 import { batch, esc, $ } from '../lib.js';
 import {
   workspacesData, sessionFilter, filesPath, viewingFile, currentProject,
-  filesRoot, gitRoot, currentModel, currentAgent, setAgent,
+  filesRoot, gitRoot, currentModel, currentAgent, setAgent, setCurrentModel,
   hubMode, machinesList, selectedMachineId, setSelectedMachine,
   getDefaultModel, AGENT_LABELS, ctx,
 } from '../state.js';
 // filesRoot/gitRoot used when starting a new session (default paths)
 import { api } from '../api.js';
-import { connectWS, clearMessages, appendSystemMsg, applyChatDensity } from '../chat.js';
+import { connectWS, clearMessages, appendSystemMsg, applyChatDensity, stashComposerDraft, restoreComposerDraft, discardComposerAttachments, parkQueuedMessages, detachProcessingForSessionSwitch } from '../chat.js';
 import { refreshModelSelect } from './session-list.js';
 import { switchTab } from './session-nav.js';
 import { showMachinePicker } from './hub.js';
@@ -16,27 +16,37 @@ import { syncFocusScope } from '../mobile.js';
 
 // ── Sidebar ───────────────────────────────────────────────────────────────────
 export function openSidebar()  {
-  $('sidebar').classList.add('open');
+  const sidebar = $('sidebar');
+  if (!sidebar) return;
+  sidebar.classList.add('open');
   $('sidebar-overlay').classList.remove('hidden');
+  $('hamburger')?.setAttribute('aria-expanded', 'true');
   syncFocusScope();
+  // Put the next action where it belongs. Delaying lets the drawer transition
+  // start first, which is more reliable in mobile Safari.
+  setTimeout(() => $('session-search')?.focus({ preventScroll: true }), 180);
 }
 export function closeSidebar() {
-  $('sidebar').classList.remove('open');
+  const sidebar = $('sidebar');
+  if (!sidebar) return;
+  sidebar.classList.remove('open');
   $('sidebar-overlay').classList.add('hidden');
+  $('hamburger')?.setAttribute('aria-expanded', 'false');
   syncFocusScope();
+  $('hamburger')?.focus({ preventScroll: true });
 }
 export function closeSidebarOnMobile() { if (window.innerWidth <= 640) closeSidebar(); }
 
 export function initSidebarToggle() {
   const btn     = $('sidebar-toggle');
   const sidebar = $('sidebar');
-  let collapsed = false;
-  let savedWidth = sidebar.style.width || '260px';
+  if (!btn || !sidebar) return;
+  let collapsed = localStorage.getItem('sidebarCollapsed') === '1';
+  let savedWidth = localStorage.getItem('sidebarWidth') || sidebar.style.width || '280px';
 
-  btn.addEventListener('click', () => {
-    collapsed = !collapsed;
+  const applyCollapsed = () => {
+    sidebar.classList.toggle('desktop-collapsed', collapsed);
     if (collapsed) {
-      savedWidth = sidebar.style.width || '260px';
       sidebar.style.width = '0';
       sidebar.style.minWidth = '0';
       sidebar.style.overflow = 'hidden';
@@ -46,6 +56,17 @@ export function initSidebarToggle() {
       sidebar.style.overflow = '';
     }
     btn.textContent = collapsed ? '▶' : '◀';
+    btn.title = collapsed ? '展开侧栏' : '收起侧栏';
+    btn.setAttribute('aria-label', btn.title);
+    btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+  };
+  applyCollapsed();
+
+  btn.addEventListener('click', () => {
+    collapsed = !collapsed;
+    if (collapsed) savedWidth = sidebar.style.width || savedWidth;
+    localStorage.setItem('sidebarCollapsed', collapsed ? '1' : '0');
+    applyCollapsed();
   });
 }
 
@@ -71,6 +92,8 @@ export function initSidebarResize() {
     dragging = false;
     document.body.style.userSelect = '';
     document.body.style.cursor = '';
+    const width = Math.round(sidebar.getBoundingClientRect().width);
+    if (width >= 160) localStorage.setItem('sidebarWidth', `${width}px`);
   });
 }
 
@@ -79,7 +102,9 @@ export function applyTheme(theme) {
   document.documentElement.setAttribute('data-theme', theme);
   localStorage.setItem('theme', theme);
   const btn = $('btn-theme');
-  if (btn) btn.textContent = theme === 'dark' || theme === 'night' || theme === 'black' ? '🌙' : '☀️';
+  const icon = theme === 'dark' || theme === 'night' || theme === 'black' ? '🌙' : '☀️';
+  if (btn) btn.textContent = icon;
+  document.querySelectorAll('[data-sidebar-action="theme"]').forEach(el => { el.textContent = icon; });
   // Swap highlight.js stylesheet for light/dark
   let link = document.getElementById('hljs-theme');
   if (!link) {
@@ -171,12 +196,15 @@ export async function startNewSession() {
     $('modal-new-session').close();
 
     const name = result.path.split('/').filter(Boolean).pop() || result.path;
+    stashComposerDraft();
+    parkQueuedMessages();
+    discardComposerAttachments();
+    detachProcessingForSessionSwitch();
     ctx.sessionId = null;
     ctx.configDir = configDir || null;
     ctx.agent = agent;
     setAgent(agent);
-    currentModel.value = getDefaultModel(agent) || currentModel.peek();
-    localStorage.setItem('model', currentModel.peek());
+    setCurrentModel(getDefaultModel(agent) || currentModel.peek());
     refreshModelSelect();
     batch(() => {
       currentProject.value = { id: name, name, path: result.path, machineId: selectedMachineId.peek() || ctx.machineId };
@@ -194,6 +222,7 @@ export async function startNewSession() {
     pv.classList.remove('hidden');
     pv.style.display = 'flex';
     clearMessages();
+    restoreComposerDraft({ sessionId: null });
     connectWS();
     switchTab('chat');
     appendSystemMsg(`New ${AGENT_LABELS[agent] || agent} session · ${result.path}`);

package/public/shell/session-list.js

@@ -8,7 +8,7 @@ import {
   sessionMetaMap, LOW_TURN_THRESHOLD, metaKey, sessionDisplayTitle,
   hubMode, selectedMachineId, agentsMeta, currentEffort,
   getModelsForAgent, getDefaultModel, getEffortsForModel,
-  addCustomModel, removeCustomModel, getCustomModels, ctx,
+  addCustomModel, removeCustomModel, getCustomModels, setCurrentModel, ctx,
 } from '../state.js';
 import { api, NOT_MODIFIED } from '../api.js';
 import { getCachedSessions, setCachedSessions, getCachedWorkspaces, setCachedWorkspaces } from '../cache.js';
@@ -158,15 +158,8 @@ export async function loadAgentsMeta() {
   try {
     const data = await api('GET', '/api/agents');
     agentsMeta.value = data;
-    // Align current model with discovered list for active agent
-    const agent = currentAgent.peek() || 'claude';
-    const models = getModelsForAgent(agent);
-    const cur = currentModel.peek();
-    if (cur && !models.some(m => m.value === cur)) {
-      const def = getDefaultModel(agent);
-      currentModel.value = def;
-      localStorage.setItem('model', def);
-    }
+    // Do not replace a user's saved model merely because discovery has not
+    // listed it yet. refreshModelSelect renders it as a custom entry instead.
     refreshModelSelect();
     return data;
   } catch (e) {
@@ -210,8 +203,7 @@ export function refreshModelSelect() {
   ).join('');
   if (!models.some(m => m.value === cur)) {
     const def = getDefaultModel(agent) || models[0]?.value;
-    currentModel.value = def;
-    localStorage.setItem('model', def);
+    setCurrentModel(def);
     sel.value = def;
     cur = def;
   } else {
@@ -241,8 +233,7 @@ export function promptCustomModel({ editCurrent = false } = {}) {
     removeCustomModel(agent, initial);
   }
   addCustomModel(agent, id);
-  currentModel.value = id;
-  localStorage.setItem('model', id);
+  setCurrentModel(id);
   refreshModelSelect();
 }
 
@@ -430,7 +421,7 @@ export function mdToHtml(text) {
   }
 }
 
-// Load the persistent memory for the currently open session into the Memory tab.
+// Memory is shown as an agent-specific file list. Content is loaded on click.
 export async function loadMemoryTab() {
   const body = $('memory-area');
   if (!body) return;
@@ -440,22 +431,30 @@ export async function loadMemoryTab() {
   }
   body.innerHTML = '<div class="p-4 text-xs text-base-content/40">Loading…</div>';
   try {
-    const q = new URLSearchParams({ agent: ctx.agent || currentAgent.peek() || 'claude' });
+    const agent = ctx.agent || currentAgent.peek() || 'claude';
+    const q = new URLSearchParams({ agent });
     const mem = await api('GET', `/api/sessions/${ctx.sessionId}/memory?${q}`);
-    const parts = [];
-    if (mem.index) {
-      parts.push(`<div class="mb-4"><div class="text-[11px] uppercase tracking-wide text-base-content/40 mb-1">Index (MEMORY.md)</div>
-                  <div class="md">${mdToHtml(mem.index)}</div></div>`);
-    }
-    for (const f of (mem.files || [])) {
-      parts.push(`<div class="mb-3 border border-base-300 rounded-lg overflow-hidden">
-                    <div class="px-3 py-1.5 bg-base-300/50 text-xs font-mono text-base-content/70">${esc(f.name)}</div>
-                    <div class="px-3 py-2 md">${mdToHtml(f.content)}</div>
-                  </div>`);
+    const files = mem.files || [];
+    if (!files.length) {
+      body.innerHTML = '<div class="p-4 text-base-content/40 text-xs">No memory files available for this agent/session.</div>';
+      return;
     }
-    if (!parts.length) parts.push('<div class="text-base-content/40 text-xs">No memory saved for this project yet.</div>');
-    body.innerHTML = `<div class="p-4">${parts.join('')}</div>`;
+    body.innerHTML = `<div class="p-3 text-[11px] text-base-content/45">${esc(agent)} · ${files.length} memory file${files.length === 1 ? '' : 's'} · click to open</div>
+      <div class="px-3 pb-4 flex flex-col gap-1">${files.map(f => `<button type="button" class="memory-file text-left px-3 py-2 rounded-lg border border-base-300 hover:border-primary hover:bg-primary/5" data-memory-file="${esc(f.id)}" data-memory-agent="${esc(agent)}"><span class="font-mono text-xs">${esc(f.name)}</span><span class="ml-2 text-[10px] text-base-content/40">${esc(f.scope || '')}</span></button>`).join('')}<div id="memory-file-content"></div></div>`;
   } catch (e) {
     body.innerHTML = `<div class="p-4 text-error text-xs">${esc(e?.message ?? String(e))}</div>`;
   }
 }
+
+export async function openMemoryFile(fileId, agent) {
+  const out = $('memory-file-content');
+  if (!out || !ctx.sessionId || !fileId) return;
+  out.innerHTML = '<div class="p-3 text-xs text-base-content/40">Loading file…</div>';
+  try {
+    const q = new URLSearchParams({ agent: agent || ctx.agent || currentAgent.peek() || 'claude', file: fileId });
+    const row = await api('GET', `/api/sessions/${ctx.sessionId}/memory/file?${q}`);
+    out.innerHTML = `<div class="mt-2 border border-base-300 rounded-lg overflow-hidden"><div class="px-3 py-1.5 bg-base-300/50 text-xs font-mono">${esc(row.name)}</div><div class="px-3 py-2 md">${mdToHtml(row.content)}</div></div>`;
+  } catch (e) {
+    out.innerHTML = `<div class="mt-2 p-3 text-error text-xs">${esc(e?.message ?? String(e))}</div>`;
+  }
+}