claude-simple 0.2.1 → 0.2.3

package/gateway.js

@@ -229,11 +229,16 @@ app.all('/machine/:machineId/*', async (req, res) => {
     }, body);
 
     // Don't forward hop-by-hop headers
-    const skip = new Set(['transfer-encoding', 'connection', 'keep-alive']);
+    const skip = new Set(['transfer-encoding', 'connection', 'keep-alive', 'content-length']);
     Object.entries(result.headers || {}).forEach(([k, v]) => {
       if (!skip.has(k.toLowerCase())) res.setHeader(k, v);
     });
-    res.status(result.status).send(result.body);
+    // Edge sends binary downloads as base64 (see client.js encoding:'base64').
+    let body = result.body ?? '';
+    if (String(result.encoding || '').toLowerCase() === 'base64' && typeof body === 'string') {
+      body = Buffer.from(body, 'base64');
+    }
+    res.status(result.status).send(body);
   } catch (e) {
     res.status(502).json({ error: e.message });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-simple",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "bin": {
     "claude-simple": "server.js",

package/public/agent-panel.js

@@ -118,7 +118,16 @@ function panelHTML() {
           </label>
           <textarea id="ma-input" rows="1" placeholder="继续提问… (⌘↵ 发送) · 历史会话会带着上下文"
             class="textarea textarea-bordered flex-1 text-sm resize-none leading-relaxed"
-            style="min-height:40px;max-height:120px"></textarea>
+            style="min-height:40px;max-height:120px"
+            name="meta-agent-message"
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellcheck="false"
+            data-1p-ignore="true"
+            data-lpignore="true"
+            data-form-type="other"
+            data-bwignore="true"></textarea>
           <button type="button" id="ma-send" class="btn btn-primary btn-sm" style="height:40px">发送</button>
         </div>
       </div>

package/public/chat.js

@@ -788,9 +788,17 @@ function updateInputMode(value) {
   input.placeholder = isShell ? 'Shell command (without !)…' : `Ask ${label}… or !cmd for shell`;
 }
 
+function chatInputMaxHeight() {
+  // Keep in sync with #chat-input max-height in style.css (mobile vs desktop).
+  if (typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches) {
+    return 96;
+  }
+  return 140;
+}
+
 function autoResize(el) {
   el.style.height = 'auto';
-  el.style.height = Math.min(el.scrollHeight, 140) + 'px';
+  el.style.height = Math.min(el.scrollHeight, chatInputMaxHeight()) + 'px';
 }
 
 // ── Message rendering ─────────────────────────────────────────────────────────

package/public/files.js

@@ -111,7 +111,7 @@ function fileChrome(path, size, kindLabel) {
   return `
     <div class="flex items-center gap-2 px-4 py-1.5 border-b border-base-300 flex-shrink-0 bg-base-200">
       <span class="text-xs text-base-content/40 flex-1 truncate">${esc(path)} · ${esc(sizeStr)}${kindLabel ? ` · <span class="text-primary/70">${esc(kindLabel)}</span>` : ''}</span>
-      <button class="btn btn-ghost btn-xs" data-download-path="${esc(path)}">↓ Download</button>
+      <button type="button" class="btn btn-ghost btn-xs" data-download-path="${esc(path)}">↓ Download</button>
     </div>`;
 }
 
@@ -127,10 +127,10 @@ function renderDir(files) {
       <span class="cursor-pointer flex-shrink-0">${f.isDir ? '📁' : fileIcon(f.name)}</span>
       <span class="text-sm flex-1 truncate cursor-pointer ${f.isDir ? 'text-primary' : ''}">${esc(f.name)}</span>
       ${!f.isDir ? `
-        <button class="opacity-0 group-hover:opacity-100 btn btn-ghost btn-xs px-1 text-base-content/40 hover:text-base-content"
-                data-download-path="${esc(f.path)}" title="Download">↓</button>
-        <button class="opacity-0 group-hover:opacity-100 btn btn-ghost btn-xs px-1 text-error/60 hover:text-error"
-                data-delete-path="${esc(f.path)}" title="Delete">✕</button>` : ''}
+        <button type="button" class="file-row-action btn btn-ghost btn-xs px-1.5 text-base-content/50 hover:text-base-content"
+                data-download-path="${esc(f.path)}" title="Download" aria-label="Download">↓</button>
+        <button type="button" class="file-row-action btn btn-ghost btn-xs px-1.5 text-error/60 hover:text-error"
+                data-delete-path="${esc(f.path)}" title="Delete" aria-label="Delete">✕</button>` : ''}
     </div>`).join('');
 }
 
@@ -343,19 +343,52 @@ function triggerUpload() {
   input.click();
 }
 
-function downloadFile(proj, filePath) {
+async function downloadFile(proj, filePath) {
   const root = filesRoot.peek() || proj?.path || '';
+  if (!root) {
+    alert('No path selected — set root first');
+    return;
+  }
   const id = proj?.id || '_';
-  const qs = authQuery({
-    root,
-    path: filePath,
-    download: 'true',
-  });
+  const name = (filePath || '').split('/').pop() || 'download';
+  // Prefer Authorization header (no token in URL / logs). authQuery kept as
+  // fallback for environments that only support plain navigations.
+  const qs = new URLSearchParams({ root, path: filePath, download: 'true' });
   const url = `/api/projects/${id}/file?${qs}`;
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = filePath.split('/').pop();
-  a.click();
+  try {
+    const res = await fetch(url, { headers: authHeaders(), credentials: 'same-origin' });
+    if (!res.ok) {
+      const d = await res.json().catch(() => ({}));
+      throw new Error(d.error || `HTTP ${res.status}`);
+    }
+    const blob = await res.blob();
+    const objectUrl = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = objectUrl;
+    a.download = name;
+    a.rel = 'noopener';
+    a.style.display = 'none';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    // iOS may need the URL briefly; revoke after a beat.
+    setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
+  } catch (e) {
+    // Last resort: open with token query (works when fetch is blocked, e.g. some WebViews).
+    try {
+      const fallback = `/api/projects/${id}/file?${authQuery({ root, path: filePath, download: 'true' })}`;
+      const a = document.createElement('a');
+      a.href = fallback;
+      a.download = name;
+      a.rel = 'noopener';
+      a.target = '_blank';
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    } catch {
+      alert(`Download failed: ${e.message}`);
+    }
+  }
 }
 
 async function deleteFile(proj, filePath) {
@@ -447,13 +480,19 @@ export function initFilesTab() {
   delegate.on('click', '[data-dir-path]', (_, el) => { viewingFile.value = null; filesPath.value = el.dataset.dirPath; });
   delegate.on('click', '[data-file-path]', (_, el) => { viewingFile.value = el.dataset.filePath; });
   delegate.on('click', '#btn-upload', () => triggerUpload());
-  delegate.on('click', '[data-download-path]', (_, el) => {
-    const proj = currentProject.peek();
-    if (proj) downloadFile(proj, el.dataset.downloadPath);
+  delegate.on('click', '[data-download-path]', (e, el) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const path = el.dataset.downloadPath;
+    if (!path) return;
+    downloadFile(currentProject.peek(), path);
   });
-  delegate.on('click', '[data-delete-path]', (_, el) => {
-    const proj = currentProject.peek();
-    if (proj) deleteFile(proj, el.dataset.deletePath);
+  delegate.on('click', '[data-delete-path]', (e, el) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const path = el.dataset.deletePath;
+    if (!path) return;
+    deleteFile(currentProject.peek(), path);
   });
   // Excel sheet tabs
   delegate.on('click', '.office-sheet-tab', (_, el) => {

package/public/index.html

@@ -65,10 +65,10 @@
   <script src="https://cdn.jsdelivr.net/npm/marked@9/marked.min.js"></script>
   <link id="hljs-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/highlight.min.js"></script>
-  <link rel="stylesheet" href="style.css?v=safe-3">
+  <link rel="stylesheet" href="style.css?v=ui-9">
 </head>
 <body class="h-dvh overflow-hidden flex flex-col bg-base-100 text-base-content">
   <div id="root" class="flex flex-col flex-1 overflow-hidden"></div>
-  <script type="module" src="app.js"></script>
+  <script type="module" src="app.js?v=ui-9"></script>
 </body>
 </html>

package/public/shell/dashboard.js

@@ -224,14 +224,21 @@ export function showSelectedDaySessions(sessions) {
   }).join('');
 }
 
+/** How many sessions in the topbar “最近” quick-jump menu. */
+export const RECENT_MENU_LIMIT = 15;
+
+function sortRecentSessions(sessions, limit) {
+  return [...asSessionArray(sessions)]
+    .filter(s => s && s.sessionId)
+    .sort((a, b) => (coerceTs(b.updatedAt) || 0) - (coerceTs(a.updatedAt) || 0))
+    .slice(0, limit);
+}
+
 export function updateRecentSessionsList(sessions) {
   const container = $('recent-sessions-list');
   if (!container) return;
 
-  sessions = asSessionArray(sessions);
-  const recent = [...sessions]
-    .sort((a, b) => (coerceTs(b.updatedAt) || 0) - (coerceTs(a.updatedAt) || 0))
-    .slice(0, 6);
+  const recent = sortRecentSessions(sessions, 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>`;
@@ -258,6 +265,120 @@ export function updateRecentSessionsList(sessions) {
   }).join('');
 }
 
+export function closeRecentMenu() {
+  const menu = $('recent-menu');
+  if (menu) {
+    menu.classList.add('hidden');
+    menu.classList.remove('recent-menu-open');
+    // clear inline placement for next open
+    menu.style.top = '';
+    menu.style.left = '';
+    menu.style.right = '';
+    menu.style.width = '';
+    menu.style.maxHeight = '';
+  }
+  $('recent-menu-backdrop')?.classList.add('hidden');
+}
+
+/**
+ * Place the panel under the topbar with position:fixed so it is never clipped
+ * by #app / #topbar overflow (the previous top-full + fixed combo put it
+ * below the viewport on phones — looked like “no response”).
+ */
+export function positionRecentMenu() {
+  const menu = $('recent-menu');
+  const topbar = $('topbar');
+  if (!menu || !topbar) return;
+  const rect = topbar.getBoundingClientRect();
+  const gap = 6;
+  const top = Math.round(rect.bottom + gap);
+  const side = window.matchMedia('(max-width: 640px)').matches ? 8 : null;
+  menu.style.top = `${top}px`;
+  if (side != null) {
+    menu.style.left = `${side}px`;
+    menu.style.right = `${side}px`;
+  } else {
+    // desktop: align under the “最近” button when possible
+    const btn = $('btn-recent-sessions');
+    const br = btn?.getBoundingClientRect();
+    if (br) {
+      const width = Math.min(320, window.innerWidth - 16);
+      let left = br.left;
+      if (left + width > window.innerWidth - 8) left = window.innerWidth - width - 8;
+      if (left < 8) left = 8;
+      menu.style.left = `${Math.round(left)}px`;
+      menu.style.right = 'auto';
+      menu.style.width = `${width}px`;
+    }
+  }
+  const maxH = Math.max(160, window.innerHeight - top - 12);
+  menu.style.maxHeight = `${Math.min(maxH, Math.round(window.innerHeight * 0.7))}px`;
+}
+
+export function openRecentMenu(sessions) {
+  const menu = $('recent-menu');
+  if (!menu) return;
+  renderRecentSessionsMenu(sessions ?? getDashboardSessions());
+  menu.classList.remove('hidden');
+  menu.classList.add('recent-menu-open');
+  positionRecentMenu();
+  $('recent-menu-backdrop')?.classList.remove('hidden');
+}
+
+export function toggleRecentMenu(sessions) {
+  const menu = $('recent-menu');
+  if (!menu) return;
+  if (menu.classList.contains('hidden')) openRecentMenu(sessions);
+  else closeRecentMenu();
+}
+
+/** Topbar quick-jump: last N sessions by updatedAt. */
+export function renderRecentSessionsMenu(sessions) {
+  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);
+  if (countEl) countEl.textContent = recent.length ? `${recent.length}` : '';
+
+  if (!recent.length) {
+    listEl.innerHTML = '';
+    emptyEl?.classList.remove('hidden');
+    return;
+  }
+  emptyEl?.classList.add('hidden');
+
+  listEl.innerHTML = recent.map(s => {
+    const timeStr = formatTime(s.updatedAt);
+    const active = ctx.sessionId === s.sessionId
+      && (!s.machineId || !ctx.machineId || s.machineId === ctx.machineId);
+    const machine = s.machineId
+      ? `<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 || '')}">
+        <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>
+          <span class="block text-[10px] text-base-content/40 truncate mt-0.5">${esc(s.projectName || shortPath(s.cwd) || '—')}</span>
+        </span>
+        <span class="flex flex-col items-end gap-0.5 flex-shrink-0 self-start">
+          <span class="text-[9px] text-base-content/40 whitespace-nowrap">${esc(timeStr)}</span>
+          ${machine}
+          ${active ? '<span class="text-[9px] opacity-70">当前</span>' : ''}
+        </span>
+      </button>`;
+  }).join('');
+}
+
 export function setCalMonthYear(m, y) { calMonth = m; calYear = y; }
 export function setSelectedCalDate(d) { selectedCalDate = d; }
 

package/public/shell/notes.js

@@ -165,7 +165,8 @@ function isMetaEmpty(m) {
 }
 
 export async function toggleSessionFavorite(sessionId, agent, { machineId } = {}) {
-  const key = metaKey(agent, sessionId, machineId);
+  const mid = machineId || ctx.machineId || null;
+  const key = metaKey(agent, sessionId, mid);
   const prev = sessionMetaMap.peek()?.[key] || emptyMeta();
   const nextFav = !prev.favorite;
   sessionMetaMap.value = {
@@ -173,7 +174,9 @@ export async function toggleSessionFavorite(sessionId, agent, { machineId } = {}
     [key]: { ...prev, favorite: nextFav, updatedAt: Date.now() },
   };
   try {
-    const res = await api('PUT', '/api/sessions/meta', { sessionId, agent, favorite: nextFav });
+    const res = await api('PUT', '/api/sessions/meta', {
+      sessionId, agent, favorite: nextFav, machineId: mid || undefined,
+    }, undefined, { machineId: mid || undefined });
     sessionMetaMap.value = {
       ...sessionMetaMap.peek(),
       [key]: mergeMeta(prev, {
@@ -193,7 +196,8 @@ export async function toggleSessionFavorite(sessionId, agent, { machineId } = {}
 /** Hide / unhide a session (soft archive in the sidebar). */
 export async function toggleSessionHidden(sessionId, agent, { machineId } = {}) {
   if (!sessionId) return false;
-  const key = metaKey(agent, sessionId, machineId);
+  const mid = machineId || ctx.machineId || null;
+  const key = metaKey(agent, sessionId, mid);
   const prev = sessionMetaMap.peek()?.[key] || emptyMeta();
   const nextHidden = !prev.hidden;
   sessionMetaMap.value = {
@@ -201,7 +205,9 @@ export async function toggleSessionHidden(sessionId, agent, { machineId } = {})
     [key]: { ...prev, hidden: nextHidden, updatedAt: Date.now() },
   };
   try {
-    const res = await api('PUT', '/api/sessions/meta', { sessionId, agent, hidden: nextHidden });
+    const res = await api('PUT', '/api/sessions/meta', {
+      sessionId, agent, hidden: nextHidden, machineId: mid || undefined,
+    }, undefined, { machineId: mid || undefined });
     const next = mergeMeta(prev, {
       favorite: res.favorite,
       notes: res.notes,
@@ -224,11 +230,17 @@ export async function toggleSessionHidden(sessionId, agent, { machineId } = {})
   return true;
 }
 
-export async function saveSessionNotes(sessionId, agent, notes) {
-  const key = metaKey(agent, sessionId);
+export async function saveSessionNotes(sessionId, agent, notes, { machineId } = {}) {
+  const mid = machineId || ctx.machineId || null;
+  const key = metaKey(agent, sessionId, mid);
   const prev = sessionMetaMap.peek()?.[key] || emptyMeta();
   try {
-    const res = await api('PUT', '/api/sessions/meta', { sessionId, agent, notes });
+    const res = await api('PUT', '/api/sessions/meta', {
+      sessionId,
+      agent,
+      notes,
+      machineId: mid || undefined,
+    }, undefined, { machineId: mid || undefined });
     sessionMetaMap.value = {
       ...sessionMetaMap.peek(),
       [key]: mergeMeta(prev, {
@@ -251,7 +263,8 @@ export async function saveSessionNotes(sessionId, agent, notes) {
  */
 export async function renameSession(sessionId, agent, title, { machineId } = {}) {
   if (!sessionId) return false;
-  const key = metaKey(agent, sessionId, machineId);
+  const mid = machineId || ctx.machineId || null;
+  const key = metaKey(agent, sessionId, mid);
   const prev = sessionMetaMap.peek()?.[key] || emptyMeta();
   const nextTitle = String(title || '').trim().slice(0, 200);
   sessionMetaMap.value = {
@@ -259,7 +272,9 @@ export async function renameSession(sessionId, agent, title, { machineId } = {})
     [key]: { ...prev, title: nextTitle, updatedAt: Date.now() },
   };
   try {
-    const res = await api('PUT', '/api/sessions/meta', { sessionId, agent, title: nextTitle });
+    const res = await api('PUT', '/api/sessions/meta', {
+      sessionId, agent, title: nextTitle, machineId: mid || undefined,
+    }, undefined, { machineId: mid || undefined });
     const next = mergeMeta(prev, {
       favorite: res.favorite,
       notes: res.notes,

package/public/shell/session-nav.js

@@ -3,7 +3,7 @@ import { batch, esc, $ } from '../lib.js';
 import {
   sessionsData, sessionFilter, filesPath, viewingFile, filteredSessions,
   currentProject, currentTab, filesRoot, gitRoot, currentAgent, setAgent,
-  selectedMachineId, setSelectedMachine, AGENT_LABELS, ctx,
+  selectedMachineId, setSelectedMachine, AGENT_LABELS, ctx, hubMode,
 } from '../state.js';
 import { api } from '../api.js';
 import { getLastSessionContext, setLastSessionContext } from './session-context.js';
@@ -182,14 +182,23 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
       for (; i < end; i++) {
         const m = msgs[i];
         const ts = coerceTs(m.ts ?? m.timestamp);
-        if (m.type === 'text') {
+        // Accept both normalized history rows and a few legacy shapes.
+        const typ = m.type || (m.role ? 'text' : null);
+        if (typ === 'text' || (m.role && m.content != null && !m.name)) {
           if (m.role === 'assistant' || m.role === 'user') flushToolBatch();
-          appendMsg(m.role === 'user' ? 'user' : 'assistant', m.role === 'user' ? 'You' : label, m.content, { ts });
-        } else if (m.type === 'tool_use') {
-          renderToolUse({ name: m.name, input: m.input ?? {} }, { ts });
-        } else if (m.type === 'token_usage') {
+          const content = typeof m.content === 'string'
+            ? m.content
+            : (Array.isArray(m.content)
+              ? m.content.map(p => p?.text || '').filter(Boolean).join('\n')
+              : String(m.content ?? ''));
+          if (content) {
+            appendMsg(m.role === 'user' ? 'user' : 'assistant', m.role === 'user' ? 'You' : label, content, { ts });
+          }
+        } else if (typ === 'tool_use' || m.name) {
+          renderToolUse({ name: m.name || 'tool', input: m.input ?? m.arguments ?? {} }, { ts });
+        } else if (typ === 'token_usage' || m.usage) {
           flushToolBatch();
-          appendHistoryTokenBar(m.usage);
+          appendHistoryTokenBar(m.usage || m);
         }
       }
       if (i < msgs.length) {
@@ -209,29 +218,52 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
   };
 
   const loadHistory = async () => {
-    // Instant re-open from in-memory cache
+    // Instant re-open from in-memory cache (never trust empty cache — race/stale)
     const cached = historyCache.get(cacheKey);
-    if (cached && Date.now() - cached.at < HISTORY_CACHE_TTL) {
+    if (cached && cached.msgs?.length && Date.now() - cached.at < HISTORY_CACHE_TTL) {
       paintMessages(cached.msgs, cached.context, cached.meta);
       return;
     }
     appendSystemMsg(`Loading ${label} history…`);
     try {
-      // Smaller tail + compact tool payloads on mobile / Save-Data.
-      const saveData = typeof navigator !== 'undefined' && (
-        navigator.connection?.saveData
-        || /Mobi|Android|iPhone/i.test(navigator.userAgent || '')
-      );
-      const tail = saveData ? '50' : '80';
-      const q = new URLSearchParams({ agent: resolvedAgent, tail, compact: '1' });
-      const data = await api('GET', `/api/sessions/${sid}/messages?${q}`);
-      const msgs = Array.isArray(data) ? data : (data.messages || []);
-      const context = Array.isArray(data) ? null : (data.context || null);
-      const meta = Array.isArray(data) ? {} : { truncated: data.truncated, total: data.total };
-      historyCache.set(cacheKey, { msgs, context, meta, at: Date.now() });
+      // Hub mode must route to the edge that owns the session.
+      const mid = resolvedMachine || selectedMachineId.peek() || ctx.machineId || null;
+      if (hubMode.peek() && !mid) {
+        throw new Error('未选择机器，无法加载历史');
+      }
+      if (mid && ctx.machineId !== mid) setSelectedMachine(mid);
+
+      // Full history (tail=0); tool inputs compacted server-side (~100 chars each).
+      const fetchMsgs = async (agent) => {
+        const q = new URLSearchParams({
+          tail: '0',
+          compact: '1',
+        });
+        if (agent) q.set('agent', agent);
+        // Also put machine in query for proxies that drop custom headers.
+        if (mid) q.set('machine', mid);
+        return api('GET', `/api/sessions/${sid}/messages?${q}`, undefined, undefined, {
+          machineId: mid || undefined,
+          dedupe: false,
+        });
+      };
+
+      let data = await fetchMsgs(resolvedAgent);
+      let msgs = Array.isArray(data) ? data : (data?.messages || []);
+      // Prefer stated agent; if empty, retry scanning all agents on the edge.
+      if (!msgs.length && resolvedAgent) {
+        data = await fetchMsgs(null);
+        msgs = Array.isArray(data) ? data : (data?.messages || []);
+      }
+
+      const context = Array.isArray(data) ? null : (data?.context || null);
+      const meta = Array.isArray(data) ? {} : { truncated: data?.truncated, total: data?.total };
+      if (msgs.length) historyCache.set(cacheKey, { msgs, context, meta, at: Date.now() });
+      else historyCache.delete(cacheKey);
       paintMessages(msgs, context, meta);
     } catch (e) {
       if (ctx.sessionId !== sid) return;
+      historyCache.delete(cacheKey);
       $('messages').innerHTML = '';
       appendSystemMsg(`${label} · ${sid.slice(0, 8)}… (history unavailable: ${e.message})`);
     }

package/public/shell/templates.js

@@ -60,9 +60,16 @@ export const AppShell = (opts = {}) => {
           <p id="machine-menu-empty" class="text-xs text-base-content/40 px-1 py-2 hidden">暂无机器在线</p>
         </div>
       </div>
-      <span id="topbar-project" class="text-sm text-base-content/50 flex-1 truncate">Select a session</span>
+      <div id="recent-menu-wrap" class="relative flex-shrink-0">
+        <button type="button" id="btn-recent-sessions" class="btn btn-ghost btn-xs border border-base-300 gap-1 min-h-8 px-2"
+                title="最近会话 / 快速跳转" aria-haspopup="listbox" aria-expanded="false">
+          <span>最近</span>
+          <span class="text-[10px] opacity-50">▾</span>
+        </button>
+      </div>
+      <span id="topbar-project" class="text-sm text-base-content/50 flex-1 truncate min-w-0">Select a session</span>
       <span id="conn-dot" class="w-2 h-2 rounded-full bg-base-content/30 flex-shrink-0" title="连接状态"></span>
-      <div class="flex gap-2">
+      <div class="flex gap-2 topbar-actions">
         <button id="btn-refresh-conn" class="btn btn-ghost btn-xs border border-base-300" title="重新连接并同步">↻</button>
         <button id="btn-pwa-install" class="btn btn-ghost btn-xs border border-base-300 hidden" title="安装到主屏幕">安装</button>
         <button id="btn-meta-agent"  class="btn btn-ghost btn-xs border border-primary/40 text-primary" title="Meta Agent — 报告 / 问答 / VLM">✦ Agent</button>
@@ -72,6 +79,18 @@ export const AppShell = (opts = {}) => {
         <button id="btn-logout"      class="btn btn-ghost btn-xs border border-base-300">Sign out</button>
       </div>
     </div>
+    <!-- Fixed panel + backdrop: siblings of topbar so flex layout never clips them -->
+    <div id="recent-menu-backdrop" class="hidden fixed inset-0 z-[55] bg-black/40" aria-hidden="true"></div>
+    <div id="recent-menu" class="hidden fixed z-[60] w-80 max-h-[min(24rem,70vh)] overflow-y-auto
+         rounded-lg border border-base-300 bg-base-100 shadow-xl p-2"
+         role="listbox" aria-label="最近会话">
+      <div class="flex items-center justify-between px-1 pb-1.5 mb-1 border-b border-base-300 sticky top-0 bg-base-100 z-[1]">
+        <span class="text-[10px] uppercase tracking-wide text-base-content/45 font-semibold">最近会话</span>
+        <span id="recent-menu-count" class="text-[10px] text-base-content/35 font-mono"></span>
+      </div>
+      <div id="recent-menu-list" class="flex flex-col gap-0.5"></div>
+      <p id="recent-menu-empty" class="text-xs text-base-content/40 px-1 py-2 hidden">暂无最近会话</p>
+    </div>
     <!-- Hub: only when no remembered machine (or last one offline) -->
     <div id="machine-picker" class="hidden fixed inset-0 z-[60] bg-base-100 flex items-center justify-center p-4">
       <div class="w-full max-w-md">
@@ -263,13 +282,21 @@ export const AppShell = (opts = {}) => {
                   <option value="full">density: full</option>
                 </select>
               </div>
-              <div class="flex gap-2 items-end px-3 pt-2 pb-2">
-                <button id="btn-opts" class="btn btn-ghost btn-sm px-2 text-base-content/30 hover:text-base-content flex-shrink-0" title="Options" style="height:40px">⚙</button>
+              <div id="composer-row" class="flex gap-2 items-end px-3 pt-2 pb-2">
+                <button id="btn-opts" class="btn btn-ghost btn-sm px-2 text-base-content/30 hover:text-base-content flex-shrink-0" title="Options">⚙</button>
                 <textarea id="chat-input" rows="1" placeholder="Ask… (!cmd shell · ⌘↵ send)"
                   class="chat-input flex-1 text-sm resize-none leading-relaxed"
-                  style="min-height:40px;max-height:140px"></textarea>
-                <button id="send-btn" class="btn btn-primary btn-sm flex-shrink-0" style="height:40px">Send</button>
-                <button id="stop-btn" class="btn btn-error btn-sm hidden flex-shrink-0" style="height:40px">■</button>
+                  name="agent-chat-message"
+                  autocomplete="off"
+                  autocorrect="off"
+                  autocapitalize="off"
+                  spellcheck="false"
+                  data-1p-ignore="true"
+                  data-lpignore="true"
+                  data-form-type="other"
+                  data-bwignore="true"></textarea>
+                <button id="send-btn" class="btn btn-primary btn-sm flex-shrink-0">Send</button>
+                <button id="stop-btn" class="btn btn-error btn-sm hidden flex-shrink-0">■</button>
               </div>
             </div>
           </div>