claude-simple 0.2.1 → 0.2.3

package/public/shell.js

@@ -24,7 +24,10 @@ import { initSettings, openSettings } from './settings.js';
 import { openMetaAgent, toggleMetaAgent } from './agent-panel.js';
 
 import { AuthScreen, AppShell } from './shell/templates.js';
-import { updateDashboard, shiftCalMonth, setSelectedCalDate, getDashboardSessions } from './shell/dashboard.js';
+import {
+  updateDashboard, shiftCalMonth, setSelectedCalDate, getDashboardSessions,
+  openRecentMenu, toggleRecentMenu, closeRecentMenu, positionRecentMenu,
+} from './shell/dashboard.js';
 import {
   loadAllSessions, loadWorkspaces, renderSessionList, syncSidebarChrome,
   refreshModelSelect, refreshEffortSelect, promptCustomModel,
@@ -555,6 +558,7 @@ export function initShell(opts = {}) {
   });
   delegate.on('click', '#btn-machine-menu', async e => {
     e.stopPropagation();
+    closeRecentMenu();
     const menu = $('machine-menu');
     if (!menu) return;
     if (menu.classList.contains('hidden')) {
@@ -565,9 +569,44 @@ export function initShell(opts = {}) {
       menu.classList.add('hidden');
     }
   });
+  delegate.on('click', '#btn-recent-sessions', e => {
+    e.preventDefault();
+    e.stopPropagation();
+    closeMachineMenu();
+    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 wrap = $('machine-menu-wrap');
-    if (wrap && !wrap.contains(e.target)) closeMachineMenu();
+    const machineWrap = $('machine-menu-wrap');
+    if (machineWrap && !machineWrap.contains(e.target)) closeMachineMenu();
+    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

@@ -11,16 +11,66 @@
     padding-bottom: env(safe-area-inset-bottom, 0px);
   }
   #sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.4); }
+
+  /* Compact chat composer on phones — less height, less dead space under bar */
+  #composer-row {
+    gap: 0.4rem;
+    padding: 0.4rem 0.55rem 0.35rem !important;
+  }
+  #chat-input.chat-input,
+  #chat-input {
+    min-height: 36px !important;
+    max-height: 96px !important;
+    padding: 0.4rem 0.65rem !important;
+    border-radius: 0.65rem;
+    /* 16px prevents iOS Safari auto-zoom on focus */
+    font-size: 16px !important;
+    line-height: 1.35 !important;
+  }
+  #btn-opts,
+  #send-btn,
+  #stop-btn {
+    height: 36px !important;
+    min-height: 36px !important;
+    padding-left: 0.65rem;
+    padding-right: 0.65rem;
+  }
+  #chat-opts {
+    padding-top: 0.35rem !important;
+    padding-left: 0.55rem !important;
+    padding-right: 0.55rem !important;
+    gap: 0.35rem !important;
+  }
+  #scroll-nav {
+    bottom: 4.5rem !important;
+  }
+  /* File list actions always visible on touch (no hover) */
+  .file-row-action {
+    opacity: 1 !important;
+  }
+}
+
+/* File row actions: hover-reveal on desktop only */
+@media (min-width: 641px) {
+  .file-row-action {
+    opacity: 0;
+  }
+  .group:hover .file-row-action,
+  .group:focus-within .file-row-action {
+    opacity: 1;
+  }
 }
 
 /*
- * PWA standalone safe areas:
+ * Safe areas (PWA + mobile Safari with viewport-fit=cover):
  * Do NOT pad the whole body (that leaves a dead empty strip under the chat bar).
  * Paint chrome into the insets; only inset interactive content.
  */
 html, body {
   height: 100%;
   height: 100dvh;
+  max-height: 100dvh;
+  overflow: hidden;
 }
 html.pwa-standalone,
 html.pwa-standalone body {
@@ -34,8 +84,12 @@ html.pwa-standalone #topbar {
   padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
   padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
 }
-/* Chat composer: sit above home indicator (background fills the inset) */
-html.pwa-standalone #chat-composer {
+/*
+ * Chat composer: background fills home-indicator inset.
+ * Inner #composer-row already has small padding; only add safe-area beyond that
+ * so we don't stack large empty strips under the input.
+ */
+#chat-composer {
   padding-bottom: env(safe-area-inset-bottom, 0px);
   padding-left: env(safe-area-inset-left, 0px);
   padding-right: env(safe-area-inset-right, 0px);
@@ -829,6 +883,12 @@ html.pwa-standalone .ma-panel {
 
 /* ── Chat composer ───────────────────────────────────────────────────────── */
 /* Single outer border only — no DaisyUI nested focus ring / inner outline. */
+#composer-row #btn-opts,
+#composer-row #send-btn,
+#composer-row #stop-btn {
+  height: 40px;
+  min-height: 40px;
+}
 #chat-input.chat-input,
 #chat-input {
   width: 100%;
@@ -844,6 +904,71 @@ html.pwa-standalone .ma-panel {
   --tw-ring-shadow: 0 0 #0000 !important;
   --tw-ring-offset-shadow: 0 0 #0000 !important;
   transition: border-color .15s ease;
+  /* Avoid iOS inherited large text scaling making the box look oversized */
+  -webkit-text-size-adjust: 100%;
+}
+/* Kill browser password/contact autofill widgets (side checkmarks / arrows) */
+#chat-input::-webkit-contacts-auto-fill-button,
+#chat-input::-webkit-credentials-auto-fill-button,
+#chat-input::-webkit-strong-password-auto-fill-button,
+#ma-input::-webkit-contacts-auto-fill-button,
+#ma-input::-webkit-credentials-auto-fill-button {
+  visibility: hidden !important;
+  display: none !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  right: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  opacity: 0 !important;
+}
+#chat-input:-webkit-autofill,
+#chat-input:-webkit-autofill:hover,
+#chat-input:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px var(--color-base-100) inset !important;
+  transition: background-color 99999s ease-in-out 0s;
+}
+
+/* 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 {
+    min-width: 0;
+    width: auto;
+  }
+  /* 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,
 #chat-input:focus-visible {

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-v3';
+const CACHE = 'agent-ui-shell-v7';
 const PRECACHE = [
   '/',
   '/index.html',
   '/manifest.webmanifest',
-  '/style.css?v=boot-2',
+  '/style.css?v=ui-9',
   '/style.css',
   '/app.js',
   '/icons/icon-192.png',

package/src/app.js

@@ -383,7 +383,10 @@ function markSessionIdle(sessionId, tempKey) {
   }
 }
 
-/** Shrink history payloads: huge tool inputs dominate mobile transfers. */
+/** Max JSON chars kept per tool_use input in history payloads (traffic). */
+const HISTORY_TOOL_INPUT_MAX = 100;
+
+/** Shrink history payloads: tool inputs dominate mobile / hub transfers. */
 function compactHistoryMessages(messages) {
   if (!Array.isArray(messages)) return messages;
   return messages.map((m) => {
@@ -392,8 +395,15 @@ function compactHistoryMessages(messages) {
       let raw;
       try { raw = typeof m.input === 'string' ? m.input : JSON.stringify(m.input); }
       catch { raw = String(m.input); }
-      if (raw.length > 1600) {
-        return { ...m, input: { _truncated: true, preview: raw.slice(0, 1600), bytes: raw.length } };
+      if (raw.length > HISTORY_TOOL_INPUT_MAX) {
+        return {
+          ...m,
+          input: {
+            _truncated: true,
+            preview: raw.slice(0, HISTORY_TOOL_INPUT_MAX),
+            bytes: raw.length,
+          },
+        };
       }
     }
     if (m.type === 'text' && typeof m.content === 'string' && m.content.length > 48_000) {
@@ -407,8 +417,12 @@ function compactHistoryMessages(messages) {
 export function createApp() {
   const app = express();
 
-  // Gzip JSON/text API responses when client accepts it (hub tunnel + mobile).
+  // Gzip JSON/text API responses when client accepts it (mobile / direct browser).
+  // Skip for hub-proxied edge traffic: Node fetch auto-decompresses gzip while
+  // still advertising Content-Encoding, which breaks the browser after tunnel
+  // re-delivery. Control WS already uses perMessageDeflate.
   app.use((req, res, next) => {
+    if (req.headers['x-hub-token']) return next();
     const ae = req.headers['accept-encoding'] || '';
     if (!/\bgzip\b/i.test(ae) || req.method === 'HEAD') return next();
     const origJson = res.json.bind(res);
@@ -548,8 +562,12 @@ export function createApp() {
       const stat = await fs.stat(filePath);
       if (req.query.download === 'true') {
         const name = path.basename(filePath);
-        res.setHeader('Content-Disposition', `attachment; filename="${name}"`);
+        // ASCII fallback + RFC 5987 so Chinese / spaces filenames download correctly.
+        const ascii = name.replace(/[^\x20-\x7E]/g, '_').replace(/["\\]/g, '_');
+        const star = encodeURIComponent(name).replace(/['()]/g, c => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
+        res.setHeader('Content-Disposition', `attachment; filename="${ascii || 'download'}"; filename*=UTF-8''${star}`);
         res.setHeader('Content-Type', 'application/octet-stream');
+        res.setHeader('Cache-Control', 'no-store');
         return fsSync.createReadStream(filePath).pipe(res);
       }
       // Office / PDF / binary previews need more headroom than plain text
@@ -881,11 +899,11 @@ export function createApp() {
       const { sessionId } = req.params;
       if (!/^[0-9a-f-]{36}$/i.test(sessionId)) return res.status(400).json({ error: 'Invalid session id' });
       const preferred = typeof req.query.agent === 'string' ? req.query.agent : null;
-      // tail=0 → full history; default last 80 messages (mobile-friendly)
-      let tail = parseInt(req.query.tail ?? '80', 10);
-      if (Number.isNaN(tail)) tail = 80;
+      // tail=0 → full history (default). Positive = last N messages only.
+      let tail = parseInt(req.query.tail ?? '0', 10);
+      if (Number.isNaN(tail)) tail = 0;
       if (tail < 0) tail = 0;
-      if (tail > 2000) tail = 2000;
+      if (tail > 50_000) tail = 50_000;
       const compact = req.query.compact !== '0' && req.query.compact !== 'false';
       const opts = {
         claudeConfigDirs: CLAUDE_CONFIG_DIRS,

package/src/runtime/protocol.js

@@ -138,9 +138,9 @@ export const UI_EVENT = {
 /**
  * Compact tool_use inputs before they hit the wire (mobile tunnel cost).
  * @param {unknown} input
- * @param {number} [max=1200]
+ * @param {number} [max=100]
  */
-export function compactToolInput(input, max = 1200) {
+export function compactToolInput(input, max = 100) {
   if (input == null) return input;
   let raw;
   try {