claude-simple 0.2.2 → 0.2.3

package/public/shell/dashboard.js

@@ -266,7 +266,70 @@ export function updateRecentSessionsList(sessions) {
 }
 
 export function closeRecentMenu() {
-  $('recent-menu')?.classList.add('hidden');
+  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. */

package/public/shell/templates.js

@@ -61,24 +61,15 @@ export const AppShell = (opts = {}) => {
         </div>
       </div>
       <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"
-                title="最近会话 / 快速跳转">
+        <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 id="recent-menu" class="hidden absolute left-0 top-full mt-1 z-50 w-80 max-h-[min(24rem,70vh)] overflow-y-auto
-             rounded-lg border border-base-300 bg-base-100 shadow-xl p-2">
-          <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">Recent sessions</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>
       </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>
@@ -88,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">

package/public/shell.js

@@ -26,7 +26,7 @@ import { openMetaAgent, toggleMetaAgent } from './agent-panel.js';
 import { AuthScreen, AppShell } from './shell/templates.js';
 import {
   updateDashboard, shiftCalMonth, setSelectedCalDate, getDashboardSessions,
-  renderRecentSessionsMenu, closeRecentMenu,
+  openRecentMenu, toggleRecentMenu, closeRecentMenu, positionRecentMenu,
 } from './shell/dashboard.js';
 import {
   loadAllSessions, loadWorkspaces, renderSessionList, syncSidebarChrome,
@@ -570,26 +570,43 @@ export function initShell(opts = {}) {
     }
   });
   delegate.on('click', '#btn-recent-sessions', e => {
+    e.preventDefault();
     e.stopPropagation();
     closeMachineMenu();
-    const menu = $('recent-menu');
-    if (!menu) return;
-    if (menu.classList.contains('hidden')) {
-      renderRecentSessionsMenu(getDashboardSessions());
-      menu.classList.remove('hidden');
-    } else {
-      menu.classList.add('hidden');
-    }
+    toggleRecentMenu(getDashboardSessions());
+    const open = !$('recent-menu')?.classList.contains('hidden');
+    const btn = $('btn-recent-sessions');
+    if (btn) btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+  });
+  delegate.on('click', '#recent-menu-backdrop', e => {
+    e.preventDefault();
+    e.stopPropagation();
+    closeRecentMenu();
+    $('btn-recent-sessions')?.setAttribute('aria-expanded', 'false');
   });
   document.addEventListener('click', e => {
     const machineWrap = $('machine-menu-wrap');
     if (machineWrap && !machineWrap.contains(e.target)) closeMachineMenu();
-    const recentWrap = $('recent-menu-wrap');
-    if (recentWrap && !recentWrap.contains(e.target)) closeRecentMenu();
+    const menu = $('recent-menu');
+    const btn = $('btn-recent-sessions');
+    const t = e.target;
+    // Menu is portaled (fixed) outside the button wrap — check both
+    if (menu && !menu.classList.contains('hidden')) {
+      if (menu.contains(t) || btn?.contains(t)) return;
+      closeRecentMenu();
+      btn?.setAttribute('aria-expanded', 'false');
+    }
+  });
+  // Keep panel glued under topbar on rotate / URL bar show-hide
+  window.addEventListener('resize', () => {
+    if ($('recent-menu') && !$('recent-menu').classList.contains('hidden')) {
+      positionRecentMenu();
+    }
   });
   // After picking a session from the topbar menu, close it (row click also resumes).
   delegate.on('click', '#recent-menu [data-session-id]', () => {
     closeRecentMenu();
+    $('btn-recent-sessions')?.setAttribute('aria-expanded', 'false');
   });
 
   delegate.on('click', '#btn-edit-project-notes, #project-goal-text, #project-notes-text', () => {

package/public/style.css

@@ -931,17 +931,43 @@ html.pwa-standalone .ma-panel {
   transition: background-color 99999s ease-in-out 0s;
 }
 
-/* Recent sessions topbar menu */
+/* Recent sessions panel (position set in JS under topbar; never use top:100% with fixed) */
 #recent-menu {
   min-width: 16rem;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+#recent-menu.recent-menu-open {
+  display: block; /* beat .hidden if both race */
 }
 @media (max-width: 640px) {
-  #recent-menu-wrap #recent-menu {
-    position: fixed;
-    left: 0.5rem;
-    right: 0.5rem;
+  #recent-menu {
+    min-width: 0;
     width: auto;
-    max-width: none;
+  }
+  /* Keep 最近 + hamburger reachable; tuck secondary actions */
+  #topbar {
+    overflow: visible;
+    gap: 0.35rem;
+  }
+  #topbar .topbar-actions {
+    gap: 0.25rem;
+    flex-shrink: 0;
+  }
+  #btn-theme,
+  #btn-settings,
+  #btn-logout,
+  #btn-pwa-install {
+    display: none !important;
+  }
+  #topbar-project {
+    font-size: 11px;
+    max-width: 30vw;
+  }
+  #recent-menu-list .recent-menu-item {
+    min-height: 44px; /* comfortable touch targets */
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
   }
 }
 #chat-input:focus,

package/public/sw.js

@@ -1,12 +1,12 @@
 /* Agent UI service worker — cache shell assets only.
  * Never intercepts WebSocket or mutates API semantics beyond offline fallback.
  * Bump CACHE when shipping UI that must invalidate old shells. */
-const CACHE = 'agent-ui-shell-v6';
+const CACHE = 'agent-ui-shell-v7';
 const PRECACHE = [
   '/',
   '/index.html',
   '/manifest.webmanifest',
-  '/style.css?v=ui-8',
+  '/style.css?v=ui-9',
   '/style.css',
   '/app.js',
   '/icons/icon-192.png',